M1IF13 - 2016-2017
Ce TP durera 5 séances. Vous serez notés sur l'avancement semaine après semaine. Créez un projet M1IF13-TP1 sur la forge et ajoutez-y votre binôme et vos encadrants.
Comprendre les notions sous-jacentes aux premiers cours :
Les logiciels nécessaires sur ce TP 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 :
ssh login@192.168.74.XXX
Vous partirez de l'application située ici (sur la forge). Vous pouvez tester cette application pour voir ce qu'elle doit donner. Cette application est un gestionnaire d'annuaires de sites Web très basique, que vous développerez tout au long de ce TP.
...Plus tout ce que vous trouverez par vous-mêmes.
Dans cette partie, vous allez vous approprier les outils présentés en cours.
Commencez par cloner le projet sur la forge et importez-le dans WebStorm. Lancez-le avec Grunt build. Logiquement, vous devriez être bloqués dès cette première étape. Vous allez utiliser la commande npm install avec différentes options pour résoudre ce problème.
Intallation de Grunt : La procédure est indiquée ici et l'explication là :
Installez ensuite les packages NPM manquants en les sauvegardant dans le fichier package.json.
L'étape d'après est de passer la validation JSHint. Pour cela, corrigez le code JavaScript pour qu'il soit valide et relancez Grunt. Procédez ainsi jusqu'à ce que l'application se lance.
Avant de pusher sur la forge, rappelez-vous d'ignorer dans votre repo le répertoire node_modules et les autres répertoires inutiles (.idea ?).
Actuellement, votre serveur Express ne sert que des fichiers statiques et tout le métier s'exécute côté client. Vous allez créer une gestion des tags côté serveur, partagée entre les différents utilisateurs. Pour cela :
À la fin de cette étape, vous devez avoir une application qui gère deux types de bookmarks, côté client et côté serveur.
Actuellement, pour pouvoir être téléchargés, les scripts doivent être accessibles depuis le répertoire statique de votre serveur. Pourtant, votre module métier "annuaire.js" est le même côté serveur et côté client.
Laisser la dépendance vers jQuery et rajouter des dépendances sur les scripts suivants :
Dans la version précédente, votre interface comporte une partie qui concerne les bookmarks locaux et une autre pour ceux partagés sur le serveur. Vous allez transformer votre application en une SPA et créer deux vues séparées pour ces deux parties.
Pour cela, commencez par créer un menu permettant de passer de l'une à l'autre. Faites en sorte que la différence d'URL entre les deux ne soit située que dans le "hash" (partie de l'URL après le caractère '#'). Utilisez le routeur Backbone pour gérer les routes associées et afficher la vue correspondant à chaque route.
Séparez maintenant le module de code initial en un modèle et une vue. Pour chacun d'eux, étendez les objets Backbone prévus à cet effet. Testez.
Rajoutez une route, un modèle et une vue pour la visualisation des sites (locaux et côté serveur) par tag.
Implémentez le mécanisme de two-way data binding qui manque pour pouvoir mettre à jour le modèle automatiquement. Testez.
Normalement, à la fin de cette séance, votre application devrait comprendre :
L'objectif de cette partie est d'utiliser un mécanisme de rendu déclaratif permettant de synchroniser la vue avec le modèle. Pour cela, vous allez notamment utiliser l'outil de templating d'Underscore.js.
L'utilisation du templating nécessite de :
Concrètement :
Dans cette partie, vous allez mettre en place une méthode de stockage côté client des données entrées par l'utilisateur à chaque modification.
Si vous ne l'avez pas déjà fait, rajoutez une route vers la page d'accueil de l'application, qui servira de "tableau de bord". Faites en sorte que l'utilisateur puisse entrer un nom pour personnaliser l'application.
À l'aide de l'objet sessionStorage, enregistrez les métadonnées de l'application : nom de l'utilisateur, derniers bookmarks ajoutés (en local et sur le serveur) et date de dernière actualisation.
Dans cette séance, vous allez utiliser des bibliothèques de mise en forme et un préprocesseur CSS.
Utilisez l'outil de préprocessing intégré à celui que vous avez utilisé pour rendre l'application responsive (Less pour bootstrap et SASS pour Foundation) pour :
Mettez en place une feuille de style destinée à l'impression d'une liste de sites, et le bouton associé.
Côté client, vous devez donc avoir un autre Model (et au besoin une Collection) Backbone qui requête ce module côté serveur et la View correspondante (qui ne sera pas très différente de celle des bookmarks stockés localement).
Pour ce qui est de la synchronisation du client avec les bookmarks côté serveur, laissez faire les mécanismes de caching HTTP (cf. TP chat)...
Le rendu du TP s'effectue sur la forge. Le dernier commit devra avoir été fait au plus tard le mercredi 12 avril 2017 à 23h59.
Chaque étudiant d'un binôme doit indiquer l'identifiant du projet (la fin de l'URL) dans la case Tomuss "Id_projet_forge_TP1".