This post is to share some source code of a sample application that shows how to develop a Facebook Canvas App. hosted in Windows Azure. Ce billet a pour but de partager le code source d’une application exemple qui montre comment d%u00e9velopper une application Facebook de type Canvas, h%u00e9berg%u00e9e dans Windows Azure.
It leverages a bunch of technologies: ASP.NET MVC4, Entity Framework 4.3.1 with Code First, Windows Azure SQL Database, Windows Azure Tables (non relational), Windows Azure Cloud Services, part of the Facebook C# SDK. Elle utilise un certain nombre de technologies: ASP.NET MVC4, Entity Framework 4.3.1 avec Code First, Windows Azure SQL Database, Windows Azure Tables (non relationnel), Windows Azure Cloud Services, et une partie du Facebook C# SDK.
Source code is available in the following skydrive folder. Version is formatted YYMMDDx where x is a letter for numbering versions in a day. For instance V120614d is the fourth (d) version of 14-JUN-2012). Le code source est disponible dans le r%u00e9pertoire skydrive suivant. Le num%u00e9ro de version est format%u00e9 YYMMJJx o%u00f9 x est une lettre qui permet de distinguer les diff%u00e9rentes versions d’un m%u00eame jour. Par exemple, V120614d est la quatri%u00e8me version du 14 juin 2012.

http://sdrv.ms/KYvFgQ

 

Developing a Facebook Canvas App. requires to manage a number of issues like: using HTTPS, running in an IFrame where cookies might not be usable (I removed cookies dependencies), managing current user OAuth token after receiving it from the initial POST, and also manage its expiration. You can find solution in this code, and I might write further blog posts about it. Should you have further questions, please leave a comment. D%u00e9velopper une application Facebook de type Canvas suppose de r%u00e9soudre un certain nombre de probl%u00e8mes comme: utiliser HTTPS, s’ex%u00e9cuter dans une IFrame o%u00f9 les cookies peuvent ne pas fonctionner (j’ai enlev%u00e9 la d%u00e9pendance aux cookies), g%u00e9rer le jeton OAuth de l’utilisateur courant apr%u00e8s l’avoir re%u00e7u dans un POST initial, et aussi g%u00e9rer son expiration. Vous trouverez des solutions dans ce code, et j’%u00e9crirai probablement d’autres billets %u00e0 ce sujet. Si vous avez des questions, n’h%u00e9sitez pas %u00e0 les poser en commentaire de ce billet.

 

What does the App do? It is a whish list application where a small community (UI was not designed to handle large number of people, in this version) of people share desired objects. A sample instance of the App is available at https://apps.facebook.com/need-archims-fr/. I should share the demo invitation code thru twitter in a few days (I need the sample for a demo for now) so that you can try the App. Here are a few screen shots: Qu’est-ce que l’application fait? Il s’agit d’un site de listes de cadeaux pour une petite communaut%u00e9 de personnes (l’interface graphique n’a pas %u00e9t%u00e9 con%u00e7ue pour un tr%u00e8s grand nombre de personnes dans cette version) qui partagent leurs d%u00e9sirs. Un exemple de cette application est disponible %u00e0 https://apps.facebook.com/need-archims-fr/. Je partagerai le code d’invitation de d%u00e9mo via twitter d’ici quelques jours (pour l’instant j’en ai besoin pour une d%u00e9mo) de fa%u00e7on %u00e0 ce que vous puissiez essayer l’application. Voici quelques copies d’%u00e9crans:

 

 

I also explained how it works in this video (sorry it’s in French, but you can get an idea from the screens). J’ai aussi expliqu%u00e9 comment l’application fonctionne dans cette vid%u00e9o.

 

I removed secrets from the code, and they are replaced by ___. For instance, you may find this: J’ai supprim%u00e9 les secrets du code, que j’ai remplac%u00e9s par ___. Par exemple, vous trouverez ceci:
I also removed the packages folder content which had references you can find from NuGet and a development workstation. Here is what was in that folder: J’ai aussi supprim%u00e9 le contenu du r%u00e9pertoire packages qui contenait des r%u00e9f%u00e9rences que vous pouvez retrouver depuis NuGet et un environnement de d%u00e9veloppement. Voici ce qui %u00e9tait dans ce dossier:
Shoud you start from a blank visual Studio 2012 RC solution, here are a few screen shots that can help you: Si vous d%u00e9marrez d’une solution Visual Studio 2012 RC vide, voici quelques copies d’%u00e9crans qui peuvent vous aider:

 

Here is a view of the sample instance hosted in Windows Azure: Voici une vue de l’instance exemple h%u00e9berg%u00e9e dans Windows Azure:

Benjamin

Blog Post by: Benjamin GUINEBERTIERE