So implementieren Sie Microsoft CodePush in Ihren Workflow zur Entwicklung mobiler Apps

CODE-PUSH

Eine React Native-App besteht aus JavaScript-Dateien und allen dazugehörigen Bildern. Der Metro-Bundler muss sie jedoch als Teil einer plattformspezifischen Binärdatei bündeln und verteilen. Das ist eine .ipa- oder .apk-Datei.

Nach dem Start der App erfordert das Aktualisieren des JavaScript-Codes, was das Beheben von Fehlern beinhalten kann,

und das Hinzufügen neuer Funktionen oder Bildressourcen eine Neukompilierung und Neuverteilung der gesamten Binärdatei, was die mit den Stores verbundene Überprüfungszeit einschließt, in denen Sie veröffentlichen.

Das CodePush-Plugin verfügt über eine Sicherungsfunktion für eine schnelle und einfache Wiederherstellung. Es verwaltet eine Kopie des vorherigen Updates, damit Sie im Falle eines Absturzes während des Updates ein automatisches Rollback durchführen können. Die Rollback-Funktion ist auch für Endbenutzer gut, da sie ihnen eine funktionierende Version ermöglicht. Das Rollback macht Ausfallzeiten überflüssig, da Sie schnell ein Rollback durchführen können.

Beachten Sie bitte, dass Sie das CodePush-Plug-In nur über die Stores zur Verteilung verwenden können, wenn Ihre Änderungen Modifikationen von nativem Code wie Ihrer Datei AppDelegate.m/MainActivity.java umfassen.

App Center-Befehlszeilenschnittstelle (CLI)

Die App Center-Befehlszeilenschnittstelle (CLI) ist ein einheitliches Tool zum Ausführen von App Center-Diensten über die Befehlszeile. Integrieren Sie den App Center-Befehl mithilfe des folgenden Befehls.

npm install -g appcenter-cli
Melden Sie sich bei App Center an, um CodePush zu verwenden

• Erstellen Sie Ihr Projekt im App Center
• Fügen Sie Ihren Projektnamen, den Release-Typ, das Betriebssystem und die Plattform hinzu
• Erstellen Sie einen Code Push-Bereitstellungsschlüssel für Produktion und Entwicklung

App Center integrieren mit folgendem Befehl:

bashCopy codenpm install appcenter appcenter-analytics appcenter-crashes --save-exact

Android:

Erstellen Sie eine neue Datei mit dem Namen appcenter-config.json im Verzeichnis android/app/src/main/assets/ mit folgendem Inhalt:

jsonCopy code{  
  "app_secret": "{Ihr App-Geheimnis hier}"
}

Ändern Sie die Datei res/values/strings.xml der App, um die folgenden Zeilen hinzuzufügen:

xmlCopy code<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

Fügen Sie den CodePushDeploymentKey in die Datei strings.xml ein. Ihre strings.xml sollte wie folgt aussehen:

xmlCopy code<resources>     
  <string name="app_name">AppName</string>     
  <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
</resources>

---

iOS:

Führen Sie den folgenden Befehl aus:

bashCopy codepod install --repo-update

Ändern Sie die Datei AppDelegate.m oder AppDelegate.mm, um den SDK-Startcode hinzuzufügen:

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

Fügen Sie diese Zeilen in die Methode application:didFinishLaunchingWithOptions: ein:

objcCopy code[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

Erstellen Sie eine neue Datei mit dem Namen AppCenter-Config.plist im Verzeichnis ios/ mit folgendem Inhalt:

xmlCopy code<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>AppSecret</key>
  <string>{Ihr App-Geheimnis hier}</string>
</dict>
</plist>

Fügen Sie den CodePushDeploymentKey in die Datei info.plist ein. Diesen Schlüssel finden Sie unter App Center -> Distribution -> Setting -> Production und Staging Key:

xmlCopy code<key>CodePushDeploymentKey</key>
<string>{Ihr App-Deployment-Key}</string>

---

CodePush für Ihre React-Native-App einrichten:

Führen Sie diesen Befehl im Root-Verzeichnis Ihrer App aus:

bashCopy codenpm install --save react-native-code-push

Schritte zur Integration von CodePush in Ihr Android-Projekt:

1. Öffnen Sie die Datei android/settings.gradle und fügen Sie am Ende folgende Zeilen hinzu:

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

2. In der Datei android/app/build.gradle fügen Sie codepush.gradle als zusätzlichen Build-Task hinzu:

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

3. Aktualisieren Sie die Datei MainApplication.java, um CodePush wie folgt zu verwenden:

javaCopy codeimport com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

Schritte zur Integration von CodePush in Ihr iOS-Projekt:

1. Führen Sie folgenden Befehl aus:

bashCopy codecd ios && pod install && cd ..

2. Öffnen Sie die Datei AppDelegate.m und importieren Sie die CodePush-Header:

objcCopy code#import <CodePush/CodePush.h>

3. Finden Sie die Zeile, die die Quelle der URL für das Bridge-Bundle für Produktions-Releases setzt:

objcCopy codereturn [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

4. Ersetzen Sie diese Zeile durch:

objcCopy codereturn [CodePush bundleURL];

Ihre Methode sourceURLForBridge sollte wie folgt aussehen:

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

---

Beispiel: App.js

1. Importieren Sie CodePush.
2. Fügen Sie eine Ansicht mit Hintergrundfarbe hinzu.
3. Erstellen Sie ein Release-APK und installieren Sie es auf Android.
4. Installieren Sie die iOS-Version über TestFlight oder Xcode.

javascriptCopy codeimport 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' }}>
    </View>
  );
}

export default CodePush(App);

---

CodePush verwenden, um eine neue Version bereitzustellen:

Ändern Sie die Hintergrundfarbe von grün auf rot:

javascriptCopy codeimport 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' }}>
    </View>
  );
}

export default CodePush(App);

Führen Sie folgenden Befehl aus:

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

Überprüfen Sie in App Center, ob die Änderung veröffentlicht wurde. Öffnen Sie die App erneut, um die Änderungen in den Android- und iOS-Versionen anzuzeigen.