Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Création d'une application React Native

Objectifs de formation

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

  • Créer une application React Native simple avec le Kit de développement mobile.
  • Accéder aux composants React Native offerts par le Kit de développement mobile.
  • Ajouter vos informations d’application connectée à votre application.
  • Compiler et tester votre application Kit de développement mobile React Native.

Création d'une application React Native avec Forcereact

L’exemple suivant permet de créer une application React Native en utilisant forcereact sur Mac OS X. Vous pouvez utiliser forcereact sous OS X ou Windows, mais vous devez être sous Mac OS X pour développer une application iOS React Native.

  1. Pour créer une application React Native, exécutez forcereact create dans une fenêtre de Terminal.
  2. Saisissez les valeurs suivantes à l'invite :

    • Platform: Une ou plusieurs plateformes séparées par des virgules. Valeurs possibles : ios, android ou ios,android

    • Nom de l'application : FirstReact

    • Nom du package : com.mytrail.react

    • Nom de l'organisation : MyTrail, Inc.

    • Répertoire de sortie : FirstReact

    Voici comment doit se présenter votre entrée (ne tenez pas compte de la coloration éventuelle de la syntaxe) :
    $ forcereact create
    Enter the target platform(s) separated by commas (ios, android): ios,android
    Enter your application name: FirstReact
    Enter your package name: com.bestapps.ios
    Enter your organization name (Acme, Inc.): BestApps.com
    Enter output directory for your app (leave empty for the current directory): FirstReact

Le nom de l’application, le nom du package, le nom de l’organisation et le dossier de sortie sont des propriétés personnalisées que vous devez renseigner.

Que crée cet appel à forcereact ? Une applications React Native qui…

  • S’appelle FirstReact
  • Prend en charge iOS et Android
  • Est compilée avec les bibliothèques du kit de développement mobile
  • Se trouve dans le dossier <current_directory>/FirstReact/
Remarque

Remarque

La première fois que vous créez une application forcereact sur une machine de développement, prévoyez une attente de plusieurs minutes pour que les bibliothèques React Native soient téléchargées.

Définition des valeurs de l’application connectée

Après réception d'un message de la console indiquant que votre projet est prêt, mettez à jour le nouveau projet pour qu'il tienne compte des paramètres de votre application connectée.

iOS

  1. Dans XCode, ouvrez le fichier <current_directory>/FirstReact/ios/FirstReact.xcworkspace.
  2. Dans la vue projet, rendez-vous dans FirstReact/FirstReact/Classes, puis ouvrez le fichier AppDelegate.m.
  3. Vers le haut du fichier, remplacez les valeurs par défaut de RemoteAccessConsumerKey et OAuthRedirectURI par vos propres paramètres.
// Fill these in when creating a new Connected Application on Lightning Platform
static NSString * const RemoteAccessConsumerKey = 
    @"3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa";
static NSString * const OAuthRedirectURI = @"testsfdc:///mobilesdk/detect/oauth/done";

Android

  1. À l’écran de bienvenue d’Android Studio, sélectionnez Import project (Eclipse ADT, Gradle, etc.) (Importer le projet). Si un autre projet est déjà ouvert dans Android Studio, choisissez File | Open (Fichier > Ouvrir).
  2. Sélectionnez le dossier <current_directory>/FirstReact/android, puis cliquez sur OK.
  3. Dans la vue Projet, ouvrez le fichier app/res/values/bootconfig.xml.
  4. Remplacez les valeurs de remoteAccessConsumerKey et oauthRedirectURI par vos propres paramètres.
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="remoteAccessConsumerKey">3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa</string>
   <string name="oauthRedirectURI">testsfdc:///mobilesdk/detect/oauth/done</string>
   <string-array name="oauthScopes">
       <item>api</item>
   </string-array>
   <string name="androidPushNotificationClientId"></string>
</resources>

Compilation et test de votre application React Native

Pour compiler votre application React Native, retournez au Terminal ou à la ligne de commande Windows.

Une fois compilée, votre application React Native crée un paquet contenant vos composants JavaScript personnalisés. Pour l’application soit exécutée et que le code natif et le code JavaScript se parlent, démarrez le serveur de développement React Native.

  1. Dans la fenêtre du Terminal sous Mac OS ou à l’invite de commande sous Windows, changer le dossier racine de votre application. Dans notre cas, c’est FirstReact.
  2. Exécutez la commande qui vous correspond :
    • Sous Mac OS : npm start
    • Sous Windows : npm run-script start-windows

Lorsque la ligne de commande indique « Loading dependency graph, done », vous pouvez exécuter l’application depuis votre environnement de développement.

  1. Pour lancer une application forcereact iOS :
    1. Dans XCode, ouvrez FirstReact/ios/FirstReact.xcworkspace.
    2. Cliquez sur Exécuter.
  2. Pour lancer une application forcereact Android :
    1. À l’écran d’accueil d’Android Studio, ou dans le menu Fichier | Ouvrir, naviguez jusqu’à FirstReact/android/.
    2. Cliquez sur OK.
    3. Cliquez sur Exécuter.

Lorsque l’écran de connexion apparaît, entrez le nom d’utilisateur et le mot de passe de votre organisation Developer Edition. Lorsqu’on vous le demandera, autorisez l’application à accéder aux données. Un écran montrant une vue de liste apparaîtra.

Vue de liste d’une application React Native

Et voilà votre application React Native Kit de développement mobile toute neuve !

Mais où sont passés mes fichiers JavaScript ?

Si vous avez exploré votre projet dans XCode ou Android Studio, vous vous demandez sans doute : Mais où sont les fichiers de balisage et le JavaScript React Native ? Vous ne les trouverez pas dans le projet XCode ou Android Studio. Comme ces fichiers JavaScript peuvent être partagés entre les applications iOS et Android, ils sont créés à un niveau supérieur et référencés uniquement dans les paramètres de compilation du projet. Cherchez le fichier index.ios.js ou index.android.js au même niveau que le dossier ios/ ou android/.

Fichiers JavaScript React Native pour iOS affichés dans le Finder

Fichiers JavaScript React Native pour Android affichés dans le Finder

Composants React Native pour Kit de développement mobile

Si vous parcourez le fichier app.js, vous trouverez l’importation de la magie du Kit de développement mobile dans les premières lignes. Le kit de développement mobile offre des composants JavaScript permettant aux applications React Native d’accéder aux fonctionnalités du Kit de développement mobile. Ces composants sont :

  • react.force.oauth.js (connexion, identité et authentification)
  • react.force.network.js (utilitaires et classes d’assistance de l’API REST)
  • react.force.smartstore.js (fonctionnalité de stockage hors ligne SmartStore)
  • react.force.mobilesync.js (fonctionnalité de synchronisation hors ligne Mobile Sync)
Comme les composants du Kit de développement mobile utilisés dans les applications hybrides, ces composants créent des ponts entre JavaScript et code natif du Kit de développement mobile. On les importe dans le fichier app.js de la bibliothèque react-native-force. Par exemple, pour importer tous les composants, utilisez :
import {oauth, network, smartstore, mobilesync} from 'react-native-force';
On spécifie le chemin d’accès vers les composants react-native-force dans la section dependencies du fichier package.json au niveau racine de votre application. En règle générale, utilisez le dépôt SalesforceMobileSDK-ReactNative.git :
...
"react-native-force": "https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git"
...

Si vous avez cloné ce dépôt localement, vous pouvez configurer ce chemin d’accès pour pointer vers votre branche locale.

Remarque

Remarque

On ne peut pas utiliser la bibliothèque force.js avec React Native.

Test en temps réel

C’est le moment de s’amuser un peu.

Depuis le dossier racine de votre application, ouvrez le fichier app.js dans un éditeur de texte. Trouvez le fragment de code suivant vers le bas du fichier.
const styles = StyleSheet.create({    
    container: {        
        flex: 1,        
        backgroundColor: 'red',    
    },
    header: {        
        height: 50,
        alignItems:'center'
    },
    row: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'white',
        flexDirection: 'row',
        padding: 12,
    },
...
Dans la propriété row de l’objet styles, remplacez backgroundColor par rouge :
row: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'red',
    flexDirection: 'row',
    padding: 12,    
},

Retournez sur votre simulateur iOS et appuyez sur les touches Commande-R. Voyez-vous l’arrière-plan rouge ?

Vue de liste d’une application React Native avec arrière-plan rouge

Vous pouvez prévisualiser tous les changements que vous apportez à la source JavaScript React Native simplement en rafraîchissant l'émulateur ou le simulateur.