M1 Miage 2021-2022 Technologies Web

Pages récentes

Introduction

Ce cours est une introduction aux frameworks JavaScript front-end, à NodeJS, aux outils de build, également aux bases de données mobiles / NoSQL.

Nous commenceront la découverte des frameworks Web front-end avec VueJS, qui est le framework ayant la courbe d'apprentissage la plus simple. C'est aussi le préféré des développeurs (à défaut d'être le plus utilisé).

Vous aurez quatre séances de TP encadrées et deux séances pour travailler sur le mini-projet à rendre.

Séance 1

Supports de cours (utiles pendant toutes les séance

Transparents sur l'état de l'écosystème JavaScript utilisés en cours.
OBLIGATOIRE : récupérer ici "Vue Essential Cheat Sheet"(éventuellement d'autres, celle sur la migration Vue2 vers Vue3 par exemple). Une "cheat sheet" est une page recto verso en PDF avec tous les trucs importants à savoir sur VueJS, dans un format compact.
Vidéos : présentation générale (bouton vert sur site officiel https://vuejs.org/), cours vidéo pour débuter sur https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/ CE TUTORIAL EXTREMEMENT BIEN FAIT, JE RECOMMANDE A TOUT LE MONDE DE LE SUIVRE AU MOINS UNE FOIS !
- Avancé : tutorial sur VueX (https://www.youtube.com/watch?v=5lVQgZzLMHc)
Support vivant : les exemples faits en direct pendant le cours (voir plus loin)
Transparents pour une introduction rapide et incomplète: https://posva.net/slides/vue/ et https://slides.com/akryum/vue-mixit-2018/fullscreen#/ et https://slides.maxpou.fr/vuejs-training
Livre très complet : le livre ci-dessous est optionnel, il contient de nombreuses informations sur VueJS que nous n'allons pas avoir le temps de voir pendant le cours.

Live coding: exemples codés pendant le cours : de JavaScript aux librairies aux frameworks

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

En pur JavaScript avec utilisation des APIs du DOM (append, createElement, removeChild, innerHTML) et de la sector API (document.querySelector...) : https://jsbin.com/jahunetomu/edit?js,output (ici version de l'an dernier) https://jsbin.com/pemaric/edit?html,js,output
- Voir le chapitre 2 de mon Mooc "JavaScript Introduction" (gratuit) : https://www.edx.org/course/javascript-introduction
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
- Site web de lodash : https://lodash.com/
- Site web de jQuery : http://jquery.com/
Enfin, encore le même exemple mais avec l'utilisation du framework VueJS en mode déclaratif : https://jsbin.com/jiqowib/10/edit?html,js,output et ici avec l'utilisation d'un component : https://jsbin.com/jiqowib/edit?html,js,output
- Site web officiel de VueJS: https://vuejs.org/
Un autre exemple mais qui utilise cette fois-ci des "components" : https://jsbin.com/guwetoy/edit?html,js,output

TP 1: premiers pas avec VueJS, découverte du mode CLI et des outils de build

CLI = Command Line Interface. Vous allez énormément utiliser la ligne de commande si vous faites du développement Web Moderne !

Nous allons commencer par installer les outils nécessaires...

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:

Une version de node >= 14.0 (commande à taper : "node -v)
Une version de npm >= 6.14 (commande à taper : "npm -v")

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

Travail à faire :

suivre ce tutorial , choisissez npm comme outil d'installation des modules lorsque vous aurez le choix yarn/npm
Essayez de modifier ce tutorial pour faire la création et la modification non pas "d'expenses" mais d'une liste de restaurants/cuisines, on pourra rajouter le prix moyen du menu aux propriétés des restaurants. Je vous conseille de travailler sur une nouvelle collection "restaurants" dans FireStore.

Pour ceux qui vont vite ou qui ont déjà installé MongoDB :

Suivre ce tuto (chat multi room avec Google Firebase - appelée "Realtime Database", moins puissante que Firecloud mais plus légère -mieux adaptée pour faire un chat)
Une fois que l'appli fonctionne, essayez de comprendre dans le détail comment elle fonctionne.

3 - installer MongoDB sur votre machine

Suivez les installations propres à votre système d'exploitation situées sur cette page du site officiel. Ne choisissez pas l'installation manuelle, choisissez "community edition".

Je ne recommande pas, dans un premier temps, d'installer MongoDB en tant que service, ne cochez pas la case.

Vous pouvez en revanche installer l'outil d'administration Atlas.

4 - Installer Mongosh, la ligne de commande mongo (le mongo shell)

5 - Lancer mongoDB en ligne de commande

Vous devez suivre toutes ces instructions :

Si vous suivez les instructions de cette page :

Vous avez ouvert une fenêtre DOS en mode administrateur,
Vous avez créé un dossier "c:\data\db" qui va contenir toutes vos bases de données,
Vous avez lancé le daemon MongoDB avec la commande : "C:\Program Files\MongoDB\Server\5.0\bin\mongod.exe" --dbpath="c:\data\db"

Si le daemon mongoDB ne se lance pas, regardez les erreurs.

AMELIORATION FORTEMENT CONSEILLEE : ajouter le chemin C:\Program Files\MongoDB\Server\5.0\bin dans la variable d'environnement PATH

Ensuite, fermez la fenêtre DOS, ouvrez-en une nouvelle et exécutez juste la commande "mongod", cela devrait fonctionner !

6 - Créer et peupler une collection par défaut (avec un dataset issu du tutorial MongoDB officiel)

ETAPE 1 : Vous allez devoir installer encore un truc: les "MongoDB Tools" , cela va vous permettre d'utiliser notamment la commande pour importer des données dans une base de données (en la créant à la volée si nécessaire)

Vous allez récupérer une archive .zip, dézippez-là puis déplacez le contenu du dossier bin (qui contient des .exe) dans le dossier bin de votre installation MongoDB:

Maintenant, de nouvelles commandes sont disponibles dans votre terminal, notamment la commande mongoimport qui va nous être utile.

ETAPE 2 : ajouter dans la base "test" une collection de restaurants

Récupérez donc ce fichier : primer-dataset.json. Vous allez devoir récupérer le fichier primer-dataset.json (assez gros, attention, ne pas faire copier/coller), et exécuter la commande suivante, qui créer une bd "test" et ajoute dedans la collection "restaurants" :
- ```
mongoimport --db test --collection restaurants --drop --file primer-dataset.json
```

7 - Installer un outil d'administration sympa

Je vous recommande fortement MongoChef, un produit commercial mais gratuit pour utilisation non commerciale. Le télécharger sur: https://studio3t.com/

8 - Ouvrir 3T STudio et voir la collection que l'on vient d'importer

S'assurer que MongoDB tourne (mongod doit être lancé, ou bien vous devez avoir installé MongoDB en service)
Lancer l'application 3T Studio, connectez-vous sur MongoDB. Les valeurs par défaut doivent être Ok, normalement.
Ouvrir la collection "restaurants" dans la base "test"

Quelques screenshots:

TRAVAIL A FAIRE POUR LA SEMAINE PROCHAINE

Terminer l'installation de nodeJS, MongoDB.
allez voir les sites Web des librairies graphiques pour VueJS sur le site https://risingstars.js.org Plus tard vous aurez à jouer avec alors c'est le moment ! :-)