Introduction
Durant les prochaines séances, il y aura du cours magistral, mais vous développerez au fil de l'eau un mini projet ayant pour thème un outil de groupware incluant :
- Possibilité de créer une équipe de travail (un projet). Le créateur est le "propriétaire du projet". Le projet a un nom et une description. Eventuellement un logo (facultatif).
- Lorsque on se connecte pour la première fois sur le site, on nous demande notre nom, comme dans le TP sur les WebSockets. On voit ensuite la liste des projets. En cliquant sur un nom de projet (un lien), on peut "rejoindre" le projet. Pour le moment on ne se préoccupe pas de problèmes d'authentification.
- Quand on est dans la "salle virtuelle d'un projet" (au sens WebSockets), on peut chatter avec les personnes dans la salle, on ne peut pas chatter avec les autres personnes dans les autres salles. (facultatif, mais ça complique : on peut participer à plusieurs salles en même temps et switcher de projet/conversation)
- On peut afficher une carte avec la position (longitude/latitude) des personnes dans le projet, voir leur profil (si on complique le projet, si on gère l'authentification -tout ceci est optionnel-, on pourra voir nom, email, photo, spécialité etc.)
- On peut démarrer une visio conférence et les gens du projet peuvent la rejoindre. On utilisera une librairie WebRTC simple à intégrer comme Twilio ou appear.in ou autre...
- le projet partagera un disque distant avec des fichiers. On pourra voir/explorer le répertoire partagé (et voir les sous-répertoires et fichiers), downloader un fichier (lien HTTP classique), uploader un fichier avec XhR2 ou fetch, voir une barre de progression (si XhR2, pas supporté par fetch encore). Vous pourrez éventuellement utiliser des modules npm comme https://www.npmjs.com/package/fs-extra pour vous simplifier la vie...
- Optionnel : drag'n'drop pour l'upload.
- Optionnel : FileSystem partagé mais versionné (via des web services google drive ou via des gists)
- Pour les très bons : utilisation de frameworks (React/Angular2), version mobile, version hybride (Adobe Cordoba, Electron), version compilée en natif (cours à venir où je vous parle de ces technologies comme React native ou NativeScript)
- Encore plus dur : transfert de fichier en P2P via WebRTC directement de client à client. Il existe de nombreuses solutions de haut niveau.
Travail à faire
Séance du 12/12/2016
- Faire le TP sur les WebSockets en mode "normal" et en mode "multi-rooms", comprendre ce qu'il se passe. Tester le debug pour voir les messages transiter.
- S'inscrire au MOOCs sur HTML5 (part 1 et part 2 sur la chaine W3Cx), voir la partie concernant la géolocalisation (Week6, partie 6.6). Etudiez les exemples, puis ajoutez une carte à l'exemple du chat du TP (multirooms). La carte et le chat doivent marcher.
- Simulez le fait que chaque participant a une localisation différente. Vous devez avoir leur position affichée sur la carte (cherchez dans les exemples Google Maps comment faire, si vous préférez utiliser OpenStreetMap c'est aussi possible).
- Maintenant, au lieu d'avoir des positions "codées en dur", essayez de vraiment simuler des positions changeantes (utilisez l'outil de debug de votre navigateur, partie "sensors", et utilisez des fenêtres privées pour chaque utilisateur. On doit les voir sur la carte à des positions différentes qui se mettent à jour quand ils se déplacent.
- Si vous êtes arrivés jusque là, regardez comment insérer une solution de visio conférence via WebRTC, par exemple avec appear.in.
Vous n'êtes pas connecté. Connexion 