formations/developpement/framework_web/presentation/slides_react_native.md

7.1 KiB
Raw Permalink Blame History

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

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=*****
    

  1. É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
            }
        }
    }
    ...
    
  2. 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

  1. 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


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 dUtilisation Commerciale - Partage dans les Mêmes Conditions 3.0 France