16 boulevard st Denis - Paris
06 11 01 76 72
contact@ateliom.fr

Connecter une application mobile à un boîtier électronique via Bluetooth

Vous souhaitez développer un prototype d’application mobile pour connecter un boîtier électronique à un smartphone via Bluetooth ? Voici un guide pour initier votre projet.

Le développement d’un objet connecté n’a de sens que si l’objet est capable de communiquer avec l’utilisateur, que ce dernier soit un technicien chargé d’ajuster des paramètres ou un utilisateur final qui manipule l’objet en question. Afin d’établir cette communication en 2020, les fabricants comme les utilisateurs se tournent naturellement vers les terminaux mobiles. En effet, les smartphones nous accompagnent dans notre quotidien et leurs interfaces sont aujourd’hui extrêmement familières, tant dans le domaine personnel que professionnel. A ce titre, ils constituent le support idéal pour présenter des données et des options de paramétrages à un utilisateur. D’autant plus que le protocole de communication est tout trouvé : le bluetooth !

Objectif

Développer, en moins d’une heure, une application mobile capable d’établir une communication bluetooth avec un boîtier ! Cette application doit pouvoir tourner sur Android dans sa version de base et être adaptable afin de fonctionner éventuellement sur iOS.

Technologies

Les technologies choisies pour ce tutoriel l’ont été en raison d’un impératif simple : prototyper rapidement. Pour cela, l’utilisation de technologies issues du Web s’est imposée grâce à, notamment, la grande facilité d’usage de VueJS et des frameworks qui constitue son ecosystème. Sans plus attendre, voici les briques retenues :

  • Le framework Quasar (VueJS) qui propose une structure pour notre code, un ensemble très complet de composants prêt à l’emploi, de multiple mode de “build” (mobile, webapp, progressive web app, desktop etc.).
  • Cordova pour déployer le code de l’application sur iOS et Android. Il s’agit en fait simplement du mode “mobile” de Quasar. Capacitor est également proposé par Quasar en guise d’alternative à Cordova.
  • Le plugin cordova-plugin-bluetooth-serial afin de gérer la communication bluetooth entre le boîtier et l’application.

Des fondations solides

Les premiers pas

La première étape consiste à installer le framework Quasar et son interface en ligne de commande (CLI) afin de pouvoir créer un nouveau “projet Quasar”. Les “projet Quasar” sont déployables en tant qu’application web, application mobile, PWA, application bureau et le tout à partir d’une base de code commune. En pratique, cela n’est jamais entièrement le cas car certains détails sont à personnaliser mais 99% de votre code restent partageable quelque soit le mode de déploiement choisi. Et cela fait gagner un temps fou !

# Installer la CLI au niveau de votre système
yarn global add @quasar/cli

# Ajouter l'exécutable de la CLI à votre PATH
# in ~/.bashrc or equivalent
export PATH="$(yarn global bin):$PATH"

# Fermer et réouvrir le terminal
# Puis rendez-vous dans votre dossier de travail 

# Créer votre projet Quasar
quasar create my-new-project
# Répondez ensuite aux questions posées en fonction de vos attentes (eslint, vuex etc.)
 

L’étape suivante consiste à installer Cordova. Ceci doit se faire au niveau de votre projet et aussi au niveau de votre système afin d’installer Android Studio ou X-Code. La documentation de Quasar est très claire sur ce point et vous guidera pas à pas : guide cordova.

Arborescence d'un projet Quasar

L’arborescence des fichiers du projet est celle fournie par défaut par Quasar. Nous y trouverons une structure classique avec les éléments ci-dessous :

  • src Un dossier avec le code de l’application.
  • src-cordova Un dossier dédié au paramétrage de Cordova.
  • src/router Un dossier contenant le router de l’application front.
  • src/pages Un dossier rassemblant les pages de l’application.
  • src/components Un dossier pour les composants partagés par les différentes pages.
  • src/layouts Un dossier contenant le composant “layout” de l’application. Il de l’élément principal de l’interface qui définit l’emplacement du menu, du contenu des pages ainsi que la place du logo.

La convention de codage retenu dans cet article consiste à associer toutes les pages à une route et à utiliser src/components pour les composants partagés tandis que les composants spécifiques à une page sont placés dans un dossier components à côté du fichier de ladite page.

Lancer l'application

A ce stade, l’application peut déjà être exécutée sur mobile afin d’avoir une première idée de son allure. Pour cela, il est possible d’utiliser un émulateur qui va simuler un smartphone au sein de votre système ou, et c’est recommandé, de lancer l’application directement sur votre smartphone personnel. A cette effet, il est nécessaire d’activer le mode “développeur” et le “usb debug”.

Astuce 1 : si vous utilisez votre smartphone, notez qu’il est nécessaire que celui-ci soit connecté au même WIFI que votre ordinateur de développement. Dans le cas contraire, vous aurez une erreur et un écran blanc au lancement de votre application.

Astuce 2 : chrome propose un mode “debug” qui vous permet de visualiser l’application tournant sur votre téléphone directement depuis le navigateur Chrome. Cela rend accessible les messages d’erreurs ainsi que l’inspecteur html de chrome. Idéal pour résoudre rapidement les petits bugs.

# Pour lancer l'application en mode "dev" depuis le dossier racine
quasar dev -m cordova -T android

# En option : 
# Pour simplement compiler l'application
# quasar build -m cordova -T android 
Capture d'écran de l'application

Gestion du bluetooth

La première étape est d’installer le plugin cordova de gestion du bluetooth au sein de notre application. Il s’agit d’un plugin gérant le “bluetooth classique”, par opposition au Bluetooth Low Energy (BLE). D’autres plugins existent afin de gérer le BLE.

# Se placer dans src-cordova 
cd src-cordova
# Ajouter le plugin
cordova plugin add cordova-plugin-bluetooth-serial 

La seconde étape consiste à créer une interface permettant d’utiliser intelligemment ce plugin dans notre code. De nombreuses façons de faire existent et nous avons choisi de passer par un “service”. Ce service est un module Javascript contenant une série de fonctions permettant d’actionner les différents leviers fournis par le plugin. Par exemple, l’obtention de la liste des objets accessibles mais non “liés” (“unpaired devices”) se fera en appelant la fonction “discoverUnpaired” de notre service. Cette fonction utilisera en interne les mécanismes fournis par le plugin bluetooth.

Création du service

Créer un dossier “services” dans “src/” afin de stocker nos services. Y ajouter un fichier bluetooth.service.js. L’exemple ci-dessous incorpore une unique fonction chargé de détecter les dispositifs bluetooth non appairés dans l’environnement proche du téléphone. Une promesse est utilisée afin de simplifier l’usage de la fonction. Notez que le plugin est utilisé

// bluetooth.service.js

function discoverUnpaired() {
  const promise = new Promise((resolve, reject) => {
    function success(devices) {
        console.log("discoverUnpaired:success")
        resolve(devices);
    }

    function failure() {
        console.log("discoverUnpaired:failure")
        reject();
    }

    // "bluetoothSerial" correspond à notre plugin
    bluetoothSerial.discoverUnpaired(success, failure);
  })

  return promise;
}

export default {
  discoverUnpaired // Discover all unbonded device
} 

Et un fichier index.js :

// index.js

import bluetoothService from './bluetooth.service.js'

export {
  bluetoothService
}
 

Le tout s’utilisant de la manière suivante au sein d’un composant VueJS :

// Importer le service
import { bluetoothService } from '~/services'

// ... composant vue
async mounted () {
    // Cette liste peut être utilisée afin d'afficher à l'écran la liste des dispositifs pouvant être "apparairés"
    const unpairedList = await bluetoothService.discoverUnpaired()
}
// ... composant vue 

Le petit plus

Liste de dispositifs détectés

Le framework Quasar fourni de nombreux composants dont un composant de “liste”. Il s’agit de QList qui s’utilise avec QItem. Il est donc possible d’afficher une liste des dispositifs bluetooth non appairés au sein de notre application mobile. A cette fin, nous allons créer une nouvelle page dans le dossier “src/pages”. Une nouvelle entrée JSON sera à ajouter dans le fichier “src/router/routes.js” afin de rendre cette page accessible via une url (“#/unpaired-list” par exemple).

// src/router/routes.js

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') }
    ]
  },
  {
    path: '/list',
    component: () => import('pages/List.vue')
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes 

Ci-dessous le code de la page de liste.

// src/pages/List.vue

<template>
  <div class="text-center">
    <q-btn label="Detect unpaired" class="q-ma-md" color="blue"/>
    <q-item>
        <q-item-section class="text-bold">Nom</q-item-section>
        <q-item-section>
            <i class="text-bold">Id</i>
        </q-item-section>
        <q-item-section avatar>
            <q-icon color="primary" />
        </q-item-section>
    </q-item>
    <q-list bordered>
      <template v-for="item in items">
        <q-item :key="item.id" clickable v-ripple>
            <q-item-section>{{item.name}}</q-item-section>
            <q-item-section>
                <i>{{item.id}}</i>
            </q-item-section>
            <q-item-section avatar>
                <q-icon color="primary" :name="item.icon" />
            </q-item-section>
        </q-item>
      </template>
    </q-list>
  </div>
</template>

<script>
import { bluetoothService } from '../services'

export default {
  data () {
    return {
      items: []
    }
  },
  async mounted () {
    this.items = await bluetoothService.discoverUnpaired()
  },
  methods: {
  }
}
</script> 

Conclusion

Bluetooth et application mobile hybride

Cet article expose une manière de développer rapidement une application Cordova capable d’utiliser les fonctionnalités bluetooth disponibles au sein de nos smartphones. Ce type d’application est très rapide à développer et offre une grande flexibilité au niveau de l’interface utilisateur (QuasarJS).

En bonus, il est aisé de d’ajouter d’autre modes de déploiement à cette application tel qu’electron. Le tout étant proposé nativement par le framework QuasarJS. Dans notre cas, ceci impliquerait une adaptation du bluetoothService afin d’utiliser le bon plugin avec le bon mode. L’intérêt serait de réutiliser une grande partie de la logique et de l’UX de notre application mobile au sein d’une application bureau windows/linux/macos.

Besoin d'une application ?

Nous accompagnons les entreprises et les industries dans la réalisation de leurs outils techniques. Contactez-nous sur contact@ateliom.fr