V dnešní době se vše mění ve webovou aplikaci. I jednoduché webové stránky mají mobilní aplikaci spoléhající na REST Api. Webové aplikace jsou dostupné všude – na notebooku, stolním počítači, tabletu, mobilu a nově i na nositelných zařízeních, jako jsou chytré hodinky. Vše se zmenšuje a zrychluje – frontendy se oddělují od backendů a komunikují se serverem pouze prostřednictvím API.
Co budeme stavět?
V této sérii vytvoříme aplikaci pro nahrávání fotografií. Pro front-end použijeme EmberJs a Foundation 5. EmberJs je front-end framework vyznačující se dobrou integrací s REST Apis. Foundation 5 nám pomůže vytvořit rychlý prototyp našeho frontendu. Pro hostování použijeme bezplatnou úroveň Heroku (více informací o PHP na Heroku naleznete zde). Pro back-end použijeme Laravel. Zdrojový kód bude k dispozici po částech a ve finální podobě v závěrečné části této série. Zde si můžete stáhnout kód pro část 1.
Začněme
Dobrým způsobem, jak začít nový projekt v PHP, je použití Vagrant. Vagrant nám dává prostor hodně experimentovat od projektu k projektu. Mohu mít různé verze PHP, pokud chci s Apache pro jeden projekt, Nginx pro jiný. Pokud se něco pokazí, vrátím všechnu svou práci a jednoduše vagrant up poté – a nikdy neznečišťuji svůj hostitelský operační systém různými jinými instalacemi.
Nejjednodušší způsob, jak začít, je následovat tento rychlý tip, který vás provede procesem rychlé instalace a během několika minut vám ukáže fungující aplikaci Laravel, abyste mohli začít hackovat. Pokud stále nejste přesvědčeni, proč byste měli používat Homestead a Vagrant, podívejte se sem.
Můj Homestead.yaml vypadá takto.
Nyní, když je box spuštěn, musíme nainstalovat Laravel. Nejprve pomocí ssh vytvořte spojení s boxem.
vagrant sshPoté přejděte do složky, která bude hostit naši aplikaci.
cd CodeZde si musíme stáhnout Laravel a poté nainstalovat závislosti pomocí Composeru.
git clone https://github.com/laravel/laravel Laravel
cd Laravel
composer installPoté, co Composer dokončí instalaci všech balíčků, otestujte v prohlížeči vyhledáním localhost:8000 . Pokud jste udělali vše správně, uvidíte toto:
Soubory ukázkové aplikace jsou nyní k dispozici jak ve virtuálním počítači Vagrant, tak ve vašem hostitelském operačním systému pro úpravy pomocí vašeho oblíbeného IDE.
Heroku
Všechny níže uvedené akce se provádějí uvnitř virtuálního počítače, když jste přihlášeni pomocí vagrant ssh Pokud není uvedeno jinak. Podrobnější přehled Heroku na Vagrant a instalaci doplňků naleznete v tomto příspěvku, jinak viz níže.
Pokud ještě nemáte účet na Heroku, vytvořte si jej pomocí tohoto odkazu a stáhněte si Heroku Toolbelt. Toto je klientské rozhraní, které nám zjednodušuje práci s Heroku. Z tohoto cli můžeme instalovat addony, vytvářet nové projekty a pomocí git také každou změnu prosadit. Po vytvoření účtu na Heroku a instalaci Heroku Toolbelt se musíte přihlásit, abyste jej mohli začít používat.
heroku loginPo provedení tohoto příkazu máme spojení s Heroku. Nyní tam můžeme začít vytvářet nový projekt.
Abychom mohli začít používat Laravel na Heroku, musíme provést několik malých změn. Nejprve vytvořte soubor a pojmenujte jej Procfile . Přidejte tento řádek do tohoto souboru.
web: vendor/bin/heroku-php-apache2 publicToto je konfigurační soubor. Heroku potřebuje, aby věděl, s čím má co do činění. Tímto jsme specifikovali PHP a Apache. Můžeme také použít python, java, ruby, scala a další. Při instalaci Heroku Toolbelt se nainstaluje i Foreman. Používá se pro spouštění Procfiles lokálně, což vám pomáhá udržovat paritu dev/prod. Pokud jste zvědaví, co dalšího Procfile umí, klikněte na tento odkaz v oficiální dokumentaci Heroku.
Pokud byste místo toho chtěli použít Nginx, podívejte se na tento příspěvek.
Tyto příkazy provádějte jeden po druhém v Laravelově složce
git init
git add .
git commit -m "initing"
Druhým krokem je odstranění Composer.lock od .gitignore . Až skončíme s git, vraťme se k Heroku.
heroku createTím vytvoříte nový projekt na Heroku.
git push heroku masterTím se vše přesune na Heroku. Pojďme to otestovat. Pokud vše půjde dobře, uvidíme logo Laravel, které jsme také viděli, když jsme jej testovali na Homestead Improved.
Pokud máte problémy s klíči rsa, přečtěte si tento článek. Pokud se chcete dozvědět více o PHP na Heroku, podívejte se sem a zde.
Instalace front-end balíčků
Pro instalaci front-end balíčku použijeme Bower. Můžete volně používat cokoli chcete, dokonce i stahování jako zip z Github nebo z oficiálních stránek. Přejděte do veřejné složky ve složce Laravel.
cd publicNení třeba instalovat Bower, protože Homestead je dodáván s nodeJs , npm a Bower předinstalované.
bower initPoté nainstalujte balíčky:Foundation 5, EmberJs a Ember Data. Ember data je knihovna používaná Emberem a je samostatná. Pomůže nám to s REST Api jako Rest Adapter.
bower install --save zurb/bower-foundation components/ember components/ember-dataBower nám vše nainstaloval, včetně všech závislostí.
Kostra frontend
Začněme budovat základy našeho projektu. Bower nainstaloval závislosti a vložil je do bower_components . Potřebujeme také složku, do které vložíme naše statické soubory. Vytvořte složku s názvem static ve veřejném adresáři. Poté uvnitř vytvořte tři složky:js , css a img . V js vytvořte složku app.js a v css složka style.css soubor.
První věc, kterou vždy dělám, když začínám nový projekt s Laravelem, je vygenerování klíče pro bezpečné hašování hesel.
php artisan key:generate
Vytvořte nový pohled v app/views . Říkejte tomu index.php . Toto bude vstupní stránka. Potřebujeme importovat všechny javascriptové knihovny a styly v tomto souboru.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webapp with EmberJs and Laravel4</title>
<link rel="stylesheet" href="/bower_components/foundation/css/foundation.css" />
<link rel="stylesheet" href="/static/css/style.css" />
</head>
<body>
<h1>A blank app</h1>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/foundation/js/foundation.min.js"></script>
<script src="/bower_components/handlebars/handlebars.js"></script>
<script src="/bower_components/ember/ember.js"></script>
<script src="/static/js/app.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>Toto je kostra pohledu – z toho můžeme stavět. Jedná se o jednostránkovou aplikaci, díky které je tento soubor jediným zobrazením v celé aplikaci. Vše, co se chystáme vytvořit pomocí Ember, bude pouze v tomto souboru.
Chcete-li použít index.php musíme také změnit routes.php soubor umístěný uvnitř app složku. Změňte soubor na tento:
Route::get('/', function()
{
return View::make('index');
});
Vyzkoušejte to ve svém prohlížeči. Otevřete localhost:8000 . Zobrazí se prázdná stránka s názvem. Pokud se podíváme na inspektor (ctrl+shift+i), nejsou tam žádné chyby. Každý soubor se načte bez problémů. Nahrajte všechny změny do Heroku a zjistěte, zda to tam funguje.
git add .
git commit -m "testing"
git push heroku masterKonfigurace databáze
Konfigurace databáze s Laravelem je snadná při práci s různými prostředími. Musíme to nakonfigurovat tak, aby to fungovalo jak na Homestead, tak na Heroku. Na Heroku není Postgresql nainstalován při vytvoření aplikace, takže jej musíme nainstalovat pomocí nástroje Toolbelt. Tento doplněk nevyžaduje, abyste měli kreditní kartu:
heroku addons:add heroku-postgresql
V /app/config/database.php změňte výchozí klíč tak, aby ukazoval na postgres.
'default' => 'pgsql',
Pro Postgres na Heroku a na Homestead se používají různé konfigurační hodnoty. Jak tedy lze tyto hodnoty v každém případě použít? Z původního rychlého tipu víme, že výchozí port Postgres je 54320 a kombinace uživatel/průchod pro naše vývojové prostředí je homestead /secret .
Musíme změnit hodnoty pro produkční prostředí (v tomto případě Heroku).
Vytvořte novou složku s názvem production uvnitř /app/config . Zkopírujte database.php nachází se v /app/config/local a vložte jej do složky production config. Kopii vložte také do testing složku. Když chcete otestovat svou aplikaci, musíte nakonfigurovat databázi pro toto prostředí. Laravel ukládá konfigurace pro Homestead standardně do local/database.php složka.
Heroku ukládá konfiguraci postgres jako proměnnou prostředí. Nakonec by soubor měl vypadat nějak takto.
<?php
$url = parse_url(getenv("DATABASE_URL")); // Get the environment variable
// and return it as an array
return array(
'connections' => array(
'mysql' => array(
'driver' => 'mysql',
'host' => 'localhost',
'database' => 'homestead',
'username' => 'homestead',
'password' => 'secret',
'charset' => 'utf8',
'collation' => 'utf8_unicode_ci',
'prefix' => '',
),
'pgsql' => array(
'driver' => 'pgsql',
'host' => $url["host"],
'database' => substr($url["path"], 1),
'username' => $url["user"],
'password' => $url["pass"],
'charset' => 'utf8',
'prefix' => '',
'schema' => 'public',
),
),
);Nyní je psql připraveno k naplnění daty pomocí migrace a Seederů. Je jednodušší udržovat kód a provádět některé změny pomocí migrace.
php artisan migrate:make create_users_table
Uvnitř /app/database/migrations bude vytvořen soubor . Přidejte toto schéma do up metoda:
public function up()
{
Schema::create('users', function($table)
{
$table->increments('id');
$table->string('username');
$table->string('password');
$table->timestamps();
});
}Přidejte také tento řádek do metody „dolů“:
public function down()
{
Schema::dropIfExists('users');
}Artisan je pěkný nástroj pro zkrácení doby vývoje. Migrace a secí stroje jsou jen trochou magie řemeslníků.
php artisan migrate
Tím se spustí up metoda na každém migračním souboru a vytvoří schéma definované uvnitř této metody. Na druhé straně php artisan migrate:reset spustí down a ve většině případů vrátí všechny změny, které up metoda udělala. Pokud vytvoříte schéma s up vraťte vše v down metoda.
Databáze má nyní tabulku nazvanou users s jednoduchou strukturou. Pomocí Seeders bude databáze naplněna daty. Koneckonců, je lepší mít data v databázi spuštěním jednoho příkazu, než to dělat ručně pokaždé, když se databáze změní.
Vytvořte UserTableSeeder.php uvnitř /app/database/seeds/ složka.
/* /app/database/seeds/UserTableSeeder.php */
class UserTableSeeder extends Seeder {
public function run()
{
Eloquent::unguard();
DB::table('users')->delete();
User::create(array(
'username' => 'foo',
'password' => Hash::make('password')
));
}
}
Seedovací třída musí rozšířit Seeder třída. Tento kód také přidejte do /app/database/seed/DatabaseSeeder.php protože artisan při spuštění php artisan db:seed nezahrnuje vlastní soubory . Místo toho musíte použít php artisan db:seed --class=UserTableSeeder použít tuto konkrétní třídu. Dávám přednost spuštění php artisan db:seed a nechte DatabaseSeeder udělat všechnu práci.
/* /app/database/seeds/DatabaseSeeder.php */
class DatabaseSeeder extends Seeder {
public function run()
{
$this->call('UserTableSeeder');
}
}
Toto přidá pouze jednoho uživatele do users stůl. Pro testování aplikace je potřeba více uživatelů. Tomu se budeme věnovat v části 2.
Po vložení tohoto úryvku do DatabaseSeeder.php nachází se v /app/database/seeds , spusťte následující příkaz:
php artisan db:seed
Uvnitř users byl vytvořen nový řádek s našimi hodnotami stůl.
Znovu Heroku
Na Homesteadu máme databázi s jednoduchou tabulkou. Ale lze tyto změny provést na Heroku? Použijte git k odeslání kódu online a zjistěte to.
git add .
git commit -m "adding database"
git push heroku masterPoté popravte řemeslníka na Heroku.
heroku run php artisan migrate
heroku run php artisan db:seed
Zadejte heroku run před jakýmkoli příkazem php/artisan a bude to fungovat. Protože je toto prostředí v produkčním režimu, objeví se na obrazovce otázka. Stiskněte Enter a tabulka uživatelů bude vytvořena a nasazena. Pokud máte více Seederů a migračních souborů, otázka se bude objevovat častěji.
Zabalení
V tomto článku jsme vytvořili kostru pro naši aplikaci. Nyní běží v našem místním prostředí a na Heroku. V situaci, kdy se zabýváte místním vývojem a vývojem cloudu, můžete strávit značné množství času řešením konfigurací a být na stejné stránce se dvěma různými prostředími. Dále dokončíme vytváření databáze. Vytvoříme nějaké sedečky s generátorem falešných dat a použijeme knihovnu souborového systému, abychom se vypořádali s místními soubory. Zůstaňte naladěni!