React Native: ajout slides
This commit is contained in:
parent
93f78ff5d5
commit
b2324e3917
|
|
@ -0,0 +1,251 @@
|
|||
---
|
||||
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 d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 France](https://creativecommons.org/licenses/by-nc-sa/3.0/fr/)
|
||||
Loading…
Reference in New Issue