OpenWeek 2018

Introduction à la partie serveur d'une webapp

Nicolas Rybowski - nicolas.rybowski@student.uclouvain.be

Une webapp est ...

  • Un programme
  • de type client-serveur
  • dont le client tourne dans un naviguateur web
  • Ce dernier est composé de pages web

Types de pages web

  • Pages statiques
    • Page web dont le contenu ne varie pas en fonction de la requête
    • Un fichier sur un serveur
    • Typiquement :
      • Documentation
      • API
      • Articles (blogs,etc)
    • Langages :
      • HTML
      • CSS
      • JS

Types de pages web

  • Pages dynamiques
    • Page web dont le contenu est généré lors de la requête
    • Template dont certains champs sont complétés par un script
    • Typiquement :
      • Google Form
      • ...
    • Langages :
      • PHP
      • Python
      • ...

Servir des pages web ?

  • Protocole HTTP
  • En pratique : serveur HTTP
    • Apache
    • Nginx
    • Cherokee
    • Unicorn
    • Lighttpd
    • ...

Notre setup

  • Serveur HTTP statique : Lighttpd (a.k.a. Lighty)
  • Backend : framework web.py (scripting en Python)
  • Middleware : serveur FastCGI flup
  • Template engine : Jinja2

Notre setup (en image)

Structure du projet


            +/var/www/openweek
            | lighttpd.conf
            | +/scripts
            | | app.py
            | +/static
            | | +/pages
            | | | index.html
            | | +/css
            | | | index.css
            | +/templates
            | | temp.html
            | +/storage
  • lighttpd.conf : fichier de configuration de Lighty
  • /scripts : dossier contenant les scripts de génération des pages dynamiques
  • /static : dossier contenant les ressources statiques (pages HTML, feuilles de style CSS, etc)
  • /templates : dossier contenant les templates utilisés par le moteur de rendu Jinja2
  • /storage : stockage des données (db sqlite ou fichiers JSON)

web.py

ou "comment coder une webapp en 5 lignes"


            import web
            
            urls = {"/": "index"}
            
            class index:
              def GET(self):
                return "Hello World from Python!"
            
            if __name__ == "__main__":
              app = web.application(urls, globals())
              app.run()

Jinja2


              <html>
                <head>
                  <title>{{title}}</title>
                </head>
                <body>
                  {% block body %}{% endblock %}
                </body>
              </html>

layout.html


              {% extends "layout.html" %}
              {% block body %}
                
Hello {{user_name}}

              {% endblock %}

template.html


              class example:
                def GET(self):
                  context = {
                    "title" : "Example page",
                    "user_name" : "Billjoy"
                  }
                  return render_template("template.html", **context)

app.py

En pratique

3 parties

  • Capture des données
    • Manipulation du GPIO via des librairies abstrayant le protocole I2C
    • module data.py
  • Stockage des données
    • Fichiers JSON/YAML
    • Base de données SQLITE
    • dossier /storage
  • Présenter les données
    • Jinja2 + web.py
    • module app.py
    • dossiers /static /templates

A vous de jouer !

Des questions ?