fbpixel
Étiquettes : , , , , ,

Apprenez à créer un application pour Android très simplement en utilisant App Inventor 2.

Dans les domaines de la robotique et des objets connectés, une des fonctionnalités les plus intéressantes à mettre en œuvre est le pilotage à distance d’un projet électronique. Que ce soit pour afficher des mesures provenant de sa maison ou bien pour piloter un drone, une solution possible est de développer un application pour Smartphone et de communiquer avec un microcontrôleur en utilisant une liaison Bluetooth. Cette App peut être rapidement créée en utilisant le logiciel en ligne du MIT, App Inventor 2 (AI2).

Matériel

  • Ordinateur
  • Smartphone Android avec une application de lecture de code QR
  • Arduino UNO
  • Bluetooth HC-06
  • Câble Dupont F/M

Création de l’application AI2

Dans cet exemple, nous créons une application afin d’activer une fonction (ON/OFF) et de récupérer une mesure de capteur provenant d’une carte Arduino. Ce tutoriel peut être appliqué pour bien d’autres applications.

Inscrivez-vous sur le site App Inventor 2.

Créer un nouveau projet myApp

start-new-project Créez une application avec App Inventor 2

L’écran designer du projet apparait

new-project-designer-screen Créez une application avec App Inventor 2

Configuration de l’Application AI2

Pour créer le design de notre application, nous utilisons les objets disponibles sous les onglets dans le menu déroulant à gauche de l’écran et modifier leurs paramètres qui apparaissent à droit de l’écran.

Dans User interface, ajoutez un objet label et renommez-le titleLbl. Il contiendra le titre de l’application myApp.

project-title-label Créez une application avec App Inventor 2

Dans layout, ajouter un objet VerticalArrangement qui permet d’aligner des objets verticalement.

project-bluetooth-canvas Créez une application avec App Inventor 2

Dans l’objet VerticalArrangement, placez un label btStatusLbl puis un ListPicker btBtn qui serviront à gérer la connexion Bluetooth.

project-bluetooth-lbl-btn Créez une application avec App Inventor 2

Ajouter ensuite un label sensorLbl qui contiendra la valeur reçue de la carte Arduino.

project-sensor-lbl Créez une application avec App Inventor 2

Ajouter un HorizontalArrangement qui permet de disposer et d’aligner des objets horizontalement et qui contiendra les boutons permettant d’activer la fonction Arduino.

project-command-canvas Créez une application avec App Inventor 2

Dans l’HorizontalArrangement, ajouter deux boutons onBtn et offBtn.

project-on-off-btn Créez une application avec App Inventor 2

Enfin, dans Connectivity, ajouter un objet BluetoothClient qui nous permettra d’interagir avec le Bluetooth de l’appareil.

project-bluetooth-client Créez une application avec App Inventor 2

Et dans Sensor, ajoutez deux objets Clock, qui permettront de réceptionner et d’envoyer des données à intervalle de temps régulier.

project-clock Créez une application avec App Inventor 2

Vous personnaliser votre application comme vous le souhaitez en utilisant des couleurs, des polices ou des images différentes.

project-designer-end Créez une application avec App Inventor 2

Programmation de l’Application AI2

Pour programmer l’application, AI2 nous propose d’utiliser le Scratch qui permet de créer un programme sous forme de schéma bloc. Très simple d’utilisation mais nécessitant un peu de logique de programmation.

Toutes les fonctions sont disponibles en cliquant sur les objets dans le menu déroulant à gauche de l’écran. Parcourez les fonctions des objets que vous avez rajouté sur l’application ainsi que celles des objets Variables, Text, Math et Control dont nous allons nous servir.

ai2-blocks-btn-menu Créez une application avec App Inventor 2

Créez la liste des modules Bluetooth disponibles sur l’appareil.

ai2-blocks-create-list Créez une application avec App Inventor 2

Gérez l’établissement de la connexion et modifiez le statut en fonction de la connexion.

ai2-blocks-handle-bt-connexion Créez une application avec App Inventor 2

Une variable globale « command » est définie afin de garder en mémoire la valeur donnée par le dernier bouton pressé (ON ou OFF).

ai2-blocks-handle-command Créez une application avec App Inventor 2

Nous envoyons la valeur de la variable command par Bluetooth, si celui-ci est connecté, avec une fréquence définie par l’objet Clock1.

ai2-blocks-send-command Créez une application avec App Inventor 2

Pour récupérer la valeur du capteur envoyée de l’Arduino, nous vérifions si des données sont disponibles dans le buffer avec une fréquence définie par Clock2. Nous affichons ensuite cette valeur dans sensorLbl.

ai2-blocks-recieve-text Créez une application avec App Inventor 2

Code Complet

Une fois tous les blocs placés sur l’interface et configurés, le code devrait ressembler à ça.

ai2-myapp-complete-code Créez une application avec App Inventor 2

Compiler et partager votre Application

Un fois que ce programme en Scratch est correctement configuré et qu’aucune erreur ne s’affiche, munissez-vous d’une application de lecture de code QR et compilez le programme en utilisant le menu Build > App (provide QR code for .apk)

ai2-app-build-qrcode Créez une application avec App Inventor 2

Une fois le code QR généré, vous pouvez télécharger et installer l’application sur votre Smartphone.

ai2-app-QRcode Créez une application avec App Inventor 2

Vous pouvez partager l’installateur de votre application .APK pour Android ou vous pouvez partager le projet .AIA afin que d’autres personnes puissent le modifier.

Exporter pour créer le fichier AIA correspondant sur votre ordinateur

ai2-app-export-project-aia Créez une application avec App Inventor 2

Importer pour ouvrir un fichier AIA sur l’application en ligne et modifier le projet

ai2-app-import-project-aia Créez une application avec App Inventor 2

Code Arduino

Voici le code à téléverser dans la carte Arduino pour réceptionner et envoyer des données sur le port série. (Vous pouvez retrouver plus d’information dans ce tuto)

#include <SoftwareSerial.h>

SoftwareSerial hc06(2,3);

String cmd="";
float sensor_val=0;

void setup(){
  //Initialize Serial Monitor
  Serial.begin(9600);
  //Initialize Bluetooth Serial Port
  hc06.begin(9600);
}

void loop(){
  //Read data from HC06
  while(hc06.available()>0){
    cmd+=(char)hc06.read();
  }

  //Select function with cmd
  if(cmd!=""){
    Serial.print("Command recieved : ");
    Serial.println(cmd);
    // We expect ON or OFF from bluetooth
    if(cmd=="ON"){
        Serial.println("Function is on");
    }else if(cmd=="OFF"){
        Serial.println("Function is off");
    }else{
        Serial.println("Function is off by default");
    }
    cmd=""; //reset cmd
  }
  // Simulate sensor measurement
  sensor_val=(float)random(256); // random number between 0 and 255
    
  //Write sensor data to HC06
  hc06.print(sensor_val);
  delay(100);
}


Résultat

Nous pouvons activer et désactiver la fonction de l’Arduino et recevoir les données d’un capteur sur l’application

myApp-not-connected Créez une application avec App Inventor 2
myApp-connected Créez une application avec App Inventor 2
ai2-app-arduino-onoff Créez une application avec App Inventor 2

N’hésitez pas à laisser un commentaire ou à nous contacter si vous avez besoin d’aide pour créer votre application ou si vous pensez que des informations manquent à ce tutoriel.

Applications

Sources