Concevez un site avec Flask

Bienvenue dans ce cours !

Ensemble, nous allons créer une application web qui s'appelle "Le test ultime" ! Hé oui, vous allez enfin découvrir qui vous êtes vraiment ! Avez-vous déjà cliqué sur un lien, dans Facebook, qui vous promettait de vous dire toute la vérité sur votre personnalité ? Ou bien qui vous divulguerait à quel présentateur télé vous ressemblez le plus ? Nous allons réaliser une application semblable !

Le projet exemple : le test ultime !

Imaginons un instant le parcours d'une utilisatrice, Ellen, qui souhaite effectuer le test :

• Une de ses amies, Estelle, a partagé le lien vers notre site sur Facebook. Une image, associée au lien, donne la description de sa personnalité : "Estelle - Vous êtes une personne insaisissable, étonnante et pétillante. Rien ne vous fait peur (sauf les araignées !). Amicale et chaleureuse, vous aimez prendre un café en terrasse lorsque le soleil brille et raconter vos dernières péripéties au serveur. Avez-vous envisagé une carrière d'actrice ? ;-)"

• Elle clique sur l'image et arrive sur la page d'accueil, disponible à l'adresse    http://le-test-ultime.hello-birds.com/.

• Elle voit un bouton "Continuer avec Facebook". Elle clique et accepte de se connecter avec Facebook.

• La page s'actualise pour afficher le résultat. Notre algorithme a analysé son profil et choisi la description la plus proche de sa personnalité. Ellen voit sur la page son prénom, sa photo et la description.

• Ellen clique sur "Partager sur Facebook". Une fenêtre pop-up s'ouvre contenant la photo à partager et un lien vers notre site. Elle la partage à ses amis.

Bien ! Vous verrez, la création de ce site sera très sympa !

Étant donné que notre site générera du contenu automatiquement (l'image à partager sur Facebook et la description), nous ne pouvons pas créer un site statique. Nous allons créer un site dynamique grâce à un des langages de programmation les plus populaires du monde : Python.

De quels outils aurons-nous besoin ?

• Un langage de programmation : nous partons sur Python car c'est un langage puissant maintenu par une solide communauté internationale.

• Une base de données : il nous faut conserver les descriptions et les retrouver rapidement, c'est pourquoi nous avons besoin d'une base de données.

• Un service qui nous permet d'interagir avec la base de données en Python de manière sécurisée.

• Un serveur web dont le rôle va être de recevoir des requêtes HTTP, de les traiter et de renvoyer une réponse HTTP conforme.

• Bien d'autres éléments que nous verrons au fur et à mesure.

Nous pourrions bien entendu utiliser la puissance de Python pour créer tous ces outils de zéro. Mais ce n'est pas nécessaire ! Plutôt que de réinventer la roue, apprenons Flask.

Qu'est-ce que Flask ?

Flask est un micro-framework web écrit en Python. Il vous permet de concevoir une application web solide de manière professionnelle.

Pourquoi Flask est-il un micro-framework ? Car, par défaut, il fait assez peu de choses. Il vous faut choisir les extensions à activer et à installer. Par exemple, il n'inclut pas la possibilité de travailler avec une base de données par défaut. En effet, vous n'avez pas toujours besoin d'une base de données !

Armin Ronacher l'a développé en 2010 dans le but de donner un cadre de travail minimal et très léger pour créer un projet rapidement.

"Le but de Flask est de donner une bonne base de travail pour toute application. Le reste ne dépend que de vous ou d'extensions." Armin Ronacher

Flask a très rapidement pris son essor et s'est imposé comme un des frameworks les plus importants de la communauté Python. LinkedIn l'utilise en interne et l'API de Pinterest est basée sur ce framework. De nombreux autres sites à fort volume ont fait confiance à Flask.

Pourquoi est-il si populaire ? Car il est à la fois très puissant et très léger. Par exemple, il permet de créer une application web minimale en 7 lignes.

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "Hello world !"

if __name__ == "__main__":
    app.run()

Le code ci-dessous lance un serveur web disponible dans le port 5000. En bref, il affichera "Hello World" à l'adresse "localhost:5000". Vous ne me croyez pas ? Essayez !

En bref, Flask met à disposition les éléments suivants :

• gestion de cookies et sessions

• gestion des routes

• contrôleur

• serveur de développement

Flask ne fournit pas, par défaut, de nombreux éléments. Contrairement à Django, qui est un autre framework web programmé en Python, il ne met pas à disposition une interface d'administration ou un ORM. Il ne permet pas non plus de créer une structure de projet grâce à une commande. À l'inverse, il cherche à rester le plus minimal possible. Comme disent les Anglais : less is more !

Téléchargez notre projet exemple

Ce cours se concentre sur l'apprentissage de Flask uniquement. Nous verrons ensemble comment ajouter un peu d'intelligence à notre application, en générant automatiquement des images par exemple, mais cela restera accessoire. L'essentiel est que vous compreniez Flask en codant une véritable application !

C'est pourquoi je vous ai préparé les éléments sur lesquels nous allons travailler. Téléchargez le fichier en cliquant ici.

Le dossier contient :

• index.html : la page d'accueil du projet

• result.html : la page de résultat

• static : feuilles de style, polices, ...

• static/css/ : les feuilles de style

• static/fonts/ : les polices de caractère

• static/img/  : images du thème

• static/js/ : les scripts

• static/tmp : fichiers temporaires

Le thème CSS utilisé est "Freelancer". Il est libre de droits et se base sur Bootstrap.

Créez une application sur Facebook pour développeurs

Afin d'analyser le profil d'un utilisateur, nous avons besoin de connaître quelques informations. Nous devons pour cela lui demander de se connecter via Facebook et de nous autoriser l'accès à ces informations. Facebook a créé de nombreux produits pour faciliter l'usage du réseau social par des applications tierces : Facebook Login (connexion à une application par Facebook), Facebook Share (partage sur Facebook), Facebook Analytics (analyse du comportement des utilisateurs dans notre application)... Pour pouvoir les utiliser, vous devez auparavant vous déclarer en tant que développeur.

Rendez-vous sur ce lien puis cliquez sur Connexion. Connectez-vous avec votre compte Facebook professionnel.

La page "Mes apps" liste toutes les applications que vous avez créées. Cliquez sur Ajoutez une app.

Puis, indiquez le nom de l'application (il ne sera publié nulle part) et une adresse e-mail de contact. Dans la page qui s'affiche, copiez les chiffres se trouvant dans le champ  ID de l'app.

Ouvrez le fichier index.html et remplacez les chiffres dans les emplacements suivants :

...
window.fbAsyncInit = function() {
  FB.init({
    appId      : '{{ your_app_id }}' // collez l'id ici.
    ...
  });
};

(function(d, s, id) {
  ...
  js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.9&appId={{ your_app_id }}"; // collez l'id ici
}(document, 'script', 'facebook-jssdk'));

Faites de même dans le fichier result.html.

Revenez dans l'interface de Facebook for Developers. Cliquez sur Ajouter un produit, sélectionnez Facebook Login et Web SDK. C'est tout !

Organisation des chapitres du cours

Chaque chapitre, après avoir vu les notions, se terminera par un rappel du code ajouté. Vous pouvez consulter le code à tout moment sur le dépôt GitHub accessible à cette adresse.

En résumé

• Une application nécessite un serveur web pour traiter les requêtes HTTP ainsi que d’un service pour interagir avec une base de données 

• Pour créer une application web avec Python, on peut utiliser Flask :

  • Flask est un micro-framework Python, c’est à dire une boîte à outils contenant les fonctionnalités minimales pour développer une application web

• Flask gère notamment :

  • Les cookies

  • Les sessions

  • Les contrôleurs

  • Un serveur de développement

Maintenant que les bases sont posées, c’est parti pour l'installation de Flask !