formations/developpement/framework_web/presentation/slides_react_native.md

marp
true

React Native - Découverte

William Petit - S.C.O.P. Cadoles

---

Amorçage d'un projet

---

Méthode simplifiée: create-react-native-app

npm install -g create-react-native-app # Installation du générateur d'application
create-react-native-app my-app 	# Génération de l'application
cd my-app			# Se placer dans le répertoire
npm start			# Lancer le serveur de développement

https://github.com/react-community/create-react-native-app

---

Avantages

• Configuration requise minimale pour démarrer un projet
• Client Expo pour le test des applications
• Plateforme de build des applications pour Android et iOS.

Inconvénients

• Limité aux éléments React de base et à ceux de la librairie ExpoKit
• Dépendant du pipeline de build d'Expo si on ne souhaite pas "s'ejecter" et contruire son application soi même.

---

Méthode manuelle

Installation des dépendances systèmes

• Java Development Kit 8
• Android SDK

---

Installation du SDK via Android Studio

1. Télécharger Android Studio
2. Suivre les instructions de la documentaiton officielle pour télécharger la configuration du SDK Android.
3. Configurer son environnement shell en ajoutant dans son fichier de profil (.profile) les exports suivants:

   export ANDROID_HOME=$HOME/Android/Sdk
   export PATH=$PATH:$ANDROID_HOME/tools
   export PATH=$PATH:$ANDROID_HOME/platform-tools
   

---

Amorçage d'un projet

npm install -g react-native
react-native init my-project

---

Configurer et/ou activer le débogage sur son téléphone Android

1. Activer le débogage USB sur son téléphone Android
2. Autoriser les opérations USB via l'ajout d'une règle udev:

   echo "SUBSYSTEM==usb, ATTR{idVendor}==<id_vendor>, MODE=0666, GROUP=plugdev" \
   	>> /etc/udev/rules.d/51-android-usb.rules
   

   Il est possible que vous ayez à redémarrer votre machine après cette étape.
3. Vérifier que votre téléphone est correctement configuré:

   adb devices
   

---

Lancer votre application

cd my-project
react-native start 			# Lancer le serveur de développement
react-native run-android		# Déployer l'application sur votre appareil

---

Debugging

Afficher le menu de développement sur l'appareil

adb shell input keyevent 82

Activer la console Javascript distante

Ouvrir le menu de développement sur l'appareil et sélectionner "Enable Remote JS Debugging".

Ouvrir ensuite dans votre navigateur la page http://localhost:8081/debugger-ui/

---

Composants de base

Quelques exemples

• View
• Button
• TextInput
• Image
• WebView

Voir le reste des composants standards sur la documentation officielle

---

API

Quelques exemples

• Geolocation - Accéder aux informations de géolocalisation
• NetInfo - Accéder aux informations de connectivité
• CameraRoll - Accéder à la caméra/librairie d'images de l'appareil
• Alert - Afficher des fenêtres d'alerte
• AsyncStorage - Stocker des données persistentes sur l'appareil.

Voir le reste de l'API standard sur la documentation officielle

---

Gérer les différences de code entre Android et iOS

https://facebook.github.io/react-native/docs/platform-specific-code.html

---

Mutualisation des styles

https://facebook.github.io/react-native/docs/stylesheet.html

---

Générer un APK signé

1. Créer un keystore

   keytool -genkey -v \
       -keystore my-release-key.keystore \
       -alias my-key-alias -keyalg RSA \
       -keysize 2048 -validity 10000
   

2. Placer ce keystore dans android/app
3. Éditer le fichier android/gradle.properties et ajouter/modifier les lignes suivantes:

   RELEASE_STORE_FILE=my-release-key.keystore
   RELEASE_KEY_ALIAS=my-key-alias
   RELEASE_STORE_PASSWORD=*****
   RELEASE_KEY_PASSWORD=*****
   

---

4. Éditer le fichier android/app/build.gradle

   ...
   android {
       ...
       defaultConfig { ... }
       signingConfigs {
           release {
               if (project.hasProperty('RELEASE_STORE_FILE')) {
                   storeFile file(RELEASE_STORE_FILE)
                   storePassword RELEASE_STORE_PASSWORD
                   keyAlias RELEASE_KEY_ALIAS
                   keyPassword RELEASE_KEY_PASSWORD
               }
           }
       }
       buildTypes {
           release {
               ...
               signingConfig signingConfigs.release
           }
       }
   }
   ...
   

5. Lancer la génération de votre fichier APK

   cd android && ./gradlew assembleRelease
   

   Si la compilation fonctionne, votre fichier APK signé devrait se trouver à l'emplacement android/app/build/outputs/apk/app-release.apk

---

6. Installer son APK signé sur son téléphone

   adb install app/build/outputs/apk/app-release.apk
   

Plus d'informations sur le site de react-native et Android

---

Projets communautaires d'interêt

• NativeBase - Librairie de composants natifs pour Android et iOS
• React - Sensitive Info - Stockage d'informations sensibles sur l'appareil
• React Native FS - Accès au système de fichiers de l'appareil.
• React Native Navigation - Navigation native sur iOS et Android
• React Router - Native - "Routage" des vues pour iOS et Android

---

Exercice

Implémenter une première micro application avec React Native. Idées de sujet:

• Une application de micro-blogging géolocalisé
• Une application de liaison entre une collectivité et ses citoyens avec sondage, flux d'articles, etc
• Un application de gestion de stock (entrée/sortie des produits, synchronisation avec un backend)
• Une application de suivi des valeurs des crypto-monnaies...

---

Licence

CC BY-NC-SA 3.0 FR

Creative Commons - Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 France