Une Todo List avec Bottle – étape 1

Aujourd’hui, je vais expliquer une manière simple et élégante de créer notre proper application web de todolist. A l’aide de Python, Bottle, YAML, Html, AJAX, jQuery, Bootstrap … nous allons pouvoir deployer notre proper todolist personnalisable sur le web !

Ce tuto est basé sur d’autres tutos trouvés sur le net (et particulièrement celui-ci), avec toutefois les differences majeures suivantes:

  • YAML est choisi à la place de SQL pour la persistence des données côté serveur
  • AJAX est choisi pour mettre à jour la page web dynamiquement plutôt que de naviguer entre plusieurs pages statiques
  • Bootstrap est introduit, de manière à proposer un joli visuel à notre appli web sans effort

Le résultat est une jolie appli web que vous êtes invités à cloner depuis GitHub pour la personnaliser et la déployer sur PythonAnywhere !

ziTodoList

Afficher la todolist côté client

La première étape est de définir une base de donnée côté client. Je choisis le langage YAML. Il est très concis, et de plus Python dispose d’un parser très facile d’utilisation, transformant en quelques commandes notre fichier YAML en une suite d’objet Python facile à manipuler. Voici notre « base de données »:

Une fois chargée grâce à Python, cela nous retourne un dictionnaire, où les valeurs sont des dictionnaires eux même avec deux clefs : titre (title) et description. Pour effectuer cette étape, on utilise le code python suivant (il manque les imports et d’autres variables. Pour l’exemple complet, voir ici:

Maintenant, nous avons à définir un template HTML que nous allons remplir avec notre base de donnée et afficher grâce à Bottle. Voici le template:

Tandis que ce code HTML est presque entièrement statique, les lignes mises en évidence utilisent la syntaxe offerte par Bottle pour boucler directement sur nos objets python, directement dans le template. De fait, donner directement au template le dictionnaire retourné par le parsing de notre base YAML va permettre de construire une page HTML avec le contenu de notre base de donnée mise en forme. C’est le travail du code suivant. Il ne restera plus qu’à la rendre disponible sur le serveur offert par Bottle pour y accéder côté client:

Le decorateur @route nous permet de spécifier l’adresse URL à laquelle accéder à notre page (ici <root_url>/todolist). Pour remplir le template, il suffit de charger le template et de lui donner toutes les variables qu’il utilise (ici uniquement task_list).

On teste !

On rajoute un launcher séparé pour permettre un déploiement web local grâce à Bottle, et on garde notre script principal compatible avec le mode de lancement WSGI disponible sur PythonAnywhere. Voici le code complet. A dézipper n’importe où et à lancer avec la commande python launcher.py

Maintenant, notre application de todolist est accessible à l’adresse suivante : http://localhost:8080/todolist.

Le contenu affiché dans le navigateur reflète exactement notre database avec une (très) légère mise en forme:

todolist_step1Le visuel n’est pas satisfaisant. Dans la prochaine étape, on verra comment utiliser Bootstrap pour avoir une apparence plus moderne !


Illustration by A.Davey from Portland, Oregon, EE UU (Detail – Cuneiform Inscription) [CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *