fbpixel
Créer une application avec React Native et VSCode

Créer une application avec React Native et VSCode

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, certes plus complexe, vous serez capable de créer des applications plus évoluer et de développer sur Android et 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. Vérifiez bien la compatibilité des versions.

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 CustomApp
npm install -g yarn  
yarn install
npx react-native start

Puis appuyer sur “a” pour l’exécuter sur Android

Pour tester l’application en mode production, utilisez la commande suivante

npx react-native run-android --variant release

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ée et installée sur l’appareil

Vous êtes maintenant capable de développer et installer votre application sur un appareil.

N.B.: Si vous avez du mal à installer un simulateur ou si vous n’avez pas d’appareil, vous pouvez également visualiser le résultat sur CodeSandBox pour tester votre application

Génération de l’APK

Une fois votre application testée et validée sur simulateur ou sur appareil réel, vous pouvez générer le fichier APK. Ce fichier peut être téléchargé sur n’importe quel appareil avec un OS compatible et permet d’installer l’application.

Dans le fichier android/build.gradle, vérifier que la version SDK (API level) correspond à la version de plateforme cible

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.3.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

A la racine du projet CustomApp, entrez les commandes suivantes sur VS Code

cd android
./gradlew assembleRelease

Il est possible de nettoyer la compilation avant la génération du build avec la commande

./gradlew clean

Le fichier apk (installateur mobile) généré se trouve sous android>app>build>outputs>apk\release>app-release.apk

Vous pouvez ensuite le partager sur vos différents appareils.

Modifier l’icône de l’application

Les icônes de l’application se trouve dans le dossier android/app/src/main/res/

Pour remplacer les icônes par défaut de l’application, vous devez créer des icônes de différentes tailles. Ceci peut être fait facilement avec l’outil IconKitchen qui permet de charger une image et générer tous les formats de l’icône. Une fois le dossier IconKitchen-Output téléchargé, vous pouvez remplacer les dossiers suivant dans le dossier res de votre projet.

  • mipmap-hdpi
  • mipmap-mdpi
  • mipmap-xhdpi
  • mipmap-xxhdpi
  • mipmap-xxxhdpi

N.B.: Modifiez le nom du fichier avec le nom du fichier d’origine si besoin ou changez le nom du fichier dans AndroidManifest.xml

Archiver son projet React Native

Une fois que votre application est prête, pour archiver votre projet il est intéressant de nettoyer votre projet pour qu’il prenne moins de place mémoire et pour faire une installation propre.

Un projet simple React Native peut faire 800Mo. Pour supprimer les fichiers à ne pas archiver, utiliser les commandes suivantes

rm -rf node_modules #delete libraries folder
npm cache clean --force #clean npm cache
yarn cache clean --force #clean yarn cache
cd android && ./gradlew clean && cd .. € delete android build

Le dossier nettoyé ne fait plus que 500Mo. Vous pouvez ensuite réinstaller le projet proprement

npm install
yarn install
cd android && ./gradlew  && cd ..

Pour plus de facilité, vous pouvez mettre ces lignes de commandes dans des scripts dans le fichier package.json

 "scripts": {
      "npm:clean": "rm -rf node_modules && npm cache clean && npm install"
      "yarn:clean": "rm -rf node_modules && yarn cache clean --force && yarn install"
      "android:clean": "cd android && ./gradlew clean && ./gradlew cleanBuildCache && cd ..",
      "ios:clean": "cd ios && xcodebuild clean && rm -rf ~/Library/Caches/CocoaPods && rm -rf Pods && rm -rf ~/Library/Developer/Xcode/DerivedData/* && pod cache clean --all && pod deintegrate && pod setup && pod install && cd ..",
    }

Il est aussi possible d’utiliser la librairie react-native-clean-project

React Native: les meilleurs pratiques

Il existe différentes manières de faire la même chose, surtout en programmation. Toutefois, l’expérience de plusieurs montre que de bonnes habitudes permettent de travailler plus efficacement.

  • Ajouter du TypeScript pour améliorer la lecture du code et prévenir les bugs
  • Utiliser des styles responsive qui s’adaptent au tailles d’écran
  • Utiliser des styles en fonction de la plateforme
  • Préférer les composants fonctionnels au composants de classe
  • Créer un thème dans lequel sont spécifiés les styles de l’interface
  • Définir les différents chemins utilisateur
  • Nettoyer le code et le projet
  • Avoir en tête un développement Secure by design

De nos jours les problèmes relatifs ne sont pas à prendre à la légère et il est toujours bon de traiter ces problèmes aux débuts du développement.

  • Utiliser la validation d’entrée utilisateur pour assurer que les données rentrées sont correctes
  • Sécuriser la transmission de données
  • Prendre en charge les erreurs pour ne pas révéler d’informations sensibles
  • Confirmer l’authentification et les autorisations des utilisateurs
  • Stocker les données de manière sécurisée
  • Valider régulièrement le système avec des outils de test de sécurité

Applications

Sources

Utilisation d’un écran Nextion avec Arduino

Utilisation d’un écran Nextion avec Arduino

L’écran Nextion est une des meilleures solutions pour créer une interface graphique afin de piloter votre projet Arduino. L’interface la plus connue pour interagir avec un Arduino est l’écran LCD avec quelques boutons et potentiomètres au prix des entrées-sorties et d’une surcharge du code Arduino. Nous allons voir dans ce tutoriel comment configurer un écran Nextion et comment l’utiliser avec Arduino

Matériel

  • Arduino (ou autre carte avec port UART)
  • Écran Nextion
  • Adaptateur USB-TTL 5V
  • 4x Dupont wire avec connecteur JST

Présentation de la carte Nextion

L’interface de base pour piloter un Arduino, et présent dans tous les kits, est l’écran LCD avec quelques boutons et potentiomètres qui existe sous forme de Shield LCD. Il existe aussi des Shield muni d’écran tactile mais, ces derniers, utilisent toutes les entrées-sorties de l’Arduino et surcharge le code Arduino. Une solution à cela est d’utiliser un écran Nextion qui contient son propre programme et communique avec n’importe quelle microcontrôleur avec le port série.

N.B.: Il est possible de créer une interface graphique sur PC ou créer une interface web pour piloter le projet en ajoutant un module de communication sans fil.

Installation et présentation de l’éditeur Nextion

Téléchargez et installez l’éditeur Nextion

Lorsque vous ouvrez un nouveau projet ou fichier, le logiciel vous demande le modèle de l’écran (dans notre cas NX4832K035_011). Vous pouvez modifier la selection dans le menu Device>Settings

Puis choisissez l’orientation de l’écran et l’encodage.

Création d’une interface graphique

Nous allons utiliser l’éditeur graphique Nextion pour créer notre interface graphique. Dans cet exemple, nous allons ajouter:

  • Une image
  • Quelques textes pour le titre ou pour afficher des données
  • Un bouton qui modifie l’interface
  • Un bouton qui envoie une commande sur le port série
  • Un timer qui rafraichit l’interface
  • Une variable qui stocke une donnée reçue du port série

Pour ajouter un objet cliquez sur l’objet désiré dans la fenêtre Toolbox et l’objet sera inséré automatiquement dans la fenêtre Display. Vous pouvez ensuite configurer l’objet dans la fenêtre Attributes

Vous pouvez télécharger le fichier IHM à importer dans Nextion Editor. Avec cet exemple, vous serez en mesure de créer des interfaces bien plus complexes.

Ajouter une image

Pour ajouter une image, il faut d’abord importer une image dans le logiciel à l’aide de la touche (+) de la fenêtre “Picture”

Vous pouvez ensuite insérer un objet Picture dans la fenêtre Display puis sélectionnez l’image en appuyant sur l’attribut pic > browse…

N.B.: Ajouter une image aux dimensions désirées

Ajouter du texte

Avant de rajouter un objet text, il vous faut générer une police de caractère. Ceci peut se faire dans Tools> Generate Font

Une fois la police générée, vous pouvez la sélectionnez dans l’attribut font de l’objet Text. Vous pouvez ensuite modifier le texte dans l’attribut txt (Attention au nombre de caractère maximum txt_maxl).

Nous ajoutons quatre objets texte:

  • Le label titre
  • l’état de la LED
  • le label “Analog Val”
  • la valeur analogique reçue du micrcontrôleur

Ajouter un bouton

Une fois l’objet bouton ajouté à l’interface, vous pouvez régler dans les attributs:

  • le texte affiché
  • la couleur lorsque le bouton est pressé
  • la couleur lorsque la couleur est relâché

Dans la fenêtre Events, il est possible de programmer ce que l’écran va faire lorsque le bouton est pressé ou relâché. Il y a un certain nombre d’instructions que vous pouvez utiliser dans ces fenêtres. Notamment:

  • Modifier des éléments de l’interface (Ex: t0.txt=”Pressed”)
  • Envoyer l’identifiant du bouton via le port série
  • Envoyer une autre commande avec prints
  • Bouton b0
  • Bouton b1

Dans l’onglet Touch Release Event , nous écrivons la commande suivante qui est une commande prédéfinie de la librairie Nextion et correspondant à trigger1()

printh 23 02 54 01

  • Bouton b2

Pour le bouton b2, nous utilisons la même commande mais pour trigger2()

printh 23 02 54 02

Ajouter un timer

L’objet Timer permet d’exécuter un code régulièrement. Particulièrement utile pour récupérer des données provenant du port série et mettre à jour l’interface.

Dans l’onglet Timer event, nous utilisons la fonctions covx pour convertir la valeur de la variable en string et l’écrire dans le texte t4

covx analog0.val,t4.txt,0,0

Charger le programme sur l’écran Nextion

Brancher la carte Nextion au convertisseur USB-TTL

Pour charger l’interface, appuyez sur Compile puis Upload

Connexion de l’écran Nextion au microcontrôleur Arduino

Pour téléverser le code Arduino sur la carte, les pin RX et TX doivent être déconnectées de l’écran.

Utilisation de la librairie Nextion.h

Il existe différentes librairies que vous pouvez utiliser pour gérer un écran Nextion

Nous utilisons EasyNextion

Dans Nextion Editor, nous définissons un event release “printh 23 02 54 01” pour le bouton ON et un event release “printh 23 02 54 02” pour le bouton Off.

A l’aide de la fonction NextionListen(), ces commandes vont activer les fonctions trigger1 et trigger2.

#include "EasyNextionLibrary.h"

#define baudrate 9600

EasyNex myNex(Serial);

//Variables
uint16_t analog;
bool ledstate;

const int REFRESH_TIME = 100;
unsigned long refresh_timer = millis();

void setup() {
  myNex.begin(baudrate);

  pinMode(A0, INPUT);
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  myNex.NextionListen();

  if ((millis() - refresh_timer) > REFRESH_TIME) {
    analog = analogRead(A0);
    myNex.writeNum("analog0.val", analog);

    refresh_timer = millis();
  }
}

//`printh 23 02 54 XX` , where `XX` the id for the triggerXX() in HEX.
void trigger1() {
  digitalWrite(LED_BUILTIN, HIGH);
  myNex.writeStr("t2.txt", "LED ON");
}

void trigger2() {
  digitalWrite(LED_BUILTIN, LOW);
  myNex.writeStr("t2.txt", "LED OFF");
}

Résultats

Bonus: Nextion Editor Simulator

Nextion propose un simulateur permettant de tester les interactions entre l’écran et microcontrôleur et l’interface graphique. Ce simulateur est accessible en appuyant sur “Debug”

Sources

Programmer un ESP32/ESP8266 avec MicroPython et VS Code

Programmer un ESP32/ESP8266 avec MicroPython et VS Code

Nous allons voir comment programmer une carte ESP32 ou ESP8266 en MicroPython avec Visual Studio Code qui est un IDE de plus en plus utilisé pour la programmation dans différent langage. Il est possible de programmer la carte ESP32/ESP8266 avec VS Code et l’extension Platform.IO en C/C++. Il peut être intéressant d’utiliser le même outil pour programmer le microcontrôleur avec MicroPython

Présentation de Visual Studio Code

Visual Studio Code est un éditeur de code extensible et léger développé par Microsoft. VsCode apporte de nombreuses fonctionnalités comparé à l’IDE Arduino:

  • Complétion automatique
  • Mise en évidence de la syntaxe
  • Fonctionnalité de débogage
  • Programmation dans plusieurs langages (C++, C#, Java, Python, PHP, etc.)
  • Gestion de projet
  • Gestion de dépôt Git
  • Etc.

Il est en source libre et disponible sur les plateformes Windows, Linux et MacOS.

Installation du Firmware MicroPython sur la carte ESP

Pour installer le firmware MicroPyhton sur la carte ESP32 ou ESP8266, vous pouvez utiliser un des deux tutoriels suivants:

Installation de Visual Studio Code

Allez sur la page de téléchargement de Visual Studio Code et téléchargez la version correspondante à votre OS.

Lancez l’installateur et suivez la procédure

Installation de Pymakr

Pour pouvoir programmer en Python, il faut installer l’extension correspondante.

Cliquez sur l’icône “Manage” (roue dentée) en bas à gauche et sélectionnez Extensions (ou Ctrl+Shift+X)

Recherchez ensuite et sélectionnez “Pymakr”. Puis installez, l’extension.

Cliquez sur l’icône Pymakr et sélectionner “create project”

Cliquez ensuite ADD DEVICE puis sélectionnez l’ESP connecté à l’ordinateur.

Une fois l’appareil sélectionné, vous pouvez le connecter en appuyant sur l’éclair

Installation de Node.js

Il se peut que sur l’étape précédente, l’étape de création de projet en cliquant “create project”, ne marche pas correctement.
Dans ce cas là, pour régler ce souci il suffit d’installer un autre logiciel tiers nommé Node.js qui permettra le fonctionnement correcte de l’extension Pymakr. Rendez vous sur le site https://nodejs.org/en/ pour télécharger la version Windows (x64). Une fois téléchargé, vous pouvez exécuter l’installateur de l’application.

On clique 2 fois sur “next” en acceptant les conditions.

On choisi l’emplacement de l’application ( on peut laisser l’emplacement par défaut dans le dossier “Program Files” de votre ordinateur” ) puis on clique sur “Next”.

Ici, il n’est pas nécessaire de changer quoi que ce soit donc on clique sur “Next”.

Ici, il n’est pas nécessaire d’installer des outils supplémentaires tel que Chocolatey comme suggéré, alors on clique sur “Next”.

On finit par cliquer sur “Install”, en autorisant l’installation avec les droits d’administrateur si l’ordinateur vous le demande.

L’installation de Node.js est terminé, on peut cliquer sur “Finish”.

On peut passer à la partie programmation en MicroPython sur Visual Studio Code. Cependant, assurez d’avoir bien fermé et redémarré Visual Studio Code pour qu’il prenne en compte Node.js.

Programmer la carte ESP32/ESP8266 en MicroPython

Une fois le projet configuré, vous pouvez lancer un terminal Pymakr dans l’onglet TERMINAL, cliquez sur la flèche à droite du “+” pour sélectionnez la console Pymakr

Appuyer sur “Entrée” pour établir la connexion “select/COM8”

Vous pouvez à présent programmer en MicroPython directement sur l’ESP

Lancer un script Python sur votre ESP32/ESP8266

Il y a deux fichiers Python dans le projet:

  • boot.py qui s’exécute au démarrage du microcontrôleur
  • main.py qui contient le code principal et s’exécute juste après boot.py

Ouvrez le fichier main.py du projet et copier le code suivant

import sys
import time

def main():
    print("MicroPython program is running ")
    time.sleep(0.5)

if __name__=="__main__":
  print("{} initialized".format(sys.platform))
  while(1):
    try:
      main()
    except KeyboardInterrupt:
      print("Program stopped")
      sys.exit(0)

Vous pouvez ensuite téléverser le code sur la carte en utilisant le bouton “Sync project to device”

Après un reset de la carte avec le bouton EN, vous pouvez voir que le code s’exécute correctement

Sources

Outils pour tester la communication UDP

Outils pour tester la communication UDP

Avec un ou plusieurs appareils connectés sur un réseau Wifi, il est souvent utile d’avoir des outils pour pouvoir tester le protocole de communication UDP, Il est possible de communiquer entre différents appareils comme ordinateur, Arduino, ESP32, ESP8266, en utilisant le protocole UDP. Il existe des outils qui vous permettent d’envoyer des données à partir de votre ordinateur pour tester la connexion et la réception de certains paquet.

Matériel

  • Ordinateur
  • Microcontrôleur configuré comme serveur UDP (Raspberry Pi, ESP32, ESP8266)

NetCat

Si vous utiliser un ordinateur Windows, vous pouvez installer l’outil NetCat (Télécharger source ou NetCat précompilé ) (préinstallé sur Linux et MacOS).

(N.B.: Sur Windows nous conseillons l’utilisation de PacketSender plus facile d’installation d’une source sûre pour les débutants)

Netcat est un outil en ligne de commande permettant le transfert de données avec les protocoles réseau TCP/IP et UDP

Copier le dossier où vous le souhaitez sur votre ordinateur (ex: C:/Users/ADMIN/NetCat)

Placer vous ensuite dans le dossier où se trouve nc.exe

Entrez la commande suivant pour envoyer une chaine de caractère en modifiant l’adresse IP et le port pour qu’ils correspondent au port local ouvert sur votre appareil.

echo "hello" | nc -u -w1 192.168.1.80 8888

(l’option -w correspond au time-out temps en seconde après lequel la connexion se ferme)

Résultat

PacketSender

Télécharger et installer le logiciel PacketSender qui est un outil permettant d’échanger des paquets de données à l’aide des protocole UDP, TCP, SSL et HTTP GET/POST.

Vous devez, tout d’abord, rentrer le message dans l’encart ASCII

Puis vous pouvez entrer l’adresse IP et le port du serveur

Dans le menu déroulant, juste à côté du bouton “Send”, sélectionnez UDP.

Il ne reste plus qu’à appuyer sur “Send”

Résultat

Sources

Si vous connaissez d’autres outils permettant de tester la communication UDP , TCP ou sans fil, n’hésitez pas à laisser un commentaire.

Programmer Arduino avec Visual Studio Code

Programmer Arduino avec Visual Studio Code

Nous allons voir comment programmer une carte Arduino en utilisant Visual Studio Code qui est une alternative sympathique à l’IDE Arduino. On débute généralement la programmation sur Arduino en utilisant l’IDE officiel Il peut être intéressant de changer d’éditeur de code pour avoir accès à un plus grand nombre de fonctionnalités. Nous présentons dans cet article l’utilisation du logiciel Visual Studio Code. D’autres éditeurs existent comme Eclipse, Netbeans, Atom.io, etc.

Présentation de Visual Studio Code

Visual Studio Code est un éditeur de code extensible et léger développé par Microsoft. VsCode apporte de nombreuses fonctionnalités comparé à l’IDE Arduino:

  • Complétion automatique
  • Mise en évidence de la syntaxe
  • Fonctionnalité de débogage
  • Programmation dans plusieurs langages (C++, C#, Java, Python, PHP, etc.)
  • Gestion de projet
  • Gestion de dépôt Git
  • Etc.

Il est en source libre et disponible sur les plateformes Windows, Linux et MacOS.

Installation de Visual Studio Code

Allez sur la page de téléchargement de Visual Studio Code et téléchargez la version correspondante à votre OS.

Lancez l’installateur et suivez la procédure

Pour pouvoir communiquer avec Arduino, il faut installer l’extension correspondante.

Cliquez sur l’icône “Manage” (roue dentée) en bas à gauche et sélectionnez Extensions (ou Ctrl+Shift+X)

Recherchez ensuite Arduino et sélectionnez ” Arduino for Visual Studio Code”

Redémarrez VsCode

Configuration de VsCode pour Arduino

Cliquez sur l’icône Manage et sélectionnez “Commande Palette” (ou Ctrl+Shift+P)

Recherchez Arduino, vous avez alors accès à plusieurs commandes relatives à Arduino.

Sélectionnez Arduino Board Config puis sélectionnez le type de carte

En bas à droite, cliquez sur Select Serial Port, puis sélectionnez le port série correspondant à l’Arduino (ici, COM5).

En bas à droite, cliquez sur Select Programmer puis sélectionnez “AVRPISP mkII”

Compilation du code et téléversement

Dans la palette de commande (Ctrl+Shift+P), rechercher Arduino: Examples puis choisissez Blink ou un autre exemple.

Vous pouvez ensuite téléverser le code en appuyant sur “Upload” en haut à droite.

La console indique si le code se charge et vous pouvez vérifier que le code est bien chargé sur la carte Arduino en regardant l’état de la LED.

En modifiant un peu le code nous envoyons du texte sur le moniteur série

int led = 13;

// the setup routine runs once when you press reset:
void setup() {
  Serial.begin(115200);
  // initialize the digital pin as an output.
  pinMode(led, OUTPUT);
}

// the loop routine runs over and over again forever:
void loop() {
  digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)
  Serial.println("Led is High");
  delay(1000);               // wait for a second
  digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW
  Serial.println("Led is Low");

  delay(1000);               // wait for a second

}

Téléversez le code modifié sur la carte Arduino.

Pour ouvrir le moniteur série, il faut appuyer sur l’icône Serial Monitor juste à droite du type de carte en bas à droite

Vous pouvez ensuite sélectionnez le baudrate désiré dans la barre de configuration de la carte Arduino en bas à droite (115200).

Envoyer des commandes sur le moniteur série

Comme pour l’IDE Arduino, il est possible d’envoyer des commandes via le port Série.

Dans la palette de commandes Arduino, chercher “Send text to Serial Port”. Un bar de saisie apparait.

Il est possible de créer un raccourci clavier pour ouvrir cette commande plus facilement. Appuyer sur la roue dentée à droite de la commande

Sources