Ovaj vodič naučit će vas kako stvoriti hibridnu aplikaciju pomoću popularne platforme za izradu aplikacija PhoneGap. Ono što ćemo učiniti jest pretvoriti vaše web mjesto u datoteku .apk (aplikacija za Android) koja se može instalirati i koja se može instalirati na bilo koji Android telefon. Kada se aplikacija pokrene, jednostavno će otvoriti vašu web lokaciju u Androidovom matičnom pregledniku WebView, ali pojavit će se kao aplikacija na cijelom zaslonu - bez trake za navigaciju URL-a ili bilo kojeg drugog traga da se vaše web mjesto jednostavno prikazuje u pregledniku.
Zahtjevi
Vaša vlastita web stranica (u svrhu praćenja ovog vodiča možete jednostavno pokrenuti besplatni WordPress blog)
GitHub račun
PhoneGap račun
Notepad ++ (ili sličan softver za uređivanje teksta koji može prepoznati kôd)
Softver za uređivanje fotografija za stvaranje ikona aplikacija (Photoshop, GIMP, itd.)
Predlošci kodiranja
Ovo su predlošci koda koje možete koristiti u svrhu ovog vodiča - oni su iz moje vlastite aplikacije razvijene s PhoneGap, ali oduzeo sam im svoje osobne podatke. Postavljanje istih sa svim ispravnim parametrima oduzelo mi je mnogo dana za rješavanje problema, pa ih pružam za vašu udobnost. Molim!
> Config.XML
> Kazalo.HTML
Početak rada
Stvorite mapu na radnoj površini i nazovite je “ www: ' bez navodnika. Ovo će biti glavni direktorij projekta, gdje će graditelj PhoneGap očekivati da će pronaći sve datoteke za vaš projekt. Sada ćemo stvoriti ikonu za vašu aplikaciju.
Otvorite softver za uređivanje fotografija i stvorite novu sliku u .PNG formatu. Postavke slike trebale bi izgledati ovako:
A sada možete nacrtati svoju ikonu, na primjer, samo ću stvoriti mali gumb:
Veličina slike ovisi o zaslonu vašeg osobnog telefona, ali ako namjeravate razviti aplikaciju za više uređaja, naravno, napravit ćete više veličina iste ikone. Evo tablice korištenih veličina slika:
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 trošiti predugo razgovarajući o veličinama zaslona i DPI-ju, samo znam da DPI u velikoj mjeri odgovara razlučivosti zaslona. Telefon koji koristi rezoluciju zaslona 1080 × 1920 upotrebljavat će 480 dpi, ali to ne nužno točno korelirati s veličinom zaslona. Telefon može imati zaslon od 5,2 ”ili 6” i razlučivost 1080 × 1920. Ali ovaj vodič ne odnosi se na zaslone pametnih telefona, pa krenimo dalje.
Nakon što izradite svoju ikonu, spremite je kao icon.png i premjestite ga u svoju mapu www:. Ovo će postati zadano ikona za vašu aplikaciju. Ako želite stvoriti ikone u različitim veličinama koje će odgovarati razlučivosti zaslona korisnika, ikonu biste spremili u različite veličine i nazive, na primjer Icon144.png, Icon192.png, Icon96.png itd. Tada biste uredili Config.xml datoteku koja ukazuje na svaku pojedinu ikonu. Idemo dalje.
Dakle, sada kada imate ikonu za svoju aplikaciju, potrebna vam je početna slika. Ovo je u osnovi zaslon za učitavanje, poput pozadine koja se prikazuje prije nego što se aplikacija učita. Veličine prskanja slika rade na istom principu kao i ikone, ali su malo veće. Evo tablice:
- LDPI:
- Portret: 200x320px
- Pejzaž: 320x200px
- MDPI:
- Portret: 320x480px
- Pejzaž: 480x320px
- HDPI:
- Portret: 480x800px
- Pejzaž: 800x480px
- XHDPI:
- Portret: 720px1280px
- Pejzaž: 1280x720px
- XXHDPI:
- Portret: 960px1600px
- Pejzaž: 1600x960px
- XXXHDPI:
- Portret: 1280px1920px
- Pejzaž: 1920x1280px
Dakle, stvorite svoju brizgalicu u rezoluciji za svoj uređaj, spremite je kao Splash.png a zatim ga premjestite u mapu projekta. Izvrsno, sada imate ikonu i početnu sliku aplikacije, prijeđimo na postavljanje datoteka konfiguracije i indeksa.
Objašnjeno Index.HTML i Config.XML
Datoteka config.xml je ono što postavlja okruženje gradnje (Android, iPhone, Windows Phone), lokacije ikona i prskanja te dodatke Apache Cordova koje želite koristiti u svojoj aplikaciji.
Otvorite predložak koji sam dao u Notepadu ++ i vidjet ćete ove redove pri vrhu:
Ažurirajte ta polja svojim podacima, ali polja 'preferencije' ostavite na miru. Ostatak konfiguracijske datoteke sam po sebi objašnjava ako samo pogledate vrijednosti. Preference name = 'preko cijelog zaslona', na primjer, govori aplikaciji da se pokrene kao aplikacija preko cijelog zaslona. Ostavite sve na miru, osim ove posljednje vrijednosti na dnu datoteke:
Promijenite ga u stvarni URL web mjesta. To će omogućiti korisniku aplikacije da se u potpunosti kreće vašom web lokacijom i samo vašom web stranicom - ne može napustiti vašu web stranicu dok koristi vašu aplikaciju. Naravno, aplikacija neće imati URL navigacijsku traku, to zapravo i nije stvar zabrinutosti, ali također osigurava da korisnik može pristupiti svim stranicama na vašem web mjestu. Znak * nakon URL-a web mjesta je zamjenski znak , što u žargonu kodiranja znači da će prihvatiti sve što je upisano umjesto znaka *.
Naravno, ako želite ograničiti korisnika na samo određene stranice na vašem web mjestu, dodali biste zasebne vrijednosti poput ove:
Prijeđimo na Index.html datoteka, ovo je kruh i maslac u tome da aplikacija stvarno funkcionira. Otvorite ga u programu Notepad ++ i prebacite jezik dokumenta na HTML. Ono što index.html u osnovi radi je reći pregledniku Android kako prikazati vašu web stranicu - u predlošku koji sam dostavio nalaze se oznake za uklanjanje trake za navigaciju URL-a iz preglednika, dopuštanje gumba 'Natrag' na telefonu da izađe iz aplikacije i pokrene aplikacija nakon što se prikaže početni zaslon. Redak koji ćete htjeti promijeniti nalazi se ovdje:
var url = 'http://yourwebsite.com'
Izrada aplikacije u PhoneGap Build
Dakle, prijavite se na svoj GitHub račun i prijeđite na glavnu stranicu vašeg spremišta. Pod nazivom spremišta kliknite 'Učitaj datoteke' i povucite mapu projekta na zaslon stabla datoteka. Sada na dnu upišite poruku urezivanja, poput ' moj prvi pokušaj aplikacije ' . Na kraju kliknite Uredi promjene.
Sada idite na Izrada PhoneGap stranicu i prijavite se. Sada na stranici za izradu kliknite gumb 'Nova aplikacija'. To će vas tražiti da unesete put do vašeg GitHub spremišta, pa učinite to, a zatim kliknite 'Povuci iz .git repozitorija'.
Sada natrag na glavnoj stranici izrade kliknite 'Ažuriraj kod' i 'Povuci najnovije'.
Na kraju, kliknite 'Izgradi'. Sastavit će vašu aplikaciju u .apk datoteku, a zatim će vam predstaviti mogućnost preuzimanja .apk. Sada ovu .apk datoteku možete preuzeti na svoje računalo i prenijeti je na telefon, a zatim je instalirati od tamo. Možete i koristiti telefon za skeniranje QR koda na zaslonu računala za automatsku instalaciju .apk datoteke na Android uređaj.
To je to! Da vam objasnim nekoliko važnih stvari:
- Ovo je bio izuzetno pojednostavljeni vodič koji vas je vodio kroz izgradnju najosnovnijih hibridnih aplikacija. Ljudi uglavnom ne zaobilaze svoje web stranice u izvorni preglednik i ne izdaju ih kao Android aplikaciju u trgovini Google Play. Ali sada kad znate kako to učiniti, možete početi čitati PhoneGap dokumentaciju o tome kako prilagoditi svoju aplikaciju i dodati joj puno okusa, tako da ćete, nadam se, stvoriti stvarno korisnu aplikaciju.
- Kao drugo, Google Play zabranjuje ovu vrstu metode izrade aplikacija za stvaranje aplikacija sa shemama veza s jedinom svrhom prihoda. Dakle, ne možete stvoriti aplikaciju pod nazivom 'Zaradite novac danas!' koja otvara web mjesto apsolutno puno oglasa i smanjuje prihod od oglasa. Dobit ćete zabranu trgovine Google Play.
