Web social - GTI780 & MTI780 - ETS - A09

Web socialWeb social

GTI-780 / MTI-780GTI-780 / MTI-780

Sujets spéciaux en TI

Le Web 2.0 : concepts et outils

École de technologie supérieure

par

Claude Coulombe

ETS - Montréal - 2009ETS - Montréal - 2009

GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009


* Source Clipart : http://www.clipart.com


À la base, Internet est un réseau, un réseau À la base, Internet est un réseau, un réseau de serveurs de contenus et de plus en plus un de serveurs de contenus et de plus en plus un réseau d'applications mais également un réseau d'applications mais également un réseau d'utilisateurs.réseau d'utilisateurs.

Il est donc tout à fait naturel, dans le contexte Il est donc tout à fait naturel, dans le contexte du Web 2.0, où l'accent est mis sur les du Web 2.0, où l'accent est mis sur les utilisateurs, que soient apparues des utilisateurs, que soient apparues des applications Web qui mettent en valeur les applications Web qui mettent en valeur les réseaux d'utilisateurs d'Internet. réseaux d'utilisateurs d'Internet.



Réseautage social en ligneRéseautage social en ligne



Une application de réseau social en ligne (ou site de Une application de réseau social en ligne (ou site de

réseautage), comme MySpace ou Facebook, permet à réseautage), comme MySpace ou Facebook, permet à

ses utilisateurs d'entrer des informations personnelles ses utilisateurs d'entrer des informations personnelles

(profils) et d'interagir avec d'autres utilisateurs. (profils) et d'interagir avec d'autres utilisateurs.

Ces informations permettent de retrouver des Ces informations permettent de retrouver des

utilisateurs ou « pseudo amis » partageant les mêmes utilisateurs ou « pseudo amis » partageant les mêmes

intérêts. Les utilisateurs peuvent former des groupes intérêts. Les utilisateurs peuvent former des groupes

et y inviter d'autres personnes. Les interactions entre et y inviter d'autres personnes. Les interactions entre

membres comportent le plus souvent des discussions membres comportent le plus souvent des discussions

et le partage de photos, de baladodiffusions, de et le partage de photos, de baladodiffusions, de

vidéos, de liens et de documents. vidéos, de liens et de documents.

Réseautage social en ligne Réseautage social en ligne


Le premier site Internet de réseautage social futLe premier site Internet de réseautage social fut

www.classmates.comwww.classmates.com toujours en activité depuis 1995. toujours en activité depuis 1995.

Sites de réseau social Sites de réseau social

* 50 M utilisateurs enregistrés


FriendsterFriendster Cependant le « boum » se produisit autour de 2002 Cependant le « boum » se produisit autour de 2002

avec entre autres le site Friendster avec entre autres le site Friendster www.friendster.comwww.friendster.com

dont le succès s'étiola après le rejet d'une offre de 30 dont le succès s'étiola après le rejet d'une offre de 30

M$ USD par Google, l'année de sa fondationM$ USD par Google, l'année de sa fondation http://www.nytimes.com/2006/10/15/business/yourmoney/15friend.html?_r=2&oref=slogin&oref=sloginhttp://www.nytimes.com/2006/10/15/business/yourmoney/15friend.html?_r=2&oref=slogin&oref=slogin



MySpaceMySpace

Dépassé par MySpace en 2004 Dépassé par MySpace en 2004 www.MySpace.comwww.MySpace.com

qui compterait 264 millions d'utilisateurs et enregistre qui compterait 264 millions d'utilisateurs et enregistre

des revenus de 900 M$ en 2008des revenus de 900 M$ en 2008


http://www.MySpace.com/


FaceBookFaceBook

Lui-même dépassé par FaceBook Lui-même dépassé par FaceBook www.FaceBook.comwww.FaceBook.com

en 2007 qui compte 300 millions d'utilisateurs et qui en 2007 qui compte 300 millions d'utilisateurs et qui

déclarait des revenus de 350 M$ en 2008déclarait des revenus de 350 M$ en 2008


http://www.FaceBook.com/


Réseaux d'affairesRéseaux d'affaires

Certains réseaux comme Certains réseaux comme www.LinkedIn.comwww.LinkedIn.com misent sur misent sur

les contacts ou relations d'affaires et la spécialisation les contacts ou relations d'affaires et la spécialisation

* Source : http://rdfweb.org/foafcorp/intro.html


http://www.LinkedIn.com/


Réseaux sociaux – Réseaux sociaux – NINGNING

DemoDemo

Ning est une plateforme conviviale et gratuite de Ning est une plateforme conviviale et gratuite de

création de réseaux sociaux selon la norme OpenSocial.création de réseaux sociaux selon la norme OpenSocial.


Loi de SarnoffLoi de Sarnoff : La valeur d'un réseau qui offre un service comme le : La valeur d'un réseau qui offre un service comme le

réseau téléphonique (i.e. météo, 911, appels téléphoniques réseau téléphonique (i.e. météo, 911, appels téléphoniques

personnels) croît proportionnellement à la taille du réseau, personnels) croît proportionnellement à la taille du réseau,

i.e i.e V = k.NV = k.N

Loi de MetcalfeLoi de Metcalfe : La valeur d'un réseau qui offre un service où : La valeur d'un réseau qui offre un service où

chaque utilisateur a avantage à transiger avec chacun des autres chaque utilisateur a avantage à transiger avec chacun des autres

utilisateurs croît proportionnellement au carré de la taille du utilisateurs croît proportionnellement au carré de la taille du

réseau, i.e réseau, i.e V = k.NV = k.N22

Loi de ReedLoi de Reed : La valeur d'un réseau qui favorise la construction de : La valeur d'un réseau qui favorise la construction de

sous-groupes (Group-Forming Networks) croît exponentiellement sous-groupes (Group-Forming Networks) croît exponentiellement

avec la taille du réseau, i.e. avec la taille du réseau, i.e. V = k.2V = k.2NN

Réseaux sociaux – Réseaux sociaux – Lois économiques Lois économiques

* Source : http://www.reed.com/gfn/docs/reedslaw.html


Réseaux sociaux – Réseaux sociaux – Démo de NingDémo de Ning

DemoDemo


Web social - Patrons d'applicationWeb social - Patrons d'application



Réseau social Réseau social (Social Network) : patron (Social Network) : patron

d'application Web 2.0 qui permet aux utilisateurs d'application Web 2.0 qui permet aux utilisateurs

d'entrer des profils et du contenu, de former des d'entrer des profils et du contenu, de former des

groupes et d'interagir avec d'autres utilisateurs groupes et d'interagir avec d'autres utilisateurs

partageant ses intérêtspartageant ses intérêts

Conteneur de gadgets : Conteneur de gadgets :

Application avec architecture de plugiciels Application avec architecture de plugiciels

(plugins) qui se compose d'un ensemble de (plugins) qui se compose d'un ensemble de

petites applications et d'utilitaires petites applications et d'utilitaires

Web social - Patrons d'applicationWeb social - Patrons d'application


Web social Web social –– Composantes d'applicationsComposantes d'applications


GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009* Note: ou plus simplement un livre d'or

Espace personnel comportant un profil (coordonnées, âge, sexe, Espace personnel comportant un profil (coordonnées, âge, sexe, nationalité, niveau d'études, photo) et des centres d'intérêtnationalité, niveau d'études, photo) et des centres d'intérêt

L'utilisateur peut organiser et personnaliser son espaceL'utilisateur peut organiser et personnaliser son espace

Outil pour créer des liens avec ses « amis » et gérer des listes d'amis et Outil pour créer des liens avec ses « amis » et gérer des listes d'amis et d'amis communs (FOAF : friends of a friend)d'amis communs (FOAF : friends of a friend)

Outils pour créer, inviter et gérer des groupesOutils pour créer, inviter et gérer des groupes

Outil pour créer, proposer et gérer des activitésOutil pour créer, proposer et gérer des activités

Fils RSS : syndication de contenuFils RSS : syndication de contenu http://fr.wikipedia.org/wiki/RSS_(format)http://fr.wikipedia.org/wiki/RSS_(format)

Blogue : journal personnel qui contient essentiellement des opinions Blogue : journal personnel qui contient essentiellement des opinions personnelles sur différents sujets ou d'une thématique particulière. Offre personnelles sur différents sujets ou d'une thématique particulière. Offre la possibilité aux visiteurs de commenter*la possibilité aux visiteurs de commenter* http://fr.wikipedia.org/wiki/Bloghttp://fr.wikipedia.org/wiki/Blog

Outils de partage de photos, de baladodiffusions (podcast), de vidéos, de Outils de partage de photos, de baladodiffusions (podcast), de vidéos, de signets et de documents textuelssignets et de documents textuels

Outils de conversation Web : synchrone (ex. messagerie instantanée) ou Outils de conversation Web : synchrone (ex. messagerie instantanée) ou asynchrone (ex. courriel ou forum)asynchrone (ex. courriel ou forum) http://fr.wikipedia.org/wiki/Forum_Internethttp://fr.wikipedia.org/wiki/Forum_Internet

Web social Web social –– Composantes d'applicationsComposantes d'applications

http://fr.wikipedia.org/wiki/Blog

http://fr.wikipedia.org/wiki/Forum_Internet


En plus d'un ensemble d'applications de base fournies par En plus d'un ensemble d'applications de base fournies par l'opérateur du site, beaucoup de sites sont ouverts aux l'opérateur du site, beaucoup de sites sont ouverts aux applications tiercesapplications tierces

Cette ouverture contribue au succès des sitesCette ouverture contribue au succès des sites Certaines applications tierces font l'objet d'un partage des Certaines applications tierces font l'objet d'un partage des

revenus publicitairesrevenus publicitaires 8000 applications tierces sur Facebook en 20078000 applications tierces sur Facebook en 2007 Des outils et des canevas d'applications (FrameWorks) sont Des outils et des canevas d'applications (FrameWorks) sont

proposés aux développeurs pour faciliter leur travailproposés aux développeurs pour faciliter leur travail Cependant, les normes sont souvent propriétaires comme le Cependant, les normes sont souvent propriétaires comme le

fameux FBML, une variante du HTML pour FaceBookfameux FBML, une variante du HTML pour FaceBook Par exemple, en 2007 FaceBook a lancé une plateforme et des Par exemple, en 2007 FaceBook a lancé une plateforme et des

APIs pour créer de petites applications appelée Widgets. Mais les APIs pour créer de petites applications appelée Widgets. Mais les widgets FaceBook ne tournent que dans FaceBook.widgets FaceBook ne tournent que dans FaceBook.

Web social Web social –– Applications tiercesApplications tierces


Site de réseau social - Site de réseau social - Avantages & inconvénientsAvantages & inconvénients



Site de réseau socialSite de réseau social - - AvantagesAvantages Démocratisation des moyens de production et de diffusion Démocratisation des moyens de production et de diffusion

d'informations, de musique et de contenus audiovisuelsd'informations, de musique et de contenus audiovisuels

Permet de se créer un site personnalisé et à son imagePermet de se créer un site personnalisé et à son image

Partage des centres d'intérêt et des passionsPartage des centres d'intérêt et des passions

Permet de retrouver des copains ou des amisPermet de retrouver des copains ou des amis

Diffusion internationaleDiffusion internationale

Divertissement a priori peu coûteux et accessibleDivertissement a priori peu coûteux et accessible

Au plan technique Au plan technique

Réponses rapides aux actions de l'utilisateurRéponses rapides aux actions de l'utilisateur

Applications Web riches, rapides et légèresApplications Web riches, rapides et légères

Pas de long téléchargement, ni d'installationPas de long téléchargement, ni d'installation

Compatibilité avec tous les fureteurs WebCompatibilité avec tous les fureteurs Web

Le fureteur devient la plateformeLe fureteur devient la plateforme


Site de réseau socialSite de réseau social - - InconvénientsInconvénients « Effet de mode »« Effet de mode »

Menaces et atteintes à la vie privéeMenaces et atteintes à la vie privée

Utilisation abusive des données personnelles des utilisateurs par les propriétaires Utilisation abusive des données personnelles des utilisateurs par les propriétaires des sitesdes sites

Publicité envahissante. Par exemple en 2007, lancement du logiciel publicitaire Publicité envahissante. Par exemple en 2007, lancement du logiciel publicitaire Beacon de FaceBook qui communique de l'information sur les achats des membres Beacon de FaceBook qui communique de l'information sur les achats des membres à leurs « amis »... (maintenant avec consentement)à leurs « amis »... (maintenant avec consentement)

Activité consommatrice de temps et pas très utileActivité consommatrice de temps et pas très utile

Amitiés factices et éphémères... Peut-on avoir 400 vrais amis?Amitiés factices et éphémères... Peut-on avoir 400 vrais amis?

Risque que les utilisateurs deviennent otages des sites qui abritent leurs données Risque que les utilisateurs deviennent otages des sites qui abritent leurs données personnelles (Data lock-in)*personnelles (Data lock-in)*

Problèmes de compatibilité entre les différents réseauxProblèmes de compatibilité entre les différents réseaux

Problème des droits d'auteur, contrefaçonProblème des droits d'auteur, contrefaçon

Contenus violents, racistes, pornographiques, faux, mensongersContenus violents, racistes, pornographiques, faux, mensongers

L'aspect sécurité est à surveillerL'aspect sécurité est à surveiller

Au plan technique, nombreuses APIs et normes propriétaires, pas Au plan technique, nombreuses APIs et normes propriétaires, pas d'interopérabilitéd'interopérabilité

* Après le « hardware lock-in » et le « software lock-in » selon Tim O'Reilly


GadgetsGadgets

GadgetsGadgets



Les gadgets (ou widgets) sont des mini sites web, en général de Les gadgets (ou widgets) sont des mini sites web, en général de petits blocs de contenu autonomes, placés dans une page web ou petits blocs de contenu autonomes, placés dans une page web ou dans un conteneurs de gadgetsdans un conteneurs de gadgets

Popularisés par la norme porlet (portail Excite) mais qui Popularisés par la norme porlet (portail Excite) mais qui nécessitait le rechargement complet de la page, remplacés par les nécessitait le rechargement complet de la page, remplacés par les webagrégats (ou aggrégateur de gadgets) en Ajax au webagrégats (ou aggrégateur de gadgets) en Ajax au rafraîchissement asynchronerafraîchissement asynchrone

Les gadgets sont de petites applications constituées de : XML, Les gadgets sont de petites applications constituées de : XML, HTML et JavaScript auxquels s'ajoutent des ressources comme HTML et JavaScript auxquels s'ajoutent des ressources comme des images et des fichiers CSSdes images et des fichiers CSS

XML sert en général à décrire la configuration du gadgetXML sert en général à décrire la configuration du gadget

HTML sert de support au contenu statiqueHTML sert de support au contenu statique

JavaScript fournit l'interactivité (le comportement dynamique) et JavaScript fournit l'interactivité (le comportement dynamique) et assure les communications avec les services Web externesassure les communications avec les services Web externes

Gadgets - définitionGadgets - définition


Petites applications comportant : XML, HTML et JavaScript en Petites applications comportant : XML, HTML et JavaScript en

plus de ressources comme des images et des CSSplus de ressources comme des images et des CSS

XML pour la spécification du gadget XML pour la spécification du gadget

HTML pour le support du contenu statiqueHTML pour le support du contenu statique

JavaScript pour l'interactivité & les communications via des JavaScript pour l'interactivité & les communications via des

services Webservices Web

Gadgets – Aspects techniquesGadgets – Aspects techniques

* Source image : http://code.google.com/apis/opensocial/

<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?>

<Module><Module>

<ModulePrefs author="Claude Coulombe" <ModulePrefs author="Claude Coulombe"

author_email="[email protected]" height="300" title="SimpleGadget"/>author_email="[email protected]" height="300" title="SimpleGadget"/>

<Content type="html"><Content type="html">

<![CDATA[<![CDATA[

<script><script>

function com_example_simplegadget_SimpleGadget(){ function com_example_simplegadget_SimpleGadget(){

… …

</script></script>

]]>]]>

</Content> </Content>

</Module></Module>


Conteneur de gadgets - NetvibesConteneur de gadgets - Netvibes


Conteneur de gadgets - iGoogleConteneur de gadgets - iGoogle


Basée sur le patron d'applications cBasée sur le patron d'applications conteneur (Container) : onteneur (Container) :

application avec une structure de style plugiciel (plugin) qui application avec une structure de style plugiciel (plugin) qui

contient un ensemble de petites applications ou utilitairescontient un ensemble de petites applications ou utilitaires

Conteneur offre un bac à sable (sandbox) pratique et Conteneur offre un bac à sable (sandbox) pratique et

sécuritaire pour l'exécution de gadgetssécuritaire pour l'exécution de gadgets

Popularisée par les sites web sociauxPopularisée par les sites web sociaux

Services Web légers (du style REST) et composants logiciels Services Web légers (du style REST) et composants logiciels

légers (gadgets à base de XHTML et JavaScript)légers (gadgets à base de XHTML et JavaScript)

Architecture à base de gadgetsArchitecture à base de gadgets


Génère HTML, JavaScript & CSS à partir des spécificationsGénère HTML, JavaScript & CSS à partir des spécifications

Serveur de GadgetsServeur de Gadgets

Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation


Affiche l'interface-utilisateur du réseau socialAffiche l'interface-utilisateur du réseau social

Ouvre un iFrame pour insérer le gadgetOuvre un iFrame pour insérer le gadget

Conteneur de GadgetsConteneur de Gadgets

Source http://incubator.apache.org/shindig/index.html


1)1) Fureteur client demande une application à GadgetsFureteur client demande une application à Gadgets

2)2) Conteneur demande la spéc. du Gadget du serveur hôteConteneur demande la spéc. du Gadget du serveur hôte

3)3) Conteneur convertit la spécification du Gadget en HTML via Conteneur convertit la spécification du Gadget en HTML via

le serveur de gadgets lequel gadget est affiché par le clientle serveur de gadgets lequel gadget est affiché par le client

Conteneur de GadgetsConteneur de Gadgets - - Comment ça marche?Comment ça marche?



1)1) Application à Gadgets demande le contenu distantApplication à Gadgets demande le contenu distant

2)2) Conteneur demande le contenu à partir de l'URL spécifiqueConteneur demande le contenu à partir de l'URL spécifique

3)3) Conteneur retourne une réponse au Gadget qui affiche le Conteneur retourne une réponse au Gadget qui affiche le

contenucontenu

Conteneur de GadgetsConteneur de Gadgets - - Comment ça marche?Comment ça marche?



Gadgets - Avantages & inconvénientsGadgets - Avantages & inconvénients



« Phénomène de mode »« Phénomène de mode »

Tendance à la multiplication des gadgets et des services d'utilité douteuseTendance à la multiplication des gadgets et des services d'utilité douteuse

Difficile à testerDifficile à tester

Problème de sécuritéProblème de sécurité

Problème d'interopérabilitéProblème d'interopérabilité

Limité quant à la complexité si l'on développe directement en JavaScriptLimité quant à la complexité si l'on développe directement en JavaScript

Gadgets - InconvénientsGadgets - Inconvénients


Couplage faible, encore le découplage!!! ;-)Couplage faible, encore le découplage!!! ;-)

Favorise la réutilisationFavorise la réutilisation

Facile à développerFacile à développer

Légers et peu exigeants en bande passante et capacité des serveursLégers et peu exigeants en bande passante et capacité des serveurs

Déploiement potentiel sur plusieurs sites Web sociauxDéploiement potentiel sur plusieurs sites Web sociaux

Facile pour l'usager d'ajouter / retirer des gadgets et de les personnaliser Facile pour l'usager d'ajouter / retirer des gadgets et de les personnaliser

Gadgets - AvantagesGadgets - Avantages


RESTREST

RESTREST



REST – La simplicité du WebREST – La simplicité du WebOn se connecte sur un serveur, on lui donne un chemin (URL/URI) On se connecte sur un serveur, on lui donne un chemin (URL/URI) vers un document et le serveur nous retourne le contenu HTML du vers un document et le serveur nous retourne le contenu HTML du document. C'est simplement HTTPdocument. C'est simplement HTTP

On peut voir cela comme l'échange de documents dans des On peut voir cela comme l'échange de documents dans des enveloppesenveloppes

URI, HTML ou XML et HTTPURI, HTML ou XML et HTTP

Adressable et sans état (Stateless)Adressable et sans état (Stateless)

Cycle HTTP :Cycle HTTP :

1) Construction de la requête : méthode HTTP + URL/URI + HTTP 1) Construction de la requête : méthode HTTP + URL/URI + HTTP entêtes + document (dans le cas de GET ou POST)entêtes + document (dans le cas de GET ou POST)

2) Envoi de la requête à un serveur HTTP2) Envoi de la requête à un serveur HTTP

3) Réception et traitement de la réponse : statut de la réponse + 3) Réception et traitement de la réponse : statut de la réponse + entêtes + document retournéentêtes + document retourné

*Note : Thèse de doctorat de Roy Fielding, en 2000


RESTRESTREST (REpresentational State Transfer)* REST (REpresentational State Transfer)*

plus clairement appelé architecture orientée ressources ROA plus clairement appelé architecture orientée ressources ROA (Resource-Oriented Architecture) ou RESTful Web services(Resource-Oriented Architecture) ou RESTful Web services

Repose sur la notion de ressourcesRepose sur la notion de ressources

Pas de gestion d'état (stateless)Pas de gestion d'état (stateless)

Chaque ressource est accessible via une URI/URL uniqueChaque ressource est accessible via une URI/URL unique

Un ensemble de types de contenus MIME en requête et en réponseUn ensemble de types de contenus MIME en requête et en réponse

Chaque ressource répond à un ensemble de commandes HTTP de base Chaque ressource répond à un ensemble de commandes HTTP de base qui correspondent aux opérations classiques dites CRUDqui correspondent aux opérations classiques dites CRUD

–

*Note : Thèse de doctorat de Roy Thomas Fielding,


REST – API uniformeREST – API uniforme

Obtenir une représentation d'une ressource : GETObtenir une représentation d'une ressource : GET

Créer une nouvelle ressource : PUT avec nouvel URICréer une nouvelle ressource : PUT avec nouvel URI

Créer une sous-ressource ou une extension : POST Créer une sous-ressource ou une extension : POST avec URI existanteavec URI existante

Modifier une ressource : PUT avec URI existanteModifier une ressource : PUT avec URI existante

Détruire une ressource : DELETE avec URI existanteDétruire une ressource : DELETE avec URI existante



REST – REST – Qualités d'un service RESTfulQualités d'un service RESTful

Adressabilité : une URI/URL pour chaque information utileAdressabilité : une URI/URL pour chaque information utile

Sans état (stateless) : chaque requête HTTP est complète et Sans état (stateless) : chaque requête HTTP est complète et isolée, toute l'information nécessaire est fournie au serveurisolée, toute l'information nécessaire est fournie au serveur

Représentation : un document échangé, l'état d'une ressourceReprésentation : un document échangé, l'état d'une ressource

Hyperliens et connectivité : les documents contiennent des Hyperliens et connectivité : les documents contiennent des hyperliens vers d'autres ressourceshyperliens vers d'autres ressources

Sans effet de bord : un GET va lire des informations sans rien Sans effet de bord : un GET va lire des informations sans rien changer à l'état du serveurchanger à l'état du serveur

Idempotence : une opération sur une ressource est Idempotence : une opération sur une ressource est idempotente si l'effet reste le même que l'on effectue idempotente si l'effet reste le même que l'on effectue l'opération une fois ou plusieurs fois. PUT et DELETE sont l'opération une fois ou plusieurs fois. PUT et DELETE sont idempotents.idempotents.

POST n'est ni idempotent ni sans effet de bordPOST n'est ni idempotent ni sans effet de bord



RPCRPC

RPCRPC



RPCRPC

Appel de procédure à distance RPC (Remote Appel de procédure à distance RPC (Remote Procedure Call)Procedure Call)

Protocole de communication inter-processus qui Protocole de communication inter-processus qui permet à un logiciel de demander l'exécution d'une permet à un logiciel de demander l'exécution d'une procédure sans avoir à coder explicitement les détailsprocédure sans avoir à coder explicitement les détails

RPC permet l'échange facile d'objets (POJOS) entre RPC permet l'échange facile d'objets (POJOS) entre le client et le serveurle client et le serveur

Seulement une cible (i.e. uneseul URL) + paramètresSeulement une cible (i.e. uneseul URL) + paramètres

Paramètres spécifient les méthodes (procédures) à Paramètres spécifient les méthodes (procédures) à appeler, donc pas limités aux 4 méthodes RESTappeler, donc pas limités aux 4 méthodes REST


RPC - Comparaison avec RESTRPC - Comparaison avec RESTREST et RPC sont différents à plusieurs niveauxREST et RPC sont différents à plusieurs niveaux


REST RPC4 procédures : GET, POST, PUT, DELETE

Différents appels de procédures qui varient avec les applications

Document dans une enveloppe HTTP

Enveloppe SOAP XML dans une enveloppe HTTP

Procédure dans la méthode HTTP pas dans l'URI

Procédure dans l'URI

Usage selon les besoins du GET, POST, PUT, DELETE

Surcharge du POST HTTP ou utilisation unique du GET ou du POST


REST – REST – Hybrides REST-RPCHybrides REST-RPC

Il existe aussi des hydrides REST-RPC ou faux services Il existe aussi des hydrides REST-RPC ou faux services RESTREST

Par exemple Flickr qui utilise le GET pour détruirePar exemple Flickr qui utilise le GET pour détruire http://www.flickr.com/services/...&method=flickr.photos.deletehttp://www.flickr.com/services/...&method=flickr.photos.delete

Aussi Delicious qui utilise le GET et des méthodes Aussi Delicious qui utilise le GET et des méthodes dans l'URIdans l'URI

https ://api.del.icio.us/.../add https ://api.del.icio.us/.../add

Un exemple très fréquent : Soumission d'un formu-Un exemple très fréquent : Soumission d'un formu-laire avec un POST (le POST est surchargé i.e. il peut laire avec un POST (le POST est surchargé i.e. il peut être remplacé par différentes procédures non HTTP)être remplacé par différentes procédures non HTTP)

Un service qui utilise exclusivement le POST ou le GET est Un service qui utilise exclusivement le POST ou le GET est habituellement un service de style RPChabituellement un service de style RPC



Exercice – Exercice – Rendre REST une API RPCRendre REST une API RPC

Exemple Exemple

GET + URL : GET + URL : http: //www.mon_site/mes_services?http: //www.mon_site/mes_services?

id=usager&pw=123&doc=rapport780&&method=deleteid=usager&pw=123&doc=rapport780&&method=delete


Exercice – Exercice – Rendre REST une API RPCRendre REST une API RPC

Solution Solution

DELETE + URL : DELETE + URL : http: //www.mon_site/mes_services/usager/rapport780?pw=123http: //www.mon_site/mes_services/usager/rapport780?pw=123


Norme OpenSocialNorme OpenSocial

* Source image : http://code.google.com/apis/opensocial/


Avec la prolifération de sites et réseaux sociaux émerge le besoin de normes et Avec la prolifération de sites et réseaux sociaux émerge le besoin de normes et

d'outils en sources libres d'outils en sources libres

Créé en réaction* à la prolifération de normes et d'APIs propriétaires ou spécifiques Créé en réaction* à la prolifération de normes et d'APIs propriétaires ou spécifiques

à un seul site (novembre 2007)à un seul site (novembre 2007)

La loi de Reed explique pourquoi une évolution vers un réseau social gloabl, ouvert La loi de Reed explique pourquoi une évolution vers un réseau social gloabl, ouvert

et interopérable est probable.et interopérable est probable.

OpenSocial se veut une norme libre et ouverte qui définit une API commune à un OpenSocial se veut une norme libre et ouverte qui définit une API commune à un

ensemble d'applications sociales sur un grand nombre de sites Web différentsensemble d'applications sociales sur un grand nombre de sites Web différents

Combinaison des Google gadgets, d'un conteneur de gadgets et d'APIs de Combinaison des Google gadgets, d'un conteneur de gadgets et d'APIs de

communication normalisés communication normalisés

Partenaires de l'OpenSocial Foundation: Engage.com, Friendster, Google, hi5, Partenaires de l'OpenSocial Foundation: Engage.com, Friendster, Google, hi5,

Hyves, imeem, LinkedIn, MySpace, Ning, Oracle, orkut, Plaxo, Salesforce.com, Six Hyves, imeem, LinkedIn, MySpace, Ning, Oracle, orkut, Plaxo, Salesforce.com, Six

Apart, Tianji, Viadeo, XING, Yahoo!Apart, Tianji, Viadeo, XING, Yahoo!

http://www.opensocial.org/http://www.opensocial.org/

http://code.google.com/apis/opensocialhttp://code.google.com/apis/opensocial

* Note : beaucoup en réaction à FaceBook


http://www.opensocial.org/






OpenSocialOpenSocial




Définit un format XML pour les applications, comprenant l'interface-Définit un format XML pour les applications, comprenant l'interface-

utilisateur (HTML/CSS/Javascript) et des métadonnées (titre, auteur, utilisateur (HTML/CSS/Javascript) et des métadonnées (titre, auteur,

courriel, taille du gadget, préférences)courriel, taille du gadget, préférences)

Définit des APIs pour des services Web pour l'échange de données, Définit des APIs pour des services Web pour l'échange de données,

incluant des services REST et de la persistance de donnéesincluant des services REST et de la persistance de données

Service d'authentificationService d'authentification

Trois principaux services de la norme OpenSocial : Trois principaux services de la norme OpenSocial :

1) Personnes & Relations (amis)1) Personnes & Relations (amis)

(accès par programmation aux informations sur les amis) (accès par programmation aux informations sur les amis)

2) Activités2) Activités

(Qu'est ce vos amis veulent faire? Faites savoir ce que vous faites)(Qu'est ce vos amis veulent faire? Faites savoir ce que vous faites)

3) Persistance (données de l'application, données des gadgets)3) Persistance (données de l'application, données des gadgets)

(Fournir un état sans le serveur, partager des données avec vos amis)(Fournir un état sans le serveur, partager des données avec vos amis)


GTI-780 / MTI-780GTI-780 / MTI-780 ETS - Montréal - 2009ETS - Montréal - 2009Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation



Caractéristiques du client Javascript Caractéristiques du client Javascript

Conteneur de gadgets (gadget.js), Gadgets OpenSocialConteneur de gadgets (gadget.js), Gadgets OpenSocial

Conteneur OpenSocialConteneur OpenSocial

JSON, Conteneur RESTfulJSON, Conteneur RESTful

Norme OpenSocialNorme OpenSocial – – Client GadgetClient Gadget

Source : http://incubator.apache.org/shindig/overview.html


OpenSocial – Bibliothèque Javascript OpenSocial – Bibliothèque Javascript

Norme OpenSocialNorme OpenSocial – Bibliothèque JS – Bibliothèque JS

Source : http://incubator.apache.org/shindig/overview.html


Demande d'information sur un ami...Demande d'information sur un ami...

function getFriendData() {function getFriendData() {

var req = opensocial.newDataRequest();var req = opensocial.newDataRequest();

req.add(req.newFetchPersonRequest(VIEWER),'viewer');req.add(req.newFetchPersonRequest(VIEWER),'viewer');

req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS),'viewerFriends');req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS),'viewerFriends');

req.send(onLoadFriends);req.send(onLoadFriends);

}}

Fonction de rappel (Callback) des données sur un ami...Fonction de rappel (Callback) des données sur un ami...

function onLoadFriends(resp) {function onLoadFriends(resp) {

var viewer = resp.get('viewer').getData();var viewer = resp.get('viewer').getData();

var viewerFriends = resp.get('viewerFriends').getData();var viewerFriends = resp.get('viewerFriends').getData();

var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’;var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’;

viewerFriends.each(function(person) {viewerFriends.each(function(person) {

html += '<li>' + person.getDisplayName()+'</li>';html += '<li>' + person.getDisplayName()+'</li>';

});});

html += '</ul>';html += '</ul>';

document.getElementById('friends').innerHTML = html;document.getElementById('friends').innerHTML = html;

}}

OpenSocial – un peu de codeOpenSocial – un peu de code

* Source code : http://www.google.com


OpenSocial offre à la fois des services Web REST et RPCOpenSocial offre à la fois des services Web REST et RPC

REST (Representational State Transfer)REST (Representational State Transfer)

RPC (Remote Procedure Call)RPC (Remote Procedure Call)

Formats de données : XML, JSON, AtomPubFormats de données : XML, JSON, AtomPub

OpenSocial – REST & RPCOpenSocial – REST & RPC

* Source : http://www.google.com* Source : http://www.google.com


Basé sur la norme AtomPub (Atom publishing protocol) et JSONBasé sur la norme AtomPub (Atom publishing protocol) et JSON

/people/{guid}/@all/people/{guid}/@all

-- Retourne l'ensemble de toutes les personnes en relation avec l'usager -- Retourne l'ensemble de toutes les personnes en relation avec l'usager

{guid}{guid}

/people/{guid}/@friends/people/{guid}/@friends

-- Retourne l'ensemble de toutes les personnes amies de l'usager {guid}-- Retourne l'ensemble de toutes les personnes amies de l'usager {guid}

-- i.e. un sous-ensemble de @all-- i.e. un sous-ensemble de @all

/people/{guid}/@self/people/{guid}/@self

-- Retour l'information contenue dans le profil de l'usager {guid}-- Retour l'information contenue dans le profil de l'usager {guid}

/activities/{guid}/@self/activities/{guid}/@self

-- -- Retourne l'ensemble de toutes les activités générées par l'usager {guid}Retourne l'ensemble de toutes les activités générées par l'usager {guid}

/activities/{guid}/@friends/activities/{guid}/@friends

-- Retourne l'ensemble de toutes les activités des amis de l'usager {guid}-- Retourne l'ensemble de toutes les activités des amis de l'usager {guid}

OpenSocial – OpenSocial – Services RESTServices REST

* Source code : http://www.google.com


ParamètresParamètres spécifient la méthode à appeler, pas limité aux 4 verbes REST spécifient la méthode à appeler, pas limité aux 4 verbes REST

Support du mode lot*Support du mode lot*

Spécification facile de groupes d'usagers*, par passage d'argumentsSpécification facile de groupes d'usagers*, par passage d'arguments

OpenSocial – OpenSocial – Services RPCServices RPC

* Note : considéré plus difficile avec REST

POST /rpc HTTP/1.1Host:api.example.orgAuthorization:<Auth token> Content-Type: application/json { "method" : "people.get", "id" : "myself" "params" : { "userid" : "@me", "groupid" : "@self" } }


ShindigShindig

ShindigShindig



Implantation de référence de la norme OpenSocial Implantation de référence de la norme OpenSocial

En Java et en PHPEn Java et en PHP

Projet Apache en logiciel libre et supporté par un consortium d'entreprises Projet Apache en logiciel libre et supporté par un consortium d'entreprises

mené par Googlemené par Google

Comporte 4 parties principales :Comporte 4 parties principales :

1) Conteneur de gadgets JavaScript (IU, sécurité, communication, préf.)1) Conteneur de gadgets JavaScript (IU, sécurité, communication, préf.)

2) Serveur de gadgets (spécifications XML vers JS + HTML)2) Serveur de gadgets (spécifications XML vers JS + HTML)

3) Conteneur OpenSocial (couche au-dessus du conteneur de gadgets) : 3) Conteneur OpenSocial (couche au-dessus du conteneur de gadgets) :

profils, amis, activitésprofils, amis, activités

4) Passerelle du serveur OpenSocial : interface vers d'autres serveurs de 4) Passerelle du serveur OpenSocial : interface vers d'autres serveurs de

contenu incluant des APIs REST contenu incluant des APIs REST

http://incubator.apache.org/shindig/http://incubator.apache.org/shindig/

Serveur ShindigServeur Shindig


3 composants principaux3 composants principaux

Serveur de Gadgets, XML HTML→Serveur de Gadgets, XML HTML→

Serveur du conteneur JavaScript OpenSocialServeur du conteneur JavaScript OpenSocial

Serveur de données persistantesServeur de données persistantes


* Source : http://incubator.apache.org/shindig/overview.html



* Source : http://rollerweblogger.org/roller/entry/shindig_java_internals_diagram_updated

1. Requête à Shindig via /social/rest ou /social/rpc (REST API ou JSON-RPC API)2. La servlet créée un RequestItem qui analyse la requête (2 RequestItem différents : un pour le REST et un pour le RPC)3. La servlet appelle le gestionnaire (handler) approprié4. Une des trois gestionnaires (handler) de Shindig prend en charge la requête (PersonHandler, ActivityHandler, AppDataHandler)5. Le gestionnaire (handler) de Shindig appelle le SPI (Shindig Service Provider) qui est défini par un ensemble d'interfaces avec des méthodes qui retournent des ResponseItems (des POJOs). Le SPI est l'endroit où établir des passerelles avec les autres modules du serveur (backend)6. Le gestionnaire (handler) retourne un ResponseItem qui enveloppe un seul ou un ensemble de POJOs. La servlet peut alors retourner cette réponse ou accumuler les ResponseItems lors d' un traitement en lot.7. La servlet convertit / sérialise et retourne le ou les ResponseItem(s) en XML ou JSON


Serveur Shindig – DémoServeur Shindig – Démo

Code DemoCode Demohttp://localhost:8080/gadgets/files/samplecontainer/samplecontainer.htmlhttp://localhost:8080/gadgets/files/samplecontainer/samplecontainer.html

http://localhost:8080/gadgets/ifr?url=http://www.labpixies.com/campaigns/todo/todo.xmlhttp://localhost:8080/gadgets/ifr?url=http://www.labpixies.com/campaigns/todo/todo.xml

http://localhost:8080/social/rest/people/john.doe/@allhttp://localhost:8080/social/rest/people/john.doe/@all

http://localhost:8080/social/rest/people/john.doehttp://localhost:8080/social/rest/people/john.doe

http://localhost:8080/gadgets/files/samplecontainer/samplecontainer.html

http://localhost:8080/gadgets/ifr?url=http://www.labpixies.com/campaigns/todo/todo.xml

http://localhost:8080/social/rest/people/john.doe/@all

http://localhost:8080/social/rest/people/john.doe


OpenSocial - OpenSocial - Avantages & inconvénientsAvantages & inconvénients



Contraintes apportées par la normeContraintes apportées par la norme

Plusieurs vieilles versions de gadgets GooglePlusieurs vieilles versions de gadgets Google

Difficultés inhérentes à la création de grosses applications en Difficultés inhérentes à la création de grosses applications en

HTML et JavaScriptHTML et JavaScript

Difficultés inhérentes au partage d'une norme par des entreprises Difficultés inhérentes au partage d'une norme par des entreprises

concurrentesconcurrentes

Dépendance de GoogleDépendance de Google

Pas adapté aux services critiques avec des transactions sécuriséesPas adapté aux services critiques avec des transactions sécurisées

Problème de sécuritéProblème de sécurité

OpenSocial - InconvénientsOpenSocial - Inconvénients


Présente les avantages usuels d'une norme : interopérabilité, Présente les avantages usuels d'une norme : interopérabilité,

portabilité, création d'une masse critique, apprentissage réduit, portabilité, création d'une masse critique, apprentissage réduit,

meilleure documentation, meilleurs outils, plus grande productivité, meilleure documentation, meilleurs outils, plus grande productivité,

réduction des coûts, pérennité de la technologieréduction des coûts, pérennité de la technologie

Endossement par de grands joueurs comme GoogleEndossement par de grands joueurs comme Google

Permet aux applications tierces de rouler sur un plus grand Permet aux applications tierces de rouler sur un plus grand

nombre de sites Web sociauxnombre de sites Web sociaux

Plus d'applications accessibles à plus de personnesPlus d'applications accessibles à plus de personnes

Permet aux opérateurs de sites sociaux de se concentrer sur leurs Permet aux opérateurs de sites sociaux de se concentrer sur leurs

métiers et services et de consacrer moins d'efforts sur les métiers et services et de consacrer moins d'efforts sur les

développements technologiquesdéveloppements technologiques

Selon Hal Varian : L'adoption de normes entrîne le passage d'une Selon Hal Varian : L'adoption de normes entrîne le passage d'une

compétition pour un marché vers une compétition dans un marchécompétition pour un marché vers une compétition dans un marché

OpenSocial - AvantagesOpenSocial - Avantages


GWT & gadgetsGWT & gadgets

GWT =GWT =

* Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com

AJAXAJAX

++

Génie logicielGénie logiciel

http://www.google.com/

http://www.sun.com/


GWT – Atelier Java de Gadgets!GWT – Atelier Java de Gadgets!

Le Google Web Toolkit (GWT) permet l'emploi de Le Google Web Toolkit (GWT) permet l'emploi de techniques éprouvées (State of the Art) du génie techniques éprouvées (State of the Art) du génie logiciel. logiciel.

De plus, GWT prend avantage des outils Java comme De plus, GWT prend avantage des outils Java comme Eclipse pour créer rapidement des applications Ajax de Eclipse pour créer rapidement des applications Ajax de style bureautique (“desktop-like”) qui tournent dans un style bureautique (“desktop-like”) qui tournent dans un fureteur. fureteur.

http://code.google.com/webtoolkit/


GWT produit déjà des applications clientes en pur HTML et GWT produit déjà des applications clientes en pur HTML et

JavaSCript très proches parentes des gadgetsJavaSCript très proches parentes des gadgets

En effet, on peut utiliser les atouts de GWT pour produire à En effet, on peut utiliser les atouts de GWT pour produire à

partir d'un code Java des gadgets en JavaScript optimisépartir d'un code Java des gadgets en JavaScript optimisé

Voici la recette* : Voici la recette* :

Google API Libraries for Google Web ToolkitGoogle API Libraries for Google Web Toolkit http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=GadgetsGettingStartedhttp://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=GadgetsGettingStarted

GWT – Atelier Java de gadgets?GWT – Atelier Java de gadgets?

* Note : ne produit pas encore un gadget à la norme OpenSocial, mais selon la norme Google Gadget

http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=GadgetsGettingStarted


<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?>

<Module><Module>

<ModulePrefs author="Claude Coulombe" author_email="[email protected]" height="300" title="SimpleGadget"/><ModulePrefs author="Claude Coulombe" author_email="[email protected]" height="300" title="SimpleGadget"/>

<Content type="html"><Content type="html">

<![CDATA[<![CDATA[

<script><script>

function com_example_simplegadget_SimpleGadget(){ function com_example_simplegadget_SimpleGadget(){

… …

</script></script>

]]>]]>

</Content> </Content>

</Module></Module>

GWT & gadget GWT & gadget – Fichiers de configuration XML– Fichiers de configuration XML

<module>  <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.standard.Standard'/>

 <inherits name="com.google.gwt.gadgets.Gadgets" />

 <entry-point class='com.example.simplegadget.client.SimpleGadget'/>  <stylesheet src='SimpleGadget.css' /></module>

com.example.simplegadget.client.SimpleGadget.gadget.xml

SimpleGadget.gwt.xml


package com.google.gwt.gadgets.sample.hellogadgets.client;package com.google.gwt.gadgets.sample.hellogadgets.client;

import com.google.gwt.gadgets.client.Gadget;import com.google.gwt.gadgets.client.Gadget;

......

@ModulePrefs( title = "Mon premier gadget avec GWT", author = "Claude Coulombe", height = 300 )@ModulePrefs( title = "Mon premier gadget avec GWT", author = "Claude Coulombe", height = 300 )

public class HelloGadget extends Gadget<HelloPreferences> {public class HelloGadget extends Gadget<HelloPreferences> {

protected void init(final HelloPreferences prefs) {protected void init(final HelloPreferences prefs) {

Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png");Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png");

Button button = new Button("Cliquez-moi!");Button button = new Button("Cliquez-moi!");

VerticalPanel vPanel = new VerticalPanel();VerticalPanel vPanel = new VerticalPanel();

vPanel.setWidth("100%");vPanel.setWidth("100%");

vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);

vPanel.add(img);vPanel.add(img);

vPanel.add(button);vPanel.add(button);

RootPanel.get().add(vPanel)RootPanel.get().add(vPanel)

button.addClickListener(new ClickListener() {button.addClickListener(new ClickListener() {

public void onClick(Widget sender) {public void onClick(Widget sender) {

Window.alert("Mon premier gadget avec GWT");Window.alert("Mon premier gadget avec GWT");

}}

});});

}}

}}

GWT & gadget – GWT & gadget – Un peu de code Java...Un peu de code Java...


GWT – Atelier Java de Gadgets!GWT – Atelier Java de Gadgets!

* Note: Do not yet allow to generate a gadget according the full OpenSocial standard, but according to the standard Google Gadget

c

Compiler avec GWT pour générer le code JS du gadgetCompiler avec GWT pour générer le code JS du gadget

Déploiement facile sur un serveur Web externeDéploiement facile sur un serveur Web externe

Intégrer facilement le gadget dans un conteneurIntégrer facilement le gadget dans un conteneur


GWT & Gadget – Code DemoGWT & Gadget – Code Demo

Code DemoCode Demo

http://localhost:8080/gadgets/ifr?url=http://www.kayakissimo.org/SimpleGadget/SimpleGadget/com.example.simplegadget.client.SimpleGadget.gadget.xmlhttp://localhost:8080/gadgets/ifr?url=http://www.kayakissimo.org/SimpleGadget/SimpleGadget/com.example.simplegadget.client.SimpleGadget.gadget.xml

http://localhost:8080/gadgets/ifr?url=http://www.kayakissimo.org/SimpleGadget/SimpleGadget/com.example.simplegadget.client.SimpleGadget.gadget.xml


ConclusionConclusion

Il y a des concepts architecturaux et des patrons de Il y a des concepts architecturaux et des patrons de

conception (design patterns) communs derrière les sites de conception (design patterns) communs derrière les sites de

réseau social. réseau social.

De la prolifération des sites de réseau social a emergé le De la prolifération des sites de réseau social a emergé le

besoin de normes communes.besoin de normes communes.

Un ensemble de technologies libres (Stack of Open Source Un ensemble de technologies libres (Stack of Open Source

Technologies) est en train d'émerger pour le Web socialTechnologies) est en train d'émerger pour le Web social

La norme OpenSocial mise de l'avant par Google et ses La norme OpenSocial mise de l'avant par Google et ses

partenaires est mature et suscite l'adhésion partenaires est mature et suscite l'adhésion (plus de 600 (plus de 600 millions d'utilisateurs)millions d'utilisateurs)


QuestionsQuestions

??

Technology

Web social - GTI780 & MTI780 - ETS - A09