Premiers pas avec le développement hybride

Objectifs de formation

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

• Décrire deux types d'applications hybrides
  
• Installer le kit de développement Mobile SDK dédié au développement hybride
  
• Créer une application hybride du kit de développement Mobile SDK avec Cordova
  
• Exécuter votre application hybride
  

Remarque

Vous souhaitez apprendre en français ? Commencez le défi dans un Trailhead Playground en français et utilisez les traductions fournies entre crochets pour naviguer. Copiez et collez uniquement les valeurs en anglais, car les validations de défi reposent sur les données en anglais. Si vous ne réussissez pas le défi dans votre organisation en français, nous vous recommandons (1) de définir le paramètre régional sur les États-Unis, (2) de définir la langue sur l’anglais en suivant les instructions ici, puis (3) de cliquer à nouveau sur le bouton « Vérifier le défi ».

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Avant de commencer

Avant d’effectuer les étapes de ce module, veillez à relever les défis pratiques dans Configuration de vos outils de développeurs Kit de développement mobile en utilisant le même Trailhead Playground. Le travail que vous effectuez dans les défis pratiques s’appuie sur ce que vous avez réalisé dans ce badge.

• Configuration de vos outils de développeurs Kit de développement mobile
  

Compréhension du concept de développement hybride

Le Kit de développement mobile permet de développer des applications hybrides, qui constituent une alternative multi-plate-forme aux applications natives. Les applications hybrides combinent la facilité du développement d'applications Web HTML5 à la puissance native d’iOS et d’Android. Ces applications sont exécutées dans un conteneur mobile qui analyse le code de l’application web et l’exécute en tant que code natif. Ce conteneur, construit sur la technologie Apache Cordova, permet aux développeurs d’écrire leur code en HTML5, JavaScript et CSS. Les applications hybrides sont en réalité des applications Cordova qui utilisent le plug-in du kit de développement Mobile SDK Salesforce.

Les applications hybrides appartiennent à l'une des deux catégories suivantes :

• Hybride locale : les applications hybrides locales sont des applications Web exécutées localement dans le conteneur mobile. Ces applications sont développées avec la bibliothèque force.js et stockent leurs fichiers HTML, JavaScript et CSS sur l’appareil de l’utilisateur.
  
• Hybride distante : les applications hybrides distantes fournissent des pages Visualforce via le conteneur mobile. Ces applications stockent une partie ou la totalité de leurs fichiers HTML, JavaScript et CSS sur le serveur Salesforce.
  

Vous avez recours à l’utilitaire npm forcehybrid pour créer un projet hybride. Vous pouvez ensuite utiliser la ligne de commande Cordova pour ajouter d’autres plug-ins et une cible Android ou iOS. Vous pouvez même réutiliser une application Web existante en copiant simplement les fichiers sources de cette application dans le nouveau projet.

Les projets hybrides comprennent également le conteneur du kit de développement Mobile SDK pour chaque plate-forme cible. Le conteneur est un projet natif qui nécessite peu ou pas de configuration. Il fournit le pont entre le web ou l’application Visualforce et le système d’exploitation de l’appareil.

Commençons ! Vous devez avoir obtenu le badge prérequis indiqué en haut de cette unité. Lorsque vous êtes prêt, vous allez commencer par créer et explorer une application locale hybride de base. Vous allez ensuite explorer l'un de nos exemples d'application Mobile SDK qui utilise la bibliothèque force.js et compléter votre apprentissage les applications distantes hybrides. Vous apprendrez également à déboguer des applications hybrides avec les outils de débogage de Safari et Chrome.

Qu’en est-il des applications HTML5 pures ?

Les applications HTML5 utilisent des technologies Web standard (généralement HTML5, JavaScript et CSS) permettant de fournir des applications via un navigateur Web mobile. Cette approche en matière de développement mobile, « écrire une fois, exécuter partout », crée des applications mobiles inter-plates-formes qui fonctionnent sur plusieurs appareils. Même si un développeur peut créer des applications sophistiquées uniquement en HTML5 et en JavaScript, il reste quelques difficultés. Par exemple la gestion des sessions, le stockage hors-ligne sécurisé ou l’accès aux fonctionnalités natives de l’appareil peuvent poser problème.

Ce module n’aborde pas le développement d’applications en HTML5 pur.

Comparaison des architectures de développement natif et multi-plate-forme

Le tableau suivant compare les différents scénarios de développement mobile.

Création d'une application connectée

Important : le module Bases de Salesforce Mobile SDK, qui présente des instructions de création d’une application connectée, est un prérequis à ce module. Vous ne pouvez pas relever le défi de cette unité sans créer une application connectée.

Pour se connecter au service Salesforce, chaque appareil mobile nécessite une application connectée Salesforce. Une application connectée permet à votre application de communiquer avec Salesforce et d’accéder en toute sécurité aux API Salesforce.

Après avoir créé et enregistré votre application connectée, notez ses détails.

• Copiez les valeurs URL de rappel et Clé consommateur. Ces valeurs sont utiles pour configurer l'authentification dans votre application.
  
• Les applications Mobile SDK n’utilisent pas de secret de consommateur. Par conséquent, vous pouvez ignorer cette valeur.
  

Création d’une application

Important :

Si vous n’avez pas encore configuré les outils requis pour le kit de développement mobile, réalisez le module Trailhead Configuration de vos outils de développeurs Kit de développement mobile.

1. Tapez forcehybrid create au sein d’une fenêtre de terminal ou de l’invite de commande Windows.
   
2. Saisissez les valeurs suivantes à l'invite :
   

• Plate-forme : l’une des valeurs suivantes : ios, android, ou ios,android
  
• Type d’application : hybrid_local
  
• Nom de l'application : MyTrailHybridLocal
  
• Nom du package : com.mytrail.hybrid
  
• Nom de l'organisation : MyTrail, Inc.
  
• Répertoire de sortie : TrailHybridApps
  

La commande forcehybrid create rencontre une erreur sur certains appareils Windows. Pour contourner cette erreur, exécutez cordova plugin add salesforce-mobilesdk-cordova-plugin@v11.1.0 --force. Ce problème sera résolu avec la sortie du SDK Mobile 12.0.

3. Félicitations, vous avez créé une application locale hybride ! Le script imprime le nom du répertoire à l’écran lorsqu’il a terminé la création de votre projet. Par exemple : « Votre projet d’application est prêt dans <nom du répertoire du projet>. » Après réception d'un message de ligne de commande indiquant que votre projet est prêt, mettez à jour le nouveau projet pour appliquer les paramètres de votre application connectée.
   
4. Dans le répertoire de votre projet, ouvrez le fichier www/bootconfig.json dans un éditeur de texte compatible UTF-8 et mettez à jour les propriétés suivantes :
   

• remoteAccessConsumerKey : cette valeur est un espace réservé par défaut. Dans l’application réelle, remplacez cette valeur par la clé consommateur de votre application connectée.
  
• oauthRedirectURI : cette valeur est un espace réservé par défaut. Dans l’application réelle, remplacez cette valeur par l’URL de rappel de votre application connectée.
  

5. Dans l’invite de commande, indiquez le dossier racine de l’application et exécutez cordova prepare.
   

Important : après tout changement apporté au dossier racine www/, n’oubliez pas d’accéder à l’invite de commande et d’exécuter cordova prepare depuis le dossier racine de l’application. Cette commande copie vos changements vers les dossiers spécifiques à la plate-forme. Par exemple :

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

L’utilitaire forcehybrid a fait son travail. Si vous avez entré « android » comme plate-forme, vous avez maintenant un projet Cordova avec un sous-dossier platforms/android/ que vous pouvez ouvrir dans Android Studio. Si vous avez choisi la plate-forme « ios », vous avez un sous-dossier platforms/ios/ contenant un espace de travail XCode. Si vous avez entré « ios,android » comme plate-forme, vous avez le projet Android et l’espace de travail iOS.

Ne construisez pas le projet tout de suite ! Vous n’avez pas tout à fait terminé.

1. Revenez à la fenêtre de terminal ou à l'invite de commande.
   
2. Utilisez la commande cd pour atteindre le répertoire du projet de votre application.
   
3. (Optionnel, uniquement sur Mac) Pour ajouter une deuxième plate-forme « après-coup » :
   

• Pour ajouter la prise en charge d’iOS, tapez :
  

  cordova platform add ios@5.1.1

• Pour ajouter la prise en charge d’Android, tapez :
  

  cordova platform add android@8.1.0

À propos des plug-ins Cordova

Pour améliorer les fonctionnalités de base dans les applications hybrides, les développeurs incluent souvent des plug-ins Cordova tiers. Dans vos propres applications, vous pouvez inclure des plug-ins externes en appelant cordova plugin add nom_plug-in, suivi de cordova prepare.

Pour ajouter d’autres plug-ins à une application forcehybrid incluant un projet Android, retirez, puis ajoutez à nouveau le plug-in Salesforce. Cette étape ne s’applique pas aux applications forcehybrid uniquement iOS. Voici un exemple :

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

Important : n’appelez jamais cordova plugin add pour d’autres plug-ins fournis avec le kit de développement Mobile SDK. Ces plug-ins sont automatiquement inclus dans les projets forcehybrid.

Obtention d’un support

Des résultats inattendus sont affichés ? Le modèle hybride a des dépendances avec des parties mobiles hors de notre contrôle. Par conséquent, vous pouvez rencontrer des effets inattendus. Pour poser des questions, votre meilleure ressource est la Trailblazer Community Mobile SDK.

Exécution de votre application hybride

Votre application est maintenant entièrement configurée. Exécutons-la dans Xcode (pour des applications iOS) ou dans Android Studio (pour des applications Android).

Exécuter l'application sur iOS

Pour exécuter l'application depuis Xcode :

1. Dans Xcode, sélectionnez Fichier | Ouvrir.
   
2. Accédez au répertoire platforms/ios/ dans le répertoire de votre nouvelle application.
   
3. Double-cliquez sur le fichier <nom application>.xcodeworkspace.
   
4. Cliquez sur le bouton Exécuter en haut à gauche ou appuyez sur les touches COMMANDE-R.
   

Exécuter l'application sur Android

Pour exécuter l’application depuis Android Studio :

1. Sur l'écran de bienvenue, sélectionnez Importer le projet (ADT pour Eclipse, Gradle, etc.). Dans le cas où Android Studio est en cours d’exécution, sélectionnez Fichier | Nouveau | Importer le projet.
   
2. Sélectionnez <répertoire_du_projet>/platforms/android, puis cliquez sur OK. Si vous êtes invité à utiliser le le wrapper Gradle, acceptez l’invite.
   
3. Une fois le développement terminé, sélectionnez la cible android et cliquez sur Exécuter « android » à partir de n’importe quel menu ou de la barre d’outils.
   
4. Sélectionnez un appareil Android connecté ou un émulateur.
   

Une fois connecté à Salesforce, l’application affiche une liste d’utilisateurs de votre organisation.

Important : si Android Studio propose de mettre à jour votre version wrapper Gradle, acceptez. Une fois le processus terminé, Android Studio réimporte automatiquement votre projet.

Ressources

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