Cordova, Ratchet a Angular – mobilní aplikace rychle a jednoduše
Na trhu je k dispozici mnoho nástrojů, které vývoj značne ulehčují a zrychlují. V dněšním článku si vytvoříme aplikaci pro Android za použití HTML, CSS a JavaScriptu a nakonec si ukážeme, jakým způsobem ji zkompilovat pro GooglePlay
Nálepky:
Úvod
Dnes bych vám rád ukázal, jak je možné použít webové technologie (JavaScript, HTML a CSS) pro vývoj mobilních aplikací. Protože nemám rád „HelloWorld“ ukázky, cílem bude vytvořit aplikaci pro Android, která vyhledává filmy na ČSFD a umí zobrazit detail filmu.
Technologie
K získávání dat použijeme neoficiální REST API, která poskytuje všechny funkce pro hledání a zobrazování filmů. Sice obsahuje určité limity, ale pro demonstraci to bude stačit. V API je dispozici pěkný přehled i s ukázkami. Na logiku aplikace Angular a aby naše aplikace vypadala nativněji, použijeme CSS mobile-only framework Ratchet. Celou aplikaci pak zabalíme za pomoci Apache Cordova. K celému vývoji tedy budeme potřebovat ještě NPM (Node Packaged Modules), a to hlavně kvůli Cordově. A když už máme NPM, byla by škoda nepoužít Bower, který bude řešit naše závislosti.
Angular
Angular asi nemá cenu moc detailněji představovat, jedná se o open-source MVC Framework od Googlu. Použijeme ho pro routování mezi dvěma pohledy (view) a pro logiku naší aplikace.
Ratchet 2
Ratchet je CSS Mobile-only framework od Bootstrapu. Poskytuje celou řadu komponent, které se snaží přiblížit nativnímu vzhledu mobilních aplikací. Ratchet umožňuje skinování pro Android a iOS, takže pro každou platformu bude vypadat trochu více nativně. V ukázce budu ukazovat vývoj pro Android, ale s pár drobnostmi půjde aplikace zkompilovat bez problémů i pro iOS. Na stránkách jsou pěkné ukázky již zmíněných komponent, plus jsou k dispozici 3 demo aplikace, kde se můžete podívat, jak to potom vypadá. U nějakých komponent nejsou k dispozici onclick eventy, jako například u modálního okna, takže pokud si je chcete vyzkoušet u sebe v prohlížeči, je potřeba zapnout emulaci mobilního zařízení.
Cordova
Cordova je nástroj pro vývoj mobilních aplikací za pomoci HTML, JS a CSS, které pak dokáže zabalit do výsledného balíčku. Podporuje docela dost platforem a pěkný článek o ní napsal Martin Hujer tady na zdrojáku, tak pokud jste ho nečetli, doporučuji si odskočit.
První kroky
Nejdříve si vytvoříme skeleton Cordova projektu, tedy za předpokladu, že máte Cordovu nainstalovanou (npm install -g cordova), napíšeme do příkazového řádku/terminálu (dále jen terminál):
$ cordova create csfdapp com.twista.csfdapp csfdapp $ cd csfdapp/ $ cordova platform add android
To nám vytvoří prázdný vzorový projekt, do kterého jsme si přidali Android (pokud to děláte poprvé, Cordova by si sama měla stáhnout androidí SDK).
První argument je složka naší aplikace, druhý domain-style identifikátor a třetí pak její název.
Když se podíváme na strom složek (níže), tak nás prozatím bude zajímat jen složka www, ve které vytvoříme naší aplikaci.
$ tree -L 1 . ├── config.xml ├── hooks ├── merges ├── platforms ├── plugins └── www
Nejdříve začneme s HTML šablonou, kde si načteme potřebné knihovny a uděláme si skeleton pro Angular. K instalaci závislostí použijeme Bower, abychom nemuseli ručně stahovat knihovny. Otevřeme tedy terminál, skočíme do složky www a spustíme:
$ cd www $ bower install angular angular-route ratchet
Tím si nainstalujeme závislosti a můžeme jít dál, ve složce si vytvoříme soubor index.html, který bude vypadat takto:
<!-- file: /index.html -->
<!DOCTYPE html>
<html ng-app="csfd">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="bower_components/ratchet/dist/css/ratchet.min.css" rel="stylesheet">
<link href="bower_components/ratchet/dist/css/ratchet-theme-android.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<title>ČSFD</title>
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">Vyhledávání filmů</h1>
</header>
<div class="content">
<div ng-view></div>
</div>
<div class="foot">
<a href="http://twista.cz">twista.cz</a>
</div>
<script src="bower_components/ratchet/dist/js/ratchet.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Poté si vytvoříme složku partials, ve které bude šablona k našim stránkám. Uděláme si dva soubory home.html, což bude šablona pro úvodní stránku a detail.html, kde budeme zobrazovat detail filmu. Soubory budou vypadat takto:
<!-- file: /partials/home.html -->
<p class="content-padded" style="text-align: center">
<img src="img/logo.svg" width="400">
</p>
<form>
<input type="text" placeholder="Název filmu" name="movieName" id="movieName" ng-model="movieName">
<button class="btn btn-primary btn-block" id="find" ng-click="search()">Vyhledat Film</button>
</form>
<ul class="table-view">
<li class="table-view-cell media" ng-repeat="movie in data">
<a href="#/movie/{{movie.id}}" class="navigate-right" data-transition="slide-in">
<span class="badge">{{movie.year}}</span>
{{movie.names.cs}}
</a>
</li>
</ul>
<!-- file: /partials/detail.html -->
<table>
<tr>
<td>
<img ng-src="{{data.poster_url}}"/>
</td>
<td>
<h2>{{data.names.cs}}</h2>
{{data.year}} | {{data.rating}} % <br>
{{data.runtime}}<br>
<a href="{{data.csfd_url}}">
<button class="btn">odkaz na čsfd</button>
</a>
</td>
</tr>
<tr>
<td colspan="2">
<p class="content-padded" style="color:#000">{{data.plot}}</p>
</td>
</tr>
</table>
Jedná se jen o zobrazování dat, kdy jsme vše zasadili do ratchetovských komponent. Šablony si samozřejmě můžete modifikovat jak vám bude vyhovovat, tohle je jen příklad. :)
A teď nás čeká logika naší aplikace. Jelikož mám radši CoffeeScript, tak budu psát v něm, ale moc kódu to není. Myslím si, že to bude čitelné i pro lidi, co ho neznají.
Vytvoříme si soubor app.coffee.
# file: /js/coffee/app.coffee
app = angular.module 'csfd', ["ngRoute"]
# nastevní routování a šablon
app.config(["$routeProvider", ($routeProvider)->
$routeProvider
.when("/", {
templateUrl: "partials/home.html"
controller: "indexCtrl"
})
.when("/movie/:id", {
templateUrl: "partials/detail.html"
controller: "movieCtrl"
})
.otherwise({
redirectTo : "/"
})
return
])
# hlavní controller - vyhledávání z úvodní stránky
app.controller("indexCtrl", ["$scope", "$http", ($scope, $http)->
$scope.search = ()->
$http.get("http://csfdapi.cz/movie?search=" + encodeURIComponent($scope.movieName)).success((data)->
$scope.data = data
return
)
return
])
# controller detailu - zobrazení podrobností o filmu
app.controller("movieCtrl", ["$scope", "$http", "$routeParams", ($scope, $http, $routeParams)->
$http.get("http://csfdapi.cz/movie/" + $routeParams.id).success((data)->
$scope.data = data
return
)
])
Dal jsem vše do jednoho souboru, protože mi u takhle malé aplikace přijde zbytečné to dělit. V první části máme router, který nám podle adresy vybírá patřičný controller se šablonou. Pak jsem si vytvořil dva controllery – první má jen metodu pro hledání filmů, které se pak vypíší do šablony. Druhý pak zobrazuje detailní informace o filmu.
Kompilujeme
Tím by měla být naše aplikace kompletní. Teď je na čase ji zkompilovat – nejdříve testovací build, který si budeme moci vyzkoušet, a pokud bude vše podle představ, tak ji můžeme podepsat a zkompilovat pro zveřejnění do GooglePlay.
Pro testovací build stačí jít do konzole (do rootu projektu) a spustit cordova build android, po pár vteřinách kompilování (a hlášce o úspěšném buildu) můžeme najít výsledné apk ve složce /platforms/android/ant-build/csfd-debug.apk
Build podepsané aplikace
Pro možnost publikace v GooglePlay je potřeba aplikaci nejdříve podepsat a poté znovu zkompilovat. Pro podepsání využijeme keytool, který je dodáván s androidím SDK, do terminálu pak napíšeme toto:
// cesta kam se uloží alias $ keytool -genkey -v -keystore ./csfdapp.keystore -alias csfdapp -keyalg RSA -keysize 2048 -validity 100000
Poté budeme vyzvání k vyplnění hesla, pár údajů o nás a nakonec potvrdíme znovu tím samým heslem. Teď potřebujeme údaje o naší klíčence předat Cordově. To provedeme jednoduše tak, že si vytvoříme soubor /platforms/android/ant.properties, kam napíšeme:
key.store=/Users/Twista/Work/local/csfdapp/csfdapp.keystore key.alias=csfdapp
Pozn.: je potřeba pozměnit cesty.
Teď už můžeme celý projekt zkompilovat pro release, tedy opět do terminálu a napíšeme
$ cd platforms/android $ ant release
A teď pokud vidíte hlášku o úspěšném buildu, můžete nalézt svoji podepsanou aplikaci ve složce /platforms/android/bin/csfd-release.apk a můžete ji nahrát do GooglePlay.
náhled aplikace
Závěr
Cílem bylo ukázat, že vývoj takové aplikace může být jednoduché, i když se nejedná přímo o nativní aplikace. Jsou k dispozici spousty nástrojů, které nám vývoj usnadňují a pomáhají a kromě již zmíněných jich lze najít více. Doufám že se vám článek líbil a přidávám ješte odkaz do repozitáři, kde je celá ukázka.
Opravdu moc pekna prakticka ukazka a minimalisticky clanek. Autorovi diky.
díky :)
Skvělá práce, Michale!
Nechceš napsat i nějaký úvod do chrome extensions v AngularJS? Je to dost zajímavé téma si myslím.
Díky.
Co se týče chrome extension, tak to máš pravdu, zajímavé by to asi bylo (a pár takoých i je) ikdyž většinou se to asi týka spíš hosted apps (což je technicky vzato podmnožina chrome extension) :)
Ďakujem za zaujímavý článok, ale mám problém s inštaláciou. Používam ubuntu a node mám cez nvm. Neviete mi náhodou poradiť, v čom by mohol byť problém? Ďakujem.
Ahoj,
Vypadá to že cordova potřebuje ješte ant,
zkus mrknout sem, to by to mělo vyřešit :)
http://stackoverflow.com/a/20333029/1649965