formations/developpement/framework_web/presentation/slides_react_native.md

251 lines
7.1 KiB
Markdown
Raw Normal View History

2020-02-17 13:54:24 +01:00
---
marp: true
---
<style>
pre { font-size: 0.5em !important; }
table { font-size: 0.6em !important; }
</style>
# React Native - Découverte
## William Petit - S.C.O.P. Cadoles
---
## Amorçage d'un projet
---
<!-- page_number: true -->
## 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}==<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](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 dUtilisation Commerciale - Partage dans les Mêmes Conditions 3.0 France](https://creativecommons.org/licenses/by-nc-sa/3.0/fr/)