Mini-Webapps avec Pyduino

Les mini-webapps sont une nouvelle façon de créer des applications web interactives et intuitives. Elles sont basées sur le langage de programmation Python et le framework Pyduino, qui offrent une grande flexibilité et facilitent la création d’applications web. Avec Pyduino, les développeurs peuvent créer des applications web qui peuvent être exécutées sur des microcontrôleurs Arduino, ce qui permet aux utilisateurs de contrôler leurs appareils à distance. Dans cet article, nous allons examiner les avantages et les fonctionnalités des mini-webapps avec Pyduino et comment elles peuvent être utilisées pour créer des applications web interactives et intuitives.

Mini-Webapps avec Pyduino

Un mini-PC utilisé avec Pyduino permet de mettre en place assez simplement des mini-serveurs graphiques interactifs embarqués totalement autonomes (sans besoin de serveur externe ni de shield complémentaire) : accessibles depuis n’importe quel navigateur, un tel mini-serveur permettra de visualiser à distance et sans fil sous forme de mini applications web les données de datalogging ou « live » ou encore des images, des sons, de contrôler à distance votre mini-pc, etc… Tout le code actif de la webapp est fournit par le mini-pc serveur au navigateur client : du coup votre webapp est donc immédiatement disponible sur n’importe quel support, poste fixe multi-OS, tablette Android, Ipad, smartphone,… Sur cette page, retrouvez toutes les infos utiles pour passer à l’action !

Nouveauté 2015 : Les tutos pour apprendre à créer des webapps

	Niveau débutant	Niveau intermédiaire	Niveau expérimenté
	Introduction au réseau local : comprendre le fonctionnement d’un réseau local, apprendre à monter et à analyser un réseau local avec un mini-PC. (36 p.) – 1 HTML : Les bases (38 p.) – 1 Apprendre à créer un simple serveur HTML avec Pyduino (36 p.) – 1 Apprendre à créer un simple serveur HTML gérant facilement les url et multithreadé (34 p.) – 1 Apprendre à créer un serveur de fichiers entièrement local très simplement (28 p.) – 1	Javascript : Les bases (33 p.) – 1 jQuery : Les bases (22 p.) – 1 Apprendre à créer un serveur HTML + JS/jQUery portable (=entièrement dans un répertoire) Apprendre à créer un serveur HTML + JS/jQUery + Ajax portable (=entièrement dans un répertoire)	Utiliser des librairies JS/JQuery : Les bases (36 p.) – 1 Serveur utilisant librairies JS/jQuery entièrement local (62 p.) – 2 Serveur utilisant librairies JS/jQuery et Ajax entièrement local (xx p.) – 2

Détail des ateliers webapps

Atelier Pyduino : Introduction au réseau local : comprendre le fonctionnement d’un réseau local, apprendre à monter et à analyser un réseau local avec un mini-PC.
Niveau : Débutant | Durée travail : 2H00 | Difficulté : | Prix : 1 | Taille : 36 pages |

Description :
L’objectif ici est de comprendre le principe d’un réseau local, le concept d’adresse IP, d’apprendre à constituer et monter un réseau local de base, d’apprendre à récupérer les informations importantes d’un réseau local, d’apprendre à tester le bon fonctionnement du réseau afin d’être en mesure d’utiliser un mini-PC programmé avec Pyduino sur un réseau local.

Contenu : Focus sur quelques éléments utiles pour la constitution du réseau local en mode filaire | Concrètement, ce que vous devez faire pour passer à l’action… | Un réseau local : c’est un peu comme une équipe de foot ! | Au sein du réseau local : le n°1, un joueur un peu particulier ! | Technique : comment savoir quels numéros de l’adresse IP représentent la « couleur du maillot » ? | Exercices d’entraînement | Technique : Réseau : Comprendre les adresses IP : Synthèse | Fonctionnement du réseau | Synthèse : Un peu de vocabulaire pour avoir les idées claires | Monter le réseau local minimum | Tester et explorer le réseau : mise sous tension et récupération de l’adresse IP du poste fixe | Tester le réseau : Faire un « ping » vers le routeur depuis le poste fixe | Technique : Se connecter à l’interface du routeur et connaître la plage des adresses DHCP | Monter un réseau multi-postes : utiliser un « switch » éthernet si besoin… | Truc avancé : connaître tous les postes présents sur un réseau local à partir d’un poste fixe connecté au réseau ! | Les IP statiques : « allez, on fait tout à la main… ! » | Un cas à part : « le gars qui se pointe avec son maillot déjà sur lui»… | Et en wifi ??? | Le réseau utilisé : mini-PC + poste fixe sur un même réseau local | Détail des éléments du réseau local avec Pyduino que nous allons utiliser | Monter le réseau utilisant le mini-PC | Monter le réseau utilisant le mini-PC sur un réseau avec « box » existant | Faire un simple « ping » vers le mini-PC à partir d’un poste fixe : le réseau | Faire un simple « ping » vers le shield Ethernet à partir d’un poste fixe : le programme | Pour info : Un réseau local utilisant des blocs CPL | Réseaux local avec blocs CPL : exemples de réseaux

Instructions étudiées : ping | nmap

1.00

Description :
L’objectif ici est d’apprendre à créer une page HTML et à découvrir les différentes balises utiles en vue de la création de mini-webapps afin d’être en mesure de savoir écrire et tester une mini-page HTML.

Contenu : Réseau : Notion de serveur / client | Notion de base d’HTML | S’installer pour écrire de l’HTML : utiliser un éditeur HTML | Structure type d’une page HTML simple et écrire une première page HTML | Les balises d’entête (head) | Attributs globaux HTML communs à toutes les balises : | Tester simplement des balises HTML | Les balises de base | Page HTML de test des balises de base | Les balises de mise en page | Page de test des balises de mise en page | Les balises de « widgets » graphiques basés sur la balise <input> | Les nouvelles balises HTML5 de « widgets » graphiques basés sur la balise <input> | Page HTML de test des widgets graphiques basé sur la balise <input> | Les widgets graphiques HTML ayant des balises dédiées | Page HTML de test des widgets graphiques ayant des balises dédiées | Les balises de widgets graphiques « multimédia » | Page HTML de test des widgets graphiques « multimédia » | Un exemple de mise en page widgets graphiques |

1.00

Description :
Nous avons déjà présenté dans un autre tuto comment réaliser un serveur avec Pyduino « façon Arduino »… mais cette façon de faire a vite ses limites, notamment pour gérer les requêtes client. Il est possible de faire beaucoup mieux et beaucoup plus robuste en langage Python. L’objectif ici est de monter un réseau local utilisant un mini-PC + Pyduino, de présenter une solution simplifiée de gestion des requêtes HTTP tout en étant multithreadée, de réaliser simplement un serveur HTML avec Pyduino afin d’être en mesure de créer un serveur web basique multithreadé avec un mini-PC+Pyduino.

Contenu : Technique : Retour sur la structure d’un réseau local et matériel nécessaire | Synthèse : Un peu de vocabulaire pour avoir les idées claires | Le réseau utilisé : mini-PC Pyduino + poste fixe sur un même réseau local | Monter le réseau utilisant le mini-PC | Monter le réseau utilisant le mini-PC sur un réseau avec « box » existant | Technique : Réseau : Notion de serveur / client, notion de port | Technique : Réseau : Notion de protocole http: la communication entre le serveur et le client web. (1) | Technique : Réseau : Notion de protocole http : la communication entre le serveur et le client web. (2) | Pyduino : les fonctions réseau de la librairie Pyduino en mode serveur. | Les limites de la mise en place d’un serveur « façon arduino » avec Pyduino et solutions | Module Python : gérer facilement des requêtes HTML avec Bottle | Module Python : créer facilement un serveur TCP « multi-threadé » avec CherryPy | Exemple de code Python minimal Bottle + CherryPy utilisés seuls | Mémo : Bottle : Quelques exemples de routes/réponses « type » utiles en pratique | Exemple de code Pyduino minimal utilisant Bottle + CherryPy | Technique : Réseau : Notion de base d’HTML | Structure type d’une page HTML simple et écrire une première page HTML | Pyduino + Bottle : Transformer le mini-PC en un simple serveur HTML : le programme |

1.00

Atelier Pyduino : Créer un serveur de fichiers local entièrement dans un répertoire avec un mini-PC + Pyduino.
Niveau : Débutant | Durée travail : 1H30 | Difficulté : | Prix : 1 | Taille : 28 pages |

Description :
Réaliser ou utiliser un serveur de fichiers est une nécessité incontournable dès lors que l’on souhaite accéder à des fichiers présents côté serveur ou encore utiliser des ressources (images, librairies javascript,..) pour intégrer des fonctionnalités évoluées à une webapp. Il existe plusieurs solutions (serveur externe, serveur HTTP local, etc…) : je vous montre dans ce tuto comment le faire très simplement à partir d’un code Pyduino + Bottle afin que vous soyez en mesure de créer un serveur de fichiers entièrement local dans un répertoire avec un mini-PC.

Contenu : Le réseau utilisé : mini-PC Pyduino + poste fixe sur un même réseau local | Monter le réseau utilisant le mini-PC | Monter le réseau utilisant le mini-PC sur un réseau avec « box » existant | Technique : Réseau : Notion de serveur / client, notion de port | Technique : Réseau : Notion de protocole http: la communication entre le serveur et le client web. (1) | Technique : Réseau : Notion de protocole http : la communication entre le serveur et le client web. (2) | Pyduino : les fonctions réseau de la librairie Pyduino en mode serveur. | Les limites de la mise en place d’un serveur « façon arduino » avec Pyduino et solutions | Module Python : gérer facilement des requêtes HTML avec Bottle | Module Python : créer facilement un serveur TCP « multi-threadé » avec CherryPy | Exemple de code Python minimal Bottle + CherryPy utilisés seuls | Mémo : Bottle : Quelques exemples de routes/réponses « type » utiles en pratique | Discussion technique : créer un serveur de fichiers | Pyduino + Bottle : Créer un serveur de fichiers texte : le programme | C’est tout ? |

1.00

Description :
L’objectif ici est d’apprendre les bases du langage Javascript afin d’être en mesure de coder par la suite en Javascript au sein de vos websapps. Ce tuto se concentre sur la syntaxe du langage Javascript lui-même que vous pourrez tester facilement grâce à un interpréteur Javascript.

1.00

Atelier Pyduino : Javascript : librairie jQuery : les bases de l’utilisation de jQuery et de la manipulation des éléments du DOM.
Niveau : Intermédiaire | Durée travail : 1H30 | Difficulté : | Prix : 1 | Taille : 24 pages |

Description :
L’objectif ici est de découvrir comment la librairie Javascript jQuery simplifie le codage en Javascript et permet d’accéder facilement aux éléments de la page web ainsi qu’aux évènements, afin d’être en mesure d’écrire des webapps encore plus efficacement !

1.00

Atelier Pyduino : HTML + Javascript/jQuery : Apprendre à utiliser des librairies Javascript / jQuery dans une webapp.
Niveau : Avancé% | Durée travail : 2H30 | Difficulté : | Prix : 1 | Taille : 36 pages |

Description :
L’objectif ici est d’apprendre à utiliser des librairies Javascript et jQuery afin d’être en mesure d’utiliser des librairies existantes dans vos futures webapps. Grâce aux librairies Javascript / jQuery vous allez pouvoir intégrer n’importe quelle fonctionnalité utile à votre webapp : affichage temps-réel, digit graphique, courbe de série de données zoomable, tableau graphique de données, widgets graphiques, galerie d’image… Du lourd, du « très lourd » même !

Contenu : Introduction aux librairies Javascript | Intégrer une librairie Javascript à une webapp (page HTML + JS) | Installer et tester votre première librairie Javascript | Installation de la librairie Javascript SegmentDisplay | Installation de la librairie Javascript Dygraphs | Rappel : Installation de la librairie jQuery | Installation de la librairie w2ui (jQuery) | Installation de la librairie jQuery UI | Installation de la librairie GalleryView (jQuery + jQuery UI) | Liste de librairies utiles pour la création de webapps : synthèse par thème

1.00

Ressources utiles

Pour approfondir

Accéder aux éléments du DOM en Javascript
Ecrire vos premières webapps HTML+Javascript
Ecrire vos premières webapps HTML+jQuery

References utiles

Memo accès au DOM
Doc de la librairie

Webapps d’initiation

Les codes « type »

Serveur simple : Créer très simplement un serveur autonome avec Bottle et cherrypy
Serveur simple : Créer très simplement un serveur de fichiers textes autonome avec Bottle et cherrypy
Serveur HTML autonome : Créer un serveur autonome de pages HTML texte
Serveur HTML + fichiers : Créer un serveur autonome de page HTML + images
Serveur HTML + librairie JS : Créer un autonome serveur de page HTML + jQuery
Serveur HTML utilisant AJAX : Créer un serveur Ajax de page HTML + jQuery + Ajax

Webapps d’initiation simples

	Serveur HTML+jQuery	Serveur HTML+jQuery+Ajax
Sans Lib JS	Afficher message dans zone texte sur clic bouton	Afficher un message dans une zone texte sur clic bouton par réponse Ajax Afficher un message dans une zone texte en réponse à une requête Ajax à intervalles réguliers Afficher un message dans une zone texte en réponse à une requête Ajax à intervalles réguliers (variante avec setTimeout)
jQueryUI	Obtenir la date courante à partir d’un datepicker	Afficher dans zone texte la date sélectionnée à partir d’un Datepicker par réponse Ajax Ouvrir un fichier daté à partir d’un Datepicker par réponse Ajax
w2ui:sidebar	Afficher un w2sidebar d’exemple Afficher dans un w2sidebar la liste des fichiers d’un répertoire et le nom du fichier sélectionné dans une zone texte	Afficher le contenu d’un fichier texte sélectionné à l’aide d’un w2sidebar
w2ui:grid	Afficher dans un w2grid de test Afficher dans un w2grid une série de données horodatées Afficher dans un w2grid une série de données horodatées à partir d’un fichier de données	Afficher dans un w2grid une série de données horodatées à partir d’un fichier sélectionné par un Datepicker Afficher dans un w2grid une série de données horodatées à partir d’un fichier sélectionné par un w2sidebar – v1 « serveur side » Afficher dans un w2grid une série de données horodatées à partir d’un fichier sélectionné par un w2sidebar – v1 « client side »
Dygraphs	Afficher dans un graphique Dygraphs une série de données horodatées de test Afficher dans un graphique Dygraphs une série de données horodatées à partir d’un fichier	Afficher dans un graphique Dygraphs une série de données horodatées à partir d’un fichier daté sélectionné par un Datepicker Afficher dans un graphique Dygraphs une série de données horodatées à partir d’un fichier daté sélectionné par un w2sidebar
Smoothie	Afficher un graphique temps réel de test	Actualiser un graphique temps réel par requête Ajax

Webapps d’initiation avec Pyduino : Interagir avec les broches E/S depuis une webapp

Sorties ON/OFF

Contrôler broches E/S ON/OFF (bouton toggle jQuery UI+Ajax)

Entrées ON/OFF

Visualiser l’état des broches ES dans le navigateur client (bouton Image jQuery UI+Ajax)

Sorties Analogiques

Contrôler les broches PWM (slider jQueryUI + Ajax)

Entrées Analogiques

Afficher valeurs analogiques sous forme « Digit » (widget « Segment Display » + Ajax)
Afficher valeurs analogiques sous forme de widget analogiques (widgets graphiques analogiques + Ajax)
Afficher valeurs analogiques sous forme d’une courbe live « temps réel » (widget Courbe live + Ajax)

Système : Utiliser des fichiers de données depuis une webapp

Afficher fichier de données dans une zone de texte à partir d’un fichier sélectionné
Afficher fichier de données sous forme d’un tableau graphique à partir d’un fichier sélectionné
Afficher fichier de données sous forme d’une courbe avec zoom, timeline, etc.. à partir d’un fichier sélectionné