diff --git a/developpement/framework_web/presentation/slides_react_native.md b/developpement/framework_web/presentation/slides_react_native.md new file mode 100644 index 0000000..ca8395b --- /dev/null +++ b/developpement/framework_web/presentation/slides_react_native.md @@ -0,0 +1,251 @@ +--- +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/) \ No newline at end of file