Voici le premier billet d’une série que je vais consacrer au développement d’applications Facebook avec Windows Azure. L’approche Cloud et Platform As A Service (PAAS) est en effet particulièrement bien adaptée aux projets d’applications sociales en tout genre:

  • Le faible ticket d’entrée permet de lancer un projet à moindre coût, même si la rentabilité n’est pas au rendez-vous dès le début
  • L’élasticité permettra néanmoins de faire évoluer les ressources techniques très rapidement (CPU, stockage) si le succès est au rendez-vous!
  • L’approche PAAS vous décharge complètement des aspects de mise au point et de maintenance de l’infrastructure
  • Les multiples centres d’hébergement permettent de localiser votre application au bon endroit (Europe, US, Asie) par rapport à votre marché cible
  • L’ouverture de la plate-forme vous laisse le choix des langages, frameworks et outils

Concrètement, voyons un premier cas de création d’une application Facebook que nous déploierons dans Windows Azure. Facebook propose un certain nombre de SDKs “officiels”, que je compte bien explorer dans le futur, mais dans un premier temps je préfèrerais commencer par un framework .NET pour vous montrer la voie la mieux intégrée avec nos outils de développement.

Je vais donc utiliser le Facebook C# SDK que vous pourrez trouver sur CodePlex. Il s’agit d’un framework communautaire actif et régulièrement mis à jour.

Histoire de partir sur une base saine, je vais utiliser le framework ASP.NET MVC 3 et son Package Manager (NuGet) pour assembler un petit “Hello Social World” et le déployer dans Windows Azure. J’utilise Visual Studio 2010, mais vous pourriez faire exactement la même chose avec la version gratuite, Visual Web Developer Express.

Comment installer tous ces beaux composants? C’est très facile, allez sur www.microsoft.com/web et téléchargez le Web Platform Installer. C’est l’outil magique pour ce genre de projets: vous allez pouvoir installer d’un seul coup votre IDE si vous en avez besoin ainsi que tous les frameworks (MVC, Windows Azure) en une seule fois, avec tous leurs pré-requis!

Cliquez sur le menu “Products” en haut pour voir tous les composants disponibles, puis faites votre marché! Dans notre cas, prenez “ASP.NET MVC 3” et “Windows Azure Tools for Microsoft Visual Studio”, puis cliquez sur le bouton “Install”.

image

Vous devriez maintenant avoir tout ce qu’il vous faut pour attaquer le développement.

Créer l’application et la tester “à vide”

Voyons tout d’abord la partie purement Windows Azure / ASP.NET MVC.

Faites donc “New Project…” puis dans “Web” choisissez “ASP.NET MVC 3 Web Application”. Donnez-lui un nom et faites OK.

MVC 3 vous demande alors de choisir un template et un View Engine. Comme j’aime les choses simples et propres, je vais partir sur le template “Empty”, et comme j’aime les choses neuves et brillantes, je vais utiliser la syntaxe Razor!

image

Créons une mini-application simplistique pour tester: clic droit sur “Controllers”, faites “Add” puis “Controller…” Nommez-le “HomeController”.

image

MVC vous génère automatiquement la classe HomeController avec une seule méthode dedans: Index(). Il nous faut maintenant ajouter une View, pour cela rien de plus simple, clic droit sur le nom de la méthode, puis “Add View…”

image

Laissez toutes les options par défaut dans le dialogue de création de vue, elles sont parfaites.

image

Dans la vue qui s’ouvre, changez le titre en “Hello MVC” (histoire de dire qu’on a quand même fait quelque chose) et vous avez une application MVC en état de marche. Mais avant de la tester, nous allons l’encapsuler dans une application Windows Azure!

Allez donc dans “File”, “Add”, “New Project…” et cette fois-ci, choisissez un projet de type “Cloud”, “Windows Azure Project”. Donnez-lui un nom sympathique puis cliquez sur OK. Attention: dans le dialogue suivant, ne sélectionnez rien puis cliquez sur OK! En effet, nous voulons réutilisez notre projet MVC en tant que Web Rôle, et non pas créer un nouveau rôle.

image

Nous avons donc maintenant un service Windows Azure, mais il n’est pas associé au projet MVC. Faites donc un clic droit sur le répertoire “Roles”, puis choisissez “Web Role Project in solution…”

image

Dans le dialogue suivant, sélectionnez votre projet MVC, et c’est fini! Vous avez maintenant construit un service Windows Azure avec une tout belle application MVC 3. Pour tester le tout, je vous propose d’appuyer sans hésitation sur F5 pour tester dans l’environnement de simulation Windows Azure, qui a été installé avec les Tools.

(Nota Bene: il arrive parfois que votre page de test apparaisse vide (blanche). La raison est généralement que vous n’avez pas activé la fonctionnalité “HTTP Redirection” au niveau de IIS. Si vous allez dans “Turn Windows features on or off” et que vous activez ce module, le routage MVC devrait tomber en marche.)

Vous avez donc lancé votre page MVC. Notez l’URL dans le navigateur, car nous en aurons besoin pour paramétrer Facebook!

image

Configurer l’application dans Facebook

Si vous n’avez pas encore faire de développement Facebook, vous n’avez probablement pas encore l’application “Developer” que vous utilisez pour configurer vos applications. Cherchez donc “Developer” et ajoutez l’application.

image

Vous arrivez sur une page qui vous propose de créer une nouvelle application (bouton “Set Up New App” à droite). Vous verrez peut-être également la trombine de Doug Purdy, ex-Microsoftee parti chez Facebook s’occuper de la promotion de la plate-forme pour les développeurs ;-)

image

Donnons donc un nom à notre application, puis vous devrez passer le Captcha.

image

Ensuite, allez dans la section “Facebook Integration”, et remplissez la section “Canvas”:

Puis cliquez sur “Save Changes”.

image

Testons en local

Voilà! Vérifiez que votre Windows Azure Compute Emulator tourne bien, puis accédez à votre application Facebook!

image

Votre page MVC est incluse par IFrame pour obtenir le résultat final.

Ajoutons le SDK Facebook

Essayons de rendre notre Hello World un tout petit peu plus intéressant. Je vais garder le sujet de l’authentification de l’utilisateur pour un peu plus tard, et je vous propose dans un premier temps d’utiliser la Graph API pour interagir avec Facebook. Nous allons utiliser le nouveau Package Manager qui a été installé avec MVC 3:

image

Dans la console qui s’ouvre, sélectionnez bien votre projet dans “Default project”, entrez “install-package facebook”, puis détendez-vous pendant que la librairie s’installe avec tous ses pré-requis!

image

Nous pouvons maintenant améliorer un petit peu notre application pour interroger la Graph API. Nous allons simplement récupérer un objet du graphe social par son ID (la page de la Plateforme Facebook) puis afficher ses propriétés dans la vue. Voici notre contrôleur modifié:

public ActionResult Index()
{
    var client = new FacebookClient();
    dynamic test = client.Get("19292868552");

    ViewBag.name = test.name;
    ViewBag.picture = test.picture;

    return View();
}

Nous utilisons donc fortement le nouveau type dynamic de C# 4, à la fois pour le retour de l’appel à l’API Facebook et pour le passage des paramètres à la vue via le nouveau ViewBag de MVC 3. Voyons maintenant la vue:

<h2>Hello @ViewBag.name</h2>

<img src="@ViewBag.picture" />

Simplissime! Vous pouvez maintenant relancer votre application et la re-tester via Facebook.

image

Voilà, nous avons un petit squelette en place avec une bonne base pour développer une application Facebook dans Windows Azure:

  • Un projet de type Windows Azure avec un Web Role, exécutable en local
  • Un Web Role MVC 3 avec un couple Contrôleur/Vue de base
  • Le SDK Facebook installé et référencé
  • L’application configurée dans Facebook pour tester
  • Un petit appel à la Graph API pour vérifier que tout fonctionne

…et nous avons beaucoup de choses à voir dans de futurs épisodes!

  • Comment authentifier l’utilisateur Facebook au sein de notre application
  • Comment accéder / exploiter le graphe social
  • Comment déployer l’application en production dans Windows Azure
  • Comment utiliser le framework Facebook JavaScript

Et si vous avez d’autres idées / questions, n’hésitez pas à me contacter, via Facebook par exemple! :-)