Nous allons voir dans ce tutoriel comment programmer une application smartphone avec React Native et VSCode. React Native est un outil puissant permettant notamment de réaliser des applications multiplateforme (Android, IOs) à l’aide du langage JavaScript. Visual Studio Code est un éditeur de code permettant de développer notamment en C++, Python et avec React Native.
Nous avons vu dans le cadre de projet Arduino ou Raspberry Pi comment créer une application Android avec App Inventor 2. Avec React Native, certe plus complexe, vous serez capable de créer des applications plus évoluer sur Android ou IOs.
Installation de Node.js
Node.js est un environnement d’exécution du langage Javascript permettant de faire du développement Back-end et front-end
Pour installer Node.js sur votre ordinateur Windows, il vous suffit de télécharger l’installateur
Une fois Node.js installé vous aurez accès à npm (Node Package Manager) qui vous permettra d’installer les paquets nécessaires.
Installation et configuration d’Android Studio
Téléchargez et installez Java JDK 11
Configurez JAVA_HOME dans les variables d’environnement (C:\Program Files\Microsoft\jdk-11.0.17.8-hotspot\)
Téléchargez et exécutez l’installateur de Android Studio
Configurez ANDROID_HOME dans les variables d’environnement (C:\Users\ADMIN\AppData\Local\Android\Sdk)
Ouvrir Android Studio. Sur la fenêtre d’accueil, cliquez sur Configure puis AVD Manager
Là vous pourrez définir les appareils virtuels sur lesquels tester votre application.
N.B.: L’installation, la configuration d’Android Studio et le bon fonctionnement des appareils virtuels peut dépendre de l’installation d’Android SDK, Java SDK et Gradle, etc. Ce n’est pas ici le sujet principal mais si vous rencontrez un soucis n’hésitez pas à nous écrire.
Installation et configuration de Visual Studio Code
Pour installer Visual Studio Code, il vous suffit de télécharger et exécuter l’installateur
Une fois le logiciel installé, vous pouvez ajouter les extensions nécessaires au développement sous React Native avec VSCode
Créer un projet React Native
Créer un dossier qui contiendra votre projet ReactNative puis ouvrez le dans VSCode
Dans le terminal,
npx react-native@latest init CustomApp
Installez les dépendances avec yarn et lancer l’application
cd CustomAdd
npm install -g yarn
yarn install
npx react-native startPuis appuyer sur « a » pour l’exécuter sur Android
Visualiser l’application sur un appareil Android
Sur votre téléphone Android, dans « Paramètres », allez dans « paramètres supplémentaires » puis « Options pour les développeurs ». Rechercher l’option « Débogage USB » et activez-la. Cela vous permettra d’installer des applications via le port USB.
Vous pouvez vérifier que votre appareil est bien détecté et bien configurer avec la commande adb devices
Une fois votre appareil correctement configuré, si vous relancez l’application elle sera téléchargé et installé sur l’appareil
Applications
- Créer des applications IOs ou Android pour communiquer avec les objets connectés à base d’Android, Raspberry Pi, ESP32, ESP8266, etc.