[TUTO] Application web dynamique

Proposer ou rechercher un tutoriel concernant le Raspberry Pi

Modérateur : Francois

Bud Spencer
Raspinaute
Messages : 647
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mar. 2 juil. 2019 21:45

Vous avez un doute sur la stabilité d’une connexion internet ? Pourquoi ne pas logger son état pour etre sur de son fonctionnement. Voilà un npm tout bête qui permet de mesurer l’état de sa connexion internet, ce qui peut s’avérer bien utile.
Ça fonctionne très bien et ça m’a permis de constater que quand il pleuvait, la connexion d’un de mes sites perdait énormément, ce qui a déclenché l’intervention d’un technicien pour le remplacement du filaire entre une maison de campagne et le poteau télécom.

Le npm bien nommé s’appelle ‘speedtest-net’. Très simple d’utilisation, il peut etre utilisé stand-alone par une simple commande ou dans un code Javascript avec enregistrement et tout le toutim. Vous trouverez le module et sa doc ici -> https://www.npmjs.com/package/speedtest-net

Voilà ce que ça donne une fois transformé en module ‘BudyNode’ :
speedweb.png
speedweb.png (84.06 Kio) Vu 1004 fois
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

Bud Spencer
Raspinaute
Messages : 647
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » jeu. 12 sept. 2019 21:44

Aller un petit truc rigolo pour faire suite à ça: viewtopic.php?f=57&t=5447

Contexte : On est sur un pc sous windows et on veut pouvoir mettre à jour un affichage sur des ‘télés’ qui sont connectées à des PI quand mon modifie les données d’un fichier Excel (c’est en tous cas ce que j’ai compris). Un peu farfelu comme idée, mais après tout, pourquoi pas.

Le fichier Excel d’exemple et une petite macro vba pour générer un fichier json qui contient les données à transférer. La macro créer un fichier .tmp puis balaye vers le bas à partir de la deuxième ligne jusqu’à qu’elle trouve une cellule vide dans la colonne 1. A chaque ligne elle écrit un objet json dans le tableau ‘scores’ du fichier tmp. Une fois finie elle ferme puis renomme le fichier .tmp en .json
excel.png
excel.png (7.36 Kio) Vu 748 fois
macro.png
macro.png (69.74 Kio) Vu 748 fois
Modifié en dernier par Bud Spencer le jeu. 12 sept. 2019 21:49, modifié 2 fois.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

Bud Spencer
Raspinaute
Messages : 647
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » jeu. 12 sept. 2019 21:47

Ensuite, on écrit un petit serveur http avec nodejs pour servir la page d’affichage des télés et transférer les données.
Ici que du déjà vu dans le tuto. Le meme modèle de serveur http que d’habitude et un timer. Si le fichier .json existe, le serveur le charge, puis il transfert les données sur le socket et il supprime le fichier.
node.png
node.png (49.42 Kio) Vu 749 fois
Une page html pour recevoir les données sur le socket et les afficher
index.png
index.png (35.11 Kio) Vu 749 fois
et voila (je ne me suis pas trop casser le trognon pour le design, mais je veux pas tout me taper non plus :lol: ).
result.png
result.png (16.64 Kio) Vu 749 fois
A chaque fois que l’on veut rafraichir l’affichage des télés avec de nouvelles données, il suffit d’exécuter la macro du fichier Excel.

Bonne nuit ….
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

DKT
Messages : 5
Enregistré le : mar. 24 sept. 2019 13:55

Re: [TUTO] Application web dynamique

Message par DKT » mar. 1 oct. 2019 18:10

Bonjour bonjour,

J'ai un petit problème :D

Bon y a pas que ça car j'ai des questions aussi ,

J'ai suivi toutes les leçons jusqu'à 6 adapter avec l'UPDATE qui avait été proposé mais toujours impossible de lancer le serveur j'obtiens un message d'erreur comme sur ce screen

http://zupimages.net/viewer.php?id=19/40/y6u5.png

Avez-vous éventuellement une idée ?

J'ai mis à jour node et npm, vérifier l'upgrade de mon raspB, mais rien n'y fait :roll:

C'est bête, c'est la leçon qui m’intéresse le plus


Aussi j'avais une question concernant le code HTML de cette leçon
Vous serait-il grand gourou de présenter la forme de HTML sans liste afin que je comprenne au mieux le code, dans l'idée de pouvoir disposer les différents "iden" à différent emplacement de la page web, juste pour voir comment avoir "iden" par "iden" et pas toute la liste, mais à différents endroits de la page web.


Merci d'avance du temps que vous aurez à me consacrer

Bud Spencer
Raspinaute
Messages : 647
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mar. 1 oct. 2019 22:54

C’est normal que cela ne fonctionne plus. Le wrapper (npm wiringpi) n’est pas mis à jour depuis début 2017 et de toute façon, la librairie WiringPi est en fin de vie (l’auteur abandonne le projet). Ceci dit nodejs et npm sont plein de ressource et permettent très facilement de revenir à des versions antérieurs pour faire fonctionner des trucs dépréciés ou plus à jour.

Lecon n° 12614 (à peu près hein, ca fait longtemps que je compte plus :mrgreen: ) : Comment repasser facilement NodeJs dans une ancienne version avec npm et fixer les versions de package:
Pour l’occase, on va repasser ton nodejs en version 6.10.2. , fixer les versions des autres package npm à ceux de l’époque pour ne pas etre 'emmerdé' avec les nouvelles et remplacer le npm wiring-pi 2.2.1 par un plus récent (wiringpi-node 2.4.4)

On commence par retrograder npm et nodejs avec ces commandes
sudo npm cache clean -f
sudo npm install -g n
sudo n 6.10.2


Ensuite tu édites le fichier package.json et tu supprimes les ^ qui se trouve devant les n° versions de package dans le bloc dependencies et tu remplaces "wiring-pi" : "2.2.1" par "wiringpi-node" : "2.4.4", ce qui doit te donner ca :
lecon6old.png
lecon6old.png (31.15 Kio) Vu 530 fois
Ensuite, dans le fichier myweb.js, tu remplaces var wpi = require('wiring-pi'); par var wpi = require('wiringpi-node');

********Edit : Jai oublié : tu supprimes le répertoire node_modules avant de relancer la commande suivante ********

Ensuite tu relances une commande npm install pour récupérer les packages npm et là ca devrait fonctionner.

Pour un fichier html sans les listes, c'est plus gênant dans le sens ou j'avais écrit ca en me basant justement sur une notion de création dynamique de l'affichage. Je verrais dans la semaine si j'ai le temps de te faire un exemple plus simple avec un seul couple bouton<->led et une libraire un peu plus à jour.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

DKT
Messages : 5
Enregistré le : mar. 24 sept. 2019 13:55

Re: [TUTO] Application web dynamique

Message par DKT » mer. 2 oct. 2019 12:24

Super !
Tout marche nickel !
Merci à toi ;)

Pour la partie HTML, justement c'est aussi dans l'objectif de garder un certain dynamisme et je pense que pour cette leçon il est bien de comprendre comment gérer "objet" par "objet".
Pour ma part je souhaite juste pouvoir gérer des groupes ou une entité à la fois dans la mise en page HTML:

Exemple :

Chambre 1 :
Lumière 1
Lumière 2

Chambre 2:
Lumière 1
Lumière 2

SDB :
Lumière 1
VMC

Cheminée :
Température

Et je voudrais rajouter aux GPIO IN l’interaction binaire de leurs états
Exemple en gardant ta structure :
Si GPIO in = 1, la case du GPIO Vert
Si GPIO in = 0, la case du GPIO est rouge

Afin d'avoir ce retour d'info réel

Donc plus de dynamisme, mais il me semble que tu as traité ce sujet dans tes leçons plus loin que la 6.
Je n'ai pas eu l'occasion de tout lire encore, faute de temps, mais je vais arriver un jour au bout des 17 pages :lol:

Encore merci pour tout ton travail, ça met un peu de temps pour monter toutes ces informations au cerveau mais tes exemples sont bien construit.
Dommage que le temps passe si vite et que les versions node npm ect évolue plus vite que mon apprentissage.

Bonne journée à toi et vous autres lecteurs ;)

Bud Spencer
Raspinaute
Messages : 647
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » sam. 5 oct. 2019 11:38

Ta problématique n’est pas bien compliquée, elle est juste différente de ce qu’était l’objectif de cette lecon6.

Dans cette leçon, les ‘ampoules’ sont pilotées par des gpios en sortie. C’est donc l’état de ces sorties qui est renvoyé au client pour l’affichage. Les entrées ne sont que des points d’action qui lèvent des interruptions au meme titre que les boutons graphique dans la page du client. Le client (la page web) ne sait meme pas qu’il y a des gpios en entrée. Lui, il ne voit que l’état des sorties et si une sortie est à 1, c’est que l’ampoule est allumée. L’actions sur une entrée est ponctuelle et elle ne fait que qu’inverser l’état de la sortie correspondante, donc elle n’a pas lieu d’etre remontée au client.

Dans un autre mode, les ampoules pourraient etre pilotées normalement par le réseau electrique et des interrupteurs et le pi ne servirait que de tableau de bord pour savoir si une ampoule est allumée ou éteinte. Dans ce cas on utiliserait seulement des entrées qui seraient raccordées au circuit de chaque ampoule.

On peut bien sur combiner ces 2 modes dans un meme programme puisque finalement lire l’état d’une entrée ou lire l’état d’une sortie revient exactement au meme. Si par exemple tu définis que la GPIO18 correspond à la lampe 2 de la chambre 1, qu’importe que cette GPIO soit une entrée ou une sortie, si elle est à 1, c’est que la lampe est allumée dans les 2 cas. La seul différence, c’est que si c’est une sortie, tu pourras la piloter depuis du code alors que si c’est une entrée, elle ne peut etre piloté que par une action extérieure.

Cette lecon6 est juste un exercice qui finalement est assez limité dans ce qu’il peut faire et le modifier pour étendre ses possibilités reviendrait presque le réécrire, mais si tu continu la lecture de ce sujet, tu arriveras forcement sur la démonstration du Datalogger qui pour le coup n’est plus un exercice mais une vraie application beaucoup plus flexible. Il y a bien sur la partie ‘sorcellerie’ qui utilise des opérations booléennes pour faire de la comparaison d’état et ça, je comprends bien que ça peut etre indigeste pour un débutant, mais ce n’est pas ça qu’il faut chercher à comprendre dans un premier temps. Il faut surtout essayer de comprendre comment le programme est structuré parce que c’est justement ça qui peut te permettre de traiter tous les cas d’usages possible sans avoir à remettre en cause ce qui a déjà été écrit. Je reviendrais peut etre la dessus avec des exemples plus simple, parce qu’avec le recul, je me rends bien compte que j’avais peut etre été un peu vite en besogne en favorisant le coté performance plutôt que le coté didactique.

Pour ce qui est du versioning, l’écosystème nodejs est très bien fait. Tu as vu que l’on pouvait très facilement passer d’une version à l’autre et on peut aussi avoir des programmes qui tourne avec différentes versions sur un meme environnement (voir nvm).
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

Bud Spencer
Raspinaute
Messages : 647
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mar. 8 oct. 2019 21:33

Birthday :)
Le tuto à 3 ans aujourd'hui et 41000 vues.
Pas trop le temps d'écrire une nouvelle 'leçon' pour fêter ca, mais je le ferais dès que possible.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

john7864
Messages : 13
Enregistré le : ven. 1 nov. 2019 15:41

Re: [TUTO] Application web dynamique

Message par john7864 » sam. 2 nov. 2019 18:27

Bonjour
J'ai un souci a l'installation après la commande suivante il m'indique que ma version installé est trop récente si je comprend bien

pi@raspberrypi:~/myweb $ npm install express ejs jquery
npm WARN npm npm does not support Node.js v10.15.2
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/
npm WARN saveError ENOENT: no such file or directory, open '/home/pi/myweb/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/pi/myweb/package.json'
npm WARN myweb No description
npm WARN myweb No repository field.
npm WARN myweb No README data
npm WARN myweb No license field.

+ jquery@3.4.1
+ ejs@2.7.1
+ express@4.17.1
added 52 packages from 40 contributors in 10.773s


J'ai un rpi3b+ raspbian buster d'installé, est ce possible d'installé une version précédente de Nodje ?

Bud Spencer
Raspinaute
Messages : 647
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » sam. 2 nov. 2019 22:17

Quel sont tes version de nodejs et de rpm ?

NodeJS et npm évolues sans cesse et forcement, tout doit suivre. Heureusement, il est possible de fixer les versions comme je l'ai expliquer à DTK juste un peu plus haut sur la meme page.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

Répondre

Retourner vers « Tutoriels »