This project is maintained by aurelient
Répondre au formulaire en parallèle de la réalisation du TP. Il est simple et peut être réalisé dans le temps du TP, il est à remplir au plus tard à minuit.
Nous allons construire une application de conseil en mobilité (comme Citymapper) en utilisant Vue.js et l’API de navitia.io
Cette application sera une Single Page Application (SPA), développée principalement côté client, avec un serveur très léger. Client et serveur seront codés en JavaScript.
Nous conseillons Webstorm comme IDE (vous pouvez demander une clé étudiant), ou un éditeur de code avancé (Emacs, Atom, Visual Studio Code, Vim…)
Nous utiliserons intensivement npm, le gestionnaire de paquet pour JavaScript. Installez nodejs pour avoir npm sur votre machine.
Nous utiliserons Webpack (plutôt que Gulp, Grunt, ou browswerify) pour gérer le processus de build des projets de l’UE.
Les logiciels nécessaires sur ce TP et les suivants sont ceux présentés dans le CM stack JS. Ils sont pré-installés sur des VMs que nous pouvons instancier à la demande. Ces machines ne sont accessibles que depuis l’intérieur de l’université.
Pour utiliser ces VMs, le plus simple est :
Pour ce premier TP nous allons créer un projet Vue.js simple servi par un serveur Nodejs et le framework simple Express.
Répondre au formulaire en parallèle de la réalisation du TP.
Commencez par créer un projet (vide) sur la forge, et clonez le sur votre machine.
Créez un fichier README.md décrivant le projet et le processus de build, ainsi qu’un fichier .gitignore :
.DS_Store
node_modules/
dist/
*.log
# Fichiers de votre IDE
Installez globalement le Command Line Interface (CLI) de Vue vue-cli qui nous sera utile pour créer des projets Vuejs :
npm install -g vue-cli
Nous pouvons maintenant créer un projet Vue.js (= partie client) simple qui s’appuiera sur l’outil de build webpack :
vue init webpack-simple NOM_PARTIE_CLIENT
Suivez les instructions de vue-cli, en vous plaçant dans le répertoire client projet pour lancer le projet.
La commande npm install va installer dans le dossier node_modules/ les dépendances définies dans le fichier package.json à votre projet Vue.
La commande npm run dev va lancer la commande dev telle que définie dans package.json.
Tester, et verser les changements sur la forge.
À la racine du projet créer un dossier serveur.
Se placer dans le dossier et créer un fichier de configuration pour nodejs en tapant npm init, suivre les instructions.
Nous allons maintenant rajouter la dépendance à Express dans le partie serveur. Pour cela, exécuter :
npm install --save express
Observez les changements dans package.json, la dépendance a été rajoutée avec le numéro de version actuel.
Rajouter une dépendance à eslint et à nodemon.
Rajouter une section devDependencies dans le fichier package.json si elle n’existe pas encore, et y déplacer les dépendances qui ne sont utiles que pour le développement :
"devDependencies": {
à compléter
}
Éditer un fichier principal (nous l’appelerons app.js par la suite du sujet) de votre application côté serveur :
const express = require('express')
const app = express()
app.get('/', (req, res) => res.send('Hello World!'))
app.listen(3000, () => console.log('Example app listening on port 3000!'))
Lancer l’application avec node app.js (ou tout autre nom de votre fichier js).
Dans la partie script rajouter un racourci pour lancer le projet plus facilement :
"scripts": {
"start": "node app.js"
},
Compléter la partie script pour intégrer nodemon et eslint :
"scripts": {
"start": "node app.js",
"nodemon": "nodemon app.js --exec 'npm run lint && node'",
"lint": "eslint *.js"
},
Valider la syntaxe de votre code avec eslint (effectuer les configurations nécessaires), et corriger le code au besoin :
npm run lint
Quand seule une erreur liée à l’utilisation de la console reste, rajouter une exception en haut de votre fichier :
/*eslint no-console: ["error", { allow: ["log", "warn", "error"] }] */
Lancer maintenant le projet avec nodemon : tout changement dans app.js sera automatiquement validé via eslint, puis le serveur rechargé.
npm run nodemon
Tester et commiter votre code.
On va maintenant servir les fichiers client depuis notre serveur express.
Dans app.js nous allons maintenant servir le fichier index.html créé par vuejs :
app.get("/", (req,res) => {
res.sendFile(path.join(__dirname+"/../client/index.html"))
})
Charger la page dans le navigateur et ouvrir la console du navigateur. Qu’est ce qui chargé ? Et qu’est ce qui ne l’est pas ?
On va maintenant gérer les fichiers manquant. Ces derniers sont statiques (il ne changent pas). On peut donc faire un lien “dur” vers le dossier qui les contient.
app.use("/dist", express.static(path.join(__dirname, "/../client/dist")))
Tester.
Si la page ne s’affiche toujours pas, vérifié qu’un dossier dist est bien présent côté client. Ce dossier est créé lorsque que l’on lance un bundling webpack pour la production. Effectuer cette opération le cas échéant.
Tester et commiter votre code.
Installer l’addon vue-devtools dans votre navigateur.
Tester sur la page suivante : http://todomvc.com/examples/vue/
Créer un compte chez navitia.io pour tester leur API depuis leur plateforme, puis avec Postman.
Tester et commiter votre code.
Configurer une C.I. dans la forge (GitLab), pour déployer votre projet sur une VM ou sur Heroku. Si nous avons le temps, nous reviendrons là dessus lors des prochain TPs.
Le formulaire est à terminer pour minuit. Au prochain TP nous mettrons en place la même stack mais pour le “vrai” projet qui sera développé tout au long des TP de l’UE.