Erste Schritte mit hybrider Entwicklung

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

• Beschreiben von zwei verschiedenartigen hybriden Anwendungen
  
• Installieren des Mobile SDK für die hybride Entwicklung
  
• Erstellen einer hybriden Mobile SDK-Anwendung mit Cordova
  
• Ausführen Ihrer hybriden Anwendung
  

Hinweis

Lernen Sie auf Deutsch? Beginnen Sie die Aufgabe in einem Trailhead Playground in der Sprache Deutsch und verwenden Sie für die Navigation die in Klammern angegebenen Übersetzungen. Kopieren und fügen Sie nur die Angaben in Englisch ein, da zur Überprüfung der Aufgabe Daten in Englisch benötigt werden. Wenn Sie die Aufgabe in Ihrer deutschen Organisation nicht bestehen, empfehlen wir Ihnen folgende Vorgehensweise: (1) Stellen Sie das Gebietsschema auf USA um, (2) legen Sie Englisch als Sprache fest (Anweisungen dazu finden Sie hier) und (3) klicken Sie erneut auf die Schaltfläche "Check Challenge" (Aufgabe überprüfen).

Weitere Details dazu, wie Sie die übersetzte Trailhead-Umgebung optimal nutzen können, finden Sie unter dem Badge "Trailhead in Ihrer Sprache".

Bevor Sie beginnen

Bevor Sie Schritte in diesem Modul durchführen, sollten Sie unbedingt die praktische Aufgaben in "Einrichten Ihrer Mobile SDK-Entwicklungstools" abschließen und dazu denselben Trailhead Playground verwenden. Die Aufgaben, die Sie bei den praktischen Aufgaben in diesem Modul erledigen, bauen auf den Schritten auf, die Sie in diesem Badge durchführen.

• Einrichten Ihrer Mobile SDK-Entwicklungstools
  

Grundlegendes zur Konzeption der hybriden Entwicklung

Das Mobile SDK bietet die Entwicklung hybrider Anwendungen als plattformübergreifende Alternative zu nativen Anwendungen. Hybride Anwendungen kombinieren die Bequemlichkeit der HTML5-Webanwendungsentwicklung mit der nativen Leistung von iOS und Android. Diese Anwendungen werden in einem Mobile-Container ausgeführt, der den Webanwendungscode analysiert und als nativen Code ausführt. Dieser Container, der auf der Cordova-Technologie von Apache aufbaut, bietet Entwicklern die Möglichkeit, ihren Code in HTML5, JavaScript und CSS zu schreiben. Hybride Anwendungen sind Cordova-Anwendungen, die das Salesforce Mobile SDK-Plug-in verwenden.

Hybride Anwendungen können in zwei Kategorien unterteilt werden:

• Hybrid lokal: Hybride lokale Anwendungen sind Webanwendungen, die lokal im Mobile-Container ausgeführt werden. Diese Anwendungen werden mit der force.js-Bibliothek entwickelt und die zugehörigen HTML-, JavaScript- und CSS-Dateien werden auf dem Gerät des Benutzers gespeichert.
  
• Hybrid remote: Hybride Remote-Anwendungen stellen Visualforce-Seiten über den Mobile-Container bereit. Die HTML-, JavaScript- und CSS-Dateien dieser Anwendungen werden auf dem Salesforce-Server gespeichert.
  

Sie verwenden das forcehybrid npm-Dienstprogramm zum Erstellen eines hybriden Projekts. Sie können dann die Cordova-Befehlszeile verwenden, um weitere Plugins sowie ein Android- oder iOS-Ziel hinzuzufügen. Sie können sogar eine vorhandene Webanwendung wiederverwenden, indem Sie die Quelldateien der jeweiligen Anwendung in das neue Projekt kopieren.

Hybride Projekte enthalten auch den Mobile SDK-Container für die jeweilige Zielplattform. Der Container ist ein natives Projekt, das kaum oder keine Konfiguration erfordert. Er dient zur Laufzeit als Brücke zwischen Web- oder Visualforce-Anwendung und dem Betriebssystem des Geräts.

Auf geht's! Stellen Sie sicher, dass Sie den am Anfang dieser Lektion als Voraussetzung genannten Badge abgeschlossen haben. Im Anschluss können Sie beginnen, eine einfache hybride lokale Anwendung zu erstellen und zu erkunden. Anschließend erkunden Sie, wie eine der Mobile SDK-Beispielanwendungen die force.js-Bibliothek verwendet und erfahren mehr zu hybriden Remote-Anwendungen. Außerdem wird gezeigt, wie das Debuggen von Hybridanwendungen mit Safari- und Chrome-Tools möglich ist.

Wie steht es mit reinen HTML5-Anwendungen?

HTML5-Anwendungen verwenden Standardwebtechnologien, normalerweise HTML5, JavaScript und CSS, um Anwendungen über einen mobilen Webbrowser bereitzustellen. Mit dieser "Write Once, Run Anywhere"-Methode für die mobile Entwicklung können plattformübergreifende mobile Anwendungen erstellt werden, die auf mehreren Geräte funktionsfähig sind. Entwickler können komplexe Anwendungen nur mit HTML5 und JavaScript erstellen, allerdings können dabei einige Probleme ungelöst bleiben. Dazu zählen beispielsweise Sitzungsverwaltung, sichere Offline-Speicherung und Zugriff auf native Gerätefunktionen.

Dieser Trail befasst sich nicht mit der reinen HTML5-Entwicklung.

Vergleich zwischen nativen und mit mehreren Plattformen kompatiblen Architekturen

Die folgende Tabelle enthält eine Übersicht über die verschiedenen Entwicklungsszenarien.

Erstellen von verbundenen Anwendungen

Wichtig: Das Modul Salesforce Mobile SDK – Grundlagen, das Anweisungen für verbundene Anwendungen enthält, ist eine Voraussetzung für dieses Modul. Ohne eine verbundene Anwendung erstellt zu haben, können Sie das Quiz zu dieser Einheit nicht absolvieren.

Um eine Verbindung mit dem Salesforce-Service herzustellen, benötigt jede mobile Anwendung eine mit Salesforce verbundene Anwendung. Eine verbundene Anwendung berechtigt Ihre Anwendung, mit Salesforce zu kommunizieren und sicher auf Salesforce-APIs zuzugreifen.

Nachdem Sie Ihre verbundene Anwendung erstellt haben, beachten Sie ihre Details.

• Kopieren Sie die Werte "Rückmeldungs-URL" und "Verbraucherschlüssel". Diese Werte nutzen Sie zum Einrichten der Authentifizierung in Ihrer Anwendung.
  
• Das Verbrauchergeheimnis wird von Mobile SDK-Anwendungen nicht verwendet. Sie können diesen Wert daher ignorieren.
  

Erstellen einer hybriden Anwendung

Wichtig:

Wenn Sie die für Mobile SDK erforderlichen Tools noch nicht eingerichtet haben, arbeiten Sie zunächst das Trailhead Modul Einrichten Ihrer Mobile SDK-Entwicklungstools durch.

1. Geben Sie in einem Terminalfenster oder einer Windows-Eingabeaufforderung "forcehybrid create" ein.
   
2. Geben Sie die folgenden Werte an den Eingabeaufforderungen ein:
   

• Platform: Eine der folgenden Varianten: ios, android oder ios, android
  
• Anwendungstyp: hybrid_local
  
• Anwendungsname: MyTrailHybridLocal
  
• Paketname: com.mytrail.hybrid
  
• Organisationsname: MyTrail, Inc.
  
• Ausgabeverzeichnis: TrailHybridApps
  

Der Befehl "forcehybrid create" schlägt auf manchen Windows-Geräten fehl. Als Workaround für diesen Fehler führen Sie den Befehl cordova plugin add salesforce-mobilesdk-cordova-plugin@v11.1.0 --force aus. Dieses Problem wird mit Mobile SDK 12.0 behoben.

3. Herzlichen Glückwunsch! Sie haben eine hybride lokale Anwendung erstellt! Das Skript gibt den Projektverzeichnisnamen auf dem Bildschirm aus, sobald es mit dem Erstellen des Projekts fertig ist. Beispiel: "Ihr Anwendungsprojekt steht in <Projektverzeichnisname> bereit." Aktualisieren Sie das neue Projekt nach Anzeige einer Befehlszeilenmeldung mit dem Hinweis, dass das Projekt bereit ist, damit die Einstellungen Ihrer verbundenen Anwendung berücksichtigt werden.
   
4. Öffnen Sie in Ihrem Projektverzeichnis die Datei "www/bootconfig.json" in einem UTF-8-kompatiblen Texteditor und ändern Sie die folgenden Eigenschaften:
   

• remoteAccessConsumerKey: Dieser Wert ist ein Standardplatzhalter. Ersetzen Sie ihn in einer realen Anwendung durch den Verbraucherschlüssel Ihrer verbundenen Anwendung.
  
• oauthRedirectURI: Dieser Wert ist ein Standardplatzhalter. Ersetzen Sie ihn in einer realen Anwendung durch den Rückruf-URL Ihrer verbundenen Anwendung.
  

5. Wechseln Sie an der Eingabeaufforderung zum Stammordner der Anwendung und führen Sie "cordova prepare" aus.
   

Wichtig: Nachdem Sie eine Änderung im Ordner www/ auf Stammebene vorgenommen haben, wechseln Sie zur Eingabeaufforderung und führen "cordova prepare" im Stammordner der Anwendung aus. Mit diesem Befehl werden Ihre Änderungen in die plattformspezifischen Ordner kopiert. Beispiel:

cd ~/<your local path>/TrailHybridApps
cordova prepare

Das forcehypbrid-Dienstprogramm hat seinen Teil erledigt. Wenn Sie "android" als Plattform angegeben haben, steht Ihnen jetzt ein Cordova-Projekt mit einem Unterordner platforms/android/ zur Verfügung, das Sie in Android Studio öffnen können. Haben Sie “Platform” auf “ios” eingestellt, verfügen Sie jetzt über einen Unterordner platforms/ios/, der einen Xcode-Workspace enthält. Falls Sie “Platform” auf “ios,android” eingestellt haben, verfügen Sie sowohl über einen iOS-Workspace als auch über ein Android-Projekt.

Erstellen Sie noch nicht das Projekt! Sie sind noch nicht fertig.

1. Kehren Sie zum Terminal- oder Eingabeaufforderungsfenster zurück.
   
2. Navigieren Sie mit cd zum Projektverzeichnis Ihrer Anwendung.
   
3. (Optional, nur Mac) So fügen Sie später eine zweite Plattform hinzu:
   

• Geben Sie Folgendes ein, um iOS-Unterstützung hinzuzufügen:
  

  cordova platform add ios@5.1.1

• Geben Sie Folgendes ein, um Android-Unterstützung hinzuzufügen:
  

  cordova platform add android@8.1.0

Informationen zu Cordova-Plug-ins

Um die Grundfunktionalität in hybriden Anwendungen zu verbessern, binden Entwickler oftmals Cordova-Plug-ins anderer Anbieter ein. In Ihren eigenen Anwendungen können Sie externe Plug-ins einbinden, indem Sie "cordova plugin add plug-in_name" aufrufen, gefolgt von "cordova prepare".

Wenn Sie andere Plug-Ins zu einer forcehybrid-Anwendung hinzufügen möchten, die ein Android-Projekt enthält, sollten Sie das Salesforce-Plug-In entfernen und danach wieder hinzufügen. Dieser Schritt gilt nicht für reine iOS-forcehybrid-Anwendungen. Hier ist ein Beispiel:

cordova plugin add cordova-plugin-contacts
cordova plugin add cordova-plugin-statusbar
cordova plugin remove com.salesforce
cordova plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin --force

Wichtig: Rufen Sie niemals "cordova plugin add" für andere Plugins von Mobile SDK auf. Diese Plug-ins werden automatisch in forcehybrid-Projekte eingebunden.

Support anfordern

Erhalten Sie unerwartete Suchergebnisse? Da das Hybridmodell auf eine Weise, die sich unserer Kontrolle entzieht, von veränderlichen Elementen abhängt, können unvorhergesehene Dinge eintreten. Ihre beste Anlaufstelle für Fragen ist die Trailblazer Community für das Mobile SDK.

Ausführen Ihrer hybriden Anwendung

Da Ihre Anwendung nun vollständig konfiguriert ist, wollen wir sie in Xcode (für iOS-Anwendungen) oder in Android Studio (für Android-Anwendungen) ausführen.

Ausführen der Anwendung unter iOS

Gehen Sie folgendermaßen vor, um die Anwendung von Xcode aus auszuführen:

1. Wählen Sie in Xcode File | Open aus.
   
2. Navigieren Sie zum Verzeichnis "platforms/ios/" im Verzeichnis der neuen Anwendung.
   
3. Doppelklicken Sie auf die Datei <Anwendungsname>.xcodeworkspace.
   
4. Klicken Sie auf die Schaltfläche "Run" (Ausführen) oben links oder drücken Sie Befehlstaste-R.
   

Ausführen der Anwendung unter Android

Zum Ausführen der Anwendung in Android Studio gehen Sie folgendermaßen vor:

1. Wählen Sie auf dem Willkommensbildschirm die Option Import project (Eclipse ADT, Gradle, etc.) (Projekt importieren (Eclipse ADT, Gradle usw.)) Falls Android Studio bereits ausgeführt wird, wählen Sie File | New | Import Project (Datei > Neu > Projekt importieren) aus.
   
2. Wählen Sie <Ihr_Projektverzeichnis>/platforms/android und klicken Sie auf OK. Wenn Sie aufgefordert werden, den Gradle-Wrapper zu verwenden, bestätigen Sie.
   
3. Nach dem Erstellen des Builds wählen Sie das android-Ziel aus und klicken im Menü oder in der Symbolleiste auf Run 'android' ('android' ausführen).
   
4. Wählen Sie ein verbundenes Android-Gerät oder einen Emulator aus.
   

Nachdem Sie sich bei Salesforce angemeldet haben, zeigt die Anwendung eine Liste mit Benutzern Ihrer Organisation an.

Wichtig: Wenn Android Studio Sie auffordert, Ihre Gradle-Wrapper-Version zu aktualisieren, tun Sie es. Danach importiert Android Studio Ihr Projekt wieder automatisch.

Ressourcen

• Cordova 3.5-Dokumentation
• Hybrid Apps Quick Start
• HTML5 and Hybrid Development
• https://github.com/forcedotcom/SalesforceMobileSDK-Shared