Grundlagen zur hybriden Beispielanwendung

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.

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

   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.

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

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.

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

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

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

<!-- include force.js for REST transaction support -->
<script src="js/force.js"></script>

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. Gespannt? Na klar!