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