Votre première application nodeJs / express

Dans cet article, nous avons découvert Hass.io et ces nouvelles fonctionnalités. Nous nous étions notamment attardé sur les add-ons. Nous avions vu comment les utiliser ainsi que leurs avantages.

Aujourd’hui, je vous propose de passer au niveau supérieur et de créer votre premier Add-on! Le but de cette série sera donc de voir, étape par étape, comment concevoir, développer et déployer vos créations.

Gros programme en perspective et comme il faut bien commencé quelque part, je vous propose dans ce premier billet, d’apprendre à construire une application NodeJs très basique. Cette dernière permettra de fournir des Apis personnalisées et de communiquer avec d’autre système, comme par exemple, votre installation home assistant. Nous verrons ensuite dans un prochain article comment faire en sorte de le packager afin de pouvoir l’utiliser en tant qu’add-on.

Dans le cadre de cet article vous devez avoir un minimum de connaissances en javascript et savoir comment fonctionne globalement le protocole http.

Si vous souhaitez étendre les possibilités de votre installation sans passer par les add-ons (car vous ne le souhaitez pas ou car vous n’avez pas hass.io mais seulement Home Assistant) rendez-vous ici pour apprendre à créer votre premier composant.

Préparez votre machine de développement

Avant toutes choses, nous devons nous outiller un minimum pour développer et tester notre application. Il vous faudra ainsi:

  • Un IDE: Il sera votre meilleur compagnon. Il apporte de la coloration syntaxique et des outils permettant de vous simplifier la tâche. Dans le cadre de cet article, j’ai choisi visual studio code qui est gratuit et assez simple d’utilisation.
  • Node: Nous allons développer une application en NodeJS, node est donc indispensable. Vous trouverais de quoi l’installer ici.
  • Un client REST: Pour ma part j’utilise postman.

 

Un peu de théorie

Avant de commencer, faisons un rapide point sur le protocole http.

Le protocole http (HyperText Transfert Protocol) est un protocole clé dans nos usages quotidiens. Ce dernier définit des méthodes et une structure commune afin standardiser les échanges. Il fonctionne via des échanges de requêtes entre un client (votre navigateur par exemple) et un serveur qui héberge le site ou l’application. Voyons très rapidement les quelques éléments dont nous avons besoin pour travailler:

  • La structure: chaque message aura au moins une entête (header) comportant les paramètres de la requête et potentiellement un corps (body) qui contient de l’information supplémentaire.
  • Les méthodes:  Ce protocole définis une multitude de méthodes. Chacune d’elle a une fonction et des particularités techniques qui lui sont propre. Dans ce tuto, nous allons aborder seulement deux d’entre elle, GET et POST.

N’allons pas plus loin, le but ici n’est pas de vous assommer mais de vous donner les mots clés pour aller plus loin. En effet, les API REST s’appuient sur le protocole Http il est donc important d’en savoir un minimum. Si vous désirez approfondir vos connaissances sur le sujet, rendez-vous sur cet article.

 

Hello world

Commençons par développer un simple avec un helloworld.

Ouvrez un terminal et passez les commande ci-dessous

 

Ouvrez votre IDE (pour moi Visual studio code) et ouvrez le dossier que vous venez de créer ( Fichier > ouvrir le dossier > sélectionnez mon_app) et initialisez un nouveau fichier nommé app.js. C’est ici que va se trouver le coeur de votre app. Copiez et collez y le code suivant.

 

Et enfin lancez l’application grâce à la commande suivante

 

Pour éviter les allers-retours entre Visual Studio code (ou un autre IDE) et votre terminal,
cliquez sur Afficher > Terminal intégré. Vous pourrez ainsi utiliser les commandes beaucoup plus simplement

Ainsi quand vous entrez http://localhost:3000 dans votre navigateur, vous devriez recevoir un beau Hello World! Félicitations, votre première API est fonctionnelle.

 

Gestion de paramètres

Nous savons maintenant créer une API REST basique. Cependant, votre API est assez statique. Pour rendre votre API un peu plus intéressante, nous allons tout d’abord voir comment lui passer de l’information. Pour ce faire il y a deux techniques.

Passage par URL

La première méthode consiste à passer des paramètres via l’URL. C’est généralement  une bonne solution dans le cadre de données simples. Par exemple, pour définir un contexte tel qu’une langue. On voit ainsi souvent des choses comme http://adresse.com?lang=en. Ce type de paramètre est très simple à gérer avec express.  Ajoutez le code ci-dessous à la suite de votre première route (avant app.listen)

 

Ainsi, après redémarrage de l’application, si vous tapez http://localhost:3000/hello?name=toto  dans votre navigateur, vous devriez avoir la réponse hello toto

Passage par body

Pour des données plus complexe, il est préférable de passer par le body (vous vous rappelez nous en avions parler en intro). Cependant, le choses vont légèrement se compliquer aussi bien côté express que pour tester. En effet, les requêtes GET comme nous avons vu jusqu’ici n’ont pas de body. Il nous faut donc utiliser une autre méthode, POST par exemple.

Mise en place d’une route POST

On se retrousse les manches et au travail pour créer notre nouvelle route. La première étape et d’installer une bibliothèque qui vous fournira les outils nécessaires permettant de gérer le body de notre route. Ouvrez votre terminal et lancez la commande suivante:

 

Maintenant, créons notre nouvelle route. Le principe est assez similaire à ce que l’on a vu jusqu’ici. Ajoutez le code suivant à votre app:

 

Redémarrez votre application et passons aux tests.

Testez votre route

Jusqu’ici pour testez notre application, notre navigateur était largement suffisant. Cependant, pour tester votre route POST, il est nécessaire de passer par un client REST plus complet.

Pour ma part, j’aime beaucoup postman. Les exemples ci-dessous seront donc fait avec cet outil. Ouvrez postman et lancez une requête comme l’exemple ci-dessous.

Requête post

Requête post

Vous devriez ainsi avoir le résultat suivant POST: hello tata.

Dans la partie body de cet exemple, il y a volontairement d’autres propriétés. Si vous souhaitez y accéder, il vous suffit d’utiliser req.body.nom_de_la_propriété.

Appelez une autre API

Grâce aux chapitres précédents, vous êtes capable de créer des API GET et POST. Vous savez aussi envoyer des paramètres plus ou moins complexes. Cependant, nous ne savons pas comment communiquer avec l’extérieur. Dans cette dernière partie nous allons voir comment appeler une autre api via notre application.

Cela vous permettra, notamment dans le cadre de hass.io, d’utiliser les api home-assistant (que nous avions abordé ici ) et de lancer certaines actions via notre application. J’ai ainsi personnellement utilisé cette technique afin de rendre ma télévision compatible google home (nous avions déjà abordé le sujet dans cet article).

Dans un premier temps il est nécessaire d’installer une nouvelle bibliothèque.

 

Ensuite copiez collez ce code à la suite de la dernière route créée.

 

Redémarrez et testez l’adresse http://localhost:3000/wikipedia qui devrais vous donner

Résultat

Résultat

Si vous souhaitez appeler une api en post, pour par exemple allumer vos lampe via les API d’Home Assisant, la méthode est relativement similaire. Il vous suffit d’utiliser request.post et d’ajouter la propriété json pour passer vos paramètres.

 

Conclusion

C’est terminé pour cette introduction à NodeJs et express. Nous avons fait l’impasse sur beaucoup de choses, notamment l’aspect enregistrement en base de données, l’écriture/lecture de fichiers mais le but ici n’est pas de devenir des experts. Nous verrons plus d’éléments dans de futures articles de la série au fur et à mesure que notre besoin progresse. Cependant si vous êtes trop impatient et que vous désirer en savoir plus, n’hésitez pas à consulter la documentation officielle.

Si vous êtes perdu dans les morceaux de code de cet article, vous pouvez retrouver le projet entier sur github. La prochaine fois, nous verrons comment packager et déployer notre application dans Hass.io. En attendant, n’oubliez pas de commenter, de partager, de réagir et de nous faire part de vos avis. A bientôt 😉

Cadre en informatique dans une multinationale je suis un touche-à-tout passionné de nouvelles technologies.
Tu aimes cet article ? Alors partage le Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

1 réponse

  1. 24 octobre 2017

    […] Lire l’article complet sur le site original […]

Laisser un commentaire