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évelopper une application Facebook de type Canvas, hébergée 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épertoire skydrive suivant. Le numéro de version est formaté YYMMJJx où x est une lettre qui permet de distinguer les différentes versions d’un même jour. Par exemple, V120614d est la quatrième 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évelopper une application Facebook de type Canvas suppose de résoudre un certain nombre de problèmes comme: utiliser HTTPS, s’exécuter dans une IFrame où les cookies peuvent ne pas fonctionner (j’ai enlevé la dépendance aux cookies), gérer le jeton OAuth de l’utilisateur courant après l’avoir reçu dans un POST initial, et aussi gérer son expiration. Vous trouverez des solutions dans ce code, et j’écrirai probablement d’autres billets à ce sujet. Si vous avez des questions, n’hésitez pas à 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/.

[UPDATE 22-JUN-2012] The sample app is hosted in Windows Azure Web Sites - please refer to this post.

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é de personnes (l’interface graphique n’a pas été conçue pour un très grand nombre de personnes dans cette version) qui partagent leurs désirs. Un exemple de cette application est disponible à https://apps.facebook.com/need-archims-fr/.

[MAJ le 22-JUIN-2012] L'application exemple est déployée dans les sites Web Windows Azure, comme expliqué là.

Je partagerai le code d’invitation de démo via twitter d’ici quelques jours (pour l’instant j’en ai besoin pour une démo) de façon à ce que vous puissiez essayer l’application. Voici quelques copies d’écrans:

image

image

image

image

image

image

image

image

 

 

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é comment l’application fonctionne dans cette vidéo.

 

I removed secrets from the code, and they are replaced by ___. For instance, you may find this: J’ai supprimé les secrets du code, que j’ai remplacés par ___. Par exemple, vous trouverez ceci:

image

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é le contenu du répertoire packages qui contenait des références que vous pouvez retrouver depuis NuGet et un environnement de développement. Voici ce qui était dans ce dossier:

image

Shoud you start from a blank visual Studio 2012 RC solution, here are a few screen shots that can help you: Si vous démarrez d’une solution Visual Studio 2012 RC vide, voici quelques copies d’écrans qui peuvent vous aider:

image

image

image

image

image

image

image

image

image

 

image

Here is a view of the sample instance hosted in Windows Azure: Voici une vue de l’instance exemple hébergée dans Windows Azure:

image

Smile

Benjamin