Web social
                         Sujets spéciaux en TI

                    Le Web 2.0 : concepts et outils

          ...
Web social




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Web social
   À la base, Internet est un réseau, un réseau
   de serveurs de contenus et de plus en plus un
   réseau d'ap...
Réseautage social en ligne




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Réseautage social en ligne
   Une application de réseau social en ligne (ou site de
   réseautage), comme MySpace ou Faceb...
Sites de réseau social
 Le premier site Internet de réseautage social fut
 www.classmates.com toujours en activité depuis ...
Friendster
Cependant le « boum » se produisit autour de 2002
avec entre autres le site Friendster www.friendster.com




d...
MySpace
Dépassé par MySpace en 2004 www.MySpace.com
qui compterait 264 millions d'utilisateurs et enregistre
des revenus d...
FaceBook
Lui-même dépassé par FaceBook www.FaceBook.com
en 2007 qui compte 300 millions d'utilisateurs et qui
déclarait de...
Réseaux d'affaires
Certains réseaux comme www.LinkedIn.com misent sur
les contacts ou relations d'affaires et la spécialis...
Réseaux sociaux – NING
Ning est une plateforme conviviale et gratuite de
création de réseaux sociaux selon la norme OpenSo...
Réseaux sociaux – Lois économiques
Loi de Sarnoff : La valeur d'un réseau qui offre un service comme le
   réseau téléphon...
Réseaux sociaux – Démo de Ning



                    Demo




GTI-780 / MTI-780          ETS - Montréal - 2009
Web social - Patrons d'application




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 20...
Web social - Patrons d'application
   Réseau social (Social Network) : patron
   d'application Web 2.0 qui permet aux util...
Web social –                 Composantes d'applications




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com ...
Web social –                     Composantes d'applications
   Espace personnel comportant un profil (coordonnées, âge, s...
Web social –                 Applications tierces
   En plus d'un ensemble d'applications de base fournies par
    l'opér...
Site de réseau social -                           Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : htt...
Site de réseau social - Avantages
Démocratisation des moyens de production et de diffusion

d'informations, de musique et ...
Site de réseau social - Inconvénients
   « Effet de mode »
   Menaces et atteintes à la vie privée
   Utilisation abusi...
Gadgets


             Gadgets




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Gadgets - définition
  Les gadgets (ou widgets) sont des mini sites web, en général de
 petits blocs de contenu autonomes,...
Gadgets – Aspects techniques
   Petites applications comportant : XML, HTML et JavaScript en
   plus de ressources comme d...
Conteneur de gadgets - Netvibes




GTI-780 / MTI-780        ETS - Montréal - 2009
Conteneur de gadgets - iGoogle




GTI-780 / MTI-780        ETS - Montréal - 2009
Architecture à base de gadgets
 Basée sur le patron d'applications conteneur (Container) :
application avec une structure ...
Serveur de Gadgets
Génère HTML, JavaScript & CSS à partir des spécifications




GTI-780 / MTI-780 Source http://www.slide...
Conteneur de Gadgets
 Affiche l'interface-utilisateur du réseau social
 Ouvre un iFrame pour insérer le gadget




GTI-780...
Conteneur de Gadgets - Comment ça marche?
1) Fureteur client demande une application à Gadgets
2) Conteneur demande la spé...
Conteneur de Gadgets - Comment ça marche?
1) Application à Gadgets demande le contenu distant
2) Conteneur demande le cont...
Gadgets - Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2...
Gadgets - Inconvénients
 « Phénomène de mode »
 Tendance à la multiplication des gadgets et des services d'utilité douteus...
Gadgets - Avantages
 Couplage faible, encore le découplage!!! ;-)
 Favorise la réutilisation
 Facile à développer
 Légers ...
REST


             REST




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
REST – La simplicité du Web
  On se connecte sur un serveur, on lui donne un chemin (URL/URI)
  vers un document et le ser...
REST
  REST (REpresentational State Transfer)*
  plus clairement appelé architecture orientée ressources ROA
  (Resource-O...
REST – API uniforme

  Obtenir une représentation d'une ressource : GET


  Créer une nouvelle ressource : PUT avec nouvel...
REST – Qualités d'un service RESTful
  Adressabilité : une URI/URL pour chaque information utile
  Sans état (stateless) :...
RPC


             RPC




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
RPC
  Appel de procédure à distance RPC (Remote
Procedure Call)
  Protocole de communication inter-processus qui
permet à ...
RPC - Comparaison avec REST
  REST et RPC sont différents à plusieurs niveaux

                    REST                   ...
REST – Hybrides REST-RPC
  Il existe aussi des hydrides REST-RPC ou faux services
  REST
         Par exemple Flickr qui u...
Exercice – Rendre REST une API RPC
         Exemple
GET + URL :
http: //www.mon_site/mes_services?
         id=usager&pw=1...
Exercice – Rendre REST une API RPC
         Solution
DELETE + URL :
http: //www.mon_site/mes_services/usager/rapport780?pw...
Norme OpenSocial




GTI-780 / MTI-780   * Source image : http://code.google.com/apis/opensocial/   ETS - Montréal - 2009
Norme OpenSocial
  Avec la prolifération de sites et réseaux sociaux émerge le besoin de normes et
d'outils en sources lib...
Norme OpenSocial




GTI-780 / MTI-780 Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-prese...
Norme OpenSocial



             OpenSocial




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Mont...
Norme OpenSocial
 Définit un format XML pour les applications, comprenant l'interface-
utilisateur (HTML/CSS/Javascript) e...
Norme OpenSocial




GTI-780 / MTI-780Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presen...
Norme OpenSocial – Client Gadget
  Caractéristiques du client Javascript
                    Conteneur de gadgets (gadget....
Norme OpenSocial – Bibliothèque JS
  OpenSocial – Bibliothèque Javascript




GTI-780 / MTI-780   Source : http://incubato...
OpenSocial – un peu de code
Demande d'information sur un ami...
function getFriendData() {
    var req = opensocial.newDat...
OpenSocial – REST & RPC
 OpenSocial offre à la fois des services Web REST et RPC
 REST (Representational State Transfer)
 ...
OpenSocial – Services REST
 Basé sur la norme AtomPub (Atom publishing protocol) et JSON
/people/{guid}/@all
-- Retourne l...
OpenSocial – Services RPC
 Paramètres spécifient la méthode à appeler, pas limité aux 4 verbes REST
 Support du mode lot*
...
Shindig


             Shindig




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal - 2009
Serveur Shindig
 Implantation de référence de la norme OpenSocial
 En Java et en PHP
 Projet Apache en logiciel libre et s...
Serveur Shindig
 3 composants principaux
                    Serveur de Gadgets, XML → HTML
                    Serveur du...
Serveur Shindig
1. Requête à Shindig via /social/rest ou
  /social/rpc (REST API ou JSON-RPC API)
2. La servlet créée un R...
Serveur Shindig – Démo



                                  Code Demo
http://localhost:8080/gadgets/files/samplecontainer/...
OpenSocial - Avantages & inconvénients




GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - Montréal ...
OpenSocial - Inconvénients
Contraintes apportées par la norme
Plusieurs vieilles versions de gadgets Google
Difficultés in...
OpenSocial - Avantages
  Présente les avantages usuels d'une norme : interopérabilité,
portabilité, création d'une masse c...
GWT & gadgets


                                                                              AJAX
             GWT =
    ...
GWT – Atelier Java de Gadgets!
Le Google Web Toolkit (GWT) permet l'emploi de
techniques éprouvées (State of the Art) du g...
GWT – Atelier Java de gadgets?
 GWT produit déjà des applications clientes en pur HTML et
 JavaSCript très proches parente...
GWT & gadget – Fichiers de configuration XML
com.example.simplegadget.client.SimpleGadget.gadget.xml

<?xml version="1.0" ...
GWT & gadget – Un peu de code Java...
      package com.google.gwt.gadgets.sample.hellogadgets.client;
      import com.go...
GWT – Atelier Java de Gadgets!
 Compiler avec GWT pour générer le code JS du gadget
 Déploiement facile sur un serveur Web...
GWT & Gadget – Code Demo



                                              Code Demo

http://localhost:8080/gadgets/ifr?url...
Conclusion
 Il y a des concepts architecturaux et des patrons de
conception (design patterns) communs derrière les sites d...
Questions




                                   ?

GTI-780 / MTI-780   * Source Clipart : http://www.clipart.com   ETS - ...
Prochain SlideShare
Chargement dans…5
×

Web social - GTI780 & MTI780 - ETS - A09

1 504 vues

Publié le

Présentation sur le Web social dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 504
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
44
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Web social - GTI780 & MTI780 - ETS - A09

  1. 1. Web social Sujets spéciaux en TI Le Web 2.0 : concepts et outils École de technologie supérieure par Claude Coulombe GTI-780 / MTI-780 ETS - Montréal - 2009
  2. 2. Web social GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  3. 3. Web social À la base, Internet est un réseau, un réseau de serveurs de contenus et de plus en plus un réseau d'applications mais également un réseau d'utilisateurs. Il est donc tout à fait naturel, dans le contexte du Web 2.0, où l'accent est mis sur les utilisateurs, que soient apparues des applications Web qui mettent en valeur les réseaux d'utilisateurs d'Internet. GTI-780 / MTI-780 ETS - Montréal - 2009
  4. 4. Réseautage social en ligne GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  5. 5. Réseautage social en ligne Une application de réseau social en ligne (ou site de réseautage), comme MySpace ou Facebook, permet à ses utilisateurs d'entrer des informations personnelles (profils) et d'interagir avec d'autres utilisateurs. Ces informations permettent de retrouver des utilisateurs ou « pseudo amis » partageant les mêmes intérêts. Les utilisateurs peuvent former des groupes et y inviter d'autres personnes. Les interactions entre membres comportent le plus souvent des discussions et le partage de photos, de baladodiffusions, de vidéos, de liens et de documents. GTI-780 / MTI-780 ETS - Montréal - 2009
  6. 6. Sites de réseau social Le premier site Internet de réseautage social fut www.classmates.com toujours en activité depuis 1995. GTI-780 / MTI-780 * 50 M utilisateurs enregistrés ETS - Montréal - 2009
  7. 7. Friendster Cependant le « boum » se produisit autour de 2002 avec entre autres le site Friendster www.friendster.com dont le succès s'étiola après le rejet d'une offre de 30 M$ 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=slogin GTI-780 / MTI-780 * 90 M utilisateurs enregistrés ETS - Montréal - 2009
  8. 8. MySpace Dépassé par MySpace en 2004 www.MySpace.com qui compterait 264 millions d'utilisateurs et enregistre des revenus de 900 M$ en 2008 GTI-780 / MTI-780 * 264 M utilisateurs enregistrés ETS - Montréal - 2009
  9. 9. FaceBook Lui-même dépassé par FaceBook www.FaceBook.com en 2007 qui compte 300 millions d'utilisateurs et qui déclarait des revenus de 350 M$ en 2008 GTI-780 / MTI-780 * 300 M utilisateurs enregistrés ETS - Montréal - 2009
  10. 10. Réseaux d'affaires Certains réseaux comme www.LinkedIn.com misent sur les contacts ou relations d'affaires et la spécialisation * Source : http://rdfweb.org/foafcorp/intro.html GTI-780 / MTI-780 * 43 M utilisateurs enregistrés ETS - Montréal - 2009
  11. 11. Réseaux sociaux – NING Ning est une plateforme conviviale et gratuite de création de réseaux sociaux selon la norme OpenSocial. Demo GTI-780 / MTI-780 ETS - Montréal - 2009
  12. 12. Réseaux sociaux – Lois économiques Loi de Sarnoff : 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 personnels) croît proportionnellement à la taille du réseau, i.e V = k.N Loi de Metcalfe : La valeur d'un réseau qui offre un service où chaque utilisateur a avantage à transiger avec chacun des autres utilisateurs croît proportionnellement au carré de la taille du réseau, i.e V = k.N2 Loi de Reed : La valeur d'un réseau qui favorise la construction de sous-groupes (Group-Forming Networks) croît exponentiellement avec la taille du réseau, i.e. V = k.2N GTI-780 / MTI-780 * Source : http://www.reed.com/gfn/docs/reedslaw.html ETS - Montréal - 2009
  13. 13. Réseaux sociaux – Démo de Ning Demo GTI-780 / MTI-780 ETS - Montréal - 2009
  14. 14. Web social - Patrons d'application GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  15. 15. Web social - Patrons d'application Réseau social (Social Network) : patron d'application Web 2.0 qui permet aux utilisateurs d'entrer des profils et du contenu, de former des groupes et d'interagir avec d'autres utilisateurs partageant ses intérêts Conteneur de gadgets : Application avec architecture de plugiciels (plugins) qui se compose d'un ensemble de petites applications et d'utilitaires GTI-780 / MTI-780 ETS - Montréal - 2009
  16. 16. Web social – Composantes d'applications GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  17. 17. Web social – Composantes d'applications  Espace personnel comportant un profil (coordonnées, âge, sexe, nationalité, niveau d'études, photo) et des centres d'intérêt  L'utilisateur peut organiser et personnaliser son espace  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)  Outils pour créer, inviter et gérer des groupes  Outil pour créer, proposer et gérer des activités  Fils RSS : syndication de contenu http://fr.wikipedia.org/wiki/RSS_(format)  Blogue : journal personnel qui contient essentiellement des opinions personnelles sur différents sujets ou d'une thématique particulière. Offre la possibilité aux visiteurs de commenter* http://fr.wikipedia.org/wiki/Blog  Outils de partage de photos, de baladodiffusions (podcast), de vidéos, de signets et de documents textuels  Outils de conversation Web : synchrone (ex. messagerie instantanée) ou asynchrone (ex. courriel ou forum) http://fr.wikipedia.org/wiki/Forum_Internet GTI-780 / MTI-780 * Note: ou plus simplement un livre d'or ETS - Montréal - 2009
  18. 18. Web social – Applications tierces  En plus d'un ensemble d'applications de base fournies par l'opérateur du site, beaucoup de sites sont ouverts aux applications tierces  Cette ouverture contribue au succès des sites  Certaines applications tierces font l'objet d'un partage des revenus publicitaires  8000 applications tierces sur Facebook en 2007  Des outils et des canevas d'applications (FrameWorks) sont proposés aux développeurs pour faciliter leur travail  Cependant, les normes sont souvent propriétaires comme le fameux FBML, une variante du HTML pour FaceBook  Par exemple, en 2007 FaceBook a lancé une plateforme et des APIs pour créer de petites applications appelée Widgets. Mais les widgets FaceBook ne tournent que dans FaceBook. GTI-780 / MTI-780 ETS - Montréal - 2009
  19. 19. Site de réseau social - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  20. 20. Site de réseau social - Avantages Démocratisation des moyens de production et de diffusion d'informations, de musique et de contenus audiovisuels Permet de se créer un site personnalisé et à son image Partage des centres d'intérêt et des passions Permet de retrouver des copains ou des amis Diffusion internationale Divertissement a priori peu coûteux et accessible Au plan technique Réponses rapides aux actions de l'utilisateur Applications Web riches, rapides et légères Pas de long téléchargement, ni d'installation Compatibilité avec tous les fureteurs Web Le fureteur devient la plateforme GTI-780 / MTI-780 ETS - Montréal - 2009
  21. 21. Site de réseau social - Inconvénients  « Effet de mode »  Menaces et atteintes à la vie privée  Utilisation abusive des données personnelles des utilisateurs par les propriétaires des sites  Publicité envahissante. Par exemple en 2007, lancement du logiciel publicitaire Beacon de FaceBook qui communique de l'information sur les achats des membres à leurs « amis »... (maintenant avec consentement)  Activité consommatrice de temps et pas très utile  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 personnelles (Data lock-in)*  Problèmes de compatibilité entre les différents réseaux  Problème des droits d'auteur, contrefaçon  Contenus violents, racistes, pornographiques, faux, mensongers  L'aspect sécurité est à surveiller  Au plan technique, nombreuses APIs et normes propriétaires, pas d'interopérabilité * Après le « hardware lock-in » et le « software lock-in » GTI-780 / MTI-780 selon Tim O'Reilly ETS - Montréal - 2009
  22. 22. Gadgets Gadgets GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  23. 23. Gadgets - définition 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 dans un conteneurs de gadgets Popularisés par la norme porlet (portail Excite) mais qui nécessitait le rechargement complet de la page, remplacés par les webagrégats (ou aggrégateur de gadgets) en Ajax au rafraîchissement asynchrone Les gadgets sont de petites applications constituées de : XML, HTML et JavaScript auxquels s'ajoutent des ressources comme des images et des fichiers CSS XML sert en général à décrire la configuration du gadget HTML sert de support au contenu statique JavaScript fournit l'interactivité (le comportement dynamique) et assure les communications avec les services Web externes GTI-780 / MTI-780 ETS - Montréal - 2009
  24. 24. Gadgets – Aspects techniques Petites applications comportant : XML, HTML et JavaScript en plus de ressources comme des images et des CSS XML pour la spécification du gadget HTML pour le support du contenu statique JavaScript pour l'interactivité & les communications via des services Web <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs author="Claude Coulombe" author_email="claude.coulombe@umontreal.ca" height="300" title="SimpleGadget"/> <Content type="html"> <![CDATA[ <script> function com_example_simplegadget_SimpleGadget(){ … </script> ]]> </Content> </Module> GTI-780 / MTI-780 * Source image : http://code.google.com/apis/opensocial/ ETS - Montréal - 2009
  25. 25. Conteneur de gadgets - Netvibes GTI-780 / MTI-780 ETS - Montréal - 2009
  26. 26. Conteneur de gadgets - iGoogle GTI-780 / MTI-780 ETS - Montréal - 2009
  27. 27. Architecture à base de gadgets Basée sur le patron d'applications conteneur (Container) : application avec une structure de style plugiciel (plugin) qui contient un ensemble de petites applications ou utilitaires Conteneur offre un bac à sable (sandbox) pratique et sécuritaire pour l'exécution de gadgets Popularisée par les sites web sociaux Services Web légers (du style REST) et composants logiciels légers (gadgets à base de XHTML et JavaScript) GTI-780 / MTI-780 ETS - Montréal - 2009
  28. 28. Serveur de Gadgets Génère HTML, JavaScript & CSS à partir des spécifications GTI-780 / MTI-780 Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation ETS - Montréal - 2009
  29. 29. Conteneur de Gadgets Affiche l'interface-utilisateur du réseau social Ouvre un iFrame pour insérer le gadget GTI-780 / MTI-780 Source http://incubator.apache.org/shindig/index.html ETS - Montréal - 2009
  30. 30. Conteneur de Gadgets - Comment ça marche? 1) Fureteur client demande une application à Gadgets 2) Conteneur demande la spéc. du Gadget du serveur hôte 3) Conteneur convertit la spécification du Gadget en HTML via le serveur de gadgets lequel gadget est affiché par le client GTI-780 / MTI-780 Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation ETS - Montréal - 2009
  31. 31. Conteneur de Gadgets - Comment ça marche? 1) Application à Gadgets demande le contenu distant 2) Conteneur demande le contenu à partir de l'URL spécifique 3) Conteneur retourne une réponse au Gadget qui affiche le contenu GTI-780 / MTI-780 Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation ETS - Montréal - 2009
  32. 32. Gadgets - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  33. 33. Gadgets - Inconvénients « Phénomène de mode » Tendance à la multiplication des gadgets et des services d'utilité douteuse Difficile à tester Problème de sécurité Problème d'interopérabilité Limité quant à la complexité si l'on développe directement en JavaScript GTI-780 / MTI-780 ETS - Montréal - 2009
  34. 34. Gadgets - Avantages Couplage faible, encore le découplage!!! ;-) Favorise la réutilisation Facile à développer Légers et peu exigeants en bande passante et capacité des serveurs Déploiement potentiel sur plusieurs sites Web sociaux Facile pour l'usager d'ajouter / retirer des gadgets et de les personnaliser GTI-780 / MTI-780 ETS - Montréal - 2009
  35. 35. REST REST GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  36. 36. REST – La simplicité du Web 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 document. C'est simplement HTTP On peut voir cela comme l'échange de documents dans des enveloppes URI, HTML ou XML et HTTP Adressable et sans état (Stateless) Cycle HTTP : 1) Construction de la requête : méthode HTTP + URL/URI + HTTP entêtes + document (dans le cas de GET ou POST) 2) Envoi de la requête à un serveur HTTP 3) Réception et traitement de la réponse : statut de la réponse + entêtes + document retourné GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Fielding, en 2000 ETS - Montréal - 2009
  37. 37. REST REST (REpresentational State Transfer)* plus clairement appelé architecture orientée ressources ROA (Resource-Oriented Architecture) ou RESTful Web services Repose sur la notion de ressources Pas de gestion d'état (stateless) Chaque ressource est accessible via une URI/URL unique Un ensemble de types de contenus MIME en requête et en réponse Chaque ressource répond à un ensemble de commandes HTTP de base qui correspondent aux opérations classiques dites CRUD – GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Thomas Fielding, ETS - Montréal - 2009
  38. 38. REST – API uniforme Obtenir une représentation d'une ressource : GET Créer une nouvelle ressource : PUT avec nouvel URI Créer une sous-ressource ou une extension : POST avec URI existante Modifier une ressource : PUT avec URI existante Détruire une ressource : DELETE avec URI existante GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Fielding, en 2000 ETS - Montréal - 2009
  39. 39. REST – Qualités d'un service RESTful Adressabilité : une URI/URL pour chaque information utile Sans état (stateless) : chaque requête HTTP est complète et isolée, toute l'information nécessaire est fournie au serveur Représentation : un document échangé, l'état d'une ressource Hyperliens et connectivité : les documents contiennent des hyperliens vers d'autres ressources Sans effet de bord : un GET va lire des informations sans rien changer à l'état du serveur Idempotence : une opération sur une ressource est idempotente si l'effet reste le même que l'on effectue l'opération une fois ou plusieurs fois. PUT et DELETE sont idempotents. POST n'est ni idempotent ni sans effet de bord GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Fielding, en 2000 ETS - Montréal - 2009
  40. 40. RPC RPC GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  41. 41. RPC Appel de procédure à distance RPC (Remote Procedure Call) Protocole de communication inter-processus qui permet à un logiciel de demander l'exécution d'une procédure sans avoir à coder explicitement les détails RPC permet l'échange facile d'objets (POJOS) entre le client et le serveur Seulement une cible (i.e. uneseul URL) + paramètres Paramètres spécifient les méthodes (procédures) à appeler, donc pas limités aux 4 méthodes REST GTI-780 / MTI-780 ETS - Montréal - 2009
  42. 42. RPC - Comparaison avec REST REST et RPC sont différents à plusieurs niveaux REST RPC 4 procédures : GET, POST, Différents appels de PUT, DELETE procédures qui varient avec les applications Document dans une enveloppe Enveloppe SOAP XML dans HTTP une enveloppe HTTP Procédure dans la méthode Procédure dans l'URI HTTP pas dans l'URI Usage selon les besoins du Surcharge du POST HTTP ou GET, POST, PUT, DELETE utilisation unique du GET ou du POST GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Fielding, en 2000 ETS - Montréal - 2009
  43. 43. REST – Hybrides REST-RPC Il existe aussi des hydrides REST-RPC ou faux services REST Par exemple Flickr qui utilise le GET pour détruire http://www.flickr.com/services/...&method=flickr.photos.delete Aussi Delicious qui utilise le GET et des méthodes dans l'URI https ://api.del.icio.us/.../add Un exemple très fréquent : Soumission d'un formu- laire avec un POST (le POST est surchargé i.e. il peut être remplacé par différentes procédures non HTTP) Un service qui utilise exclusivement le POST ou le GET est habituellement un service de style RPC GTI-780 / MTI-780 *Note : Thèse de doctorat de Roy Fielding, en 2000 ETS - Montréal - 2009
  44. 44. Exercice – Rendre REST une API RPC Exemple GET + URL : http: //www.mon_site/mes_services? id=usager&pw=123&doc=rapport780&&method=delete GTI-780 / MTI-780 ETS - Montréal - 2009
  45. 45. Exercice – Rendre REST une API RPC Solution DELETE + URL : http: //www.mon_site/mes_services/usager/rapport780?pw=123 GTI-780 / MTI-780 ETS - Montréal - 2009
  46. 46. Norme OpenSocial GTI-780 / MTI-780 * Source image : http://code.google.com/apis/opensocial/ ETS - Montréal - 2009
  47. 47. Norme OpenSocial Avec la prolifération de sites et réseaux sociaux émerge le besoin de normes et d'outils en sources libres Créé en réaction* à la prolifération de normes et d'APIs propriétaires ou spécifiques à un seul site (novembre 2007) La loi de Reed explique pourquoi une évolution vers un réseau social gloabl, ouvert et interopérable est probable. 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érents Combinaison des Google gadgets, d'un conteneur de gadgets et d'APIs de communication normalisés Partenaires de l'OpenSocial Foundation: Engage.com, Friendster, Google, hi5, Hyves, imeem, LinkedIn, MySpace, Ning, Oracle, orkut, Plaxo, Salesforce.com, Six Apart, Tianji, Viadeo, XING, Yahoo! http://www.opensocial.org/ http://code.google.com/apis/opensocial GTI-780 / MTI-780 * Note : beaucoup en réaction à FaceBook ETS - Montréal - 2009
  48. 48. Norme OpenSocial GTI-780 / MTI-780 Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation ETS - Montréal - 2009
  49. 49. Norme OpenSocial OpenSocial GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  50. 50. Norme OpenSocial Définit un format XML pour les applications, comprenant l'interface- utilisateur (HTML/CSS/Javascript) et des métadonnées (titre, auteur, courriel, taille du gadget, préférences) Définit des APIs pour des services Web pour l'échange de données, incluant des services REST et de la persistance de données Service d'authentification Trois principaux services de la norme OpenSocial : 1) Personnes & Relations (amis) (accès par programmation aux informations sur les amis) 2) Activités (Qu'est ce vos amis veulent faire? Faites savoir ce que vous faites) 3) Persistance (données de l'application, données des gadgets) (Fournir un état sans le serveur, partager des données avec vos amis) GTI-780 / MTI-780 ETS - Montréal - 2009
  51. 51. Norme OpenSocial GTI-780 / MTI-780Source http://www.slideshare.net/chanezon/google-devfest-singapore-opensocial-presentation ETS - Montréal - 2009
  52. 52. Norme OpenSocial – Client Gadget Caractéristiques du client Javascript Conteneur de gadgets (gadget.js), Gadgets OpenSocial Conteneur OpenSocial JSON, Conteneur RESTful GTI-780 / MTI-780 Source : http://incubator.apache.org/shindig/overview.html ETS - Montréal - 2009
  53. 53. Norme OpenSocial – Bibliothèque JS OpenSocial – Bibliothèque Javascript GTI-780 / MTI-780 Source : http://incubator.apache.org/shindig/overview.html ETS - Montréal - 2009
  54. 54. OpenSocial – un peu de code Demande d'information sur un ami... function getFriendData() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(VIEWER),'viewer'); req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS),'viewerFriends'); req.send(onLoadFriends); } Fonction de rappel (Callback) des données sur un ami... function onLoadFriends(resp) { var viewer = resp.get('viewer').getData(); var viewerFriends = resp.get('viewerFriends').getData(); var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’; viewerFriends.each(function(person) { html += '<li>' + person.getDisplayName()+'</li>'; }); html += '</ul>'; document.getElementById('friends').innerHTML = html; } GTI-780 / MTI-780 * Source code : http://www.google.com ETS - Montréal - 2009
  55. 55. OpenSocial – REST & RPC OpenSocial offre à la fois des services Web REST et RPC REST (Representational State Transfer) RPC (Remote Procedure Call) Formats de données : XML, JSON, AtomPub GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009
  56. 56. OpenSocial – Services REST Basé sur la norme AtomPub (Atom publishing protocol) et JSON /people/{guid}/@all -- Retourne l'ensemble de toutes les personnes en relation avec l'usager {guid} /people/{guid}/@friends -- Retourne l'ensemble de toutes les personnes amies de l'usager {guid} -- i.e. un sous-ensemble de @all /people/{guid}/@self -- Retour l'information contenue dans le profil de l'usager {guid} /activities/{guid}/@self -- Retourne l'ensemble de toutes les activités générées par l'usager {guid} /activities/{guid}/@friends -- Retourne l'ensemble de toutes les activités des amis de l'usager {guid} GTI-780 / MTI-780 * Source code : http://www.google.com ETS - Montréal - 2009
  57. 57. OpenSocial – Services RPC Paramètres spécifient la méthode à appeler, pas limité aux 4 verbes REST Support du mode lot* Spécification facile de groupes d'usagers*, par passage d'arguments POST /rpc HTTP/1.1Host: api.example.orgAuthorization: <Auth token> Content-Type: application/json { "method" : "people.get", "id" : "myself" "params" : { "userid" : "@me", "groupid" : "@self" } } GTI-780 / MTI-780 * Note : considéré plus difficile avec REST ETS - Montréal - 2009
  58. 58. Shindig Shindig GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  59. 59. Serveur Shindig Implantation de référence de la norme OpenSocial En Java et en PHP Projet Apache en logiciel libre et supporté par un consortium d'entreprises mené par Google Comporte 4 parties principales : 1) Conteneur de gadgets JavaScript (IU, sécurité, communication, préf.) 2) Serveur de gadgets (spécifications XML vers JS + HTML) 3) Conteneur OpenSocial (couche au-dessus du conteneur de gadgets) : profils, amis, activités 4) Passerelle du serveur OpenSocial : interface vers d'autres serveurs de contenu incluant des APIs REST http://incubator.apache.org/shindig/ GTI-780 / MTI-780 ETS - Montréal - 2009
  60. 60. Serveur Shindig 3 composants principaux Serveur de Gadgets, XML → HTML Serveur du conteneur JavaScript OpenSocial Serveur de données persistantes GTI-780 / MTI-780 * Source : http://incubator.apache.org/shindig/overview.html ETS - Montréal - 2009
  61. 61. Serveur Shindig 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 GTI-780 / MTI-780 * Source : http://rollerweblogger.org/roller/entry/shindig_java_internals_diagram_updated ETS - Montréal - 2009
  62. 62. Serveur Shindig – Démo Code Demo 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 GTI-780 / MTI-780 ETS - Montréal - 2009
  63. 63. OpenSocial - Avantages & inconvénients GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009
  64. 64. OpenSocial - Inconvénients Contraintes apportées par la norme Plusieurs vieilles versions de gadgets Google Difficultés inhérentes à la création de grosses applications en HTML et JavaScript Difficultés inhérentes au partage d'une norme par des entreprises concurrentes Dépendance de Google Pas adapté aux services critiques avec des transactions sécurisées Problème de sécurité GTI-780 / MTI-780 ETS - Montréal - 2009
  65. 65. OpenSocial - Avantages Présente les avantages usuels d'une norme : interopérabilité, portabilité, création d'une masse critique, apprentissage réduit, meilleure documentation, meilleurs outils, plus grande productivité, réduction des coûts, pérennité de la technologie Endossement par de grands joueurs comme Google Permet aux applications tierces de rouler sur un plus grand nombre de sites Web sociaux Plus d'applications accessibles à plus de personnes Permet aux opérateurs de sites sociaux de se concentrer sur leurs métiers et services et de consacrer moins d'efforts sur les développements technologiques 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é GTI-780 / MTI-780 ETS - Montréal - 2009
  66. 66. GWT & gadgets AJAX GWT = + Génie logiciel GTI-780 / MTI-780 * Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com ETS - Montréal - 2009
  67. 67. GWT – Atelier Java de Gadgets! Le Google Web Toolkit (GWT) permet l'emploi de techniques éprouvées (State of the Art) du génie logiciel. De plus, GWT prend avantage des outils Java comme Eclipse pour créer rapidement des applications Ajax de style bureautique (“desktop-like”) qui tournent dans un fureteur. http://code.google.com/webtoolkit/ GTI-780 / MTI-780 ETS - Montréal - 2009
  68. 68. GWT – Atelier Java de gadgets? GWT produit déjà des applications clientes en pur HTML et JavaSCript très proches parentes des gadgets En effet, on peut utiliser les atouts de GWT pour produire à partir d'un code Java des gadgets en JavaScript optimisé Voici la recette* : Google API Libraries for Google Web Toolkit http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=GadgetsGettingStarted * Note : ne produit pas encore un gadget à la norme GTI-780 / MTI-780 OpenSocial, mais selon la norme Google Gadget ETS - Montréal - 2009
  69. 69. GWT & gadget – Fichiers de configuration XML com.example.simplegadget.client.SimpleGadget.gadget.xml <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs author="Claude Coulombe" author_email="claude.coulombe@umontreal.ca" height="300" title="SimpleGadget"/> <Content type="html"> <![CDATA[ <script> function com_example_simplegadget_SimpleGadget(){ … </script> ]]> </Content> </Module> SimpleGadget.gwt.xml <module> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- Other module inherits --> <inherits name="com.google.gwt.gadgets.Gadgets" /> <!-- Specify the app entry point class. --> <entry-point class='com.example.simplegadget.client.SimpleGadget'/> <!-- Specify the application specific style sheet. --> <stylesheet src='SimpleGadget.css' /> </module> GTI-780 / MTI-780 ETS - Montréal - 2009
  70. 70. GWT & gadget – Un peu de code Java... package com.google.gwt.gadgets.sample.hellogadgets.client; import com.google.gwt.gadgets.client.Gadget; ... @ModulePrefs( title = "Mon premier gadget avec GWT", author = "Claude Coulombe", height = 300 ) public class HelloGadget extends Gadget<HelloPreferences> { protected void init(final HelloPreferences prefs) { Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png"); Button button = new Button("Cliquez-moi!"); VerticalPanel vPanel = new VerticalPanel(); vPanel.setWidth("100%"); vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER); vPanel.add(img); vPanel.add(button); RootPanel.get().add(vPanel) button.addClickListener(new ClickListener() { public void onClick(Widget sender) { Window.alert("Mon premier gadget avec GWT"); } }); } } GTI-780 / MTI-780 ETS - Montréal - 2009
  71. 71. GWT – Atelier Java de Gadgets! Compiler avec GWT pour générer le code JS du gadget Déploiement facile sur un serveur Web externe Intégrer facilement le gadget dans un conteneur c * Note: Do not yet allow to generate a gadget according the full GTI-780 / MTI-780 OpenSocial standard, but according to the standard Google Gadget ETS - Montréal - 2009
  72. 72. GWT & Gadget – Code Demo Code Demo http://localhost:8080/gadgets/ifr?url=http://www.kayakissimo.org/SimpleGadget/SimpleGadget/com.example.simplegadget.client.SimpleGadget.gadget.xml GTI-780 / MTI-780 ETS - Montréal - 2009
  73. 73. Conclusion Il y a des concepts architecturaux et des patrons de conception (design patterns) communs derrière les sites de réseau social. De la prolifération des sites de réseau social a emergé le besoin de normes communes. Un ensemble de technologies libres (Stack of Open Source Technologies) est en train d'émerger pour le Web social La norme OpenSocial mise de l'avant par Google et ses partenaires est mature et suscite l'adhésion (plus de 600 millions d'utilisateurs) GTI-780 / MTI-780 ETS - Montréal - 2009
  74. 74. Questions ? GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

×