Programmable Web - client side 2014-2015

De $1

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 : 

Travaux pratiques :

Pour ceux qui ne connaissent pas NodeJS et les WebSockets :

Exercices obligatoires 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.

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

Ressources

Outils (attention, sujet trollesque...!)

Nous n'allons pas utiliser d'outils particuliers pour cette formation, uniquement des outils "standards" tels que Eclipse, Netbeans, Sublime Text 2, Notepad++ ou les outils que vous appréciez pour éditer du code. Néanmoins, de nombreux exemples HTML5/JS/CSS seront proposés sur des envrionnements de développement en ligne tels que http://jsbin.com/http://jsfiddle.net/http://dabblet.com/ ou http://codepen.io/, particulièrement adaptés pour faire de petits exemples partageables (vous pouvez modifier les exemples, vous les approprier, mais jamais les casser, car pour chaque modification une version est générée, avec son URL unique).

ICI UN DOCUMENT QUI EXPLIQUE COMMENT CONFIGURER EFFICACEMENT DES OUTILS/EDITEURS/IDEs pour faire du JavaScript de manière optimale (brancher NodeJS pour valider du JS et rediriger les erreurs dans Sublime Text, WebStorm et NetBeans, les devtools de google chrome pour pouvoir éditer / sauver les fichiers depuis le browser)

Comment tirer le meilleur de Sublime Text (raccourcis claviers + meilleurs modules) : http://slides.com/grinnyhermant/les-...sublime-text#/

Autre cours et galleries d'exemples CSS 2 et 3, JavaScript et HTML5

JavaScript

En plus du support papier distribué vous pouvez également regarder ces ressources:

CSS

Un bon exemple CSS3 avec zoom, rotation, bords arrondis, ombres, etc...

Flex Layout exemples

Transitions exemples

Animations exemples

Multi-colonnes exemple

WebFont exemple

Dégradés exemples

Ombres exemple

Background exemple

Border-image exemple

HTML5 

Vous trouverez de très nombreux exemples interactifs dans les liens jsbin.com des supports de cours PDF en anglais. La plupart de ces exemples sont aussi disponibles sur cette page : HTML5 discovery tutorial 

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).