Créer une application Vanilla JS (Todo List)

Dans ce TP, vous allez créer une Single Page Application (SPA) en Vanilla JS dans le but de découvrir différentes notions telles que les affichages dynamiques, la gestion des modules et du bundling, les appels HTTP et les promesses, le routage et bien sur les tests unitaires qui assureront la qualité et la non régression de vos codes.

Mettre en place le projet en local

Clonez ce dépôt où bon vous semble :

git clone https://github.com/liorchamla/amu-tp-vanilla-todo.git

Ouvrez le dossier dans votre éditeur de code favoris !

Travailler directement sur le navigateur

Plutôt que de cloner le dépôt, vous pouvez aussi travailler directement en ligne via Gitpod.

Pour cela il vous faudra forker le dépôt sur votre propre compte (bouton Fork en haut à droite de GitHub). Une fois sur la page du fork (la copie de ce dépôt sur votre propre compte), vous pourrez simplement ajouter gitpod.io/# juste devant l'URL du dépôt.

Par exemple, le lien suivant ouvrira ce dépôt dans Gitpod : https://gitpod.io/#https://github.com/liorchamla/amu-tp-vanilla-todo

Attention : le travail ne sera pas sauvegardé d'une session de travail à l'autre, vous devrez systématiquement commit et push vos modifications si vous espérez les retrouver ensuite !

Attention au départ !

Une fois que le projet est mis en place, vous pouvez tout simplement suivre le TP étape par étape :

• Installation des outils de développement
  • Initialiser la gestion de dépendances dans le projet
  • Installer le module bundler Webpack
  • Lancer l'application dans le navigateur
  • Vérification de l'outillage et des liens
  • Ce que vous avez appris
• Afficher une liste dynamique
  • But de l'exercice
  • Modéliser une liste de tâches dans le JS
  • Mettre en place un conteneur dans le HTML
  • Afficher les items du tableau dans le HTML
  • Vérifier la bonne marche de notre application
  • L'avantage du watch avec Wepback
  • Ce que vous avez appris
• Ajout d'une nouvelle tâche
  • But de l'exercice
  • Afficher un formulaire dans l'interface (HTML)
  • Ecouter un événement du HTML dans le Javascript
  • Ce que vous avez appris
• Appels HTTP et API REST
  • But de l'exercice :
  • Créer un projet sur Supabase :
  • Comprendre comment fonctionne l'API de Supabase
  • Afficher les tâches (Requêtes HTTP et Promesses)
    • Système de Promesses
    • Enchaînement de comportements
    • La fonction fetch() de Javascript
  • Ajouter une tâche dans la base de données
  • Passer les éléments à "fait" ou "pas fait"
  • Ce que vous avez appris
• Routing et affichage dynamique
  • But de l'exercice :
  • Mise en place et premiers tests
    • Premier test : la page d'accueil
    • Deuxième test : la future page de détails d'une tâche
  • Refactoring pour aller plus loin
  • Gestion dynamique des URLs
  • Page de détails d'une tâche
  • Ce que vous avez appris
• Tester son code avec Jest
  • But de l'exercice
  • Installation de Jest
  • Premier test avec Jest
  • Le problème du HTML dans nos tests
  • Aller plus loin et tester notre application
  • Ce que vous avez appris