--- 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` ```bash 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](https://developer.android.com/studio/index.html) 2. Suivre [les instructions](https://facebook.github.io/react-native/docs/getting-started.html) 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}==, 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](https://facebook.github.io/react-native/docs/view.html) - [Button](https://facebook.github.io/react-native/docs/button.html) - [TextInput](https://facebook.github.io/react-native/docs/textinput.html) - [Image](https://facebook.github.io/react-native/docs/image.html) - [WebView](https://facebook.github.io/react-native/docs/webview.html) [Voir le reste des composants standards sur la documentation officielle](https://facebook.github.io/react-native/) --- ## API ### Quelques exemples - [Geolocation](https://facebook.github.io/react-native/docs/geolocation.html) - Accéder aux informations de géolocalisation - [NetInfo](https://facebook.github.io/react-native/docs/netinfo.html) - Accéder aux informations de connectivité - [CameraRoll](https://facebook.github.io/react-native/docs/cameraroll.html) - Accéder à la caméra/librairie d'images de l'appareil - [Alert](https://facebook.github.io/react-native/docs/alert.html) - Afficher des fenêtres d'alerte - [AsyncStorage](https://facebook.github.io/react-native/docs/asyncstorage.html) - Stocker des données persistentes sur l'appareil. [Voir le reste de l'API standard sur la documentation officielle](https://facebook.github.io/react-native/) --- ### 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](https://facebook.github.io/react-native/docs/signed-apk-android.html) et [Android](https://developer.android.com/studio/publish/app-signing.html)_ --- ## Projets communautaires d'interêt - [NativeBase](https://docs.nativebase.io/) - Librairie de composants natifs pour Android et iOS - [React - Sensitive Info](https://github.com/mCodex/react-native-sensitive-info) - Stockage d'informations sensibles sur l'appareil - [React Native FS](https://github.com/itinance/react-native-fs) - Accès au système de fichiers de l'appareil. - [React Native Navigation](https://wix.github.io/react-native-navigation/#/) - Navigation native sur iOS et Android - [React Router - Native](https://reacttraining.com/react-router/native/guides/philosophy) - "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](https://creativecommons.org/licenses/by-nc-sa/3.0/fr/)