Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Compréhension d'un exemple d'application hybride

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

  • Exécuter l'exemple d'application hybride ContactExplorer
  • Comprendre comment fonctionne l'application ContactExplorer
  • Utiliser le plug-in OAuth de Salesforce pour gérer l'authentification de l'utilisateur et le maintien des sessions

Exécution de l'application ContactExplorer

Observons l’exemple d’application ContactExplorer, qui est inclus dans le kit de développement mobile. ContactExplorer est une application locale hybride qui présente plus de fonctionnalités que le modèle d’application. Vous pouvez réaliser cet exercice sur un Mac OS ou sous Windows, mais vous devez utiliser un Mac pour valider entièrement la cible iOS.

Avant de commencer cet exercice, assurez-vous de disposer :
  • Un répertoire contenant le référentiel cloné SalesforceMobileSDK-Shared : votre répertoire racine ou un autre emplacement aisément accessible.
  • Un répertoire pour créer et développer des projets hybrides avec le kit de développement mobile. Les projets Cordova peuvent contenir à la fois des cibles Android et iOS. Par conséquent, il est recommandé de les placer dans le répertoire d’une plate-forme neutre.

Pour commencer, clonez le référentiel partagé, puis créez une application avec forcehybrid.

  1. À l’invite d’une commande ou une fenêtre de terminal, cd vers le répertoire dans lequel vous prévoyez de cloner le référentiel partagé.
  2. Exécutez la commande suivante :
    git clone https://github.com/forcedotcom/SalesforceMobileSDK-Shared.git
  3. cd vers le répertoire dans lequel vous prévoyez de développer votre projet hybride.
  4. Exécutez forcehybrid create avec les valeurs suivantes :
    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>

    Maintenant que vous avez un projet hybride générique, vous pouvez lui ajouter l’exemple de code contactexplorer.

  5. Exécutez les commandes suivantes, en vous assurant de remplacer l’espace réservé dans la commande cp par votre chemin local.
    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
    Remarque

    Remarque

    Utilisateurs de Windows : Sous Windows, remplacez la commande copy par la commande Unix cp. Cependant, gardez à l’esprit que les fichiers des sous-dossiers js et css de /samples/contactexplorer/ sont des alias de fichiers sources situés sur d’autres chemins. Assurez-vous que vous copiez les fichiers source eux-mêmes, et non leurs alias. Voici un exemple :

    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

Le script forcedroid et les commandes qui s’ensuivent créent un projet iOS et un projet Android, les deux englobant l’exemple d’application ContactExplorer. Vous êtes désormais prêt à exécuter votre application sur l'une de ces plates-formes. Si vous utilisez un appareil iOS, vous devez configurer un profil pour le simulateur, tel que décrit dans le Xcode User Guide à l’adresse developer.apple.com/library. De même, les appareils Android doivent être configurés de la manière décrite sur developer.android.com/tools.

Pour exécuter l'application sur iOS :
  1. cd vers platforms/ios/.
  2. Exécutez la commande suivante : open contactsApp.xcworkspace
  3. Dans Xcode, cliquez sur Exécuter.
Pour exécuter l'application sur Android :
  1. Dans Android Studio, importez ou ouvrez le projet <your-hybrid-projects-directory>/contactsApp/platforms/android.
  2. Cliquez sur Exécuter.

Lorsque vous exécutez l'application, l'écran de connexion Salesforce s'affiche après l'écran de bienvenue initial.

Écran de connexion mobile

Connectez-vous avec le nom d'utilisateur et le mot de passe de votre organisation Developer Edition. Pour permettre à l’application d’accéder à vos données Salesforce, touchez Autoriser. Vous êtes maintenant dans l’application, vous pouvez récupérer les listes de contacts et de comptes. Touchez Extraire les contacts SFDC pour récupérer les noms des contacts Salesforce ou Extraire les comptes SFDC pour récupérer les noms des comptes de votre organisation DE.

Exemple d'application hybride

À chaque fois que vous appuyez sur une touche, l'application ajoute des lignes à une liste infinie. Faites défiler vers le bas pour afficher la liste complète.

Exemples de contacts hybrides

Examinons de plus près le fonctionnement de l'application.

Compréhension de l'application ContactExplorer

Examinons de plus près le fonctionnement de l'application ContactExplorer. Les deux fichiers les plus intéressants sont index.html et inline.js.

  1. Dans le projet contactsApp, ouvrez le fichier www/index.html.
  2. Recherchez « function onDeviceReady() ».

Pour initier une session utilisateur avec force.js, vous appelez force.login(). Lorsque l’utilisateur est connecté à une application exécutée dans le conteneur, si nécessaire, le plug-in de la communauté actualise les jetons lorsque l’application tente d’accéder aux ressources de Salesforce. Le code suivant, adapté à l’exemple ContactExplorer, montre une implémentation force.login() typique.

Lorsque l’appareil indique qu’il est prêt, vous appelez la méthode force.login() pour publier l’écran de connexion.

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

Après avoir terminé le processus de connexion, l'exemple d'application affiche index.html (situé dans le dossier www). Une fois le chargement de la page terminé et l'infrastructure mobile prête, la fonction jQuery(document).ready() appelle regLinkClickHandlers(). La fonction (dans inline.js) configure des gestionnaires de clics pour les diverses fonctions de l’exemple d’application. Par exemple, le gestionnaire #link_fetch_sfdc_contacts exécute une requête en utilisant l’objet force.

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

L’objet force est configuré lors de la première interaction OAuth 2.0 et permet d’accéder à API REST dans le contexte de l’utilisateur authentifié. Nous récupérons ici les noms de tous les contacts de l'organisation DE. onSuccessSfdcContacts() restitue ensuite les contacts sous forme de liste sur la page index.html.

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

Tout comme pour le gestionnaire #link_fetch_sfdc_contacts, le gestionnaire #link_fetch_sfdc_accounts extrait les enregistrements de compte via API REST. Les gestionnaires #link_reset et #link_logout effacent les listes affichées et déconnectent l’utilisateur, respectivement.

Notez que l'application peut également récupérer les contacts de l'appareil, ce qu'une application Web équivalente serait incapable de faire. Le gestionnaire de clics suivant récupère la requête de contacts de l'appareil en appelant le plug-in de contacts Cordova.

$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);
});

Ce gestionnaire utilise les objets ContactFindOptions et navigator.contacts de cordova-plugin-contacts pour affiner et exécuter une recherche. Il appelle navigator.contacts.find() pour récupérer une liste de contacts avec des numéros de téléphone de l’appareil. La fonction onSuccessDevice() (non représentée ici) restitue la liste de contacts dans la page index.html.

La bibliothèque force.js

En haut du fichier index.html, l’application charge la bibliothèque JavaScript du kit de développement Mobile SDK :
<!-- include force.js for REST transaction support -->
<script src="js/force.js"></script>
Cette bibliothèque contient la fonctionnalité JavaScript sous-jacente de base pour toutes les applications hybrides du kit de développement Mobile SDK. Elle appelle le code natif, et implémente vos actualisations de jeton et appels de communauté de bas niveau. Les autres fonctionnalités couvertes par force.js sont les fonctions wrapper de l’API REST et la construction agent utilisateur.

Lorsque vous chargez la bibliothèque force.js, elle crée un objet force global. Cet objet est le point d’entrée de la fonctionnalité de la bibliothèque. Comme indiqué précédemment, la fonction salesforceSessionRefreshed utilise l’instance force pour passer les appels à la communauté tels que force.query().

Cette présentation a été courte, mais riche en contenus. D’autres widgets d’interface utilisateur de l’application ContactExplorer ont un comportement similaire à ceux que nous venons d’évoquer. Pendant votre temps libre, nous recommandons d’étudier le code aussi bien dans index.html que dans inline.js pour parfaire votre compréhension. En attendant, nous poursuivre notre découverte des interactions hybrides avec Salesforce. Intéressé(e) ? Nous n’en doutons pas !