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 sous macOS X. Vous pouvez utiliser forcereact sous macOS X ou Windows, mais vous devez être sous macOS X pour pouvoir développer une application iOS React Native.

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

Plate-forme : une ou plusieurs plates-formes séparées par des virgules. Valeurs possibles : ios, android ou ios,android
Type d’application : appuyer sur <Retour>
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 type (react_native_typescript or react_native, leave empty for react_native_typescript):
<Return>
Enter your application name:
FirstReact
Enter your package name:
com.mytrail.react
Enter your organization name (Acme, Inc.):
MyTrail, Inc.
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 application React Native qui :

s’appelle FirstReact ;
prend en charge iOS et Android ;
prend en charge l’utilisation de TypeScript ;
est compilée avec les bibliothèques du kit de développement mobile ;
se trouve dans le dossier <dossier_actuel>/FirstReact/.

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

Dans XCode, ouvrez le fichier <dossier_actuel>/FirstReact/ios/FirstReact.xcworkspace.
Dans la vue Projet, accédez à FirstReact/FirstReact/Supporting Files, puis ouvrez le fichier bootconfig.plist.
Remplacez les valeurs de « remoteAccessConsumerKey » et « oAuthRedirectURI » par vos propres paramètres.

Android

À 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 Fichier | Ouvrir.
Sélectionnez le dossier <dossier_actuel>/FirstReact/android, puis cliquez sur OK.
Dans la vue Projet, ouvrez le fichier app/src/main/res/values/bootconfig.xml.
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.

Dans une fenêtre Terminal sous macOS ou dans l’invite de commande sous Windows, indiquez le répertoire racine de votre application. Dans notre cas, il s’agit de FirstReact.
Exécutez la commande qui vous correspond :

yarn start ou npm start.

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

Pour lancer une application forcereact iOS :

Dans XCode, ouvrez FirstReact/ios/FirstReact.xcworkspace.
Cliquez sur Exécuter.

Pour lancer une application forcereact Android :

Depuis l’écran d’accueil d’Android Studio, ou via le menu Fichier | Ouvrir, accédez à FirstReact/android/.
Cliquez sur OK.
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

Voilà qui est fait : vous disposez d’une application React Native de 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. Recherchez le fichier app.tsx au même niveau que le dossier ios/ ou android/.

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.ts (connexion, identité et authentification)
react.force.net.ts (utilitaires et classes helper d’API REST)
react.force.smartstore.ts (fonctionnalité de mise en cache hors ligne SmartStore)
react.force.mobilesync.ts (fonctionnalité de synchronisation hors ligne Mobile Sync)

À l’instar des composants du kit de développement mobile utilisés dans les applications hybrides, ces composants définissent des liens entre le JavaScript et le code natif du kit de développement mobile. Vous les importez dans le fichier app.tsx de la bibliothèque react-native-force. Par exemple, pour importer tous les composants, utilisez :

import {oauth, net, smartstore, mobilesync} from 'react-native-force';

Le chemin d’accès vers les composants react-native-force doit être spécifié dans la section dependencies du fichier package.json au niveau racine de votre application. En règle générale, on utilise SalesforceMobileSDK-ReactNative.gitrepo :

...
"react-native-force": "git+https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git#v9.0.0"
...

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

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.

À partir du répertoire racine de votre application, ouvrez le fichier app.tsx dans un éditeur de texte. Repérez la définition d’objet styles, située vers le bas du fichier.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22,
        backgroundColor: 'white',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },

Dans la propriété item de cet objet, ajoutez une ligne qui définit backgroundColor sur 'red' :

const styles = StyleSheet.create({
    ...
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
backgroundColor: 'red',
    }
});

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.

Ressources

Guide de développement du kit de développement mobile : Développement de React Native

Besoin d'aide ?

En savoir plus