Táto príručka vás naučí, ako vytvoriť hybridnú aplikáciu pomocou populárnej platformy PhoneGap na vytváranie aplikácií. Čo urobíme, je zmeniť váš web na nainštalovateľný súbor .apk (aplikácia pre Android), ktorý je možné nainštalovať na akýkoľvek telefón s Androidom. Po spustení aplikácia jednoducho otvorí váš web v natívnom prehliadači WebView pre Android, ale zobrazí sa ako aplikácia na celú obrazovku - bez navigačného panela s adresou URL alebo inej indície, že sa váš web zobrazuje v prehliadači.
Požiadavky
Váš vlastný web (pre účely nasledovania tohto sprievodcu by ste si mohli jednoducho založiť bezplatný blog WordPress)
Účet GitHub
Účet PhoneGap
Poznámkový blok ++ (alebo podobný softvér na úpravu textu, ktorý dokáže rozpoznať kód)
Softvér na úpravu fotografií na vytváranie ikon aplikácií (Photoshop, GIMP atď.)
Kódovacie šablóny
Toto sú šablóny kódov, ktoré môžete použiť na účely tejto príručky - pochádzajú z mojej vlastnej aplikácie vyvinutej pomocou PhoneGap, ale zbavil som ich mojich osobných údajov. Ich nastavenie od začiatku so všetkými správnymi parametrami mi trvalo mnoho dní riešenia problémov, preto ich poskytujem pre vaše pohodlie. Nie je začo!
> Konfigurácia.XML
> Register.HTML
Začíname
Vytvorte priečinok na pracovnej ploche a nazvite ho „ www: „ bez úvodzoviek. Toto bude hlavný adresár projektu, kde bude tvorca PhoneGap očakávať, že nájde všetky súbory pre váš projekt. Teraz vytvoríme ikonu vašej aplikácie.
Otvorte softvér na úpravu fotografií a vytvorte nový obrázok vo formáte .PNG. Vaše nastavenia obrázka by mali vyzerať takto:
A teraz môžete nakresliť svoju ikonu, napríklad urobím malé tlačidlo:
Veľkosť obrázka závisí od obrazovky vášho osobného telefónu, ale ak chcete vyvinúť aplikáciu pre viac zariadení, urobíte samozrejme viac veľkostí tej istej ikony. Tu je tabuľka použitých veľkostí obrázkov:
36 × 36 (120 dpi / LDPI)
48 × 48 (160 dpi / MDPI)
72 × 72 (240 dpi / HDPI)
96 × 96 (320 dpi / XHDPI)
144 × 144 (480 dpi / XXHDPI)
192 × 192 (640 dpi / XXXHDPI)
Nechcem príliš dlho hovoriť o veľkostiach obrazovky a DPI, len viem, že DPI do značnej miery koreluje s rozlíšením obrazovky. Telefón, ktorý používa rozlíšenie obrazovky 1080 × 1920, použije 480 dpi, ale nie je to tak nevyhnutne presne korelovať s veľkosťou obrazovky. Telefón môže mať 5,2 “alebo 6” obrazovku a rozlíšenie 1080 × 1920. Táto príručka sa však netýka obrazoviek smartfónov, takže poďme ďalej.
Po nakreslení ikony ju uložte ako ikona.png a presuňte ho do svojho priečinka www:. Toto sa stane predvolené ikona vašej aplikácie. Ak chcete vytvoriť ikony v rôznych veľkostiach, ktoré zodpovedajú rozlíšeniu obrazovky používateľa, uložili by ste ikonu v rôznych veľkostiach a názvoch, napríklad Icon144.png, Icon192.png, Icon96.png atď. Potom by ste upravili Konfig.xml súbor, ktorý ukazuje na každú jednotlivú ikonu. Poďme ďalej.
Teraz, keď máte ikonu svojej aplikácie, potrebujete úvodný obrázok. Jedná sa v podstate o obrazovku načítania, napríklad tapetu, ktorá sa zobrazuje pred načítaním aplikácie. Veľkosti úvodných obrázkov fungujú na rovnakom princípe ako ikony, sú však o niečo väčšie. Tu je tabuľka:
- LDPI:
- Portrét: 200 x 320 pixelov
- Na šírku 320x200px
- MDPI:
- Portrét: 320 x 480 pixelov
- Na šírku 480x320px
- HDPI:
- Portrét: 480x800px
- Na šírku 800 x 480 pixelov
- XHDPI:
- Portrét: 720px1280px
- Na šírku 1 280 x 720 pixelov
- XXHDPI:
- Portrét: 960px1600px
- Na šírku 1 600 x 960 pixelov
- XXXHDPI:
- Portrét: 1280px1920px
- Na šírku 1920x1280px
Vytvorte teda svoj úvodný obrázok v rozlíšení pre vaše zariadenie, uložte ho ako Splash.png a potom ju presuňte do priečinka projektu. Skvelé, teraz máte ikonu a úvodný obrázok svojej aplikácie. Prejdime k nastaveniu vašich konfiguračných a indexových súborov.
Vysvetlenie indexu HTML a konfigurácie XML
Súbor config.xml určuje prostredie zostavenia (Android, iPhone, Windows Phone), umiestnenie ikon a postriekania a doplnky Apache Cordova, ktoré chcete vo svojej aplikácii použiť.
Otvorte šablónu, ktorú som uviedol v programe Poznámkový blok ++, a v hornej časti uvidíte tieto riadky:
Aktualizujte tieto polia svojimi informáciami, nechajte však polia „preferencie“ na pokoji. Zvyšok konfiguračného súboru je samozrejmý, ak sa pozriete na hodnoty. Názov preferencie = „celá obrazovka“ napríklad hovorí aplikácii, aby sa spustila ako aplikácia na celú obrazovku. Nechajte všetko na pokoji, okrem tejto poslednej hodnoty v spodnej časti súboru:
Zmeňte to na svoju skutočnú adresu URL webových stránok. To umožní používateľovi aplikácie úplnú navigáciu na vašom webe a iba na vašom webe - počas používania vašej aplikácie nemôže opustiť váš web. Aplikácia samozrejme nebude mať navigačný panel s adresami URL, čo vlastne ani nie je znepokojujúce, ale tiež zaisťuje, aby mal používateľ prístup na všetky stránky na vašom webe. * Za webovou adresou webu je a divoká karta , čo v kódovacom žargóne znamená, že bude akceptovať všetko, čo je zadané namiesto znamienka *.
Ak chcete používateľa samozrejme obmedziť iba na určité stránky na svojom webe, mali by ste pridať samostatné hodnoty, ako je táto:
Prejdime k Index.html súbor, toto je chlieb masla, vďaka ktorému bude aplikácia skutočne fungovať. Otvorte ho v programe Poznámkový blok ++ a prepnite jazyk dokumentu na HTML. Čo v zásade robí index.html, je povedať prehliadaču Android, ako má zobraziť váš web - v mnou poskytnutej šablóne sú značky, ktoré z prehliadača odstránia navigačný panel s adresou URL, umožnia aplikácii ukončiť aplikáciu tlačidlom „späť“ a spustiť aplikácia po zobrazení úvodnej obrazovky. Riadok, ktorý chcete zmeniť, je tu:
var url = ‘http://yourwebsite.com’
Budovanie aplikácie v aplikácii PhoneGap Build
Prihláste sa teda do svojho účtu GitHub a prejdite na hlavnú stránku svojho úložiska. Pod názvom úložiska kliknite na „Nahrať súbory“ a potiahnite priečinok projektu na obrazovku stromu súborov. Teraz zadajte správu na potvrdenie v dolnej časti, napríklad „ môj prvý pokus o aplikáciu “ . Nakoniec kliknite na položku Potvrdiť zmeny.
Teraz choďte na Vytváranie PhoneGap stránku a prihláste sa. Teraz na stránke zostavenia kliknite na tlačidlo „Nová aplikácia“. Zobrazí sa výzva na zadanie cesty k vášmu úložisku GitHub, urobte tak a potom kliknite na možnosť „Vytiahnuť z .git úložiska“.
Teraz späť na hlavnej stránke zostavenia kliknite na tlačidlo „Aktualizovať kód“ a „Vytiahnuť najnovšiu verziu“.
Nakoniec kliknite na „Vytvoriť“. Zkompiluje vašu aplikáciu do súboru .apk a potom vám ponúkne možnosť stiahnutia .apk. Teraz si môžete tento súbor .apk stiahnuť do počítača, preniesť do telefónu a odtiaľ ho nainštalovať. Prípadne môžete pomocou telefónu naskenovať QR kód na obrazovke počítača a automaticky nainštalovať súbor .apk do zariadenia Android.
To je všetko! Teraz vám vysvetlím niekoľko dôležitých vecí:
- Jednalo sa o mimoriadne zjednodušeného sprievodcu, ktorý vás sprevádzal vytváraním najzákladnejších hybridných aplikácií. Ľudia zvyčajne neobchádzajú svoje webové stránky v natívnom prehliadači a nerozdávajú ich ako aplikáciu pre Android v obchode Google Play. Ale teraz, keď už viete, ako na to, môžete začať čítať dokumentáciu PhoneGap o tom, ako prispôsobiť svoju aplikáciu a dodať jej veľa chuti, aby ste mohli vytvoriť skutočne užitočnú aplikáciu.
- Po druhé, Google Play zakazuje tento spôsob vytvárania aplikácií na vytváranie aplikácií so schémami odkazov iba na účely výnosov. Nemôžete teda vytvoriť aplikáciu s názvom „Zarobte si peniaze dnes!“ ktorý otvára web plný reklám a bankových výnosov z reklám. Dostanete zákaz v obchode Google Play.
