Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 09:30, 15 Mar 2020 par MichelBuffa
0

MBDS Madagascar 2019-2020

De $1

  1. 1. Introduction
  2. 2. Jour 1: Single page webapps avec VueJS, bases de données synchronisées dans le cloud
    1. 2.1. Supports de cours
    2. 2.2. Partie 1 Live coding: de JavaScript aux librairies aux frameworks
    3. 2.3. Partie 2 : découverte de VueJS en mode CLI (command line interface)
  3. 3. Jour 2 : on utilise une librairie graphique ! (Vue Material) et intro à React
    1. 3.1. Partie 1 : utilisation de Vue-Material avec VueJS
    2. 3.2. Partie 2 : premiers pas avec React 
  4. 4. Supports de cours :
    1. 4.1. On peut faire du react dans JsBin/JsFiddle/CodePen, mais croyez-moi, juste pour de petits exemples !
    2. 4.2. Exercice à faire en vous aidant des exercices précédents:
    3. 4.3. Partie 3 : on continue avec React (intro au mode CLI)
      1. 4.3.1. Exercices avec un environnement "CLI"
    4. 4.4. Partie 4 : utilisation du router et de la bilbiothèque graphique Material UI
  5. 5.  Sujet du Mini Projet

Introduction

Dans ce cours nous ferons des rappels sur JavaScript et feront une introduction à VueJS et peut-être à React.

Avant tout chose :

  • Quel est votre niveau en JavaScript ?
  • Avez-vous utilisé NodeJS ?
  • Avez-vous utilisé VueJS, React ou Angular ?

Jour 1: Single page webapps avec VueJS, bases de données synchronisées dans le cloud

Supports de cours

Partie 1 Live coding: de JavaScript aux librairies aux frameworks

Exemples fait en cours (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/wocesuqaho/edit?js,output
  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/newepid/edit?js,output
  3. Enfin, encore le même exemple mais avec l'utilisation du framework VueJS en mode déclaratif : https://jsbin.com/powofij/edit?js,output
  4. Un autre exemple mais qui utilise cette fois-ci des "components" : https://jsbin.com/powofij/edit?html,css,output
  5. Autre exemple mais on va chercher des données distantes via une requête Ajax basée sur l'API fetch : https://jsbin.com/popuwut/edit?html,js,output

Partie 2 : découverte de VueJS en mode CLI (command line interface)

ETAPE 1 : installation de NodeJS (nécessaire pour développement CLI)

Allez sur le site https://nodejs.org et installez la version "recommended for most users".

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 >= 10.16 (commande à taper : "node -v)
  2. Une version de npm >= 6.11   (commande à taper : "npm -v")

Etape 2 : Création d'une application simple en mode CLI, utilisant la base de données synchronisée Google Firestore

Travail à faire :

  1. Suivre ce tutorial 

  2. En vous aidant de ce petit exemple jsbin qui consomme des données depuis une API REST à propos de groupes de musique rock, modifiez votre programme VueJS pour qu'il affiche les membres de Metallica. Avez-vous pensé à faire un Composant GroupeRock ?

    • CORRECTION avec GroupeRock.vue : télécharger cette archive, dezipper, aller dans le répertoire et faites "npm install",  puis "npm run dev"

Jour 2 : on utilise une librairie graphique ! (Vue Material) et intro à React

Partie 1 : utilisation de Vue-Material avec VueJS

On va suivre le "Getting started" du site officiel de Vue-Material (https://vuematerial.io/) et on va utiliser quelques composants, notamment les "datatables"...

Ici exemple fait en classe dans cette archive: dezipper, faire "npm install" et "npm run dev"'

Partie 2 : premiers pas avec React 

Supports de cours :

On peut faire du react dans JsBin/JsFiddle/CodePen, mais croyez-moi, juste pour de petits exemples !

Exercice à faire en vous aidant des exercices précédents:

Pour vous donner une idée du résultat attendu,voici l'équivalent en VueJS: http://jsbin.com/guwetoy/1/edit?html,output

Je conseille de partir de cet exemple React: le composant en classe ES6 

En vous aidant de l'exemple fait en classe en live coding, voud devrez faire incrémentalement, en testant après chaque étape :

  1. Créez un <div> et affichez dedans un composant Root avec React (l'App des exemples)
     
  2. Affichez un tableau de hobbies dans ce <div> (foot, tennis, jeux video, etc.) sous la forme d'une liste. Chaque hobby sera un <li>. Vous fournirez des hobbies par défaut.
     
  3. Ajoutez un bouton 'Nouveau Hobby' et un champ input pour saisir le nom du hobbie à rajouter. La liste doit se mettre à jour.
     
  4. Rendez les hobbies clickables pour qu'on puisse les supprimer
     
  5. Un message <p>Hobby supprimé !</p> devra apparaitre lorsqu'un hobby est supprimé
     
  6. Ajoutez un compteur de hobbies (<p>Hobbies: 4</p>) au-dessus de la liste des hobbies, qui indiquera le nombre de hobbies dans la liste.
     
  7. Vous changerez les styles CSS des éléments de la liste pour qu'ils s'affichent en rouge et vert à chaque ligne, en alternance. Vous utiliserez aussi des classes CSS dynamiques pour afficher le compteur en rouge si le nombre de hobbies est supérieur à trois, en vert sinon. 
     
  8. Chaque <li>, chaque hobby, sera maintenant dans un composant <Hobby/> 

ICI CORRRECTION "classique" : https://codepen.io/w3devcampus/pen/xxGOPXO?editors=0010

ICI UNE CORRECTION AVANCEE (qui utilise la "destructuration" et les arrow functions en masse): https://codepen.io/w3devcampus/pen/xxKeJZW

Partie 3 : on continue avec React (intro au mode CLI)

Exercices avec un environnement "CLI"

Si on va voir la page de facebook sur "how to start with React", il y a un chapitre qui concerne le mode "CLI": https://reactjs.org/docs/add-react-to-a-new-app.html

  1. Vous devez avoir nodeJS correctement installé (node, npm, etc, tout ceci doit fonctionner...)
     
  2. Installez l'extension Google Chrome "React Developer Tools" (https://chrome.google.com/webstore/d...jfkapdkoienihi), elle existe aussi pour Firefox.
     
  3. Ouvrir la ligne de commande et exécuter la commande "npm install -g create-react-app",
    • Pour vérifier que ça fonctionne, créez un autre répertoire nommé "react_cli" et cd dedans,
    • Executez "create-react-app hello-world" (ça prend du temps, quelques minutes)...
    • Allez dans le répertoire créé (cd hello-world), et faites "npm install" (là aussi, quelques minutes)
    • Exécutez le programme en tapant "npm start", ça doit ouvrir automatiquement le browser sur le port 3000 et afficher une page avec le logo React qui tourne.
    • Editez le code du fichier src/App.js, changez le texte et sauvez -> la page Web de l'application doit se rafraichir automatiquement.
       
  4. Maintenant on va étudier le code, regardez les fichiers html, js, les configs etc.
     
  5. Essayez de modifier la partie "render" de App.js... hmmm ok. Bon, par exemple, essayer de faire un simple composant <Username name="toto"/> qu'on va mettre dans un sous répertoire "components" dans les sources, il va simplement afficher un nom passé en attribut/props dans un paragraphe en couleur. Vous ajouterez dans <App/> Plusieurs instances de ce composant.

Exercice 1: refaire dans le projet les hobbies en mode CLI !

Exercice 2 : compléter le rendu des photos distantes dans le composant Photos.js

Correction ici : récupérer cette archive, "npm install" puis "npm run start"

Partie 4 : utilisation du router et de la bilbiothèque graphique Material UI

N'oubliez pas : vous avez un livre dans les supports de cours, sur Material UI !

Support de cours :

A faire:

Le reste s'est passé en Live Coding. Ici une correction utilisant le router, et une table MaterialUI pour afficher les Hobbies: dans cette archive. Faites "npm install" puis "npm run start".

 Sujet du Mini Projet

Modalités

  • Date de rendu : Dimanche 22 Mars minuit.
  • A faire par groupe de 1 ou 2.
  • Le projet devra être sur github
  • Le projet devra être hébergé quelque part. Vous devrez faire un "npm run build" pour avoir une version "à publier" et non une version "de developpement".

Sujet : visualisation de données sur le groupe Metallica: 

  • A FAIRE OBLIGATOIRE: Afficher un maximum d'informations sur le groupe, ses membres, ses disques, etc. Vous prendrez comme modèle la page affichée sur le site, tout en gardant la liberté de présenter les choses différemment : https://wasabi.i3s.unice.fr/#/search/artist/Metallica,

  • Optionnellement, si vous êtes forts, faire une version qui au lieu d'utiliser la description locale de Metallica (dans le fichier Metallica.js du projet exemple donné un peu plus loin), utilise les Web Services proposés par : https://wasabi.i3s.unice.fr/apidoc/ pour avoir un champs de recherche par groupe, qui récupère les données en Ajax (via fetch) du groupe recherché, et affiche les données de ce groupe. Essayez de chercher "Metallica" avec https://wasabi.i3s.unice.fr/ et ouvrez le debugger sur l'onglet "network", avec le filtre "XhR et Fetch" activé, vous verrez l'URL de l'API utilisé.

Vous pourre faire le projet en VueJS compilé, ou en React. Je donne ici un projet React qui vous servira de point de départ. Il contient un fichier src/data/metallica.js qui exporte les données sur Metallica. Il contient aussi deux composants fonctionnels GroupeRock.js et MembreGroupeRock.js qui affichent dans une table Material UI les membres du groupe.

Vous partirez de cet exemple pour faire un joli affichage, à l'aide de Material UI, des données de Metallica (ou d'autres groupes si vous faites la partie optionelle du projet).

 

 

 
Powered by MindTouch Deki Open Source Edition v.8.08