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é |
|
![]() |
|
|
|
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. Description : 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 |
![]() |
Atelier Pyduino : HTML : Les bases : panorama des balises utiles pour créer des webapps. Description : 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 |
![]() |
Atelier Pyduino : Apprendre à créer un simple serveur HTML gérant facilement les url et multithreadé. Description : 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. Description : 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 |
![]() |
Atelier Pyduino : Javascript : les bases à connaître pour coder en langage Javascript. Description : Contenu : Notion de script « côté client» et présentation du langage Javascript | Panorama rapide de la syntaxe de base du langage Javascript | S’installer pour apprendre et tester le langage Javascript | Syntaxe de base du Javascript | Constantes et variables | A vous de jouer ! | Conversion de type | Opérations arithmétiques et fonctions mathématiques | Tableaux (ou listes) : création, accès aux éléments | Tableaux (ou listes) : les opérations de base | La condition if else .. | Les opérateurs logiques en Javascript | Quelques exemples | La boucle For | La boucle conditionnelle while | Interruption/sortie de boucles ou de conditions | Déclarer une fonction | Quelques exemples de fonctions | Fonctions et portée des variables | Usage avancé : Les objets en Javascript | Usage avancé : Les fonctions de l’objet String (chaîne de caractères) | Usage avancé : Utilisation des dates | Usage avancé : Utilisation des expressions régulières | Usage avancé : Gestion des erreurs et exceptions | Usage avancé : le « strict mode » |
1.00 |
![]() |
Atelier Pyduino : Javascript : librairie jQuery : les bases de l’utilisation de jQuery et de la manipulation des éléments du DOM. Description : Contenu : Intégrer une librairie Javascript à une webapp (page HTML + JS) | Installation de la librairie jQuery | S’installer pour tester la librairie jQuery | La librairie jQuery. | La syntaxe générale d’une instruction jQuery : | Les sélecteurs JQuery | A vous de jouer… | Les « events » ou « fire » | Utilisation des évènements : à vous de jouer… | Les effets | Utilisation des effets : vous de jouer… | Chaînage | Gestion des éléments du DOM : accès aux propriétés HTML des éléments du DOM | Gestion des éléments du DOM : ajout /retrait de texte aux éléments du DOM | A vous de jouer… | Autres possibilités offertes par JQuery | A vous de jouer… | Encore plus fort… | Mixer Javascript et jQuery dans un même script ? |
1.00 |
![]() |
Atelier Pyduino : HTML + Javascript/jQuery : Apprendre à utiliser des librairies Javascript / jQuery dans une webapp. Description : 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 |
||
jQueryUI |
||
w2ui:sidebar |
|
|
w2ui:grid |
|
|
Dygraphs |
|
|
Smoothie |
|
|
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é
Multimédia : Utiliser les fonctions multimédia depuis une webapp
- Afficher des images sous forme d’une galerie d’image
Exemples d’utilisation
Multimédia :
- Capture d’image depuis le navigateur client
- Déclencher la synthèse vocale depuis le navigateur client
- Déclencher la lecture de fichiers sons depuis le navigateur client
Dispositifs
- Contrôler un afficheur LCD depuis une WebApp
- Contrôler deux moteurs CC depuis une webApp
« Applicatif » : Utiliser des logiciels côté serveur depuis une webapp
- « Interpréteur » Pyduino dans un navigateur client
- Créer un serveur de graphiques Matplotlib (28p.) – 1
- Serveur de traitement d’image OpenCV
Interfaces opérationnelles complètes
- Tableau de contrôle Pyduino complet
- Contrôle de chauffage central
- Contrôle de panneau solaire
- Contrôle d’une station de chauffage solaire
ATELIERSPYDUINOWEBAPPSModele | ATELIERSPYDUINOWEBAPPSModeleAjax
Articles Liés
- Ateliers Pyduino : des supports PDF didactiques pour apprendre pas à pas à programmer un mini-PC aussi facilement qu'Arduino... et bien plus encore !
Les ateliers Pyduino sont une nouvelle façon innovante d'apprendre à programmer un mini-PC. Ces supports…
- Ateliers Pyduino : des supports PDF didactiques pour apprendre pas à pas à programmer un mini-PC aussi facilement qu'une carte Arduino... et bien plus encore !9.1 Description des tutos Pyduino
Les ateliers Pyduino sont une série de tutoriels PDF conçus pour aider les débutants à…
- Notion de Client/Serveur appliqué à 2 cartes Arduino communicantes
La notion de client/serveur est un concept informatique très répandu qui permet à deux systèmes…