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

Registrovaný Pavel, , Mobily, 62 komentářů (50316 zobrazení)

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... :-)

Předmět Autor Datum
Trapas
Daniell 12.07.2014 09:20
Daniell
Zase se tolik nekritizuj.
Wikan 12.07.2014 11:55
Wikan
Popravdě jsem nevěděl že se dá funkční aplikace s pěkným UI udělat i takto. Díky za rozšíření znalos…
albru123 12.07.2014 12:08
albru123
Přesně tohle byl důvod pro napsání článku. Na webu je spousta info "programujte v Javě", ale v češti…
Pavel 12.07.2014 12:18
Pavel
Já se pořád když je čas učím tu Javu ale k reálné appce jsem se zatím nedostal. Doufám že snad příšt…
albru123 12.07.2014 14:37
albru123
Budu rád, když se podělíš o info z vývoje. Spuštění aplikace trvá dlouho, tak 2-3 sekundy (myslím t…
Pavel 12.07.2014 15:26
Pavel
No hurá :-)
Squad_leader 12.07.2014 22:23
Squad_leader
Super článek. Konečně zkusím něco sesmolit. HTML+CSS umím, javascript částečně. Není někde web, co s…
Kráťa 14.07.2014 08:55
Kráťa
Díky. Ono to není tak, že je Javascript pro Android. Je jen jeden Javascript a je jedno, jestli jeho…
Pavel 14.07.2014 12:21
Pavel
Blbě jsem se vyjádřil. Že je jeden javascript mi je jasné. Měl jsem na mysli, jestli neznáš nějaký w…
Kráťa 14.07.2014 13:30
Kráťa
Aha. No přiznám se, že jsem nikdy po webu s ukázkama Javascript kódu pro Android nepátral. Buď si pí…
Pavel 14.07.2014 13:51
Pavel
Cili vlastne dotaz. Lze pouzit nekolik navzajem prolinkovanych souboru (to schema), nebo by muselo b…
krata-mobil 14.07.2014 14:04
krata-mobil
Může se vlastně cokoli :-) Pokud ale budeš mít víc souborů a provážeš je linkama, pak je otázka, zda…
Pavel 14.07.2014 15:26
Pavel
Ja to vyzkousim. Dam do stranek tl. Back v CSS a javascriptu (back history) a klasicke androidi by m…
krata-mobil 14.07.2014 16:02
krata-mobil
No tak zrovna tohle ošetření zda se má navigovat zpět či ukončit aplikaci (v androidu) jsem řešil př…
Pavel 14.07.2014 16:17
Pavel
Super clanok. Vedel som, ze sa daju appky robit aj pomocou HTML+CS+JS, ale nidky som okolo toho viac…
wam_Spider007 14.07.2014 16:42
wam_Spider007
Díky. Tak s Javou a přístupem k ní jsme na tom stejně :-) Tykáme si, OK. Já primárně/výhradně dělám…
Pavel 14.07.2014 17:16
Pavel
urcite vyskusam. inak divil by si sa, ale do iOS je mozne dostat appky bez appstore celkom jednoduch…
wam_Spider007 14.07.2014 17:58
wam_Spider007
Protože to některý z vás evidentně zaujalo, trocha info navíc (možná se budu někde opakovat): 1) Na…
Pavel 14.07.2014 23:02
Pavel
Wau ! Výborný článok, toto sa mi zrovna hodí. Určite vyskúšam, už len doucit sa ten javascript.
2laak 16.07.2014 05:01
2laak
Já včera skončil u registrace Intel XDK. Nejdříve se jim nelíbilo heslo, potom zase že prý není plat…
Kráťa 16.07.2014 10:13
Kráťa
destination folders- C:\Users\Villiers\AppData\Local\Intel\XDK - utíká, jak směšné. heslo dej min 8…
kmochna 16.07.2014 11:12
kmochna
Já to nainstaloval jinam. Heslo zkusím XgB35@mNJf5(69#4%71VgF. Snad to nedopadne takto Registrace u…
Kráťa 16.07.2014 11:36
Kráťa
:)) kdyžtak pm, poskytnu ti mé heslo.
kmochna 16.07.2014 11:43
kmochna
Jupí. To je debilní heslo. Jdu zkusit to technologické schema.
Kráťa 16.07.2014 18:48
Kráťa
Už jsem udělal i apku. Ale podělalo mi to diakritiku (mám to v 1250), tak to zkusím udělat v utf-8.…
Kráťa 16.07.2014 19:06
Kráťa
U mna to s tym vyberom hesla dopadlo rovnako, asi na 7-8 pokus to vzalo heslo, ktore som okamzite za…
2laak 19.07.2014 09:22
2laak
To nemá chybu. Díky Pavle za článek. Můj zdařilý pokus (a má to i ikonu) http://krata.bubakov.net/ww…
Kráťa 16.07.2014 23:45
Kráťa
Díky za zajímavý a přínosný článek! :beer:
host 17.07.2014 22:23
host
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
Ano, neumím si zapamatovat vše z pětiminutového videa.
krata-mobil 19.07.2014 17:31
krata-mobil
zato ty jsi hotový ajnštajn, bohužel mezi jinými hromadami hnoje, ty první cenová skupino! rovnou j…
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:
2laak 20.07.2014 05:10
2laak
Zvolil som vhodne slova. PS: pivo mi nechuti.
Outlast830 20.07.2014 10:21
Outlast830
Aj ja som skusil konvertovat jednoduchu stranku, ciste html a css - vyliezla z toho appka s velkosto…
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…
Pavel 21.07.2014 21:02
Pavel
Pouzivam Intel XDK, splashscreeny ani ikony tam nemam, je tam niekolko obrazkov, na disku zabera cel…
2laak 21.07.2014 21:14
2laak
Skusil som Cordovu, aplikacia ma uz len 500kB, neviem vsak ako tam nastavit splashscreen (aplikacia…
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…
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…
Outlast830 21.07.2014 22:50
Outlast830
Já to udělal takto [http://pc.poradna.net/file/view/19218-intel-xdk-ik ona-gif]
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),…
Kráťa 22.07.2014 08:47
Kráťa
Článek na tohle téma je dnes na www.zdrojak.cz
Tomix 01.08.2014 15:46
Tomix
odkaz na článek - www.zdrojak.cz
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…
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…
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…
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ř…
Kolemjdoucí 18.01.2016 20:37
Kolemjdoucí
Např. PhoneGap či Cordova.
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…
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…
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ě…
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…
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…
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…
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á…
Kráťa 14.02.2016 10:37
Kráťa
Videokurz zdarma o programování hybridních mobilních aplikací, Intel XDK + Ionic: Mobilní aplikace:…
Pavel 28.02.2016 20:47
Pavel
Další videokurz týkající se programování mobilních aplikací: Mobilní aplikace: Intel XDK + Ionic, r… poslední
Pavel 05.03.2016 13:34
Pavel

Popravdě jsem nevěděl že se dá funkční aplikace s pěkným UI udělat i takto. Díky za rozšíření znalostí ;-)

Přesně tohle byl důvod pro napsání článku. Na webu je spousta info "programujte v Javě", ale v češtině není moc info o tom, že to jde i jinak.

A opravdu se tímto způsobem dělají reálné aplikace (i s umístěním na Google Play), není to jen taková zajímavá hračka. Je ale pravdou, že profi aplikace se programují jako nativní v Javě.

Rád jsem pomohl :-)

Já se pořád když je čas učím tu Javu ale k reálné appce jsem se zatím nedostal. Doufám že snad příští týden ...
Každopádně jak je to s odezvou toho UI, je to hned jako u nativní aplikace?

Budu rád, když se podělíš o info z vývoje.

Spuštění aplikace trvá dlouho, tak 2-3 sekundy (myslím tím spuštění, ne aktivace na poprředí, běží-li již) . Jinak je aplikace normálně rychlá, odezva mi přijde OK. Některý ovládací prvky (třeba toggle z Ionicframework mají nastavenu animaci s prodlevou).

Podívej se do pošty, poslal jsem ti soukromou zprávu.

Super článek. Konečně zkusím něco sesmolit. HTML+CSS umím, javascript částečně. Není někde web, co se věnuje javascriptům pro Android, typu kalkulačka, hodiny, kalendář? Že by tam mohly být i tyto jednoduché scripty ke stažení a lépe by se do toho vniklo?

Díky.
Ono to není tak, že je Javascript pro Android. Je jen jeden Javascript a je jedno, jestli jeho kód běží v prohlížeči na PC, v prohlížeči na Androidu nebo (jako v tomhle případě) uvnitř aplikace udělané z HTML + CSS + Javascript.

Nebo máš asi na mysli práci přímo s androidími funkcemi pro hodiny a kalendář?

Blbě jsem se vyjádřil. Že je jeden javascript mi je jasné. Měl jsem na mysli, jestli neznáš nějaký web, který se věnuje javascriptům vhodným pro Android.
Uvedu raději příklad. Třeba tahle blbůstka (nefungovala mi ve FF) ukazka.php
animované hodiny, co jsou vlastně z kursoru. To je na dotykový telefon nepoužitelné, jelikož tam žádný kursor není.
Tak jestli právě neznáš nějaký webík, kde nejsou javascripty, jenž jsou na Androidu v podstatě nepoužitelné.
Jde o to, vyzkoušet si to s již něčím hotovým a pak se "zdokonalovat".

edit// Nebo jestli jde javascriptem vyvolat třeba kontakty uložené v teefonu

edit2// Nebo jestli by v tom šlo udělat třeba tohle
http://krata.bubakov.net/www/schema-vzorneho-potom ka/01.html
(několik HTML souborů vše v CSS + javascript)

Aha. No přiznám se, že jsem nikdy po webu s ukázkama Javascript kódu pro Android nepátral. Buď si píšu vlastní kód, nebo když nevím jak dál, hledám konkrétní řešení.

1) animovaná ukázka hodin mi nefunguje ani v Opeře
2) kontakty z telefonu určitě použít jdou, ale k tomu je potřeba platforma Cordova (je to trochu zmíněno v článku); jenže to by ses do toho musel ponořit do hloubky
3) není problém, tohle lze určitě zprovoznit :-)

Cili vlastne dotaz. Lze pouzit nekolik navzajem prolinkovanych souboru (to schema), nebo by muselo byt vse v tom indexu ve scriptu s podminkami a zapisem v javascriptu (document write)? Jdou pouzit obrazky ( napr. pozadi prvku)?

Může se vlastně cokoli :-) Pokud ale budeš mít víc souborů a provážeš je linkama, pak je otázka, zda ti nebude vadit, že android tlačítko "Back" (s vysokou pravděpodobností) bude procházet ty stránky v opačným pořadí.

To by se muselo vyzkoušet.

Já to mám vše v jednom souboru index.html a podle podmínky nějakou část buď zobrazím nebo ne. Nedělám to ale v "čistým" Javascriptu, ale používám právě tu magickou knihovnu AngularJS. Na youtube lze najít spoustu návodů a tutoriálů, co jde s tím angularem všechno (a elegantně) dělat. Akorát to trvá, než to člověk fakt pochopí.

Obrázy úplně bez problémů, stejně tak třeba SVG, (téměř) vše co zvládne moderní prohlížeč na PC.

No tak zrovna tohle ošetření zda se má navigovat zpět či ukončit aplikaci (v androidu) jsem řešil přes fóra a nenašel jsem nic co by mi fungovalo.

To ale mluvím už o situaci, kdy to HTML+CSS+Javascript převedu do spustitelné APK android aplikace.

Vyzkoušej a uvidíš.

Pokud se tím chceš pro začátek zabývat (naprogramovat si vlastní app), pak opravdu doporučuju Intel XDK řešení (v článku). Protože nakonfigurovat na svým PC dohromady node.js, cordovu, Javu, ant... to jsou fakt krušný chvíle plný trápení.

Super clanok. Vedel som, ze sa daju appky robit aj pomocou HTML+CS+JS, ale nidky som okolo toho viac nestudoval, i ked vzdy ma to bokom zaujimalo. Java ma totiz vobec nebere :).
Na tom XDK je aj moznost buildovat do iOS a WP8. Skusal si (snad mozem tykat) aj tieto moznost? Totiz robit len cisto droid appku uz dnes nema zmysel.

Díky.

Tak s Javou a přístupem k ní jsme na tom stejně :-)
Tykáme si, OK.
Já primárně/výhradně dělám appky pro android. Ani to XDK sám nepoužívám, mám tu hrůzo-kombinaci s nervama. Ale vím, že to XDK bez problémů vyrobí funkční app pro Android. Na základě toho se domnívám, že to jde bez problémů i pro ostatní platformy. Do iOS tu aplikaci jen tak nedostaneš (jde to, ale...) ani ho nemám a Win8/WinP8 už vůbec ne.

Ale jestli tě to zajímá, zkus to :-) a uvidíš.

urcite vyskusam. inak divil by si sa, ale do iOS je mozne dostat appky bez appstore celkom jednoducho. apple umoznuje hlavne firmam (ale moze to vyuzit ktokolvek) distribuovat vlastny interny soft len pre svojich zamestnancov - vsetko mimo oficialny store. a to sa da dobre vyuzit na testovanie pred vypustenim von.

Protože to některý z vás evidentně zaujalo, trocha info navíc (možná se budu někde opakovat):

1) Napsanou "webovou" aplikaci, tj. HTMl + CSS + Javascript lze pomocí XDK převést do jako-nativní podoby nejen pro android, ale i pro iOS, Windows 8, Windows Phone 8, Tizen, Amazon, Nook. A to z jednoho a toho stejného zdrojového kódu (HTML + CSS + Javascript).

Opravdu doporučím XDK, ušetříte si nervy a čas, věřte mi.

2) Vhodný CSS framework je např. Ionic - je aktivně vyvíjen, má finanční podporu, k dispozici fórum.
Jak použít komponenty a jak graficky vypadají na telefonu si lze prohlédnout v sekci Components.
Nebo velmi populární Bootstrap.

3) Místo klasického programování v Javascriptu doporučím knihovnu AngularJS - existují tutoriály na youtube pro začátečníky (vážně to stojí za to).

4) Výpočetní výkon těchto hybridních aplikací nedosahuje výkonu nativních, ovšem jako uživatel běžné aplikace nepoznáte rozdíl, takže je to reálně použitelné (tam, kde není požadován vysoký výpočetní výkon).

5) Lze použít téměř vše z nového HTML5, tj. téměř vše co umí moderní prohlížeč může umět i takto napsaná aplikace. Dají se použít obrázky PNG, vektorová grafika SVG, bitmapová grafika canvas...

6) Automaticky funguje otáčení při otočení mobilu/tabletu, mám na mysli orientace na výšku či na šířku; nebo si lze v aplikaci vynutit orientaci bez ohledu na fyzické otočení mobilu/tabletu. Pokud by např. aplikace divně vypadala v landscape mode, dá se vynutit vždy portrait mode (a naopak).

7) Aplikace může běžet jako fullscreen, tj. zabere celou plochu displeje; nebo v normálním režimu, kdy je vidět horní stavový řádek.

8) Nevím jak to řeší XDK, ale v ostatních ývojových prostředích lze ovlivnit překlad aplikace jako debug nebo release. Debug umožní klasické debugování.

9) Pokud by to někdo dotáhl až k publikování na Google Play (o ostatních platformách nic bližšího nevím), po formální stránce je téměř jakákoli aplikace OK a bez problémů publikovatelná. Žádnou zvláštní lidskou kontrolou (pravděpodobně!) neprochází.

10) HTML soubor nemusí být jen jeden, může jich být klidně víc; akorát se pak musí nějak uspokojivě vyřešit chování aplikace při stisknutí android tlačítka Zpět.

11) Použít androidí funkce umožní jak Crosswalk tak i Cordova, přičemž XDK podporuje určité verze jak Crosswalku tak i Cordovy.
Dají se pak použít vibrace, poloha GPS, telefonní seznam, atd. Zpřístupní se androidí funkce v Javascriptu, takže se pak prostě zavolá javascriptová funkce a je to :-)
Používají se jednotlivé pluginy, pro Cordovu např.:
battery status
camera
contacts
device
file
geolocation
media
Neustále vznikají další pluginy.

12) Dovolím si sem vložit odkaz na tři moje aplikace publikované na Google Play, pro představu jak to vypadá a jak to funguje:
a) Obvod, obsah, objem
b) bin dec hex
c) Vektory 2D

13) Do přílohy přikládám zazipovanou složku www, která obsahuje nezbytné soubory (+ framework Ionic), takže v případě zájmu můžete rovnou zkusit něco vytvořit :-)

Dotazy rád zodpovím :-)

Wau ! Výborný článok, toto sa mi zrovna hodí. Určite vyskúšam, už len doucit sa ten javascript.

Já včera skončil u registrace Intel XDK. Nejdříve se jim nelíbilo heslo, potom zase že prý není platný e-mail a ani na deset pokusů, či kolik to neschroupl.

destination folders- C:\Users\Villiers\AppData\Local\Intel\XDK - utíká, jak směšné.

heslo dej min 8 arabáků nebo latinky, 3 numči a speciálky aspoň dvě. zadaří se. taky jsem si se serverem povídal.:-D

Já to nainstaloval jinam. Heslo zkusím XgB35@mNJf5(69#4%71VgF. Snad to nedopadne takto

Registrace uživatele:
Zadejte uživatelské jméno!
Logik2
Zadejte heslo!
Jablko
Litujeme, heslo musí obsahovat minimálně 8 znaků!
Červené jablko
Litujeme, heslo musí obsahovat min. 1 číslici
1červenéjablko
Litujeme, heslo musí obsahovat min. jedno velké písmeno!
1ZASRANÉčervené jablko
Litujeme, heslo nesmí obsahovat za sebou následující velká písmena!
1ZasranéČervenéJablko, AneserMěUž!
Litujeme, heslo nesmí obsahovat diakritické znaky
1ZasraneZhnileCerveneJablkoAzdechniJakAniToNeprijm es
Litujeme, heslo už je obsazené!

Už jsem udělal i apku. Ale podělalo mi to diakritiku (mám to v 1250), tak to zkusím udělat v utf-8. Také musím předělat 01.html na index.html.

Akoze robotu uznam ale je to na dve pice radsej si mohol hodit odkaz na video a nie ako idiot sa hrabat v odpadkoch

?
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?

zato ty jsi hotový ajnštajn, bohužel mezi jinými hromadami hnoje, ty první cenová skupino!

rovnou jsem tomu mistrovi světa dal ban. (touchwood)

Tak urcite tieto vase prkotinky vam do zivota nic nedaju radsej sa venujte rodinam a az nemate tk raz za cas vymenit nocnik a vykefovat stolicku

Aj ja som skusil konvertovat jednoduchu stranku, ciste html a css - vyliezla z toho appka s velkostou 17MB, je to normalne?

Tiez sa chcem spytat, ako sa da zamedzit tomu, aby sa dala obrazovka aplikacie v telefone zvacsovat (zoomovat)?

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">

Pouzivam Intel XDK, splashscreeny ani ikony tam nemam, je tam niekolko obrazkov, na disku zabera cela zlozka 300kB. Zatial som konvertoval vzdy s Crosswalk-om, ako bolo v clanku odporucene, skusim Cordovu.

Skusil som Cordovu, aplikacia ma uz len 500kB, neviem vsak ako tam nastavit splashscreen (aplikacia spusta pomalsie, preto by bolo fajn ho tam vlozit) a ani ikony neviem kde pridat.

Ten meta-tag zajtra skusim, diky!

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.

Ked aj nieco pomoze to svetu a zarobis tak vtedy sa chvastaj lebo nam ostatnym je to uz trapne vypisovat a bludy

Já to mám asi 11 stránek HTML, CSS, dva splasch (tablet i mobil), ikoma, pozadí (přes celou stranu), obrázek pod tlačítka a má to 13,3 MB. Udělal jsem to jen "Android 4.2".

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.

Článek sice super, program k ničem... Nevidím sebemenší důvod, proč by se měl zdroják odesílat někam na server a někdo se měl hrabat v mém zdrojovém kódu..:-/

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.

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.

Například jaké ?

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

Kráťo, chápu tvůj problém. Tohle je soukromá iniciativa, jsou to natočený videa z pracovní plochy, kde slovně komentuju to co píšu + jsou tam komentáře v kódu.

Titulky nejsou k dispozici.

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

Kráťo a jseš si jistej, že videokurz provozovanej na webu s nabídkou videokurzů spadá pod tebou zmíněnej zákon?

Třeba na této stránce je vysvětlení či přiblížení pojmu "Poskytovatel audiovizuální mediální služby na vyžádání" a z toho se mi to teda nezdá.

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áleží na tom, kolik je na právníka. :-)
Jo, jednalo se nám především o ty různé internetové televize, ale třeba i o toto (protože jakákoli "potřebná" videa).

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