Implémentation de Microsoft CodePush dans votre workflow de développement d’applications mobilesContent: Qu’est-ce que CodePush ?

Qu’est-ce que CodePush ?

Une application React Native est constituée de fichiers JavaScript et d’images associées. Ces éléments doivent être regroupés et distribués sous forme d’un fichier binaire spécifique à la plateforme (.ipa pour iOS et .apk pour Android).

Une fois l’application déployée, toute mise à jour du code JavaScript, incluant les corrections de bugs et l’ajout de nouvelles fonctionnalités, ainsi que les mises à jour des ressources images, nécessitent une recompilation et une redistribution complète du binaire. Cela inclut le temps de validation requis par les magasins d’applications.

Le plugin CodePush permet une mise à jour rapide et simple, en conservant une copie de la version précédente pour réaliser un retour arrière automatique en cas de problème. Cette fonctionnalité assure que les utilisateurs puissent continuer à utiliser une version stable sans interruption.

Cependant, si vos modifications impliquent des changements au niveau du code natif (par exemple, AppDelegate.m ou MainActivity.java), l’utilisation de CodePush pour la distribution ne sera pas possible en dehors des magasins d’applications.

Installation et configuration de CodePush

1. Installation de l’interface en ligne de commande (CLI) App Center

npm install -g appcenter-cli

2. Inscription et configuration sur App Center

• Inscrivez-vous sur App Center.
• Créez un projet en renseignant le nom, le type de version, l’OS et la plateforme.
• Générez une clé de déploiement CodePush pour la production et le développement.

3. Intégration de CodePush dans votre projet

npm install appcenter appcenter-analytics appcenter-crashes --save-exact

Configuration Android

1. Créez un fichier appcenter-config.json dans android/app/src/main/assets/ :

{
  "app_secret": "{Votre app secret ici}"
}

2. Ajoutez les clés de configuration dans res/values/strings.xml :

<resources>
    <string name="app_name">NomDeLApp</string>
    <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
</resources>

Configuration iOS

1. Installez les dépendances CocoaPods :

pod install --repo-update

2. Modifiez AppDelegate.m pour inclure les SDKs :

#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>

3. Ajoutez le fichier AppCenter-Config.plist dans ios/ :

<plist version="1.0">
<dict>
    <key>AppSecret</key>
    <string>{Votre app secret ici}</string>
</dict>
</plist>

4. Ajoutez la clé de déploiement CodePush dans Info.plist.

Intégration de CodePush dans l’application

Installation du package CodePush

npm install --save react-native-code-push

Intégration CodePush pour Android

1. Modifiez android/settings.gradle :

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

2. Ajoutez codepush.gradle dans android/app/build.gradle :

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

3. Mettez à jour MainApplication.java :

import com.microsoft.codepush.react.CodePush;

@Override
protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
}

Intégration CodePush pour iOS

1. Installez les dépendances CocoaPods :

cd ios && pod install && cd ..

2. Modifiez AppDelegate.m pour inclure CodePush :

#import <CodePush/CodePush.h>

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
#if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
    return [CodePush bundleURL];
#endif
}

Déploiement des mises à jour via CodePush

1. Création de l’application avec CodePush activé :

import React from "react";
import { View } from 'react-native';
import CodePush from "react-native-code-push";

function App() {
    return <View style={{ flex: 1.0, backgroundColor: 'green' }} />;
}
export default CodePush(App);

2. Modification de l’application et déploiement de la mise à jour :

import React from "react";
import { View } from 'react-native';
import CodePush from "react-native-code-push";

function App() {
    return <View style={{ flex: 1.0, backgroundColor: 'red' }} />;
}
export default CodePush(App);

3. Déploiement via la ligne de commande :

appcenter codepush release-react -a {appcenter-username}/{appname} -d {Staging/Production}

Après le déploiement, vérifiez sur App Center et redémarrez l’application pour observer les changements appliqués immédiatement sur les versions Android et iOS.