Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 10:08, 26 Nov 2019 par MichelBuffa
0

Master 2 INTENSE Rabat 2019-2020

De $1

Version de 11:02, 23 Nov 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

  1. 1. Introduction
  2. 2. Séance 1 : rappels de JavaScript, introduction au framework VueJS
    1. 2.1. Partie 1 Live coding: rappels de JavaScript 
    2. 2.2. Travail à faire pour la séance 2 : installer Visual Studio Code, NodeJS, essayer d'installer MongoDB
  3. 3. Séance 2 : de JavaScript aux librairies aux frameworks
  4. 4. Séance XX : introduction à NodeJS et aux Web Services
      1. 4.1.1. Supports de cours
      2. 4.1.2. Création de WebServices avec NodeJS, aujourd'hui en GET

Introduction

Séance 1 : rappels de JavaScript, introduction au framework VueJS

Supports de cours :

Partie 1 Live coding: rappels de JavaScript 

On a vu en live coding des exemples présentant les bases de JavaScript et de son utilisation dans un navigateur. Ex: cliquer sur un bouton et changer le contenu et le style de la page. 

On a vu les bases de la POO en JavaScript (objets littéraux, classes), les tableaux, les itérateurs. On a fini en affichant une liste de restaurants dans un élément <table> HTML5, à l'aide de l'API JavaScript de cet élément (en utilisant insertRow(...)).

Travail à faire pour la séance 2 : installer Visual Studio Code, NodeJS, essayer d'installer MongoDB

1 - Installer Visual Studio Code

Vous pouvez utiliser d'autres environnements de travail mais celui-ci est vraiment très bien. Suivez les instructions de cette page : https://code.visualstudio.com/

2 - Installer NodeJS 

Allez sur le site https://nodejs.org et installez la version "recommended for most users" (12.13.1 au moment où j'écris...)

Si tout se passe bien, après l'installation, ouvrez une fenêtre de terminal et tapez la commande "node -v". Ca doit afficher la version de nodeJS que vous venez d'installer.

Vérifiez que vous avez bien:

  1. Une version de node >= 12 (commande à taper : "node -v)
  2. Une version de npm >= 6   (commande à taper : "npm -v")

Si jamais vous avez "command not found", ouvre une nouvelle fenêtre et re-testez. Si cela ne marche pas ajoutez le chemin d'installation des binaires de nodejs dans la variable d'environnement PATH, ouvrez une nouvelle fenêtre de terminal, re-testez.

3 - Installez MongoDB

Suivez le guide d'installation que je vous ai préparé. 

Séance 2 : de JavaScript aux librairies aux frameworks

Exemples faits en cours en live coding à Rabat (ajout/suppression de restaurants en pur JS): AjoutSuppressionRestaurantsPurJS.zip 

Deuxièmement on a joué avec VueJS. Pour récupérer la librairie en local (dans lib), téléchargez ce fichier : https://cdn.jsdelivr.net/npm/vue/dist/vue.js

Vous pouvez aussi directement mettre <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> au lieu de <script src="lib/vue.js"></script>

 

 

Exemples fait en cours à CASA (liste de restaurants, avec ajout et suppression):

  1. En pur JavaScript avec utilisation des APIs du DOM (append, createElement, removeChild, innerHTML) et de la selector API (document.querySelector...) : https://jsbin.com/kurovin/edit?html,js
    • Voir le chapitre 2 de mon Mooc "JavaScript Introduction" (gratuit) pour tout savoir sur la gestion des événements et sur l'API du DOM.
       
  2. Le même exemple mais en utilisant des librairies pour simplifier certaines parties (ici utilisation de lodash pour la génération d'ids, de jQuery pour simplifier l'utilisation du DOM): https://jsbin.com/tiyirud/1/edit?html,js,output
  3. Enfin, encore le même exemple mais avec l'utilisation du framework VueJS en mode déclaratif : https://jsbin.com/jiqowib/edit?html,js,output
  4. Un autre exemple mais qui utilise cette fois-ci des "components" VueJS 

Séance XX : introduction à NodeJS et aux Web Services

Création de WebServices avec NodeJS, aujourd'hui en GET

  • On a fait ensemble, en live coding, des routes dans le code serveur, et on les a testées avec un petit programme JavaScript et aussi avec POSTMAN.

    1. /api/restaurants : renvoie un tableau de 10 restaurants
       
    2. /api/restaurants?page=xxx&pagesize=yyy&nom=zzz : dans un premier temps montrer qu'on a bien reçu les paramètres (renvoyer une réponse JSON qui contient un message qui montre qu'on a bien reçu les params). Dans un second temps, essayer d'implémenter une fonctionnalité (ex: envoyer 2 restaurants et pas 10 si pagesize = 2)

      • Un peu plus difficile : donner des valeurs par defaut (page = 0, pagesize=10, nom="") si des paramètres ne sont pas présents dans l'URI
         
    3. /api/restaurants/1 : renvoie le restaurant d'id = 1, attention, ça doit marcher si on met un autre id

 

 
Powered by MindTouch Deki Open Source Edition v.8.08