Partie 2 : Préparation des Logiciels

Vérifier le fonctionnement du module PiTinfo

Se connecter en ssh à la Raspberry

  • Sur son ordinateur, ouvrir un terminal de commande (la méthode est différente selon l’OS utilisé : consulter cette page)
  • Taper : $ ssh pi@<local IP Raspberry>
  • Admettons que l’IP locale de la Raspberry soit 192.168.1.120 , taper : ssh pi@192.168.1.120 (à condition, bien sûr, d’avoir laissé pi comme nom d’utilisateur de la Raspberry)
  • Entrer le mot de passe de la Raspberry
  • Si besoin, autoriser la connexion en acceptant la création d’une clé

Installer picocom

  • picocom est un émulateur de terminal qui va permettre de communiquer avec le PiTinfo
  • Installer picocom en tapant dans le terminal connecté à la Raspberry en ssh : $ sudo install picocom

Modifier le fichier /boot/firmware/config.txt

  • Pour assurer un bon fonctionnement de la commande picocom il est nécessaire de modifier le fichier /boot/firmware/config.txt
  • Taper : $ sudo nano /boot/firmware/config.txt (obligé d’être en superutilisateur, car le fichier est protégé)
  • Au paragraphe All vérifier la valeur de enable_uart
  • Elle doit être égale à 1 ; si elle est à 0, la modifier
  • Ajouter une ligne supplémentaire (pour désactiver le bluetooth) : $ dtoverlay=disable-bt
  • Si le bluetooth n’est pas désactivé, la lecture des données pourra être mauvaise
  • Sauvegarder et quitter : Ctrl-O Entrée Ctrl-X

Tester la commande

  • Dans le terminal lancer la commande de lecture des données : $ picocom -b 9600 -d 7 -p e -f h /dev/ttyAMA0
  • Les données de la TIC défilent en continu dans le terminal
  • Pour interrompre, taper : Ctrl-A Ctrl-Q
  • La signification des drapeaux de la commande sont disponibles sur la page man
  • Il convient d’être en 9600 bauds (et non 1200), d’avoir une parité paire (-p e ) et d’être à 7 bits par caractère (-d 7 ), ainsi que le préconise Enedis dans sa notice de téléinformation

Installer Django

Pour assurer une visualisation agréable des données, on va ouvrir des pages contenant les informations souhaitées dans un navigateur web. La méthode utilisée, ici, est de passer par un site internet créé avec Django.

Création d’un environnement virtuel

python3-venv est-il installé ?

Pour fonctionner efficacement sur une Raspberry, il est souhaitable de se mettre en environnement virtuel. Cet environnement évite les conflits, toujours possibles, entre différentes versions de Python. A priori la commande pour lancer la création d’un environnement virtuel est installée par défaut.

  • Vérifier si python3-venv est installé en tapant dans le terminal : $ dpkg -l | grep venv
  • Si vous avez une réponse du type :

ii python3-venv 3.11.2-1+b1 arm64 venv module for python3 (default python3 version) ii python3.11-venv 3.11.2-6+deb12u6 arm64 Interactive high-level object-oriented language (pyvenv binary, version 3.11) cela signifie que python3-venv est installé

  • Dans la négative, l’installer en tapant : $ sudo apt install python3-venv (au besoin après avoir mis à jour les différents paquets avec $ sudo apt update )

Créer le dossier de travail

  • Il convient, en premier lieu, de créer le dossier dans lequel sera hébergé le site
  • On va appeler, par exemple, ce dossier djangoTIC
  • Dans le terminal, taper : $ mkdir djangoTIC
  • On vérifie sa création : $ ls
  • Au passage, on peut supprimer les différents dossiers inutiles préexistants, par exemple Desktop en tapant : $ rm -R Desktop

Créer venv

  • Aller dans le dossier djangoTIC : $ cd djangoTIC
  • Créer l’environnement virtuel que l’on va appeler venv : $ python3 -m venv venv
  • On vérifie que l’environnement virtuel est créé avec la commande ls
  • Pour activer l’environnement virtuel on tape la commande : $ source ~/djangoTIC/venv/bin/activate
  • L’invite de commande montre que l’on est en environnement virtuel : (venv) pi@raspberrypi:~ $
  • Pour désactiver l’environnement virtuel : $ deactivate

Installer Django

  • Se mettre en environnement virtuel et se placer dans le dossier djangoTIC :
    $ source ~/djangoTIC/venv/bin/activate
    $ cd ~/djangoTIC
  • Lancer la commande d’installation de Django : $ python -m pip install Django
  • Comme on est en environnement virtuel, inutile de préciser python3 : il n’y a pas d’ambiguité
  • Vérifier l’installation : $ python -m django --version qui doit renvoyer une sortie du type : 5.2.9 en fonction du nom de la version

Créer le projet Django

  • On va appeler ce projet ticServer
  • Vérifier qu’on est en environnement virtuel dans le dossier djangoTIC
  • Lancer la commande $ django-admin startproject ticServer
  • Django a créé un dossier ticServer
  • L’arborescence des dossiers et fichiers est du type :
📁 Structure du projet 
/home/pi/djangoTIC
├── ticServer
│   ├── manage.py
│   └── ticServer
│       ├── asgi.py
│       ├── __init__.py
│       ├── settings.py
│       ├── urls.py
│       └── wsgi.py
└── venv

Créer l’application ticapp

  • Dans le projet ticServer on crée une application que l’on va appeler ticapp
  • Si on décide de changer le nom de cette application, ne pas mettre de majuscule dans ce nom, pour éviter des conflits avec les paramétrages qui vont être créés par Django
  • Vérifier qu’on est bien dans le dossier qui contient le fichier manage.py et, si besoin, s’y placer : $ cd ~/djangoTIC/ticServer
  • Lancer la commande de création de l’application : $ python manage.py startapp ticapp
  • Django a créé un dossier ticapp dans le dossier djangoTIC/ticServer
  • L’arborescence est maintenant :
    📁 Structure du projet 
    /home/pi/djangoTIC
├── ticServer
│   ├── manage.py
│   ├── ticapp
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── __init__.py
│   │   ├── migrations
│   │   ├── models.py
│   │   ├── tests.py
│   │   └── views.py
│   └── ticServer
│       ├── asgi.py
│       ├── __init__.py
│       ├── __pycache__
│       ├── settings.py
│       ├── urls.py
│       └── wsgi.py
└── venv

Modifier les paramètres dans settings.py

  • Ouvrir en écriture le fichier settings.py : $ nano ~/djangoTIC/ticServer/ticServer/settings.py
  • Modifier ALLOWED_HOSTS en ajoutant l’IP de la raspberry ; par exempleALLOWED_HOSTS = ["192.168.1.120"] (à modifier en fonction de l’IP attribuée à la Raspberry)
  • Ajouter l’application ticapp dans INSTALLED_APPS en insérant la valeur : 'ticapp.apps.TicappConfig', la liste devient :
    ticServer/ticServer/settings.py 
    INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'ticapp.apps.TicappConfig',        # new     
]
  • Ajouter TIME_ZONE : 'Europe/Paris' dans DATABASES (il n’est pas utile de modifier le nom de la base de données)
  • Le dictionnaire DATABASES devient :
    ticServer/ticServer/settings.py 
    DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
        'TIME_ZONE': 'Europe/Paris',
    }
}
  • Modifier la valeur de LANGUAGE_CODE : LANGUAGE_CODE = 'fr'
  • Modifier la valeur de TIME_ZONE : TIME_ZONE = 'Europe/Paris'
  • Sauvegarder le fichier et quitter : Ctrl-O Entrée Ctrl-X

Vérifier dans un navigateur

  • Vérifier que l’environnement virtuel est lancé
  • Se placer dans le dossier : $ cd ~/djangoTIC/djangoServer
  • Lancer la commande : $ python manage.py runserver 0.0.0.0:8000
  • Ne pas tenir compte des avertissements qui sont normaux à ce stade
  • Dans un navigateur de votre ordinateur, taper l’adresse : 192.168.1.120:8000 (à modifier en fonction de l’adresse IP locale)
  • Vous devez voir la page d’accueil de Django
page d'accueil de django indiquant que l'installation est réussie

  • Dans la commande la valeur 0.0.0.0 permet d’accéder au site depuis un autre appareil que la Raspberry
  • 8000 représente le port classiquement utilisé par Django

Installer Tailwind et Flowbite

Pour personnaliser l’aspect du site qui va afficher les données, on doit utiliser un fichier css.
Plutôt que d’écrire soi-même le css , le plus simple est de passer par un outil de développement dédié. Le choix porte sur tailwind et sa bibliothèque intégrée flowbite.

Installer nodejs et npm

  • Pour installer tailwind et flowbite on utilise la commande npm
  • On installe tout d’abord nodejs : $ sudo apt install nodejs
  • On vérifie l’installation : $ node -v qui renvoie le numéro de version
  • On installe npm : $ sudo apt install npm
  • On vérifie l’installation : $ npm -v qui renvoie le numéro de version

Installer tailwind

  • Suivre la procédure décrite dans Tailwind CLI
  • Se mettre en environnement virtuel dans le dossier ~/djangoTIC/ticServer : $ cd ~/djangoTIC/ticServer
  • Taper la commande : $ npm install tailwindcss @tailwindcss/cli
  • Dans le dossier ~/djangoTIC/ticServer ont été créés : le dossier node_modules et les deux fichiers package-lock.json et package.json
  • Créer les dossiers static et src en lançant la commande : $ mkdir -p ~/djangoTIC/ticServer/ticapp/static/src
  • Créer et ouvrir le fichier input.css en écriture : $ nano ~/djangoTIC/ticServer/ticapp/static/src/input.css
  • Dans le fichier écrire : $ @import "tailwindcss";
  • Sauvegarder et fermer
  • En étant toujours dans le dossier ~/djangoTIC/ticServer lancer l’interface de ligne de commande en tapant la commande : $ npx @tailwindcss/cli -i ticapp/static/src/input.css -o ticapp/static/src/output.css --watch
  • Le fichier output.css a été créé ; c’est ce fichier qui va contenir le css du site

Installer flowbite

  • Suivre la procédure décrite dans Flowbite Quickstart
  • Se mettre en environnement virtuel dans le dossier ~/djangoTIC/ticServer
  • Taper la commande : $ npm install flowbite
  • Dans le dossier node_modules un dossier flowbite (entre autres) a été créé
  • Pour des questions de chemin des fichiers statiques, il peut être préférable de copier le dosser flowbite de nodes_modules vers static : $ cp -r ~djangoTIC/ticServer/node_modules/flowbite ~djangoTIC/ticServer/ticapp/static/
  • Modifier le fichier input.css en l’ouvrant en écriture : $ nano ~/djangoTIC/ticServer/ticapp/static/src/input.css
  • Ajouter les lignes :
static/src/input.css 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "../flowbite";
  • Le fichier final ressemble à :
    static/src/input.css 
    @import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "../flowbite";

Simplification de la commande npx

Pour modifier en continu le fichier output.css , il faut donc lancer dans un terminal la commande npx etc... .
Pour que la commande soit prise en compte il faut :

  • être en environnement virtuel ou pas !
  • être dans le bon dossier : ~/djangotTIC/ticServer car c’est dans ce dossier qu’est placé le fichier package.json On peut tout à fait se contenter de suivre cette procédure. Il est cependant possible de simplifier le lancement de la commande en modifiant le fichier package.json :
  • Ouvrir le fichier en écriture : $ nano ~/djangoTIC/ticServer/package.json
  • Ajouter les lignes (on est dans un json, donc attention aux virgules) :
    ticServer/package.json 
    ,
"scripts": {
    "dev": "npx @tailwindcss/cli -i ticapp/static/src/input.css -o ticapp/static/src/output.css --watch",
    "build": "npx @tailwindcss/cli -i ticapp/static/src/input.css -o ticapp/static/src/output.css --minify"
    }
  • Le fichier modifié est le suivant (à adapter aux versions des logiciels):
    ticServer/package.json 
    {
  "dependencies": {
    "@tailwindcss/cli": "^4.1.10",
    "flowbite": "^3.1.2"
  },
  "scripts": {
    "dev": "npx @tailwindcss/cli -i ticapp/static/src/input.css -o ticapp/static/src/output.css --watch",
    "build": "npx @tailwindcss/cli -i ticapp/static/src/input.css -o ticapp/static/src/output.css --minify"
  }
}
    Avec cette modification, la commande à lancer dans djangoTIC/ticServer est la suivante : $ npm run dev
    Si on veut éviter d’être nécessairement dans le dossier djangoTIC/ticServer pour lancer la commande, il est possible de créer un alias :
  • Ouvrir le fichier .bashrc : $ nano ~/.bashrc
  • En fin de fichier copier les deux lignes :
    /home/pi/.bashrc 
    # créer un alias pour la commande npm run dev
alias tailwind-dev='cd /home/pi/djangoTIC/ticServer && npm run dev'
  • Recharger le fichier .bashrc : $ source ~/.bashrc
  • Depuis n’importe quel dossier on lance la commande : $ tailwind-dev
    Quoi qu’il en soit, le plus judicieux est d’ouvrir deux terminaux :
  • un sur lequel on lance django pour visualiser le site internet (obligatoirement en environnement virtuel)
  • un sur lequel on lance tailwind pour observer en direct les modifications éventuelles du css (en environnement virtuel ou non)

Ajouter un nouveau dossier templates

  • Les fichiers html doivent être stockés dans un dossier templates
  • Créer le dossier templates : $ mkdir ~/djangoTIC/ticServer/ticapp/templates
  • Ouvrir settings.py en écriture : $ nano ~/djangoTIC/ticServer/ticServer/settings.py
  • Mettre à jour settings.py en indiquant le nouveau chemin des fichiers html en l’insérant dans la liste TEMPLATES : 'DIRS': [BASE_DIR / 'templates'],
  • Pour aider au débogage lors du développement du site, on peut ajouter dans TEMPLATES -> OPTIONS -> context-processors : 'django.template.context_processors.debug', (cet ajout n’a pas d’intérêt en phase de production)
  • La liste TEMPLATES devient donc :
    ticServer/ticServer/settings.py 
    TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],                       # new
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',     # new
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]