Flask

Brève introduction à la librairie Flask de Python qui permet de créer un site web

Flask

Il serait vain d’espérer vous présenter Flask en une page. Flask est utilisé mondialement pour créer des sites web en Python.

Flask est un “micro framework”, un cadre minimaliste qu’on peut étendre à l’infini.

Toute sortes de sites web peuvent être crées avec Flask : pages statiques, chat bot, réseaux sociaux etc.

Documentation officielle

L’accueil et la prise en main

Tutoriel créant de A à Z un site de micro blogging (très très largement hors programme)

Le site de micro blogging de Miguel Grinberg (La grosse référence de Flask).

Installation

Par défaut, Flask devrait être installé sur les machines du lycée.

Si ça n’est pas le cas :

sous linux

$ sudo pip3 install flask

sous windows

Lancer cmd en mode admin, demander à un adminstrateur de saisir ses identifiants et

> pip3 install flask

Si vous êtes derrière un proxy :

> pip3 install --proxy http://ip.proxy:port flask

Servir une page statique avec un jeu P5JS, par exemple

Dépôt du projet

Dans le même dossier, créer deux dossiers : templates et static et les fichiers suivants :

.
├── views.py
├── templates
|    ├── index.html
|    └── super_jeu.html
└── static
    ├── css
    │   └── style.css
    ├── img
    │   └── chewie.jpg
    └── js
        └── script.js

Cette structure est celle couramment employée dans un projet Flask.

Cet exemple n’aborde pas la transmission d’information depuis Python vers les pages web. Pour un exemple de projet utilisant ces méthodes, se référer au cours de première NSI : IHM sur le web.

views.py

# coding=utf-8
from flask import Flask
from flask import render_template
app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/super_jeu')
def hello():
    return render_template('super_jeu.html')


if __name__ == "__main__":
    app.run(port=2332, debug=True)

index.html

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Mon site avec Flask</title>
    <link rel="stylesheet" href="/static/css/style.css">
  </head>
  <body>
    <div class="presentation">
      <h1>Bienvenue chez moi !</h1>
      <h2>Ma tête</h2>
      <img src="static/img/chewie.jpg " alt="chewie" width="200px" height="200px">
      <h2>Ma vie</h2>
        <p>
          <span>Né à Montevidéo en 1814, j'ai gravi une à une les étapes pour devenir :</span>
          <ol>
            <li>président des états unis,</li>
            <li>pro gamer,</li>
            <li>influenceur,</li>
            <li>avant centre du Réal Madrid !</li>
          </ol>
          <span>Qui peut en dire autant ?</span>
        </p>
      <h2>Mon oeuvre</h2>
        <p>Découvrez mon <a href="super_jeu">super jeu</a>, crée en P5JS</p>
    </div>
  </body>
</html>

super_jeu.html

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Jeu de la vie en P5JS</title>
  </head>
  <body>
    <p>Voici le jeu de la vie. <a href="https://p5js.org/examples/simulate-game-of-life.html">Source.</a></p>
    <script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
    <script src="static/js/script.js" charset="utf-8"></script>
  </body>
</html>

style.css

h1 {
  color:red;
}

span {
  text-align: center;
}

h2 {
  background-color: green;
}

chewie.jpg

Enregistrer cette image : chewie sous le nom chewie.jpg

script.js

C’est le jeu de la vie en P5JS

let w;
let columns;
let rows;
let board;
let next;

function setup() {
  createCanvas(720, 400);
  w = 20;
  // Calculate columns and rows
  columns = floor(width / w);
  rows = floor(height / w);
  // Wacky way to make a 2D array is JS
  board = new Array(columns);
  for (let i = 0; i < columns; i++) {
    board[i] = new Array(rows);
  }
  // Going to use multiple 2D arrays and swap them
  next = new Array(columns);
  for (i = 0; i < columns; i++) {
    next[i] = new Array(rows);
  }
  init();
}

function draw() {
  background(255);
  generate();
  for ( let i = 0; i < columns;i++) {
    for ( let j = 0; j < rows;j++) {
      if ((board[i][j] == 1)) fill(0);
      else fill(255);
      stroke(0);
      rect(i * w, j * w, w-1, w-1);
    }
  }

}

// reset board when mouse is pressed
function mousePressed() {
  init();
}

// Fill board randomly
function init() {
  for (let i = 0; i < columns; i++) {
    for (let j = 0; j < rows; j++) {
      // Lining the edges with 0s
      if (i == 0 || j == 0 || i == columns-1 || j == rows-1) board[i][j] = 0;
      // Filling the rest randomly
      else board[i][j] = floor(random(2));
      next[i][j] = 0;
    }
  }
}

// The process of creating the new generation
function generate() {

  // Loop through every spot in our 2D array and check spots neighbors
  for (let x = 1; x < columns - 1; x++) {
    for (let y = 1; y < rows - 1; y++) {
      // Add up all the states in a 3x3 surrounding grid
      let neighbors = 0;
      for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          neighbors += board[x+i][y+j];
        }
      }

      // A little trick to subtract the current cell's state since
      // we added it in the above loop
      neighbors -= board[x][y];
      // Rules of Life
      if      ((board[x][y] == 1) && (neighbors <  2)) next[x][y] = 0;           // Loneliness
      else if ((board[x][y] == 1) && (neighbors >  3)) next[x][y] = 0;           // Overpopulation
      else if ((board[x][y] == 0) && (neighbors == 3)) next[x][y] = 1;           // Reproduction
      else                                             next[x][y] = board[x][y]; // Stasis
    }
  }

  // Swap!
  let temp = board;
  board = next;
  next = temp;
}

utiliser le serveur

Lancer le serveur avec $ python views.py

Rendez-vous sur http://localhost:2332 dans votre navigateur. Et voilà.