Ta vodnik vas bo naučil, kako ustvariti hibridno aplikacijo z uporabo priljubljene platforme za ustvarjanje aplikacij PhoneGap. Kar bomo storili, bomo spremenili vaše spletno mesto v namestljivo datoteko .apk (aplikacija za Android), ki jo lahko namestite na kateri koli telefon Android. Ko se aplikacija zažene, bo preprosto odprla vaše spletno mesto v domačem Android brskalniku WebView, vendar bo prikazana kot celozaslonska aplikacija - brez vrstice za krmarjenje po URL-jih ali kakršnega koli drugega namiga, da je vaše spletno mesto preprosto predstavljeno v brskalniku.
Zahteve
Lastno spletno mesto (za namene sledenja tega vodnika lahko preprosto odprete brezplačen spletni dnevnik WordPress)
Račun GitHub
Račun PhoneGap
Beležnica ++ (ali podobna programska oprema za urejanje besedila, ki lahko prepozna kodo)
Programska oprema za urejanje fotografij za ustvarjanje ikon aplikacij (Photoshop, GIMP itd.)
Kodiranje predlog
To so predloge kode, ki jih lahko uporabite za namen tega vodnika - so iz moje lastne aplikacije, razvite s PhoneGap, vendar sem jim odvzel osebne podatke. Če sem jih nastavil iz nič z vsemi pravilnimi parametri, sem trajal veliko dni odpravljanja težav, zato jih zagotavljam za vaše udobje. Ni za kaj!
> Config.XML
> Kazalo.HTML
Kako začeti
Ustvarite mapo na namizju in jo pokličite www: ' brez narekovajev. To bo glavni imenik projekta, kjer bo graditelj PhoneGap pričakoval, da bo našel vse datoteke za vaš projekt. Zdaj bomo ustvarili ikono za vašo aplikacijo.
Odprite programsko opremo za urejanje fotografij in ustvarite novo sliko v formatu .PNG. Nastavitve slike bi morale izgledati takole:
In zdaj lahko narišete svojo ikono, na primer naredil bom le majhen gumb:
Velikost slike je odvisna od zaslona vašega osebnega telefona, če pa nameravate razviti aplikacijo za več naprav, boste seveda naredili več velikosti iste ikone. Tu je tabela uporabljenih velikosti slik:
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)
Ne želim se predolgo pogovarjati o velikostih zaslona in DPI, vem le, da DPI precej ustreza ločljivosti zaslona. Telefon, ki uporablja ločljivost zaslona 1080 × 1920, bo uporabil 480 dpi, to pa ne nujno natančno korelirati z velikostjo zaslona. Telefon ima lahko 5,2-palčni ali 6-palčni zaslon in ločljivost 1080 × 1920. Toda ta priročnik ne govori o zaslonih pametnih telefonov, zato pojdimo naprej.
Ko sestavite ikono, jo shranite kot icon.png in ga premaknite v svojo mapo www:. To bo postalo privzeto za aplikacijo. Če želite ustvariti ikone v različnih velikostih, ki se bodo ujemale z ločljivostjo zaslona uporabnika, jo boste shranili v različnih velikostih in imenih, na primer Icon144.png, Icon192.png, Icon96.png itd. Potem bi uredili Config.xml datoteko, da kaže na vsako posamezno ikono. Gremo naprej.
Zdaj, ko imate ikono za aplikacijo, potrebujete splash sliko. To je v bistvu nalagalni zaslon, na primer ozadje, ki se prikaže pred nalaganjem aplikacije. Velikosti splash slik delujejo po enakem principu kot ikone, vendar so nekoliko večje. Tu je tabela:
- LDPI:
- Portret: 200x320px
- Pokrajina: 320x200px
- MDPI:
- Portret: 320x480px
- Pokrajina: 480x320px
- HDPI:
- Portret: 480x800px
- Pokrajina: 800x480px
- XHDPI:
- Portret: 720px1280px
- Pokrajina: 1280x720px
- XXHDPI:
- Portret: 960px1600px
- Pokrajina: 1600x960px
- XXXHDPI:
- Portret: 1280px1920px
- Pokrajina: 1920x1280px
Tako ustvarite splash sliko v ločljivosti za svojo napravo in jo shranite kot Splash.png in ga nato premaknite v mapo projekta. Odlično, zdaj imate ikono in sliko za aplikacijo, pojdimo na nastavitev datotek za konfiguracijo in indeksiranje.
Razloženo Index.HTML in Config.XML
Datoteka config.xml je tisto, kar nastavi okolje gradnje (Android, iPhone, Windows Phone), mesta ikon in brizganja ter vtičnike Apache Cordova, ki jih želite uporabiti v svoji aplikaciji.
Odprite predlogo, ki sem jo dal v Notepad ++, in na vrhu boste videli te vrstice:
Posodobite ta polja s svojimi podatki, vendar pustite polja 'preferenca' pri miru. Preostali del konfiguracijske datoteke je sam po sebi razumljiv, če samo pogledate vrednosti. Preference name = 'celozaslonski' na primer pove aplikaciji, naj se zažene kot celozaslonska aplikacija. Pustite vse pri miru, razen te zadnje vrednosti na dnu datoteke:
Spremenite ga na dejanski URL spletnega mesta. To bo uporabniku aplikacije omogočilo popolno krmarjenje po vašem spletnem mestu in samo po vašem - med uporabo vaše aplikacije ne morejo zapustiti vašega spletnega mesta. Aplikacija seveda ne bo imela vrstice za krmarjenje po URL-jih, to niti ni res zaskrbljujoče, hkrati pa poskrbi, da lahko uporabnik dostopa do vseh strani na vašem spletnem mestu. * Za URL-jem spletnega mesta je nadomestni znak , kar v žargonu kodiranja pomeni, da bo sprejel vse, kar je vpisano namesto znaka *.
Če želite uporabnika omejiti le na določene strani na vašem spletnem mestu, dodajte ločene vrednosti, kot je ta:
Pojdimo na Index.html datoteka, to je kruh in maslo, da aplikacija dejansko deluje. Odprite ga v Notepad ++ in jezik dokumenta preklopite na HTML. Index.html v bistvu naredi brskalniku Android, kako naj prikaže vaše spletno mesto - v predlogi, ki sem jo navedel, so oznake za odstranitev vrstice za krmarjenje po URL-jih iz brskalnika, omogočanje gumba za nazaj na telefonu za izhod iz aplikacije in zagon po prikazu začetnega zaslona. Vrstica, ki jo želite spremeniti, je tukaj:
var url = 'http://yourwebsite.com'
Ustvarjanje aplikacije v PhoneGap Build
Torej, prijavite se v svoj račun GitHub in se pomaknite na glavno stran svojega skladišča. Pod imenom skladišča kliknite »Naloži datoteke« in povlecite mapo projekta na zaslon drevesa datotek. Zdaj na dnu vnesite sporočilo o objavi, na primer » moj prvi poskus aplikacije ' . Na koncu kliknite Zavezi spremembe.
Zdaj pa pojdi na Zgradba PhoneGap strani in se prijavite. Zdaj na strani za izdelavo kliknite gumb »Nova aplikacija«. To vas bo pozvalo, da vnesete pot do svojega skladišča GitHub, zato to storite in nato kliknite »Potegni iz repozitorija .git«.
Zdaj na glavni strani zgradbe kliknite »Posodobi kodo« in »Potegni najnovejšo«.
Na koncu kliknite »Build«. Aplikacijo bo zbral v datoteko .apk in vam nato predstavil možnost prenosa datoteke .apk. Zdaj lahko prenesete to datoteko .apk v računalnik in jo prenesete v telefon, nato pa jo namestite od tam. Lahko pa s telefonom skenirate kodo QR na zaslonu računalnika in samodejno namestite datoteko .apk v napravo Android.
To je to! Zdaj, da vam razložim nekaj pomembnih stvari:
- To je bil izredno poenostavljen vodnik, ki vas je vodil skozi izdelavo najosnovnejših hibridnih aplikacij. Ljudje običajno ne zavijajo svojih spletnih mest v domači brskalnik in jih oddajajo kot aplikacijo za Android v trgovini Google Play. Zdaj, ko veste, kako to storiti, lahko začnete brati dokumentacijo PhoneGap, kako prilagoditi svojo aplikacijo in ji dodati veliko okusa, tako da lahko upate, da ustvarite dejansko uporabno aplikacijo.
- Drugič, Google Play prepoveduje tovrstne metode ustvarjanja aplikacij za ustvarjanje aplikacij s shemo povezav samo z namenom zaslužka. Torej ne morete ustvariti aplikacije z imenom 'Zaslužite denar danes!' ki odpre spletno mesto, polno oglasov, in prihodek od oglasov. V trgovini Google Play boste prepovedani.
