Vývoj aplikací pro Facebook v ASP.NET

Transkript

BAKALÁŘSKÁ PRÁCE
Vývoj aplikací pro Facebook
v ASP.NET
Facebook application development
in ASP.NET
Miloš Broulík
Un ico rn Co lle ge , V K ap slo vn ě 27 67 /2 , P ra h a 3 , 1 30 00
Ná ze v p rá ce v ČJ:
Ná ze v p rá ce v AJ:
V ývo j ap lika cí p ro Fa ceb o o k v
A SP . NET
Fa ceb oo k a pp lica t io n de ve lo pm en t
in AS P . NET
Au to r:
Milo š B ro u lík
Aka de m ický ro k:
2 00 9/ 2 01 0
Ko nt a kt:
E -ma il:m ilo s. b ro u lik@ gm a il. com
Bakalářská práce
Facebook application development in ASP.NET
I. ZADÁNÍ
Obrázek I.1:
II. ABSTRAKT (CS)
Tato práce obsahuje návod na vytváření aplikací pro Facebook na platformě ASP.NET. V první
části popisuje současný stav Facebooku a možnosti integrace. V druhé části ukazuje, jak se vytváří
aplikace za použití Microsoft Facebook Developer Toolkitu a popisuje práci s vývojářskými nástroji.
Třetí část ukazuje návrh aplikaci pro hodnocení (nejen) restaurací pro server www.polednicek.cz.
Klíčová slova: Facebook, ASP.NET, tvorba aplikací, tutoriál, web aplikace, Facebook platforma, vý voj
III. ABSTRACT (EN)
This paper is tutorial to application development for Facebook in ASP.NET platform. First part
describes current state of Facebook platform and integration options. Second part shows how to
develop own web application with Microsoft Facebook Developer Toolkit and desribes how to work
with development tools. Third part shows design of the restaurant rating system for server
www.polednicek.cz.
Klíčová slova: Facebook, ASP.NET, application development, tutorial, web application, Facebook
platform, development
IV. PROHLÁŠENÍ
Prohlašuji, že svou bakalářskou práci na téma „Vývoj aplikací pro Facebook v ASP.NET“ jsem vypracoval samostatně pod vedením vedoucího bakalářské práce a s použitím odborné literatury a
dalších informačních zdrojů, které jsou v práci citovány a jsou též uvedeny v seznamu literatury a
použitých zdrojů.
Jako autor uvedené bakalářské práce dále prohlašuji, že v souvislosti s vytvořením této bakalářské
práce jsem neporušil autorská práva třetích osob, zejména jsem nezasáhl nedovoleným způsobem
do cizích autorských práv osobnostních a jsem si plně vědom následků porušení ustanovení § 11 a
následujících autorského zákona č. 121/2000 Sb.
V Praze dne 7.5.2010
…….……………….
Miloš Broulík
V. PODĚKOVÁNÍ
Děkuji vedoucímu bakalářské práce Davidu Hartmanovi za účinnou metodickou, pedagogickou
a odbornou pomoc a další cenné rady při zpracování mé bakalářské práce.
VI. OBSAH
I. Zadání........................................................................................................................................... 3
II. Abstrakt (cs)................................................................................................................................. 4
III. Abstract (en)................................................................................................................................ 5
IV. Prohlášení................................................................................................................................... 6
V. Poděkování.................................................................................................................................. 7
VI. Obsah......................................................................................................................................... 8
1. Úvod.......................................................................................................................................... 11
1.1 Poznámka k jazyku.............................................................................................................. 12
1.1.1 Změna jazyka.............................................................................................................. 12
1.2 Poznámka k citacím............................................................................................................. 12
2. Facebook................................................................................................................................... 14
2.1 Historie................................................................................................................................ 14
2.1.1 Application platform..................................................................................................... 14
2.1.2 Facebook connect....................................................................................................... 14
2.2 Zdroje informací................................................................................................................... 15
2.3 Sociální graf......................................................................................................................... 15
2.4 Technologie......................................................................................................................... 16
3. Nástroje..................................................................................................................................... 18
3.1 Microsoft Visual Studio 2008............................................................................................... 18
3.2 Facebook Developer Toolkit................................................................................................ 18
3.3 TCPMon.............................................................................................................................. 19
3.4 Firebug................................................................................................................................ 19
4. Klíčové komponenty.................................................................................................................. 20
4.1 REST API............................................................................................................................ 20
4.2 Graph API............................................................................................................................ 20
4.3 FBML................................................................................................................................... 20
4.4 XFBML................................................................................................................................. 21
4.5 FBJS.................................................................................................................................... 22
4.6 FQL...................................................................................................................................... 22
5. Integrace aplikace do Facebooku.............................................................................................. 24
5.1 Interní aplikace.................................................................................................................... 24
5.2 Connect............................................................................................................................... 24
5.3 Canvas Page....................................................................................................................... 24
5.3.1 iFrame canvas............................................................................................................. 25
5.3.2 FBML canvas............................................................................................................... 25
5.4 Integrace do profilu.............................................................................................................. 25
5.4.1 Profile Box, Profile Information....................................................................................26
5.4.2 Profile Tab................................................................................................................... 26
5.4.3 Záložka ....................................................................................................................... 27
5.4.4 Publisher...................................................................................................................... 27
5.5 Možnosti komunikace.......................................................................................................... 28
▪8▪
5.5.1 Stream......................................................................................................................... 28
5.5.2 Feed templates............................................................................................................ 29
5.5.3 Notifications................................................................................................................. 29
5.5.4 Requests, Invitations................................................................................................... 30
5.5.5 E-mail.......................................................................................................................... 30
5.5.6 Application Dashboard................................................................................................. 30
6. Facebook connect..................................................................................................................... 31
7. Oprávnění a pravidla................................................................................................................. 32
8. Autorizace a autentifikace.......................................................................................................... 33
8.1.1 Komunikace mezi FB a aplikací...................................................................................33
8.1.2 Automatická autentifikace............................................................................................ 33
8.1.3 Autorizace.................................................................................................................... 33
8.1.4 Rozšířená oprávnění .................................................................................................. 34
9. Příprava prostředí...................................................................................................................... 36
9.1 Založení aplikace................................................................................................................. 36
9.1.1 Nastavení – basic........................................................................................................ 37
9.1.2 Nastavení – authentication.......................................................................................... 38
9.1.3 Nastavení – profiles..................................................................................................... 39
9.1.4 Nastavení – canvas..................................................................................................... 40
9.1.5 Nastavení – connect.................................................................................................... 41
9.1.6 Nastavení – widgets.................................................................................................... 42
9.1.7 Nastavení – advanced................................................................................................. 43
9.1.8 Nastavení – migration.................................................................................................. 44
9.1.9 Nastavení – Smajlíci FBML......................................................................................... 44
9.1.10 Nastavení – Smajlíci iFrame......................................................................................45
9.2 Best practices...................................................................................................................... 46
9.3 Založení projektu................................................................................................................. 46
9.3.1 Visual Studio 2010....................................................................................................... 47
10. Ukázkové aplikace................................................................................................................... 50
10.1 FBML stránka ................................................................................................................... 50
10.1.1 Nastavení pro FDT.................................................................................................... 51
10.1.2 FBML formátování hlavičky.......................................................................................51
10.1.3 Další FBML obsah..................................................................................................... 52
10.2 Pomocné třídy................................................................................................................... 54
10.3 Publikování do streamu..................................................................................................... 58
10.3.1 Publikování s potvrzením........................................................................................... 58
10.3.2 Dialogová okna.......................................................................................................... 65
10.3.3 Získání autorizace..................................................................................................... 66
10.3.4 Automatická publikace............................................................................................... 67
10.4 IFrame stránka.................................................................................................................. 72
10.4.1 Master Page.............................................................................................................. 72
10.4.2 Facebook JS Client Library........................................................................................ 72
10.4.3 XFBML....................................................................................................................... 75
10.5 Načítání informací.............................................................................................................. 75
▪9▪
10.5.1 Dashboard API - counter........................................................................................... 79
10.5.2 Dashboard API – novinky.......................................................................................... 81
10.5.3 Stránka bez master page........................................................................................... 83
10.6 Karta (Tab)........................................................................................................................ 83
10.7 Publisher............................................................................................................................ 85
11. Poledníčkova statistika............................................................................................................ 91
11.1 IMDB.com statistika .......................................................................................................... 91
11.2 Koncept............................................................................................................................. 91
11.2.1 Oprávnění k datům.................................................................................................... 92
11.2.2 Kontrolér.................................................................................................................... 92
11.2.3 Datové struktura........................................................................................................ 93
11.2.4 Hodnocení................................................................................................................. 93
11.2.5 Use Case – Hodnocení.............................................................................................. 94
11.2.6 Zobrazení výsledků.................................................................................................... 95
11.3 Integrace............................................................................................................................ 96
11.3.1 Perzistence................................................................................................................ 96
12. Závěr (cs)................................................................................................................................ 97
13. Conclusion (en)........................................................................................................................ 98
VII. Seznam použité literatury......................................................................................................... 99
VIII. Seznam použitých symbolů a zkratek...................................................................................101
IX. Seznam obrázků..................................................................................................................... 102
X. Seznam tabulek........................................................................................................................ 103
XI. Seznam příloh......................................................................................................................... 104
a) Přiložený software................................................................................................................... 105
b) Modely komunikace................................................................................................................. 106
c) Cross domain communication................................................................................................. 108
d) Anatomie Facebooku............................................................................................................... 110
▪ 10 ▪
1.
ÚVOD
Moderní sociální sítě dnes vládnou internetu. Facebook je se svými 400 miliony uživateli jendou z
nejnavštěvovanějších1 stránek současnosti. Důkazem zajímavosti sociálních sítí může být nemalý
počet studií na toto téma. (Například [NEWMAN et.al. 2001],[CARRINGTON et.al. 2005],[WASSERMAN et.al. 1994] )
Facebook se stal fenoménem moderního internetu, je i často zmiňován v médiích. Díky své
otevřenosti pro aplikace externích programátorů je tak ideálním místem pro hledání a získání
nových uživatelů - zákazníků.
Ač je Facebook pro vývojáře velice zajímavý, existuje pouze málo publikací popisujících, jak se ex terní aplikace pro Facebook vytváří. Situace je v tomto směru špatná i s oficiálně podporovanými
frameworky, natožpak s frameworky třetích stran.
První část práce popisuje vlastní platformu Facebooku, její možnosti, klíčové koncepty a technologie. Pochopení stavebních prvků usnadní vývojářům vývoj aplikací.
V druhé části jsou předvedeny možnosti vývoje pro Facebook na platformě .NET. Zejména pak vývoj webových aplikací ASP.NET psaných v jazyku C#. Jsou ukázány první krůčky při vývoji aplika ce pro tuto platformu a možnosti sociální integrace.
V poslední části je popsán systém pro uživatelské hodnocení. Tento systém ukazuje smysluplné
využití platformy a je myšlen, jako interaktivní rozšíření plánovaného rozšíření serveru polednicek.cz o Facebook aplikaci.
Jako základ pro programování je využit Microsoft SDK for Facebook, označovaný také jako Facebook Developer Toolkit (FDT) ve verzi 3.1 BETA. Dokumentace k této knihovně je velice omezená
a tak může tato práce sloužit jako výhradní zdroj informací při jejím nasazení. V textu práce jsou
uvedeny drobné změny, které jsem do toolkitu pro ulehčení práce provedl.
Je nutné podotknout, že Facebook je ještě poměrně mladý, stále se vyvíjí a s ním i jeho rozhraní a
možnosti. Proto se většina literatury nedá použít na 100%. Stejně tak se brzy po napsání i tato prá ce stane zastaralou, ale principy zůstanou jistě dlouhou dobu stejné. K velké změně došlo i ke kon ci psaní této práce. REST API používané v této knize Facebook odsunul na druhou pozici za
OpenGraph API, ale i nadále je možné ho používat.
Tato práce se zmiňuje i o principech a funkcích, které byly nebo brzo budou odstraněny proto, aby
čtenář porozuměl i jiným starším zdrojům.
1
Druhý v pořadí podle Alexa Internet [ALEXA]
▪ 11 ▪
Po prostudování této práce by měl být čtenář schopen vytvářet aplikace integrované do Facebooku.
1.1 Poznámka k jazyku
Názvosloví Facebooku nemá ve velké míře dostatečně dobré české ekvivalenty a v podstatě
žádná dokumentace pro Facebook v češtině ani neexistuje. Proto jsou je v textu používáno
převážně anglické názvosloví. České ekvivalenty jsou uvedeny tam, kde to je možné. Pokud má
výraz poměrně ustálený překlad (např pozvánky – invitations) je v textu pro lepší čitelnost používán
český výraz.
Všechny obrázky jsou pro lepší korespondenci s termíny v textu pořízeny s jazykem „English (US)“.
Všem vývojářům doporučuji přejít také na tento jazyk a to jak kvůli již zmíněné dokumentaci, tak
proto, že facebooková aplikace Developers2 má velice špatný překlad.
1.1.1 Změna jazyka
Změnit jazyk rozhraní na Facebooku je velice snadné. Na každé stránce v patičce vlevo je zobrazen aktuální jazyk (viz Obrázek 1.1) po kliknutí na něj se otevře dialog se všemi možnými jazyky.
Kliknutím na příslušný jazyk se nastavení změní.
1.2 Poznámka k citacím
V textu je velké množství odkazů na webové zdroje na stránkách Facebooku [FB-BLG], [FB-DOC],
[FB-HLP], [FB-STA], [FB-WIK], stránkách Microsoftu [FDT-CP] a stránkách projektu Facebook
Developer Toolkit na serveru www.codeplex.com [FDT-HP]. Odkazy na tyto zdroje jsou v textu
uváděny jako poznámky pod čarou obsahující URL dokumentu, na kterém se nachází odkazovaná
informace.
2
Tato aplikace slouží k zakládání a nastavení vlastních aplikací, viz kapitola 9.1 Založení aplikace
▪ 12 ▪
Obrázek 1.1: změna jazyka Facebooku
▪ 13 ▪
2.
FACEBOOK
2.1 Historie
Facebook byl spuštěn v únoru roku 2004. V počátcích se rozšířil zejména mezi studenty vysokých
škol v Americe. Ale velice rychlým nárůstem popularity dorostl až od dnešních rozměrů 3:
•
Počet uživatelů: 400 milionů
•
70% uživatelů žije mimo USA
•
Každý z uživatelů má v průměru 130 přátel
•
25 miliard unikátních položek přibude jako obsah Facebooku každý měsíc (fotek, odkazů,
komentářů...)
2.1.1 Application platform
Application platfrom v sobě zahrnuje veškerou integraci externích aplikací uvnitř Facebooku. Obsahuje několik technologií označovaných jako core components (klíčové komponenty). Například
FBML (facebook markup language), REST API, FQL (facebook query language) a další.
Ke spuštění application platform došlo v roce 2007, kdy měl Facebook „pouze“ 40 milionů uživatelů4. V té době byl pro vývojáře mnohem otevřenější než dnes. K omezování aplikací je totiž Face book nucen nevhodným chováním některých špatných aplikací. Právě kvůli nárůstu počtu uživatelů
a aplikací (nyní přes 550 0003) se stal aplikační platforma mnohem robustnější, složitější a stále se
vyvíjí. To klade na vývojáře velké nároky, protože musí neustále svoje aplikace upravovat, aby odpovídali současným pravidlům a rozhraní. Na druhou stranu Facebook přináší obrovskou základnu
potenciálních uživatelů – aplikace na Facebooku využívá pravidelně více jak 70% uživatelů 3.
Velkou změnu pro fungování celé platformy přináší Graph API 5. Tento nový přístup k datům, stejně
jako řadů dalších změn, přinesla konference F8 21-22.4.2010.
2.1.2 Facebook connect
Ke spuštění Facebook connect došlo v prosinci 20086, v době, kdy pro FB platformu existovalo
52 000 aplikací. Tento nový přístup umožňoval přenést svoji identitu z Facebooku na externí
stránky a konat akce pod svým pravým jménem. Beta provoz s vybranými vývojáři ukázal, že 2/3
3
http://www.facebook.com/press/info.php?statistics
4
http://developers.facebook.com/blog/post/365
5
http://developers.facebook.com/docs/api
6
▪ 14 ▪
nově registrovaných uživatelů se registrovalo se svým Facebook účtem a na stránkách byli až o
50% aktivnější. V únoru 2009 se možnosti FB connect rozrostly7 o sociální widget s comment box.
Ten umožňuje uživatelům zanechat na stránkách komentář. Comment box byl dlouhou dobu jediným pluginem pro connect stránky. Novinkou od F8 je 7 dalších pluginů. Nejjednodušším z nich je
I Like tlačítko, které dává uživatelů možnost doporučit stránku, na které je Like Button. Tlačítko
samo zobrazuje počet uživatelů, kteří na něj klikly, profilové fotky přátel navštěvujícího uživatele a
při kliknutí se tato akce zapíše do streamu uživatele.
2.2 Zdroje informací
Facebook má pro vývojáře vytvořenou speciální subdoménu http://developers.facebook.com. Z ní
se dostanete ke všem informacím, které Facebook vývojářům poskytuje on-line. Zde je výčet některých důležitých míst:
•
Facebook wiki – nejdůležitější zdroj informací o REST API. Dlouhou dobu se jednalo o jedinou dostupnou dokumentaci: http://wiki.developers.facebook.com/
•
Nová dokumentace spuštěná po F8, obsahuje reference pro Graph API a FBML a FQL.
Facebook
sem
postupně
migruje
všechny
informace
z
wiki.
http://developers.facebook.com/docs/
•
Facebook
Developers
blog
–
hlavní
zdroj
novinek
a
změn
pro
vývojáře:
http://developers.facebook.com/blog/
•
Push changes – stránka obsahující změny platformy, updatovaná každý týden:
http://wiki.developers.facebook.com/index.php/Push_Changes
2.3 Sociální graf
Silným motivačním prvkem pro vytváření aplikací pro Facebook je jejich úzká provázanost se sociální
sítí prostředí. Sociální sítí v obecné rovině rozumíme abstraktní strukturu reprezentující propojení
jednotlivých členů sociálního systému na základě jejich známosti, spolupráce či přátelství (definice
záleží na konkrétní doméně). Obecně řečeno se sociální síť skládá z jednotlivých vrcholů reprezentovaných participujícími lidmi a hran mez těmito vrcholy vyjadřující jejich sociální provázanost doménově definovaného typu.
V případě Facebooku je provázanost reprezentovaná vztahem „přátelství“. Celkově se jedná o neorientovaný graf reprezentující sociální propojenost uživatelů Facebooku. V tomto grafu lze vysledovat
7
▪ 15 ▪
mnohé zajímavé vlastnosti a odvodit specifické strukturální prvky, viz [WASSERMAN et.al. 1994,
NEWMAN et.al. 2001, CARRINGTON et.al. 2005].
Jednou z vlastností takovýchto sociálních sítí je „fenomén malého světa“. Jedná se původně o hypotézu Stanleyho Milgrama z roku 1967, viz [TRAVERS et.al. 1969], potvrzená několika experimenty,
která původně tvrdila, že mezi dvěma libovolnými lidmi v USA vede po sociální síti (obdoba sociální
sítě Facebooku, ale v reálném světě) v průměru cesta dlouhá 6 hran. Tato hypotéza byla přeformulována jako platná pro celý svět a v posledních letech se používá zejména v kontextu interne tových sociálních sítí. V obecnosti hrubě řečeno se jedná o vlastnost, kdy i relativně řídký graf
umožňuje velmi krátkou průměrnou cestu spojení dvou vrcholů [WATS et.al. 1998].
Kromě základních typů vrcholů reprezentovaných lidmi je v prostředí Facebook také možné definovat
další typy vrcholů primárně určené k propagaci firmy, známé osoby, zájmu, myšlenkového směru a jiných. Pro tyto účely jsou určeny Stránky (v originále pages) někdy souhrnně se skupinami (groups)
označovány jako veřejné profily (public profiles). Veřejné profily tvoří speciální množinu vrcholů, která
se na zbytek grafu napojuje hranou s významem „líbí se mi“ (očividně neexistují žádné přímé hrany
mezi takovýmito vrcholy).
Znalosti některých charakteristik a struktury původní sociální sítě je možné využít k vhodné cílené
propagaci produktu těmito cestami. Proto je Facebook velmi vhodným prostředím pro vytváření a
správu cílené reklamy a rozhodně patří k jednomu z budoucím směrům marketingu, jako příklad lze
jmenovat náborový management [MONTGOMERY et.al. 1991].
2.4 Technologie
Facebook je mimo svého obsahu velice zajímavý i technologiemi, které umožňují tento obsah
uživatelům doručovat. Facebook je totiž postaven na open-source software, mezi který patří
Apache (web sever), PHP, MySQL a memcached. Sám se zapojil do jejich vývoje a zlepšil zejména jejich výkcionnost8.
Sám Facebook vytvořil několik vlastních projektů pod open-source licencemi, zde pro ilustraci dvě
vybrané:
•
Thrift9 – software framework pro vývoj škálovatelných vícejazykových služeb. Součástí
jsou knihovny a nástroje pro generování kódu pro tvorbu klient – server protokolů. Cílem
projektu je vytvořit co nejvýkonnější platformu pro komunikaci a serializaci dat. Od května
2008 je tento projekt v Apache inkubátoru: http://incubator.apache.org/thrift/
8
[2] 32-33
9
http://incubator.apache.org/thrift/
▪ 16 ▪
◦
•
více na http://incubator.apache.org/thrift/
Scribe10 – server pro agregování logovacích dat z velkého množství koncových zařízení v
reálném čase. Design byl zaměřen na škálovatelnost a rozšiřitelnost bez zásahu do klientské části.
◦
Více na http://developers.facebook.com/scribe/
10 http://developers.facebook.com/scribe/
▪ 17 ▪
3.
NÁSTROJE
3.1 Microsoft Visual Studio 2008
Ukázkový materiál je vytvořen v MS Visual Studiu 2010 na Windows XP SP3 s .NET frameworkem
4.0. Ukázkové webové aplikace jsou spouštěny v interním webovém serveru, což sebou přináší některé výhody a nevýhody: Usnadňuje to konfiguraci, protože není nutno zvlášť instalovat a
spravovat IIS a zlehčuje debugování.
Ukázkový materiál, stejně jako použitá knihovna, je napsán v jazyku C#, pro podrobnou referenci k
jazyku lze odkázat na [ROBINSON et al. 2004], pro konfiguraci webové ASP.NET aplikace na
[AVERY et al. 2004].
Studenti Unicorn College (a i dalších škol) mají možnost Virtuální studio získat z MSDN Academic
Alliance - http://msdn63.e-academy.com/unicorncollege_infotech nebo z projektu Dream Spark
http://dreamspark.com/
3.2 Facebook Developer Toolkit
Facebook primárně podporuje pouze omezený počet knihoven pro vývojáře PHP, JavaScript, iPhone. Spolu s partnery pak ActionScript 3.0 (s Adobe) Force.com for Facebook (s salesforce.com) a
Microsoft SDK for Facebook Platform (podporovaný Microsoftem) – na www.codeplex.com označovaný jako Facebook Developer Toolkit.
FDT je klientská knihovna podobná své PHP obdobě. S cílem umožnit .NET vývojářům snadno a
rychle využívat možnosti Facebook pltaformy 11.
Ač je knihovna oficiálně sponzorovaná Microsoftem, tak není její dokumentace příliš obsáhlá a v
současné chvíli nefungují části ukázkových aplikací. Jako nic na světě není ani tato knihovna dokonalá a pro naše účely do ní budeme muset udělat drobné zásahy, proto je vhodné stáhnout
zdrojové kódy. (Je možné stáhnout zkompilované .dll knihovny a importovat pouze je.)
FDT je distribuováno pod Microsoft Permissive License (Ms-PL).
11 http://msdn.microsoft.com/en-us/windows/ee388574.aspx
▪ 18 ▪
3.3 TCPMon
Protože Visual Studio vývojový server odpovídá pouze na požadavky z localhostu a v některých
případech (viz níže) je potřeba, aby Facebook komunikoval s naším serverem, je nutné pro požadavky z Facebooku vytvořit proxy bránu.
Microsoft dodává jeden nástroj k tomuto zdánlivě vhodný jakou součást Microsoft SOAP toolkit. Vývojáři zvyklí využívat výhradně MS nástroje by se mohli pokoušet použít nástroj Trace utility z této
sady. Bohužel ale při přesměrování dojde k přílišné prodlevě a Facebook se chová, jako by nedostal odpověď.
Nástroj TCPMon napsaný v Javě je však dostatečnou náhradou. Je volně stažitelný z adresy
https://tcpmon.dev.java.net/ a jeho použití vyžaduje pouze nainstalovanou Javu 1.4+.
Tyto nástroje vedle obyčejného přesměrování ještě zobrazují veškeré požadavky a usnadňují tak
ladění aplikace, protože je vidět veškerá komunikace.
3.4 Firebug
Pro vývoj moderních webových aplikací se zcela běžně využívají debugovací nástroje jako součásti browserů. Tyto nástroje velice usnadňují ladění HTML, CSS a hlavně JavaScriptu. V této prá ci je ukázána práce ve Firebugu (http://getfirebug.com) – pluginu pro Firefox.
Firebug umožňuje
•
•
•
procházení a změny v HTML, CSS, DOM
JavaScript Debuging
Monitorování komunikace
V ostatních webových prohlížečích je možné použít obdobné nástroje. Zmíním zde pouze Firebug
lite pro IE6 a 7 a Developer Tools v IE8, které poskytují obdobné funkce.
Při vývoji pro FB mají tyto nástroje jeden nesporný přínos: Facebook často (při použití FBML viz
níže) modifikuje stránku, kterou odešleme z našeho serveru. Jedinou možností jak prozkoumat a
porozumět finálnímu chování stránky je procházení již „profiltrované“ stránky, kterou obdržíme z
Facebooku, v našem prohlížeči.
▪ 19 ▪
4.
KLÍČOVÉ KOMPONENTY
Programování pro Facebook je možné díky následujícím technologiím, které staví na osvědčených
technologiích a principech používaných u webových aplikací. Jejich pochopení a znalost je důležitá
pro každého programátora, který chce pro tuto jedinečnou platformu programovat.
4.1 REST API
Základem propojení externích aplikací je REST API (Representational State Transfer Application
Programming Interface). Základní stránkou dokumentace je
http://developers.facebook.com/docs/reference/rest/.
Ke komunikaci dochází pomocí http požadavků (POST nebo GET) na Facebook API RETS server
(http://api.facebook.com/restserver.php). Tyto požadavky jsou pro nás obaleny třídami v FDT, ale
pro pochopení fungovaní je dobré o těchto dotazech vědět. Stránka také slouží jako reference
toho, co je a není na FB platformě možné.
4.2 Graph API
Je novinkou od F8 konference, má za úkol zjednodušit přístup k datům. Zpřístupňuje data v sociálním grafu úplně v novém pohledu se sjednoceným přístupem ke všem entitám a vazbám mezi
nimi. Graph API bylo pro veřejnost uvolněno 21.4.2010, tedy v době, kdy byla tato práce z velké
části již napsána, není ani v současné době podporováno FDT - proto se jím tato práce nezabývá.
http://developers.facebook.com/docs/api
4.3 FBML
FBML je zkratka pro Facebook Markup Language, neboli Facebook značkovací jazyk. Je to značkovací jazyk postavený nad HTML (i když některé tagy chybí), který umožňuje snadnou a rychlou
tvorbu aplikačních stránek, které mají stejný „look and feel“ jako Facebook. Navíc některé dodané
tagy obstarávají sociální obsah při vynaložení minimálního úsilí.
Základní stránkou dokumentace pro FBML je http://wiki.developers.facebook.com/index.php/FBML.
FBML přidává nové tagy dělící se do několika kategorií:
▪ 20 ▪
•
Tagy pro sociální data: ty umožňují do obsahu stránek přidávat obsah, jinak dostupný
přes volaní API, bez takovéhoto volání. Takovýto obsah může mít mnoho forem od informací o uživateli po jeho fotky. Ukázkou je třeba tag <fb:name>, který podle parametru uid
doplní jméno uživatel Facebooku
•
Sanitační tagy upravující chování některých objektů podle pravidel Facebooku. Například
není možné do stránky vkládat Flashové animace pomocí tagu <object>, místo toho existuje fb:swf tag, který do stránky flash nahraje s tím, že v některých místech nemůže být fla sh spuštěn automaticky. Form tagy jsou automaticky doplněny o nutné skryté položky.
•
Designové tagy, které slouží k zachování podobného vzhledu aplikací, jako má Facebook. Pro uživatele je pohodlné požívat stále podobnou navigaci a ovládací prvky. Tyto
prvky jsou většinou čistě přeloženy do HTML a CSS bez přidané další funkčnosti.
•
Tagy komponent umožňují vývojářům vložením jednoho tagu vložit do stránky celou
funkčnost. Ukázkou je například <fb:comments>, který do stránky vloží widget 12 umožňující vkládání komentářů. Další ukázkou je prefabrikát pro výběr přátel <fb:friend-selector>
•
Rozhodovací tagy umožňují podmíněné zobrazení obsahu stránky, ať již podle věku nebo
podle příslušnosti ke skupině. (například <fb:21-plus>)
Funkčnost FBML je zajištěna Facebookem. Ten tyto značky přefiltruje a vyrenderuje za pomocí
HTML, CSS a JavaScriptu.
4.4 XFBML
Dlouhou dobu byly FBML značky dostupné pouze uvnitř Facebooku. S uvedením Facebook
Connect přišlo i XFBML, které umožňuje použít některé podobné značky i mimo Facebook. Pomocí
JS knihovny jsou pak tyto značky převedeny do HTML, CSS a JS, stejně jako u FBML.
Počet tagů je mnohem menší než u FBML, ale tag <Fb:serverFbml> umožňuje v sobě použít veškeré FBML tagy, protože se vykreslí jako iFrame a jeho obsah je vyrenderován na FaceBooku
stejně jako FBML.
Pro správné použití XFBML je potřeba pro dokument definovat xml name space „fb“ nejlépe v html
tagu:
12 Widgety jsou hotové kusy funkčnosti, více níže
▪ 21 ▪
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
Dále je potřeba importovat JS knihovny a spustit JS direktivy. Více o tomto najdete níže.
Zdroj dokumentace pro XFBML je http://wiki.developers.facebook.com/index.php/XFBML.
4.5 FBJS
Facebook umožňuje FB aplikacím ve svých stránkách používat JS i když se renderují ve stejném
framu. Pokud by tato možnost byla zcela bez omezení, znamenalo by to veliké riziko. Aplikace by
mohly přepisovat základní objekty a manipulovat s celou stránkou Facebooku. To by mohlo ohrozit
i jiné aplikace, protože jsou místa, kde se vyskytuje více aplikací zároveň (např.: box tab). Facebook proto JS kód (ale i HTML a CSS) obaluje do sandboxu. Před jména všech funkcí a
proměnných přidává unikátní řetězec, který zajistí jejich nekonfliktnost.
Změna všech odkazů znamená, že se i volání na normálně přístupné objekty v JS změní. Proto
Facebook aplikaci dodává sadu náhradních objektů, které plní většinu požadovaných funkcí s
drobnými změnami. Zejména manipulace s DOMem je změněna z properites na metody set/get.
Změny jsou také v práci s událostmi. Některé události chybí zcela a jiné jsou přístupné pouze na
určitých místech: například onload není možné použít mimo základní stránky aplikace.
Dokumentace k FBJS je dostupná z http://wiki.developers.facebook.com/index.php/FBJS.
Sanboxování a hlavně jeho omezení přístupu k základním konstruktům JS znemožňuje
použití většiny oblíbených JS frameworků jako je jQuery nebo prototype.
4.6 FQL
FQL (dokumentace http://developers.facebook.com/docs/reference/fql/ ) je zkratkou pro Facebook
Query Language, jazyk ne nepodobný SQL. Tento jazyk umožňuje poměrně snadno a rychle získávat sociální data. V současné době je přístupno 43 tabulek 13. I přes to, že má FQL značná omezení, je velice silným nástrojem. Základním konstruktem je:
13 http://wiki.developers.facebook.com/index.php/FQL_Tables
▪ 22 ▪
SELECT column1, column2 FROM table WHERE id = 1 OR id=2
Nejedná se o plnohodnotný SQL jazyk: existuje pouze funkce SELECT, vždy se dá vybírat pouze z
jedné tabulky a minimálně jedna podmínka ve WHERE klauzuli musí odkazovat na indexable sloupec – Facebookem označený sloupec, nad kterým je držen index.
Ve FQL je dále ještě možno využít klauzule ORDER BY, LIMIT a IN se stejným efektem jako v
MySQL.
▪ 23 ▪
5.
INTEGRACE APLIKACE DO FACEBOOKU
Předchozí kapitoly se zmiňovali o Facebooku na obecné rovině. V této kapitole jsou popsány
možnosti vlastní integrace aplikace do Facebooku.
5.1 Interní aplikace
Facebook dává aplikacím dva zcela odlišné přístupy integrace. Prvním základním je možnost
umístit aplikaci „dovnitř“ Facebooku, kde je zobrazována ve svém vymezeném prostoru tzv. canvas
page. K aplikaci běžný uživatel přistupuje přes URL Facebooku s doménou apps.facebook.com
která buďto obsahuje iFrame se stránkou aplikace, nebo Facebook udělá request na stránku
aplikace a tu pak interpretuje uživateli.
5.2 Connect
Mladší možností je přidat do aplikace, která běží zcela nezávisle na svém vlastním URL, podporu
Facebooku. Hlavní možností je propojit svůj facebook účet s účtem v connect aplikaci a přinést si
na stránky svůj sociální graf společně se všemi informacemi. Connect aplikace jsou přes REST
API nebo FB JS knihovny schopny zobrazovat informace z Facebooku, stejně tak jako měnit na příklad status uživatele.
Connect aplikace dokonce ani nemusí být webová aplikace. Stačí aby byla s Facebookem schopna
komunikovat přes http protokol. Může se jednat také o desktopovou aplikaci. Facebook aplikace na
různé mobilní platformy jsou vytvořeny právě jako connect aplikace (Facebook for iPhone 14, Facebook for Android15).
5.3 Canvas Page
Canvas page je domovem aplikace ve Facebooku. Každá aplikace má unikátní canvas page URL,
které jí zvolí vývojář v nastavení. Toto url je vždy ve tvaru http://apps.facebook.com/[vaše_volba]/,
kde je vaše volba limitovaná na 20 znaků ze sady: malá písmena, pomlčky, podtržítka.
14 http://www.facebook.com/iphone
15 http://www.facebook.com/apps/application.php?id=74769995908
▪ 24 ▪
Tomuto url odpovídá Canvas Callback URL, to je adresa na které vaše aplikace skutečně běží a
Facebook na ní předává požadavky. Model tohoto předání závisí na vaší volbě, jestli chcete can vas page zobrazovat jako iFrame, nebo FBML stránku.
Volba mezi iFrame a FBML canvasem je unikátní pro canvas page. Všechny ostatní body integrace pracují s FMBL kódem.
5.3.1 iFrame canvas
Při použití iFrame Facebook „doprostřed“ svého layoutu – označovaného také jako chrome – vloží
iFrame a v něm volá naší aplikaci. Aplikace tedy běží na své vlastní doméně a není Facebookem
nijak interpretována. To znamená, že je zde možno použít veškeré technologie, které je vývojář
zvyklý používat. Na druhou stranu není možné používat FBML.
Toto nastavení je mnohem jednodušší pro počáteční vývoj, protože umožňuje umístění aplikace na
localhost adresu. To velice zjednodušuje testování a ladění aplikace.
5.3.2 FBML canvas
Při použití FBML canvasu je situace trochu jiná. Při přístupu uživatele na canvas page url Facebook vykreslí svůj chrome a přímo v něm i obsah naší stránky. Na pozadí dojde k dotazu z Facebook serverů na adresu canvas page callback url a obsah je pak interpretován jako FBML.
To s sebou nese několik specifik: Za prvé odpověď nesmí obsahovat <html> ani <body> tagy, obsahem odpovědi serveru je pouze FBML obsah. Dále dochází ke cachování veškerého statického
obsahu servery Facebooku (externí kaskádové styly, javascript). To je výhoda v době nasazení,
která značně snižuje zátěž na naše servery, ale při vývoji to znesnadňuje ladění.
Protože FB servery přistupují na naší adresu, je potřeba, aby byl vývojový server dostupný z in ternetu. Interní vývojový server MS Visual studia odpovídá na požadavky pouze z localhostu, proto
je potřeba při vývoji této varianty použít na stejném počítači nějakou proxy bránu – například již
zmíněný TCPmon.
5.4 Integrace do profilu
Domácí stránka aplikace je sice nejpermitivnější, ale má velkou nevýhodu – je naprosto oddělená
od okolí. Uživatel se na ní musí dostat nějakým odkazem. Lepší viditelnost pro aplikaci zajišťuje její
▪ 25 ▪
integrace do profilu uživatele. Pro toto propojení existují v současné době 4 integrační body z nichž
dva (profilové boxy a profilové informace) budou z Facebooku v nejbližší době odstraněny 16.
Tyto prvky byli vývojáři myšleny jako statické vyjádření uživatelovi osobnosti, proto není jejich změna úplně snadná.
Aby se uživateli na profilu zobrazily, musí je tam sám aktivně přidat.
5.4.1 Profile Box, Profile Information
K aktualizaci těchto prvků se používal push model. Po přidání uživatelem se přes API odeslal kód,
který se má zobrazovat. Facebook ho po té zobrazoval do doby, než mu aplikace odeslala novou
verzi.
Profile boxy umožňovali přidat kus informace přímo na první stránku profilu („wall“ neboli „zeď“),
nebo na dafaultní kartu profilu „boxes“ (v češtině „pole“). Na záložce profilu pole existovali dva
sloupce každý o jiné šířce. Pole muselo být schopné rozlišit v jakém umístění se nachází a podle
toho se různě vykreslit, protože v každém umístění byla jiná rozměrová omezení 17. Kód se nastavoval zvlášť pro první stránku profilu a zvlášť pro kartu „pole“. K odlišení pozice na záložce se
používali FBML tagy <fb:narrow> a <fb:wide>. Karta „pole“ umožňovala přetahovat pole mezi
sloupci a obsah byl v novém umístěni vykreslen okamžitě, bez znovunačtení stránky.
Profile information označuje možnost přidání sekce do informací o uživateli. Informace jsou druhou
kartou profilu, hned po zdi a žádný uživatel je nemůže odstranit. Karta obsahuje informace, které o
sobě uživatel vyplnil a reprezentují jeho identitu. Přes API byla možnost přidat novou skupinu s
informacemi specifickými pro aplikaci. Informace mohly být formou textu nebo obsahovat obrázek,
mohly být statické nebo umožňovat uživateli změny – po kterých došlo k informování aplikace o
změně.
5.4.2 Profile Tab
Možnost přidat vlastní aplikační karty (tab - někdy označované jako záložka, ale nesmí se plést se
záložkou bookmark) zůstane nadále poslední ze dvou možností integrace do profilu uživatele.
Možnost přidat kartu má uživatel až po autorizování aplikace. Ještě do nedávna byl jediný způsob
přidání tlačítko + vedle aktuálních záložek. Nově přibila možnost použít FBML nebo XFBML 18 tag
pro vkreslení tlačítka s odkazem pro přidání. Ač lze záložky přidávat i na veřejné profily, tak tlačítko
zatím funguje pouze pro osobní profily.
16 http://wiki.developers.facebook.com/index.php/Developer_Roadmap
17 http://wiki.developers.facebook.com/index.php/User:DesignerNotes
18 http://wiki.developers.facebook.com/index.php/Fb:add-profile-tab
▪ 26 ▪
Po přistoupení na kartu v profilu dojde k načtení URL specifikovaném v nastavení aplikace jako
Tab URL (URL karty). Neboli je zde použit princip pull, kdy pro každé zobrazení karty dojde k načtení jejího obsahu z našeho serveru (pokud uživatel pouze proklikává mezi kartami, k opětovnému
načtení nedojde).
Na rozdíl od canvas page je karta vždy vykreslena jako FBML canvas, tedy načtena servery Face booku a zpracována. Vedle toho se na ní váží další omezení v tom, že cokoliv dynamického (flash,
přehrání mp3, videa, javascript) musí spustit až akce uživatele. Čili místo flashe je zobrazen zá stupný obrázek, nefunguje onload event atd.
5.4.3 Záložka
Aby byl návrat uživatele do aplikace co možná nejsnazší, má uživatel možnost přidat si na domácí
stránku záložku (bookmark, neplést si s kartou tab). Po přidání záložky se zobrazí ikonka s názvem
aplikace v levém panelu uživatelovi domácí stránky pod odkazy na Games Dashboard a Application Dashboard (viz kapitola 5.5.6 Application Dashboard). Novinkou je možnost vedle záložky
zobrazit counter19 (čítač), který má uživatele informovat o možných akcích v aplikaci. Po přístupu
uživatele do aplikace by měl být čítač automaticky nastaven na 0.
5.4.4 Publisher
Poslední možností integrace je publsiher20. Publisher (nemá vhodný český ekvivalent) je primární
způsob pro sdílení informací uživatelem na svou zeď, na zeď svého přítele nebo přímo do streamu.
Publisher umožňuje uživateli přidat ke sdělení bohatý multimediální obsah (rich media content) –
obrázky, video, zvuk (mp3).
Obrázek 5.1: Publisher
FB publisher je textové pole s tlačítkem „share“ (sdílej), viz Obrázek 5.1 – nachází se na uživatelově zdi a i na hlavní stránce (home). Aplikace s publisher integrací jsou zastoupeny svou ikonkou
19 http://wiki.developers.facebook.com/index.php/Roadmap_Counter
20 http://wiki.developers.facebook.com/index.php/Publisher
▪ 27 ▪
pod textovým vstupem. Defaultní FB aplikace jsou vždy první a další aplikace jsou seřazeny podle
času poslední použití. Publisher uživatel vidí i na profilech svých přátel. Zde jsou ikonky zobrazeny
podle pořadí platného pro majitele profilu.
Velkou výhodou publisheru je, že je pro uživatele snadno dostupný a umožňuje aplikaci zabrat prominentní místo v horní části stránek a tím se mezi uživateli rychle šířit.
5.5 Možnosti komunikace
Výše zmíněné možnosti integrace jsou spíš statického charakteru, nemění se pokud nedojde k
změně v aplikaci. Aby na sebe aplikace upoutala, získávala nové uživatele a aby umožnila uživateli
vyjádřit se, je potřeba produkovat dynamický obsah prostřednictvím komunikačních kanálů.
Právě tyto komunikační kanály doznaly v poslední době nejvíce změn, mnoho z nich bylo zrušeno
nebo pro externí aplikace zakázáno. Novinkou je Application Dashboard, kde jsou shromážděny
informace z aplikací a který tak nahrazuje notifikace.
5.5.1 Stream
Středobodem Facebooku je Stream2122. Je to informační kanál, který pro uživatele agreguje informace sdílené jeho přáteli tzv. „stories“ – ty v sobě zahrnují status updaty, sdílené odkazy, obrázky
nebo informace z aplikací. Stream je zobrazen na domovské stránce uživatele. Ten si může vybrat
mezi dvěma zobrazeními23: „Top news“ a „Most recent“. Top news zobrazuje Facebookem vybrané
stories „highlight“, která budou uživatele pravděpodobně nejvíce zajímat (algoritmus výběru Facebook tají, ale určitě záleží na interakci uživatelů). Most recent zobrazení na druhou stranu zobrazuje všechny nejnovější aktivity všech uživatelů a umožňuje uživateli sledovat aktuální dění, proto je také označováno jako live feed.
Vedle toho má každý uživatel na své zdi (wall – první záložka profilu) všechny „stories,“ vazající se
k jeho osobě – publikované jím nebo někým jiným záměrně na jeho zeď.
Obrázek 5.2: Feed story
21 http://blog.facebook.com/blog.php?post=57822962130
22 http://wiki.developers.facebook.com/index.php/Roadmap_Stream
23 http://www.facebook.com/help/?page=408
▪ 28 ▪
Story se skládá z několika částí (obrázek). Komentář uživatele, který musí být vytvořen uživatelem24. Multimediální příloha (obrázek, flash, mp3), popis přílohy, ten se skládá z názvu, nadpisu a
popisu a action linků. Ty jsou jak název napovídá určeny k vyvolání akce u případného čtenáře příspěvku.
5.5.2 Feed templates
Začátkem letošního roku (2010) byl zrušen systém šablon pro zprávy – feed template. Dřív bylo
nutno pro zprávy, které chtěly aplikace zveřejňovat, nejprve připravit šablonu s vyznačenými
proměnnými (placeholdery {*název*}). Šablona musela být zaregistrována ve Facebooku a k publikování se Facebooku odesílalo číslo šablony spolu s mapou „název placeholdru“ → „obsah“.
Tento systém byl nejdřív využíván kvůli agregaci. K jednomu číslu se vázalo více šablon, u kterých
postupně degradoval počet proměnných. Pokud se pro jednoho uživatel nashromáždilo více zpráv
ze stejné šablony, došlo k agregaci a razantně se tím zvedla šance, že bude zpráva zobrazen na
prominentním místě. Tento princip agregace byl zrušen již před rokem, ale systém šablon zůstal až
do letošního roku, kdy byl ukončen ve prospěch volného odesílání zpráv. Proto jsou feed template
a feed template console již nepoužívané.
5.5.3 Notifications
Dalším komunikačním kanálem byly notifikace, které umožňovali odesílat krátké zprávy o aktivitě
bez jeho přímého potvrzení nebo odesílat notifikace jiným uživatelům. Notifikace byly odesílány do
speciální oblasti profilu a umožňovaly odesílat zprávy i uživatelům, kteří nebyli uživateli aplikace.
Protože byly aplikacemi často zneužívány pro spamování uživatelů, tak byl nejdřív razantně omezen jejich povolený počet, až byly nakonec zrušeny úplně. Zůstaly pouze notifikace od defaultních
aplikací facebooku.
Pro účely oznamování změn a novinek v aplikaci nebo pro nedávnou aktivitu přátel v aplikaci (tedy
pro původní účely notifikací) je nově určen application dashboard.
24 http://developers.facebook.com/policy/
▪ 29 ▪
5.5.4 Requests, Invitations
Velice zajímavým komunikačním kanálem jsou i pozvánky a požadavky25 (requests a invitations).
Jsou velice podobné. Liší se pouze jedním příznakem, který rozhoduje o tom, jak se zobrazí. Pozvánky jsou určeny k získávání nových uživatelů a vyzývají uživatele k prvnímu použití aplikace.
Požadavky jsou určeny k vyzvání uživatel k akci – např v kolových hrách, když na něj přijde řada –
pokud již uživatel aplikaci používá.
Podlé plánu budou přibližně od června 2010 požadavky zrušeny a zůstanou pouze pozvánky.
Funkci požadavků převezmou application dashboard a e-maily, které jsou poměrně nově uvolněny
pro aplikace.
5.5.5 E-mail
Facebook dlouho řídil veškerou komunikaci mezi aplikací a uživatelem. Ale v poslední době
umožnil aplikacím, aby získaly uživatelův e-mail26 a získaly tak možnost komunikovat na přímo. Pro
tuto možnost je potřeba vyžádat od uživatele speciální oprávnění. Uživatel má navíc možnost rozhodnout, zdali poskytne svou pravou adresu, nebo Facebook proxy adresu z domény proxymail.facebook.com, která plní stejný komunikační efekt, bez prozrazení reálného e-mailu.
5.5.6 Application Dashboard
Application dashboard27 je jeden z nejnovějších prvků rozhraní Facebooku. Dashboard je určen k
akumulaci informací z aplikací k oddělení těchto zpráv od zpráv spojených s uživateli. Je přístupný
z domácí stránky, kde je umístěn v levé části, kde do nedávna byly pouze záložky (bookmarks).
Facebook rozděluje dashboard na dvě sekce aplikace (App directory) a hry (games). Svojí
funkčností se nikterak neliší. O tom, kde se vyskytne vaše aplikace, rozhoduje zařazení do katego rií, které dělá programátor při zveřejnění aplikace.
Dashboard umožňuje tři způsoby komunikace. Zobrazení novinek uživateli aplikace, zobrazení aktivit pro přátele uživatele a zobrazení counterů – čítačů, které ukazují, kolik aktivit čeká na uživatele
v jeho aplikaci.
25 http://wiki.developers.facebook.com/index.php/Roadmap_Requests
26 http://wiki.developers.facebook.com/index.php/Communicating_with_Users_via_Email
27 http://wiki.developers.facebook.com/index.php/Dashboard_API
▪ 30 ▪
6.
FACEBOOK CONNECT
Jak již bylo výše zmíněno, je Facebook connect28 zcela jiným druhem integrace. Namísto integrování aplikace do Facebooku, při implementaci Facebook connect dochází k intregraci Facebooku do jiné stránky.
Tato integrace začíná použitím sociálních widgetů/pluginů29, které přinášejí hotovou funkčnost
vložením iFramu z domény facebook.com do stránky. Umožňuje využívat přihlášení pomocí Facebook účtu. A končí úplnou integrací, kdy externí stránka načítá přes REST API velké množství
informací o uživateli a stejným kanálem je zase odesílá do Facebooku.
Využitou technologií je FB Connect velice podobný iFrame aplikacím. Používá XFBML tagy a
stejnou JavaScriptovou knihovn. Pouze přihlašování uživatele je v případě connect aplikací složitější.
Facebook connect aplikace mohou mít stejně jako canvas aplikace profilové boxy (dokud nebudou
zrušeny), profilovou kartu (tab) i svůj publisher.
28 http://wiki.developers.facebook.com/index.php/Facebook_Connect
29 http://developers.facebook.com/plugins
▪ 31 ▪
7.
OPRÁVNĚNÍ A PRAVIDLA
Aplikace se musí řídit velkým množství pravidel, které jsou z velké části postaveny na selském rozumu a ochraně uživatele. Pokud se aplikace chová eticky – nesnaží se uživatele oklamat,
spamovat, kopírovat obsah z Facebooku, tak s největší pravděpodobností neporušuje žádné
pravidlo.
Aplikace se taky nikdy nesmí snažit chovat nebo vypadat přesně jako Facebook, ani nesmí tvrdit
že se jedná o aplikaci vyvinutou Facebookem nebo napodobovat defaultní aplikace, ať již jménem,
vzhledem, nebo chováním30.
Facebook si vyhrazuje pravidla kdykoliv změnit, ale je nepravděpodobné, že by někdy sáhl k zá sadní změně bez předchozí diskuze.
Základní principy Facebooku jsou v kostce shrnuty v dokumentu: http://www.facebook.com/note.php?note_id=183540865300.
Aktuální pravidla pro používání Facebooku jsou v dokumentu Statement of Rights and Responsibilities dsotupném na URL http://www.facebook.com/terms.php a v dokumentu Facebook's Privacy
Policy http://www.facebook.com/policy.php. Pro vývojáře je podstatný oddíl 9. a 10. rozšiřující podmínky o dokumenty Developer Principles and Policies http://developers.facebook.com/policy/ a Facebook Advertising Guidelines http://www.facebook.com/ad_guidelines.php.
Každý vývojář by si měl tato pravidla přečíst a pravidelně kontrolovat, jestli nedošlo k jejich změně.
Základní principy, které by měl vývojář aplikací dodržet jsou:
•
Být důvěryhodný
•
Vytvářet skvělý uživatelský zážitek
Až do F8 neumožňoval Facebook aplikacím ukládat data o uživatelích 31, výjimkou byla pouze omezená množina unikátních identifikátorů (uid). Nyní má aplikace v nakládání s daty větší volnost 32,
ale uživateli musí nakládání s daty objasnit a dát mu možnost je smazat.
30 http://developers.facebook.com/policy/ - článek VII
31 http://developers.facebook.com/blog/post/378
32 http://developers.facebook.com/policy/ - článek III
▪ 32 ▪
8.
AUTORIZACE A AUTENTIFIKACE
U Facebook aplikací dochází k autorizaci a autentifikaci hned v několik směrech. Například když
Facebook volá aplikaci, aby vyrenderovala stránku, nebo když aplikace volá API. Když uživatel nainstaluje aplikaci, tak se na Facebooku používá termín „autorizuje“ (authorize).
8.1.1 Komunikace mezi FB a aplikací
Když FB zobrazuje stránku aplikace ať již FBML nebo iFrame, tak k requestu přidává několik parametrů33. Tyto parametry mají prefix fb_sig a nesou s sebou různorodé informace. Množství a typ
parametrů závisí na tom, odkud uživatel na stránku přichází, jestli aplikaci již autorizoval a o jaký
typ stránky se jedná (canvas, tab, publisher). Ze všech těchto parametrů a application secret je vytvořen hash a odeslán také jako parametr.
Stejně tak při volání REST API je při každém volání potřeba vedle názvu metody, application key a
všech potřebných parametrů volání přidat ještě podpis jako hash všech parametrů spojených s
application secret.
8.1.2 Automatická autentifikace
Vývojářům je na mnoha místech Facebookem doporučováno, aby vyžadovali autorizaci aplikace až
v místech, kde je opravdu potřeba. (Autorizací 34 je myšleno přidání některých oprávnění aplikaci
uživatelem viz níže). I bez autorizace 35 jsou totiž pro aplikaci (myšlena canvas aplikace jak FBML,
tak iframe) zpřístupněno uživatelské ID (User ID).
S tímto ID jsou přístupné některé informace o uživateli (pokud nezrušil zveřejnění svého profilu).
Jmenovitě to jsou: jméno, seznam přátel, stránky jejichž je fanouškem, profilový obrázek, pohlaví,
místo, sítě (na bázi regionu). Navíc je bez autorizace možno uživateli nabídnout Feed form – formulář pro sdílení stories, protože ten musí uživatel aktivně potvrdit.
8.1.3 Autorizace
Pokud chceme uživateli nabídnout více funkčností nebo o něm získat více informací, musí naší
aplikaci autorizovat. K tomu slouží speciální stránka, na kterou musíme uživatele přesměrovat. Po
33 http://wiki.developers.facebook.com/index.php/How_Facebook_Authenticates_Your_Application
34 http://developers.facebook.com/blog/post/135
35 http://wiki.developers.facebook.com/index.php/Automatic_Authentication
▪ 33 ▪
té, co uživatel aplikaci autorizuje (neboli si jí nainstaluje), tento dialog již není nikdy zobrazen a
aplikace získá přístup k většině REST API funkčností.
Pro volání velkého množství REST API metod je potřeba temporary session key, který aplikace
získá, když s ní uživatel interaguje. Tento dočasný klíč má platnost 1 hodinu, tato platnost je s kaž dou novou interakcí prodloužena.
Autorizace otvírá dveře i pro další možnosti integrace, jako je aplikační karta na profilu ( application
tab) – tu si musí aktivně přidat, nebo publisher integrace – ta nastane automaticky.
8.1.4 Rozšířená oprávnění
Pouhá autorizace ale neumožňuje aplikaci úplně vše. Pokud chce aplikace například za uživatele
automaticky zveřejňovat novinky ve streamu nebo jeho stream číst, potřebuje rozšířená oprávnění36 (extended permissions). Ty prošly po F8 velkou změnou, která nabude plnou platnost 1.6.2010.
Z původního počtu 14ti oprávnění se rozrostly na 5 umožňujících publikaci za uživatele, 24 pro práci s daty uživatele a 20 pro práci s daty jeho přátel. S touto změnou se mění i dialog, který byl do teď vlastní pro každé oprávnění, na jeden souhrnný. Tabulky 8.1 a 8.2 ukazují přehled těchto
oprávnění37.
Oprávnění
Popis
publish_stream
Umožňuje zapisovat do uživatelova streamu bez jeho dalšího potvrzení
(dělat status updaty, psát komentáře, odesílat do steramu přátel atd.)
create_event
Umožňuje zakládat a modifikovat události
rsvp_event
Umožňuje nastavovat stav učásti na událostech
sms
Umožňuje komunikovat s uživatelem přes SMS
offline_access
Umožňuje aplikaci vykonávat volání API, i když s ní uživatel nepracuje,
tím, že místo temporary session key dodá aplikaci permanent session key,
který nikdy nevyprší.
Tabulka 8.1: Povolení pro publikaci
36 http://developers.facebook.com/docs/authentication/permissions
37 Citováno z http://developers.facebook.com/docs/authentication/permissions
▪ 34 ▪
Oprávnění pro uživatele
Oprávnění pro přátele
Popis
email
N/A
Umožňuje aplikaci od Facebooku zjistit
uživatelův e-mail. Uživatel má při povolování
na výběr, zda dovolí používat svůj pravý email, nebo se použije proxy e-mail
read_stream
N/A
Umožňuje číst a vyhledávat všechny položky
v uživatelově streamu
read_friendlists
N/A
Umožňuje číst uživatelovi friendlisty
read_requests
N/A
Umožňuje číst uživatelovi requesty
user_about_me
friends_about_me
Umožňuje přístup „About me“ sekci
infromacích o uživatelovi
user_activities
friends_activities
Umožňuje přístup seznam aktivit
user_birthday
friends_birthday
Umožňuje přístup kompletní datum narození
včetně roku
user_education_
history
friends_education_
history
Umožňuje přístup k historii vzdělání
user_events
friends_events
Umožňuje přístup k událostem, kterých se
uživatel zúčastní
user_groups
friends_groups
Umožňuje přístup k skupinám, kterých je
uživatel členem
user_hometown
friends_hometown
Umožňuje přístup k rodnému městu uživatele
user_interests
friends_interests
Umožňuje přístup k uživatelovým zájmům
user_likes
friends_likes
Umožňuje přístup k seznamu všech stránek,
které se uživatelovi líbí
user_location
friends_location
Umožňuje přístup k současnému bydlišti
uživatele
user_notes
friends_notes
Umožňuje přístup k seznamu uživatelových
poznámek
user_online_
presence
friends_online_
presence
Umožňuje přístup k stavu uživatele
online/offline
user_photo_
video_tags
friends_photo_
video_tags
Umožňuje přístup k fotkám a videím, ve
kterých byl uživatel označen
user_photos
friends_photos
Umožňuje přístup k uživatelově fotografiím
User_
relationships
Friends_
relationships
Umožňuje přístup k uživatelovým rodinným
příslušníkům a informacím o vztahu.
user_religion_
politics
friends_religion_
politics
Umožňuje přístup k uživatelově politické
názoru a vyznání
user_status
friends_status
Umožňuje číst poslední uživatelův status
user_videos
friends_videos
Umožňuje přístup k videím, které uživatel
nahrál
user_website
friends_website
Umožňuje přístup k URL uživatelových
stránek
user_work_history
friends_work_
history
Umožňuje přístup k pracovní historii uživatele
Tabulka 8.2: Povolení pro práci s daty
▪ 35 ▪
9.
PŘÍPRAVA PROSTŘEDÍ
Tak jako je pro javu příznačná tutorialová aplikace PetShop, tak je pro Facebok příznačná aplikace
na rozesílání smajlíků. Ani tato práce nebude výjimkou a v ukázce si projdeme tvorbu aplikace
Smajlíci FBML na posílání emotikonů. Druhá aplikace Smajlíci iFrame i přes svůj název žádné
smajlíky neposílá – toto chování by bylo stejné jako u předchozí aplikace. Namísto toho ukáže zá klady práce s JSCL, načítání dat přes REST API a práci s Dashboard API
9.1 Založení aplikace
Něž začneme aplikaci vyvíjet, musíme si ji na Facebooku zaregistrovat. K registraci slouží speciální Facebooková aplikace Developers (lokalizováno jako Vývojář) (Vývojář aplikace tedy musí mít
na Facebooku svůj účet). Aplikaci najdeme na adrese http://www.facebook.com/developers/.
Aplikaci založíte kliknutím na „+ Set Up New Application“ (viz Obrázek 9.1)
Obrázek 9.1: Aplikace Developers
Na další stránce je potřeba vyplnit název aplikace (který nemusí být unikátní a který jde později
změnit)38. Název aplikace nesmí obsahovat žádné ochranné známky, které drží Facebook nebo být
38 poznámka: Při změně názvu zveřejněné aplikace je potřeba dodržovat Facebookem daná pravidla –
minimálně měsíc musí být název ve formátu „Nový názav (dříve 'starý název')“ nebo „Nový název
(přejmenováno)“ jak je uvedeno v Developer Principles and Policies
▪ 36 ▪
podobný aplikaci vytvořené Facebookem. Dále je potřeba potvrdit souhlas s podmínkami a aplikaci
vytvořit.
9.1.1 Nastavení – basic
Obrázek 9.2: Nastavení - basic
Facebook nás okamžitě nasměruje na nastavení aplikace. Na první kartě nastavení „basic“ jsou
důležité informace pro vývoj: Application ID, API key a Secret. První slouží k identifikaci aplikace,
druhý se používá při volání API a třetí slouží k podepisování odchozí a ověřování původu příchozí
komunikace – pokud by secret získala třetí osoba, mohla by se vydávat za aplikaci (poznámka:
secret je zde zveřejněno, protože dojde ke smazání aplikace).
Dále se zde vyplňují informativní položky: Description je popis (plain text) aplikace, který se zobrazuje v seznamu aplikací (application directory) a při autorizaci aplikace. Je limitován na 250 znaků. Pro úspěšnou aplikaci je potřeba mít lákavý a výstižný popis, ale dokud aplikaci nezveřejníte, je
tento text zbytečný. Icon se zobrazuje napříč Facebookem a není vždy zaručeno, že bude na bílém
pozadí, proto je vhodné použít obrázek s průhledným pozadím 39. Logo aplikace je zobrazeno v se39 poznámka: nezapomínejte že IE6 neumí průhledné PNG
▪ 37 ▪
znamu aplikací a při autorizaci vedle popisu. Language nastavuje jazyk aplikace a hraje roli až při
lokalizaci aplikace, kterou se tato práce nezabývá.
Developers je seznam vývojářů, kteří mají možnost měnit nastavení aplikace (budou mít aplikaci
Smajlící FBML zobrazenou v aplikaci Developers) a také mohou aplikaci používat, dokud je v
sandbox módu. Novinkou u vývojářů je nutnost potvrzení pozvánky k vývoji aplikace 40.
Developer contact Email je viditelný pouze pracovníkům Facebooku a je používán pro řešení sporů. Naopak User Support Adress je zveřejněna uživatelům aplikace na všech stránkách v patičce
Facebooku. Obě adresy jsou povinné a defaultně nastavené na adresu registrátora aplikace. Help
URL, Privacy URL, Terms of Service URL jsou odkazy pro uživatele, které jsou důležité pro aplikace s nějakou právní zodpovědností. Odkaz na Terms of Service je zobrazen v dialogu pro autorizaci.
9.1.2 Nastavení – authentication
Obrázek 9.3: Nastavení - authentication
Na záložce Authentication se dá nastavit, které subjekty si mohou aplikaci nainstalovat (čili autorizovat) uživatelé nebo stránky.
Post-Authorize Callback URL a Post-Remove Callback URL je adresa stránky, kterou facebook zavolá těsně po té, co si uživatel autorizuje, respektive odebere aplikaci. Facebook tuto adresu pouze
„pingne“ ale odpověď se nikde nezobrazí. Toto volání může sloužit k založení potřebných datových
struktur nebo ke smazání uložených dat, která již nemá aplikace právo držet. (viz kapitola o
právech)
40 http://developers.facebook.com/news.php?blog=1&story=372
▪ 38 ▪
9.1.3 Nastavení – profiles
Obrázek 9.4: Nastavení - profiles
Karta profiles v sobě nese nastavení pro integraci do profilu. V první řadě nastavení karty (tab)
položkami Tab Name, to je jméno pod kterým se bude karta zobrazovat na profilu, a Tab URL, která určuje odkud se bude karta nahrávat (relativně vůči adrese aplikace ve Facebooku).
Default Column a Information Update Callback URL brzy z nastavení zmizí, protože slouží k nastavení profile boxů a profile informations. Publish Text, Publish Callback URL, Self-Publish Text a
Self-Publish Callback URL slouží k nastaveí Publsiheru. Ten má dvě možnosti zobrazení: na stránce aktuálně přihlášeného uživatele self-publish, nebo na stránce jiného uživatele publish. K oběma
se váže adresa callback url (url místo kde se nachází implementace rozhraní) a text, to je tooltip
zobrazený u ikonky v Publsiheru.
Edit URL je důležitá pouze pokud aplikace dovoluje integraci pro veřejné profily. Tento odkaz je
totiž v administrátorské sekci stránky (viz obrázek Obrázek 9.5, ten ukazuje umístění odkazu na
Edit URL aplikace Poledníček pro restaurace, v nastavení profilu té samé aplikace).
▪ 39 ▪
Obrázek 9.5: Umístění odkazu na Edit URL v nastavení stránky.
9.1.4 Nastavení – canvas
Obrázek 9.6: Nastavení - canvas
Nejdůležitější nastavení ze všech se nachází na této kartě. Canvas Page URL určuje na jaké adrese
bude
aplikace
na
Facebooku
přístupná.
Ta
je
vždy
ve
formátu
http://apps.facebook.com/[vaše_volba]/ (jak již bylo zmíněno výše). Canvas Callback URL musí
odkazovat na URL na kterém aplikace běží. Post-Authorize Redirect URL je adresa, kam má být
▪ 40 ▪
uživatel přesměrován po autorizování aplikace. Na tuto adresu je uživatel přesměrován po té co
Facebook zavolá Post-Authorize Callback URL (z karty Authentication) a na rozdíl od ní je uživateli
tento výsledek zobrazen.
Render method je důležitá volba, která rozhoduje o způsobu zobrazení, pro začátek zvolíme
FBML. IFrame size parametr rozhoduje o velikosti iFramu, pokud je použit iFrame canvas. Smart
size je vhodná volba, pokud je obsah stránky statický. Pokud dochází k jeho změně (např.
Javaskriptem nebo přesměrováním pouze v rámci iframu), je potřeba zvolit resizable a velikost fra mu ovládat javascriptem z vnořeného framu41.
Quick Transitions je nová funkce zatím v testovacím provozu. Umožňuje aplikacím zrychlit jejich
načítání tím, že při načtení nové stránky dojde vždy pouze k nahrání obsahu aplikace. Okolní
stránka Facebooku (chrome) se znovu nenačte. Pro aplikace s FBML canvasem je tato funkce bez
dalších podmínek, při použití iFrame má některé implementační důsledky 42.
9.1.5 Nastavení – connect
Obrázek 9.7: Nastavení - connect
Connenct nastavení slouží, jak již název napovídá, pro Facebook Connect stránky. Toto nastavení
je někdy důležití i pro iFrame aplikace – protože ty mohou používat Facebok JavaScript Client Library knihovnu, která vyžaduje nastavení Connect URL. Connect URL určuje doménu, ze které je
možné využívat JavaScript Client Library (JSCL). Facebook Conenct Logo je pouze ikonka, která
se zobrazuje v dialogu pro připojení. Account Preview URL je odkaz na stránku, která uživateli ukáže možnosti jeho profilu na stránce. Base domain je potřeba vyplnit pouze v případě, že naše
aplikace zahrnuje více subdomén43.
41 http://wiki.developers.facebook.com/index.php/Resizable_IFrame
42 http://wiki.developers.facebook.com/index.php/Quick_Transitions
43 Poznámka: např 2 domény druhého řádu prvni.example.com a druha.example.com
▪ 41 ▪
Account Reclamation je důležité v případě, kdy si uživatel zruší svůj Facebook účet. K adrese jsou
přidány dva GET parametry „u“ a „h“. U nese account ID zrušeného uživatele a „h“ md5 hash u
spojeného s application secret44.
9.1.6 Nastavení – widgets
Obrázek 9.8: Nastavení - widgets
Widgety jsou prefabrikáty s hotovou funkčností, které můžete lehce zakomponovat do designu
svých stránek. Nastavením Administrators lze přidělit možnosti nastavení jednotlivých widgetů i jiným osobám, než vývojářům aplikace (odkaz na toto nastavení je vždy u příslušného widgetu).
Moderátoři nastavení v moderators mají možnost blokovat a povolovat uživatelům zápis do widgetu. V položce Notification Subscribers jsou zobrazeni všichni uživatelé, kteří jsou informování o
změnách ve widgetu. Položky v Comments Box Global Settings pak umožňují nastavit globálně pro
všechny Comment box widgety přístupová práva.
44 http://wiki.developers.facebook.com/index.php/Reclaiming_Accounts
▪ 42 ▪
9.1.7 Nastavení – advanced
Obrázek 9.9: Nastavení - advanced
Předposlední záložka advanced v sobě obsahuje velké množství různorodého nastavení. Application type ukazuje, jestli se jedná o aplikaci webovou, nebo desktopovou – tato práce se zabývá
tvorbou pouze webových aplikací. Sandbox mode umožní aplikaci skrýt před okolním světem.
Pokud je tato volba zapnutá, jsou aplikace a veškeré její výstupy viditelné pouze uživateli vybranými jako vývojáři na kartě basic (viz 9.1.1 Nastavení – basic str 37).
Mobilní integrací se tato práce také nezabývá. Attachments fungují stejně jako publisher (5.4.4 Publisher str. 27) ale v případě posílání soukromých zpráv mezi uživateli. Server Whitelist umožňuje,
pro větší bezpečí, aplikace nastavit omezený počet IP adres, ze kterých je možné použít API key.
Volba Session Secret Whitelist Exception umožňuje mimo povolené IP adresy používání API key
▪ 43 ▪
pro dočasnou autorizaci. To je potřeba v případě použití JSCL knihovny, protože v tom případě dochází k volání API z browseru uživatele a tedy z cizí adresy. Hide User Activity umožňuje skrýt automatické zobrazení uživatelské aktivity v application dashboardu.
Data preloading umožňuje aplikaci vznést požadavek na data, ještě než je stránka načtena. Preload se používá zejména pokud aplikace na všech svých stránkách potřebuje ta samá data. FQL volání zde uvedené je spuštěno s každým načtením stránek a výsledek je poslán rovnou s požadavkem na stránku jako POST parametr.
Pokud stránka publikuje „stories“ o prodeji nebo půjčování video materiálu, je potřeba tuto skutečnost ohlásit zaškrtnutím položky Video Rentals. Položka Advertising Account k propojení reklamního Facebook účtu s touto aplikací.
9.1.8 Nastavení – migration
Obrázek 9.10: Nastavení - migration
Facebook je velice dynamická platforma, která se stále mění. Jako pomoc vývojářům při změně
chování je připravena možnost migrování z verze na verzi. Na kartě migration lze zvolit, které
chování pro svou aplikaci vyžaduje. Dlouho zde byla pouze možnost volby kódování prázdného
pole, které Facebook špatně implementoval jako {} namísto []. V současné době je zde i možnost
přepínat mezi druhy oprávnění od uživatele. Tato migrace skončí 1.6.2010 a od té doby budou
muset všechny aplikace podporovat novou implementaci. Pro všechny nové položky, které se na
této kartě objeví by mělo platit to samé – Několikaměsíční období, při kterém si vývojář může vy brat, kterou implementaci použije, s jasně daným koncem, po kterém budou všichni muset přejít na
novou implementaci.
9.1.9 Nastavení – Smajlíci FBML
Souhrn potřebného nastavení pro ukázkovou aplikaci ve FBML (nastavení má být, tak jak je vidět
na obrázcích) – tam, kde je uvedena IP adresa 78.102.201.66:8081, je tuto potřeba nahradit vlastní
IP adresou. Vynechaná nastavení jsou pro naši aplikaci nepodstatná:
▪ 44 ▪
•
•
Basic:
◦
Application name: Smajlíci FBML (na jménu pro účely vývoje nezáleží)
◦
Bookmark URL: http://apps.facebook.com/smajlici-fbml/My-smiles.aspx
Authentication
◦
•
•
•
Profiles
◦
Tab Name: Úsměv F
◦
Tab URL: http://apps.facebook.com/smajlici-fbml/Tab.aspx
◦
Publish Text: Pošli úsměv F
◦
Publish Callback URL: http://78.102.201.66:8081/Publisher.aspx
◦
Self-Publish Text: Ukaž svou náladu F
◦
Self-Publish Callback URL: http://78.102.201.66:8081/Publisher.aspx
Canvas
◦
Canvas Page URL: http://apps.facebook.com/smajlici-fbml/ (musí být unikátní!)
◦
Canvas Callback URL: http://78.102.201.66:8081/
◦
Render Method: FBML
◦
Canvas Width: Full width (760px)
Connect
◦
•
•
Installable to?: Users
Connect URL: http://78.102.201.66:8081/
Advanced
◦
Application Type: Web
◦
Sandbox Mode: Enabled (pro vývoj byste vždy měli používat sand-box, pro testy integrace přidejte některé své přátele mezi vývojáře)
◦
Attachment Text: Pošli úsměv
◦
Attachment Callback URL: http://78.102.201.66:8081/Publisher.aspx
Migration
◦
JSON Encoding Empty Arrays: Enabled
◦
New Data Permissions: Disabled (Aktuální verze FDT nepodporuje nový přístup, na
implementaci nového řešení se ale již teď pracuje)
9.1.10 Nastavení – Smajlíci iFrame
Souhrn nastavení pro ukázkovou aplikaci v iFrame. Tato aplikace ukáže pouze rozdíly v přístupu,
proto není potřebné nastavovat shodně se chovající integrační prvky:
•
Basic:
◦
•
Authentication
◦
•
Application name: Smajlíci iFrame (na jménu pro účely vývoje nezáleží)
Installable to?: Users
Canvas
◦
Canvas Page URL: http://apps.facebook.com/smajlici-ifram/ (musí být unikátní!)
▪ 45 ▪
•
◦
Canvas Callback URL: http://localhost:8092/
◦
Render Method: IFrame
◦
Canvas Width: Full width (760px)
◦
IFrame size: resizable
Connect
◦
•
•
Connect URL: http://localhost:8092/
Advanced
◦
Application Type: Web
◦
Sandbox Mode: Enabled (pro vývoj byste vždy měli používat sand-box, pro testy integrace přidejte některé své přátele mezi vývojáře.)
Migration
◦
JSON Encoding Empty Arrays: Enabled
◦
New Data Permissions: Disabled (Aktuální verze FDT nepodporuje nový přístup, na
implementaci nového řešení se ale již teď pracuje)
9.2 Best practices
Běžnou praktikou pro vývojáře je založení jedné aplikace pro produkci a několika dalších (v režimu
sandbox viz 9.1.7 Nastavení – advanced) pro testování té samé aplikace před nasazením. Jediné
co se při vývoji mění jsou Application ID, API Key a Secret (dříve ještě Feed Templates). Neexistuje totiž jiná možnost jak Facebook aplikace testovat než na Facebooku.
9.3 Založení projektu
Před začátkem vývoje je potřeba mít nainstalované aplikace popsané v kapitole 3. Nástroje. Vývoj
FBML aplikace předpokládá, že má vývojář veřejnou IP nebo přesměrovaný port 8081 na svůj počítač, kde provozuje Visual Studio.
Ze stránek http://facebooktoolkit.codeplex.com/ je potřeba stáhnout samotný Facebook Developer
Toolkit. Projekt je aktivní a kvůli neustálým změnám na Facebooku je dobré mít vždy nejaktuálnější
verzi. Je možné stáhnout jak binární (.dll) knihovny, tak zdrojové kódy.
Tato práce počítá s druhou variantou, protože ta dává možnost knihovnu debugovat a opravovat
drobné problémy. Zdrojové kódy knihovny v příloze práce staví na verzi 3.1 BETA, vydané
2.4.2010 (revize zdrojových kódů 49014), a jsou doplněny o mé opravy popsané dále.
▪ 46 ▪
9.3.1 Visual Studio 2010
V nástroji Visual Studio 2010 založíme nový projekt (File / new project...), z nabídky šablon použijeme ASP.NET Empty Web Application (mezi šablonami Visual C# / web). Pro projekt vytvoříme
nové řešení (v angličtině solution). Do adresáře řešení nakopírujeme projekty Facebook a Facebook.Web z FDT. Nyní projekty přidáme do řešení: V menu File / add / Existing project... a vybereme soubor projektu. Stávající projekt je potřeba převést na novou verzi a je možné změnit .NET na
4.0. (Tyto operace udělá VS2010 samo, v budoucnu bude celý projekt přemigrován na novou verzi
nástroje).
Obrázek 9.11: Založení projektu
Po té, co projekty přidáme, na ně ještě v projektu SmilesFBML uděláme referenci. Na složce References v kontextovém menu položka „add reference...“. Ve zobrazeném dialogu vybereme oba
projekty a potvrdíme tlačítkem OK. (Obrázek 9.12)
Facebook dělá požadavky na stránky metodou POST. Visual Studio server neumožňuje takovéto
požadavky na adresáře ani na root webu „~/“. K těmto volání dochází vždy při přístupu na canvas
page URL a my je potřebuje umožnit. Abychom toto obešli použijeme URL rewrite. V naší ukázce
je použito Intelligencia.UrlRewriter volně stažitelné z adresy http://urlrewriter.net/index.php/downlo-
▪ 47 ▪
ad. Po stažení je potřeba přidat referenci i na tuto knihovnu (jako .dll) stejně jako referenci na Facebook projekty. V dialogovém okně výběru reference použijte záložku browse.
Výsledný stav my měl vypadat jako na obrázku 9.13. Řešení obsahuje tři projekty (Facebook, Facebook.Web a SmilesFBML). Projekt SmilesFBML má referenci na Facebook, Facebook.Web a Intelligencia.UrlRewriter.
Obrázek 9.12: Přidání reference na projekt
Obrázek 9.13: Výsledný stav
Aplikaci máme pro vývoj připravenou. Nyní ještě nastavíme v properties projektu SmilesFBML na
kartě Web spouštěni na specifickém portu 8091 v Development serveru (Obrázek 9.14).
▪ 48 ▪
Obrázek 9.14: Nastavení portu
Port jsme záměrně nastavili jinak než na Faceboku. Jak již bylo zmíněno Development server nepřijímá požadavky na jiné adrese než na localhostu. My využijeme nástroj tcpmon volně dostupný
na adrese https://tcpmon.dev.java.net/ (Pro použití je potřeba mít nainstalovanou Javu). Po
spuštění tohoto nástroje v něm stačí nastavit, že hodláme monitorovat a přesměrovat komunikaci z
portu 8081 na server 127.0.0.1 a port 8091, a spustit monitor (tlačítkem Add Monitor). Viz Obrázek
9.15.
Obrázek 9.15: TCPmon
▪ 49 ▪
10. UKÁZKOVÉ APLIKACE
10.1 FBML stránka
Projekt máme předpřipravený. Nyní vytvoříme první stránku Default.aspx podle šablony Web
Form (V kontextovém menu projektu Add / New Item...). Obsah stránky upravíme, aby obsahoval
pouze tento obsah:
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="SmilesFBML.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h1>Hello Facebook!</h1>
Nesmíme zapomenout, že se jedná o FBML aplikaci a FBML nedovoluje tagy, jako jsou <body>
nebo <html>. Do stránky se dává pouze samotný obsah.
Před prvním spuštěním aplikace je potřeba nastavit URL rewriting. Do Web.config vložíme:
<configuration>
<configSections>
<section name="rewriter"
requirePermission="false"
type="Intelligencia.UrlRewriter.Configuration.RewriterConfigurationSecti
onHandler, Intelligencia.UrlRewriter" />
</configSections>
<appSettings />
<system.web>
<compilation debug="true" targetFramework="4.0" />
<httpModules>
<add name="UrlRewriter"
type="Intelligencia.UrlRewriter.RewriterHttpModule,
Intelligencia.UrlRewriter"/>
</httpModules>
</system.web>
<rewriter>
<rewrite url="~/$" to="~/Default.aspx" />
<rewrite url="~/\?(.+)" to="~/Default.aspx?$1" />
</rewriter>
</configuration>
Toto nastavení zajistí, že všechny požadavky na / jsou přesměrovány na /Default.aspx i s jejich
GET parametry.
▪ 50 ▪
Nyní je aplikace připravená. Spustíme jí (ctrl + F5) a přejdeme na adresu Canvas URL
(http://apps.facebook.com/smajlici-fbml/)
Obrázek 10.1: Hello Facebook!
Na obrázku 10.1 je vidět výstup naší stránky. Facebook načetl stránku a zobrazil jí jako svoji ne dílnou součást. Díky tomu je i formátování shodné s Facebookem.
10.1.1 Nastavení pro FDT
Pro správné pracování FDT je potřeba do konfigurace aplikace Web.config přidat tyto 4 direktivy:
<appSettings>
<add key="APIKey" value="787ffc59b4faccccaec072a0eeaea47f"/>
<add key="Secret" value="aff8cde493e93ab02adfd356e537091f"/>
<add key="Callback" value="http://78.102.201.66:8081/"/>
<add key="Suffix" value="smajlici-fbml/"/>
</appSettings>
Hodnoty je samozřejmě potřeba upravit podle vašich (zjistíte je v Developer aplikaci).
10.1.2 FBML formátování hlavičky
Stránku Default.aspx upravíme, tak, že místo <h1> nadpisu vložíme následující kód:
<form id="Form1" runat="server">
<fb:dashboard>
<fb:action href="My-smiles.aspx">Moji smajlíci</fb:action>
<fb:create-button href="Send.aspx">Poslat smajlíka</fb:create-button>
<fb:help href="Help.aspx">Pomoc!</fb:help>
</fb:dashboard>
<fb:tabs>
<fb:tab-item href='Default.aspx' title='O aplikaci' selected='true'/>
<fb:tab-item href='Send.aspx' title='Poslat smajlík' selected='false'/>
<fb:tab-item href='My-smiles.aspx' title='Moji smalíci' selected='false'/>
<fb:tab-item href='Help.aspx' title='Pomoc' selected='false' align='right'/>
</fb:tabs>
<fb:header />
</form>
Výstup vypadá takto:
▪ 51 ▪
Obrázek 10.2: Základní FBML tagy: dashboard, tabs, header
Ukázka předvádí využití hned několika FBML tagů. Tag <fb:dashboard /> je základním
navigačním prvkem, sám vykreslí pouze šedou linku a logo aplikace, ale je do něj možné umístit
další tagy: <fb:action /> s parametrem href, který nad čáru vkládá odkazy zleva, <fb:help
/>, který funguje podobně, jen odkazy vkládá zprava (a většinou se používá pro odkazy na podporu) a tag <fb:create-button />, který vloží tlačítko značící vytvoření uživatelského obsahu.
Action i help mohou být vloženy vícekrát a vloží příslušný počet odkazů, create-button je vždy
vykreslen pouze jeden.
Tag <fb:tabs /> funguje podobně jako dashboard, používá se k vykreslení záložek. Tento tag
vykreslí pouze čáru a je do něj možné jednotlivé položky <fb:tab-item />. Každý tab-item musí
obsahovat atribut href, který slouží jako odkaz, a title, který se vykreslí v záložce. Jednotlivé
záložky je na vodorovné čáře možno vkládat zleva (defaultní chování), nebo zprava atributem
align='right'. K zvýraznění záložky, většinou k označení aktivní, se používá parametr selected='true'.
Parametr povinný
Default
Popis
href
ano
Odkazovaná adresa, musí být absolutní
title
ano
Text na záložce
align
ne
left
Umístění- hodnoty: left/right
selected
ne
false
Hodnota true zvýrazní záložku
Tabulka 10.1: tag fb:tab-item
Posledním použitým tagem je <fb:header />, který pouze vypíše název aplikace a zobrazí ikonu
nastavenou v nastavení aplikace. Parametrem icon=false by bylo možné ikonu zrušit. Pokud by
byl definován text uvnitř párového tagu <fb:header>text</fb:header>, byl by vypsán tento text
místo názvu aplikace.
10.1.3 Další FBML obsah
Do stránky přidáme následující obsah: (na místo <fb:header/>, který je redundantní)
▪ 52 ▪
<p>
Toto je ulázková apliakce tvorby Facebook apliakcí v ASP.NET, která
vznikla jako součást bakalářské práce na
<a href="http://www.unicorncollege.cz">
Unicorn College</a>. Vytvořil ji
<fb:name uid="1475784526" useyou="false" />
a je velice rád, že jste přišli na tuto stránku.
</p>
<h3>
Můžete:</h3>
<ul>
<li><a href="Send.aspx">Poslat smajlíka</a></li>
<li><a href="My-smiles.aspx" requirelogin="true">Zkontrlovat svoje smajlíky
</a></li>
<li><a href="IFrame.aspx?fb_force_mode=iframe" requirelogin="true">iframe
stránka</a></li>
</ul>
<fb:bookmark /><br />
<fb:if-is-app-user>
Děkujeme za používání naší apliakce <fb:application-name />
<fb:else>Začněte také posílat smajlíky!</fb:else>
</fb:if-is-app-user>
To přidává do stránky nový zajímavý obsah. Tag <fb:name /> zobrazí jméno uživatele specifikovaného pomocí povinného parametru uid. Jak již bylo zmíněno, naše aplikace si dříve mohla
ukládat pouze některé informace, povětšinou pouze id entit. Toto je způsob jak převést id uloženého spolu s obsahem aplikace zpět na uživatelské jméno (i s tou výhodou, že pokud si uživatel jméno změní, tak je toto hned reflektováno). Parametr useyou=false specifikuje, jestli se má danému
uživateli místo jména zobrazit „you“.
Obrázek 10.3: Tlačítko pro přidání záložky
Tag <fb:bookmark /> zobrazí uživateli tlačítko pro bookmarkování aplikace (popsané v kapitole
5.4.3 Záložka ). Pokud si již uživatel záložku přidal, tak se nic nezobrazí.
<fb:if-is-app-user> Obsah pro uživatele
<fb:else> Obsah pro neuživatele </fb:else>
</fb:if-is-app-user>
Tento konstrukt umožňuje rozlišit mezi tím, jestli již uživatel aplikaci autorizoval, a je tedy jejím
uživatelem, nebo ne. Do chráněné větve by se ale neměly vypisovat utajované údaje, protože do
kódu stránky jsou vloženy oba obsahy, jeden je ale skryt.
I ve FBML stránkách se dá použít normální postback ASP.NET stránek. Jako ukázka může být přidání tlačítka a jednoduché ověřovací funkce. Po kliknutí na tlačítko ve stránce se změní jeho text:
▪ 53 ▪
Tlačítko ve stránce:
<asp:button id="ActionShowBtn" runat="server" text="Klikni na mě"
onclick="ActionShowBtn_Click" />
// Metoda v Default.aspx.cs
protected void ActionShowBtn_Click(object sender, EventArgs e)
{
ActionShowBtn.Text = "Metoda proběhla!";
}
Ve vloženém kódu již zbývá vysvětlit pouze parametry u odkazů. K html linku můžete přidat parametr loginrequire=true, který Facebooku říká, že cílová stránka vyžaduje uživatelovu autorizaci.
Pokud ještě uživatel aplikaci neautorizoval, tak je před přechodem na cílovou stránku přesměrován
na autorizační dialog. To se používá pro urychlení. Pokud totiž uživatel vstoupí na stránku vyžadující přihlášení, je až z ní přesměrován na přihlašovací stránku. Tímto se proces zkrátí o jeden
request a vede to k větší uživatelově spokojenosti.
Pokud je v adrese specifikován GET parametr fb_force_mode=iframe je stránka vykreslena jako
iFrame canvas i když jde o FBML aplikaci. Stejně tak je možné v iFrame aplikaci využít parametr
fb_force_mode=fbml a vynutit zobrazení jako FBML stránku.
10.2 Pomocné třídy
Než začneme dělat složitější operace, je potřeba vytvořit infrastrukturu. Jelikož naše aplikace bude
posílat smajlíky, je potřeba tyto smajlíky vytvořit. Navíc si naše aplikace bude pamatovat, kdo komu
kdy jakého smajlíka poslal. Všechny potřebné třídy umístíme do vlastního package a složky domain.
Třída Smile reprezentující smajlíka:
public class Smile
{
public Smile() { }
public Smile(String name, String description, String linkName) {
Name = name;
Description = description;
LinkName = linkName;
}
// Pojmenování smajlíka
public String Name {get; set;}
//Krátky popis
public String Description { get; set; }
//název souboru (bez koncovky)
public String LinkName { get; set; }
}
▪ 54 ▪
Smajlíky „ovládá“ SmileController vytvořený podle návrhové vzoru singleton45. Jeho jediným
účelem je vytvořit a zpřístupnit seznam všech smajlíku, které naše aplikace umí posílat. Každému
smajlíku odpovídá jeden obrázek v adresáři /img.
public class SmileContoller
{
private static SmileContoller _instance;
private Dictionary<String, Smile> _smiles;
private SmileContoller()
{
_smiles = new Dictionary<string,Smile>();
Smile newSmile;
newSmile = new Smile("Muhu haha", "To jim patří", "evilgrin");
_smiles.Add("evilgrin", newSmile);
newSmile = new Smile("Cha cha", "To je sranda", "grin");
_smiles.Add("grin", newSmile);
newSmile = new Smile("Štěstí", "Tralala", "happy");
_smiles.Add("happy", newSmile);
newSmile = new Smile("Srdce", "Srdce z lásky darované", "heart");
_smiles.Add("heart", newSmile);
newSmile = new Smile("Úsměv", "No tak se zasměj", "smile");
_smiles.Add("smile", newSmile);
newSmile = new Smile("Óoh", "O co se to děje", "surprised");
_smiles.Add("surprised", newSmile);
newSmile = new Smile("Bleh", "Tůdle nůdle", "tongue");
_smiles.Add("tongue", newSmile);
newSmile = new Smile("Ouch", "Není mi do smíchu", "unhappy");
_smiles.Add("unhappy", newSmile);
newSmile = new Smile("Pohoda", "Don't worry, be happy", "waii");
_smiles.Add("waii", newSmile);
newSmile = new Smile("Mrk", "Mrk, mrk", "wink");
_smiles.Add("wink", newSmile);
}
public static SmileContoller GetInstance()
{
if (_instance == null)
{
_instance = new SmileContoller();
}
return _instance;
}
public Dictionary<String, Smile> GetSmlies()
{
return _smiles;
}
}
Pro ukládání poslaných smajlíku je určena třída SavedSmile. Ta obaluje Smile a přidává k němu
informace o tom, kdo komu kdy poslal smajlíka s jakou zprávou.
45 [DESIGN PATTERNS]
▪ 55 ▪
public class SavedSmile
{
public string From { get; set; }
public string To { get; set; }
public string Message { get; set; }
public DateTime When { get; set; }
public Smile Smile { get; set; }
}
Samotnou perzistenci má za úkol třída SmileStorer. Ta imituje ukládání do nějakého úložiště tím,
že odeslané smajlíky drží v paměti během celého běhu serveru. V reálném provozu by musela být
napojena na databázi a záznamy opravdu ukládat. Také se jedná o singleton s metodami pro
uložení a pro vyhledání všech přijatých nebo odeslaných emotikonů.
▪ 56 ▪
public class SmileStorer
{
private static SmileStorer _instance;
public static SmileStorer getInstance()
{
if (_instance == null)
{
_instance = new SmileStorer();
}
return _instance;
}
private SmileStorer()
{
_data = new List<SavedSmile>();
}
private List<SavedSmile> _data;
public void saveSmile(SavedSmile toSave)
{
_data.Add(toSave);
}
public List<SavedSmile> getSentSmiles(string from)
{
return _data.FindAll(
delegate(SavedSmile ss)
{ return ss.From.Equals(from); }
);
}
public List<SavedSmile> getRecievedSmiles(string to)
{
return _data.FindAll(
delegate(SavedSmile ss)
{ return ss.To.Equals(to); }
);
}
}
Pro upřesnění je zde obrázek s posílanými smajlíky. Jedná se o zvětšeniny Silk icon od tvůrce
Marka Jamese http://www.famfamfam.com/lab/icons/silk/ volně dostupné na jeho stránkách pod
Creative Commons Attribution 2.5 License.
Obrázek 10.4: Přehled smajlíků
▪ 57 ▪
10.3 Publikování do streamu
10.3.1 Publikování s potvrzením
Na stránce Send.aspx si ukážeme, jak je možné publikovat stories do streamu bez toho, aby byl
uživatel nucen autorizovat naší aplikaci. Využijeme k tomu FBJS.
Obsah stránky Send.aspx, odlišný od Default.aspx:
<link rel="stylesheet" type="text/css" media="screen"
href="http://78.102.201.66:8081/css/Default.css?v=19" />



<p>
Aktualizujte svůj stav s naší aplikací: <a href="#"
onclick="Facebook.streamPublish(':-)'); return false;">
Aktualizovat stav</a>
</p>
<p>
Nebaví vás potvrzovat odesílané smajlíky <a href="My-smiles.apsx"
requirelogin='1'>Přejděte do sekce moji smajlíci</a></p>
<form method="post" action="Send.aspx">
<fieldset class="a">
Vyberte přítele:
<fb:friend-selector include_me="true" />
<br />
Napište vzkaz:
<input type="text" name="message" class="clear" />
<br />
Vyberte smajlík:
<div class="smile-select" id="SmileSelect" runat="server">
</div>
<hr class="clear" />
<input type="hidden" name="smile_form_submited" value="submited" />
<input type="submit" id="submitBtn" name="submitBtn"
value="Pošli smajlík" />
</fieldset>
</form>
<asp:label id="JavaScriptFooter" runat="server" />
Tato stránka ukazuje několik novinek. Hned první je vložení externího kaskádového stylu. Ač se
normálně vkládá do hlavičky dokumentu, u FBML stránek se vzhledem k tomu, že hlavičku nemají,
vkládá do těla. Důležité je, aby adresa byla absolutní. U css souborů dochází ke cachování na
straně Facebooku, proto je přidán parametr ?v={verze}, který je potřeba s každou úpravou
změnit. Kaskádový styl zajišťuje vzhled formuláře a zarovnání obrázků se smajlíky. V současné
době je na straně Facebooku nějaký technicky problém a první definovaný styl je ignorován!
Dále je ukázán FBJS objekt Facebook, který je na FBML canvas stránkách vždy dostupný, a jeho
metoda streamPublish(). StreamPublish je velice silná a variabilní metoda. Základní funkcí je
zobrazení dialogu pro aktualizování stavu (viz Obrázek 10.5).
▪ 58 ▪
Obrázek 10.5: streamPublish() dialog
K zobrazení dialogu v této podobě dojde, pokud je funkce zavolána s žádným nebo jedním para metrem. Předávaný parametr je předvyplněný text, který by měl podle pravidel Facebooku
vzniknout explicitní činností uživatele. Naše použití s přednastaveným statickým textem tedy toto
pravidlo porušuje. Pokud uživatel dialog potvrdí dojde k aktualizaci jeho statusu (status update)
skrz aplikaci. To znamená, že vedle statusu bude odkaz na aplikaci. Změna statusu je zobrazena u
jména v profilu, ve streamu uživatele a ve streamu všech jeho přátel. Obrázek 10.6 zobrazuje
projev status updatu. Obě jména aplikace „Smajlíci FBML“ jsou odkazy na aplikaci, stejně jako ikona aplikace.
Obrázek 10.6: Status update přes aplikaci
Metoda steramPublish() může mít více parametrů46.
46 http://wiki.developers.facebook.com/index.php/Facebook.streamPublish
▪ 59 ▪
Parametr
povinný Popis
user_message
ne
Řetězec s předvyplněnou zprávou, Facebook vyžaduje aby vznikl na
základě předchozí uživatelovy aktivity
attachment
ne
JSON kódovaný objekt s mediální přílohou
action_links
ne
JSON kódovaný objekt s polem o jednom action linku
target_id
ne
Uid na jehož zeď se má zpráva zapsat – může jít o uživatele, nebo
veřejný profil
user_message_p
rompt
ne
Text, který se použije jako nadpis dialogu
callback
ne
FBJS funkce, která se zavolá po ukončení dialogu
auto_publish
ne
Pokud je nastaveno na true , tak se dialog nezobrazí a story je
rovnou odeslána – toto vyžaduje rozšířené oprávnění
publish_stream
actor_id
ne
Určuje původce story, to umožňuje vystupovat 47 uživateli v roli jím
zpravovaného veřejného profilu.
Tabulka 10.2: Facebook.streamPublish()
Abychom mohli doplnit story o další informace, vytvoříme jednoduchý formulář, který zpracujeme
na serveru, a pomocí FBJS uživateli nabídneme podobný dialog jako pro status update.
<form method="post" action="Send.aspx">
<fieldset>
Vyberte přítele:
<fb:friend-selector include_me="true" />
<br />
Napište vzkaz:
<input type="text" name="message" class="clear" />
<br />
Vyberte smajlík:
<div class="smile-select" id="SmileSelect" runat="server">
</div>
<hr class="clear" />
<input type="hidden" name="smile_form_submited" value="submited" />
<input type="submit" id="submitBtn" name="submitBtn"
value="Pošli smajlík" />
</fieldset>
</form>
Tento jednoduchý formulář umožňuje uživateli vybrat přítele, napsat komentář a vybrat smajlíka,
kterého chce uživateli poslat. Výběr smajlíků je generován dynamicky podle dostupných smajlíků
viz níže.
Facebook tento formulář doplní o velké množství skrytých polí, aby výsledný request obsahoval
všechny potřebné parametry (viz Obrázek 10.7). Protože sami chceme poslat skryté pole, je potřeba, aby byla metoda nastavena na parametr POST.
47 Pokud je toto pole vyplněno, je story odeslána jako by ji napsal daný veřejný profil, v tomto případě není
také možné nastavit target_id parametr, neboť veřejné profily mohou zveřejňovat pouze na svou zeď.
▪ 60 ▪
Obrázek 10.7: Parametry přidané do formuláře (zobrazeno pomocí Firebugu)
Pro výběr uživatele je zde použit FBML tag <fb:friend-slector />. Ten do stránky vloží textové
pole, které umožňuje uživateli vybrat jednoho z přátel. Jméno uživatele je uloženo v parametru
friend_selector_name a jeho id v parametru friend_selector_id. Parametrizací tagu je
možné upravit jeho chování48:
Parametr
povinný Default
Popis
uid
ne
Aktuální uživatel
Id uživatele, kterého přátele mají být na výběr
name
ne
friends_selector_
name
Jméno input tagu, ve kterém bude odesláno
jméno vybraného přítele,
idname
ne
friends_selector_
id
Jméno hidden input tagu, ve kterém bude
odesláno uid vybraného přítele
include_me
ne
false
true/false nastavení, jestli se má zobrazit i
aktuální uživatel
exclude_ids
ne
null
Seznam id, které se nemají zobrazit na seznamu
include_lists
ne
false
true/false nastavení, jestli se mají na seznamu
zobrazit i friendlisty
prefill_id
ne
null
Jedno uid, které bude předvyplněno ve vstupním
poli
Tabulka 10.3: tag fb:friend-selector
HTML pro výběr smajlíka je generováno dynamicky, ale je velice jednoduché:
48 http://developers.facebook.com/docs/reference/fbml/friend-selector
▪ 61 ▪
String rootURL = WebConfigurationManager.AppSettings["Callback"];
StringBuilder output = new StringBuilder();
foreach (Smile smile in smiles.Values)
{
output.Append("<div class=\"smile-option\">");
output.Append(
String.Format("<img src=\"{0}img/{1}.gif\" title=\"{2}\" alt=\"{2}\" />",
rootURL, smile.LinkName, smile.Description));
output.Append(
String.Format("<input type=\"radio\" name=\"smile\" value=\"{0}\"",
smile.LinkName));
output.Append("</div>");
}
SmileSelect.InnerHtml = output.ToString();
Důležití je, aby odkazy na obrázky byly absolutní a vedly na náš server, ne na URL canvasu, proto
je zde využito callback url z nastavení aplikace. Po výběru bude v parametru smile vložena hodnota linkName property smajlíka.
Volání zpracujeme a jako výsledek vložíme do stránky JavaScript kód, který uživateli zobrazí di alog pro publikování story i s obrázkem. Proto máme na konci stránky placeholder.
<asp:label id="JavaScriptFooter" runat="server" />
Po odeslání formuláře zpět na server zpracování začíná načtením inicializací StringBuilderu a
načtením parametrů. Jestli se jedná o postback, rozhodneme podle parametru smile_form_submitted (skryté pole ve formuláři)
StringBuilder javaScript;
String message = Request.Params["message"] == null ? "" :
Request.Params["message"];
String targetId = Request.Params["friend_selector_id"];
String smile = Request.Params["smile"];
Nyní podle vybraného smajlíka vytvoříme přílohu. Cílem je vytvořit JSON kódovaný objekt attachment ve tvaru49:
49 http://wiki.developers.facebook.com/index.php/Attachment_(Streams)
▪ 62 ▪
{
'name': 'Název',
'href': 'Odkaz',
'caption': 'Nadpis',
'description': 'popis',
'media':
[{
'type': 'image',
'src': 'URL',
'href': 'odkaz'
}]
};
Pro převod do JSON kódování nabízí FDT třídu Facebook.Utility.JSONHelper. Tato třída umí
převádět do kódování List<String> a Dictionary<String, String>. Nejdříve si všechny potřebné stringy připravíme:
Smile chosenSmile = smiles[smile];
String attachment = "null";
String actionLinks = "null";
// pomocná url
// Ač Facebook toolkit obsahuje pomocné třídy pro attachment a action linky, neumí
// tyto třídy převést na JSON
// Tvorba attachmentu
// media - obrázek
String mediaType = "image";
String mediaSrc = String.Format("{0}img/{1}.gif", rootURL, chosenSmile.LinkName);
String mediaHref = "http://apps.facebook.com/smajlici-fbml/Send.aspx";
String media = JSONHelper.ConvertToJSONAssociativeArray(
new Dictionary<String, String> {
{ "type", mediaType },
{ "src", mediaSrc },
{ "href", mediaHref } }
);
// medií může být více, prot jsou vložena v poli i když je jenom jedno
String atachMedia = JSONHelper.ConvertToJSONArray(
new List<String>(new String[] { media })
);
// Renderováno jako nadpis
String atachName = chosenSmile.Name;
// Odkaz vede z kliknutí na name
String atachHref = "http://apps.facebook.com/smajlici-fbml/Send.aspx";
// Podnadpis - měl by se vejít na jeden řádek
String atachCaption = "{*actor*} posílá smajlíka";
// Textový popis
String atachDescrption = chosenSmile.Description;
attachment = JSONHelper.ConvertToJSONAssociativeArray(
{"name",atachName},
{"href", atachHref},
{"caption",atachCaption},
{"description",atachDescrption},
{"media",atachMedia}
})
Právě kvůli těmto přílohám jsme si vytvořili třídu Smile. Podle vybraného smajlíka (parametr smile) je vybrán příslušný smajlík a do přílohy jsou vloženy jeho atributy. Mediální přílohou mimo ob-
▪ 63 ▪
rázku může být ještě flash nebo video. Obrázky jsou opět adresovány absolutně a odkazy jsou na staveny na současnou stránku.
V podnadpisu je použita speciální konstrukce {*actor*}, která je Facebookem nahrazena za jméno odesílajícího uživatele a slouží jako odkaz na jeho profil.
Výsledkem je mediální příloha vložená pod vzkaz uživatele, viz Obrázek 10.8.
Obrázek 10.8: Media attachment
Ke story je možné připojit ještě action link. To je odkaz pro ostatní uživatele, který by je měl vyzývat
ke konání nějaké akce v aplikaci. Ve streamu je zobrazen vedle možností comment a like (viz Obrázek 10.9). Dříve bylo zvykem action link zakončovat vykřičníkem. To je nyní zakázané a tečky a
vykřičníky jsou z konce odkazu automaticky odebrány.
Obrázek 10.9: Action link
Dříve bylo možné přidávat více action linků, proto se z historických důvodů action link vkládá jako
pole o jednom prvku. Kód pro vytvoření správně kódovaného action linku:
// Tvorba action linků
// Action link může být pouze jeden
String text = "Poslat smajlík";
String href = "http://apps.facebook.com/smajlici-fbml/Send.aspx ";
String link = JSONHelper.ConvertToJSONAssociativeArray(
new Dictionary<String,String>
{ {"text",text},{"href",href}
} );
// dříve bylo možné u některých zpráv zasílat více linků, proto je link v poli.
actionLinks = JSONHelper.ConvertToJSONArray(
new List<String>(new String[] {link})
);
Z připravených „objektů“ nyní vytvoříme Javascript kód který zobrazí příslušný dialog a zapíšeme
ho na konec stránky.
▪ 64 ▪
javaScript = new StringBuilder();
javaScript.Append("<script>\n\n</script>");
//Zapsaní JS na konec stránky
JavaScriptFooter.Text = javaScript.ToString();
Obrázek 10.10: Dialog pro publikování s přílohou
10.3.2 Dialogová okna
FBJS neumožňuje používat standardní dialogová okna window.alert(), window.promt(). Místo nich
poskytuje vlastní dialogy. Dialogu využijeme k informování uživatele o špatně vyplněném vstupním
poli (Obrázek 10.11).
Obrázek 10.11: Message dialog
K tomuto slouží FBJS objekt Dialog50 a jeho metoda showMessage(nadpis, obsah).
50 http://wiki.developers.facebook.com/index.php/FBJS
▪ 65 ▪
if (String.IsNullOrEmpty(targetId)) {
String errorMessage = "Musíte vybrat komu chcete smajlíka poslat";
javaScript = new StringBuilder();
javaScript.Append("<script>\n\n</script>");
//Zapsaní JS na konec stránky
JavaScriptFooter.Text = javaScript.ToString();
return;
}
)
10.3.3 Získání autorizace
Facebook umožňuje publikovat story do streamu bez přímého potvrzení uživatele přes REST API.
K tomu je potřeba, aby uživatel autorizoval aplikaci a dal jí stream_publish extended permission.
Pro takovéto operace má FDT velmi dobrou podporu, kterou si ukážeme na stránce My-smiles.aspx. Stránku je potřeba podědit z třídy Facebook.Web.CanvasFBMLBasePage, ta nám zpřístupní veškerou funkcionalitu rozhraní přes svou property Api.
Pokud chceme, aby došlo k autorizaci uživatele, je potřeba ještě před inicializací stránky nastavit
property RequireLogin na true. Stejně tak se dá nastavit seznam vyžadovaných rozšířených povolení jako property RequiredPermissions, ale v tomto případě si ukážeme jinou možnost získání
povolení.
public partial class My_smiles : Facebook.Web.CanvasFBMLBasePage
{
protected void Page_PreInit(object sender, EventArgs e)
{
// Vynutí aby byl uživatel přihlášen do Facebooku a autorizoval apliakci
RequireLogin = true;
//Vyšší oprávnění se dají vyžádat takto
//RequiredPermissions = new
//List<Facebook.Schema.Enums.ExtendedPermissions>() {
//
Facebook.Schema.Enums.ExtendedPermissions.publish_stream, };
}
...
}
Tento kód zajistí, že je vyžadována autorizace. Pokud uživatel aplikaci neautorizoval, bude
přesměrován na příslušný dialog. Pokud jí autorizoval, bude získán temporray session key a
uložen do HttpSession.
Pro získání příslušných oprávnění se dá použít i FBJS a metoda Facebook.showPermissionDialog(permissionString), kde parametr permissionString je seznam oprávnění oddělený
čárkou. V našem případě má hodnotu „publish_stream“ a uživateli ho ukážeme, pouze pokud
▪ 66 ▪
nám již dané právo neudělil. Výhodou oproti výše zmíněnému způsobu je, že se dialog pro potvrzení pravidla zobrazí bez přesměrování na jinou stránku (Obrázek 10.12)
Obrázek 10.12: Dialog pro rozšířená práva
Stejné funkčnosti lze docílit i FBML tagem <fb:prompt-permission perms=“permissionString“>text dokazu</fb:prompt-permission>. Parametr permissionString je shodný jako
u FBJS a text odkazu je text, na který uživatel musí kliknout, aby se dialog zobrazil.
10.3.4 Automatická publikace
Pro stránku My-smiles.aspx
musíme vytvořit vlastní formulář podobný tomu ze stránky
Send.aspx. Nyní ale požijeme FBML tag <fb:editor />51, který vytvoří formulář stejný, jako používá Facebook.
51 http://developers.facebook.com/docs/reference/fbml/editor
▪ 67 ▪
Obrázek 10.13: <fb:editor /> formulář
K výsledku z obrátku 10.13 jsme použili takovýto FBML kód:
<fb:editor action="My-smiles.aspx" labelwidth="100">
<fb:editor-custom label="Vybrte přítele">
<fb:friend-selector include_me="true"/>
</fb:editor-custom>
<fb:editor-text label="Zadejte vzkaz" name="message" />
<fb:editor-custom label="Vyberte smajlík">
<div id="SmileSelect" runat="server" />
</fb:editor-custom>
<fb:editor-buttonset>
<fb:editor-button value="Odeslat" name="submitted"/>
<fb:editor-cancel />
</fb:editor-buttonset>
</fb:editor>
Fb:editor formulář je vždy odesílán metodou POST. Parametr action se mapuje 1:1 na parametr action tohoto formuláře. Dále je možné použít dva parametry: Width – to je šířka pravého
sloupce pro vstupní pole a labelwidth – to je šířka levého sloupce pro popisky. Pokud nejsou nadefinovány, je šířka popisků 75 pixelů z 425 pixelů šířky celé tabulky.
Fb:editor může obsahovat řadu dalších specifických tagů pro zadávání různých druhů vstupů,
jmenovitě:
•
fb:editor-text
•
fb:editor-textarea
•
fb:editor-time
•
fb:editor-month
•
fb:editor-date
▪ 68 ▪
•
fb:editor-divider
•
fb:editor-buttonset
•
◦
fb:editor-button
◦
fb:editor-cancel
fb:editor-custom
Fb:editor-button a fb:editor-cancel se mohou vyskytovat pouze v tagu editor-buttonset.
Při potvrzení formuláře tlačítkem fb:editor-button je odeslán s další parametr s jménem a
hodnotou podle nastavení tlačítka – tím je možné rozlišit, kterým tlačítkem byl formulář odeslán.
U všech položek editoru je možné nastavit parametr label na text popisku, name na název parametru odeslaného s formulářem a value na přednastavenou hodnotu. Výjimkou je fb:editor-custom, který má pouze parametr label, ale obsah tohoto párového tagu je vykreslen v
pravém sloupci, a slouží tak ke vložení vlastních vstupů. V našem případě jsou zde doplněni smaj líci stejně jako v předchozím formuláři.
Pokud je tento formulář odeslán, je vytvořena instance objektu SavedSmile a uložena smileStorerem. K tomu, abychom vytvořili tento objekt, potřebujeme zjistit uid aktuálního uživatele. To lze
udělat načtením kompletních informací o uživateli, nebo si tuto informací načíst ze Api.Session
property:
//Struktura pro uložení
SavedSmile ss = new SavedSmile();
ss.Smile = _smiles[smile];
ss.When = new DateTime();
//Api.Users.GetInfo() bez parametru je aktuálně přihlášený uživatel
//ss.From = Api.Users.GetInfo().uid.ToString();
ss.From = Api.Session.UserId.ToString();
ss.Message = message;
ss.To = targetId;
_storer.saveSmile(ss);
Aplikace by nikdy pro svoje fungování neměla vyžadovat rozšířená oprávnění do té míry, že bez
nich nebude fungovat. Vytvoření smyčky, která bez potvrzení práv nepustí uživatele dál, je za kázaná činnost. Proto si naše aplikace ověří, zda má právo publikovat do streamu uživatele, a jen
tehdy smajlíka odešle:
▪ 69 ▪
if (!Api.Users.HasAppPermission(Enums.ExtendedPermissions.publish_stream))
{
//Nejde zapsat
...
}
else
{
//odeslání do streamu
smilePublish(ss.Smile, ss.To, message);
}
Odeslání do streamu je velice podobné tomu v JavaScriptu. Pouze místo JSON kódovaných objektů využijeme objekty FDT v namespace Facebook.Rest
private void smilePublish(Smile smile, string targetId, string message)
{
//pomocná url
//Vytvoření přílohy
Facebook.Rest.attachment atttach = new Facebook.Rest.attachment();
//Vytvoření media pro přílohu
List<Facebook.Rest.attachment_media> medias = new
List<Facebook.Rest.attachment_media>();
//Je potřeba vytvářet přesný typ přílohy
Facebook.Rest.attachment_media_image imageMedia = new
Facebook.Rest.attachment_media_image();
//parametry media přílohy
imageMedia.src = String.Format("{0}img/{1}.gif", rootURL, smile.LinkName);
imageMedia.href = "http://apps.facebook.com/smajlici-fbml/Send.aspx";
medias.Add(imageMedia);
atttach.media = medias;
// Textová část přílohy
// Renderováno jako nadpis
atttach.name = smile.Name;
// Odkaz vede z kliknutí na name
atttach.href = "http://apps.facebook.com/smajlici-fbml/Send.aspx";
// Podnadpis - měl by s evejít na jeden řádek
atttach.caption = "{*actor*} posílá smajlíka";
// Textový popis
atttach.description = smile.Description;
//Action linky, může být pouze jeden
List<Facebook.Schema.action_link> actionLinks = new
List<Facebook.Schema.action_link>();
Facebook.Schema.action_link actionLink = new Facebook.Schema.action_link();
//Nemůže končit tčekou (.) ani vykřičníkem (!)
actionLink.text = "Moji smajlíci";
actionLink.href = "http://apps.facebook.com/smajlici-fbml/My-smiles.aspx";
//už může být pouze jeden
actionLinks.Add(actionLink);
//Publikování přes API
Api.Stream.Publish(message, atttach, actionLinks, targetId, 0);
}
K publikování je využita metoda Api.Stream.Publish(). Tato metoda má dvě přetížení. V prvním
bere pouze jeden parametr string message a funguje jako status udpate pro právě přihlášeného
uživatele. Druhá varianta, námi použitá, bere 5 parametrů:
▪ 70 ▪
Parametr
typ
Popis
message
String
Zpráva, podle pravidel musí být aktivně
vytvořená uživatelem
attachment
Facebook.Rest.attachment
Příloha story, může obsahovat
multiméedia – obrázek, flash, video
actionLinks
Ilist<Facebook.schema.action_link>
Action Link
targetId
string
Id uživatele na jehož zdi se má zpráva
objevit
uid
long
ID uživatele, jenž zprávu posílá, pokud je
0, je použit právě přihlášený uživatel.
Tabulka 10.4: Api.StreamPublish();
Pro vypsání výsledků výsledků akce můžeme použít namísto FBJS prostředky FBML. 52 Pro zprávy
pro uživatele existují tři tagy <fb:error /> <fb:success /> a <fb:explanation />. Všechny
tři mohou obsahovat <fb:message />, který se zobrazí jako nadpis zprávy jako na obrázku 10.14.
Obrázek 10.14: FBML zprávy
<fb:explanation>
<fb:message>Explanation message</fb:message>
Explanation text.
</fb:explanation>
<br />
<fb:success>
<fb:message>Success message</fb:message>
Success text.
</fb:success>
<br />
<fb:error>
<fb:message>Error message</fb:message>
Error text.
</fb:error>
52 Samotný kód z třídy My-smlies zde není ukázán, protože není tak přehledný, jako tato ukázka.
▪ 71 ▪
10.4 IFrame stránka
Pro ukázku iFrame přístupu si v řešení vytvoříme nový projekt pojmenovaný SmilesIFrame. Jeho
nastavení je shodné s nastavením SmilesFBML, takže postupujte podle kapitoly 9.3 Založení
projektu, pouze s rozdílným nastavením Web.config v sekci appSettings. Zde je potřeba nastavit
správné informace z Developers aplikace.
10.4.1 Master Page
Abychom nemuseli na všech stránkách opakovat stejný layout, jako v případě FBML aplikace, použijeme tentokrát tzv. master page. Vytvoříme si stránku IFrameMaster.Master podle šablony
Master Page. Abychom všem jejím vnořeným stránkám zpřístupnili FDT funkcionalitu, musíme podědit tuto stránku z třídy Facebook.Web.CanvasIFrameMasterPage. A pro další potřeby zpřístupníme APIKey jako read only property53.
public partial class IFrameMaster : Facebook.Web.CanvasIFrameMasterPage
{
protected void Page_Load(object sender, EventArgs e)
{}
public String APIKey {
get { return WebConfigurationManager.AppSettings["APIKey"]; }
}
}
Na stránce vytvoříme jednoduchý layout s nadpisem, importem css souboru a navigací. Protože
chceme, aby každá stránka dostala všechny parametry od Facebooku, směřujeme všechny odkazy
do rodičovského framu. Jako cíl musíme v tomto případě použít absolutní cestu k naší canvas
stránce na Facebooku
<a href="http://apps.facebook.com/smajlici-iframe/Action1.aspx"
target="_top">Stránka s přihlášením</a>
10.4.2 Facebook JS Client Library
Protože chceme využít XFBML a některá další funkcionality Facebooku, musíme do stránky vložit
JavaScriptovou knihovnu Facebooku (JSCL). Doporučením je vkládat knihovnu ne do hlavičky ale
do těla hned za tag <body>.
53 [PROFESSIONAL C#] s 93-94
▪ 72 ▪
<body>
<script
src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/cs
_CZ"
type="text/javascript">
Kvůli ochraně prohlížečů před takzvaným cross site scripting je javascript omezen na požadavky
pouze na doménu, ze které je stránka nahrána. Aby mohla naše stránka komunikovat s Facebookem, je potřeba vytvořit tzv. Cross domain communication channnel54. Ten je reprezentován
souborem xd_reciever.htm, který má jednoduchý obsah (Princip cross domain komunikace je
popsán v příloze c) Cross domain communication):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script
src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?
2"
type="text/javascript">
</script>
</body>
</html>
Pro správnou interpretaci XFBML tagů je potřeba vytvořit fb namspace ve stránce:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
Nyní máme vše připraveno pro načtení funkčností JS knihovny. To se provede následujícím kódem, který by měl být umístěn u konce obsahu dokumentu:
54http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_Channel
▪ 73 ▪
<script type="text/javascript">
window.onload = function () {
FB_RequireFeatures(["XFBML", "CanvasUtil"], function () {
FB.Facebook.init("<%= APIKey %>", "xd_receiver.htm");
FB.CanvasClient.startTimerToSizeToContent();
FB.XFBML.Host.get_areElementsReady().waitUntilReady(function () {
document.getElementById("xfbml_content").style.visibility =
"visible";
});
});
};
</script>
Na událost nahrání okna navěsíme handler, který načte potřebnou funkcionalitu.
FB_RequireFeatures(["XFBML", "CanvasUtil"],function () {});
První parametr značí, které prostředky knihovny se mají načíst, a druhý funkci, která se provede po
načtení.
Po načtení prostředků musíme nejprve inicializovat spojení funkcí.
FB.Facebook.init("<%= APIKey %>", "xd_receiver.htm");
První parametr je náš APIKey získaný z property stránky a druhý je relativní odkaz na cross domain communication channel.
Na jedné stránce používáme post back, kdy dojde ke změně obsahu iframe, aniž by se znovu načetla celá stránka Facebooku. Při tomto přechodu se změní velikost obsahu. Abychom zabránili
zobrazení posuvníků okolo iFramu, je v inicializaci stránky použita tato funkce:
FB.CanvasClient.startTimerToSizeToContent();
Právě kvůli ní je vyžadována feature canvasUtil.
K překladu XFBML dochází až JS knihovnou na straně klienta, proto se mu nejprve stránka vyrenderuje jinak a následně po inicializaci knihovny „problikne“ a změní obsah. Abychom zabránili tomuto, pro uživatele nepříjemnému, jevu, nejprve celý obsah stránky v divu xfbml_content
„schováme“ pomocí css stylu visibility:hidden a až po načtení XFBML nastavíme na visibility:visible.
FB.XFBML.Host.get_areElementsReady().waitUntilReady(function () {
document.getElementById("xfbml_content").style.visibility = "visible";
});
Tento handler se spustí po té, co je veškerý XHTML obsah vyrenderován, a pouze v případě, že
stránka nějaké XFBML obsahuje. Pokud tomu tak není, nikdy k zavoláni funkce nedojde.
▪ 74 ▪
10.4.3 XFBML
XFBML je velice podobné FBML, je pouze více omezené a všechny tagy by se měly psát jako párové. První stránkou, kde ho použijeme, bude Default.aspx. Vytvořte ho podle šablony Web
Form Using Mster Page s master page nastavenou na IframeMsatre.master.
Tagy <fb:name /> a <fb:ptofile-picture /> fungují stejně jako ve FBML, pouze s tím rozdílem, že se obsah načítá až se zpožděním.
<p>
Tato stránka se chová uplně normálně jako každá jíná ASP.NET
stránka. Tato apliakcevznikla jako ukázková apliakce pro bakálřskou
práci. Autorem je
<fb:name uid="1475784526" useyou="false">
</fb:name>.
</p>
<p>
Toto jsem já:<br />
<fb:profile-pic uid="1475784526" size="normal" linked="true">
</fb:profile-pic>
</p>
Vygeneruje takovýto výstup jako na obrázku 10.15.
Obrázek 10.15:
Seznam všech dostupných tagů je v dokumentaci Facebooku 55. Pokud vývojář potřebuje tag
dostupný pouze v FBML, může použít tag <fb:serverFbml />, který do stránky vloží iFrame a vyrenderuje obsah na FB serveru.
10.5 Načítání informací
Všechny načtené informace pomocí FDT jsou v anglické lokalizaci.
Pro získávání informací z REST API je potřeba nechat uživatele autorizovat aplikaci. Vytvoříme
novou stránku Action1.aspx stejně jako Default.aspx. Ve stránce si musíme zpřístupnit master
55 http://wiki.developers.facebook.com/index.php/XFBML
▪ 75 ▪
page se správným typem a pro ulehčení práce i property Api z mastera, přidáním těchto dvou property:
public partial class Action1 : System.Web.UI.Page
{
...
public new IFrameMaster Master
{
get { return ((IFrameMaster)(base.Master)); }
}
public Api Api
{
get { return Master.Api; }
}
...
}
Přihlášení a rozšířená oprávnění nastavíte nastavením příslušné property mastera stejně jako v
případě FBML stránky:
{
Master.RequireLogin = true;
Master.RequiredPermissions = new
List<Facebook.Schema.Enums.ExtendedPermissions>() {
Facebook.Schema.Enums.ExtendedPermissions.publish_stream,
Facebook.Schema.Enums.ExtendedPermissions.email,
};
}
Zde ovšem dochází s aktuální verzí knihovny k problému. Přesměrování na login stránku nenastavuje stránku pro přesměrování po loginu, a nikdy se tak nepovede uživatele přihlásit – vždy je
přesměrován na Default.aspx, které autorizaci nepoužívá a nikdy nevytvoří facebook session (třídu reprezentující autorizaci).
Oprava je velice jednoduchá. Ve třídě Facebook.Session.CanvasSession je potřeba upravit metoda protected string GetLoginURL() na:
protected string GetLoginUrl()
{
return string.Format(
"http://www.facebook.com/login.php?api_key={0}&v=1.0&next={1}&canvas=",
ApplicationKey, GetNextUrl() );
}
A protože používáme přesměrování pomocí tcpmon, musíme upravit i metodu GetNextUrl();
▪ 76 ▪
public string GetNextUrl()
{
var props = new Api(this).Admin.GetAppProperties(
new List<string>() { "callback_url", "canvas_name" }
);
if (props.ContainsKey("callback_url") && props.ContainsKey("canvas_name")
&& !string.IsNullOrEmpty(props["callback_url"])
&& !string.IsNullOrEmpty(props["callback_url"]))
{
// Starý kód
// return HttpContext.Current.Request.Url.ToString().Replace(
//
props["callback_url"],
//
string.Format("http://apps.facebook.com/{0}/",
//
props["canvas_name"]));
// Nový kód:
string location =
HttpContext.Current.Request.AppRelativeCurrentExecutionFilePath.Replace(
"~/","");
return string.Format(
"http://apps.facebook.com/{0}/{1}",
props["canvas_name"], location);
//Konec nového kódu
}
return null;
}
Tyto změny jsou v přiloženém projektu již zaneseny a měly by se dostat i do dalších verzí
knihovny.
Když máme hotové přihlášení uživatele, můžeme o něm načíst informace přes REST API a naplnit
s těmito údaji tabulku ve stránce:
<table>
<tr>
<td>
<asp:Literal ID="Name" runat="server" />
</td>
<td>
<img id="UserImg" runat="server" src="." />
</td>
<td>
<asp:Literal ID="Sex" runat="server" />
</td>
<td>
<asp:Literal ID="EmailLiteral" runat="server" />
<asp:Button ID="EmailButton" runat="server" Text="Zjistit e-mail"
OnClick="EmailButton_Click" />
</td>
</tr>
</table>
▪ 77 ▪
Naplnění údajů v Page_Load(...) metodě:
{
// Nacteni aktualniho uzivatele
Facebook.Schema.user actor = Api.Users.GetInfo();
Name.Text = actor.name;
UserImg.Src = actor.pic;
Sex.Text = actor.sex;
}
Volání metody Api.Users.GetInfo(); vrací objekt uživatele (třída Facebook.Schema.user).
Pokud je volán tak jako zde, dojde k načtení právě přihlášeného uživatele. Další možností je zadat
parametr long uid – a dostat informace o specifikovaném uživateli, nebo zadat List<Ling> uids
a získat seznam uživatelů. Údaje jsou získané v kontextu právě přihlášeného uživatele a omezují
se na to co může právě on vidět.
Všechny obrázky vrácené přes API jsou vlastně URL obrázků na Facebooku.
Získání e-mailu není takto jednoduché, proto aby ho aplikace mohla získat, musí mít od uživatele
rozšířené oprávnění email. FDT získání e-mailu přímo nepodporuje, ale lze k tomu využít FQL.
protected void EmailButton_Click(object sender, EventArgs e)
{
if (Api.Users.HasAppPermission(Enums.ExtendedPermissions.email))
{
EmailButton.Visible = false;
var response = Api.Fql.Query(
String.Format("SELECT email from user where uid = {0}",
Api.Session.UserId)
);
EmailLiteral.Text = response;
}
else
{
EmailLiteral.Text = "Aplikace nemá právo získat e-mail";
}
}
Tato funkce navázaná na tlačítko ve stránce zkontroluje, jestli nám uživatel zadal oprávnění ke
svému emailu. Pokud ano, získá ho FQL dotazem nad tabulkou user. Získaný e-mail může být
uživatelův primární, nebo tzv. proxy email směřující na doménu proxymail.facebook.com. V obou
případech aplikace musí e-mail na danou adresu odeslat vlastními prostředky 56. Pravidla Facebooku vyžadují aby e-mail obsahoval odkaz na zrušení zasílání, samozřejmě zakazují prodej nebo
56 http://wiki.developers.facebook.com/index.php/Roadmap_Email
▪ 78 ▪
předání e-mailu třetí straně a odkazují na americký zákon CAN_SPAM Act 57. V našich podmínkách
se na e-maily vztahuje české právo.
Podobným způsobem jako funguje načtení aktuálním informací o uživateli, uděláme i načtení informací o všech jeho přátelích. Do stránky vložíme tlačítko a repeater.
<asp:Button runat="server" OnClick="LoadFriends" ID="PostBackButton"
Text="Nahrát přátele" />
<asp:Repeater ID="FriendsRepeater" runat="server">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# ((Facebook.Schema.user) Container.DataItem).name %>
</td>
<td>
<img src="<%#
((Facebook.Schema.user) Container.DataItem).pic_square %>" />
</td>
<td>
<%# ((Facebook.Schema.user) Container.DataItem).sex %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Do kódu pak přidáme jednoduchou metodu, která se spustí po kliknutí na tlačítko:
/**
* Načte přátele a zobrazí je ve FriendsRepeateru
*/
protected void LoadFriends(object sender, EventArgs args)
{
// Tlačítko již není potřeba
PostBackButton.Visible = false;
// Nahrání přátel:
List<long> friednsIds = (List<long>)Api.Friends.Get();
IList<Facebook.Schema.user> friends = Api.Users.GetInfo(friednsIds);
// Bindování výsledku do repeateru:
FriendsRepeater.DataSource = friends;
FriendsRepeater.DataBind();
}
10.5.1 Dashboard API - counter
Dashboard API je novinkou v komunikaci mezi aplikací a uživatelem. Jednou ze zajímavých
možností je přidat počet akcí očekávajících uživatele vedle záložky (bookmark) aplikace. V iFrame
57 http://www.ftc.gov/bcp/edu/pubs/business/ecommerce/bus61.shtm
▪ 79 ▪
aplikaci je pro přidání záložky možné použít JS dialog vyvolaný funkcí FB.Connect.showBookmarkDialog();. Do stránky tedy přidáme:
<a href="#" onclick="FB.Connect.showBookmarkDialog();">Přidat záložku</a>
Po kliknutí na tento odkaz se otevře dialogové okno jako na obrázku 10.16.
Obrázek 10.16: Dialog přidání záložky
Pro práci s Dashboard API si vytvoříme novou stránku Action2.aspx stejně jako Action1.aspx.
Obsahem stránky budou tři tlačítka pro tři ukázkové funkce:
<asp:Button ID="CounterButton" runat="server" Text="Zvětšit počítadlo"
OnClick="CounterButton_Click" />
<asp:Button ID="GlobalNewsButton" runat="server" Text="Zapsat globální zprávy"
OnClick="GlobalNewsButton_Click" />
<asp:Button ID="PersonalNewsButton" runat="server" Text="Zapsat osobní zprávy"
OnClick="PersonalNewsButton_Click" />
První implementujeme změnu čítače.
// Zvedne čítač u záložky o jedna
protected void CounterButton_Click(object sender, EventArgs e)
{
int count = Api.Dashboard.GetCount(Api.Session.UserId);
Api.Dashboard.SetCount(Api.Session.UserId, ++count);
// nebo
// Api.Dashboard.IncrementCount(Api.Session.UserId)
}
Tato metoda načte aktuální stav čítače a znovu ho uživateli uloží jednou inkrementovaný. Alternativou k tomuto postupu by bylo zavolání metody Api.Dashboard.IncrementCount(long uid),
která bere jako parametr uid uživatele. Výsledná podoba čítače je zobrazena na obrázku 10.17.
▪ 80 ▪
Obrázek 10.17:
Čítač
10.5.2 Dashboard API – novinky
Vedle counteru nabízí dashboard API možnost v dashboardu zobrazovat novinky. Ty se dělí na
osobní, zobrazené pouze jednomu uživateli, a veřejné, informující všechny uživatele. Z aplikačního
hlediska se od sebe moc neliší. Následující kód ukazuje zapsání dvou novinek pro právě přihlášeného uživatele.
protected void PersonalNewsButton_Click(object sender, EventArgs e)
{
//Osobní zpráva, pro uživatelé
Facebook.Schema.dashboard_bundle bundle = new
Facebook.Schema.dashboard_bundle();
bundle.message = "{*actor*} je super, protože použil naší aplikaci";
actionLink.text = "Vyzkoušet aplikaci";
actionLink.href = "http://apps.facebook.com/smajlici-iframe/Action2.aspx";
bundle.action_link = actionLink;
Facebook.Schema.dashboard_bundle bundle2 = new
bundle2.message = "Děkujeme";
bundle2.action_link = actionLink;
Facebook.Schema.dashboard_news newsToSet = new
Facebook.Schema.dashboard_news();
newsToSet.news.Add(bundle);
newsToSet.news.Add(bundle2);
//Absolutní odkaz na obrázek
newsToSet.image = "http://i4.ytimg.com/i/SnXrI1tf2Liw6Pdfo8-k0A/1.jpg";
Api.Dashboard.AddNews(newsToSet, Api.Session.UserId);
}
▪ 81 ▪
Volání funkce Api.Dashboard.AddNews(newsToSet, Api.Session.UserId) na konci této metody přidá novinky v Facebook.Schema.dashboard_news newsToSet do dashboardu a nastaví obrázek u novinek na newsToSet.image. Pokud není image property nastavena, použije se obrázek
nastavený v nastavení aplikace.
dashboard_news
Do
se
vkládají
jednotlivé
zprávy
–
instance
třídy
Facebook.Schema.dashboard_bundl, ty mají dvě property. První je message – text vlastní zprávy
a druhá je action_link, který se chová úplně stejně jako u streamu, zde je vypsán na stejném
řádku jako příslušná novinka. V message property je možné použít notaci {*actor*}, která je Facebookem nahrazená za jméno uživatele, předaného jako druhý parametr funkce AddNews.
Metoda, která přidá dvě globální zprávy, vypadá v podstatě stejně jako ta, co přidává osobní. Liší
se ale v tom, že zapsané zprávy se zobrazí všem uživatelům.
protected void GlobalNewsButton_Click(object sender, EventArgs e)
{
//Globální zpráva, kterou vidí všichni uživatelé
Facebook.Schema.dashboard_bundle bundle = new
bundle.message = "Apliakce se rozjíždí díky uživateli {*actor*}";
actionLink.text = "Vyzkoušet aplikaci";
actionLink.href = "http://apps.facebook.com/smajlici-iframe/Action2.aspx";
bundle.action_link = actionLink;
Facebook.Schema.dashboard_bundle bundle2 = new
bundle2.message = "Apliakce se rozjíždí podruhé";
bundle2.action_link = actionLink;
Facebook.Schema.dashboard_news newsToSet = new
Facebook.Schema.dashboard_news();
newsToSet.news.Add(bundle);
newsToSet.news.Add(bundle2);
//Absolutní odkaz na obrázek
newsToSet.image = "http://i4.ytimg.com/i/SnXrI1tf2Liw6Pdfo8-k0A/1.jpg";
Api.Dashboard.AddGlobalNews(newsToSet);
}
Výsledek těchto volání je zobrazen na obrázku 10.18. Všimněte si, že obrázek je zmenšen na
50×50 pixelů.
▪ 82 ▪
Obrázek 10.18: Novinky v dashboardu
10.5.3 Stránka bez master page
Ukázková aplikace ještě obsahuje stránku Action3.aspx, která nemá master page. IFrame
stránky, které chtějí využívat funkce FDT musí být poděděné z Facebook.Web.CanvasIFrameBasePag. Vynucení autorizace a rozšířených práv je pak stejné jako u Master Page nebo FBML
stránky:
// Tato stránka ukazuje, jak se dělá přihlášení bez master page
public partial class Action3 : Facebook.Web.CanvasIFrameBasePage
{
{
RequireLogin = true;
RequiredPermissions = new
List<Facebook.Schema.Enums.ExtendedPermissions>() {
Facebook.Schema.Enums.ExtendedPermissions.publish_stream,
Facebook.Schema.Enums.ExtendedPermissions.email,
};
}
...
}
10.6 Karta (Tab)
Předchozí kapitoly ukazovaly tvorbu canvas stránek. Nyní pro aplikaci SmilesFBML doděláme integraci do profilu uživatele v podobě karty. Kartu si na svůj profil může přidat každý uživatel, který
aplikaci autorizoval. To může provést buďto sám, tím že jí vybere v menu pod tlačítkem plus na
svém profilu (Obrázek 10.19), nebo je možné na FBML stránce využít FBJS dialog (Obrázek
10.20).
▪ 83 ▪
<a href="#" onclick="Facebook.showProfileTabDialog(); return false;">
Přidejte si záložku!</a>
Obrázek 10.19: Přidání karty na profil
Karta je po přidání zobrazena vedle stávajících karet. Po kliknutí na ní se zobrazí stránka definovaná v nastavení aplikace. Pro iFrame i FBML aplikace je interpretace stejná – vždy se jedná o
FBML stránku filtrovanou Facebookem. IFrame se do ní nedá vložit ani ručně. Naše implementace
je stránka Tab.aspx, která zobrazí smajlíky, které daný uživatel dostal nebo odeslal.
Obrázek 10.20: Dialog pro přidání karty
I tato stránka je poděděná z Facebook.Web.CanvasFBMLBasePage a je na ní použito nastavení
property RequireLogin na true. V tomto případě se použije session ve jménu vlastníka stránky, i
když na stránku přistupuje jiný uživatel. Tohoto nejde využít, pokud umožňujeme instalovat naší
aplikaci na veřejné profily – FDT za ně neumí vytvořit session!
▪ 84 ▪
Obrázek 10.21: Karta aplikace
10.7 Publisher
Posledním prvkem, který je v této aplikaci předvedený, je Publisher58. Na publisher je možné přistoupit na třech různých místech. Vždy se jmenuje jinak a má vlastní nastavení v Developers
Aplikaci. Na svém profilu, na profilu svých přátel a při psaní zpráv (personal messages). My jsme
všechny tři body nasměrovali na jednu stránku Publisher.aspx.
Ke komunikaci s publisherem dochází ve dvou krocích. Nejprve si Facebook vyžádá obsah, který
má zobrazit. Po té, když uživatel vyplní formulář a odešle ho, pošle Facebook tyto informace znovu
téže stránce a očekává od ní odpověď v podobě přílohy.
O který z požadavků se jedná, může aplikace poznat podle příchozích parametrů. Parametr
method je v prvním případě (vyžádání obsahu zobrazeného uživateli) nastaven na publisher_getInterface a v druhém na publisher_getFeedStory.
Mezi tím, z jakého zdroje pochází požadavek, se dá rozlišit porovnáním parametrů fb_sig_profile_user a fb_sig_user. Pokud fb_sig_profile_user chybí úplně, jedná se o požadavek ze
psaní zprávy. Pokud jsou schodné, jedná se o self-publish, a pokud jsou rozdílné, jedná se o
použití publisheru na profilu jiného uživatele.
Kód pro rozeznání požadavku:
58http://wiki.developers.facebook.com/index.php/Publisher
▪ 85 ▪
if (Request.Params["fb_sig_profile_user"] == Request.Params["fb_sig_user"])
selfPublish = true;
if (String.IsNullOrEmpty(Request.Params["fb_sig_profile_user"]))
messageAttachment = true;
if (method == "publisher_getInterface")
getInterface = true;
if (getInterface)
{
if (messageAttachment)
{ payload = getMessageIntreface(); }
else if (selfPublish)
{ payload = getSelfIntreface(); }
else
{ payload = getOtherIntreface(); }
}
else
{
if (messageAttachment)
{ payload = getMessageStory(); }
else if (selfPublish)
{ payload = getSelfStory(); }
else
{ payload = getOtherStory(); }
}
V projektu SmileFBML vytvoříme novou stránku Publsiher.aspx. Stránku můžeme podědit od
Facebook.Web.CanvasFBMLBasePage a vynutit si přihlášení uživatele, ale to naše implementace
nevyužívá.
Odpovědí pro Facebook je vždy JSON zakódované pole dvou pojmenovaných prvků content a
method. Method odpovídá metodě požadavku z Facebooku. Content je v obou případech odlišný.
Veškerý obsah je generován kódem, proto je obsah stránky velice strohý:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Publisher.aspx.cs"
Inherits="SmilesFBML.Publisher" %>
<asp:literal id="JSONResponse" runat="server" />
Metoda Page_load(...) nejprve inicializuje všechny proměnné. Následně rozhodne, která metoda vytvoří obsah (string payload) (viz výše), poté odpověď zakóduje a vypíše.
▪ 86 ▪
{
string payload;
string response;
string method = Request.Params["method"];
bool selfPublish = false;
bool getInterface = false;
bool messageAttachment = false;
... //kód na generování payload, viz výše
response = JSONHelper.ConvertToJSONAssociativeArray(
{ "content", payload }, { "method", method } }
);
JSONResponse.Text = response;
}
Pokud se jedná o získaní interfacu je content pole dvou prvků fbml a publishEnabled. Fbml obsahuje řetězec FBML kódu (obsah FBML stránky), které se mají vykreslit, zatímco publishEnabled rozhoduje, jestli bude tlačítko pro potvrzení aktivní. Pokud nastavíme publishEnabled
na
false
fbml
musí
obsah
obsahovat
funkci
59
Facebook.setPublishStatus(true) , která tlačítko zase zaktivní. (PublishEnabled nejde používat u zpráv!)
Obsah funkcí generující interface je velice podobný, a proto zde ukážeme pouze getSelfInterface(). Veškeré CSS musí být obsahem tohoto kódu – nedá se přilinkovat externí soubor – to
samé platí i pro javascript. Pro stylování je důležité vědět, že se náš obsah může zobrazit v několika šířkách, a proto je dobré používat fluidní layout.
Do stránky vložíme seznam smajlíku na výběr úplně stejně jako ve formuláři v naší aplikaci. Jedi ným rozdílem je onclick funkce, která povolí formulář odeslat. Námi vložené formulářové prvky
jsou v dalším volání předány jako parametry app_params[jméno_vstupního_pole]. Toho využíváme v metodách vracejících feedStory.
V případě metody publisher_getFeedStory musí content obsahovat jeden objekt attachment,
který je v naprosto stejném tvaru jako attachment pro FBJS metodu streamPublish() popsanou v
kapitole 10.3.1 Publikování s potvrzením.
59 http://wiki.developers.facebook.com/index.php/Publisher
▪ 87 ▪
private string getSelfIntreface()
{
StringBuilder fbml = new StringBuilder();
fbml.Append("<style>");
fbml.Append(" .smile-option {float: left; width: 65px; margin: 5px; “ +
“ text-align: center; }");
fbml.Append(" .smile-option img { width: 60px; height: 60px; margin: 5px; }");
fbml.Append(" .smile-option input { display: block; margin: auto; }");
fbml.Append("</style>");
fbml.Append("<p>Ukažte jak se cítíte:</p>");
StringBuilder output = new StringBuilder();
foreach (Smile smile in _smiles.GetSmlies().Values)
{
fbml.Append("<div class=\"smile-option\">");
fbml.Append(
String.Format(
"<img src=\"{0}img/{1}.gif\" title=\"{2}\" alt=\"{2}\" />",
rootURL, smile.LinkName, smile.Description));
fbml.Append(
String.Format("<input onclick=\"Facebook.setPublishStatus(true)\" "+
"type=\"radio\" name=\"smile\" value=\"{0}\"",
smile.LinkName));
fbml.Append("</div>");
}
return JSONHelper.ConvertToJSONAssociativeArray(
{ "fbml", fbml.ToString() }, { "publishEnabled", "false" } }
);
}
Tento kód zpracuje přijaté parametry při publikování feedStory. Ač jsme nevytvořili žádný formulářový prvek se jménem comment_text, stejně tento parametr dostáváme. Jedná se o text uživatelem vložený do textového vstupu dodaného Facebookem. Naše aplikace nemá možnost tento text
nijak ovlivnit, může ho pouze zpracovat.
▪ 88 ▪
private string getSelfStory()
{
String smile = Request.Params["app_params[smile]"];
// slouží pro naše zpracvání, zpět už se neodesílá
String message = Request.Params["app_params[comment_text]"];
Smile chosenSmile = _smiles.GetSmlies()[smile];
SavedSmile ss = new SavedSmile();
ss.Smile = chosenSmile;
ss.When = new DateTime();
String from = Api.Users.GetInfo().uid.ToString();
ss.From = Request.Params["fb_sig_user"];
ss.To = Request.Params["fb_sig_profile_user"];
ss.Message = message;
_storer.saveSmile(ss);
... // kód na vytvoření odpovědi
}
Attachment jako obsah odpovědi je naprosto stejný s tím popsaným v kapitole 10.3.1 Publikování s
potvrzením. Zde musí být navíc ještě obalen jako jeden objekt jménem attachment.
▪ 89 ▪
private string getSelfStory()
{
... //kód na zpracování parametrů
//Vygenerování odpovědi
//pomocná url
// Kód na generováni odpovědi
String mediaType = "image";
String mediaSrc = String.Format("{0}img/{1}.gif", rootURL,
chosenSmile.LinkName);
String mediaHref = "http://apps.facebook.com/smajlici-fbml/Send.aspx";
String media = JSONHelper.ConvertToJSONAssociativeArray(
new Dictionary<String, String> { { "type", mediaType }, { "src",
mediaSrc }, { "href", mediaHref } }
);
String atachMedia = JSONHelper.ConvertToJSONArray(new List<String>(new
String[] { media }));
String atachName = chosenSmile.Name;
String atachHref = "http://apps.facebook.com/smajlici-fbml/Send.aspx";
String atachCaption = "{*actor*} si vybral smajlíka";
String atachDescrption = chosenSmile.Description;
String attachment = JSONHelper.ConvertToJSONAssociativeArray(new
Dictionary<String, String>
{{"name",atachName},{"href", atachHref},{"caption",atachCaption},
{"description",atachDescrption},{"media",atachMedia}
}
);
// Attachment musí být obalen jako objekt jménem attachment
return JSONHelper.ConvertToJSONAssociativeArray(
{ "attachment", attachment}
}
);
}
▪ 90 ▪
11. POLEDNÍČKOVA STATISTIKA
Poledníček.cz je server shromažďující polední menu restaurací. Jeho misí je umožnit hladovým
uživatelům v době oběda vyhledat nejlepší polední menu v jejich okolí. Je to otevřený server, který
tuto službu nabízí zcela bezplatně a to i pro restaurace, které chtějí své obědy zveřejňovat.
Poledníček do budoucna plánuje uplatnit crowdsourcing – převedení práce na komunitu okolo
serveru, která by měla být motivována právě poukazy na oběd. Prvním krokem na dlouhé cestě by
mělo být spuštění Facebook aplikace s novým systémem hodnocení restaurací
Tato kapitola popisuje návrh hodnotícího systému pro restaurace, který je možné přenést jako systém hodnocení jakéhokoliv subjektu. Se znalostmi o Facebooku a FDT nabytíýi v této práci by měl
být vývojář ASP.NET aplikací tento návrh lehce implementovat.
11.1 IMDB.com statistika
Navrhovaný systém si jako vzor bere statistiku serveru www.imdb.com60. Ta zobrazuje hodnocení
kategorizované podle věku a pohlaví hlasujících. Zde můžeme využít největší sílu integrace do Facebooku. Nemusíme totiž uživatele nutit, aby u nás tyto údaje vyplňoval. Pokud je uživatel ochoten
tyto údaje zveřejnit, má je s největší pravděpodobností již vyplněny na Facebooku.
Server IMDB.com využívá pro výpočet průměrného hodnocení utajovaný vzorec, který se snaží eliminovat hlasování, které má za cíl filmu zásadně uškodit nebo pomoci. K takovému výpočtu je
ovšem potřeba velké množství statistických dat a tak se náš systém spokojí s obyčejným průměrem a mediánem
11.2 Koncept
Mnou navrhovaný systém hodnocení může využít infrastrukturu Facebooku, jako demonstrace použitelnosti FDT. Pro účely účely demonstrace hodnocení a celkové zobecnění hodnotícího systému
je integrace do výsledné aplikace velice jednoduchá. Jedinou nutnou komponentou je komponenta
pro zpracování hodnocení a systém na perzistenci. Pro účely zobecnění je hodnocený subjekt (to
co uživatelé aplikace hodnotí) dále označován jako subject a reprezentován jako řetězec, který
může sloužit jako odkaz na daný objekt. Škála hodnocení je pro návrh nepodstatná, ale zde navr hované řešení počítá s celočíselným hodnocením (s obvyklou škálou 1-5, 1-10 nebo 1-100).
60 http://www.imdb.com/ratings_explained
▪ 91 ▪
11.2.1 Oprávnění k datům
Až donedávna by mohl být problém s ukládáním dat o věku a pohlaví uživatelů do databáze mimo
Facebook. S nedávnou změnou pravidel je toto zcela v souladu s pravidly, pokud o této činnosti
uživatele informujeme. Atribut pohlaví uživatele je pro aplikaci dostupný již ve chvíli, kdy uživatel
aplikaci autorizuje. U data narození je situace komplikovanější. Podle pravidel platných do
1.6.2010 má aplikace k tomuto přístup, podle uživatelského nastavení v sekci Basic Info uživatelského nastavení (nezveřejňovat vůbec, zveřejnit pouze datum bez roku nebo zveřejnit celé datum).
V novém systému oprávnění existuje rozšířené pravidlo user_birth_date, které aplikaci umožní
přístup k celému datu, i když ho uživatel na profilu nezveřejňuje.
Ve všech případech může nastat situace, kdy danou informaci o sobě uživatel zveřejnit nechce. S
tím návrh systému počítá a vedle kategorií pohlaví „muž“ a “žena“ zavádí kategorii „nevyplněno“.
To samé platí i pro věk.
Obrázek 11.1: Potřebné třídy
11.2.2 Kontrolér
Návrh počítá s jedním kontrolérem, který obstará celou funkčnost. Tento kontrolér má za úkol uklá dat nové hodnocení, vypočítat výsledek hodnocení a podle specifikovaných parametrů vypočtené
hodnoty vrátit.
▪ 92 ▪
11.2.3 Datové struktura
Pro zachování většího soukromí uživatelů nebude systém ukládat jejich identifikátor společně s
daty o pohlaví a věku. Z tohoto důvodu je potřeba držet dvě datové struktury Vote a PersonilzedVote.
Vote ukládá data o hodnocení s informací o věku a pohlaví. Věk je ukládán jako informace přímo o
věku - ne o datu narození, protože pro analýzu je potřeba znát věk hodnotitele v době, kdy hlasoval. Věku 0 značí, že daný uživatel neměl svůj věk vyplněn. Třída reprezentující Vote by mohla
vypadat takto.
public class Vote
{
// Ohodnocený subjekt
public string Subject { get; set; }
// Pohlaví hlasujícího; hodnoty male/female/N-A
public string Sex { get; set; }
// Věk hlasujícího v době hlasování; 0 značí nevyplněný věk
public int Age { get; set; }
// Číslená hodnota hlasování
public int Value { get; set; }
}
PersonilezedVote slouží k zachování informace o tom, jestli uživatel již hodnotil (systém mu neumožní další hodnocení) a hodnotě jeho hodnocení (systém může hodnotu zobrazit nebo dělat nad
touto informací další statistiky). Třída reprezentující PersonilezedVote by mohla vypadat takto:
public class PersonilizedVote
{
// Ohodnocený subjekt
public string Subject { get; set; }
// Identifikátor hlasujícho
public string Person { get; set; }
// Hodnota hlasování
public int Value { get; set; }
}
11.2.4 Hodnocení
Hodnocení je uživateli umožněno pouze v případě, že již k danému subjektu nehlasoval. V
opačném případě je uživateli zobrazena hodnota jeho hlasování (vyhledáno podle kombinace
hodnot Person a Subject). Hlasování není možné změnit, protože nemusí být možné dohledat, který Vote se váže ke kterému PersonilezedVote.
Souběh hodnocení (například opakovaným požadavkem nebo současným potvrzením hodnocení
na více místech) by měl být řešen na datové vrstvě unikátním indexem nad kombinací atributů
▪ 93 ▪
Subject a Person u objektu PersonilizedVote. Objekt Vote by v tomto případě měl být uložen,
pouze pokud se povedlo uložit příslušný PersonilizedVote objekt.
Napojení na Facebook je v tomto případě velice jednoduché. Stránka zpracovávající hlasování
musí být poděděna od příslušné stránky FDT 61 a uživatel musí mít aplikaci autorizovanou. Získání
informací o uživateli se pak dá provést velice snadno:
// Objekt reprezentující přihlášeného uživatele
Facebook.Schema.user u = Api.Users.GetInfo();
// Datum narození obsahuje rok, právě když obsahuje dvě lomítka
string pattern = @"/.*/";
int age = 0;
if (Regex.Match(u.birthday_date, pattern).Success)
{
DateTime birthDate = DateTime.Parse(
u.birthday_date, new CultureInfo("en-US"));
DateTime now = DateTime.Today;
age = now.Year - birthDate.Year;
//Pokud ještě letos neslavil narozeniny
if (birthDate > now.AddYears(-age))
{
--age;
}
}
else { /* age = 0 zůstává - značí neznámý věk*/ }
string sex = u.sex;
if (String.IsNullOrEmpty(sex))
{
sex = "N-A";
}
Instance
přihlášeného
uživatele
obsahuje
všechny
potřebné
informace.
Property
user.birthday_date obsahuje datum narození ve formátu mm/dd/rrrr62. Jestli datum obsahuje i
rok pozná podle toho, jestli obsahuje dva znaky '/'. Po zjištění data narození stačí věk dopočítat
rozdílem let se současným datem a odečíst rok, pokud letos nenadešel den narozenin.
Pohlaví uživatele je ve formátu male/female uloženo v property user.sex. Stačí pouze ošetřit
situaci, kdy není nastaveno.
Se získanými daty není problém vytvořit doménové objekty a ty uložit.
11.2.5 Use Case – Hodnocení
Zápis tohoto postupu jako Use Case:
Aktér: Hodnotící uživatel
Preconditions: Uživatel autorizoval aplikaci a přistoupil na stránku umožňující hodnotit.
61 Popsáno v kapitole o tvorbě FBML respektive iFrame aplikací.
62 Facebook vyčlenil birthday_date pro strojové zpracování, které má stále stejný formát, vedle property
birthday, kde se může formátování lišit
▪ 94 ▪
Primární tok:
1) Aplikace zobrazí nabídku pro hodnocení
2) Uživatel vyplní svoje hodnocení a volbu potvrdí
3) Aplikace zjistí z Facebooku informace o uživateli
4) Aplikace uloží záznamy o hodnocení
5) Aplikace invaliduje výsledkovou cache
6) Aplikace oznámí úspěch hodnocení
Alternativní tok:
1.a) Pokud uživatel již hodnotil
–
aplikace pouze zobrazí informace o předchozím hodnocení
–
UC končí
4.a) Pokud se nepovede uložit záznam o hodnocení z důvodu porušení jedinečnosti
–
Aplikace neuloží ani jeden záznam
–
Aplikace zobrazí informaci o konfliktu
–
UC končí.
11.2.6 Zobrazení výsledků
Kategorizování výsledků je nejvíce inspirováno [IMDB] statistikou. Dělí dílčí hodnocení do kategorií
ve dvou rozměrech – pohlaví (muž, žena, neurčeno) a věk (kategorie <18, 18-29, 33 – 30, 45+, neurčeno). Samozřejmostí je umožnění agregovaných informací (všechna pohlaví / všechny věkové
kategorie). To je dohromady 23 dílčích a 1 63 konečný výsledek. Každý údaj se skládá ze dvou informací – počet hlasujících v dané kategorii a výsledek. Výsledné hodnocení dané kategorie není aritmetický průměr, ale průměr mezi mediánem a aritmetickým průměrem (viz [HINDLS et al. 2007]).
Výpočet těchto výsledků při každém dotazu by byl pro aplikaci zbytečně časově náročný. K výpočtu dojde, pouze pokud ještě není ve výsledkové vyrovnávací paměti, kam je po výpočtu uložen. K
zneplatnění vyrovnávací paměti dojde v případě nového hlasování.
63 Kategorie [všechna pohlaví,všechny věkové kategorie] je kompletní výsledek za všechny hlasující
▪ 95 ▪
Samotný výpočet výsledků je triviální operace výběru vhodných záznamů (podle dané kategorie)
a výpočtu mediánu a průměru jejich hodnot. O výpočet se stará jeden kontrolér, který se stará i o
ukládání nových hodnocení.
11.3 Integrace
Navrhovaný systém je myšlený jako nedílná součást Facebook aplikace, kterou server
www.polednicek.cz plánuje vytvořit. Ale je možné ho integrovat do jakékoliv Facebook aplikace.
Systém hodnocení má dva integrační body. Prvním je místo spuštění hodnocení, kde uživatel zadá
svůj názor (to by mělo býti součástí stránky s informacemi o hodnoceném subjektu – v našem pří padě detail restaurace). Tato akce spustí načtení dat o uživateli z Facebooku a uloženi hodnocení.
Druhým je výpis výsledků hodnocení, ten přebere připravené výsledky a zobrazí je v grafu uživateli.
Obrázek 11.2: Model komunikace
11.3.1 Perzistence
Perzistence dat hodnotícího systému by měla být řešena stejně jako perzistence veškerých ostat ních dat systému. To pro Poledníčka znamená ukládání do Microsoft SQL databáze pomocí nHibernate Frameworku.
▪ 96 ▪
12. ZÁVĚR (CS)
Facebook je pro vývojáře velice zajímavá platforma. Od roku 2004 se rozrostl na 400 milionů
uživatelů, kteří jsou potenciálními zákazníky aplikace na Facebooku zveřejněné. Aplikacím nabízí
svá data o sociálním grafu uživatelů a dalších entit, se kterými uživatelé mohou tvořit vazby. To přináším tvůrcům aplikací možnost uživatelům poskytovat živější a zajímavější obsah něž kdykoliv
před tím.
Velkou nevýhodou platformy je její omezená dokumentace a malé množství oficiálních knihoven
obklopených velkým množstvím malých často nefunkčních jednorázových projektů, mezi kterými
se může nový vývojář lehce ztratit.
Facebook Developer Toolkit programátorům ASP.NET aplikací přináší jednoduchý a přitom silný
nástroj na získávání dat o uživatelích, které aplikace mohou využít k nabízení zajímavého sociálně
integrovaného obsahu. Díky své podpoře od Microsoftu se FDT řadí mezi pár oficiálních knihoven,
které drží krok se stále se měnícím rozhraním Facebooku. I přes to jsou ale ukázkové aplikace,
které jsou součástí distribuce, z velké části nefunkční. Dokumentace knihovny je omezena na krát ké popisky některých funkcí. Tato práce popisuje vývoj od technické popisu, přes základní kroky
tvorby aplikací a jednoduché příklady až po některá hlubší programátorská řešení , a umožňuje tak
zájemci zcela neznalému problematiky vývoje pro Facebook nasednout do rozjetého vlaku.
Facebook Developer Toolkit obaluje veškerá volání REST API do příjemného volání metod a nabízí vhodné objekty k zapouzdření vrácených dat. Velkou výhodou použití je i transparentní autorizace uživatele nastavením jedné hodnoty.
V práci je popsána platforma a její integrační body. Práce popisuje založení aplikace (na Facebooku i ve vývojovém prostředí), její nastavení a tvorbu základní aplikační canvas stránky. Na
ukázkových aplikacích jsou ukázány výhody a nevýhody volby mezi FBML a iFrame režimem.
FBML umožňuje snadnější integraci díky velkému množství specifických tagů, ať již formátovacích
nebo se sociální funkčností, a automatický přístup k javascriptové funkcionalitě. Na druhou stranu
FBML interpretace stránky omezuje použité technologie, které mají naprostou volnost v iFrame
stránkách. U iFrame stránky je ukázáno využití Facebook JavaScript Client Library a její možnosti
doplnění sociální obsahu pomocí XFBML.
Práce ukazuje i možnosti větší integrace v podobě profilové karty a implementace Publisher interfacu, která není pro FDT nikde jinde popsána.
Poslední část práce ukazuje návrh systému na hodnocení restaurací postaveného nad Facebookem. Ukazuje snadnost tvorby aplikace funkcionálně propojené s Facebookem a lehce nastiňuje možnosti aplikací v sociálních sítích.
▪ 97 ▪
13. CONCLUSION (EN)
Facebook is really interesting platform for web developers. Since 2004 Facebook has grown to current 400 millions of users, which compose vast user base for external application published on
Facebook. Facebook provides four our applications it's data about underlying social graph of users
and other entities users can connect to. This brings opportunity for developers to create richer and
more engaging user experience then ever.
Big disadvantage of this platform is poor documentation and small number of officially supported
software libraries surrounded by number of small useless libraries.
Facebook Developer Toolkit brings to ASP.NET developers powerful yet easy to use tool for social
data manipulation, which can be used to create rich social content. Thanks to the Microsoft support
this library counts among official ones and keeps pace with the ever changing interface of Facebook. Despite this, examples provided with this library doesn't work in current environment and the
documentation contains only few lines of comment for some methods. This thesis describes application development from the very beginning through basic concepts and examples to some complicated topics. Any new coming developer can use this work as starting documentation for Facebook
application development.
Facebook Developer Toolkit wraps all REST API calls into much more convenient function calls
and really simplifies the process of user authorization. Furthermore it transform all returning data
into suitable objects.
This work describes platform integration points and their use. Creating the application from scratch
(on Facebook and in IDE) it's setting a creation of basic canvas page. Difference between FBML
and iFrame approach is shown on examples. It's easier to integrate with FBML thanks to vast
amount of tags and JavaScript functionality but iFrame allows more freedom in incorporating ex ternal technologies. It's also shown how to use Facebook JavaScript Client Library to get rich content by using XFBML.
Furthermore this work shows how integrate more with profile tab and the Publisher interface, which
is not described for FDT in any other available source.
Last part of this thesis describes restaurant rating system built upon Facebook platform. It shows
how easy it is create new applications that use Facebook and slightly discovers new possibilities
emerging from social sites.
▪ 98 ▪
VII. SEZNAM POUŽITÉ LITERATURY
• [AVERY et al. 2004] AVERY, James Microsoft ASP.NET Konfigurace a nastavení, Kapesní rádce . Brno : Computer Press a.s., 2004 200 s. ISBN 80-251-0121-5
• [CARRINGTON et al. 2005] CARRINGTON, Peter J.; SCOTT John; WASSERMAN Stanley (editors): Models and Methods in Social Network Analysis, Cambridge University Pres, 2005
• [GAMMA et al. 1994] GAMMA, Erich; HELM, Richard; JOHNSON, Ralph; VLISSIDES, John.
Design Patterns: Elements of Reusable Object-Oriented Software . Addison-Wesley Professional, 1994. 416 s. ISBN 0201633612
• [HINDLS et al. 2007] HINDLS, Rychard; HRONOVÁ, Stanislava; SEGER, Jan; FISCHER, Jakub. Statistika pro ekonomy, Professional publishing, 2007. ISBN 9788086946436
• [MAVER et al. 2009] MAVER, John; POPP, Cappy. Essential Facebook Development . Boston :
Pearson Education, Inc., 2009. 455 s. ISBN 0-321-63798-4
• [MONTGOMERY et al. 1991] MONTGOMERY, James D. Social Networks and Labor-Market
Outcomes: Toward an Economic Analysis, The American Economic Review 81 (5), 1991.
(http://www.jstor.org/stable/2006929)
• [NEWMAN et al. 2001] NEWMAN, M.E.J.; GIRVAN, M., Community structure in social and biological networks, 2001
• [ROBINSON et al. 2004] ROBINSON, Simon, et al. Professional C#. Indianapolis, Indiana : Wiley Publishing, Inc., 2004. 1356 s. ISBN 0-7645-5759-9.
• [TRAVERS et al. 1969] TRAVERS, Jeffrey; MILGRAM, Stanley. 1969. "An Experimental Study
of the Small World Problem." Sociometry, Vol. 32, No. 4, pp. 425-443.
• [WASSERMAN et.al. 1994] WASSERMAN, Stanley; FAUST, Katherine. Social network analysis:
methods and applications, Cambridge University Press, 1994 ISBN 0521387078
• [WATS et.al. 1998] WATS, DJ, SH Strogatz. Collective dynamics of 'small-world' networks, Nature, 1998
▪ 99 ▪
• [ALEXA] Alexa Internet http://www.alexa.com/topsites
• [FB-BLG] Facebook blog: http://developers.facebook.com/blog/
• [FB-DOC] Facebook dokumentace: http://developers.facebook.com/docs/
• [FB-HLP] Facebook help: http://www.facebook.com/help/
• [FB-STA] Facebook statistiky: http://www.facebook.com/press/info.php?statistics
• [FB-WIK] Facebook wiki: http://wiki.developers.facebook.com/
• [FDT-CP] Facebook SDK codeplex: http://facebooktoolkit.codeplex.com/
• [FDT-HP] Facebook SDK homepage: www.microsoft.com/facebooksdk
• [IMDB] The Internet Movie Databse:http://www.imdb.com/
Webové stránky jsou, jako zdroj použity k datu 4.5.2010
▪ 100 ▪
VIII. SEZNAM POUŽITÝCH SYMBOLŮ A ZKRATEK
Zkratka
Popisek
FB
Facebook
FDT
Facebook developer toolkit, nebo také Microsoft Facebook Toolkit
Karta
Tab – rozšiřující prvek profilu
Záložka
Bookmark – odkaz na aplikaci
JSCL
JavaScript Client Library
FBML
Facebook Markup Language
JS
JavaScript
F8
F8 konference 2010 pořádaná Facebookem 21.-22.4. 2010
Tabulka VIII.1: Seznam použitých symbolů a zkratek
▪ 101 ▪
IX. SEZNAM OBRÁZKŮ
Obrázek 1.1: změna jazyka Facebooku..................................................................................................................... 13
Obrázek 5.1: Publisher............................................................................................................................................... 27
Obrázek 5.2: Feed story............................................................................................................................................. 28
Obrázek 9.1: Aplikace Developers............................................................................................................................. 36
Obrázek 9.2: Nastavení - basic.................................................................................................................................. 37
Obrázek 9.3: Nastavení - authentication.................................................................................................................... 38
Obrázek 9.4: Nastavení - profiles............................................................................................................................... 39
Obrázek 9.5: Umístění odkazu na Edit URL v nastavení stránky............................................................................... 40
Obrázek 9.6: Nastavení - canvas............................................................................................................................... 40
Obrázek 9.7: Nastavení - connect.............................................................................................................................. 41
Obrázek 9.8: Nastavení - widgets.............................................................................................................................. 42
Obrázek 9.9: Nastavení - advanced........................................................................................................................... 43
Obrázek 9.10: Nastavení - migration.......................................................................................................................... 44
Obrázek 9.11: Založení projektu................................................................................................................................ 47
Obrázek 9.12: Přidání reference na projekt................................................................................................................ 48
Obrázek 9.13: Výsledný stav...................................................................................................................................... 48
Obrázek 9.14: Nastavení portu.................................................................................................................................. 49
Obrázek 9.15: TCPmon............................................................................................................................................. 49
Obrázek 10.1: Hello Facebook!.................................................................................................................................. 51
Obrázek 10.2: Základní FBML tagy: dashboard, tabs, header................................................................................... 52
Obrázek 10.3: Tlačítko pro přidání záložky................................................................................................................ 53
Obrázek 10.4: Přehled smajlíků................................................................................................................................. 57
Obrázek 10.5: streamPublish() dialog........................................................................................................................ 59
Obrázek 10.6: Status update přes aplikaci................................................................................................................. 59
Obrázek 10.7: Parametry přidané do formuláře (zobrazeno pomocí Firebugu)..........................................................61
Obrázek 10.8: Media attachment............................................................................................................................... 64
Obrázek 10.9: Action link........................................................................................................................................... 64
Obrázek 10.10: Dialog pro publikování s přílohou...................................................................................................... 65
Obrázek 10.11: Message dialog................................................................................................................................. 65
Obrázek 10.12: Dialog pro rozšířená práva................................................................................................................ 67
Obrázek 10.13: <fb:editor /> formulář ........................................................................................................................ 68
Obrázek 10.14: FBML zprávy..................................................................................................................................... 71
Obrázek 10.15:.......................................................................................................................................................... 75
Obrázek 10.16: Dialog přidání záložky....................................................................................................................... 80
Obrázek 10.17: Čítač................................................................................................................................................. 81
Obrázek 10.18: Novinky v dashboardu...................................................................................................................... 83
Obrázek 10.19: Přidání karty na profil........................................................................................................................ 84
Obrázek 10.20: Dialog pro přidání karty..................................................................................................................... 84
Obrázek 10.21: Karta aplikace................................................................................................................................... 85
Obrázek 11.1: Potřebné třídy..................................................................................................................................... 92
Obrázek 11.2: Model komunikace.............................................................................................................................. 96
Obrázek b.1: Model FBML komunikace, zdroj: http://wiki.developers.facebook.com/ ..............................................106
Obrázek b.2: Model iFrame komunikace, zdroj: http://wiki.developers.facebook.com/ ............................................107
Obrázek c.1: Cross domain komunikace.................................................................................................................. 109
Obrázek d.1: Domácí stránka na FAcebooku........................................................................................................... 110
Obrázek d.2: Facebook profile................................................................................................................................. 111
▪ 102 ▪
X. SEZNAM TABULEK
Tabulka 8.1: Povolení pro publikaci................................................................................................. 34
Tabulka 8.2: Povolení pro práci s daty............................................................................................. 35
Tabulka 10.1: tag fb:tab-item........................................................................................................... 52
Tabulka 10.2: Facebook.streamPublish()........................................................................................ 60
Tabulka 10.3: tag fb:friend-selector ................................................................................................ 61
Tabulka 10.4: Api.StreamPublish();................................................................................................. 71
Tabulka VIII.1: Seznam použitých symbolů a zkratek....................................................................101
▪ 103 ▪
XI. SEZNAM PŘÍLOH
a) Přiložený software..................................................................................................................... 105
b) Modely komunikace................................................................................................................... 106
c) Cross domain communication................................................................................................... 108
d) Anatomie Facebooku................................................................................................................. 110
▪ 104 ▪
a) Přiložený software
Na přiloženém CD najdete:
•
•
FDT verzi 3.1 BETA:
◦
zdrojové kódy
◦
dokumentace
◦
binární .dll
◦
Licence: Microsoft Permissive License (Ms-PL)
TCPMon
◦
•
Intelligencia.UrlRewriter
◦
•
Licence: BSD License
Licence: slovy autora: „very permissive MIT-style licence“
Ukázkové projekty jako součást VS solution Facebook
◦
SmilesFBML
◦
SmilesIFrame
◦
Obrázky jsou silk ikony z dílny autora Marka Jamese pod Creative Commons Attribution 2.5 License
▪
http://www.famfamfam.com/lab/icons/silk/
▪ 105 ▪
b) Modely komunikace
Rozdíl mezi FBML a iFrame stránkou není jenom v tom, jak se zobrazuje, ale i v tom jak se stránka
načítá.
Obrázek b.1: Model FBML komunikace, zdroj: http://wiki.developers.facebook.com/
Když chce uživatel zobrazit FBML canvas stránku naší aplikace, dojde k vyslání požadavku z jeho
browseru (1) na server Facebooku. Ten udělá požadavek na náš server (2) (podle Canvas Callback URL). Během zpracování stránky naším serverem může dojít k požadavkům na REST API
(3), které okamžitě vrací potřebná data (4). Po zpracování požadavku naším serverem je stránka
vrácena Facebooku, na jeho serverech dojde k přefiltrování FBML obsahu a celá stránka je odeslána uživateli.
▪ 106 ▪
Obrázek b.2: Model iFrame komunikace, zdroj: http://wiki.developers.facebook.com/
Pokud dojde k požadavku na iFrame cavas stránku (1), Facebook odpoví stránkou, která v sobě
obsahuje iFrame s URL nasměrovanou na naší Canvas Callback URL s přidanými parametry. Ppté
co browser uživatele zpracuje odpověď od Facebooku (2), udělá požadavek na náš server (3). Během zpracování stránky dochází k volání REST API (4 a 5) stejně jako u FBML stránky. Po zpra cování dojde k odpovědi uživateli (6). Pokud stránka obsahuje XHTML (a tedy JSCL), dojde po načtení stránky ještě k volání Facebook JS API ze strany uživatele (7). K úplnému vykreslení stránky
dojde až po zpracování odpovědí těchto volání (8)
Pokud nyní není odkaz z naší stránky cílen na rodičovský frame, dojde u další stránky rovnou k vo lání naší stránky (začíná se krokem 3). Pokud odkazy směřujeme na adresu Facebooku s parametrem target=_top, dojde i př dalších přechodech k volání Facebooku (kroky 1 a 2)
▪ 107 ▪
c) Cross domain communication
Moderní webové prohlížeče omezují JavaScript z bezpečnostních důvodů na komunikaci pouze s
doménou, ze které pochází stránka. Facebook a jeho JavaScript Client Library toto omezení ob chází zapojením iframů64. Celé řešení je postavené na schopnosti framů komunikovat v rámci celého DOMu, pokud jsou ze stejné domény.
Pro funkčnost celého systému je nezbytné, aby na doméně naší stránky existoval soubor xd_receiver.htm, jehož obsah je neměnný:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2"
type="text/javascript"></script>
</body>
</html>
64 Popis cross domain komunikace přebrán z [MAVER et al. 2009] s. 316-317
▪ 108 ▪
Obrázek c.1: Cross domain komunikace
1) Při inicializaci stránky a JSCL je do stránky na naší doméně vložen iFrame API Server Iframe s URL nastavenou na stránku Facebooku. Ten do sebe vloží další iFrame Receiver IF rame s URL nastavenou na xd_receiver na doméně aplikace.
2) Při volání metody na REST API dojde k vytvoření dalšího iFrame v hlavním framu aplikace.
Tento API Call Iframe je nasměrován na URL www.facebook.com/client_restserver.php a
samotné volání a parametry metody jsou vloženy jako bookmark (záložka) – za znak # v
URL.
3) Výsledek volání poté API Call IFrame předá API Server IFramu – to je možné, protože jsou
oba framy na stejné doméně.
4) API Server IFrame předá obdržený výsledek do svého vnořeného framu (Receiver Iframe)
tak, že změní jeho adresu, tak aby odpověď byla jako bookmark – za znakem # v URL.
5) Na to zareaguje JavaScript v xd_receiveru a výsledek volání metody předá do hlavního
framu aplikace (opět možné, protože jsou oba framy ze stejné domény).
▪ 109 ▪
d) Anatomie Facebooku
V textu práce se často mluví o jednotlivých umístěních v rámci Facebooku. Tato příloha na obrázcích vysvětluje, jak která stránka vypadá a co se jak nazývá. Základem Facebooku je domovská
stránka Home.
Obrázek d.1: Domácí stránka na FAcebooku
Na domovské stránce (Home) se nachází velké množství informací a odkazů. V centru stránky je
stream, ve kterém se vypisují jednotlivé story. Uživatel má možnost volit mezi dvěma pohledy (přepíná se nad streamem) Top news a Most recent. Přímo nad streamem je Publisher – pole, kam
může uživatel psát své statusy/zprávy. Hned pod ním, jsou ikony reprezentující aplikace s integrací
do Publisheru. Vpravo nahoře se shromažďují pozvánky a požadavky. V levém sloupci jsou odka zy na Application dashboard a záložky aplikací. Vlevo nahoře se dá přejít k soukromým zprávám.
Story ve steramu mohou obsahovat pouze text, nebo také přílohu včetně multimediálního obsahu,
jako je například obrázek.
▪ 110 ▪
Obrázek d.2: Facebook profile
Druhou důležitou stránkou Facebooku je uživatelský profil. Ten se skládá z karet – vyskládaných v
horní části, kliknutím na kartu se změní obsah hlavní části. Defaultní karty: Wall, Info, Photos a Boxes není možné smazat.
Jako první se vždy zobrazí obsah karty Wall - Zeď, ta obsahuje uživatelem publikované story, nedávnou aktivitu (tu může generovat pouze Facebook) a story, které na zeď uživatelovi napíší jeho
přátelé. V horní části zdi je publisher fungující stejně jako na domácí stránce. Pokud je zvolena karta Wall nebo Info je zobrazen levý sloupec s informacemi o uživateli a až třemi boxy od aplikací.
(Na obrázku je sloupec zkrácen a ukázán box aplikace Svátky)
▪ 111 ▪

Vývoj aplikací pro Facebook v ASP.NET

Transkript

Podobné dokumenty

Bakalarska prace - Unicorn College

jazyk elektronické komunikace

Zápis ze semináře profesorky - 1. škola tradiční čínské medicíny

Text práce - Katedra geoinformatiky

1 Skype - ZŠ Jandusů

DATABÁZOVÉ A INFORMAˇCNÍ SYSTÉMY