[Poslední sobota, 85] Praha – Nette (28. 1. 2017)

Kdyby byla díra v programu, tak bych mohl nabídnout „faily při provozu PHP v cloudu“. Pojal bych to jako sbírku prkotin, které vývojáře ani nenapadne řešit při vývoji lokálně/na hostingu, ale vymstí se v cloudu. Race conditions, paralelní běh, latence, …

Je to ale poměrně obecné téma, takže bych to bral spíš jako záložní, když bude v programu díra. Buď jen prosvištění checklistu, na co si dát pozor a nebo delší verze s konkrétnějším vysvětlením. Nebo možná spíš vybrat jen jednu věc? :)

Toto bude nejsložitější návod na workshop vůbec… :D

Pokud chcete na GraphQL workshop přijít a jen poslouchat, tak je to v pořádku a máte hotovo. V opačném případě je potřeba zprovoznit 2 aplikace. Jedna aplikace je napsána v Nette a slouží jako API endpoint. Druhá aplikace je frontend napsaný v Reactu. Začněme postupně v řeči programátora:

Nette Backend

Backend je postavený na PostgreSQL, takže doporučuji. Ale půjde to i na MySQL (ORM FTW!).

git clone git@github.com:adeira/connector.git
cd connector
composer install
cp config/config.local.neon.travis config/config.local.neon

A zde samozřejmě upravíme přístupové údaje k DB (vytvořte si prázdnou). Pro MySQL nějak takto:

doctrine.orm:
	connection:
		dbname: adeira-connector
		user: root
		password: root
		driver: pdo_mysql

Kdyby něco, nezapomeňte ručně smazat cache (všiml jsem si, že se zde ne úplně spolehlivě invaliduje). Pokračujeme:

bin/console                             <<< mělo by vrátit výpis Symfony konzole!
bin/console orm:schema-tool:create      <<< v databázi budou nově automaticky 3 tabulky
bin/console adeira:user:create username password

Poslední příkaz vytvoří uživatele a vrátí UUID. Tento identifikátor si někam uložte – budeme s ním později pracovat (dá se případně najít v databázi). V mém případě je to 3d1add46-ac04-4785-830f-e67f74550f89. Už jen ověříme, že vše funguje a je to:

bin/console adeira:graphql:query 3d1add46-ac04-4785-830f-e67f74550f89

Vrátí něco takového:

{
  "data": {
    "allQueries": {
      "queries": [
        {
          "name": "user"
        },
        ...
      ]
    }
  }
}

React Frontend

Vrátíme se do výchozí složky a jedeme znovu (pravděpodobně bude fungovat i s npm):

git clone git@github.com:adeira/connector-frontend.git
cd connector-frontend
yarn install

Instalace trvá na normálním stroji 88.50s. Ověříme, že naše prostředí funguje a to tak, že rovnou spustíme vývojový server:

yarn run start

Mělo by se otevřít okno na adrese http://127.0.0.1:1234/. Toto lze změnit v souboru package.json v sekci scripts pod klíčem start. S trochou štěstí se zobrazí přihlašovací formulář. Ke vší smůle se však při pokusu o přihlášení zobrazí hláška Backend API server is not reachable... (přihlašovací údaje ke svému uživateli znáte z první poloviny návodu). Frontend totiž neví kde je backend. Napravte to prosím v souboru src/index.js:

const apolloClient = new ApolloClient({
	networkInterface: new HTTPFetchNetworkInterface('//connector.adeira.localhost/graphql'), //FIXME
});

Nyní se můžete přihlásit. Pokud vidíte stránku s hlavičkou (modrozelený gradient), tak máte vyhráno. Nezapomeňte si projekty za týden zaktualizovat. Je pravděpodobné, že to ještě budu tunit.

Pokud něco nefunguje, zapněte konzoli v prohlížeči případně logy v Nette aplikaci a dejte mi vědět (tady nebo ideálně na Slacku pépápkařů).

Na workshopu si s tímto prostředím budeme hrát (nic náročného). Workshop je určen pro lidi, kteří s GraphQL/React/API nemají zkušenosti, ale dovedou tento návod projít a splnit.

V průběhu psaní tohoto návodu jsem jej zároveň zkoušel, abych ověřil, že jsem něco nevynechal a nebylo ublíženo žádnému zvířátku… :)