Server web en python [Classes]

Server web en python⚓

Botlle est un framework web simple et léger (documentation)

Ouvrer le terminal et entrer la commandes suivante permettant d'installer bottle :

sudo apt install python3-bottle

sudo apt install python3-bottle

Après une lecture générale de la documentation vous pouvez : Tester le premier exemple proposé dans la doc

Une fois le script exécuté, ouvrir un navigateur sur le raspberry et connecter vous au serveur.

Pour pouvoir vous connecter depuis un autre poste, il faut configurer l'adresse IP du serveur à 0.0.0. Dans le contexte d'un serveur, 0.0.0.0 signifie "toutes les adresses IPv4 de la machine locale". Si un hôte a deux adresses IP 192.168.1.1 et 10.1.2.1, et qu'un serveur du réseau en cours d'exécution écoute sur 0.0.0.0, il sera accessible sur ces deux IP.

Depuis votre RPI400, se connecter au réseau wifi. Puis taper dans un navigateur l'adresse IP et le port du serveur.

Complément : IP du server

Connaître l'adresse IP du Rasperry dans un terminal : ip a ou

sudo ip -4 addr show | grep -oE "\b([0-9]{1,3}\.){3}[0-9]{1,3}\b"

sudo ip -4 addr show | grep -oE "\b([0-9]{1,3}\.){3}[0-9]{1,3}\b"

Il est possible en python de créer une chaîne de caractère sur plusieurs lignes en utilisant les triples guillemets. C'est ce qui est utilisé dans le programme ci-dessous :

from bottle import route, run
@route('/')
def hello():
    return """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Station metéo </title>
</head>
<body>
    <h2>Infomations reçues par la station météo :</h2>
    <table>
        <tbody>
          <tr>
            <th scope="row">Humidité(%) = </th>
            <td>50</td>
          </tr>
          <tr>
            <th scope="row">Température(°C) =</th>
            <td>19</td>
          </tr>
        </tbody>
      </table>
      
</body>
</html>
"""
run(host='0.0.0.0', port=8585, debug=True)

from bottle import route, run

@route('/')
def hello():
    return """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Station metéo </title>
</head>
<body>
    <h2>Infomations reçues par la station météo :</h2>
    <table>
        <tbody>
          <tr>
            <th scope="row">Humidité(%) = </th>
            <td>50</td>
          </tr>
          <tr>
            <th scope="row">Température(°C) =</th>
            <td>19</td>
          </tr>
        </tbody>
      </table>
      
</body>
</html>

"""
run(host='0.0.0.0', port=8585, debug=True)

On peut donc envoyer directement du code html dans le script python.

Valeurs aléatoires

On remplace les valeurs par une variable aléatoire générées par la fonction randint. L'opérateur + avec 2 chaînes de caractère en python permet de les concaténer. La fonction str(20) convertie le nombre 20 en une chaîne de caractère :

Tester le programme suivant et tenter de comprendre son fonctionnement :

from bottle import route, run
from random import randint
@route('/')
def hello():
    return """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Station metéo </title>
</head>
<body>
    <h2>Infomations reçues par la station météo :</h2>
    <table>
        <tbody>
          <tr>
            <th scope="row">Humidité(%) = </th>
            <td>"""+str(randint(0,100)) +"""</td>
          </tr>
          <tr>
            <th scope="row">Température(°C) =</th>
            <td>"""+str(randint(17,30))+""" </td>
          </tr>
        </tbody>
      </table>
      
</body>
</html>
"""
run(host='0.0.0.0', port=8585, debug=True)

from bottle import route, run
from random import randint
@route('/')
def hello():
    return """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Station metéo </title>
</head>
<body>
    <h2>Infomations reçues par la station météo :</h2>
    <table>
        <tbody>
          <tr>
            <th scope="row">Humidité(%) = </th>
            <td>"""+str(randint(0,100)) +"""</td>
          </tr>
          <tr>
            <th scope="row">Température(°C) =</th>
            <td>"""+str(randint(17,30))+""" </td>
          </tr>
        </tbody>
      </table>
      
</body>
</html>

"""
run(host='0.0.0.0', port=8585, debug=True)

FUSION UART et serveur web :

Question⚓

Faire la fusion du programme de l'activité précédente et du programme ci dessus, et ainsi permettre l'affichage des valeurs de la température et de l'humidité.,envoyés par l'Arduino.

Solution ⚓

from bottle import route, run
from random import randint
import serial  # bibliothèque permettant la communication série
import time    # pour le délai d'attente entre les messages
ser = serial.Serial('/dev/ttyACM0', 9600)
def GetTemp(ser):
   ser.write(b'T\n')
   line = ser.readline() # lire la ligne recue
   t = float(line)
   return t
def GetHum(ser):
   ser.write(b'H\n')
   line = ser.readline() # lire la ligne recue
   h = float(line)
   return h
@route('/')
def hello():
    return """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Station metéo </title>
</head>
<body>
    <h2>Infomations reçues par la station météo :</h2>
    <table>
        <tbody>
          <tr>
            <th scope="row">Humidité(%) = </th>
            <td>"""+str(GetHum(ser)) +"""</td>
          </tr>
          <tr>
            <th scope="row">Température(°C) =</th>
            <td>"""+str(GetTemp(ser))+""" </td>
          </tr>
        </tbody>
      </table>
      
</body>
</html>
"""
run(host='0.0.0.0', port=8585, debug=True)

from bottle import route, run
from random import randint
import serial  # bibliothèque permettant la communication série
import time    # pour le délai d'attente entre les messages


ser = serial.Serial('/dev/ttyACM0', 9600)


def GetTemp(ser):
   ser.write(b'T\n')
   line = ser.readline() # lire la ligne recue
   t = float(line)
   return t

def GetHum(ser):
   ser.write(b'H\n')
   line = ser.readline() # lire la ligne recue
   h = float(line)
   return h

@route('/')
def hello():
    return """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Station metéo </title>
</head>
<body>
    <h2>Infomations reçues par la station météo :</h2>
    <table>
        <tbody>
          <tr>
            <th scope="row">Humidité(%) = </th>
            <td>"""+str(GetHum(ser)) +"""</td>
          </tr>
          <tr>
            <th scope="row">Température(°C) =</th>
            <td>"""+str(GetTemp(ser))+""" </td>
          </tr>
        </tbody>
      </table>
      
</body>
</html>

"""
run(host='0.0.0.0', port=8585, debug=True)

Amélioration du code de la page web

Question⚓

Pour permettre au site de suivre l'évolution des données, on insère un script javascript

<script>
  // Recharge la page toutes les 30 secondes
  setInterval(() => {
    console.log("Rechargement...");
    location.reload();
  }, 30000);
</script>

<script>
  // Recharge la page toutes les 30 secondes
  setInterval(() => {
    console.log("Rechargement...");
    location.reload();
  }, 30000);
</script>

Solution ⚓

from bottle import route, run
from random import randint
import serial  # bibliothèque permettant la communication série
import time    # pour le délai d'attente entre les messages
ser = serial.Serial('/dev/ttyACM0', 9600)
def GetTemp(ser):
   ser.write(b'T\n')
   line = ser.readline() # lire la ligne recue
   t = float(line)
   return t
def GetHum(ser):
   ser.write(b'H\n')
   line = ser.readline() # lire la ligne recue
   h = float(line)
   return h
@route('/')
def hello():
    return """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Station metéo </title>
</head>
<body>
    <script>
        setInterval(()=>{
        console.log("Rechagement ...")
        location.reload()
        },1000)
    </script>
    
    <h2>Infomations reçues par la station météo :</h2>
    <table>
        <tbody>
          <tr>
            <th scope="row">Humidité(%) = </th>
            <td>"""+str(GetHum(ser)) +"""</td>
          </tr>
          <tr>
            <th scope="row">Température(°C) =</th>
            <td>"""+str(GetTemp(ser))+""" </td>
          </tr>
        </tbody>
      </table>
      
</body>
</html>
"""
run(host='0.0.0.0', port=8585, debug=True)

from bottle import route, run
from random import randint
import serial  # bibliothèque permettant la communication série
import time    # pour le délai d'attente entre les messages


ser = serial.Serial('/dev/ttyACM0', 9600)


def GetTemp(ser):
   ser.write(b'T\n')
   line = ser.readline() # lire la ligne recue
   t = float(line)
   return t

def GetHum(ser):
   ser.write(b'H\n')
   line = ser.readline() # lire la ligne recue
   h = float(line)
   return h

@route('/')
def hello():
    return """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Station metéo </title>
</head>
<body>
    <script>
        setInterval(()=>{
        console.log("Rechagement ...")
        location.reload()
        },1000)
    </script>
    
    <h2>Infomations reçues par la station météo :</h2>
    <table>
        <tbody>
          <tr>
            <th scope="row">Humidité(%) = </th>
            <td>"""+str(GetHum(ser)) +"""</td>
          </tr>
          <tr>
            <th scope="row">Température(°C) =</th>
            <td>"""+str(GetTemp(ser))+""" </td>
          </tr>
        </tbody>
      </table>
      
</body>
</html>

"""
run(host='0.0.0.0', port=8585, debug=True)

Amélioration du code de la page web

Pour permettre au site de suivre l'évolution des données, on insère un script javascript

<script>
  // Recharge la page toutes les 30 secondes
  setInterval(() => {
    console.log("Rechargement...");
    location.reload();
  }, 30000);
</script>

<script>
  // Recharge la page toutes les 30 secondes
  setInterval(() => {
    console.log("Rechargement...");
    location.reload();
  }, 30000);
</script>

Analyser les trames des clients et du serveur

Wireshark est un logiciel permettant d'analyser les trames qui circulent sur un interface réseau. Pour le lancer en mode administrateur :

Introduction à wirewhark

Filtrer et analyser les trames web lors d'une connexion au serveur.