Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

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

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! Wir setzen voraus, dass Sie das Projekt "Installieren der Mobile SDK-Entwicklertools" erfolgreich abgeschlossen haben. Falls nicht, sollten Sie einen schnellen Abstecher zu diesem Projekt machen, um sicherzustellen, dass Ihre Entwicklungsumgebung ordnungsgemäß konfiguriert ist. Im Anschluss können Sie beginnen, eine einfache native 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.

Nativ, React Native HTML5 Hybrid
Grafik Native APIs HTML, Zeichenbereich, SVG HTML, Zeichenbereich, SVG
Leistung Sehr schnell Schnell Mittelschnell
Erscheinungsbild Nativ Emuliert Emuliert
Verteilung App Stores Web App Store
Kamera Ja Abhängig vom jeweiligen Browser Ja
Benachrichtigungen Ja Nein Ja
Kontakte, Kalender Ja Nein Ja
Offline-Speicherung Sicheres Dateisystem Nicht sicher; gemeinsam genutzte SQL, Schlüssel/Wert-Speicher Sicheres Dateisystem, gemeinsam genutzte SQL (über Cordova-Plug-Ins)
Geotargeting Ja Ja Ja
Streichen Ja Ja Ja
Zusammenführen, Spreizen Ja Ja Ja
Konnektivität Online, offline Meistens online Online, offline
Entwicklungs-Know-how Objective-C, Swift, Java, Kotlin; JavaScript (nur React Native) HTML5, CSS, JavaScript HTML5, CSS, JavaScript

Erstellen von verbundenen Anwendungen

Wichtig

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

  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

    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.

  3. Ö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.
    • remoteAccessConsumerKey: Dieser Wert ist ein Standardplatzhalter. Ersetzen Sie ihn in einer realen Anwendung durch den Rückruf-URL Ihrer verbundenen Anwendung.
  4. Wechseln Sie an der Eingabeaufforderung zum Stammordner der Anwendung und führen Sie cordova prepare aus.
Wichtig

Wichtig

Nachdem Sie eine Änderung im Ordner www/ auf Stammebene vorgenommen haben, wechseln Sie zur Eingabeaufforderung und führen Sie 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

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 SalesforceMobileSDK Google+ Community.

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 <app name>.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 <your_project_dir>/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 Sie 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

Wichtig

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