Logo Mon Club Elec

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

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 !

Mini-Webapps avec Pyduino

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

Niveau débutant

Niveau intermédiaire

Niveau expérimenté

Mini-Webapps avec Pyduino
  • 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)

Détail des ateliers webapps

Mini-Webapps avec Pyduino

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é : Mini-Webapps avec Pyduino Mini-Webapps avec Pyduino | 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

Mini-Webapps avec Pyduino
Mini-Webapps avec Pyduino

1.00€


Mini-Webapps avec Pyduino

Atelier Pyduino : HTML : Les bases : panorama des balises utiles pour créer des webapps.
Niveau : Débutant | Durée travail : 2H30 | Difficulté : Mini-Webapps avec Pyduino | Prix : 1€ | Taille : 38 pages |

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 |

Mini-Webapps avec Pyduino
Mini-Webapps avec Pyduino

1.00€


Mini-Webapps avec Pyduino

Atelier Pyduino : Apprendre à créer un simple serveur HTML gérant facilement les url et multithreadé.
Niveau : Débutant | Durée travail : 1H30 | Difficulté : Mini-Webapps avec Pyduino | Prix : 1€ | Taille : 36 pages |

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  |

Mini-Webapps avec Pyduino
Mini-Webapps avec Pyduino

1.00€


Mini-Webapps avec Pyduino

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é : Mini-Webapps avec Pyduino Mini-Webapps avec Pyduino| 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 ? |

Mini-Webapps avec Pyduino
Mini-Webapps avec Pyduino

1.00€


Mini-Webapps avec Pyduino

Atelier Pyduino : Javascript : les bases à connaître pour coder en langage Javascript.
Niveau : Intermédiaire | Durée travail : 2H00 | Difficulté : Mini-Webapps avec Pyduino Mini-Webapps avec Pyduino| Prix : 1€ | Taille : 32 pages |

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.

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 »

Mini-Webapps avec Pyduino
Mini-Webapps avec Pyduino

1.00€


Mini-Webapps avec Pyduino

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é : Mini-Webapps avec Pyduino Mini-Webapps avec Pyduino | 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 !

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 ?

Mini-Webapps avec Pyduino
Mini-Webapps avec Pyduino

1.00€


Mini-Webapps avec Pyduino

Atelier Pyduino : HTML + Javascript/jQuery : Apprendre à utiliser des librairies Javascript / jQuery dans une webapp.
Niveau : Avancé% | Durée travail : 2H30 | Difficulté : Mini-Webapps avec Pyduino Mini-Webapps avec Pyduino | 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

Mini-Webapps avec Pyduino
Mini-Webapps avec Pyduino

1.00€


Mini-Webapps avec Pyduino

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 »

Webapps d’initiation simples

Serveur HTML+jQuery

Serveur HTML+jQuery+Ajax

Sans Lib JS

jQueryUI

w2ui:sidebar

w2ui:grid

  • 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é

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

Noter cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Archive Mon Club Elec

Articles populaires

Newsletter

Inscrivez-vous maintenant et bénéficiez d'un soutien continu pour réaliser vos travaux électriques en toute sécurité.