Přejít k navigační liště

Zdroják » JavaScript » Cordova, Ratchet a Angular – mobilní aplikace rychle a jednoduše

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

Ú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.

2014-07-31 07.36.12ná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.

Komentáře

Subscribe
Upozornit na
guest
6 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
radek

Opravdu moc pekna prakticka ukazka a minimalisticky clanek. Autorovi diky.

Kolemjdoucí

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.

Marek

Ď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.

marek@dell:~/www/test/csfdapp$ cordova platform add android
Creating android project...

/home/marek/.cordova/lib/android/cordova/3.5.1/bin/node_modules/q/q.js:126
                throw e;
                      ^
Error: An error occurred while listing Android targets
at /home/marek/.cordova/lib/android/cordova/3.5.1/bin/lib/check_reqs.js:87:29
at _rejected (/home/marek/.cordova/lib/android/cordova/3.5.1/bin/node_modules/q/q.js:808:24)
at /home/marek/.cordova/lib/android/cordova/3.5.1/bin/node_modules/q/q.js:834:30
....
Michal H

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

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.