Twitter et java, C++, php, javascript

Si nous avions au départ prévu de présenter les étapes de développement d’une application avec Twitter (notamment pour sa facilité d’utilisation dûe au nombre restreint de fonctionnalité et pour la pertinence des recherches à effectuer, l’information y étant à vocation plus publique) nous nous sommes dit que développer et présenter l’utilisation d’un langage était quelque peu réducteur face à l’immensité des librairies présentes. C’est pourquoi aujourd’hui nous allons revenir sur ce point en laissant l’aspect “développons une application ensemble” de côté et en préférant vous accompagner dans le choix de la librairie vous convenant.

Précédemment, nous avons donc vu les principes fondamentaux d’une application Twitter (création, obtention des informations, connexion). Nous allons donc prolonger cette démarche en nous appuyant sur quatre langages : Java, C++, PHP, JavaScript dont nous vous présenterons l’utilisation pour l’authentification, l’envoi d’un tweet et la recherche d’un message. Ces APIs permettent d’avoir accès aux fonctions de Twitter sans avoir à passer par les requêtes HTTP. Bien que non officiels, elles sont publiées sur le site Twitter pour les développeurs :

 

Quelques informations préliminaires :

  • Twitter utilise une syntaxe précise pour la formulation des requêtes de recherches. (La syntaxe des requêtes est expliquée ici)
  • Les retours des requêtes se font sous la forme d’une chaîne de caractère arborescente qui contient l’ensemble des informations du tweet. Cela va du texte du message au fuseau horaire de l’utilisateur émetteur du tweet. (La structure exhaustive est décrite ici)

Java

Connexion :

Comme pour l’article précédent, nous allons utiliser l’API Twitter4J : http://twitter4j.org. Nous avons déjà vu comment se connecter via l’objet ConfigurationBuilder et une TwitterFactory.

Recherche :

Une fois la connexion effectuée, il est simple d’effectuer une recherche de tweets grâce à l’objet Query qui va représenter le requête à transmettre à Twitter. Elle prend la forme décrite sur le site de Twitter comme par exemple q=socialapi qui va servir à chercher les tweets contenant le texte socialapi. La méthode search(ObjetQuery) va permettre d’effectuer la requête et son résultat sera stockée dans un objet QueryResult. Ensuite il devient facile d’obtenir les tweets par la fonction getTweets() puis les différents éléments les constituant comme par exemple getUser() pour obtenir l’objet utilisateur.

Poster un message :

L’objet Twitter contient la fonction updateStatus(TextDuTweet) qui permet de publier un tweet sur le compte enregistré.

C++

 Twitter propose la bibliothèque twitcurl pour le C++.  Elle fournie un ensemble de fonctions compatibles avec la dernière version de l’API Twitter et le site https://code.google.com/p/twitcurl/ fournit toutes les instructions nécessaires à l’installation.

 Authentification :

L’objet twitcurl est la base de la connexion entre une application C++ et Twitter. Une fois l’objet créé, il faut définir les information d’authentification via les méthodes suivantes :

 getOAuth().setConsumerKey();

getOAuth().setConsumerSecret();

getOAuth().setOAuthTokenKey();

getOAuth().setOAuthTokenSecret();

 Une fois cela fait, l’objet twitcurl est configuré et va pouvoir servir pour envoyer les requêtes et récupérer les informations.

 Recherche :

La méthode search(MessageAChercher, NombreDeTweet) va envoyer une requête de recherche constituée des paramètres q=MessageAChercher et count=NombreDeTweet. Le retour se fait sous la forme d’une chaîne de caractère représentant le résultat tel quel venant de Twitter que l’application pourra décomposer pour l’analyser.

Poster un message :

A l’image de Twitter4J, twitcurl fournit une fonction statusUpdate(Message) qui permet de publier un tweet.

PHP 

Contrairement au Java et au C++ où très peu de bibliothèque existent, Twitter propose une très grande variété de projets visant à fournir les fonctionnalités en PHP. Parmi toutes, nous avons décidé de présenter Zend Framework faisant partie des plus élaborées.

L’objet principale est Zend_Service_Twitter. Il est composé de sous objets suivant l’arborescence présentée sur le site de développement de Twitter, comme par exemple le statut de l’utilisateur, son compte … depuis lesquels seront appelées les différentes fonctions de l’API.

 Authentification :

Par l’intermédiaire de cette bibliothèque, l’authentification est rapide. Il suffit de créer un objet Zend_Service_Twitter initialisé avec un tableau de deux valeur :

    ‘username’ => NomDUtilisateur ,

    ‘accessToken’ => TokenUtilisateur

 Il suffit ensuite d’appeler la méthode verifyCredentials() du sous objet account. Pour terminer la session de l’utilisateur il faudra appeler la méthode endSession().

 Recherche :

La recherche de tweets se fait par l’intermédiaire d’un objet spécifique qui retourne le résultat sous format JSON ou Atom. De futures évolutions de la bibliothèque permmettront la prise en compte des réponses XML.

 Tout d’abord il faut créer un objet Zend_Service_Twitter_Search auquel on spécifiera le format de sortie des données (‘json’ ou ‘atom’). Ensuite il faut appeler la méthode search(TexteAChercher, array(Arguments => Valeur)). Les arguments correspondent a ceux définis sur le site de Twitter dans la section API search https://dev.twitter.com/docs/api/1.1/get/search/tweets.

 Poster un message :

Le poste d’un tweet se fait par l’intermédiaire de la fonction  update(Message) à appeler depuis le sous objet status.

JavaScript 

 Enfin nous allons voir la bibliothèque JavaScript/nodeJS : TwitterJSClient.

Cette bibliothèque de fonctions JavaScript  est encore en développement mais les membre sont très actifs. Toutes les fonctionnalités ne sont pas implémentées.

 Authentification :

Pour l’application et l’utilisateur, il faut créer un objet Config qui contiendra les tokens et identifiant de l’utilisateur et de l’application.

Il faut ensuite créer l’objet Twitter qui servira d’élément centrale prenant en argument le Config créé juste avant.

 Autres fonctionnalités :

Bien que les fonctions de recherches et de poste de tweets ne soient pas présentes telles quelles, il est possible par exemple d’obtenir la majorité des informations voulues comme les données d’un message ou les tweets d’utilisateurs via des fonctions comme getUserTimeline() ou getTweet().

 

Conclusion 

 En observant les bibliothèque de fonction prenant en charge l’API de Twitter des 4 langages précédents, nous voyons que la couverture est très variable. En C++ la seule bibliothèque proposée par Twitter prend en charge les fonctionnalités principales, mais n’est pas complète et non mise à jour depuis longtemps. Elle ne permet pas, par exemple, de parser le retour de la recherche de tweets sous la forme de plusieurs objet. En PHP, il existe un florilège d’APIs prenant en compte la totalité des fonctionnalités.

On peut néanmoins remarquer que les langages adaptés au web (PHP, Javascript …) couvrent beaucoup mieux l’API de Twitter que les langage permettant de coder des logiciels (ce qui paraît compréhensible). Pour ces derniers Java est a privilégier avec Twitter4J.

Vous voilà donc paré à l’utilisation de l’API twitter mais attention à ne pas faire n’importe quoi ! Tout d’abord, respecter les CGU et par ailleurs, ne pas suivre le chemin de Larousse ! Nous conclurons en effet cet article par un fait d’actualité, l’affaire remontant au début de cette semaine (4° semaine de janvier).
En effet, si vous pouvez rechercher des tweets grâce à ces APIs, n’oubliez pas que si vous souhaitez en exploiter le contenu il convient de citer et de prévenir les auteurs. En effet, le droit de citation ne peut être évoqué dans le cadre d’un tweet si l’ensemble du tweet est utilisé ! Point qu’avait semble-t-il omis Larousse dans son ouvrage “Les perles des tweets et du Net” qui a donc été retiré de la vente.

 

Sources :

 

Auteurs : Nicolas DAVID & Sylvain PALOMINOS
Encadrant : Morgan MAGNIN
Licence Creative Commons

Création d’applications Twitter

Dans ce nouvel article nous allons passer de la théorie à la pratique en créant une application basée sur l’API de Twitter.

Nous avons choisit de nous baser sur l’API de l’oiseau bleu plutôt que sur celles d’autre réseaux sociaux comme Facebook car elle a l’avantage d’être assez légère et bien documentée, facilitant une prise en main rapide. De plus les informations diffusées sur Twitter ont un aspect beaucoup plus publique et informatif et nous semblaient plus intéressant pour réaliser de petites applications simples (comme la comparaison d’actualités via les hashtags, le recensement de tweets contenant une actualité etc)

 

Création du projet

 

La création d’une application Twitter commence sur dev.twitter.com.

Une fois connecté à votre compte, il vous faut allez dans l’onglet “My application” de votre compte. Vous y trouverez la liste de tout les applications liées à ce compte. Le bouton “Create a new application” vous permettra de renseigner les informations à propos du vôtre et de valider la charte d’utilisation de l’API.

Félicitation, nous allons pouvoir commencer.

 

Principes fondamentaux

Avant d’exploiter les fonctionnalités de Twitter, l’application a besoin de fournir des informations lui permettant d’être autorisée à le faire.

Lors de sa phase d’initialisation, elle va devoir renseigner quatre clef. Vous les trouverez en sélectionnant votre projet dans le menu “My application” et en allant dans l’onglet “OAth” :

  • Consumer key
  • Consumer secret    ⇒ Ces informations permettent à l’application de se connecter à la manière d’un utilisateur. Elles sont donc liées à un utilisateur.
  • Access token key
  • Access token secret    ⇒ Ces informations sont liées à l’application et lui permettent de s’identifier.

Une fois ces informations renseignées, via les fonctionnalités de OAuth, l’application va pouvoir se connecter et utiliser les fonctionnalités de l’API de Twitter.

Exemple simple d’application via les API tierses

L’API que twitter met a disposition se compose essentiellement de requêtes HTTP, ce qui n’est pas forcément pratique selon le langage de programmation utilisé.

Heureusement pour nous, des surcouches à cette API ont été développées par des tiers comme par exemple Twitter4J, qui permet d’utiliser l’API en Java et que nous utiliserons par la suite.

 

Dans le cas de l’authentification, cela se fait en sept ligne des codes (seulement). Pour cela il suffit de créer un objet ConfigurationBuilder qui contient les informations basique de configurations.

Les clés d’authentification seront ajoutées via les fonctions

setOAuthConsumerKey(” LaCléIci “);
setOAuthConsumerSecret(” LaCléIci “);
setOAuthAccessToken(” LaCléIci “);
setOAuthAccessTokenSecret(” LaCléIci “);

Il ne reste plus qu’a invoquer une TwitterFactory pour créer l’objet Twitter permettant de par la suite d’appeler les méthodes associées.

 

La suite au prochain épisode… (nous apprendrons à utiliser les principales fonctionnalités : recherches de tweets, récupération de leurs informations, post de tweets)

Sources :

Auteurs : Nicolas DAVID & Sylvain PALOMINOS
Encadrant : Morgan MAGNIN
Licence Creative Commons

Les CGUs de Twitter

Connaître l’API, c’est bien. Avoir lu les conditions d’utilisations, c’est mieux !

Nous ne vous ferons pas l’affront de reprendre chaque paragraphes de “Developer  Rules of the Road” et de les détailler un par un. Mais certains points sont à connaître et peuvent surprendre. Toutes les mentions légales habituelles (conditions sujettes à changement, droit d’auteur …) ne seront pas explicitées.

Rules of the Road

Dans le premier paragraphe, il nous est signalé que l’utilisation de l’application développée est limitée à 1 millions d’utilisateurs uniques par jours et les objets implémentables sur site web à 10 millions d’impressions.

Dans le cas où l’on nécessiterait un accès à un nombre plus important il faut contacter l’équipe de Twitter afin de discuter des autorisations et conditions pour un usage plus massif.

Twitter Content

Ce paragraphe s’attache à la définition de l’usage qui peut être fait du contenu obtenu par le biais des fonctionnalités de l’API.

Le concepteur de l’application à pour obligation de faire apparaître le nom Twitter et le logo afin d’identifier la source des informations produites via l’API.

Dans le cas où l’application nécessite de recréer les parties essentielles de Twitter (comme la gestion du compte, l’affichage de la timeline d’accueil …), le service ne pourra pas être pré-installé sur des périphériques.  Il ne peut par ailleurs ni demander financement pour sa distribution, ni rediriger les nouveaux utilisateurs vers la page d’inscription du site, ni utiliser les données pour alimenter un réseaux social parallèle. Tout cela signifie que les fonctions “critiques” comme l’inscription ou l’affichage d’éléments clefs de Twitter, présentes dans l’API, ne peuvent en aucun cas être “court circuitées” par des fonctions à même vocations implémentées par d’autres codes. Cela ayant pour but de préserver l’intégrité de Twitter.

Principles 

Ce paragraphe décrit la philosophie d’utilisation de Twitter et de son API. En acceptant ces conditions, le développeur s’engage à respecter quatre principes  pour ne pas “surprendre” l’utilisateur :

- respecter l’intégrité des contenus twittés

- demander les droits pour envoyer et modifier des tweets, modifier le profil, ajouter des mot-dièse

- ne pas utiliser de logos pouvant induire en erreur l’utilisateur

- réutiliser le design de Twitter

Par ailleurs, il convient de :

- ne pas diffuser de spam

- respecter la vie privée de l’utilisateur

- être un bon partenaire de Twitter (c’est à dire ne pas nuire à Twitter et donc respecter les CGUs : tout service utilisant l’API doit donc inclure les CGUs de Twitter)

Les fonctionnalités de Twitter dans l’application

Cette partie décrit les fonctionnalités qu’un concepteur doit obligatoirement faire apparaître dans son application.

Les utilisateurs de Twitter doivent pouvoir se logguer à leur compte pour utiliser le service. Pour ceux n’ayant pas de compte, ils doivent être redirigée vers le site afin de pouvoir s’en créer un.

Une fois l’utilisateur connecté il est obligatoire d’afficher ses principales informations comme son avatar et son nom afin qu’il sache qu’il est connecté et que les informations produites sont mises en relation avec son compte.

Autres termes légaux

Cette dernière partie contient tous les aspect légaux “habituels” qui sont présents dans la plupart des conditions d’utilisation et  qui nous intéressent moins dans le cadre de cette étude.

Conclusion
Dans les articles à venir, nous tâcherons de vous présenter les bases concernant la programmation avec l’API de Twitter. Nous reviendrons par ailleurs en détail sur les CGUs de Facebook dans un autre billet.
Auteurs : Nicolas DAVID & Sylvain PALOMINOS
Encadrant : Morgan MAGNIN
Licence Creative Commons

Les APIs des géants sociaux : Twitter & Facebook

API, vous vous rappelez ? Application programming interface ! (sinon allez relire notre premier article) Nous allons aujourd’hui entrer dans le vif du sujet. Que nous permettent les api des deux géants twitter et facebook ? Les utilisons nous fréquemment ?
Cette présentation sera illustrée d’exemples de sites web mettant en œuvre ces APIs dans des contexte variés, nous vous invitons bien évidemment à les visiter pour vous rendre compte de l’ampleur des possibilités qui sont offertes, en tant que développeur et en tant qu’utilisateur !

TWITTER

L’ensemble des fonctionnalités de l’API de Twitter sont divisées en trois grands groupes en fonction de leur cible :

  • Twitter for Websites (TfW) qui contient les principales fonctionnalités de Twitter. Il permet d’implémenter divers boutons ou widget permettant à un utilisateur de Twitter sur un sujet prédéfini, de suivre un compte, afficher une timeline …
  • REST API qui permet d’avoir accès à des fonctions faisant partie du coeur de Twitter tel que la mise à jour de statuts, les timelines et les informations des utilisateurs.
  • Streaming API qui donne accès aux données en temps réel. Cela peut être nécessaire pour certaines applications devant traiter une grande quantité de données ou devant fonctionner rapidement.

Nous allons présenter en détails l’API REST. Alors que Streaming et Twitter for Websites se concentrent sur un aspect bien particulier de l’usage de cet outil, REST procure l’ensemble des fonctionnalités associées à Twitter. Ici encore les différentes fonctions peuvent être découpées selon différents thèmes :

  • Timelines : Les timelines sont constituées d’un agrégats de tweets présentés dans l’ordre chronologique. Le développeur peut spécifier à travers les fonctions fournies sur quels critères sélectionner les tweets : sujet, auteur, followers …
  • Tweets : Cette famille de fonctions concerne directement le statut de l’utilisateur. Diverses fonctionnalités sont disponibles comme sa modification, sa mise à jour, récupérer les retweets associés…
  • Direct Message : Les utilisateurs inscrits peuvent s’envoyer entre eux des messages privés. Ces fonctions de l’API permettent de gérer ces messages : affichage, suppression, envoi…
  • Amis et Followers : Cet ensemble donne accès à toutes les informations concernant les amis et followers de l’utilisateur et de gérer les relations d’amitié et de suivi.
  • Utilisateurs : Une fois l’utilisateur connecté via son compte à l’application ces fonctions donnent accès à l’ensemble des paramètres et informations du profil afin de les récupérer, les afficher et les modifier
  • Utilisateur suggérés : Twitter fourni à travers ce thème un accès à la liste d’utilisateur qui sont susceptibles d’intéresser la personne connectée.
  • Favoris : Les fonctions associées permettent de retourner les tweets favoris de l’utilisateur, de les supprimer ou d’en créer
  • Listes : Cette famille de fonctions est très riche et variée. Elles ont comme point commun de retourner une liste que ce soit de tweets, d’utilisateurs, de statuts, de followers, en fonction des critères spécifiés.
  • Géolocalisation : Twitter est un réseau mondial et par conséquent les membres produisent de la donnée géolocalisée. Il est donc possible de récupérer les informations sur la localisation des utilisateurs et de leurs tweets (comme par exemple sur le site tweetping).
  • Tendance :Twitter est aussi un lieu de buzz où l’on retrouve les grandes tendances d’Internet. Des fonctions existent permettant d’explorer et suivre les différentes orientations des tweets.

Cet inventaire est un peu brutal. Mais il est important de connaître les possibilités offerte par l’API avant de commencer à l’utiliser.
C’est pourquoi lors du prochain article nous présenterons la mise en œuvre plus concrètes des fonctionnalités pour la conception d’application comme les méthodes d’authentification de OAuth, celles de recherches de Search ou encore de Streaming.

FACEBOOK

Avant de nous intéresser aux APIs en elles même, il est intéressant de comprendre le fonctionnement de facebook. Pour cela, nous allons nous intéresser au cœur de facebook, le socialgraph. Le social graph ? C’est quoi ?

  • un ensemble de sommet : les objets en relations que ce soient personnes, pages, messages ou autre contenu partageable possédant un identifiant unique
  • un ensemble d’arc entre ces sommet : représentant les liens entre les objets, de l’amitié au like

Connaissant l’ID il est alors possible d’obtenir les informations de l’objet. Par exemple, en vous connectant sur facebook, l’url de de votre profil est du type : “https://www.facebook.com/id” où id est une chaine de caractère (par exemple prenom.nom.int) en allant à l’adresse suivante, où id correspond à votre id récupéré en url, vous aurez ainsi une description au format JSon de votre profil !

https://graph.facebook.com/id

Cela marche aussi avec les photo par exemple ! Vous pourrez donc aller sur une photo, récupérer son id dans l’url et renvoyer la requête http correspondante pour obtenir une description de la photo en JSon, avec taille, source, description, commentaire et même id des personnes ayant liké !
Maintenant qu’on a les objets, il serait intéressant d’obtenir les connexions ! Les arcs reliant les objets peuvent avoir plusieurs types ! Avec une requête http, on peut obtenir les objets liés à notre objet par le type de relation voulue (aux règles d’autorisations prêt) par exemple, si vous tapez https://graph.facebook.com/id/friends vous devriez avoir la liste d’amis de la personne id… seulement si l’information est publique ! C’est là qu’interviennent les APIs.

“ When you create a story on Facebook, you’re not just posting text for someone to read. You’re also creating a set of structured relationships, as well. Your app, the person using your app and the article they like are all now connected. This is why we call it a graph. You’re not just telling stories, you’re also creating a structured history of the things that people have done in the world. “

 

facebook developpers documentation – open graph

Premièrement, notons que les APIs s’adaptent à tous les appareils (navigateur web, appli android, appli iphone, jeu)

  • Service de log in : en donnant à l’API votre log in de facebook, vous autorisez l’application à lire vos informations personnelles du socialgraph qui étaient inaccessibles par la simple requete http. ces informations servent à compléter votre profil pour l’application en question. C’est le facebook login. Si vous voulez savoir jusqu’à quel point vos informations personnelles peuvent être sollicités, n’hésitez pas à visiter ce site, assez dérangeant toutefois !
  • FQL = facebook query languages : Interface pour effectuer des requêtes de type SQL sur le social graph. Ces requêtes permettront de faire des recherches ou d’établir des statistiques basées sur le contenu du social graph. on y décèle un potentiel marketing indéniable ! Plus d’information dans le guide dédié
  • Open Graph : les APIs peuvent avoir accès au SocialGraph en écriture, notamment en proposant des articles facebook dans les sites webs ou en ajoutant des boutons like. Au final, on confère à l’application le droit d’accéder au social graph en écriture, comme on le donne à facebook en vous connectant, à des restrictions prêt bien sûr !
    On notera que l’accès en écriture permet aussi la suppression d’informations. On pensera notamment à Socialroulette, “Social Roulette has a 1 in 6 chance of deleting your account. What are you afraid of?” qui proposait de jouer à la roulette Russe avec son compte Facebook.
  • Tchat facebook qui peut être intégré à une autre application

Cette liste n’est pas exhaustive mais nous avons choisi ici de vous faire comprendre le fonctionnement général des APIs que nous rencontrons dans la vie de tous les jours, au détour d’un bouton like notamment !

Conclusion

Ainsi les api permettent de faciliter l’usage d’un web social, toutefois, jusqu’où vont elles ? Jusqu’à quel point se connecter à un site via facebook signifie lui offrir ses données personnelles ? Des sites comme takethislollipop ont soulevés ces problèmes pour un résultat choc destiné à marquer les esprits. Et en cliquant nonchalemment sur le bouton “se connecter”, vous êtes vous demandés où vos données allaient transiter et ce que ce site en ferait ?

Nous tâcherons donc aussi de nous intéresser aux Conditions Générales d’Utilisation de ces APIs et la réutilisation des données qu’elles permettent. Il est en effet important de noter que certains sites les utilisant peuvent présenter des comportements non prévus par les réseaux sociaux et ainsi se faire interdire a fortiori (on pensera notamment au principe de socialroulette).

Sources :
https://dev.twitter.com/docs/api/1.1
https://developers.facebook.com/blog
www.fr.wikipedia.org
http://graphism.fr/compendre-le-social-graph-de-facebook-en-3-minutes/

Auteurs : Nicolas DAVID & Sylvain PALOMINOS
Encadrant : Morgan MAGNIN
Licence Creative Commons

Bienvenue aux APIs des merveilles

Larry a pris la place des pigeons voyageurs, Facebook celle de nos albums photos, ce n’est pas un secret, les réseaux sociaux représentent une part importante du trafic internet mondial. Mais leur succès n’est pas seulement le miroir des connections sur leurs sites respectifs. Une masse importante des visiteurs et du contenu généré provient en effet d’applications tierces intégrant des fonctionnalités sociales via des interfaces de programmation (API) mises à disposition des développeurs.

Précisons tout d’abord ces termes ensemble afin de clarifier le sujet :

  • API
    Les interfaces de programmations, aussi désignées par API, sont un ensemble de classes, de méthodes et de fonctions mises à disposition par un éditeur de logiciel, de sites web, de bibliothèques, pour permettre à un tiers de développer un plugin ou une application en se basant dessus.
  • Réseaux sociaux
    A l’origine, ces réseaux représentent un groupe de personnes partageant des intérêts ou des liens personnels pouvant facilement se mettre en relation les uns avec les autres. Sur internet, ces réseaux sont devenus beaucoup plus massifs et les points communs entre les utilisateurs reliés sont devenus de plus en plus mince. Ils servent en particulier à partager sa vie, ses expériences, des médias voire se créer un réseau.

Bien entendu Facebook et Twitter ne sont pas seuls exemples, même s’ils comptent parmi les plus importants (et influents). On peut aussi citer :

  • Google + qui fut d’abord pensé comme un concurrent à Facebook.
  • Pinterest qui se base sur l’aspect collection.
  • Instagram qui est beaucoup plus orienté vers le partage de photos.
  • Tumblr qui est orienté microblogage.
  • LinkedIn qui se tourne vers le réseau professionnel.

Encadrée par Morgan MAGNIN pour l’École Centrale de Nantes, notre première rencontre a permis de décomposer cette étude selon 2 grands axes :

Nous aborderons au cours des premiers mois les possibilités fournies par les APIs de quelques uns de ces réseaux sociaux tout en essayant d’évaluer et relativiser les risques vis à vis des données personnelles qui sont alors sollicitées. (N’hésitez pas à partager des sites utilisant ces ces APIs en commentant nos articles).

Dans un second temps, nous envisageons de nous tourner vers l’utilisation technique d’une de ces APIs dans le cadre d’un projet que nous rendrions disponible via Github, ce point sera rediscuté avec notre encadrant dans les mois à venir.

Cet article comme les prochains, ainsi que nos éventuels codes sont placés sous licence Creative Commons. Vous pouvez donc librement réutiliser leur contenu (hors utilisation commerciale) en citant clairement nos noms : Nicolas DAVID et Sylvain PALOMINOS ainsi que le cadre de cette étude, à savoir : SOCIALAPI13.

Nous vous donnons donc rendez vous d’ici le 25 Octobre pour une présentation détaillée des possibilités offertes par les APIs de Twitter et de Facebook !

 

Auteurs : Nicolas DAVID & Sylvain PALOMINOS
Encadrant : Morgan MAGNIN
Licence Creative Commons

[JAVAS] Synthèse et Plan du Rapport

Bonjour à tous,

Voila presque cinq mois que Sébastien et moi-même faisons une veille technologique sur le thème des API Javascript et nous vous proposons aujourd’hui par ce post d’en faire la synthèse.

Tout d’abord pourquoi ce sujet des API JavaScript ? Tout simplement parce que lorsqu’au travers de la nouvelle spécification du HTML5 le W3C standardise de nombreuses API JavaScript, il change le rapport que les sites et applications Web auront avec les visiteurs. Qu’on se le dise, le JavaScript est maintenant au cœur du développement web. Voici ci-dessous la liste des API JavaScript triées par ordre alphabétique qui ont donc été standardisées et en gras celles que nous avons eu l’occasion de traiter lors de notre travail de veille technologique pour l’École Centrale de Nantes :

  • ContentEditable
  • Drag’n'Drop
  • Geolocation
  • Offline Web Application
  • Selectors
  • Timers
  • Web Workers
  • Web Storage
  • WebSocket
  • Web SQL Database

Plan du rapport

  1. Comment la nouvelle spécification du HTML5 remet au goût du jour les API JavaScript
  2. Tour d’horizon des API JavaScript qui révolutionnent notre façon de naviguer

[JAVAS] Web Workers

Contexte

Avant l’arrivée du HTML5 et de ses Web Workers, le code Javascript était généré dans le même processus (thread) que la fenêtre active. Par conséquent, le navigateur pouvait se freezer dans le cas d’un chargement de script trop lourd, voir même demander à l’utilisateur s’il souhaite le stopper.

Quel est le principe de cette nouvelle API ?

Les Web Workers permettent d’échapper à cette difficulté en générant le code dans un autre thread. Ainsi, la page pourra répondre aux interactions de l’utilisateur (clics, scroll, …) tout en chargeant le script.

Il existe deux types de Web Workers:

  • Les Dedicated Workers sont directement liés à leur créateur. Ce sont les plus faciles à utiliser et c’est sur eux que nous nous concentrerons dans l’article.
  • Les Shared Workers peuvent communiquer avec tout script provenant de la même origine que leur créateur. Vous pouvez lire cet article pour plus d’informations sur leur utilisation.

Comment utiliser cette API?

Chaque worker va utiliser un thread dédié, ce qui implique que leur code devra être hébergé dans des fichiers séparés de la classe principale.
Le code suivant présente un cas simple d’utilisation de worker, qui renvoie un simple message.
Le fichier index.html contenant le script appelant le Worker
Le worker, stocké dans helloworkers.js

Le résultat sera : “Bonjour David depuis un thread séparé !”.

Il faut noter que le Worker continuera à fonctionner tant qu’il n’aura pas été “tué”. On peut le faire:

  • directement dans celui ci avec la commande close();
  • ou bien dans le script créateur du worker (comme dans le code précédent) avec la commande terminate();
De plus, les commandes du DOM ne sont pas accessibles depuis les Web Workers.
Dans quels cas utiliser les Web Workers ?

Etant donné que la technologie est encore très récente, ceux ci ne sont pas encore très utilisés et la majorité des tutoraux en ligne propose de les utiliser lors de calculs lourds comme la recherche de nombres premiers. Cependant, on peut penser à d’autres cas:

  • Charger des données pour une utilisation future
  • Edition de texte avec coloration syntaxique ou correction orthographique en temps réel
  • Analyse de lourdes données video ou audio
  • Filtrage d’images dans la balise HTML5 <canvas>
  • Etc…

Quels navigateurs supportent cette API?

Ce tableau, provenant du site Caniuse, présente l’état d’implémentation des Web Workers. C’est une technologie encore peu présente sur les terminaux mobiles, car énergivore.

Pour vérifier si le navigateur d’un utilisateur le supporte, on peut utiliser le code suivant.

Démonstrations

  • http://slides.html5rocks.com/#web-workers
  • http://people.mozilla.com/~prouget/demos/worker_and_simulatedannealing/index.xhtml
Sources
  • https://developer.mozilla.org/En/Using_web_workers
  • http://www.whatwg.org/specs/web-workers/current-work/
  • http://blogs.msdn.com/b/davrous/archive/2011/07/08/introduction-aux-web-workers-d-html5-le-multithreading-version-javascript.aspx#debugging
  • http://www.html5rocks.com/en/tutorials/workers/basics/

[JAVAS] Web Storage

Contexte

La complexité des applications Web augmente de jour en jour, et ces dernières nécessitent de stocker des informations de plus en plus lourdes. Jusqu’ici, le stockage devait se faire côté serveur, ce qui pouvait devenir lourd pour ce dernier. Une alternative était l’utilisation des Cookies côté client mais leur taille limitée (4ko) et leurs petits défauts (sécurité, gestion du multi-tab) limitaient leur utilisation. Aujourd’hui, le HTML5 apporte une alternative intéressante: le Web Storage.

Quel est le principe de cette nouvelle API ?

Le Web Storage permet de stocker simplement des informations sous la forme Clé/Valeur. Ces informations sont très facile à exploiter et ne seront jamais envoyées au serveur, contrairement aux cookies.

Il existe deux types de Storage:

  • Le SessionStorage est le plus restrictif, puisqu’il ne stocke les informations que pour la durée de la session, et uniquement pour l’onglet actif. Il peut être intéressant dans l’utilisation d’un formulaire multipage par exemple.
  • Le LocalStorage stocke quant à lui les données pour une donnée indéterminée, pour mémoriser des logins, ou une liste de tâches par exemple.

Comment l’utiliser ?

Le stockage et la récupération des données sont très simples:

Les outils d’inspection les plus récents permettent de visualiser les données stockées (ici, Google Chrome).

Quels sont ses avantages de cette API ?

  • Fonctionnement de l’application en mode hors-ligne: On peut stocker les données en local, puis les synchroniser avec le serveur une fois connecté.
  • Amélioration des performances: Mise en cache des données.
  • Limitation du développement serveur
  • Stockage par instance et non par domaine (contrairement aux cookies)
  • Stockage des données en local et non transmission au réseau (contrairement aux cookies)
  • Disposition d’un espace de stockage important (5 Mo)

Quels sont ses inconvénients de cette API ?

  • Vulnérabilité des données stockés, visibles et modifiables par le client
  • Inaccessibilité en dehors de l’ordinateur et du navigateur concerné

Quel est son état d’implémentation ?

Le Web Storage est déjà compatible avec la majorité des navigateurs récents, même mobiles, comme nous le montre ce tableau provenant de Caniuse.

Quelles alternatives existe-t-il ?

  • Ce plugin jQuery utilise le Web Storage, et utilise des alternatives en cas de non support, telles que Gears, UserData pour IE ou en dernier recours, les Cookies.
  • L’API Web SQL Database, également introduit par l’arrivée du HTML5, permet de contrôler une base de données facilement, et offre ainsi beaucoup plus de fonctionnalités. Cependant, même si cette API est supporté par des navigateurs tels que Chrome et Safari, le W3C a décidé d’arrêter son développement en novembre 2010.
  • L’API IndexedDB est un mélange entre Web Storage et Web SQL Database: elle propose un stockage local de valeurs simples et d’objets hiérarchiques.

Sources

  • http://www.mti.epita.fr/blogs/2011/03/21/html5-les-nouveautes-non-multimedia/
  • http://www.clever-age.com/veille/blog/web-storage-le-stockage-de-donnees-cote-client.html
  • http://www.html5rocks.com/en/features/storage
  • http://caniuse.com/#feat=namevalue-storage

Démonstrations

  • http://html5demos.com/storage
  • http://html5demos.com/storage-events

[JAVAS] ContentEditable

Bonjour à tous,

Pour la suite de notre tour d’horizon des API JavaScript nous avons choisi de nous pencher sur l’édition de contenu au sein d’un navigateur Web. Ce qu’on appelle communément le WYSIWYG (What You See Is What You Get – Ce que vous voyez c’est ce que vous obtenez) se positionne par exemple comme une évolution de nos vieux input et textarea et des commandes type BBCode. Ces derniers nous montraient souvent à quel point ce qu’on l’on souhaitait obtenir est parfois loin de ce que l’on a effectivement écrit dès lors que le feedback n’est pas instantané mais qu’il survient après une validation de formulaire.

Exemple d'éditeur de texte WYSIWYG

Quels sont les avantages d’un éditeur de texte WYSIWYG ?

Les avantages d’un tel éditeur de texte sont assez simple à mettre en avant :

  • Mise en forme de mon texte sans passer par des balises HTML ou BBCode qui sont pas faciles à utiliser pour le grand public.
  • L’éditeur de texte WYSIWYG permet d’avoir un retour immédiat sur le contenu que l’on génère et notamment sur sa forme. Cela permet d’une part de ne pas avoir de mauvaise surprise après validation du texte et, d’autre part, de changer rapidement selon ses convenances la mise en page du contenu.
  • Meilleure expérience utilisateur qui sera plus enclin à écrire un contenu sous ce genre d’éditeur puisqu’ils sont plus commodes. On peut donc de ce fait augmenter le nombre de commentaires laissés sur mon blog par exemple.

Comment obtenir un rendu WYSIWYG ?

Il y a plusieurs façons d’implémenter cela sur son application Web de nos jours. On peut tout d’abord passer tout simplement par du HTML5 avec les deux attributs d’objets qui sont designMode et contentEditable. Aujourd’hui cette caractéristique est supportée par tous les principaux navigateurs Web à savoir : Firefox 3, Safari 3, Opéra 9, Google Chrome et même Internet Explorer (à partir de la version 5.5). Concrètement ça se passe comme cela :

À partir du moment où j’ai mis l’attribut designMode de mon document à “on” ou contentEditable de mon objet à “true” je vais pouvoir executer des commandes telles que document.queryCommandEnabled qui va déterminer si la commande d’édition de texte (par exemple mettre en gras, en italique, souligner, …) est supportée par le navigateur puis avec document.execCommand je vais pouvoir appliquer cette commande à la région mise en évidence par ma sélection. C’est ici qu’intervient donc les différents niveaux de compatibilité en fonction des navigateurs car tous ces navigateurs ne supportent pas les mêmes commandes. Vous trouverez en Annexe 1 une page récapitulant les commandes supportés pour 4 navigateurs majeurs.

Existe-t-il des solutions “clef en main” ?

Effectivement on peut passer par un des nombreux éditeurs de texte WYSIWYG disponibles sur la toile. Il ne vous restera plus qu’à l’implémenter sur votre site. Ce sont des éditeurs de texte comme on peut trouver sur différents CMS tels Joomla ou encore WordPress. On peut mentionner par exemple Tiny MCE qui est réputé pour être l’un des éditeurs de texte WYSIWYG les plus complet en version gratuite tout en conservant une intégration facile à réaliser.

Exemple d'utilisation de Tiny MCE

CKeditor est un autre éditeur de texte tout à fait aussi populaire et performant que son homologue TinyMCE avec une interface peut-être un peu plus travaillé niveau design.

Exemple d'utilisation de CKEditor

Vous trouverez en Annexe 2 une liste plus complète des différents éditeurs de texte WYSIWYG disponibles sur la toile.

 Plus d’infos ?

Annexe 1

Annexe 2

 Sources

http://blog.whatwg.org/

http://www.w3.org/TR/html5/editing.html#contenteditable

http://blog.xebia.fr/2010/03/18/html5-les-api-javascript/#ContentEditable

[JAVAS] Géolocalisation

Qu’est-ce que la géolocalisation ?

“La géolocalisation, ou géoréférencement, est un procédé permettant de positionner un objet (une personne, etc) sur un plan ou une carte à l’aide de ses coordonnées géographiques.” – Wikipédia

Aujourd’hui, une grande partie de nos appareils de communication tels que les ordinateurs ainsi que les téléphones mobiles peuvent être géolocalisés, et ce grâce à différentes techniques plus ou moins performante suivant le cas d’utilisation:

  • La géolocalisation par satellite:  C’est la technologie utilisée par les puces GPS, présentes dans les smartphones les plus récents. Elle se montre très précise et peu couteuse, mais elle demeure très peu performante en intérieur.
  • La géolocalisation par  GSM: Cette technique permet de localiser téléphone mobile par rapport aux antennes GSM, qui permettent les communications “voix”. Cependant, son efficacité dépend de la couverture géographique et nécessite l’accès au réseau GPRS pour exploiter l’information.
  • La géolocalisation par WiFi: L’appareil récupère les informations géographiques des bornes WiFi proches, ce qui se montre performant principalement en zone rurale.
  • La géolocalisation par adresse IP: Cette méthode permet de déterminer la position géographique d’un ordinateur ou de n’importe quel terminal connecté à internet en se basant sur son adresse IP, et peut un niveau de précision de l’ordre de la ville en se basant sur la distribution des adresses IP faite par les fournisseurs d’accès à internet.

Si le système fonctionne très bien sur les mobiles grâce au GPS et au triangulation GSM, il s’avère assez hasardeux dès qu’il repose sur la géolocalisation par adresse IP. Afin d’obtenir la position la plus précise possible, certains appareils (tels que l’iPhone d’Apple) utilisent des méthodes hybrides de géolocalisation en couplant les différentes techniques expliquées ci dessus.

Pourquoi utiliser la Géolocalisation?

La géolocalisation est une technologie naissante qui, couplée à des systèmes et des bases d’informations, permet d’ouvrir une nouvelle dimension à l’expérience utilisateur. Un large panel d’applications commencent à l’utiliser pour offrir des services telles que la navigation, les services de secours et sécurité ou encore la publicité ciblée.

Les limites de la Géolocalisation

La Géolocalisation est soumise à des règles afin de protéger la vie privée des utilisateurs. Ces derniers doivent au préalable donner l’autorisation à l’application de prélever leurs données de localisation et doivent pouvoir en être conscient et pouvoir la révoquer à tout moment. Les spécifications peuvent être trouvées sur le site du W3.

User agents must not send location information to Web sites without the express permission of the user. User agents must acquire permission through a user interface, unless they have prearranged trust relationships with users, as described below. The user interface must include the URI of the document origin. Those permissions that are acquired through the user interface and that are preserved beyond the current browsing session (i.e. beyond the time when the browsing context is navigated to another URL) must be revocable and user agents must respect revoked permissions.

Une icône sur le navigateur Chrome permet de savoir quand la localisation est activée.

 

Comment utiliser la géolocalisation sur un site web?

  • La première technique qui vient à l’esprit est de coupler les nouveaux standards du HTML5 avec l’API Javascript dédiée, supportée par tous les navigateurs (IE à partir de la version 9). Pour se faire on utilise l’objet geolocation, membre de navigator. Le tutoriel présent ici explique comment utiliser des fonctions telles que getCurrentPosition() ou watchPosition() pour tracker un utilisateur.
  •  Le plugin GeoPlugin permet d’avoir accès aux fonctions basiques de géolocalisation en utilisant différents langages tels que le Javascript, le PHP, le JSON, le XML ou encore l’ASP. Il propose également des services de conversion d’argent, de localisation d’adresse IP, de mapping de coordonnées géographiques et de localisation de villes proches.

Exemples d’utilisation de la Géolocalisation

  • Un des services les plus utiles pouvant utiliser la géolocalisation est l’application Google Maps présent sur les smartphones récents. Elle permet d’afficher des cartes et de nous localiser très précisément dessus.

La localisation s’avère très précise une fois connecté au réseau WIFI (20m)

  • Le premier réseau social à se concentrer exclusivement sur la géolocalisation est Foursquare, disponible sur la majorité des plateformes mobiles. Les utilisateurs font des “check-in” dans des lieux, et sont récompensés par des points, des badges ou encore des réductions dans les lieux partenaires de l’opération.Le service peut nous proposer de nouveaux lieux cohérents avec nos check-in et ceux de nos amis
  • La dernière version d’iOS permet aux utilisateurs de localiser leur iPhone à l’aide d’une application dédiée. Il peut ainsi le faire sonner à distance, le bloquer ou encore supprimer l’intégralité de son contenu. En cas de vol, ces données peuvent être fournies aux forces de l’ordre afin de récupérer l’appareil.

Démonstrations

  • http://html5demos.com/geo

Sources

  • http://fr.wikipedia.org/wiki/G%C3%A9olocalisation
  • http://www.w3.org/TR/geolocation-API/
  • http://www.html5-css3.fr/html5/tutoriel-geolocalisation-html5
  • http://wapiti.telecom-lille1.eu/commun/ens/peda/options/ST/RIO/pub/exposes/exposesrio2006/Borie-Ceuterickx/index.htm
  •  http://www.geoplugin.com/
  • http://www.html5-css3.fr/html5/tutoriel-geolocalisation-html5
  • http://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html