Programmable Web - client side 2014-2015

Introduction

Ce cours est complémentaire de "Programmable Web - server side" donné par Peter Sander.

Nous allons, au travers de ce cours, manipuler des standards récents du web (HTML5 et ses APIs JavaScript, les WebSockets), mais aussi des standards "émergents" encore expériementaux (webRTC), pour réaliser une plate-forme de support pour des cours en ligne. Cette plate-forme web fournira à n personnes travaillant ensembles les services suivants :

• Chat audio / vidéo / texte en 1-1 ou en N-N, sorte de Skype mais au lieu d'être une application native ou un plugin, la solution sera codées en technos web (JS/HTML/CSS) et tournera dans un navigateur, sans aucune installation préalable,
• Possibilité de muter micros ou caméras,
• A voir : passage en plein écran et mute automatique, on passe la parole à celui qui parle ?
• Carte permettant de situer la position géographique des participants (utilisation de l'API de géo-localisation de HTML5),
• Transfert de fichier direct en p2p,  (par ex par drag'n'drop d'un fichier sur la vidéo d'un des participants)
• Partage d'écran,
• FileSystem partagé et si possible versionné (via des web services google drive ou via des gists, ou autre, solution non encore choisie)
• Support de "salles vituelles, c'est-à-dire que la plateforme permettra à plusieurs groupes de personnes de participer à des réunions en parallèle, à la manière de appear.in, talky.io, jipsy etc.

Le cours s'étendra sur 8 semaines, les trois ou quatre dernières séances étant à temps plein consacrées à la finalisation du projet et à sa soutenance.

Les premières séances seront consacrées à la prise en main des diverses technologies abordées.

Séance 1 : présentation générale de WebRTC et des WebSockets

Support de cours : 

• Transparents d'introduction à WebRTC 

Travaux pratiques :

Pour ceux qui ne connaissent pas NodeJS et les WebSockets :

• un chat multi-participants en version mono salle et en version multi-salles virtuelles, avec NodeJS et les modules "express" et "socket.io" 
  • Compléments pour les curieux : le même chat mais sans jQuery et avec un moteur archi minimal de jeu et partage de position des joueurs. 

Exercices obligatoires sur WebRTC :

• Suivre ce tutorial / codelab sur WebRTC 

Séance 2 : géolocalisation, décryptons un peu les exemples vus la semaine dernière, un peu de Layout CSS3

Supports de cours :

• Nouvelles APIs de HTML5, notamment la géolocalisation : http://mainline.essi.fr/HTML5slides/chapter5FR.html
  • Voir aussi les exemples de carte interactives ici http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/HTML5_discovery_tutorial#Geolocation
     
• Vous vous êtes peut être demandés pourquoi les pairs recevaient tant de "ICE candidates", la réponse détaillée est ici (à lire) : https://webrtchacks.com/trickle-ice/
   
• Archive du step7 du codelab de la semaine dernière, commenté en français par M.Buffa : step7.zip. 
  
  
• Pour la réalisation du client final du projet, vous aurez besoin de le concevoir comme une WebApp, donc pas de table based layout ou de float CSS... Vous utiliserez le nouveau FlexBox Layout de CSS3 + quelques goodies  

Travail à faire (ça débordera sur les vacances...)

1. Faire tourner les exemples de géolocalisation. Utilisez les devtools de Google Chrome ou de FireFox pour changer de position (lat/long), relancez les exemples du cours pour voir la carte centrée sur cette nouvelle position. Bien repérer dans la code où on manipule la longitude et la latitude. Chercher sur le net comment on peut rajouter plusieurs positions sur la même carte. Cela nous servira plus tard pour visualiser les différents participants à une visio conférence.
    
2. Dans step7.zip: relire les fichiers server.js et main.js. Attention, ce sont des fichiers impliqués dans une communication et exécutés à distance et en même temps par chaque pair. Il faut toujours se dire "ok, je suis l'appelant", "ok, je suis l'appelé"... 
    
3. Rajoutez la carte du step 1 à l'exemple du step 7, on doit avoir la carte + la video et chat qui marchent.
    
4. Maintenant on veut envoyer par le data Channel, une fois que la communication est établie, la position des deux pairs. Vérifier avec des traces que les positions sont bien envoyées. Si vous testez sur le réseau local entre deux machines, l'un des deux changera sa position artificiellement avec les devtools de son browser.
    
5. Commencer à réfléchir à ce qu'il faudrait faire pour avoir plusieurs personnes connectées en même temps (3, 4, 5...). Tester avec le step3 de la semaine dernière, sans serveur et sans fioritures compliquées... Si on clique sencore une fois sur call on voudrait une troisième vidéo et les trois personnes qui communiquent...
    
6. Commencez aussi à réfléchir à un layout pour l'application finale, avec chat, carte, vidéo, et une zone pour échanger des fichiers...
    
7. regardez dans le step x comment est fait le transfert d'image, regarder peer.js la librairie permettant le transfert de fichier via WebRTC. Imaginer comment on pourrait faire de l'échange de fichier entre pairs par drag'n'drop sur la vidéo d'un pair. Voir le cours sur le drag'n'drop ici : http://mainline.essi.fr/HTML5slides/chapter6FR.html ce chapitre couvre la persistance dans HTML5 mais comme souvent avec le drag'n'drop on manipule des fichiers, la lecture de la partie "File API de HTML5", est conseillée avant de s'attaquer au drag'n'drop.
    
8. On vous a dit qu'il existe des librairies de haut niveau pour faire du WebRTC. Regardez donc cette démo utilisant des modules intitulés rtc-quickconnect, rtc-media, etc... https://github.com/rtc-io/demo-quickconnect. Et ici un projet utilisant ces librairies : https://github.com/ALXRSS/WebRTC, c'est assez bluffant ce que l'on obtient avec peu de lignes de code :-) (oui, je sais je ne vous le donne qu'à la fin....héhé)
    
9. Essayez d'héberger votre serveur NodeJS "dans le vrai monde externe". Pour cela voir dans la section "ressources" la partie dédiée.

Séance 3 : on fait le point sur votre état d'avancement, persistence et drag'n'drop en HTML5

Vous aviez du travail à faire pendant les vacances, on fait le point pour voir ce qui marche, ce qui ne marche pas, etc.

On va voir comment fonctionne la persistence, notamment la File API et le drag'n'drop de HTML5, aussi l'api XHR2 pour faire de l'ajax et des transferts upload/download binaires de fichiers.

• Support de cours sur la persistence et le drag'n'drop,
   
• Exemple de transfert de fichier via WebRTC : https://rtccopy.com/, notez qu'aucun browser à part Chrome n'implémente la FileWriter API, à la place, sur firefox on écrira dans IndexedDB via une "wrapper API" qui s'utilise comme FileWriter API.
  • Et source de ce projet : https://github.com/erbbysam/webRTCCopy
• Autres explications sur le découpage d'un fichier en chunk de 256k (c'est une limitation du data channel de WebRTC) et envoi/réception via WebRTC : https://www.webrtc-experiment.com/do...ast-works.html
• Pour optimiser l'envoi de fichier via WebRTC et mieux comprendre le mécanisme : https://bloggeek.me/send-file-webrtc-data-api/

Séance 4 : introduction à Angular JS + fin des séances de cours et début du travail à plein temps sur le projet

• Introduction à AngularJS 

Ressources

Heberger une application NodeJS

Tout est là: https://github.com/joyent/node/wiki/node-hosting, à vous de choisir le bon hébergeur. En général c'est gratuit soit pour une durée déterminée, soit si votre application n'est pas très grosse (c'est souvent le cas).