vendredi 22 février 2008

Techdays 2008 : Facebook et Popfly

Session Facebook par Thomas Conté


Aujourd'hui avec 13000 applications hébergées sur Facebook, ce réseau social devient le plus grand référentiel d'applications. Créer une application Facebook permet de profiter de l'effêt viral de ce réseau et créer le buzz (46 millions d'utilisateurs actifs quand même).


Mais quel rapport avec .Net?


Facebook pour développeur est une plateforme ouverte. Même s'ils proposent toujours leur grammaire propriétaire FBLM, une sorte de custom HTML, on peut en passant par des iframes appeler n'importe quel site web. Le serveur Facebook fait alors office de proxy et donc votre propre site asp.net.

Pour aller plus loin et interagir avec le backoffice Facebook (récupération d'info, inviter des amis,...) il faut passer par leur API Facebook via du REST, avec certaines limites.
Plutot que d'essayer le FBLM dont la learning curve est importante, plusieurs SDK propose des API Facebook .Net.

FaceBookToolKit par Clarity Consulting hébergé sur CodePlex, sponsorisé par Microsoft (voir le showcase de Microsoft ici). C'est un framework actif avec plus de 300000 pages vues.

Facebook.Net par Nikhil, API de meilleure qualité mais pilotée par une seule personne, donc moins réactive avec quand même 130000 pages vues, toujours hébergé sur CodePlex.

Ce ne sont pas les seuls, toute la liste des framework se trouve sur la page wiki de facebook.

Les API Facebook évoluent souvent, donc votre application peut rapidement ne plus fonctionner. Il est, dans ce contexte, plus intéressant de s'appuyer sur FaceBookToolKit car le framework sera plus synchronisé avec l'API Facebook.

La difficulté de développer avec des API internet est le débuggage: Il faut exposer la machine de développement car Facebook doit y accéder, sinon il faut déployer sur un hébergeur et tracer les buggs. C'est ce que j'ai fait sur mon application de test FaceBook TalentExpo pour mettre en pratique la session.

Facebook permet d'avoir un mode développeur afin de n'exposer une application qu'une fois finalisée.

Puisqu'il va falloir livrer un certain nombre de fois avant d'avoir quelque chose qui tourne, autant se simplifier la vie avec l'add-on Web deployement project.

Les étapes pour créer une application FaceBook sont bien décrites ici. Je vous conseille de télécharger plutôt les nightlybuild que la release car il y a plus d'exemples. Dans tous les cas, il faut récupérer les sources comme nous allons le voir.

Une fois le framework téléchargé, pour faire votre première page Facebook, il suffit de créer une page aspx puis de la faire hériter de CanvasIFramebasePage qui cache toute la plomberie d'authentification et de renseigner les clefs:

public partial class fb_Default : CanvasIFrameBasePage
{
protected void Page_Load(object sender, EventArgs e)
{
base.Api = MyAPIKey;
base.Secret = MyAPISecret;
base.Page_Load(sender, e);
}
}
Et c'est tout.

Pour manipuler des données issues de FaceBook il suffit alors d'appeler des méthodes de l'objet this.FBService, par exemple:

Facebook.Entity.User u = this.FBService.GetUserInfo();
FriendList1.Friends = this.FBService.GetFriends();
Important, pour pouvoir inviter vos amis FaceBook à s'abonner à votre application il faut un peu de manipulation comme décrit ici, que je vais résumer:

1/ ajouter au projet Facebook (d'ou l'interêt de downloader les sources), sous components\FaceBookService.cs, la méthode suivante

public string MultiFriendSelector(Uri actionUri, string markup, string actionText, string excludeList, string requestType, bool isInvite)

(voir la méthode dans le lien précédent). Re-compiler.

2/Dans votre page aspx, faire un hyperlien "add a friend" pointant sur l'URL suivante:

HlAdd.NavigateUrl = this.FBService.MultiFriendSelector(new
Uri("http://apps.facebook.com/VotreAppli/"), "Un texte sympa ici'
fb:req-choice label="Ajoutez Moi!" url="http://www.facebook.com/add.php?apikey=VotreClef">", "Ajoutez Moi!", "", "request", true);

Pas possible d'utiliser les méthodes d'extension pour ne pas avoir à recompiler les sources car on appelle la méthode GenerateSignature de l'API qui est internal.

Attention si vous utilisez de l'Ajax, ça ne marche que si votre serveur web est en FK3.5, ce qui ne court pas encore les rues chez les hébergeurs... J'ai pu vérifier que ça ne marchait pas....

A chaque appel de méthode Facebook un roundtrip est effectué entre votre serveur et celui de Facebook. Il faut donc mieux éviter des appels dans des boucles et utiliser les méthodes par batchs.

Publier une story (Feeds)

J'ai voulu utiliser la méthode

PublishTemplatizedAction
Afin d'afficher des mini feeds que je n'ai pas testé car la fonction semble avoir été modifiée récemment côté FaceBook, lire ici. L'idée est de créer des chaînes de caractères templatées, exemple:
{actor} s'est abonné à {code} ...

Pour mettre à jour le profil de l'utilisateur, il faut cette fois faire du code FBLM via la méthode

SetFBML

Session PopFly par christophe Lauer


Popfly un éditeur en ligne de Mashup web pour les non développeurs.

La création de bloc peut se faire par copier/coller pour utiliser des modèles existants, comparer à netvibes ou il était difficile de trouver des exemples de code (ca a peut être changé depuis un an).
Les mashup peuvent être créés graphiquement, c'est très intuitif et assez ludique. Ils sont batis sur des blocs pré existants (basés sur les API ou flux rss) ou sur des customs blocs (descripteur XML et fichier Javascript contenant la logique de traitement). Par contre, pour mettre au point ces fichiers javascript un seul moyen le console.write!

Pour aller plus loin un bon article en français pour créer ses propres blocs de services et le blog de Christophe. Sur l'article MSDN, on trouve les sources de la démo en ligne.

Les blocs peuvent être créés en ligne mais également via Visual Studio 2008 grâce au plugin Popfly Explorer.

Tout c'est bien jolie mais un exemple!

J'ai d'abord essayé la fonctionnalité assez séduisante de créer un bloc à partir d'un fichier wsdl. J'ai mis le fichier en place sur un des fichiers wsdl de TalentExpo. Le bloc a bien été créé par contre la mise en place du mashup ne s'est pas bien passée car l'appel du service web ne ramène rien via le bloc. J'ai abandonné la création au bout d'une heure de tests.

Par contre, j'ai créé un mashup à base d'un de mes flux Rss et d'un carousel assez simplement. Le rendu est sympa mais avec un problème de taille: pour voir ce mashup correctement il faut soit IE7 soit FireFox2.0. Avec mon IE6 la page plante. C'est assez dommage car ils proposent une version iFrames pour mettre dans un blog. Ils travaillent sur ce problème de compatibilité.

Du coup, j'ai fait le même Mashup avec un fader d'images et là ça marche (sauf sur blogger... les iframes ne passent pas, du coup je ne l'ai pas affiché).

Cet outil est plein de promesses car après la prise en main, c'est assez simple!!

Un autre retour d'InsideIt et une présentation powerpoint ici.

Aucun commentaire:


Laurent Morisseau, auteur de ce blog, pour me contacter