• 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

Démarrez votre application sur smartphone / tablette

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

On vient de créer notre première application mobile React Native. Avant de nous lancer dans les développements, je vais vous expliquer comment tester le rendu de votre application grâce à Expo.

Pour ceux qui testent sur smartphone ou tablette, avant de commencer, vous devez vous assurer que votre smartphone / tablette (device) est sur le même réseau Wi-Fi que votre ordinateur. Expo fonctionne avec Node.js. Votre application React Native va être hébergée sur un serveur sur votre ordinateur, en localhost. Pour accéder à votre serveur localhost depuis un smartphone / tablette, il faut se positionner sur le même réseau Wi-Fi.

Pour ceux qui testent sur émulateur Android / simulateur iOS (smartphone / tablette virtuel), cette fois, c'est vous les chanceux. Étant donné que votre émulateur / simulateur se lance sur votre ordinateur, il accède déjà à votre serveur localhost. Vous n'avez donc pas de manipulations supplémentaires à effectuer.

Expo, c'est à toi de jouer

Dans un terminal, placez-vous dans le répertoire de votre projet React Native :

$ cd /chemin_vers_mon_projet/ReactNative/MoviesAndMe/

Lancez la commande :

$ npm start

Node.js va créer un serveur localhost où héberger votre application React Native. Expo, quant à lui, va s'occuper de vous faciliter l'accès à votre application.

Vous devriez être redirigé vers une fenêtre de votre navigateur par défaut :

Interface simplifiée pour gérer notre application
Interface simplifiée pour gérer notre application

Dans cette fenêtre, Expo nous offre une interface simplifiée permettant de gérer notre application et ses tests. En fait, on retrouve ici les mêmes fonctionnalités que dans notre terminal. Car oui, si vous retournez sur votre terminal, vous devriez voir quelques changements et notamment un énorme QR code :

Terminal pour gérer notre application
Terminal pour gérer notre application
Si vous possédez un smartphone / une tablette

Sur Android, c'est très simple. Depuis votre device, lancez l'application Expo. Vous devriez avoir un bouton "Scan QR Code". Cliquez sur ce bouton et scannez le QR Code affiché dans votre terminal. Expo va charger votre application. Cela peut prendre un peu de temps, il faut qu'Expo récupère votre projet React Native sur votre serveur Node.JS et l'affiche à l'écran.

Sur iOS, c'est un peu différent, mais c’est tout aussi simple. Vous devez scanner le QR code avec l’application Caméra de votre iPhone/iPad, et le tour est joué.

Vous avez également une autre solution qui consiste à saisir la touche e dans votre terminal, entrer un numéro de téléphone précédé du numéro indicatif (+33 pour la France, exemple : +33611223344) ou votre adresse mail. Ensuite, sur votre device, vous allez recevoir un SMS ou mail, selon l'option choisie. Ouvrez le message reçu et cliquez sur le lien présent. Personnellement, je préfère la première solution, vous devriez comprendre pourquoi. :lol:

Si vous ne possédez pas de smartphone / tablette

Vous devez lancer une machine virtuelle avant de pouvoir tester.

Pour iOS, faites une recherche sur votre Mac de "Simulator" :

Recherche simulator sur Mac
Recherche simulator

Cliquez sur "Simulator" pour lancer un simulateur iOS.

Pour Android, vous devrez configurer une machine virtuelle avant de pouvoir la lancer. Normalement, vous avez dû installer Android Studio. React Native a une fois de plus une documentation très explicite de la procédure à réaliser. Une fois votre émulateur configuré, lancez-le en cliquant sur la flèche à droite dans la fenêtre Tools / Android / AVD Manager :

Vue AVD Manager pour un émulateur
AVD Manager

Enfin, dernière étape, il faut informer Expo qu'on est prêt et qu'il peut exécuter notre application sur simulateur / émulateur.

Dans le terminal où vous avez exécuté $ npm start , vous pouvez voir le menu tout en bas avec plusieurs options. Celle qui nous intéresse est la première : 

Press a to open Android device or emulator, or i to open iOS emulator.

Pour une fois, je n'ai pas grand-chose à rajouter. :) Tapez simplement "a" si vous souhaitez tester sur un émulateur Android et "i" sur un simulateur iOS.

Rendu de l'application

Que vous soyez sur smartphone / tablette / simulateur iOS / émulateur Android, vous devriez avoir ceci :

CRNA/Solution Expo
CRNA/Solution Expo

Bravo, vous avez créé et lancé votre toute première application React Native. :magicien:

Rechargement d'une application

Avant de passer à la partie 2 de ce cours et de rentrer dans les développements, je vais vous apprendre comment recharger (reload) une application React Native et surtout comment cela fonctionne derrière. 

Pour vous présenter le rechargement sur React Native, quoi de mieux que de modifier notre application ?

Ouvrez le fichier App.js, vous devriez voir ceci :

//App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Vous retrouvez les textes visibles sur votre device. Ne vous attardez pas sur le code, on le verra en détail dans la partie 2. Ce que je veux que vous fassiez, c'est changer un texte. Par exemple, remplacez :

<Text>Open up App.js to start working on your app!</Text>

Par :

<Text>Hello !</Text>

Retournez dans votre application et constatez le changement de texte.

Changement de texte dans notre CRNA
Changement de texte dans notre CRNA

Bien, normalement, on a tous réussi à recharger notre application et à voir apparaître le texte "Hello !".

 Il n'y a rien qui vous choque ?

Si vous êtes nouveau dans le développement ou si vous êtes issu du développement web, vous avez dû vous dire : "OK, c'est bien, ça marche."
Si vous êtes issu du développement mobile natif, comme moi, votre réaction a dû ressembler à ça : :waw:

Le rechargement de l'application, avec notre nouveau texte, est instantané. C'est ce que l'on appelle le Live Reloading.

L'inconvénient des applications mobiles natives, que ce soit sur iOS ou Android, c'est qu'il faut les compiler (build en anglais) pour les recharger et voir ses modifications. Croyez-moi, compiler une application, cela n'a rien d'instantané !

Je vois, mais cela ne me dit toujours pas pourquoi mon application React Native se met à jour instantanément ?

React Native est écrit en Javascript. Le Javascript n'a pas besoin d'être compilé pour être exécuté. Votre device est capable d'exécuter votre code Javascript et d'afficher son rendu sans le compiler ! Cela change absolument tout.

Si vous remplacez le code Javascript dans une application, vous pouvez voir les changements sans relancer l'application et c'est exactement ce que React Native fait.

Lorsque vous enregistrez votre projet, React Native génère un fichier Javascript de toute votre application (appelé bundle) et le dépose sur votre serveur Node.JS en localhost. Votre application, qui tourne sur votre device, observe ce bundle et se met à jour automatiquement lorsque celui-ci change. L'exécution du code Javascript et la mise à jour de votre application sont quasi instantanées, c'est pour cela que c'est aussi rapide.

Un schéma apporte bien souvent plus de clarté. Voici le fonctionnement du rechargement de notre CRNA, étape par étape :

Schéma Rechargement d'une application React Native
Schéma Rechargement d'une application React Native

Nous arrivons à la fin de la première partie de ce cours, centralisée sur la présentation du développement mobile et de React Native. Nous avons vu comment créer une CRNA (Create React Native App), l'exécuter, l'afficher sur un écran et surtout la recharger.

Dans la partie 2, nous allons découvrir le développement avec React Native. Je vous apprendrai comment créer des vues plus ou moins complexes avec la librairie React.

Je suis sûr que vous avez hâte de vous lancer dans les développements. Avant cela, je vous propose un petit quiz pour récapituler tout ce que l'on vient de voir et éventuellement faire un rappel sur certains points.

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