[TUTO] Application web dynamique
Posté : sam. 8 oct. 2016 15:15
EDIT du 05 Nov. 2019
Quand j’ai commencé ce ‘petit’ tuto, je pensais juste faire quelques bricoles pour présenter nodejs et je ne pensais pas qu’il resterait aussi populaire 3 ans après. Alors bien sur les versions de nodejs et de npm ayant beaucoup évoluées depuis, certaines choses sont devenues obsolète voir ne fonctionnent plus simplement. J’ai donc décidé de passer en revu tous les codes à télécharger (leconXX.zip) et de les remettre d’actualité en utilisant les versions nodejs et npm d’aujourd’hui (nodejs 12.13.0 et npm 6.12.1) et de remplacer les package obsolètes par d'autres. Je vous recommande donc de commencez par mettre NodeJs et Npm à jour si vous voulez essayer ces exemples (La procédure de mise à jour est expliquée en page 6). Chaque zip mis à jour contient désormais l’arborescence et les fichiers nécessaires à chaque leçon ainsi qu’un fichier pakage.json facilitant l’installation des packages requis par une simple commande npm install (voir fichier info.txt dans les zip).
Préambule
Ce tuto s’adresse à ceux qui veulent pouvoir développer facilement des applications avec interfaces graphiques, à ceux qui veulent pourvoir superviser leur GPIOs localement ou à distance ou tout simplement à ceux qui souhaitent transformer le PI en serveur web. En fait, il suffit de parcourir le forum pour se rendre compte que ça s’adresse à beaucoup de monde. Suivre en temps reel la vitesse de son robot sur une tablette et pouvoir lui donner des ordres, arriver au boulot et pouvoir s'assurer que l'on a bien fermé le portail de chez soit en partant et si ce n'est pas le cas, pouvoir le faire d'un click, recevoir un email ou un sms vous indiquant que votre maison est en train de bruler mais que votre application a bien déclenchée le système anti-incendie, qu'elle maitrise la situation et qu'elle vous tiendra au courant des suites . A vrai dire, la limite des possibilités s'arrête là ou commence notre manque d'inspiration. Ne vous attendez toutefois pas à un cours de programmation. Les codes resteront simples pour être compréhensible mais sans pour autant chercher à être optimisés au maximum. Chacun sera libre de se documenter sur les différents modules utilisés et d'améliorer si besoin.
Pas besoin d’avoir un niveau de gourou en programmation ni d’être un ayatollah du kernel pour suivre ce tuto. Si vous êtes capable d’éditer un fichier et de l’enregistrer au bon endroit, cela suffira et pour ceux qui ont déjà eu l’occasion de bricoler de la page web et un peu de javascript, ça va être du gâteau. Etant plus codeur qu’écrivain, je vais tenter de faire au mieux pour limiter les fautes d’orthographe et de grammaire mais si vous en apercevez, faites-moi le savoir, et je corrigerais.
La première chose à faire, c’est donc d’installer un serveur web. Il existe des outils très performants pour ça. Apache, Nginx, Lighttp et on peut même ajouter IIS pour ceux qui tournent sous Windows vu qu'il est aussi possible de développer en asp.net sur le PI. Ces serveurs sont très puissants et sur de grosses machines ils peuvent faire le rendering de centaines de milliers de pages par jours. Est-ce le besoin ? Je ne pense pas. En général le PiNoob, ce qu’il veut, c’est plutôt quelques dizaines de pages vraiment interactives et accessibles par quelques clients simultanés tout en laissant suffisamment de ressources au système pour pouvoir framboiser sur d'autres trucs. Donc non, nous n’installerons pas de méga web server inutile, nous allons le programmer. Rassurez-vous, c’est très simple à faire avec les outils choisis. Coté performance, la simplicité ne sera pas un handicap. Nos quelques lignes de programmation vont même nous permettre, avec moins de code et moins de ressources, de surpasser sans aucun problème la même chose qui aurait été faite avec un vrai serveur php-cgi type Apache ou autre.
Pour ça, nous allons utiliser NodeJS. Pour ceux qui ne connaissent pas, ne vous y trompez pas, NodeJS n'est pas un serveur web. C’est tout simplement une plateforme qui permet de développer des applications asynchrones très performantes et orientées réseaux en utilisant du code en javascrit coté serveur. La notion de serveur web n'est donc qu'une des possibilités offerte par NodeJS et on ira bien au-delà de ce rôle dans ce tuto. Comme c'est du javascript, on pourra donc utiliser le même langage pour la partie serveur que pour la partie dynamique des clients web. Je ne vous en dis pas plus sur l’outil, de nombreux articles le décrivent déjà très bien sur le net et il vous appartiendra de vous documenter par vous-même. Pour le fun, quand le tuto aura bien avancé, je reprendrais quelques demandes sur le forum qui sont restées sans réponse vraiment concrète et il sera bien amusant de voir avec quelle simplicité on peut les résoudre avec ces méthodes.
Installation de NodeJS
La première chose à faire, c’est déjà de voir s’il n’est pas déjà installé parce que depuis plusieurs versions raspbian, c’est le cas. Exécutez la commande $ node –v. nodejs. Sur ma jessie ‘pixel’ la version installé est la v0.10.29. Si vous ne l’avez pas ou qu’elle est plus ancienne:
$ sudo apt-get update
$ sudo apt-get install nodejs
Ensuite pour se simplifier l’installation des ‘add-on’, il faut installer son gestionnaire de paquet qui s’appelle npm qui lui n’est pas installé par défaut
$ sudo apt-get install npm
Après l’installation, la commande $ npm –v vous retourne la version (chez moi 1.4.21).
Création du projet
Commençons par créer notre arborescence et installer quelques paquets utiles. Voici la liste des commandes dans l’ordre (pour le répertoire racine, vous faites ce que vous voulez, le mien s'appelle '~/myweb/'):
$ mkdir myweb (création du répertoire racine du projet)
$ cd myweb (on se place dedans)
$ mkdir public (création du sous répertoire qui recevra les statiques (images, scripts …)
$ mkdir templates (création du sous répertoires qui recevra les templates de pages web)
$ npm install express ejs jquery (installation des paquets qui vont nous servir)
En image, ça donne ca : Si maintenant vous regardez votre arborescence, vous verrez qu’avec cette méthode, npm a créé automatiquement un sous répertoire node_modules et dedans, les sous répertoires contenant les ‘add-on’. On pourrait aussi installer les paquets de façon globale mais il peut y avoir un grand intérêt à le faire localement comme nous l’avons fait, mais nous verrons ca plus tard.
Prochaine étape, développer le serveur web et notre première page dynamique
Quand j’ai commencé ce ‘petit’ tuto, je pensais juste faire quelques bricoles pour présenter nodejs et je ne pensais pas qu’il resterait aussi populaire 3 ans après. Alors bien sur les versions de nodejs et de npm ayant beaucoup évoluées depuis, certaines choses sont devenues obsolète voir ne fonctionnent plus simplement. J’ai donc décidé de passer en revu tous les codes à télécharger (leconXX.zip) et de les remettre d’actualité en utilisant les versions nodejs et npm d’aujourd’hui (nodejs 12.13.0 et npm 6.12.1) et de remplacer les package obsolètes par d'autres. Je vous recommande donc de commencez par mettre NodeJs et Npm à jour si vous voulez essayer ces exemples (La procédure de mise à jour est expliquée en page 6). Chaque zip mis à jour contient désormais l’arborescence et les fichiers nécessaires à chaque leçon ainsi qu’un fichier pakage.json facilitant l’installation des packages requis par une simple commande npm install (voir fichier info.txt dans les zip).
Préambule
Ce tuto s’adresse à ceux qui veulent pouvoir développer facilement des applications avec interfaces graphiques, à ceux qui veulent pourvoir superviser leur GPIOs localement ou à distance ou tout simplement à ceux qui souhaitent transformer le PI en serveur web. En fait, il suffit de parcourir le forum pour se rendre compte que ça s’adresse à beaucoup de monde. Suivre en temps reel la vitesse de son robot sur une tablette et pouvoir lui donner des ordres, arriver au boulot et pouvoir s'assurer que l'on a bien fermé le portail de chez soit en partant et si ce n'est pas le cas, pouvoir le faire d'un click, recevoir un email ou un sms vous indiquant que votre maison est en train de bruler mais que votre application a bien déclenchée le système anti-incendie, qu'elle maitrise la situation et qu'elle vous tiendra au courant des suites . A vrai dire, la limite des possibilités s'arrête là ou commence notre manque d'inspiration. Ne vous attendez toutefois pas à un cours de programmation. Les codes resteront simples pour être compréhensible mais sans pour autant chercher à être optimisés au maximum. Chacun sera libre de se documenter sur les différents modules utilisés et d'améliorer si besoin.
Pas besoin d’avoir un niveau de gourou en programmation ni d’être un ayatollah du kernel pour suivre ce tuto. Si vous êtes capable d’éditer un fichier et de l’enregistrer au bon endroit, cela suffira et pour ceux qui ont déjà eu l’occasion de bricoler de la page web et un peu de javascript, ça va être du gâteau. Etant plus codeur qu’écrivain, je vais tenter de faire au mieux pour limiter les fautes d’orthographe et de grammaire mais si vous en apercevez, faites-moi le savoir, et je corrigerais.
La première chose à faire, c’est donc d’installer un serveur web. Il existe des outils très performants pour ça. Apache, Nginx, Lighttp et on peut même ajouter IIS pour ceux qui tournent sous Windows vu qu'il est aussi possible de développer en asp.net sur le PI. Ces serveurs sont très puissants et sur de grosses machines ils peuvent faire le rendering de centaines de milliers de pages par jours. Est-ce le besoin ? Je ne pense pas. En général le PiNoob, ce qu’il veut, c’est plutôt quelques dizaines de pages vraiment interactives et accessibles par quelques clients simultanés tout en laissant suffisamment de ressources au système pour pouvoir framboiser sur d'autres trucs. Donc non, nous n’installerons pas de méga web server inutile, nous allons le programmer. Rassurez-vous, c’est très simple à faire avec les outils choisis. Coté performance, la simplicité ne sera pas un handicap. Nos quelques lignes de programmation vont même nous permettre, avec moins de code et moins de ressources, de surpasser sans aucun problème la même chose qui aurait été faite avec un vrai serveur php-cgi type Apache ou autre.
Pour ça, nous allons utiliser NodeJS. Pour ceux qui ne connaissent pas, ne vous y trompez pas, NodeJS n'est pas un serveur web. C’est tout simplement une plateforme qui permet de développer des applications asynchrones très performantes et orientées réseaux en utilisant du code en javascrit coté serveur. La notion de serveur web n'est donc qu'une des possibilités offerte par NodeJS et on ira bien au-delà de ce rôle dans ce tuto. Comme c'est du javascript, on pourra donc utiliser le même langage pour la partie serveur que pour la partie dynamique des clients web. Je ne vous en dis pas plus sur l’outil, de nombreux articles le décrivent déjà très bien sur le net et il vous appartiendra de vous documenter par vous-même. Pour le fun, quand le tuto aura bien avancé, je reprendrais quelques demandes sur le forum qui sont restées sans réponse vraiment concrète et il sera bien amusant de voir avec quelle simplicité on peut les résoudre avec ces méthodes.
Installation de NodeJS
La première chose à faire, c’est déjà de voir s’il n’est pas déjà installé parce que depuis plusieurs versions raspbian, c’est le cas. Exécutez la commande $ node –v. nodejs. Sur ma jessie ‘pixel’ la version installé est la v0.10.29. Si vous ne l’avez pas ou qu’elle est plus ancienne:
$ sudo apt-get update
$ sudo apt-get install nodejs
Ensuite pour se simplifier l’installation des ‘add-on’, il faut installer son gestionnaire de paquet qui s’appelle npm qui lui n’est pas installé par défaut
$ sudo apt-get install npm
Après l’installation, la commande $ npm –v vous retourne la version (chez moi 1.4.21).
Création du projet
Commençons par créer notre arborescence et installer quelques paquets utiles. Voici la liste des commandes dans l’ordre (pour le répertoire racine, vous faites ce que vous voulez, le mien s'appelle '~/myweb/'):
$ mkdir myweb (création du répertoire racine du projet)
$ cd myweb (on se place dedans)
$ mkdir public (création du sous répertoire qui recevra les statiques (images, scripts …)
$ mkdir templates (création du sous répertoires qui recevra les templates de pages web)
$ npm install express ejs jquery (installation des paquets qui vont nous servir)
En image, ça donne ca : Si maintenant vous regardez votre arborescence, vous verrez qu’avec cette méthode, npm a créé automatiquement un sous répertoire node_modules et dedans, les sous répertoires contenant les ‘add-on’. On pourrait aussi installer les paquets de façon globale mais il peut y avoir un grand intérêt à le faire localement comme nous l’avons fait, mais nous verrons ca plus tard.
Prochaine étape, développer le serveur web et notre première page dynamique