L3 Miage 2022-2023 Introduction à JavaScript et aux API W3C standards

Exemples vus en classe :

• Exemple simple de dessin et d'animation dans un canvas : XXX
  • le chargement et le dessin d'une image, la gestion de la souris, comment récupérer sa position exacte avec getBoundingRect(), etc. Pour aller plus loin, voir les chapitres 2 et 3 du MOOC "HTML5 coding essentials and best practices",
  • Pour le chargement multiple d'images et de sons, le programme proposé dans le TP3 (à venir) propose un "asset loader" utilisant la librairie HowlerJS pour la gestion des sons et musiques. Vous trouverez l'exemple fait en live coding dans le repository github du cours, dans TP3/TP3_faitEnCours 
     

Exemples dont j'ai parlé en TP :

• Exemple simple d'animation et contrôle pour qu'un objet suive la souris : https://jsbin.com/jegamas/edit?js,output
   
• Petite évolution de l'exemple précédent : https://jsbin.com/voyowo/3/edit?js,output (montre un "monstre rectangulaire qui suit la souris. Animation à 60im/s avec request animation frame et "animation secondaire" à l'aide de setInterval pour qu'il change de couleur toutes les n secondes. Je montre aussi dans cet exemple comment on peut mesurer précisément le temps dans la boucle d'animation.
   
• Ici exemple de tests de collision, gestion du déplacement d'un objet, affichage d'obstacles : https://jsbin.com/gacezog/edit?output
   
• Ici un exemple de char qui tire (souris + barre espace et bouton 1 souris) :Projet zip avec un char qui tire et suit la souris. Dezipper, ouvrir le folder avec Visual Studio Code, ouvrir le fichier index.html et le lancer avec click droit/Open With Live Server (si vous n'avez pas cette option, installez l'extension VSCode "Live Server"). C'est un bon exemple de squelette de jeu minimal pour faire un jeu de chars. Montre les classes, les événements, le dessin et l'animation dans un canvas HTML5. Pour approfondir les fonctions de dessins dans le canvas, voir les chapitres 3 et 4 du MOOC HTML5 Coding Essentials and best practices.

Exemples de Snakes (à re-écrire avec des classes, ce serait génial d'avoir plusieurs serpents etc.)

• https://jsbin.com/mojape/3/<wbr/>edit?js,output
• https://jsbin.com/zokudaw/<wbr/>edit?output
• https://jsbin.com/bofimu/edit?<wbr/>js,output
• Variante d'un des précédents avec un "effet retard" https://jsbin.com/<wbr/>sipata/edit?html,css,js,output

Première partie :  utiliser fetch avec des données en JSON

Ces Web services consomment des données au format JSON, c'est assez courant, mais ce n'est pas la seule manière de faire. Dans une seconde partie nous verrons comment faire avec des données encodées avec l'API FormData.

L'API fetch est la manière standard la plus moderne pour utiliser des Web Services distants. Jusqu'à présent, nous avons vu comment récupérer des données, mais pas comment en envoyer, ou comment utiliser des services distants proposant l'insertion, modification, suppression de données.

Les bonnes pratiques lorsqu'on conçoit un Web Service permettant le CRUD sur les données (Création, Recherche, Update/mise à jour et Delete/suppression) consistent à implémenter ces opérations via une API fondée sur le protocole HTTP :

• On enverra une requête HTTP GET pour la recherche / téléchargement de données ;
• On enverra une requête HTTP POST pour insérer des données ;
• On enverra une requête HTTP UPDATE pour mettre à jour ces données ;
• On enverra une requête HTTP DELETE pour supprimer des données.

Nous avons vu jusqu'à présent de nombreux exemples de fetch effectuant des requêtes GET pour obtenir des données distantes à partir d'un URI.

fetch(URI).then(reponse => { ...});

Dans cette partie, nous allons voir comment utiliser les autres types de requêtes HTTP !

Nous utiliserons pour tester fetch avec les diverses requêtes HTTP, un des Web Service défini sur le site https://jsonplaceholder.typicode.com/, celui qui permet de manipuler des "todo" soit des "tâches à effectuer" comme "aller prendre le pain", "préparer le cours" etc. 

Voici l'API qui permet de manipuler les todo à distance, les URI sont classés par type de requête :

GET :

• ht  tps://jsonplaceholder.typicode.com/todos : renvoie la liste des todos disponibles sur le serveur sous la forme d'un tableau
   
• htt  ps://jsonplaceholder.typicode.com/todos/2 : renvoie le todo dont l'id est égale à 2 (on peut remplacer 2 par une quelconque valeur d'id valable)

POST :

• https://jsonplaceholder.typicode.com/todos : avec une requête POST, insère un nouveau todo.

PUT :

• https://jsonplaceholder.typicode.com/todos/2 : si on renvoie par une requête PUT l'objet dont l'id est égal à 2, les valeurs de ses autres attributs (title, completed, userId etc.) seront mises à jour.

DELETE :

• https://jsonplaceholder.typicode.com/todos/2 : Une requête DELETE sur cet URI supprimera le todo d'id égal à 2, s'il existe.

Seconde partie : utilisation de Web Services RESTFUL avec FormData

• Documentation sur les objets FormData 

Dans cette section du cours, nous allons voir comment utiliser un Web Service RESTFUL (qui permet de faire les opérations CRUD sur des données distantes -en l'occurrence des restaurants-) et en utilisant des objets FormData pour les requêtes http POST , PUT et DELETE.