formations/developpement/framework_web/presentation/slides_react_native.md

---
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/)