Aplikace pro Facebook od základů - díl I.

V dalších dílech popíšeme autorizaci uživatele v aplikaci a rozebereme si nejčastější problémy při vývoji. Nezapomeneme se zmínit o existujících nástrojích pro ladění a testování. Na základě připomínek vás, čtenářů, pak budeme volit témata dalších dílů. Nuže, pusťme se do práce.

Co je Facebook aplikace?

Aplikace na Facebooku není nic jiného, než webová stránka, která prostřednictvím API komunikuje s Facebookem a integruje nebo rozšiřuje jeho funkce. V současné době se můžeme setkat s několika druhy Facebook aplikací:

• Aplikace běžící v prostředí Facebooku (aplikace je poté dostupná na apps.facebook.com)
• Aplikace běžící v rámci Facebook stránky (aplikace v záložce)
• Webové stránky propojené s Facebookem
• Mobilní aplikace

V našem seriálu se budeme věnovat prvním třem zmiňovaným, mobilní aplikace tedy ponecháme stranou. Později zjistíme, že můžeme napsat aplikaci, která zároveň poběží v prostředí Facebooku, na FB stránce a bude fungovat i jako samostatná webová služba. V současnosti jsou webové stránky (aplikace) do Facebooku integrovány pomocí IFRAMu. To reálně znamená, že veškerý kód, obrázky, databáze apod. jsou u vás na serveru. Pro úplnost je vhodné dodat, že v minulosti Facebook podporoval ještě alternativní metodu, nejčastěji nazývanou FBML Canvas, která dnes již není podporovaná. V minulosti byla jako FBML Canvas označována alternativní metoda zobrazení aplikace k IFRAME. Dnes je jako Canvas (bez FBML) označováno „kreslící plátno“ aplikace zobrazené pomocí IFRAMu. 

Dostupné API a knihovny

Pro obousměrnou komunikaci s Facebookem (např. získání seznamu přátel anebo odeslání streamu na zeď uživatele) se v současné době využívá Graph API. Funguje tak, že navštívíte (např. pomocí PHP funkce file_get_conten­ts()) URL, která vrátí požadovaná data ve formátu JSON. Samotná komunikace s Graph API je tedy nezávislá na použité technologii.

Graph API doplňuje FQL (Facebook Query Language), který umožňuje dotazovat se na data, poskytovaná Graph API, „SQL-like“ syntaxí. FQL ovšem není jen alternativou, umožňuje lepší a v pozitivním smyslu složitější selekci poskytovaných dat (už jen klauzule WHERE je něco, co v Graph API těžko nasimulujete).

Facebook vám samozřejmě nevydá všechna svá data jen tak a pro získání neveřejných dat a pro další úkony jako např. posílání tzv. wallpostů potřebujete svoji aplikaci u uživatele autorizovat, případně si od něj vyžádat speciální práva (v dokumentaci naleznete pod Extended_permis­sions). Autorizační proces je poměrně komplikovaný, problémový a ze strany Facebooku neexistuje jasně narýsovaná a zdokumentovaná cesta. Věnovat se mu tedy budeme podrobně v některém z dalších dílů. V současné době nám stačí vědět, že úspěšnou autorizací získáme tzv. access_token, řetězec, který připojíme k dotazům na Graph API, pokud chceme získat data veřejně nedostupná.

Nadstavbou nad API jsou Software development Kits (SDK) poskytované oficiálně Facebookem, které nám usnadňují zmiňovanou autorizaci a práci s API, jejich použití ale není nutné. V současné době Facebook oficiálně poskytuje SDK pro JavaScript, PHP, iOS a Android. První dva budeme hojně používat později v seriálu v našich příkladech. Na internetu však lze dohledat SDK i pro další jazyky (např. pro Python). S hledáním doporučujeme začít na https://github­.com/facebook/.

Hello world aplikace na Facebooku

Registrace aplikace na Facebooku

Nyní máme základní představu o tom, jak Facebook aplikace fungují a jaké nástroje pro jejich vytváření potřebujeme. Pojďme si nyní vytvořit na Facebooku vývojářský účet a zaregistrovat první Facebook aplikaci, bez toho se do samotného vývoje těžko pustíme.

Navštivte https://facebo­ok.com/develo­pers.

Pokud spustíte Facebook Developer aplikaci prvně, budete vyzváni k ověření svého účtu pomocí mobilního telefonu. Po aktivaci přejděte na https://develo­pers.facebook­.com/apps a zvolte „Vytvořit novou aplikaci“ (viz obrázek).

Vyplňte libovolný název a jazykovou variantu aplikace. Zvolený jazyk bude poté automaticky použit pro veškeré dialogy, chybové hlášky apod.

Nyní byste měli vidět všechny rozšířené volby v aplikaci. Mnohé teď přeskočíme a až bude potřeba cokoliv změnit, vrátíme se na tuto obrazovku později. Pro základní funkcionalitu aplikace je potřeba vyplnit App Namespace (aplikace bude dostupná na http://apps.fa­cebook.com/app-namespace) a po rozkliknutí „App on Facebook“ také Canvas URL. Canvas URL je adresa aplikace na vašem serveru (může být i localhost), v našem případě tedy vyplníme http://localhos­t/zdrojak-hello-world.

Nyní přejděte v levém menu na sekci „Advanced“. V App Type by měla být ve výchozím stavu aktivovaná volba Web, doporučujeme také aktivovat Sandbox mode – aplikace bude poté dostupná pouze pro vývojáře, které zvolíte.

Sekci Migrations ponechte vyplněnou od Facebooku.

Poslední za zmínku stojí sekce Canvas settings – Zde doporučujeme ponechat výchozí hodnoty, tzn. šířku aplikace 760px (pozor, aplikace běžící v záložce má pouze 520px) a výšku automaticky podle výšky obsahu, tedy „Fluid“.

Hello world a napojení aplikace na PHP knihovnu

Pokud nyní do prohlížeče zadáte adresu http://apps.fa­cebook.com/app-namespace zobrazí se obsah vaší Canvas URL. V příslušném adresáři na svém serveru vytvořte index.php s jednoduchým „echo“ pro ověření, že vše funguje, jak má.

Nyní z Githubu stáhněte tři soubory Facebook knihovny. Jedná se o:

• base_facebook.php, facebook.php – soubory knihovny
• fb_ca_chain_bun­dle.crt – certifikát pro podepisování požadavků API

Není pořádné Facebook aplikace bez alespoň jednoduché komunikace s Facebookem. Upravme index.php do následující podoby (vysvětlení přímo v kódu):

<?php
// Údaje z https://www.facebook.com/developers/
define('APP_ID', 'xxx');
define('API_KEY', 'xxx');
define('APP_SECRET', 'xxx');
define('CANVAS_PAGE', 'http://apps.facebook.com/app-namespace/');
define('CANVAS_URL', 'http://localhost/zdrojak-hello-world/');

// Facebook knihovna z Github.com
require_once 'libs/facebook.php';

// Vytvoříme instanci Facebook knihovny
$facebook = new Facebook( array('appId' => APP_ID, 'secret' => APP_SECRET, ));

// Získáme ID přihlášeného uživatele
$user = $facebook->getUser();

// Je uživatel přihlášený na Facebooku? resp. máme session?
if(isset($user)) {
    try {
        // Zkusíme získat jeho profilová data (na uživatelova data nepotřebujeme extended_permission)
        $user_profile = $facebook->api('/me');
    } catch (FacebookApiException $e) {
        // Vypíšeme text Exception
        echo "<strong>" . $e->getMessage() . "</strong>";
        $user = NULL;
    }
}

// Uživatel se odhlásil, odstranil aplikaci...
if(!is_null($user)) {
    // Získáme logout url
    $logoutUrl = $facebook->getLogoutUrl();
} else {
    // Získáme přihlašovací url
    $loginUrl = $facebook->getLoginUrl();
}
?>

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Zdroják.cz - Hello world aplikace</title>
</head>

<body>
  <p>
    Ahoj
    <strong><?php if(!is_null($user)) echo $user_profile["name"]; ?></strong>, jak je? :-)
  </p>

  <h2>Přihlásit / odhlásit?</h2>
  <p>
    <?php if ($user): ?>
    <a href="<?php echo $logoutUrl;?>">Odhlásit se z Facebooku!</a>
    <?php else:?>
    <a href="<?php echo $loginUrl;?>">Přihlásit se na Facebook!</a>
    <?php endif?>
  </p>
</body>
</html>

Zdrojový kód ke stažení z Pastebin

Závěr

Gratulujeme k vaší první aplikaci na Facebooku. Dnes jsme vytvořili nejjednodušší možnou variantu kódu s jednoduchým ověřením, zda je či není uživatel přihlášený na Facebooku. Další články věnující se specifickým problémům při vývoji Facebook aplikací naleznete na našem webu aplikace-facebook.cz. Dotazy a problémy netýkající se přímo tohoto článku pak můžeme řešit na přidruženém fóru.

V dalších dílech se podíváme podrobněji na práci s Graph API a na autorizaci aplikace.