Suivez votre progression
Accueil Trailhead
Accueil Trailhead

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

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 les 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 ! Nous considérons que vous avez réalisé avec succès le projet « Installation des outils du développeur Mobile SDK ». Dans la négative, faites un détour par ce projet afin de vous assurer que votre environnement de développement est correctement configuré. Lorsque vous êtes prêt(e), 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.

Natif, React Native HTML5 Hybride
Graphiques API natives HTML, Canvas, SVG HTML, Canvas, SVG
Performances Rapidité accrue Rapidité Vitesse modérée
Présentation Native Imitée Imitée
Distribution App Stores Web App Store
Appareil photo/Caméra Oui Selon le navigateur Oui
Notifications Oui Non Oui
Contacts, calendrier Oui Non Oui
Stockage hors ligne Système de fichiers sécurisé Pas sécurisé ; SQL partagé, magasins clé-valeur Système de fichiers sécurisé, SQL partagé (via les plug-ins Cordova)
Géolocalisation Oui Oui Oui
Balayage Oui Oui Oui
Pincement, étendue Oui Oui Oui
Connexion En ligne, hors ligne Principalement en ligne En ligne, hors ligne
Compétences en développement Objective-C, Swift, Java, Kotlin; JavaScript (React Native seulement) HTML5, CSS, JavaScript HTML5, CSS, JavaScript

Création d'une application connectée

Important :

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

  1. Tapez forcehybrid create dans une fenêtre du Terminal ou à l’invite de commande Windows.
  2. Saisissez les valeurs suivantes à l'invite :
    • Plate-forme : L’une des 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

    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.

  3. Dans le répertoire de votre projet, ouvrez le fichier www/bootconfig.json dans un éditeur de texte UTF-8 conforme 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.
  4. À l’invite de commande, changez le dossier racine de l’application et exécutez cordova prepare.
Important :

Important :

Après tout changement apporté au dossier racine www/, n’oubliez pas d’aller à 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. cd vers 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 :

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

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 COMMAND-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.). Alternativement, si Android Studio est en cours d’exécution, sélectionnez Fichier | Nouveau | Importer le projet.
  2. Sélectionnez <répertoire_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 :

Important :

Si Android Studio offre de mettre à jour votre version wrapper Gradle, acceptez. Une fois le processus terminé, Android Studio réimporte automatiquement votre projet.