Étiquette : node.js

Raspberry

Domotique – Développer une application web en temps réel

Domotique :

Développer une application web en temps réel

 

Introduction

Dans cet article on développe une application web en temps réel pour de la domotique. Le but est de relier un capteur de température au Raspberry et afficher la température en temps réel sur une page web. Pour cela on utilisera une capteur DS18B20 que l’on fera communiquer avec le Raspberry via le bus 1-wire. Pour la partie application web, on utilisera Node.js, et les librairies Socket.io et Gauge.js.

 

Plan

  1. Démonstration
  2. Pré-recquis
  3. Mise en place du capteur
    1. Connexion du capteur DS18B20
    2. Activation du bus 1-wire
  4. Développement du back-end
  5. Développement du front-end
  6. Déploiement
  7. Certification SSL (Optionnel)

 

1 – Démonstration

En suivant ce tutoriel vous devriez aboutir à cette application 🙂

 

2 – Pré-recquis

  • Raspberry Pi 2 ou 3 fonctionnel sous Raspbian (ou n’importe quel autre OS)
  • Un capteur de température DS18B20 (kit clé en main disponible ici)
  • Des câbles de connexion femmelle/femmelle pour les ports GPIO du Raspberry (disponible ici)

 

3 – Mise en place du capteur

 

          3.1 – Connexion du capteur DS18B20

 
Pour commencer, connectez votre capteur de température via les câbles femmelle/femmelle  à votre Raspberry en branchant l’alimention (fil rouge) sur le port 4 (5V PWR), la masse au port 6 (GND) et pour finir le signal sur le port 7 (GPIO4 GPIO_GCLK)

 

          3.2 – Activation du bus 1-wire

Maintenant que le capteur est branché, il faut activer le bus 1-wire du Raspberry. Pour ce faire, ouvrez une connexion ssh avec votre Raspberry et tapez les commandes suivantes :

sudo modprobe w1-gpio
sudo modprobe w1-therm

Puis ajouter au fichier /etc/modules les lignes suivante avec nano par exemple :

w1-therm
w1-gpio pullup=1

Ensuite ajouter la ligne suivante au fichier /boot/config.txt

dtoverlay=w1-gpio

Puis redémarrer le Raspberry

sudo reboot

Une fois vôtre Raspberry redémarré, placez vous dans le répertoire regroupant les capteurs et listez les identifiants des capteurs connectés

cd /sys/bus/w1/devices/
ls

Vous devriez avoir un répertoire nommé « 28-xxxxxxxxxx » qui correspond à votre capteur, déplacez vous dedans et affichez le contenue de du fichier w1_slave

cd 28-...
cat w1_slave

Vous devriez alors voir s’afficher la température captée, vous pouvez alors passer à la partie suivante 🙂

 

4 – Développement du back-end

Pour la partie back-end (côté serveur), nous allons développer une application Node.js avec plusieurs librairies comme Express.js et Socket.io

Commencez par installer Node.js

sudo apt-get update && sudo apt-get upgrade
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt install nodejs

 

5 – Développement du front-end

 

6 – Déploiement

 

7 – Certification SSL (optionnel)

 

Universitaire

Angular 2 – Site de e-commerce simplifié sur architecture…

 

 

L’architecture MEAN est une architecture de développement d’application web qui est composée de :

  • MongoDB qui est une base de donnée non-SQL
  • Express qui est un framework pour créer des applications serveurs avec NodeJS
  • Angular2 qui est un framework pour le côté client
  • Node.js qui est un serveur JavaScript

 

Angular2 est le successeur d’Angular.js depuis 2015. Ce framework a subit d’importantes évolutions durant l’automne 2016. Ce framework permet de développer une application côté client en TypeScript, ce qui facilite la Programmation Orientée Objet. Un transpiler tsc traduit votre code TypeScript en JavaScript qui sera interprété par tous les navigateurs.

Express étant un framework JavaScript, les fichiers de sortie de votre application Angular2 étant en JavaScript et l’application côté serveur développée pour Node.js étant développée en JavaScript, cette architecture est dite « full JavaScript » (c’est-à-dire entièrement écrite en JavaScript).

 

Cette application  a été développée dans le carde d’un projet universitaire consistant à réaliser une Single Page Application d’e-commerce client-serveur avec une architecture MEAN.Cette application d’e-commerce ne contient qu’une partie recherche de produits, et une partie vente. Ces deux parties sont modélisée en deux modules ayant chacun des composants :

  • Module de recherche qui contient :
    • Composant de recherche de produit par marque
    • Composant de recherche de produit par type
    • Composant de recherche de produit par prix
  • Module panier qui contient :
    • Composant d’ajout d’un produit au panier
    • Composant de suppression d’un produit du panier
    • Composant de vidage du panier
    • Composant de récupération du panier à la session précédente

On ne s’intéresse donc pas à la partie paiement ou même à une partie identification des utilisateurs, elle est donc mono-utilisateur.

Déroulement d’une recherche de marque Apple puis de l’ajout d’un produit iPhone 7 dans le panier :

***       Début      ***

-> L’utilisateur saisie une marque puis clique sur Rechercher

-> Le composant de recherche par marque envoie une requête au serveur sous forme de Route

-> Le serveur capte la Route et questionne la collection Produits de la base de donnée MongoDB avec la marque passée dans la Route

-> MongoDB renvoie au serveur une liste de type json contenant tous les produits Apple contenus dans la base de donnée au serveur

-> Le serveur envoie au client cette liste de produits

-> Le composant de recherche par marque affiche tous les produits contenus dans la liste puis dessine des étoiles (d3.js) sous chaque produit pour illustrer sa popularité

-> L’utilisateur clique sur le produit ce qui appel le composant d’ajout du module Panier

-> Le composant d’ajout envoie une Route au serveur avec les informations du produit à ajouter au panier

-> Le serveur ajoute à la base de donnée le produit dans la collection Panier puis questionne la base de donnée sur le contenue de cette collection

-> Le serveur envoie au client la liste des produits contenus dans le panier

-> Le composant d’ajout du module Panier affiche les produits contenus dans le panier

***     Fin     ***

Vous pouvez accéder au code source ici 😊