Juillet 2019
🔨 Workshop: Création d'une application en React Native. Lara Loicq & Vincent Chilot.
Passez à la partie Test environnement, nécessaire pour une participation au workshop.
React Native est une librairie qui permet de développer une application en React.js qui est lisible à la fois sur IOS et Android (littéralement, c'est React to Native).
Vous allez développer une application qui permet de rechercher des films sur smartphone via une API.
Ce workshop est basé sur un tuto Openclassrooms beaucoup plus complet et il sera possible pour ceux qui sont intéressés de continuer l'application après.
Il s'agit donc seulement d'une introduction au langage et à ses possibilités.
Il est préférable d'avoir une certaine connaissance de la librairie React.js pour mieux comprendre mais ce n'est pas obligatoire..
Node.js et NPM doivent être installés (ça devrait être déjà le cas).
Vous devez vous munir de votre smartphone. La connexion entre l'ordinateur et le smartphone se fera via Wifi.
Valable pour toutes les instructions du workshop
-
FYI: juste pour info, à ne pas appliquer pour le workshop
-
DoIt: c'est à faire pour le bon déroulement du workshop!
-
TryIt: exercice à faire!
=> FYI
CRNA
La méthode CRNA utilise le SDK Expo et ses outils. Plus facile pour débuter et ne nécessitant pas de compilation, cette méthode exclu cependant l'utilisation de certaines fonctionalités nécessitant des autorisations de la part de l'appareil: caméra, droits d'écriture...
Android studio n'a pas besoin d'être installé et l'on peut développer et tester une application Android/IOS depuis Linux par exemple.
$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start
ou
$ expo init my-project
$ cd my-project
$ npm start
Choisir le type de template, donner un nom à l'application et la façon d'installer les dépendances (npm ou yarn)
React Native CLI
Il s'agit d'une méthode de développemnt en React Natif pur, bien que toujours en React.js. Le code natif est affiché dans l'architecture.
L'application doit être compilée pour être visualisée. L'installation de l'environnement est plus complexe: JDK, Android SDK, XCode (Ios)...
Il faut un mac pour compiler la partie IOS.
$ npm install -g react-native-cli
$ react-native init my-project
$ react-native run-ios
ou $ react-native run-android
Il est possible de passer d'un développement CRNA à un développement React Native CLI (mais pas l'inverse) via la commande:
$ npm run eject
Attention, ce processus est donc irréversible!!!
=>DoIt
Installez Expo sur votre smartphone, cette app gratuite vous permettra de faire le build de l'application sur le smartphone depuis le PC :
=>DoIt
-
Installez Expo sur votre smartphone (Android ou IOS), cfr supra pour les url vers les stores.
-
Installez le client expo sur le PC/Mac
Linux:
$ npm install expo-cli --global
Mac:
$ sudo npm install -g expo-cli
-
Créez votre première app React Native
$ expo init expo-test
Donnez un nom à l'application et installez les dépendances...
-
Lancez un test
$ cd init expo-test
$ expo start
/$ npm start
-
Scannez le code avec l'application Expo du smartphone
Cela va prendre un petit temps pour fair le build la première fois.
=> Phase 1: Vous voyez apparaitre: Open up App.js to start working on your app!
=> Phase 2: ?
=> Phase 3: Profit
Sinon,
=> Try again!
=> Appelez (Google, nous...) à l'aide
=> FYI
Il faut installer les drivers usb ad-hoc selon votre système et activer le mode debug usb sur votre smartphone:
React Native: Running On Device
=> FYI
Ce n'est pas dans le scope du workshop, mais vous pouvez essayer d'installer/tester par vous même...
Attention c'est 'touchy', long à installer et assez lourd en téléchargements donc faites le avant de vous présenter au workshop.
Il n'y aura pas d'assistance lors du workshop...
-
Android Studio (nécessite l'installation d'autres API dans le logiciel: Android SDK Build-Tools, Android SDK tools, google play service...)
Si vous avez participé au workshop d'Antony Rizzitelli, tout est déjà installé normalement (SDK, emulateurs...). Vous pouvez aussi suivre la procédure d'installation décrite dans son readme.
The movie db
Vous devrez vous créer un compte sur The movie db pour avoir un token pour vous connecter à l'APi (si on arrive jusque là dans le workshop).