Développement d’appli mobile avec Nuxt.js (Vue.js)

Création appli mobile avec Vue.js
10 août 2022

Un très fidèle client français, pour lequel nous développons des solutions web de localisation confidentielle d’objets sensibles (de type « flottes, ex ordinateurs portables) perdus via une étiquette QR nous a consulté récemment sur un besoin un peu inhabituel pour nous ;

Il s’agissait de développer une interface externe / application mobile dédiée au smartphones, via un framework en javascript.

Contexte du projet d’application mobile

Au départ , le client avait envisagé de confier le développement de la nouvelle application à un nouveau prestataire très spécialisé sur ce type d’appli. Or le prestataire ne connaissait pas l’application web évoluée qui alimenterait la future application mobile. Du coup la mise en place des tests s’avérait très ardue.

Dès qu’il a eu vent de ce projet, le chef de projet technique Transycons a consulté l’équipe dirigeante. Un devis a été préparé, et Transycons, qui était clairement le mieux placé, a été sélectionné pour réaliser le travail.

Pourquoi utiliser Vuejs ?

Avantages généraux des framework en Js

Tout d’abord, le fait d’utiliser un framework permet de disposer de nombreux composants préexistants. Cela permet une meilleure productivité et de pouvoir réutiliser le code.

Ensuite ces framework peuvent accéder facilement aux fonctionnalités des smartphone et tablettes.

Très utilisée, sa syntaxe est simple et ses fonctionnalités très étendues. Il est rapide, polyvalent, et ne sollicite que peu les serveurs. Les applications mobiles créés sont aussi accessibles via les « stores ».

Avantages spécifiques de Vue-js

Ce qui nous a beaucoup attiré dans Vue, c’est notamment sa courbe d’apprentissage très courte. En effet, il est possible d’obtenir rapidement de bons résultats. Il suffit de connaître le HTML, les CSS et le Javascript, d’autant que la documentation est claire.

Tout le code source peut être importé, il n’y a rien à installer sur son poste.

Les plugins utilisables sont nombreux

Par ailleurs, la rapidité de Vue favorise la performance des applications développées

Un autre élément important est la vivacité de sa communauté (qui aide et améliore Vue), même si l’apparition de Vue n’est pas très ancienne (2014). Cette popularité du développement d’appli Vue.js en Roumanie et ailleurs est un gage de durabilité de cette solution, sachant qu’on ne compté déjà plus les frameworks sous Js qui sont en perte de vitesses, et pour lesquels (maintenance d’applis) il est devenu très difficile de trouver des développeurs expérimentés.

Enfin le fait que Vue.js ne soit utilisé que pour des solutions web n’a pas posé de problème vu la nature de ce projet.

Développement de l’appli mobile avec Vue-Nuxt

En fait, il s’est agi de transposer au niveau mobile ce qui existait déjà au niveau du web. Scan d’un code QR déclenchant l’envoi d’un mail au format préformaté…

De manière plus détaillée :

– Cette application est utilisée pour la gestion des tache opérationnelles d’une entreprise spécialisée dans la maintien de la propreté des hôtels.

– Dans chaque chambre est positionné une étiquette avec un code QR.

– Les salaries de l’entreprise viennent nettoyer chacune des chambre qui leur est attribuée. Chaque fois qu’ils ont terminé leur travail dans une chambre, ils scannent le code QR ce qui ouvre l’application réalisée avec vue js. Cette application est constituée d’un formulaire via lequel l’intervenant peut signaler d’éventuelle irrégularités. Il peut aussi charger des images illustratives ou juste notifier à sa hiérarchie que le nettoyage a bien été effectué.

– L’application se charge d’envoyer un mail / sms vers le hiérarchique de la personne avec un résumé des données saisies dans le formulaire à la fin du nettoyage d’une chambre .

A noter qu’ici nous avons choisi d’utiliser le framework Nuxt.js (dérivé de Vue.js, et aussi un peu Node.js pour la partie compilation).

Pour la partie CSS (feuilles de style) nous avons utilisé tailwind CSS, très apprécié actuellement…

De l’avantage de connaître Vue

Nous réalisons aussi une importante activité de crawling de sites web pour une (autre) start-up française. Et il faut aussi parfois leur créer des widgets.

Le développeur front-end qui crée les widgets utilise le html, les css et le javascript ‘vanilla’, qui est un javascrip classique.

Mais ensuite, comme l’application mobile utilisée est basée sur Vue Js, elle convertit les éléments nécessaires du javascript en syntaxe de Vue. Ceci implique que notre développeur roumain doit bien connaître les bases de Vue pour comprendre le fonctionnement des scripts dans l’application… faute de quoi comme on dit ” pas Vue, pas pris ;-)”

En conclusion, le projet de reporting cité est utilisé comme projet pilote pour assurer une montée en compétence de type « tache d’huile ». Ceux qui connaissent la technologie Vue/Nuxt profitent de ce projet pour impliquer progressivement d’autres collègues qui développent leur expertise, et peuvent compter sur le support de collègues en cas de besoin.

On pourrait parler de pilotage à Vue 😉

L’étape suivante étant de nous intéresser aussi à un framework en Javascript de back-end, et pas seulement de front-end… pourquoi pas React.js qu’un de nos programmeurs affectionne tout particulièrement…