Načítání Facebook postů v Nette Framework

Na jednom projektu jsem narazil na potřebu zobrazovat posty z Facebooku na klientově stránce. Inu začal jsem psát prototyp jak bych danou věc řešil. Prototyp jsem "spíchnul" za hodinku, ale bylo to uděláno tak trošku na hulváta. Tak jsem si řekl že to postupně přepíšu tak jak by to třeba napsal nějaký zkušený programátor s Nette frameworkem. Na http://srazy.info/nettefwpivo jsem danou věc přednesl a Nette guruové mi přislíbili odbornější konzultace.

Článek není psán jako how-to (na takovém článku zapracuji) Je psán jak jsem postupoval, co jsem napsal, následně zavrhul nebo přepsal. Proto se nedivte, že tu třeba pracuji s Nette Cache, kterou v zápětí odstraním. Při čtení je dobré koukat na konkrétní commity a článek brát jako "přemýšlení nahlas" k těmto commitům.

Výsledkem je aplikace co naimportuje posty z dané Facebook zdi do databáze, v administraci si pak zvolíte, které posty chcete na své stránce zobrazit.

Techniky co se používají: Nette\Caching, Facebook SDK, Kdyby\Facebook, Nette\Database, Custom Latte Macro, Snippets.

Celý projekt je k naleznutí na Githubu https://github.com/chemix/Nette-Facebook-Reader

Vytvoření projektu z Nette/Sandbox

Začneme čistým projektem vycházející z Nette/Sandbox

composer create-project nette/sandbox Nette-Facebook-Reader

cd Nette-Facebook-Reader

zápis do "log" a "temp" folderu

chmod -R a+rw temp log

commit: Init from Nette Sandbox

Pročištění pískoviště

vyčistíme homepage šablonu a připravíme si nový Import Presenter se šablonou.

/app/templates/Import/default.latte

{block #content}
    <h1>Import</h1>

a /app/presenters/ImportPresenter.php

namespace App\Presenters;

use Nette,
    App\Model;

class ImportPresenter extends BasePresenter
{

    public function renderDefault()
    {

    }

}

commit: clear homepage template and presenter

commit: added blank Import Presenter

Přidáme trošku Facebooku

Přidáme si do composer.json závislost na Facebook SDK

    "require": {
        "php": ">= 5.3.7",
        "nette/nette": "~2.2.0",
        "dg/adminer-custom": "~1.0",
        "facebook/php-sdk-v4" : "4.0.*"
    },

a stahneme si ho pomoci composer update.

Přihlásime se na Facebook Developers http://developers.facebook.com a vytvoříme novou aplikaci.

[ /data/articles/1/facebook-developer.png .(Facebook Developer) ]

Stačí nám vyplnit pouze její název

[ /data/articles/1/create-new-app.png .(Create new App) ]

a zjistíme si Facebook App ID a App Secret

[ /data/articles/1/facebook-app-ids.png .(Facebook App IDs) ]

Na hulváta si zkusíme načíst data skrze Facebook Graph Api. V našem Import Presenteru přidáme do hlavičky

use Facebook\FacebookRequest;
use Facebook\FacebookRequestException;
use Facebook\FacebookSession;
use Tracy\Dumper;

a metodu přepíšeme podle ukázky z dokumentace k PHP Facebook SDK

public function renderDefault()
{
    FacebookSession::setDefaultApplication('YOUR_APP_ID', 'YOUR_APP_SECRET');

    $session = FacebookSession::newAppSession();
    $data = array();

    try {
        $request = new FacebookRequest($session, 'GET', '/nettefw/feed');
        $response = $request->execute();
        $posts = $response->getGraphObject()->asArray();

        $data = $posts['data'];
    } catch (FacebookRequestException $ex) {
        // Session not valid, Graph API returned an exception with the reason.
        echo $ex->getMessage();
        exit();
    } catch (\Exception $ex) {
        // Graph API returned info, but it may mismatch the current app or have expired.
        echo $ex->getMessage();
        exit();
    }

    Dumper::dump($data);
}

po zkouknutí výstupu bychom měli vidět dump pole o 25 položkách

[ /data/articles/1/dump-array-25.png .(dump array) ]

Malinko si zjednodušíme ošetření chyb jen na ukončení aplikace.

} catch (\Exception $ex) {
    throw $ex;
    $this->terminate();
}

commit: add dependence on Facebook SDK to composer and small typo updates

commit: load data from Facebook - dirty version

commit: only one catch and application->terminate()

Cache, ať při vývoji nečekáme

Přidáme si možnost cache pro požadavek. (Hlavně si tím urychlíme další rozšiřování, přeci jen čekat 10 sec na každý refresh mě nebaví).

O cachovaní se nám postara Nette Framework a jeho Nette\Caching\Cache;

Přidáme do use sekce

use Nette\Caching\Cache;

Abychom mohli vytvořit instanci třídy Cache tak jí musíme předat nějaký cache storage kam si bude ukládat data. Viz API dokumentace Nette\Caching\Cache

A ten si necháme poslat (injectnout) do třídy pomoci Nette Dependenci Injection. Jediné co musíme udělat je definovat public property $cacheStorage typu \Nette\Caching\IStorage a pomocí anotace @inject nám framework zařídí vše potřebné.

class ImportPresenter extends BasePresenter
{
    /**
     * @var \Nette\Caching\IStorage @inject
     */
    public $cacheStorage;

hup, a v našich metodách se ke storage dostaneme snadno pomocí $this->cacheStorage

$cache = new Cache($this->cacheStorage, 'facebookWall');
$data = $cache->load("stories");

Více o cache si nastudujete v dokumentaci Caching.

V našem případě pokud se nám nepodaří načíst data z cache (a to se nám napoprvé určitě nepovede) tak si je načteme z Facebooku a do té cache si je uložíme:

$cache->save("stories", $data, array(
    Cache::EXPIRATION => '+30 minutes',
    Cache::SLIDING => TRUE
));

Výsledkem je

public function renderDefault()
{
    FacebookSession::setDefaultApplication('YOUR_APP_ID', 'YOUR_APP_SECRET');

    $session = FacebookSession::newAppSession();
    $cache = new Cache($this->cacheStorage, 'facebookWall');
    $data = $cache->load("stories");

    if (empty($data)) {
        try {
            $request = new FacebookRequest($session, 'GET', '/nettefw/feed');
            $response = $request->execute();
            $posts = $response->getGraphObject()->asArray();

            $data = $posts['data'];
            $cache->save("stories", $data, array(
                Cache::EXPIRATION => '+30 minutes',
                Cache::SLIDING => TRUE
            ));

        } catch (\Exception $ex) {
            throw $ex;
            $this->terminate();
        }
    }

    Dumper::dump($data);
}

Nyní by nám druhý request měl trvat výrazně kratší dobu.

[ /data/articles/1/with-cache.png .(with cache) ]

commit: added cache for request

Ukládáme posty do databáze

Dalším krokem je uložit si získána data do databáze. Pro práci s databází použijeme třídu Nette\Database. Vytvoříme si databázi a uživatele (díky klonování Nette Sandbox máme výborný nástroj Adminer přímo u projektu /adminer/).

Uživatel bude facebookwall a s heslem 'tajneheslo' bude mít přístup ke všem databázím začínající facebookwall_ v našem vývojovém případě konkrétně k databázi facebookwall_devel

CREATE DATABASE `facebookwall_devel` COLLATE 'utf8_czech_ci';
CREATE USER 'facebookwall'@'localhost' IDENTIFIED BY 'tajneheslo';
GRANT USAGE ON * . * TO 'facebookwall'@'localhost' IDENTIFIED BY 'tajneheslo' WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0 ;
GRANT ALL PRIVILEGES ON `facebookwall\_%` . * TO 'facebookwall'@'localhost';
FLUSH PRIVILEGES;

a vytvoříme si tabulku kam si posty budeme ukládat.

CREATE TABLE `facebook_wallposts` (
  `id` varchar(100) CHARACTER SET ascii NOT NULL,
  `created_time` datetime NOT NULL,
  `updated_time` datetime NOT NULL,
  `type` varchar(100) CHARACTER SET ascii NOT NULL,
  `status_type` varchar(250) COLLATE utf8_czech_ci NOT NULL,
  `name` varchar(250) COLLATE utf8_czech_ci NOT NULL,
  `link` varchar(250) COLLATE utf8_czech_ci NOT NULL,
  `message` text COLLATE utf8_czech_ci NOT NULL,
  `caption` text COLLATE utf8_czech_ci NOT NULL,
  `picture` varbinary(250) NOT NULL,
  `status` char(1) COLLATE utf8_czech_ci NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`),
  KEY `type` (`type`),
  KEY `created_time` (`created_time`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_czech_ci;

V presenteru si řekneme ať nám framework předá objekt Nette\Database\Context

/**
 * @var \Nette\Database\Context @inject
 */
public $database;

v konfiguračním souboru /app/config/config.local.neon si doplňíme připojení k databázi.

nette:
    database:
        dsn: 'mysql:host=127.0.0.1;dbname=facebookwall_devel'
        user: facebookwall
        password: tajneheslo
        options:
            lazy: yes

Pozor na zápis, liší se od Dibi a občas mě to dokáže zabrzdit ;-)

V presenteru si pak na hulváta doplníme ukládání jednotlivých řádku, připadne po opakovaném importu aktualizaci postit

// save data to database
if (is_array($data) && !empty($data)) {
    foreach ($data as $rowPost) {

        $post = array(
            'id' => $rowPost->id,
            'type' => $rowPost->type,
            'created_time' => $rowPost->created_time,
            'updated_time' => $rowPost->updated_time,
        );

        if (isset($rowPost->name)) {
            $post['name'] = $rowPost->name;
        }
        if (isset($rowPost->link)) {
            $post['link'] = $rowPost->link;
        }
        if (isset($rowPost->status_type)) {
            $post['status_type'] = $rowPost->status_type;
        }
        if (isset($rowPost->message)) {
            $post['message'] = $rowPost->message;
        }
        if (isset($rowPost->caption)) {
            $post['caption'] = $rowPost->caption;
        }
        if (isset($rowPost->picture)) {
            $post['picture'] = $rowPost->picture;
        }

        // post 'status' use story, we need message
        if ($rowPost->type == 'status') {
            if (isset($rowPost->story)) {
                $post['message'] = $rowPost->story;
            }
        }

        try {
            $this->database->table('facebook_wallposts')->insert($post);
        } catch (\PDOException $e) {
            if ($e->getCode() == '23000') {
                $this->database->table('facebook_wallposts')->where('id', $rowPost->id)->update($post);
            } else {
                throw $e;
            }
        }
    }
}

můžeme se přesvědčit, že se nám vše uložilo

[ /data/articles/1/save-to-database.png .(save posts to database) ]

commit: save posts to database

Zobrazení postů z importu

Předáme si výpis práve přidaných postů do šablony a tam si je vypíšeme.

// send data to template
$this->template->wallPosts = $data;

a

{foreach $wallPosts as $post}
    type: <strong>{$post->type}</strong> <br>
    <small>
        id: {$post->id}<br>
        created_time: {$post->created_time} <br>
        updated_time: {$post->updated_time} <br>
    </small>

    {ifset $post->name}
        name: <h1>{$post->name}</h1>
    {/ifset}

    {ifset $post->status_type}
        status_type: {$post->status_type} <br>
    {/ifset}

    {ifset $post->message}
        message: {$post->message} <br>
    {/ifset}

    {ifset $post->picture}
        piscture: {$post->picture} <br>
        <img src="{$post->picture}" />
    {/ifset}

    {ifset $post->link}
        link: <a href="{$post->link}">{$post->link}</a> <br>
    {/ifset}

    {ifset $post->caption}
        caption: {$post->caption} <br>
    {/ifset}
    <hr>
{/foreach}

commit: show post in template

Zobrazení postů na homepage

V HomepagePresenteru si načteme posty co jsme načetly importem. Jelikož, ale nechcem zobrazovat všechny posty nastavíme si u některých v databázi status na 1 a budem zobrazovat pouze tyto.

public function renderDefault()
{
    $facebookWallPosts = $this->database->table('facebook_wallposts')->where('status','1')->limit(5)->fetchAll();
    $this->template->wallPosts = $facebookWallPosts;
}

a nesmíme zapomenout na přidání public property $database;

/**
 * @var \Nette\Database\Context @inject
 */
public $database;

šablona pak může vypadat nějak takto:

<div n:if="$wallPosts" class="facebook-posts">
    <div n:foreach="$wallPosts as $post" class="post {$post->type}">
        <h3 n:if="$post->name">{$post->name}</h3>
        <img n:if="$post->picture" src="{$post->picture}" />

        {if $post->message}
            <p>
                {$post->message|truncate:250:'...'}
                <a n:if="$post->link" href="{$post->link}">více</a>
            </p>
        {else}
            {if $post->link}
                <a href="{$post->link}">více</a>
            {else}
                <a href="http://www.facebook.com/nettefw">více</a>
            {/if}
        {/if}
    </div>
</div>

commit: show posts on homepage

tuto verzi najdete pod tagem :prototype

Zapouzdření do modelu

Pokud se nad úkolem zamyslíme tak je to taková věc co by se nám mohla hodit i na jiném projektu. Připravíme si tedy modelovou vrstvu. Do ktere přepíšeme náš prototyp.

Všiměte si jak si v konstruktoru řekneme o Nette\Database\Context

app/model/FacebookWallpost.php

namespace App\Model;

use Nette\Database\Context;
use Nette\Object;

class FacebookWallposts extends Object
{
    /**
     * @var \Nette\Database\Context
     */
    protected $database;

    function __construct(Context $database)
    {
        $this->database = $database;
    }

    public function getLastPosts($count = 5)
    {
        return $this->database->table('facebook_wallposts')
            ->where('status', '1')
            ->order('created_time DESC')
            ->limit($count)
            ->fetchAll();
    }
}

a v presenteru přepíšeme vypisování postů na

/**
 * @var \App\Model\FacebookWallposts @inject
 */
public $wallposts;

public function renderDefault()
{
    $this->template->wallPosts = $this->wallposts->getLastPosts();
}

Property $database jsme nahradili za $wallpost a změnili typ třídy co chceme po frameworku aby nám předal. Aby to celé fungovalo musíme ješte danou servisu zaregitrovat v config.neon

services:
    - App\Model\UserManager
    - App\RouterFactory
    router: @App\RouterFactory::createRouter
    - App\Model\FacebookWallposts

commit: model - section for read from db

Import do modelu

To samé uděláme i s částí pro načítání dat z Facebooku.

Při přesunu odstraním používání cache, jelikož už jí při vývoji nepotřebuji ba naopak pokud chci zadat import tak chci aby se provedl vždy.

public function importPostFromFacebook()
{
    FacebookSession::setDefaultApplication('YOUR_APP_ID', 'YOUR_APP_SECRET');
    $session = FacebookSession::newAppSession();

    try {
        $request = new FacebookRequest($session, 'GET', '/nettefw/feed');
        $response = $request->execute();
        $posts = $response->getGraphObject()->asArray();
        $data = $posts['data'];

    } catch (\Exception $ex) {
        throw $ex;
        $this->terminate();
    }

    // save data to database
    ...

z Import presenteru přemístíme use sekci do modelu a presenter se nám rázem zjednodušil na

class ImportPresenter extends BasePresenter
{
    /**
     * @var \App\Model\FacebookWallposts @inject
     */
    public $wallposts;

    public function renderDefault()
    {
        $this->template->wallPosts = $this->wallposts->importPostFromFacebook();
    }

}

commit: model - section for import data from Facebook

A co to heslo v kódu? Pryč s nim

Jako pěkný, ale. Ale nám se ještě nelíbí

FacebookSession::setDefaultApplication('YOUR_APP_ID', 'YOUR_APP_SECRET');
$session = FacebookSession::newAppSession();

hesla chceme v konfiguraci a zde si jen řekneme o funkční session. Nahradíme tedy za

$session = $this->facebookSessionManager->getAppSession();

a do konstruktoru přidáme předání závislosti. plus nezapomene na deklarovaní property.

/**
 * @var \App\Model\FacebookSessionManager
 */
protected $facebookSessionManager;

/**
 * @param Context $database
 * @param FacebookSessionManager $facebook
 */
function __construct(Context $database, FacebookSessionManager $facebook)
{
    $this->database = $database;
    $this->facebookSessionManager = $facebook;
}

a našeho "hloupoučkého" managera definujeme v /app/model/FacebookSessionManager.php

namespace App\Model;

use Facebook\FacebookSession;

class FacebookSessionManager {

    protected $appId;

    protected $appSecret;

    function __construct($appId, $appSecret)
    {
        $this->appId = $appId;
        $this->appSecret = $appSecret;

        FacebookSession::setDefaultApplication($this->appId, $this->appSecret);
    }

    public function getAppSession()
    {
        return FacebookSession::newAppSession();
    }
}

registrujeme ho v config.neon

services:
    - App\Model\UserManager
    - App\RouterFactory
    router: @App\RouterFactory::createRouter
    - App\Model\FacebookWallposts
    - App\Model\FacebookSessionManager(%facebook.appId%, %facebook.appSecret%)

a v config.local.neon přidáme sekci s kódem a heslem k aplikaci

parameters:
    facebook:
        appId: APP_ID
        appSecret: APP_SECRET

commit: extract session generator to new service FacebookSessionManager

tuto verzi najdete pod tagem :model-di

Korektury od Nette Guru

Jako první poslal pull request Filip Prochazka.

commit: removed useless folder odebírá zbytečné kontrolování složky kterou nepoužíváme

commit: Refactored default configuration for database Upravuje jak se zapisuje přihlašování k databázi. Nyní jsou parametry (jméno, heslo, server, databáze) vytáhnuté do sekce "parameters". Proto si ze souboru config.local.neon odeberte sekci nette - database a nahraďte ji

parameters:
    database:
        dbname: facebookwall_devel
        user: facebookwall
        password: tajneheslo

mnohem čitelnější.

commit: export db schema to project přidává zmíněný SQL table creator do kódu

teď ale příjde ta zajímavější část.

Použití Kdyby/Facebook

Jako první nahradíme v composer.json Facebook/SDK za Kdyby/Facebook

    "require": {
        "php": ">= 5.3.7",
        "nette/nette": "~2.2.0",
        "dg/adminer-custom": "~1.0",
        "kdyby/facebook" : "dev-master"
    },

a aktualizujeme composer pomocí composer update. Smažeme náš "hloupoučký" FacebookSessionManager.php a odebereme i jeho registraci do services v config.neon, zde naopak přidáme sekci extensions a do ní registrujeme Kdyby Facebook

extensions:
    facebook: Kdyby\Facebook\DI\FacebookExtension

services:
    - App\Model\UserManager
    - App\RouterFactory
    router: @App\RouterFactory::createRouter
    - App\Model\FacebookWallposts

Tato extension vyžaduje v configu Facebook App ID a Facebook Secret. Proto do lokálního config.local.neon přemístíme tyto informace ze sekce params (kam jsme si je uložili) do sekce facebook.

facebook:
    appId: "APP_ID"
    appSecret: "APP_SECRET"

(APP_ID dejte do uvozovek, jinak je brán jako integer a Kdyby/Facebook vyhodí excaption.)

A ve FacebookWallpost.php uděláme pár změn. Prvně si upravíme use sekci. Odebereme Facebook SDK a nahradíme ho za Kdyby\Facebook a přidáme Tracy\Debugger.

use Kdyby\Facebook\Facebook;
use Kdyby\Facebook\FacebookApiException;
use Nette\Database\Context;
use Nette\Object;
use Tracy\Debugger;

Pak nahradíme inicializaci session managera za Kdyby\Facebook

/**
 * @var Facebook
 */
protected $facebook;

/**
 * @param Context $database
 * @param Facebook $facebook
 */
function __construct(Context $database, Facebook $facebook)
{
    $this->database = $database;
    $this->facebook = $facebook;
}

a zjednoduší se nám i volání samotného požadavku. Plus si budeme logovat případnou chybu.

public function importPostFromFacebook()
{
    try {
        $posts = $this->facebook->api('/nettefw/feed');
        $data = $posts['data'];

    } catch (\Exception $ex) {
        Debugger::log($ex->getMessage(), 'facebook');
        return array();
    }

    // save data to database
    ...

Q: Proč return array(); namísto $this->terminate();

A: ???

Teď, když si znovu spustíme import, tak bychom měli v Tracy vidět novou ikonku Facebooku a u ní základní informace o volání jeho API. Krása.

[ /data/articles/1/kdyby-facebook-tracy.png .(Kdyby Facebook - Tracy extension) ]

Další vychytávkou co Kdyby\Facebook má je metoda iterate. Pokud jste si všimli tak volání Facebook API vrací cca 25 záznamů a adresu pro další (paging) toho tato metoda využívá umožnuje nad výsledkem iterovat třeba ve foreach a donačíst tak úplně všechny posty.

Nahradíme tedy volání api za iterate. Zde už dostáváme čisté "pole" všech postů tak poupravíme i samotné procházení výsledků.

try {
    $posts = $this->facebook->iterate('/nettefw/feed');

} catch (\Exception $ex) {
    Debugger::log($ex->getMessage(), 'facebook');
    return array();
}

$imported = array();
// save data to database
foreach ($posts as $rowPost) {
  ...
}
return $imported;

Když teď, zkusíme import, v Tracy panelu uvidíme že se Facebook Api volalo vícekrát a v panelu je vidět detail každého volání.

Filip pak přepsal mé ifové peklíčko do mnohem čitelnější podoby pomocí ternárního operátora "?:". Nahradil datum ve stringu za DateTime obalené v Nette\Utils\DateTime a vrácený záznam je přetypován na ArrayHash (nezapomenout definovat v use)

use Nette\Utils\DateTime;
use Nette\Utils\ArrayHash;

a pak ve foreach

$post = array(
    'id' => $rowPost->id,
    'type' => $rowPost->type,
    'created_time' => DateTime::from($rowPost->created_time)->format('Y-m-d H:i:s'),
    'updated_time' => DateTime::from($rowPost->updated_time)->format('Y-m-d H:i:s'),
    'name' => isset($rowPost->name) ? $rowPost->name : NULL,
    'link' => isset($rowPost->link) ? $rowPost->link : NULL,
    'status_type' => isset($rowPost->status_type) ? $rowPost->status_type : NULL,
    'message' => isset($rowPost->message) ? $rowPost->message : NULL,
    'caption' => isset($rowPost->caption) ? $rowPost->caption : NULL,
    'picture' => isset($rowPost->picture) ? $rowPost->picture : NULL,
);

// post 'status' use story, we need message
if ($rowPost->type == 'status' && isset($rowPost->story)) {
    $post['message'] = $rowPost->story;
}
// add to return array
$imported[$post['id']] = ArrayHash::from($rowPost);

Latte filter

Filip do kódu přidal i ukázku jak se poprat s if peklem v šablonách pomocí Latte filtru.

V HomepagePresernter definujeme metodu createTemplate, která vrací presenteru template object, který se použije pro render šablon. K této šabloňe přidáme filtr, který se bude starat o odkazy na posty.

protected function createTemplate()
{
    /** @var Nette\Bridges\ApplicationLatte\Template $template */
    $template = parent::createTemplate();
    $template->addFilter('fbPostLink', function ($fbPost) {
        if (!empty($fbPost->link)) {
            return $fbPost->link;
        }

        if ($m = Nette\Utils\Strings::match($fbPost->id, '~^(?P<pageId>[^_]+)_(?P<postId>[^_]+)\\z~')) {
            return 'https://www.facebook.com/nettefw/posts/' . urlencode($m['postId']);
        }

        return NULL;
    });

    return $template;
}

• filter se jmenuje fbPostLink

• pokud daný post má definovaný link vrací tento link

• pokud se podaří z post id (které obsahuje {pageId}_{postId} ) získat postId vrátí link na konkrétní post na facebooku

• voláme ho nad objektem $post

šablona se nám pak zjednoduší na

<div n:foreach="$wallPosts as $post" class="post {$post->type}">
    <h3 n:if="$post->name">{$post->name}</h3>
    <img n:if="$post->picture" src="{$post->picture}" />
    <p>
        {if $post->message}{$post->message|truncate:250:'...'}{/if}
        <a href="{$post|fbPostLink}">více</a>
    </p>
</div>

commit: Use kdyby/facebook

tuto verzi najdete pod tagem :kdyby

Drobné vylepšováky

Na doporučení Davida jsem odebral z projektového .gitignore soubory Sublime editoru a PHPStormu a zapsal jsem si je do globálního gitignore podle návodu na githubu

Administrace postů

Jako poslední úkol jsem si nechal administraci na povolování postů. Vytvoříme si nový presenter AdminPresenter a u vypsaných jednotlivých položek přidáme tlačítko enable, disable. To celé pak z "AJAXujem".

Než začnem s php úpravama, provedem pár drobných změn na frontendu ať se na náš výtvor dá aspoň trošku koukat. Osobně mám rád Zurb Foundation, ale tu samou práci, pro tento případ i možná vhodnější, odvede Bootstrap

commit: added zurb foundation 5 and updated templates

commit: tabs indent

Výkop administrace

Začneme úpravou modelu, kam si přidáme metodu co nám vrátí všechny posty.

public function getAllPosts()
{
    return $this->database->table('facebook_wallposts')
        ->order('created_time DESC')
        ->fetchAll();
}

a následně si je načteme presenterem AdminPresenter a pošleme do šablony

/**
 * Admin presenter.
 */
class AdminPresenter extends BasePresenter
{

    /**
     * @var \App\Model\FacebookWallposts @inject
     */
    public $wallposts;

    public function renderDefault()
    {
        $this->template->wallPosts = $this->wallposts->getAllPosts();
    }

}

šablonu je možno vidět v commitu.

commit: basics for admin init

Akce disable, enable

Následuje vytvoření v modelu metod co se nám postarají o samotnou editaci postu.

/**
 * enable post
 *
 * @param $postId string
 * @return bool
 */
public function enablePost($postId)
{
    $this->database->table('facebook_wallposts')
        ->where('id', $postId)
        ->update(array('status' => '1'));
    return TRUE;
}
/**
 * disable post
 *
 * @param $postId string
 * @return bool
 */
public function disablePost($postId)
{
    $this->database->table('facebook_wallposts')
        ->where('id', $postId)
        ->update(array('status' => '0'));
    return TRUE;
}

a v presenteru si vytvořím dvě akce co funkcionalitu budou obsluhovat

public function actionEnablePost($postId)
{
    if ($this->wallposts->enablePost($postId)){
        $this->flashMessage('Post enabled');
    }
    $this->redirect('default');
}
public function actionDisablePost($postId)
{
    if ($this->wallposts->disablePost($postId)){
        $this->flashMessage('Post disabled');
    }
    $this->redirect('default');
}

v šabloně si upravím odkazy ať fungují

{if $post->status == '1'}
    <li><a n:href="Admin:disablePost $post->id" class="button alert">disable</a></li>
{else}
    <li><a n:href="Admin:enablePost $post->id" class="button">enable</a></li>
{/if}

a fungujeme.

commit: enable and disable post

První verze zajaxovní

není to žádná hitparáda, ale funguje, a to se počítá ;-) Začnem úpravou presenteru. Ten pokud se bude jednat o ajaxový požadavek, tak na místo flashMessage nastavíme do proměnné payload message co se stalo, a následně pošleme uživateli tento payload. Metoda sendPayload je ulehčení ať se nemusíme starat o posílání JSON Response, vše je čitélne z obsahu metody sendPayload

public function actionEnablePost($postId)
{
    if ($this->wallposts->enablePost($postId)){
        $this->flashMessage('Post enabled');
    if ($this->wallposts->enablePost($postId)) {
        if ($this->isAjax()) {
            $this->payload->message = 'Post enabled';
            $this->sendPayload();
        } else {
            $this->flashMessage('Post enabled');
            $this->redirect('default');
        }
    }
    $this->redirect('default');
}

to samé uděláme i pro druhou metoru actionDisablePost. Upravíme si šablonu tak že budem zobrazovat obě tlačítka a jen skrze css budem schovávat to, které zrovna nebudem potřebovat.

<li n:class="disable, !$post->status ? hide"><a n:href="Admin:disablePost $post->id" class="ajax button alert">disable</a></li>
<li n:class="enable, $post->status ? hide"><a n:href="Admin:enablePost $post->id" class="ajax button">enable</a></li>

a pak celé to rozhejbání v JavaScriptu. Pokud kliknem na odkaz co má třídu .ajax tak stopnem klasické volání, a zavoláme XHR požadavek. Pokud se nám vrátí message, že je post disablován, tak prohodíme zobrazení tlačítek. (v opačném případě také) Plus pár visuálních drobností (disablování butonu po kliknutí, změna kurzoru na hodinky)

// Ajax click in admin
$('body').on('click', 'a.ajax', function (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    var link = $(this);
    if (link.hasClass('disabled')) {
        return false;
    }
    link.css('cursor', 'wait');
    link.addClass('disabled');
    $.post(this.href, function (data) {
        if (data.message == 'Post disabled') {
            link.parent().parent().find('.disable').addClass('hide');
            link.parent().parent().find('.enable').removeClass('hide');
        } else {
            // enabled
            link.parent().parent().find('.disable').removeClass('hide');
            link.parent().parent().find('.enable').addClass('hide');
        }
        link.removeClass('disabled');
        link.css('cursor', 'default');
    });
});

commit: ajax version of enable and disable post

Úprava JSON komunikace

Porovnávat message co se stalo není moc "profi", tak si zavedem nějakou proměnou s akcí a status zdali se provedla správně. To s použitím payload proměnné je vcelku snadné

if ($this->isAjax()) {
    $this->payload->message = 'Post enabled';
    $this->payload->action = 'enable';
    $this->payload->status = '1';
    $this->sendPayload();

} else {

v JavaScriptu se pak zeptáme co se dělo a jak to dopadlo a zobrazíme dynamicky flash zprávu.

var flashMessage = function(message)
{
    $($('body')[0]).prepend($('<div class="flash info">'+message+'</div>'));
}

...

if (payload.action == 'disable' && payload.status == '1') {
    // disabled
    link.parent().parent().find('.disable').addClass('hide');
    link.parent().parent().find('.enable').removeClass('hide');
    flashMessage(payload.message);
}

commit: better payload status and javascript behaviour

Použij signály než action

Další radou od zkušených bylo použití signálů (handle).

Handle je na změnu stavu aktuálního view. Tj na smazání, zaktivnění položky etc. (Většinou totiž po provedení chceš znova vykreslit tu samou stránku).

Patrik Votoček

nebo

Handle je „subsignál“ aktuální akce, je to jako když odešleš formulář. Když máš akci, tak většinou by měla něco zobrazovat, nebo připravovat data pro formulář. Zpracování formuláře taky nedáváme do akce, ale napíšeme na to metodu, kterou dáš formuláři jako callback. Tak přesně to je signál, zpracování nějaké operace (třeba smazání řádků, nebo označení řádku jako hidden) pro aktuální akci (což je třeba výpis jednotlivých řádků).

Filip Procházka

Přepracování bylo snadné. Přejmenoval jsem metody z actionDisablePost na handleEnablePost a volání z

<a n:href="Admin:enablePost $post->id" class="ajax button">enable</a>

na vykřičníkový signál

<a n:href="enablePost! $post->id" class="ajax button">enable</a>

TIP: piš méně

pri odkazovani na akci ve stejnem presenteru staci uvest nazev akce, nemusis jiz uvadet presenter

Matej21

commit: use signals for enable/disable posts

Snippety a nette.ajax.js

Teď přichází pořádné kladivo. Představme si že nechceme ručně ošetřovat ajaxové volání. Prostě ať se udělá co se udělat má a změní se jen potřebné. K tomu slouží Snippety. Snippet chápu jako pojmenovaný prvek na stránce, který v případě potřeby je možné nahradit za jeho aktuální verzi. V našem případě si pro začátek označíme dva snippety. Prvním bude blok kódu co se nám stará o výpis flash messsages

{snippet flashes}
    <div n:foreach="$flashes as $flash" class="flash {$flash->type}">{$flash->message}</div>
{/snippet}

druhým bude tabulka wallpostů

{snippet wallposts}
    {foreach $wallPosts as $post}
        <div class="row">
        ...
    {/foreach}
{/snippet}

v tuto chvíli se stali tzv. controllem který v případě, že víme že se změnil tak ho necháme překreslit redrawControl. V našem případě pokud chceme změnit status postu tak necháme překreslit snippet flashes a wallposts

public function handleEnablePost($postId)
{
    if ($this->wallposts->enablePost($postId)) {
        $this->flashMessage('Post enabled');
        $this->redrawControl('flashes');
        $this->redrawControl('wallposts');
    }
}

kód se nám dosti zjednodušil. Ještě dáme pryč celý náš JavaScript mechanismus co se staral o zpracování požadavku a použijeme knihovnu nette.ajax.js od Vojty Dobeše, která umí pracovat automaticky právě se snippety a s jejich přenosovým "JSON protokolem"

jediné co potřebujeme je zavolat její inicializaci.

$(function () {
    $.nette.init();
});

pěkné zjednodušení, že? Kabelama se nám přenáší jen co se "opravdu" změnilo

[ /data/articles/1/snippets-response.png .(json snippets response) ]

commit: use snippets and nette.ajax.js

Bacha na F5

Zpracování formulářu v Nette funguje na bázi signálu (handle) a tam abychom se vyhnuli problému s refreshem použijeme redirect(). Stejně je tomu i v našem případě se signály na disablování a enablování postu. Pokud se nejedná o ajaxový požadavek, tak přesměrujem.

// F5 protection without JS
if (!$this->isAjax()){
    $this->redirect('this');
}

commit: redirect after handle signal without JS

Posílání opravdu jen toho co je třeba

Ajaxové požadavky sviští o 106 jen se nám v každém requestu ajaxem posílá celá tabulka postů. Ale my změnili jen jeden, co kdyby se tedy posílal jen tenhle jeden spolu s flash message? Lze. Technika se nazývá dynamické snippety

každý řádek zabalíme do jednoznačne identifikovatelného snippetu (použijeme n makro)

{snippet wallposts}
    {foreach $wallPosts as $post}
        <div class="row" n:snippet="item-$post->id">

a přidáme trochu logiky do handle. V případě že se jedná o ajaxový požadavek, načteme jen aktuálně zpracovávaný řádek a do šablony ho pošleme jako "seznam všech postů", v normálním požadavku pošleme do šablony posty všechny.

public function handleEnablePost($postId)
{
    if ($this->wallposts->enablePost($postId)) {
        $this->template->wallPosts = $this->isAjax()
            ? array($this->wallposts->getOne($postId))
            : $this->wallposts->getAllPosts();
        $this->flashMessage('Post enabled');
        $this->redrawControl('flashes');
        $this->redrawControl('wallposts');

[ /data/articles/1/dynamic-snippets.png .(json dynamic snippets response) ]

jelikož se handle zpracovává dříve než render viz životní cyklus presenteru, tak pokud uživatel bez JavaScriptu změnil viditelnost postu, tak už do šablony poslal seznam všech postů a render už tuto věc dělat nemusí, tak si to ošetříme.

public function renderDefault()
{
    if (!isset($this->template->wallPosts)) {
        $this->template->wallPosts = $this->wallposts->getAllPosts();
    }
}

commit: Add method getOne to Model\FacebookWallposts

commit: use dynamic snippets

Zničíme duplicitní kód

Metody handleEnablePost a handleDisablePost($postId) mají dost kódu úplně stejného. Proto mě napadlo že bych je nějak předělal.

První nápad byl mít metodu handleChangePostStatus($postId, $actionType), kde by jako druhý parametr byl typ akce, disable nebo enable. Dva parametry se mi nakonec nelíbily.

TIP: rezervovaná slova

zde jsem původně měl parametr pojmenová pouze $action a ouhle nějak to nefungovalo. Narazil jsem na pojem rezervovaných proměnných. Tak bacha na ně ;-) Proto i submit button ve formuláři by neměl mít jméno action. Další slova jsou: $do, $_fid, (TODO) .. a $action

Druhým nápadem bylo mít metodu handleTogglePostStatus($postId), která by si zjistila zda je článek povolen a zakázala by ho nebo opačně. Zjistil jsem, že by status ani zjištovat nemusela jen by SQL update otočil hodnotu (nezkoušel jsem). Toto řešení jsem zavrhl kvůli zobrazení ve dvou oknech současně. Chování by mohlo být nelogické.

Třetím nápadem bylo vytáhnout společnou logiku do vlastní metody a u něj jsem zůstal.

protected function afterTogglePostStatus($status, $postId, $message)
{
    if ($status) {
        $this->template->wallPosts = $this->isAjax()
            ? array($this->wallposts->getOne($postId))
            : $this->wallposts->getAllPosts();

        $this->flashMessage($message);
        $this->redrawControl('flashes');
        $this->redrawControl('wallposts');
    }
    // F5 protection without JS
    if (!$this->isAjax()){
        $this->redirect('this');
    }
}

public function handleEnablePost($postId)
{
    $status = $this->wallposts->enablePost($postId);
    $this->afterTogglePostStatus($status, $postId, 'Post enabled');
}

public function handleDisablePost($postId)
{
    $status = $this->wallposts->disablePost($postId);
    $this->afterTogglePostStatus($status, $postId, 'Post disabled');
}

commit: refactor handleDisable and handleEnable

Drobnosti

Dobré je mít v repozitáři šablonu pro config.local.neon

commit: add config.local.neon template

Chtěl jsem oku lahodící výpis postů na homepage

commit: better homepage render with masonry plugin

A pomocí CSS animované zmizení flash message

commit: css autohide flash messages via

tuto verzi najdete pod tagem :admin

Tím končí tento delší rozbor jak jsem připravoval aplikaci na zobrazování postů z Facebooku.

Díky

• Filip Procházka

• Jiří Zralý

• David Matějka

• Patrik Votoček