• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 09/09/2020

Formalisez votre application pour utiliser les composants du device

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous arrivons à une étape cruciale du développement mobile : l'utilisation de composants du device (caméra, géolocalisation, accéléromètre, galerie photo, accès aux contacts, etc.).

Je ne sais pas si vous vous souvenez de ce que l'on a dit au tout début du cours, mais les composants du device ont une particularité. Vous vous en souvenez ?

Les composants du device ne sont accessibles qu'avec un langage de programmation natif : Swift / Objective-C pour iOS et Java / Kotlin pour Android. Cela signifie que l'on ne peut pas y accéder avec du Javascript

Il va donc nous falloir utiliser du code natif dans notre application et, là encore, je vous en ai déjà parlé, mais, actuellement, on ne peut pas. On est toujours sur une CRNA (Create-React-Native-App), une solution développée par la communauté React Native très pratique, très puissante, qui fonctionne avec Expo, mais qui a ses limites. Une CRNA ne peut fonctionner qu'avec du Javascript, elle ne gère pas le langage natif. On va donc devoir s'en séparer et partir sur la deuxième solution de développement React Native, à savoir : une Application React Native avec du code natif

Attends, cela veut dire que tout ce que l'on a fait jusqu'à présent ne sert plus ? Qu'on va devoir repartir de zéro ? 

Vous vous doutez bien que non. ;) React Native a prévu le coup et dispose d'une solution pour passer rapidement d'une CRNA à une application React Native avec du code natif. On en parle tout de suite.

Éjectez une application

Éjecter une application permet de passer d'une CRNA à une application React Native avec du code natif. Si on reprend le Getting Started de React Native, cela nous permet, en gros, de passer de la solution du premier onglet à celle du deuxième onglet : 

Solutions du Getting Started de React Native
Solutions du Getting Started de React Native

Éjecter une application est très simple, il suffit d'une commande, mais l'impact sur notre application est énorme ! C'est une démarche non anodine et irréversible. On ne pourra plus faire marche arrière.

Passons donc à l'éjection de notre application. Placez-vous dans la console où vous avez tapé, pour lancer l'application,  npm start  .

On va arrêter le serveur Node.JS. Pour cela, il faut taper, dans la console, les touches CTRL + C. Vous devriez voir apparaître dans la console : 

13:30:19: Stopping packager...
13:30:19: Packager stopped.

À présent, il faut installer les lignes de commande React Native. Au début de ce cours, nous avons installé les lignes de commande CRNA (Expo CLI), ce qui n'est pas la même chose. Tapez la commande :

$ npm install -g react-native-cli

Tout est prêt pour éjecter notre application. Dans notre terminal, à la racine du projet, saisissez la commande :

$ expo eject

Plusieurs questions devraient vous être posées. À la première question, vous devez répondre "React Native..." :

Ejecter notre CRNA vers une application React Native avec du code natif
Éjecter notre CRNA vers une application React Native avec du code natif

Puis, on nous demande un nom pour notre application, tapez "Movies And Me" :

Nom de notre application React Native avec du code natif
Nom de notre application React Native avec du code natif

Enfin, dernière question, le nom des projets Android Studio et XCode. Si vous ne savez pas ce que c'est, c'est normal, nous allons y revenir. Tapez "MoviesAndMe" :

Nom des projets Android Studio et XCode
Nom des projets Android Studio et XCode

L'éjection démarre et se termine par :

Ejected successfully!

Ça y est, notre application a été éjectée. Elle est passée d'une CRNA à une application React Native avec du code natif. Plutôt simple, non ? Pourtant, notre application vient d'être bouleversée, aussi bien dans son architecture que dans son fonctionnement. Si vous souhaitez relancer notre application en faisant  npm start , vous verrez que des lignes apparaissent, mais que votre application ne se lance jamais. Il est temps de voir ensemble ce qu'il vient de se passer.

Application React Native avec du code natif

Une application React Native avec du code natif est différente d'une CRNA et cela commence par la hiérarchie de ses fichiers.

Hiérarchie

Si vous observez le contenu du dossier MoviesAndMe de notre application, vous devriez voir apparaître deux nouveaux dossiers :

Nouveaux dossiers iOS / Android de notre application
Nouveaux dossiers iOS / Android de notre application

On a un dossier iOS et un dossier Android.

Je vous vois déjà venir avec cette question, au vu du contenu. o_O Qu'est-ce que ces dossiers contiennent ?

Si vous êtes développeur mobile natif, vous devriez déjà connaître la réponse. Pour les autres, il s'agit ici de deux projets mobiles natifs. Ce sont les projets Android Studio (Android) et XCode (iOS) que la commande d'éjection nous a demandé de nommer tout à l'heure.

Lorsque l'on crée une application mobile native sur iOS ou Android, à l'initialisation, le projet ressemble exactement à ce que l'on a ici.

OK, on a donc 2 projets mobiles natifs qui se sont rajoutés à notre projet. C'est bien, mais à quoi vont-ils nous servir ?

Pour utiliser les composants du device, il faut un langage de programmation natif. Ça, je crois que vous l'avez compris. ^^ Les langages natifs, pour être utilisés dans nos applications, ont besoin d'être compilés(build) pour ensuite être exécutés. Pour compiler un langage natif, il faut un environnement adéquat, capable de le faire. Et cet environnement, ici, ce sont les deux projets mobiles natifs. Ces projets sont donc indispensables pour compiler et exécuter notre application React Native avec du code natif. 

Bon, c'est bien joli de savoir à quoi ressemble une application React Native avec du code natif, mais c'est bien aussi de savoir comment cela fonctionne. :)

Fonctionnement

Cette partie est complexe, il n'est pas nécessaire de la comprendre pour développer sur une application React Native avec du code natif. Mais c'est toujours un plus de savoir comment cela fonctionne derrière.

Le fonctionnement de notre nouvelle application est un peu différent de ce que l'on avait sur notre CRNA. J'ai repris le tout premier schéma que je vous ai montré. C'est celui qui explique le fonctionnement d'une CRNA et sa mise à jour automatique lorsque l'on enregistre nos fichiers Javascript. J'ai ajouté les spécificités d'une applicationReact Native avec du code natif :

Fonctionnement d'une application React Native avec du code natif
Fonctionnement d'une application React Native avec du code natif

On joue au jeu des 7 différences ? ^^ Ici, j'ai simplement fait apparaître les projets mobiles natifs et leurs étapes :

  • 0 (1) : Lorsque vous allez lancer l'application sur un device, avant cela, les projets mobiles natifs vont être compilés.

  • 0 (2) : Puis les projets mobiles natifs vont être installés et exécutés sur le device. C'est à ce moment que la pastille de votre application va apparaître sur l'écran d'accueil de votre device et que l'application va être lancée.

En parallèle de ces deux étapes, un serveur Node.JS est lancé, comme sur une CRNA, et va héberger le code Javascript de votre application React Native. Votre application mobile, fraîchement installée, va observer ce code Javascript et être mise à jour automatiquement dès que le code change. Cela signifie que l'on va pouvoir continuer à développer et tester instantanément notre code, sans avoir à relancer l'application. Un bon point. :soleil:

Même si tout ce que l'on vient de voir est complexe, sachez que, pour vous et vos développements, ce sera le plus souvent transparent. Vous allez voir que l'on va continuer à développer et à tester notre application de la même manière que lorsque l'on était sur une CRNA.

Et Expo, dans tout ça ?

Très bonne question. Eh bien, Expo ne nous sert plus à rien. On vient de quitter notre CRNA, la solution portée par Expo, on abandonne donc logiquement tout ce qui touche à Expo. Cela concerne également l’application Expo installée sur vos devices. :-° 

Si je devais résumer la différence entre une CRNA et une application React Native avec du code natif, je dirais que :

  • avec une CRNA, l'application mobile finale, c'est l'application Expo récupérée sur les stores Apple / Google ;

  • avec une application React Native avec du code natif, l'application mobile finale, c'est la nôtre, ici "Movies and Me".

Différence CRNA / Application mobile React Native avec du code natif
Différence CRNA / Application mobile React Native avec du code natif 

Lancez une application React Native avec du code natif

Quand je vous parle de lancer une application React Native avec du code natif, ici, il s'agit de compiler, installer et exécuter les projets mobiles natifs sur un device. Pour ce faire, il faut un ou plusieurs outil(s) selon le système d'exploitation visé :

  • Pour compiler un projet mobile iOS, c'est le plus simple, mais aussi le plus restrictif. On a besoin d'installer XCode, un environnement de développement (IDE) disponible uniquement sur Mac.

  • Pour compiler un projet mobile Android, il y a plusieurs outils à installer. Notamment Android Studio, un environnement de développement disponible sur Windows / Mac / Linux qui a la particularité d'installer presque tout ce qu'il faut pour compiler un projet mobile Android.

Préparez le terrain sur iOS

Commencez par télécharger et installer XCode depuis l'App Store. L'installation de Xcode va également installer le simulateur iOS, avec lequel je prends toutes mes captures d'écran depuis le début de ce cours.

Une fois XCode installé, lancez-le. Dans le menu du haut, dans XCode / Préférences  / Onglet Locations / Sous menu Locations, installez la Command Line Tools en sélectionnant la version la plus récente dans le menu déroulant :

Command Line Tools XCode
Command Line Tools XCode

C'est tout bon, votre environnement de développement sur iOS est suffisamment configuré pour compiler notre projet mobile natif sur iOS.

Préparez le terrain sur Android

La démarche est un peu plus longue que pour iOS.

Commencez par installer Java SE Development Kit 8 selon le système d'exploitation sur lequel vous travaillez. 

Ensuite, installez Android Studio, l'IDE pour le développement Android. Je vous invite ensuite à suivre la démarche décrite par React Native dans sa documentation. Oui, je sais, je suis un peu fainéant, pour le coup, :-° mais c'est très bien expliqué. Il y a de nombreuses captures d'écran qui expliquent comment passer chaque étape. En plus, tout en haut de la page, vous pouvez sélectionner l'OS sur lequel vous êtes et vous aurez la documentation spécialement pour

Une fois que vous aurez réalisé toutes les étapes, vous aurez l'environnement nécessaire et suffisamment configuré pour compiler notre projet mobile natif sur Android.

Compilez, installez et exécutez

Avant toute chose, dans votre terminal, à la racine de l’application, lancez la commande :

$ npm install --save react-native-gesture-handler

La librairie est intégrée par défaut dans une CRNA, mais pas dans une application React Native avec du code natif.

Ensuite, lancez la commande :

$ react-native link

On reviendra sur cette commande dans le prochain chapitre, quand on en aura terminé avec notre éjection d’application. Chaque chose en son temps. ;)

Maintenant, il est temps de refaire fonctionner notre application, de voir son rendu, etc.

En fait, notre application fonctionne toujours ; simplement, elle ne se lance plus de la même manière.

Depuis le début de ce cours, pour lancer notre CRNA, on fait :

$ npm start

Ce qui lance un serveur Node.JS sur lequel notre code Javascript est déposé. Puis :

  • si on est en possession d'un device Android, on scanne le QR Code affiché avec l'application Expo ;

  • si on est en possession d'un device iOS, on s'envoie le lien de l'application et on l'ouvre ;

  • si on est sur simulateur iOS ou émulateur Android, on tape i ou a pour lancer respectivement sur simulateur iOS et émulateur Android.

À présent, on va saisir dans notre terminal, toujours à la racine du projet React Native :

$ react-native run-ios

ou bien sûr :

$ react-native run-android

Vous allez voir une multitude de lignes incompréhensibles s'afficher, ^^ une nouvelle fenêtre d'un terminal apparaître (ne la fermez pas), pour finir sur :

** BUILD SUCCEEDED **

Et notre application :

Application React Native avec du code natif
Application React Native avec du code natif

On nous apprend qu’un certain fichier index.js n’est pas trouvé. Effectivement, si vous ouvrez le dossier de votre application, vous constaterez que ce fichier n’existe pas.

Sur une application React Native avec du code natif, le point d’entrée de l’application n’est pas le fichier App.js, mais index.js. Je vous rassure, vous ne pouviez pas le deviner. Vous devez donc créer un fichier index.js à la racine de votre projet et ajouter le code :

// index.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('MoviesAndMe', () => App);

Ici, pas besoin de s'attarder sur ce code. On dit simplement à React Native de nous afficher, au lancement de l'application, le component App. Vous n'aurez normalement jamais à toucher à ce fichier.
Si maintenant vous relancez l’application avec la commande :

$ react-native run-ios

ou

$ react-native run-android
Application React Native avec du code natif fonctionnelle
Application React Native avec du code natif fonctionnelle

Ouf, on a retrouvé notre application. :ange:

Bien, voyons ensemble ce qu'il vient de se passer. Déjà, vous avez remarqué le temps qu'il nous a fallu pour lancer l'application. C'est beaucoup plus long que ce que l'on a vu depuis le début de ce cours. Vous devez savoir pourquoi, avec tout ce que je vous ai dit sur les projets mobiles natifs. ;)

Cette longueur est due à la compilation des projets mobiles natifs. À présent, lorsque nous allons lancer notre application avec la commande  react-native run-  , le projet mobile natif concerné va être compilé. Cette étape prend du temps, beaucoup de temps. Puis, lorsque la compilation est terminée, un serveur Node.JS est lancé. C'est cette nouvelle fenêtre du terminal que l'on a vue apparaître : 

Serveur Node.JS de notre application React Native avec du code natif
Serveur Node.JS de notre application React Native avec du code natif

Ensuite, notre application compilée est installée sur le device et elle est exécutée. Le code Javascript est récupéré depuis le serveur Node.JS et le résultat s'affiche. Voilà comment fonctionne notre application à présent.

Même si le rendu est le même, on n'est plus sur une CRNA, mais bien sur une application React Native avec du code natif. Si vous observez l'écran d'accueil de votre device, celui avec toutes vos applications installées, vous verrez que l'on a bien notre application "Movies and Me". On ne passe plus par Expo

Vignette / Icône de l'application
Vignette / Icône de l'application

Et bien, cela en fait, des étapes. En tout cas, maintenant, on a tout l'environnement nécessaire pour compiler et exécuter du code natif et donc utiliser les composants des devices

Je vous propose d'aborder l'utilisation des composants du device dans le prochain chapitre, cela nous fera une pause bien méritée. :)

Dans ce chapitre, j'ai voulu vous montrer comment passer d'une CRNA à une application React Native avec du code natif. On a vu ensemble la méthodologie pour éjecter son application et créer deux projets mobiles natifs. Même si on en a beaucoup parlé, ce processus reste rapide et assez simple. Toutefois, on a pu voir que l'impact est important, notamment dans le fonctionnement global de notre application.

Vous devez vous demander pourquoi on n'est pas parti directement sur une application React Native avec du code natif, en sachant dès le début que l'on allait utiliser les composants du device ?

C'est une très bonne question. Personnellement, je pars toujours sur une CRNA, même si je sais que, plus tard, j'aurais besoin d'utiliser les composants du device et donc d'éjecter mon application.

Une CRNA est très puissante, très rapide à mettre en place et simple à relancer. En règle générale, on utilise cette solution au maximum, jusqu'au tout dernier moment où on n'a plus d'autre choix que de l'éjecter.

Un des inconvénients d'une application React Native avec du code natif est que, vous le verrez, en plus d'être plus longue à relancer, on peut parfois rencontrer des erreurs uniquement liées aux projets mobiles natifs et à leur compilation. Lorsque l'on n'est pas ou peu habitué aux développements mobiles natifs, mettre les mains dans les projets mobiles natifs peut s'avérer être une épreuve du combattant. :( Heureusement pour nous, ce genre d'erreur reste assez rare.

J'arrête mes longues explications, comme toujours. ^^ Je vous donne rendez-vous dans le prochain chapitre où on va utiliser notre tout premier composant du device.

Exemple de certificat de réussite
Exemple de certificat de réussite