Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 20:43, 25 Jan 2024 par MichelBuffa
0
Accueil > Intranet Michel Buffa > L3 Miage 2023-2024 Introduction à JavaScript et aux API W3C standards

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

De $1

  1. 1. Séance 1 : introduction à JavaScript, rappels, outils, Moocs de référence
    1. 1.1. Supports de cours
  2. 2. Séance 2: préparation du TP, drag'n'drop, initiation au dessin et à l'animation à 60 images/seconde dans un canvas HTML etc.
  3. 3. TP1 - Ecriture d'un jeu de type Mach3 à l'aide du DOM
  4. 4. Séance 3: animation dans un canvas, Programmation Orientée Objet en JavaScript
  5. 5. TP2 : On continue le TP1
  6. 6. TP3 : écriture d'un squelette de jeu à l'aide d'un canvas HTML5, animation, détection de collisions etc.
  7. 7. Séance 4 : persistence côté client (LocalStorage), requêtes Ajax, Introduction à NodeJS et aux Web Services
    1. 7.1. Vidéo du cours : https://youtu.be/Vp0eGRurXXg 
    2. 7.2. Persistence simple côté client (ex: sauvegarder les scores dans un espace propre à votre jeu, côté navigateur)
    3. 7.3. Requêtes Ajax GET, promesses, async/await
    4. 7.4. Utilisation de Web Services avec pour le CRUD (requêtes HTTP POST/PUT/DELETE avec fetch)
      1. 7.4.1. Première partie :  utiliser fetch avec des données en JSON
        1. 7.4.1.1. Envoi d'une requête POST (insertion)
        2. 7.4.1.2. Envoi d'une requête PUT (modification)
        3. 7.4.1.3. Envoi d'une requête DELETE (suppression)
      2. 7.4.2. Seconde partie : utilisation de Web Services RESTFUL avec FormData
        1. 7.4.2.1. Installation locale des Web Services
        2. 7.4.2.2. Instructions d'installation d'un exemple de serveur implémentant des Web Services consommant des FormData / formulaires multipart

Séance 1 : introduction à JavaScript, rappels, outils, Moocs de référence

Supports de cours

Live coding : environnement de développement, rappel sur les fonctions, les objets, les classes, intro aux modules, le DOM, les événements... Voir le repo GutHub COURS/ExempleProjetJS

TRAVAIL A FAIRE POUR LA PROCHAINE SEANCE :

  1. Vous inscrire au MOOC JavaScript Introduction,
  2. Regarder les exemples du module 2 (adding interactivity to web pages), sur les événements, le DOM, etc.
  3. Pour les non alternants : vous inscrire au concours games on Web 2024 

Séance 2: préparation du TP, drag'n'drop, initiation au dessin et à l'animation à 60 images/seconde dans un canvas HTML etc.

Support de cours :

TP1 - Ecriture d'un jeu de type Mach3 à l'aide du DOM

  • Sujet du TP : dans cette première version on va commencer à coder un jeu à la Candy Crush / Mach 3, en utilisant des divs pour représenter la grille et les cases. On utilisera l'API standard du DOM pour la gestion des événements et pour implémenter le drag'n'drop.

Séance 3: animation dans un canvas, Programmation Orientée Objet en JavaScript

Supports de cours dans les MOOCs :

Utilisation d'un canvas HTML5

  1. Comprendre l'utilisation du canvas HTML5 : simple dessin
  2. Animation à 60 images secondes avec requestAnimationFrame
  3. Animer plusieurs objets,
  4. Déclencher des animations (et les arrêter) à des fréquences < 60 images/s,
  5. Avancé : gérer l'animation en fonction du temps,
  6. Animer un joueur et gérer les événements clavier,
  7. Gérer les événements souris,
  8. Détecter les collisions entre objets et obstacles,
  9. Utiliser des classes, faire un petit moteur de jeu
  10. Travailler avec des images ou avec des sprites.

Exemples vus en classe :

  • Exemple basique JsBin en ligne montrant une animation dans un canvas, 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é en TP, sur lequel j'ai fait du live coding, 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.)

TP2 : On continue le TP1

 Le TP1 étant assez long, vous le continuerez dans cette séance, mais cette fois-ci vous essaierez d'implémenter les chutes. Je vous propose un algorithme que vous testerez initialement uniquement sur une seule colonne, puis que vous étendrez à toutes :

  • Prenons la colonne 0 (la plus à gauche), positionnez à la souris un groupe de 3 cookies identique verticalement.
  • Cliquez sur un bouton que vous aurez ajouté pour tester, qui appellela la fonction chuteColonne(0);
  • Ecrivez la fonction chuteColonne(colonne) qui fera ceci
    1. On part du bas de la colonne et on remonte jusqu'à trouver le premier trou. Si on en trouve pas, la fonction fais return;
    2. Si on est sur un trou, on mémorise l'index et on remonte jusqu'à trouver soit un cookie, soit le haut de l'écran, on mémorise l'index de fin, et on appelle une autre fonction compacteColonne(indexDebut, indexFin) qui va faire déplacer le contenu de la colonne au-dessus de indexFin pour qu'il démarre à indexDebut (en gros, on descend le haut de la colonne pour compacter le trou). Il peut y avoir un autre trou au-dessus, mais on le descend aussi.
    3. On repart de indexDebut et on remonte jusqu'à trouver un trou ou le haut de l'écran. Attention, les cases laissées vacantes en haut de la colonne, s'il y a eu une "descente", doivent être remplis par des cookies aléatoires. On ne teste pas s'ils forment à leur tour une série de 3.
    4. Si on trouve encore des trous on repart en 2.
    5. Une fois terminé, on remplit les éventuels trous entre le haut de l'écran et le premier cookie avec des cookies aléatoires. On ne teste pas s'ils forment un groupe.

Une fois que vous aurez testé cela sur plusieurs configurations (groupe de trois en haut de l'écran, plusieurs groupes de trois, etc.), et donc que vous aurez validé votre algorithme de compactage sur une colonne, vous n'aurez plus qu'à appeler ce traitement sur toutes les colonnes.

Les chutes ayant sans doute créé des alignements, vous redetecterez les alignements, recompacterez les colonnes, re-detecterez les alignements, etc. jusqu'à ce qu'il n'y ait plus d'alignement.

Pensez à un score chaque fois que des groupes sont détectés...

TP3 : écriture d'un squelette de jeu à l'aide d'un canvas HTML5, animation, détection de collisions etc.

Séance 4 : persistence côté client (LocalStorage), requêtes Ajax, Introduction à NodeJS et aux Web Services

Vidéo du cours : https://youtu.be/Vp0eGRurXXg 

Persistence simple côté client (ex: sauvegarder les scores dans un espace propre à votre jeu, côté navigateur)

Requêtes Ajax GET, promesses, async/await

  • Premiers exemple de requêtes GET sur des Web Services existants (on utilise pour ces premiers exemples le site https://jsonplaceholder.typicode.com/ 

    • Attention: pour les requêtes GET ce site est très bien, pour comprendre les bonnes pratiques de nommage des Web Services, il est très bien, mais pour les reqêtes HTTP POST, PUT et DELETE il s'appuie sur un format de données un peu ancien. On aura tendance à utiliser une autre méthode à base d'objets JavaScript FormData (qui sont aussi associés aux formulaires dits "multipart" qui sont la manière la plus moderne d'envoyer des données)
       
  • Exemple simple de récupération de données JSON sur un Web service à l'aide de l'API fetch : https://jsbin.com/neworos/edit?js,console 
  • Avec affichage dans une table HTML (utilisation du DOM et de l'API des tables HTM5) : https://codepen.io/w3devcampus/pen/BaxGMVP
  • Autre exemple avec une API un peu plus compliquée (et on voit en live coding comment débugguer le format des données) : https://codepen.io/w3devcampus/pen/jOxQRGG 
  • Exemple de récupération de fichiers binaires audio (conversion de la réponse en ArrayBuffer) : https://codepen.io/w3devcampus/pen/YzLRBRr 
  • Exemple d'envoi de plusieurs requêtes en parallèle avec Promise.all et fetch : https://codepen.io/w3devcampus/pen/gOzQyKw 

 Pour ceux qui veulent aller plus loin, voir mes cours sur les Promesses de JavaScript et sur fetch/async/await 

Utilisation de Web Services avec pour le CRUD (requêtes HTTP POST/PUT/DELETE avec fetch)

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 :

POST :

PUT :

DELETE :

Envoi d'une requête POST (insertion)

Note : le serveur distant que nous utilisons ne va pas réellement ajouter de données, mais il renvoie une réponse comme si cela avait été réellement effectué.

Explications : cette fois-ci nous avons passé deux paramètres supplémentaires lors de l'appel de fetch

  1. Un objet contenant deux propriétés : method et body. La première correspond à la méthode HTTP utilisée (ici POST) et la seconde correspond au "corps" de la requête, c'est-à-dire aux données à envoyer proprement dites.
  2. Un en-tête HTTP headers indiquant au serveur distant que le format des données envoyées par le client est JSON (ligne 11-13)
Envoi d'une requête PUT (modification)

Dans cet exemple, qui est très proche du précédent, on ne change que la valeur de la propriété method du second paramètre d'appel de fetch, et nous nous assurons que l'id du todo envoyé, passé dans la propriété body de ce même objet, est bien valide. Dans l'exemple, nous modifions le todo qui a un id égal à 1. Bien entendu, l'URI du Web Service n'est plus le même, on utilise cette fois-ci : https://jsonplaceholder.typicode.com/todos/1

Envoi d'une requête DELETE (suppression)

On va supprimer le todo dont l'id est égal à 1.

Cette fois-ci, pas besoin d'envoyer de body, ni de préciser qu'on manipule du JSON avec un header. On envoie juste une requête DELETE sur le Web Service suivant : https://jsonplaceholder.typicode.com/todos/1

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.

Installation locale des Web Services

Pour tester les exercices de ce chapitre, vous allez devoir installer localement sur votre machine, un serveur NodeJS implémentant les Web Services dont nous aurons besoin.

NodeJS et Express : transparents de présentation de NodeJSet transparents de présentation de Express

Instructions d'installation d'un exemple de serveur implémentant des Web Services consommant des FormData / formulaires multipart
  1. Installez NodeJS : à installer depuis le site officiel https://nodejs.org, prendre la version stable "Recommended for Most Users". Suivez ensuite les instructions d'installation. Une fois nodeJS installé, normalement si vous tapez node --version dans une fenêtre de terminal, ça devrait afficher la version courante. 
  2. Récupérez cette archive : serveurWebServicesRESTFUL.zip et dézippez-la quelque part. Cela doit créer un dossier intitulé serveurWebServicesRESTFUL.
  3. En mode terminal, allez dans ce dossier et exécutez la commande suivante : npm install. Ceci va télécharger les modules nécessaires à l'application que vous allez exécuter.
  4. Démarrez le serveur : exécutez la commande suivante : node serverCrudAvecFausseBD.js
  5. Ouvrez votre navigateur sur l'URL indiqué après le lancement. Par défaut, cela devrait être http://localhost:8080

Le reste se passe en live coding et explications données par le professeur. Voir la vidéo du cours.

 

 

Mots clés:
Attacher fichier ou image
Fichiers (0)
 
Images (0)
 
Commentaires (0)
Vous devez être connecté pour poster un commentaire.

 
Powered by MindTouch Deki Open Source Edition v.8.08