Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Grundlagen zur hybriden Beispielanwendung

Lernziele

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

  • Ausführen der hybriden ContactExplorer-Beispielanwendung
  • Erläutern der Funktionsweise der ContactExplorer-Anwendung
  • Verwalten von Benutzerauthentifizierung und Sitzungserhaltung mit dem Salesforce OAuth-Plug-in

Ausführen der ContactExplorer-Anwendung

Lassen Sie uns die ContactExplorer-Beispielanwendung betrachten, die im Mobile SDK enthalten ist. ContactExplorer ist eine hybride lokale Anwendung, die mehr Funktionen veranschaulicht als die Vorlagenanwendung. Sie können diese Übung unter Mac OS oder Windows durchführen. Das iOS-Ziel kann allerdings nur auf einem Mac vollständig ausgewertet werden.

Vergewissern Sie sich vor Beginn dieser Übung, dass folgende Voraussetzungen erfüllt sind:
  • Es gibt eine Verzeichnis, in dem das duplizierte Repository SalesforceMobileSDK-Shared gespeichert werden kann - Ihr Stammverzeichnis oder ein anderes leicht zugängliches Verzeichnis.
  • Es gibt ein Verzeichnis zum Erstellen und Entwickeln von hybriden Mobile SDK-Projekten. Da Cordova-Projekte sowohl iOS als auch Android-Ziele enthalten können, sollten Sie ein plattformneutrales Verzeichnis verwenden.

Duplizieren Sie als Erstes das freigegebene Repository und erstellen Sie anschließend mit forcehybrid eine Anwendung.

  1. Wechseln Sie an einer Eingabeaufforderung oder im Terminalfenster über cd zum Verzeichnis, in dem Sie das freigegebene Repository duplizieren möchten.
  2. Führen Sie den folgenden Befehl aus.
    git clone https://github.com/forcedotcom/SalesforceMobileSDK-Shared.git
  3. Wechseln Sie über cd zum Verzeichnis, in dem Sie Ihr hybrides Projekt entwickeln möchten.
  4. Führen Sie forcehybrid create mit den folgenden Werten aus:
    Enter the target platform(s) separated by commas (ios, android): ios,android
    Enter your application type (hybrid_local or hybrid_remote, leave empty for hybrid_local): <press RETURN>
    Enter your application name: contactsApp
    Enter the package name for your app (com.mycompany.myapp): com.acmeapps.contactexplorer
    Enter your organization name (Acme, Inc.): AcmeApps.com
    Enter output directory for your app (leave empty for the current directory): <press RETURN>

    Nun, da Sie ein generisches hybrides Projekt haben, können Sie den Beispielcode von contactexplorer hinzufügen.

  5. Führen Sie die folgenden Befehle aus und ersetzen Sie den Platzhalter im Befehl cp durch Ihren lokalen Pfad.
    cd contactsApp
    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
    cp -RL <local path to SalesforceMobileSDK-Shared>/samples/contactexplorer/* www/
    cordova prepare
    Hinweis

    Hinweis

    Windows-Benutzer: Ersetzen Sie in Windows den Befehl copy für den Unix-Befehl cp. Beachten Sie jedoch, dass Dateien in den Unterordnern js und css von "/samples/contactexplorer/" Aliase für Quelldateien in anderen Pfaden sind. Kopieren Sie daher die eigentlichen Quelldateien statt deren Aliase. Hier ist ein Beispiel:

    cd contactsApp
    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
    rem Make a path variable
    set SHAREDPATH=C:\SalesforceMobileSDK-Shared\
    md www
    cd www
    md css
    copy %SHAREDPATH%\samples\common\jquery.mobile-1.3.1.min.css css
    md js
    copy %SHAREDPATH%\test\MockCordova.js js
    copy %SHAREDPATH%\libs\cordova.force.js js
    copy %SHAREDPATH%\libs\force.js js
    copy %SHAREDPATH%\dependencies\jquery\jquery.min.js js
    copy %SHAREDPATH%\samples\common\jquery.mobile-1.3.1.min.js js
    cordova prepare

Das forcedroid-Skript und die folgenden Befehle erstellen ein iOS-Projekt und ein Android-Projekt, die jeweils die ContactExplorer-Beispielanwendung kapseln. Die Anwendung kann jetzt auf einer dieser Plattformen ausgeführt werden. Wenn Sie ein iOS-Gerät verwenden, müssen Sie wie im Xcode-Benutzerhandbuch unter developer.apple.com/library beschrieben ein Profil für den Simulator konfigurieren. Ebenso müssen Android-Geräte wie unter developer.android.com/tools beschrieben eingerichtet werden.

So führen Sie die Anwendung unter iOS aus:
  1. Wechseln Sie über cd zu platforms/ios/.
  2. Führen Sie den folgenden Befehl aus: open contactsApp.xcworkspace
  3. Klicken Sie in Xcode auf Run.
So führen Sie die Anwendung unter Android aus:
  1. Sie müssen das Projekt <Verzeichnis-Ihres-hybriden-Projekts>/contactsApp/platforms/android in Android Studio importieren oder öffnen.
  2. Klicken Sie auf Run.

Wenn Sie die Anwendung ausführen, wird nach einem anfänglichen Begrüßungsbildschirm der Salesforce-Anmeldebildschirm angezeigt.

Mobiler Anmeldebildschirm

Melden Sie sich mit dem Benutzernamen und dem Kennwort Ihrer Developer Edition-Organisation an. Tippen Sie auf Zulassen, damit die Anwendung auf Ihre Salesforce-Daten zugreifen kann. In der Anwendung können Sie dann Listen mit Kontakten und Accounts abrufen. Tippen Sie auf Fetch SFDC contacts, um Salesforce-Kontaktnamen abzurufen, bzw. auf Fetch SFDC Accounts, um Account-Namen aus Ihrer Developer Edition-Organisation abzurufen.

Hybride Beispielanwendung

Bei jedem Tippen hängt die Anwendung Zeilen an eine unendliche Liste an. Blättern Sie nach unten, um die vollständige Liste anzuzeigen.

Hybride Beispielkontakte

Im Folgenden wird die Funktionsweise der Anwendung näher erläutert.

Grundlegende Informationen zur ContactExplorer-Anwendung

Im Folgenden wird die Funktionsweise der ContactExplorer-Anwendung näher erläutert. Die beiden interessantesten Dateien sind "index.html" und "inline.js".

  1. Öffnen Sie im contactsApp-Projekt die Datei www/index.html.
  2. Suchen Sie nach "function onDeviceReady()".

Um eine Benutzersitzung mit force.js zu starten, rufen Sie force.login() auf. Nachdem der Benutzer sich bei einer App anmeldet, die im Container ausgeführt wird, werden die Tokens je nach Bedarf vom Netzwerk-Plug-In aktualisiert, wenn die Anwendung versucht, auf Salesforce-Ressourcen zuzugreifen. Der folgende Code aus dem ContactExplorer-Beispiel zeigt eine typische force.login()-Implementierung.

Wenn das Gerät seine Bereitschaft ankündigt rufen Sie die force.login()-Methode auf, um den Anmeldebildschirm zu posten.

/* Do login */
force.login(
    function() {
        console.log("Auth succeeded"); 
        // Call your app’s entry point
        // ...
    },
    function(error) {
        console.log("Auth failed: " + error); 
    }
);

Nach Abschluss des Anmeldeprozesses zeigt die Anwendung index.html (im Ordner "www") an. Wenn die Seite vollständig geladen wurde und das mobile Framework bereit ist, ruft die jQuery(document).ready()-Funktion regLinkClickHandlers() auf. Diese Funktion (in inline.js) richtet Klickhandler für die verschiedenen Funktionen in der Beispielanwendung ein. Der #link_fetch_sfdc_contacts-Handler führt beispielsweise eine Abfrage mit dem force-Objekt aus.

$j('#link_fetch_sfdc_contacts').click(function() {
    logToConsole("link_fetch_sfdc_contacts clicked");
    force.query("SELECT Name FROM Contact LIMIT 25", 
        onSuccessSfdcContacts, onErrorSfdc); 
});

Das force-Objekt wird bei der anfänglichen OAuth 2.0-Interaktion erstellt und ermöglicht den Zugriff auf die REST-API im Kontext des authentifizierten Benutzers. Hier werden die Namen aller Kontakte in der Developer Edition-Organisation abgerufen. Anschließend rendert onSuccessSfdcContacts() die Kontakte auf der Seite index.html als Liste.

$j('#link_fetch_sfdc_accounts').click(function() {
    logToConsole("link_fetch_sfdc_accounts clicked");
    force.query("SELECT Name FROM Account LIMIT 25", 
        onSuccessSfdcAccounts, onErrorSfdc); 
});

Ähnlich wie der #link_fetch_sfdc_contacts-Handler ruft der #link_fetch_sfdc_accounts-Handler Account-Datensätze über die REST-API ab. Die Handler #link_reset und #link_logout löschen die angezeigte Liste bzw. melden den Benutzer ab.

Beachten Sie, dass die Anwendung auch Kontakte vom Gerät abrufen kann, was mit einer äquivalenten Webanwendung nicht möglich wäre. Der folgende Klickhandler ruft die Gerätekontaktabfrage durch Aufrufen des Cordova-Plug-ins für Kontakte ab.

$j('#link_fetch_device_contacts').click(function() {
    logToConsole("link_fetch_device_contacts clicked");
    var options      = new ContactFindOptions();
    // empty search string returns all contacts
    options.filter   = ""; 
    options.multiple = true;
    options.hasPhoneNumber = true;
    var fields       = 
        [navigator.contacts.fieldType.displayName, 
            navigator.contacts.fieldType.name];
    navigator.contacts.find(fields, onSuccessDevice, 
        onErrorDevice, options);
});

Dieser Handler verwendet die Objekte ContactFindOptions und navigator.contacts aus cordova-plugin-contacts, um eine Suche zu präzisieren und durchzuführen. Er ruft navigator.contacts.find() auf, um eine Liste von Kontakten mit Telefonnummern vom Gerät abzurufen. Die onSuccessDevice()-Funktion (hier nicht gezeigt) rendert die Kontaktliste auf der Seite index.html.

Die force.js-Bibliothek

Ziemlich am Anfang der Datei index.html lädt die Anwendung die JavaScript-Bibliothek des Mobile SDK:
<!-- include force.js for REST transaction support -->
<script src="js/force.js"></script>
Diese Bibliothek enthält die zugrunde liegende JavaScript-Basisfunktionalität für alle hybriden Mobile SDK-Anwendungen. Sie ruft nativen Code ab und implementiert Ihre Token-Aktualisierungen und systemnahe Netzwerkaufrufe. force.js deckt zudem REST API-Wrapperfunktionen und die Erstellung von Benutzeragenten ab.

Wenn Sie die force.js-Bibliothek laden, wird ein globales force-Objekt erstellt. Das Objekt ist der Einstiegspunkt für viele Funktionen der Bibliothek. Wie bereits zuvor erwähnt, verwendet die salesforceSessionRefreshed-Funktion die force-Instanz, um Netzwerkaufrufe, wie force.query() zu tätigen.

Dieses Übersicht war zwar kurz, aber äußerst informativ. Andere UI-Widgets in der ContactExplorer-Anwendung verhalten sich ähnlich wie die hier behandelten. In Ihren freien Zeit sollten Sie sich eingehender mit dem Code in index.html und inline.js beschäftigen, um Ihr Verständnis abzurunden. In der Zwischenzeit werden die Details hybrider Interaktionen mit Salesforce ausführlicher behandelt. Sie freuen sich darauf? Natürlich!