 Alors je m'appelle Adrien et en fait le titre qu'on m'a donné à ma présentation c'est Facebook application in 20 minutes with Pyramid et en fait c'est un gros mensonge on va pas faire d'applications Pyramid en 20 minutes parce que c'est court. Pendant en fait, moi je travaille pour Ludia, on fait des jeux occasionnels. Jeux occasionnels c'est un mot politiquement correct pour dire des tout petits jeux sur iPhone et Facebook donc je suis en partie responsable de tous les shares de un peu crap que vous avez sur Facebook. Pays my rent. Et en fait j'aimerais, je vais essayer en fait de... Alors l'idée c'était un peu de présenter qu'est-ce qu'on a fait, enfin vite fait, pourquoi Pyramid c'est génial et comment ça a réussi à vraiment sauver notre vie parce que chez Facebook il y a quelque chose qui est très en vigueur. Ship is better than pay effect. Alors ça chip beaucoup très rapidement mais ce que ça chip des fois c'est pas forcément ce qu'il y a de plus à standard. Donc ce soir on va parler, alors normalement si je fais... Donc l'overview, principalement je vais présenter déjà le Facebook en vase. Nous on fait exclusivement dans Facebook des applications qui sont dans le Facebook, ce qu'on appelle le Facebook en vase. Ensuite je vais présenter la feature qui est quand même très importante. C'est pour la raison pour laquelle j'ai un emploi, c'est le Facebook credits. Where the money comes from. Et enfin je vais essayer de faire rapidement une démo d'une extension pyramid qu'on a appelée Pyramid Facebook. Et je vais essayer en fait surtout de montrer l'emphase de pourquoi Pyramid c'est un framework web génial. Alors déjà, qui connaît Pyramid ? Ok, très... Ok, on va le présenter après. Bon, alors déjà et qui sait ce que c'est qu'une application Facebook qu'en vase ? That's lots of people. Donc vous avez tous un compte Facebook. C'est bien. Donc le Facebook qu'en vase en fait c'est vraiment... Alors je vais essayer de... Je pourrais aller directement sur des jeux, un jeu formidable comme par exemple un jeu de bingo. Si le réseau est suffisamment... Donc le Facebook qu'en vase en fait qu'est-ce que ça permet ? Ça permet tout simplement de charger du contenu dans l'espace Facebook. Ni plus ni moins dans le qu'en vase. En tout cas. Et c'est simplement ça. La façon dont ça marche et c'est assez simple. C'est que dans les developer settings on a juste à ceter ce qu'on appelle la canvas URL. Et la canvas URL en fait derrière qu'est-ce qui va se passer ? C'est que Facebook, si on regarde dans les éléments... Facebook qu'est-ce qu'il va faire ? Ils vont charger un formulaire. Alors est-ce que tout le monde voit ? Est-ce que je fais comme ça ou ça sert à rien ? Non, ça sert à rien. Facebook qu'est-ce qu'ils font ? Ils charge un formulaire, ils mettent la canvas URL, donc là on a notre canvas URL. Et dans ce formulaire ils vont rajouter, ils vont rajouter le, on le voit pas, le sign request, enfin la sign request ici. Et en fait cette sign request c'est un élément qui est très important quand on charge. C'est que la sign request c'est l'élément qui va dire est-ce que le user il a autorisé l'application ou est-ce qu'il ne l'a pas autorisé ? En fait. Le problème c'est que là comme vous l'avez vu pourquoi est-ce qu'ils font un formulaire et pourquoi plutôt que de faire juste une iFrame. La raison elle est simple c'est que avant ils faisaient avec une iFrame, ils mettaient la source et ils appendaient avec un point d'interrogation en query parameter, sign request, etc. Mais la sign request c'est pas de l'encryption, c'est signé mais c'est pas encrypté. Ce qui veut dire que tous les publicitaires qui étaient sur ces applications, quand on cliquait et qu'on allait sur une pub, toutes les agences de pub récupérer le sign request pouvait décrypter sans forcément s'assurer de la validité parce qu'ils n'arrivaient pas à vérifier la signature mais ils pouvaient quand même récupérer le user ID, la locale et des éléments d'information privée. Et donc ils ont fait cette technique pour protéger en fait les informations privées de sorte parce que le referee quand maintenant on clique sur une pub n'envoie plus le user ID et des informations personnelles pour la petite histoire. Mais le sign request avant tout c'est il est signé grâce à des informations qu'on récupère sur principalement, donc là par exemple j'avais créé MP, voilà. Donc là personne ne voit, tac. Voilà je vais avoir une application, je vais avoir un API key, app secret et un M space. Donc maintenant le principe il est souvent le même avec les applications qu'on va sur Facebook. L'algorithme c'est toujours le même et nous on l'a répété. On a essayé justement de séparer ça de sorte à élégamment à chaque fois refaire la même chose mais l'idée c'est on reçoit une requête sur le Canvas de deux choses l'une. Soit le user on a son user ID, auquel cas on lui montre le contenu avec le jeu parce qu'il a déjà installé le jeu donc on a déjà des informations sur ce user. Soit il n'a pas autorisé l'application, auquel cas on le prompt avec l'authentification Facebook, autorise-tu cette application à te spammer etc etc. Donc est-ce qu'il y a des questions sur le Canvas ? Non. Ensuite je présentais parce que la démo je vais la faire après mais c'est principalement c'est ça que je n'ai pas oublié. Pardon. Non non ils appellent ça Facebook Canvas. J'appelle ça Facebook Canvas mais c'est vraiment c'est en gros dans Facebook Developer je tape Canvas, voilà ça va à un moment donné. Voilà, fluide Canvas, Canvas, bla bla bla. Mais ça n'a rien à voir avec HTML5. Donc les Facebook crédits, alors les Facebook crédits ça a été vraiment c'est vraiment le truc déjà Facebook ils ont introduit ça en 2009 et ils l'ont obligé, ils ont dit maintenant tous ceux qui veulent vendre des niaiseries sur Facebook ils sont obligés de passer par nous et on prend une cote de 30% qui sont dites en passant. Le modèle qu'Apple aussi fait cependant. Alors les Facebook crédits c'est vraiment quelque chose qu'ils ont livré vraiment très vite et c'est quelque chose qui est devenu qui a été assez douloureux. Et à la différence dans le Canvas URL quand on développe ces pratiques dans le Facebook Canvas parce que au final dans les settings d'application on met 127.0.0.1 et du coup on n'est pas obligé d'avoir un serveur le Facebook il va charger la page et Live Frame il va charger en local et on va pouvoir voir notre appli ces pratiques. Tandis que vis-à-vis des Facebook crédits tout de suite déjà ça devient un peu plus compliqué parce que là où le Canvas c'est Facebook qui charge dans le browser qui va ensuite charger la Canvas URL. Là le browser va charger Facebook et Facebook on va appeler le point d'entrée pour les Facebook crédits ça va être un appel JavaScript à la SDK Facebook et qui va dire ok je vais acheter je sais pas moi dits bêtises et puis ça va me coûter de temps. Ok et là Facebook nous envoie un callback sur le fabuleux Payment Callback. Alors le Payment Callback ce qui est formidable c'est que le Payment Callback il le présente comme alors attendez parce que je pense que si je tape Payment Callback il le présente comme quelque chose de reste Payment Callback Callback URL not being et en fait disons qu'après c'est sûr qu'il reste on peut dévier de ce que reste veut dire mais là en l'occurrence sur ce Payment Callback ils vont appeler en fait il va y avoir deux méthodes principales le Payment Get Items qui malgré qu'ils soient au pluriel et en fait on va recevoir un ID d'un ce qu'ils appellent un Virtual Good donc par exemple on va dire Get Item de 1 2 3 puis nous on va renvoyer donc le Get Item 1 2 3 les liens de specifications à respecter ou le status Update donc ça c'est en fait dans l'appel reste on a bien évidemment méthode égal le nom de la méthode ce qui est très reste et ensuite on va avoir donc le Payment Status Update qui lui peut aussi signifier différentes choses dépendamment du contenu de ce qu'il y a donc ça peut être un Buy Items normal ou ça peut être un Earned Currency parce que dans Facebook alors on le savait pas mais dans les jeux vous pouvez avoir des Currency par exemple dans, je ne sais pas dans Zynga Farmville on va avoir le Zynga Dollar et avec des Zynga Dollar je peux acheter des carottes des Zynga Carottes et du coup avec les Facebook Credit je peux acheter des Zynga c'est comme une Currency, c'est une Virtuelle Currency je vous dis c'est un monde fabuleux donc on peut faire déjà ces deux choses ou alors on peut aussi faire une dispute et on peut aussi faire un ReFront donc c'est vraiment un status Update le côté qui est... et ça derrière je vous avoue que très rapidement si vous le prototypez très rapidement vous pouvez très rapidement vous retrouver avec un bout if la méthode est galcie, if à l'intérieur j'ai cela else, machin, etc et c'est quelque chose qui très rapidement peut devenir avec un énorme plat Spaghetti, sauce bolognaise donc on a fait une extension Pyramide et je vous avoue que je connais pas Django beaucoup mais j'adore Pyramide alors après on pourra en parler mais vraiment j'ai trouvé que je pense qu'à la JOM on est beaucoup à trouver que Pyramide en gros avec Pyramide ce que vous pouvez vraiment définir un ensemble de routes un ensemble de vues un ensemble de modèles de modèles d'authentification et très facilement pouvoir l'étendre depuis votre application donc je vais essayer de faire une petite démo d'abord je vais d'abord effacer ce que j'avais ici j'avais créé ça pour m'entraîner mais là je vais le diletter pour vivre tout ce processus avec vous alors bien évidemment dans un blanc sur noir peut-être ou noir sur blanc ok, alors excusez-moi boum on va faire un light background ok, donc alors là j'ai déjà un environnement virtuel j'ai installé Pyramide dedans en faisant un beau pip install Pyramide là c'est déjà requis parce que je me suis dit qu'avec l'internet je voulais pas forcément je vais me connecter aussi sur TAC je vais faire tout simplement un P créate Pyramide créate avec un template de starter de l'application mp34 la boum ça va me faire mp34 donc très rapidement principalement qu'est-ce que j'ai ici, je vais avoir alors pareil là on va faire un peu de couleur plus agréable ok, donc principalement dans le main j'ai un objet de configuration après sur cet objet de configuration je peux rajouter par exemple ici j'ai rajouté une route et ensuite je vais scanner le scan c'est vraiment vite fait pour ceux qui ne connaissent pas Pyramide, le scan très rapidement il va aller scanner le pactage et il va aller voir dans view ce que là j'ai une view config route name égale home donc quand je vais aller sur mon home c'est cette vue qui va être chargée avec ce template là donc par exemple si je vais dans mp34 et que je fais un petit python setup développe, poum pisseur, développement reload localhost 643 et là voilà la première chose qu'on va faire c'est qu'on va installer cette extension Pyramide Facebook il est déjà installé en fait et en fait tout simplement pour créer le canvas en fait pour vous montrer aussi le fait qu'il soit installé on va aussi enlever la debug tout le bar parce que ça rajoute du bruit voilà et normalement si je regarde les routes à partir du moment où non ici je vais rajouter tout simplement ça c'est vraiment documenté dans Pyramide, je vais rajouter bah je vais rajouter l'extension Pyramide Facebook et là automatiquement il a rajouté un ensemble si tout se passe bien et ça va pas bien se passer parce que on n'a pas défini les clés dans le INI dans lesquels il faut comme indiqué sur la documentation qui se charge très rapidement voilà j'ai un ensemble de clés à fournir dans le point INI principalement la clé bah oui forcément si j'ai pas si l'extension n'a pas ces informations là ça ne peut pas marcher et donc c'est pour ça qu'on revient sur Facebook Developer on fait create app mp34 alors le name space en fait que vous voyez peut-être pas là mais le app name space en fait c'est très simple ça va définir apps.facebook.com slash name space donc nous on va mettre Montréal-Piton parce que Montréal-Piton Montréal ce qui est disponible alors là vous allez m'aider parce que normalement il y a une espèce de chap voilà c'est bon continue donc là ça load etc on attend ça prend du temps Yannick dépêche toi voilà et là normalement pouf on a notre app app.id là on met l'app.id le name space Montréal-Piton Facebook scope c'est les permissions qu'on pourrait demander en plus donc là j'ai dit voilà y'a user events on va le laisser comme ça et normalement si maintenant je fais pi route excusez je vais on va se rendre compte qu'on a un ensemble de routes qui ont été définies par défaut je vais pas vous les expliquer j'ai pas le temps mais en fait principalement si je reviens ici dans le camp va suer l je vais le mettre d'ailleurs en mode sandbox en fait ça veut dire juste y'a que les développeurs qui vont pouvoir accéder voilà donc là je mets mon petit URL je fais save changes maintenant je vais pouvoir directement aller dans mes vues faire cette fois-ci from pyramid facebook et là je vais me là qu'est-ce que je veux faire je veux déjà faire un beau hello world dans un canvas avec le processus d'autorisation là je vais chercher le facebook canvas et là je fais facebook canvas pouf en disant je vais faire un renderer on va prendre la même chose qu'ici hop hop def bah dans le fond on aurait pu tout simplement faire ça voilà c'est malade et là normalement si c'est une des mots qui se passe bien et que je fais un petit touc et que j'arrive ici que je tape mon apps que là je mets mon name space normalement je suis authentifié je devrais avoir le prompt authorised et là il me demande voilà il me demande ici vous voyez il a bien pris le scope et là je peux faire go to app il va me charger la page de doc normalement voilà en fait et ça c'est très pratique parce que mine de rien tout ce qu'on n'a pas vu c'est le parsing de la sanerie quest valider que la sanerie quest elle va bien chez facebook etc et on arrive et là directement je peux charger le jeu je peux dire ok voilà le swf mettre dans la page html tout ce que je veux donc là on va changer ça pour essayer en 3 minutes 37 de faire les paiements un petit peu moins simple petit on va faire hop return de saint rend d'erreur comme il y a alexandre bourgeant on va utiliser maco voilà comme il y a alexandre bourgeant on va pas oublier de mettre maco directorise directorise égal mp104 boom c'est bon alex hein non non c'est charge automatiquement maintenant avec pyramid 4 non html boom donc là qu'on va se prendre maco on va dire que c'est de l'html s'il vous plaît est-ce que j'ai un snippet oui et là on va mettre le facebook sdk f vous sdk alors là ce qui est génial c'est que du coup dans ben ça c'est vraiment copier collé de facebook doc c'est voilà comment est-ce qu'il faut faire vous voyez les même les commentaires ça c'est pour charger le javascript le sdk javascript donc là ce qui est génial c'est que dans la rick west normalement je vais avoir le registri depuis le registri j'ai les settings et donc je vais avoir la facebook point app id c'est un petit peu long mais c'est bon ensuite le channel a faut un channel html urdomen.com faq ultatif faq ultatif for channel file for xdomen communication faq ultatif boif voilà c'est ça pour la clé t'as pas le temps pour la clé t'as pas le temps pour la clé sort sort en fait le truc le truc le truc parce que le principe c'est que tout commence en fait avec dans la sdk javascript il va y avoir du code javascript pour ouvrir la pop-up de paiement le truc c'est que tout le traitement qui est fait derrière nous on l'a transformé en événementiel avec les événements de pyramide c'est-à-dire plutôt que d'avoir des traitements qui se font en vue on va avoir un événement place item earnure apcurancy dispute refound c'est-à-dire que le développeur il est plutôt que d'aller c'est-à-dire que le principe affreux dans quel cas je suis va juste programmer les événements donc en gros c'est pour ça que ici au niveau de la vue si je vais dans frompyramid facebook.credits je vais normalement avoir voilà tous les facebook oh c'est et c'est parce que c'est dans events voilà je vais avoir justement tout cela de pyramide je vais juste place item order et là je vais avoir ça ça veut dire que quelqu'un est en train de faire un achat donc je vais dire buy item tout et là je vais pouvoir faire tout mon traitement pour dire ok par exemple il a acheté je sais pas il a acheté un power up pour aller plus vite dans un jeu on va pouvoir aller changer ses propriétés en base donnée maintenant on va pouvoir faire pareil vis-à-vis du par exemple le le dispute il y a quelqu'un il est pas content parce qu'il a acheté les 10 power up et puis ça a pas marqué pareil plutôt que de refaire tout le traitement pyramide en fait on arrive on a réussi avec alors maintenant je pourrais vous rentrer dans les détails est-ce que vous voulez que je rentre dans les détails de comment est-ce justement pyramide en gros je veux pas montrer vraiment facebook en tant que tel je veux vraiment plus montrer l'aspect de pyramide comment est-ce que vous arrivez à étendre pyramide de sorte ça va vraiment faciliter le travail parce que ça peut arriver que vous travaillez sur tel API et puis à chaque fois vous répétez tout en les mêmes choses vous vous présentez toujours les mêmes vues, toujours les mêmes routes et bien c'est pareil le vous pouvez les mettre dans une configuration à part et charger cette configuration et c'est peut-être la partie la plus intéressante en fait alors bien évidemment pyramid facebook c'est en plus c'est sur beatbug 4 je pense parce qu'on utilise mercurell parce que git donc pyramid facebook le c'est un peu gros ça pyramid facebook en fait donc le canvas par exemple la façon dont on déclare le canvas c'est qu'on va déjà dans le unit de base de pyramid facebook c'est qu'on va dire le facebook namespace il va être en pré-fixe de toutes nos routes, toutes nos sous-routes par la suite parce que comme ça on n'a pas à se trimballer à chaque fois le pas c'est à refaire cette mécanique donc ça veut dire que tout ce que pyramid facebook va rajouter il va rajouter sur slash namespace ça veut dire que sur facebook si vous avez app sur facebook.com slash alexandre bourget et si vous avez votre application localo slash alexandre bourget bah vous avez un mapping 1 to 1 je dis ça parce que avant on n'avait pas ce mapping là on avait un slash facebook d'un côté puis slash alexandre bourget de l'autre et c'était une horreur parce que à chaque fois on est obligé de grâce à ce mécanisme là on peut utiliser avec pyramid, c'est à dire qu'on veut dire génèrement la route vers l'achat de currency Request.url génèrement la route vis-à-vis du canvas, la façon dont on a fait c'est assez simple, on a fait un décorateur qui hérite de vue config vue config comme vous l'avez vu ici c'est ce qui permet de définir une vue donc vue config on lui fournit une route name on lui fournit un renderer et puis lui le renderer il renvoie le dictionnaire à injecter dans la template nous ce qu'on a fait c'est que pour facebook canvas c'est la vérité de vue config on a juste dit au unit nous la route name c'est facebook canvas et la permission c'est vue canvas et on surcharge ça après on peut récupérer le renderer qu'on veut on peut faire tout ce qu'on veut c'est juste que ça permet aux développeurs qui veulent utiliser pyramid facebook de juste faire ad facebook canvas et derrière on a bâti le modèle d'authentification le modèle d'authentification avec justement il y a une permission donc il y a la sécurité pyramid qui va embarquer qui va dire attend vue canvas ça veut dire que dans la Request, j'ai un sign Request il y a l'idée par facebook qui est auto signé et dans lequel j'ai un user ID si j'ai pas un user ID ça veut dire que je vais tomber sur la l'install canvas l'install canvas qui est aussi un décorateur donc on pourrait aussi utiliser lui il va dire je suis en http forbidden ça ça veut dire que j'ai pas l'user ID et par défaut pyramid facebook fournit le prompt authorize et c'est pour ça que automatiquement quand je suis arrivé sur sur l'application morale piton j'ai le prompt authorize qui est arrivé et ça c'est du code on l'a écrit une fois et une bonne fois pour toutes et maintenant c'est ce qu'on utilise dans tous nos jeux plus personne et j'ai plus aucun souci vis-à-vis des développeurs qui veulent développer une application je me dis plus ok est-ce qu'ils vont faire ça bien non ils ont juste à rentrer ils s'occupent juste du canvas les crédits c'est un peu plus compliqué parce que les crédits justement comme je vous ai montré il y a beaucoup beaucoup beaucoup le slash crédit donc pareil il y a un callback vis-à-vis vis-à-vis de facebook on a pris genre slash alexandre bourget slash crédits et sur slash crédits ben voilà on peut faire plein de choses et c'est là où on a utilisé les prédicats de pyramid pour séparer nos cas c'est comme je vous ai vu comme je vous ai montré tout à l'heure il y a le get items, le status update dans le status update il y a 4 sous autres cas c'est une douleur et donc là on a déjà dit ok il dit que si j'ai ces paramètres ça c'est des trucs qui sont spécifiés chez facebook et donc déjà ici vis-à-vis du framework en tant qu'elle j'élimine déjà tout plein de cas ou des petits malins et c'est vrai d'aller chercher des crédits automatiquement en disant par exemple je vais avoir tout ça ensuite le sign request ici le facebook crédit contexte c'est lui qui va définir qui va éryter le sign request contexte c'est lui qui va permettre la validation de la requête signée et donc on a un ensemble de routes vis-à-vis de tous les cas qu'on vous a présentés donc le update le update disputé c'est sûr que là on a utilisé des noms longs comme le bras et on a défini aussi pareil pour la méthode facebook get items ce qu'on a défini c'est qu'on a défini un décorateur je peux vous me donner la doc elle va être un peu mieux mais comme il me reste 18 secondes il va être très rapidement mais en gros le décorateur voilà le décorateur qu'on a défini c'est tout ce qu'on peut acheter doit être retourné par ce décorateur et par cette méthode et donc en fait on est venu enlever un tas de je peux pas le dire mais un tas de trucs pas très bien fait chez facebook et puis derrière on a étendu on a vraiment pyramid et extraordinaire pour tout ce qui va être de l'étendre c'est génial parce qu'on peut vraiment factoriser un ensemble de trucs et puis il est présenté à tout le monde alors c'est disponible sur bitbucket si jamais vous voulez faire des jeux ou des carottes ou des ingas choses sur facebook n'hésitez pas et je serais ravi de vous parler de tout ça au moment de la bien j'ai plein de choses à raconter une question