Přidat článek mezi oblíbenéZasílat nové komentáře e-mailem Naprogramujte si vlastní android aplikaci (bez znalosti Javy)

V tomto článku najdete základní informace o programování vlastní aplikace pro operační systém Android. Nepoužijeme Javu, ale vystačíme si s kombinací HTML + CSS + Javascript. Článek není návodem pro neprogramátory „jak programovat“ a už vůbec ne tutoriál krok-za-krokem. Cílem článku je ukázat cestu, po které se lze vydat.

Předpokládá se, že čtenář je relativně počítačově zdatný a schopný řešit vzniklé problémy.

0. Nativní a hybridní aplikace

Všeobecně známým jazykem pro Android je Java; co už tolik známé není, je fakt, že lze úspěšně vyvíjet androidí aplikace jen s použitím HTML + CSS + Javascript.

Mobilní androidí aplikace (pro mobily a tablety) lze rozdělit na nativní (napsány v Javě) a hybridní (HTML, CSS, Javascript + převod do jako-nativní podoby). Hybridní aplikace sice nemají takový výpočetní výkon jako ty nativní, v praxi to ale nijak vadit nemusí.

1. Úvod, aneb chci to jen zkusit

Tato část se zabývá jen rychlým úvodem, bez zbytečných technických podrobností. Opět opakuji: předpokládá se, že čtenář je relativně počítačově zdatný.

HTML je značkovací jazyk, který se používá na (webové) HTML stránky. Dá se říct, že pomocí HTML tagů nějak zobrazíme obsah stránky. CSS dodá (lepší) vizuální podobu webové stránky. A Javascriptem zajistíme „logiku“, tj. aby aplikace dokázala vůbec něco dělat.
Pokud tedy už máte alespoň nějaké znalosti HTML, CSS a Javascriptu, máte otevřenou cestu k naprogramování vlastní aplikace.

a) napsání kódu

Při programování lze použít i ten nejobyčejnější textový editor Poznámkový blok, jenže ten nám práci s kódem vůbec neusnadní. Naopak, existují skvělá vývojová prostředí, za všechny jmenujme Eclipse, NetBeans a Intel XDK (viz dále v textu). Umí zvýrazňovat syntaxi, mají „našeptávač kódu“, upozorní na (některé) chyby atd.

Primárně tedy budeme psát náš kód na PC, kde bude současně probíhat i ladění naší aplikace – a to v prohlížeči (Chrome, Opera, Firefox, IE) s povoleným prováděním Javascriptu. Až budeme s výsledkem spokojeni (nebo budeme chtít vidět, jak aplikace vypadá v reálu), „přeložíme“ ji do jako-nativní podoby a stáhneme ji do telefonu.

Naše aplikace tedy obsahuje tři fyzické soubory: HTML, CSS, Javascript; např. index.html, style.css a app.js. Máme vyzkoušeno, že v prohlížeči na PC vše funguje tak, jak má.

b) převod do jako-nativní podoby

Pro první seznámení se s převedením aplikace do podoby spustitelné na telefonu (tabletu) stačí nainstalovat vývojové prostředí Intel XDK, zaregistrovat se (email, heslo) a založit nový projekt a naimportovat existující soubory naší aplikace (cesta k souborům index.html, style.css a app.js).
[http://pc.poradna.net/file/view/19029-pict-01-png][http://pc.poradna.net/file/view/19030-pict-02-png]
Na záložce Develop najdeme náš zdrojový kód.
[http://pc.poradna.net/file/view/19031-pict-03-png]
Na záložce Build zvolíme, jakým způsobem se nám naše aplikace převede do podoby apk souboru (spustitelné na telefonu a tabletu).
[http://pc.poradna.net/file/view/19032-pict-04-png]
Možností je více, doporučím vyzkoušet nejprve Crosswalk for Android (1); pokud se něco zadrhne, pak Cordova for Android (2) a jako poslední možnost Android (3).

Klepnutím na tlačítko Build se odešlou zdrojové soubory (index.html, style.css a app.js) na server Intelu a lze nastavit některé vlastnosti a parametry naší aplikace:
[http://pc.poradna.net/file/view/19033-pict-05-png]
Pokud je na všech záložkách zelené zatržítko, lze spustit překlad tlačítkem Build App Now.
[http://pc.poradna.net/file/view/19034-pict-06-png]
V prostředí XDK se po chvíli objeví odkaz na stažení apk souboru (je možné, že bude zabalen v ZIP archivu). Tento soubor tedy uložíme na disk do PC.

c) uložení aplikace do telefonu (tabletu)

Klasicky se aplikace instalují z Google Play (dříve Android Market). My se ale vydáme jinou cestou.
Rychlý návod:
Povolit instalování aplikací z "neznámých zdrojů" - bod 3. na stránce http://www.androidmarket.cz/navod/instalovani-apli kaci-do-androida-pro-zacatecniky-i-pokrocile/
Připojit telefon s Androidem k PC
Zkopírovat aplikaci (soubor *.apk) do mobilu
Přes správce souborů v mobilu spustit instalaci aplikace (soubor *.apk)

Na závěr nezbývá než se pyšně kochat :-) Ovšem, něco tomu chybí…

2. Zajímavé, chci znát víc

Předchozí kapitola byla vlastně jen rychlým seznámením „jak na to“, bez hlubších souvislostí a informací. Teď si poodhalíme víc.

a) profi vzhled aplikace

Aby aplikace vypadala profesionálně, lze použít některý z mnoha CSS frameworků, namátkou třeba Bootstrap, Onsen UI nebo Ionic. Nebo lze využít i App Designer obsažený v Intel XDK a v něm vybrat příslušný framework (na výběr je z několika možností):
[http://pc.poradna.net/file/view/19035-pict-07-png][http://pc.poradna.net/file/view/19036-pict-08-png]
Psaní aplikace pak může probíhat ve dvou režimech: psaní kódu (tlačítko Code) a návrhové zobrazení (tlačítko Design).
[http://pc.poradna.net/file/view/19037-pict-09-png]

Výhodou CSS frameworků je konzistentní grafická podoba; pokud zvolíme framework přímo určený pro mobilní aplikace (patří sem Onsen UI nebo Ionic), pak již máme připraveno hotové řešení.

b) …aby to umělo něco pořádného!

Zdálo by se, že použitím kombinace HTML + CSS + Javascript vlastně nemůžeme naprogramovat něco opravdu „androidího“, tedy že jsme omezeni jen na nějaké to sčítání čísel nebo zobrazení času. Nic není tak vzdáleno pravdě.

Existují totiž řešení, jak v naší aplikaci zpřístupnit i funkce telefonu (tabletu), jako fotoaparát, telefonní seznam, interní paměť, geolokaci, akcelerometr atd. Mezi populární platformy se řadí Cordova nebo Crosswalk. S jejich pomocí tedy zpřístupníme androidí funkce telefonu (tabletu) v naší aplikaci.

Můžeme si tedy napsat vlastní aplikaci, která umožní pořídit fotografii a doplnit ji hlasovým komentářem, můžeme si zobrazit telefonní seznam, zjišťovat aktuální polohu, používat vibrace atd.

Záleží jen na představivosti…

c) něco lepšího než Javascript (?)

Existuje pro psaní aplikací (HTML + CSS + Javascript) něco lepšího než Javascript? Ano, je to… (překvapivě) Javascript :-)
Pro vysvětlení: američan (původem ze Slovenska) Miško Hevery vytvořil legendární a (skoro se chce říct magickou) knihovnu AngularJS. Pokud je vám znám pojem MVC architektura (model, view, controller), pak víte vše :-)
Pomocí Angularu lze vyvíjet aplikace v Javascriptu velmi rychle a pohodlně, s podstatně menším kódem. Může ho použít jak relativní začátečník a vzít si z Angularu jenom maličko. Nebo se ho chytne profík a ponoří se opravdu do hloubky a dokáže divy :-)

3. Chci to dotáhnout do konce

a) vývojové prostředí

Lze použít již výše zmíněný Intel XDK, kde není nutné se starat o vlastní konfiguraci, vše je již funkční po úspěšném přihlášení se.

Další možností je nepoužívat služeb Intelu a spolehnout se na vlastní PC. Pak lze instalovat např. NetBeans, Java JDK, Android SDK Tools, Cordova a hlavně – vše správně nakonfigurovat.
Poznámka: konfigurace těchto SW nemusí být triviální, autor strávil nespočet času a nervů, než se mu podařila funkční konfigurace.

b) ikona

Každá android aplikace je v telefonu reprezentována ikonou. Pokud nechceme výchozí a nic neříkající ikonu, nezbývá než vytvořit vlastní. Pro začátek je možné udělat návrh velkého (!) obrázku, řekněme 400px na 400px a webovou službu, která zajistí ikony pro různé rozlišení telefonu. Jednou z nich je Launcher Icon Generator.

c) překlad do apk

Cordova (aktuální verze: 3.5.0) umožní převedení aplikace do podoby apk souboru. Pro zpřístupnění funkcí telefonu je nutné použít pluginy, které se (po jednom) podle potřeby přidají do projektu.

Ještě více možností (zejména podpora nejnovějších technologií) je umožněna překladem přes Crosswalk.

Důležitým místem pro překlad je soubor AndroidManifest.xml a config.xml

Poznámka: aplikaci lze přeložit buď jako „debug“ nebo jako „release“.

d) umístění na Google Play

Ve zkrace: je nutné se zaregistrovat, zaplatit jednorázový poplatek (aktuálně $25), pro každou aplikaci mít nejen výsledný apk soubor (ideáně s vlastní ikonou), ale i náhledy aplikace z telefonu (tabletu), logo velikosti 512px na 512 px, vymyslet rozumný název, vhodně ji popsat.

e) jak to může vypadat?

Následuje několik náhledů z mé aplikace Vectors 2D, která je napsána v HTML + CSS + Javascript, na platformě Cordova, s využitím frameworku Ionic a knihovny AngularJS.
[http://pc.poradna.net/file/view/19040-pict-10-png][http://pc.poradna.net/file/view/19041-pict-11-png]
[http://pc.poradna.net/file/view/19042-pict-12-png][http://pc.poradna.net/file/view/19043-pict-13-png]
[http://pc.poradna.net/file/view/19044-pict-14-png][http://pc.poradna.net/file/view/19045-pict-15-png]
[http://pc.poradna.net/file/view/19046-pict-16-png]

Ptejte se... :-)

Jsou zobrazeny jen nové komentáře. Zobrazit všechny
Předmět Autor Datum
Akoze robotu uznam ale je to na dve pice radsej si mohol hodit odkaz na video a nie ako idiot sa hra…
Outlast830 19.07.2014 16:14
Outlast830
? Dyk tu jsou odkazy na videa. Nehlede na to, ze osobne mam radeji navody se screenshoty, jelikoz vi…
krata-mobil 19.07.2014 16:48
krata-mobil
asi máš nízku inteligenciu
Outlast830 19.07.2014 17:03
Outlast830
zato ty jsi hotový ajnštajn, bohužel mezi jinými hromadami hnoje, ty první cenová skupino! rovnou j… nový
touchwood 24.07.2014 10:57
touchwood
Aaa, panko bude odbornik na tie odpadky a pice!
2laak 19.07.2014 16:54
2laak
Tak urcite tieto vase prkotinky vam do zivota nic nedaju radsej sa venujte rodinam a az nemate tk ra…
Outlast830 20.07.2014 00:17
Outlast830
Vdaka za skvele rady a obraz tej vasej "inteligencie". :beer: nový
2laak 20.07.2014 05:10
2laak
Zvolil som vhodne slova. PS: pivo mi nechuti. nový
Outlast830 20.07.2014 10:21
Outlast830
Aj ja som skusil konvertovat jednoduchu stranku, ciste html a css - vyliezla z toho appka s velkosto… nový
2laak 21.07.2014 20:21
2laak
K tomu budu potřebovat víc info. Záleží na tom, jakým způsobem přesně došlo k tomu převedení do apk… nový
Pavel 21.07.2014 21:02
Pavel
Pouzivam Intel XDK, splashscreeny ani ikony tam nemam, je tam niekolko obrazkov, na disku zabera cel… nový
2laak 21.07.2014 21:14
2laak
Skusil som Cordovu, aplikacia ma uz len 500kB, neviem vsak ako tam nastavit splashscreen (aplikacia… nový
2laak 21.07.2014 21:39
2laak
Rá bych ti odpověděl víc, jenže já ten XDK nepoužívám. Mám instalovanou a konfigurovanou tu šílenost… nový
Pavel 21.07.2014 21:43
Pavel
Ked aj nieco pomoze to svetu a zarobis tak vtedy sa chvastaj lebo nam ostatnym je to uz trapne vypis… nový
Outlast830 21.07.2014 22:50
Outlast830
Já to udělal takto [http://pc.poradna.net/file/view/19218-intel-xdk-ik ona-gif] nový
Kráťa 22.07.2014 08:32
Kráťa
Já to mám asi 11 stránek HTML, CSS, dva splasch (tablet i mobil), ikoma, pozadí (přes celou stranu),… nový
Kráťa 22.07.2014 08:47
Kráťa
Článek na tohle téma je dnes na www.zdrojak.cz nový
Tomix 01.08.2014 15:46
Tomix
odkaz na článek - www.zdrojak.cz nový
Tomix 10.08.2014 14:42
Tomix
Takový přehled možností se určitě hodí. Pro složitější appky ale člověk brzy narazí na limity, samo… nový
Jackx 03.01.2015 14:55
Jackx
Článek sice super, program k ničem... Nevidím sebemenší důvod, proč by se měl zdroják odesílat někam… nový
Kolemjdoucí 13.11.2015 15:41
Kolemjdoucí
To si musí každej zvážit sám. Já vycházím z téhle logiky: prostředí Intel XDK vyvinuli programátoři… nový
Pavel 22.11.2015 12:54
Pavel
Navíc, použití Intel XDK pro přeložení aplikace pro cílovou platformu (Android, iOS) vůbec není potř… nový
Kolemjdoucí 18.01.2016 20:37
Kolemjdoucí
Např. PhoneGap či Cordova. nový
Pavel 09.02.2016 21:52
Pavel
Publikoval jsem videokurz AngularJS pro začátečníky V kurzu postupně od úplných základů naprogramuj… nový
Pavel 23.12.2015 17:17
Pavel
Sleva 33% na videokurz AngularJS 1.x pro začátečníky Videokurz je česky, bohatě komentován slovně i… nový
Pavel 09.02.2016 21:55
Pavel
Jsou ta videa opatřena titulky? Nedávno jsem se přihlásil na 7 free lekcí v SEO škole. Všechno to mě… nový
Kráťa 10.02.2016 10:29
Kráťa
Kráťo, chápu tvůj problém. Tohle je soukromá iniciativa, jsou to natočený videa z pracovní plochy, k… nový
Pavel 11.02.2016 15:34
Pavel
No ona se má věc tak, že to je komerční zpoplatněná záležitost, takže se to toho zákona týká docela… nový
Kráťa 12.02.2016 07:52
Kráťa
Kráťo a jseš si jistej, že videokurz provozovanej na webu s nabídkou videokurzů spadá pod tebou zmín… nový
Pavel 13.02.2016 18:53
Pavel
On je ten zákon špatně napsaný, není v něm spousta věcí ošetřených a dá se vykládat tak, či onak. Zá… nový
Kráťa 14.02.2016 10:37
Kráťa
Videokurz zdarma o programování hybridních mobilních aplikací, Intel XDK + Ionic: Mobilní aplikace:… nový
Pavel 28.02.2016 20:47
Pavel
Další videokurz týkající se programování mobilních aplikací: Mobilní aplikace: Intel XDK + Ionic, r… nový
Pavel 05.03.2016 13:34
Pavel
Online videokurz zdarma: Vlastní mobilní aplikace I poslední
Pavel 11.02.2018 18:59
Pavel

?
Dyk tu jsou odkazy na videa. Nehlede na to, ze osobne mam radeji navody se screenshoty, jelikoz video musim zastavit/zase pustit, pripadne v nem hledat, kdezto navod s obrazky si proste posunu koleckem mysi.
Ve videich se take casto neco rika, ale titulky u toho nejsou a kdyz mas vypnuty zvuk (napr. v noci), nevis co se rika (a ze se neco rika). V clanku je "rikani" napsane.
Nebo jsem tvuj prispevek nepochopil?

K tomu budu potřebovat víc info.

Záleží na tom, jakým způsobem přesně došlo k tomu převedení do apk. Já používám lokálně instalovanou Cordovu a moje app mají pod 1 MB se vším všudy. Tu velikost může zapříčinit několik faktorů, např. splashscreen, ... Nebo pokud to překládáš přes XDK a jako build máš Crosswalk - pak zkus build Cordova.

Aby se to nezoomovalo, přidej do hlavičky HTML souboru:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Rá bych ti odpověděl víc, jenže já ten XDK nepoužívám. Mám instalovanou a konfigurovanou tu šílenost (Android Studio, Java, node.js, Cordova, ant, NetBeans).

Ale řekl bych, že v tom XDK se dá nastavit, předtím než se spustí "build" další podrobnosti a mezi nima určitě bude i možnost nastavit ikony nebo splashscreen.

Zkus zapátrat po nějakým tutoriálu, třeba na youtube.

Takový přehled možností se určitě hodí.

Pro složitější appky ale člověk brzy narazí na limity, samozřejmě. Co tedy dál, když chce tvořit aplikace a nechce se trápit s Javou?

Určitě stojí za to zkusit nějaké vizuální nástroje pro vývoj. Třeba pro hry, výukové appky a animace se dá použít GameStylus index-cz-2-8 - s on-line editorem i bezplatným enginem. Výsledek pak může vypadat třeba takhle: https://play.google.com/store/apps/details?id=com. bispiral.gs8&hl=cs.

To si musí každej zvážit sám.

Já vycházím z téhle logiky: prostředí Intel XDK vyvinuli programátoři v Intelu; ti jsou natolik zdatní, že nemají potřebu "hrabat" se ve zdrojácích těch, kteří Intel XDK používají.

Navíc, použití Intel XDK pro přeložení aplikace pro cílovou platformu (Android, iOS) vůbec není potřeba, jde to zařídit jinými prostředky.

Jsou ta videa opatřena titulky? Nedávno jsem se přihlásil na 7 free lekcí v SEO škole. Všechno to měli rovněž jako videa a bez titulků (ačkoli je v zákoně, že vyžádaný mediální obsah má mít titulky), takže jsem z toho nevěděl ani "ň", jelikož jsem na ta videa ani nekoukal, když jsem nevěděl, co se tam říká.

No ona se má věc tak, že to je komerční zpoplatněná záležitost, takže se to toho zákona týká docela dost.
Ale poskytovatelé mediálního obsahu na vyžádání většinou vůbec netuší. Abyste to případně nemuseli hledat, tak Je to zákon č. 132/2010 Sb.
10-132.htm
(4) Poskytovatel audiovizuální mediální služby na vyžádání je povinen tam, kde je to účelné, poskytnout k pořadu otevřené titulky nebo skryté titulky6) nebo tlumočení do českého znakového jazyka7) pro osoby se sluchovým postižením a zvukovou stopu určenou pro osoby se zrakovým postižením, má-li je k dispozici, nebo jinak zajistit, aby některé pořady poskytované v rámci audiovizuální mediální služby na vyžádání byly přístupné osobám se sluchovým postižením a osobám se zrakovým postižením.
To by ale měla vědět a ohlídat firma, která za to inkasuje.
No a není to můj problém (ani tvůj - nejsme poskytovatelé), nýbrž problém toho, kdo to provozuje. :-)

Každopádně díky za odpověď. Jsem jsem se tak zeptal, jelikož jsem "osvětátor".

Zpět na články Přidat komentář k článku Nahoru