So liefern Sie eine React Native-App an den Client

Wenn Sie einige React Native-Apps geschrieben haben, ist Ihnen wahrscheinlich aufgefallen, dass für die Erstellung der Beta-Release-Version viele wiederholbare Schritte erforderlich sind. Dies gilt insbesondere für plattformübergreifende Apps.

Sehen wir uns die Handlungsschritte an, die Sie ausführen müssen, um die Beta-Version der App für den Client oder Tester bereitzustellen:

  • Laden Sie den richtigen Zweig aus dem Repository herunter

Android:

  • Fügen Sie den APK-Signaturschlüssel in das Verzeichnis ./android/app/ ein
  • Erstellen Sie die Release-Version
  • Versenden Sie die App beispielsweise per E-Mail

iOS:

  • Starten Sie Xcode
  • Ändern Sie das Schema in Freigeben
  • Ändern Sie den jsCodeLocation-Wert in einen statischen main.jsbundle-Dateipfad
  • Archiv
  • Laden Sie die App auf TestFlight hoch

Wie Sie sehen können, enthält die obige Liste eine große Anzahl wiederholbarer Schritte. Da sie wiederholbar sind, können wir sie automatisieren, oder?

Mögliche Lösungen

Es gibt verschiedene Lösungen zur Automatisierung der Erstellung von Betaversionen und zur Bereitstellung der App für den Client.

Visual Studio App Center

Die erste Lösung, die uns bei Brainhub in den Sinn kam, war die Verwendung des Visual Studio App Centers. Ein von Microsoft erstelltes Projekt scheint wirklich attraktiv zu sein. Neben der Erstellung der App in der Cloud (kostenlos 240 Minuten / Monat) und der Verteilung zwischen Testern und Kunden bietet es auch eine Plattform zum Testen von Apps auf vielen realen Geräten. Zugriff auf Berichte und Screenshots aller Prozessschritte.

Es stellte sich jedoch schnell heraus, dass dies nicht die geeignete Lösung für unser spezielles Projekt war. VS App Center verfügt über eingeschränkte Konfigurationsmöglichkeiten und der Code der App muss aus dem Git-Repository heruntergeladen werden, das auf GitHub, Bitbucket oder VSTS gehostet wird. Aufgrund der Tatsache, dass wir GitLab verwenden, mussten wir diese Lösung ausschließen (aber es könnte für Ihr Projekt funktionieren).

HockeyApp (mit Fastlane)

Die nächste Option war HockeyApp - ein Tool für die Verteilung von Apps und das Sammeln von Absturzberichten und Benutzerfeedback. Der Dienst wurde ursprünglich für die Verteilung von iOS-Apps mithilfe der Ad-hoc-Methode (außerhalb des App Store) erstellt. Derzeit funktioniert er jedoch auch für Android.

HockeyApp funktioniert gut als Bereitstellungsplattform für Softwaretestversionen, bietet jedoch nicht die Funktionalität zum Erstellen der App. Wir können jedoch auch Fastlane verwenden - ein von fabric.io erstelltes Tool für die Prozessautomatisierung bei der Erstellung mobiler Apps.

Vorbereitungen

Bevor Sie mit dem Erstellen und Bereitstellen der App beginnen, sollten Sie die Umgebung vorbereiten. In diesem Abschnitt werden die Schritte beschrieben, die Sie zuerst ausführen sollten.

Automatische Änderung von jsCodeLocation

In der Dokumentation von React Native heißt es, dass Sie jsCodeLocation in das statische js-Bundle für die iOS-Release-Version in der Datei AppDelegate.m ändern sollten. Sie müssen dies jedoch nicht jedes Mal manuell tun, wenn Sie die App freigeben. Sie können das Makro # ifdef DEBUG verwenden, um dies automatisch zu tun. Ersetzen Sie einfach die Zeile mit jsCodeLocation =… durch den folgenden Code.

#ifdef DEBUG
  // DEV
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot: @ ”index” fallbackResource: nil];
#sonst
  // PROD
  jsCodeLocation = [[NSBundle mainBundle] URLForResource: @ ”main” withExtension: @ ”jsbundle”];
#endif

Hilfedateien ignorieren

Während des Erstellens der App werden einige Hilfedateien erstellt. Es ist nicht erforderlich, sie in das Repository zu übernehmen. Fügen Sie sie einfach der folgenden ".gitignore" -Datei hinzu.

# Bereitstellung
* .cer
* .jsbundle
* .jsbundle.meta
* dSYM.zip
* .keystore
* .mobileprovision
fastlane / report.xml

APK-Signaturschlüssel

Um eine Android-App freizugeben, benötigen Sie einen Signaturschlüssel. Weitere Informationen zu diesem Vorgang finden Sie hier.

Wenn Sie Ihren Schlüssel generiert haben, verschieben Sie ihn in das Verzeichnis "android / app" und denken Sie daran, * .keystore zu ".gitignore" hinzuzufügen.

Fastlane + HockeyApp + Testflug

Sie erfahren, wie Sie eine in React Native für Android- und iOS-Plattformen geschriebene App automatisch generieren und an HockeyApp (Android) und Testflight (iOS) senden.

Lassen Sie uns zuerst Fastlane installieren. Stellen Sie sicher, dass Sie die neueste Version der Xcode-Befehlszeilentools installiert haben.

xcode-select - installieren

Installieren Sie Fastlane.

[sudo] gem install fastlane -NV` oder `brew cask install fastlane`

Init Fastlane.

Fastlane Init

Mit dem obigen Befehl wird das FastLane-Verzeichnis im aktuellen Verzeichnis mit einer Datei namens FastFile erstellt, die die FastLane-Konfiguration enthält.

Appfile

Erstellen Sie im Verzeichnis "fastlane" eine Datei mit dem Namen "Appfile", in der Daten gespeichert werden, die in allen Fastlane-Tools verwendet werden, z. B. AppleID. Es ist erforderlich, damit iOS für Testflight erstellt und bereitgestellt werden kann.

Fügen Sie Ihre AppleID zu "Appfile" hinzu.

apple_id "your_apple_id@example.com"

Fastfile

Ihre Beta-Version von Fastfile könnte so aussehen.

# Weitere Dokumentation zum Anpassen Ihres Builds
# finden Sie hier:
# https://docs.fastlane.tools
# fastlane_version “2.68.0”
# Fastfile-Aktionen akzeptieren zusätzliche Konfiguration, aber
# Keine Sorge, fastlane fordert Sie zur Eingabe der erforderlichen Daten auf
# info, die Sie später hier hinzufügen können
Plattform: ios tun
  lane: beta do
    verify_git_branch (
      Zweig: "Meister"
    )
    git_pull
    increment_build_number (
      xcodeproj: "./ios/yourProject.xcodeproj"
    )
    get_certificates
    get_provisioning_profile (
      app_identifier: "org.you.yourProject"
    )
    # Erstellen Sie Ihre iOS-App
    build_ios_app (
      Projekt: "./ios/yourProject.xcodeproj",
      Schema: "yourProjectRelease",
      export_method: "app-store"
    )
    # Testflug
    Pilot()
  Ende
Ende
Plattform: Android zu tun
  lane: beta do
    verify_git_branch (
      Zweig: "Meister"
    )
    git_pull
    # Die Release-Variante erstellen
    gradle (aufgabe: "clean", projektverzeichnis: "android /")
    gradle (aufgabe: "assemble", build_type: "release", project_dir: "android /")
    # auf HockeyApp hochladen
    Eishockey(
      api_token: "YOUR_TOKEN"
    )
  Ende
Ende

Lassen Sie uns unser "Fastfile" Schritt für Schritt analysieren.

Der folgende Codeblock wird ausgeführt, nachdem Fastlane iOS Beta in die Konsole eingegeben wurde.

Plattform: ios tun
  lane: beta do
    #…
  Ende
Ende

Für Android typefastlane android beta.

Plattform: Android zu tun
  lane: beta do
    #…
  Ende
Ende

Stellen Sie sicher, dass der aktuelle Zweig master ist, und führen Sie git pull aus, um die Synchronisierung mit dem Remote-Repository durchzuführen.

verify_git_branch (
  Zweig: "Meister"
)
git_pull

Nur für iOS

Erhöhen wir die Build-Nummer (funktioniert nur für iOS). Die Anwendung, die an Testflight gesendet wird, muss eine höhere Build-Nummer als die vorherige Version haben.

increment_build_number (
  xcodeproj: "./ios/yourProject.xcodeproj"
)

Testflug und Ad-hoc-Verteilung erfordern das richtige Zertifikat und Bereitstellungsprofil. Es gibt verschiedene Methoden zum Signieren von Apps:

  • Spiel
  • cert und seufzen
  • Xcodes Code-Signaturfunktion
  • manuell

In diesem Artikel wurde cert und sigh verwendet. Weitere Informationen zum Code-Signieren mit Fastlane finden Sie auf dieser Website.

get_certificates
get_provisioning_profile (app_identifier: "org.you.yourProject")

Als Nächstes wird die iOS-Version erstellt, in der die Parameter wie Projektpfad, Schema und export_method übergeben werden. Exportmethode enthält einen der folgenden Werte: App-Store, Ad-hoc, Paket, Unternehmen, Entwicklung oder Entwickler-ID.

build_ios_app (
  Projekt: "./ios/yourProject.xcodeproj",
  Schema: "yourProjectRelease",
  export_method: "app-store"
)

Der letzte Schritt für iOS ist das Senden der App an Testflight.

Pilot()

Nur für Android

Schauen wir uns nun die Android-Version an. Es gibt zwei verschiedene Schritte: Bereinigen und Erstellen der Release-Version.

gradle (aufgabe: "clean", projektverzeichnis: "android /")
gradle (aufgabe: "assemble", build_type: "release", project_dir: "android /")

Jetzt können Sie die generierte App an HockeyApp senden.

Eishockey(
  api_token: "YOUR_TOKEN"
)

Wenn Sie keine erforderlichen Parameter hinzufügen, z. B. kein iTunes Connect-Benutzer in Fastfile, werden Sie von Fastlane in der Konsole nach diesen Daten gefragt.

HockeyApp-Konfiguration

Nach der Anmeldung und der Anmeldung bei HockeyApp sehen Sie die blaue Schaltfläche "Neue App".

Nach dem Drücken dieser Taste wird ein Dialogfeld angezeigt. Wählen Sie die Option „App stattdessen manuell erstellen“.

Auf dem nächsten Bildschirm können Sie Anwendungsdaten wie CFBundleIdentifier aus der Datei "Info.plist" für iOS und aus dem Paket "AndroidManifest.xml" für Android hinzufügen. Basierend auf diesem Wert verbindet HockeyApp die hochgeladene App mit der App, die Sie jetzt in der HockeyApp erstellen.

Nach dem Speichern der Daten zeigt HockeyApp den Anwendungsbildschirm an. Sie können Benutzer einladen, die App von dort aus zu testen. Nachdem sie die Einladung angenommen haben, erhalten sie Benachrichtigungen über jede neue Version der App.

Navigieren Sie zu den Benutzereinstellungen, um das Token zu generieren, das zum Senden von Apps mit Fastlane erforderlich ist.

Fügen Sie das Token in Fastfile ein.

Eishockey(
  api_token: "token_goes_here"
)

Testflug Konfiguration

Nach der Anmeldung und Anmeldung bei iTunes Connect müssen Sie eine neue Anwendung erstellen. Wählen Sie im Feld "Bundle-ID" eines der Zertifikate aus, mit denen Sie die App signieren. Wenn Sie nicht über das Label "Neue Bundle-ID im Developer Portal registrieren" verfügen, erstellen Sie ein Zertifikat und wählen Sie es im Feld "Bundle-ID" aus.

Erstellen Sie das Zertifikat „App Store and Ad Hoc“.

Ausführen des Skripts

Jetzt können Sie die App erstellen und auf HockeyApp und Testflight hochladen.

Fastlane iOS Beta & & Fastlane Android Beta

Wenn die folgende Fehlermeldung angezeigt wird: [Transporter-Fehlerausgabe]: Zustellung konnte nicht gestartet werden: Alle Transporte sind fehlgeschlagen. Ihr Computer befindet sich hinter einer Firewall, die die von Aspera oder Signiant benötigten Ports blockiert, die von iTunes Connect Transporter verwendet werden.

In diesem Fall sollten Sie das DAV-Protokoll verwenden, das eine Erweiterung von HTTP ist. Fügen Sie dazu die folgende Zeile in den obigen Code ein.

DELIVER_ITMSTRANSPORTER_ADDITIONAL_UPLOAD_PARAMETERS = \ "- t DAV \" Fastlane Beta && Fastlane Android Beta

Nach Ausführung des Befehls informiert Sie Fastlane über die ausgeführten Schritte.

In den Schritten get_certificates, get_provisioning_profile, pilot werden Sie nach Ihrer Apple-ID gefragt, wenn Sie diese nicht in das "Appfile" eingefügt haben.

Nach erfolgreicher Einreichung von Testflügen erstellt Fastlane die Android-Version und sendet sie an HockeyApp.

Zusammenfassung

Erinnern Sie sich an die neun wiederholbaren Schritte vom Anfang dieses Artikels? Wenn nicht, erinnere ich Sie daran:

  • Laden Sie den richtigen Zweig aus dem Repository herunter

Android:

  • Fügen Sie den APK-Signaturschlüssel in das Verzeichnis ./android/app/ ein
  • Erstellen Sie die Release-Version
  • Versenden Sie die App beispielsweise per E-Mail

iOS:

  • Starten Sie Xcode
  • Ändern Sie das Schema in Freigeben
  • Ändern Sie den jsCodeLocation-Wert in einen statischen main.jsbundle-Dateipfad
  • Archiv
  • Laden Sie die App auf TestFlight hoch

Nach Abschluss dieses Lernprogramms müssen Sie nur noch Fastlane ausführen.

Es gibt verschiedene Tools für die Automatisierung der Generierung und Verteilung von React Native-Apps auf dem Markt. Wenn Sie die App nicht in der Cloud erstellen müssen und den gesamten Prozess unter Ihrer Kontrolle haben möchten, kann Fastlane mit Diensten wie HockeyApp, Crashlytics, Google Play und Testflight Sie dabei unterstützen.

Dies wurde auf Brainhubs Blog hier veröffentlicht.

Lesen Sie auch unsere anderen Artikel zu React Native wie "Wie verwende ich OpenCV in React Native für die Bildverarbeitung?".

Suchen Sie Hilfe beim Erstellen Ihrer React Native- oder React-Anwendung? Melde dich.