Selles juhendis õpetatakse hübriidrakenduse loomist populaarse rakenduste loomise platvormi PhoneGap abil. Mida me teeme, on muuta teie veebisait installitavaks .apk (Androidi rakendus) failiks, mille saab installida igasse Android-telefoni. Rakenduse käivitamisel avab see teie veebisaidi lihtsalt Androidi veebibrauseris, kuid see kuvatakse täisekraani rakendusena - puudub URL-i navigeerimisriba või mõni muu vihje selle kohta, et teie veebisaiti lihtsalt kuvatakse brauseris.
Nõuded
Oma veebisait (selle juhendi järgimiseks võite lihtsalt luua tasuta WordPressi ajaveebi)
GitHubi konto
PhoneGapi konto
Märkmik ++ (või sarnane teksti redigeerimise tarkvara, mis tunneb ära koodi)
Fototöötlustarkvara rakenduse ikoonide loomiseks (Photoshop, GIMP jne)
Mallide kodeerimine
Need on koodimallid, mida saate selle juhendi jaoks kasutada - need pärinevad minu enda rakendusest, mis on välja töötatud PhoneGapiga, kuid ma olen neilt oma isikliku teabe ära võtnud. Nende seadistamine nullist kõigi õigete parameetritega võttis mul mitu päeva tõrkeotsingut, nii et pakun neid teie mugavuse huvides. Olete oodatud!
> Konfig. XML
> Indeks.HTML
Alustamine
Looge töölaual kaust ja kutsuge seda www: ' ilma jutumärkideta. See on projekti peamine kataloog, kuhu PhoneGapi ehitaja loodab leida kõik teie projekti failid. Nüüd loome teie rakenduse jaoks ikooni.
Avage oma fototöötlustarkvara ja looge uus pilt .PNG-vormingus. Teie pildi seaded peaksid välja nägema järgmised:
Nüüd saate joonistada oma ikooni, näiteks ma teen lihtsalt väikese nupu:
Pildi suurus sõltub teie isiklikust telefoni ekraanist, kuid kui kavatsete arendada rakenduse mitmele seadmele, saate loomulikult sama ikooni mitu suurust. Siin on kasutatud pildi suuruste tabel:
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)
Ma ei taha ekraani suurustest ja DPI-st liiga kaua rääkida, lihtsalt tean, et DPI on päris palju seotud ekraani eraldusvõimega. Telefon, mis kasutab 1080 × 1920 ekraani eraldusvõimet, kasutab 480 dpi, kuid see pole nii tingimata korreleeruvad täpselt ekraani suurusega. Telefonil võib olla 5,2 ”või 6” ekraan ja eraldusvõime 1080 × 1920. Kuid see juhend ei puuduta nutitelefoni ekraane, seega liigume edasi.
Pärast ikooni koostamist salvestage see nimega icon.png ja teisaldage see oma kausta www:. Sellest saab vaikimisi oma rakenduse ikooni. Kui soovite luua erineva suurusega ikoone, mis sobivad kasutaja ekraani eraldusvõimega, salvestate ikooni erineva suuruse ja nimega, näiteks Icon144.png, Icon192.png, Icon96.png jne. Siis muudaksite Config.xml faili, et osutada igale üksikule ikoonile. Liigume edasi.
Nii et nüüd, kui teil on oma rakenduse jaoks ikoon, vajate pisipilti. See on põhimõtteliselt laadimisekraan, nagu taustapilt, mida kuvatakse enne teie rakenduse laadimist. Splash-pildi suurused töötavad samal põhimõttel nagu ikoonid, kuid on natuke suuremad. Siin on tabel:
- LDPI:
- Portree: 200x320px
- Maastik: 320x200px
- MDPI:
- Portree: 320x480 pikslit
- Maastik: 480x320px
- HDPI:
- Portree: 480x800px
- Maastik: 800x480 pikslit
- XHDPI:
- Portree: 720px1280px
- Maastik: 1280x720px
- XXHDPI:
- Portree: 960px1600px
- Maastik: 1600x960px
- XXXHDPI:
- Portree: 1280px1920px
- Maastik: 1920x1280px
Nii et looge oma pilti oma seadme eraldusvõimega, salvestage see nimega Splash.png ja seejärel teisaldage see oma projekti kausta. Suurepärane, teil on nüüd oma rakenduse ikoon ja pisipilt, jätkame konfigureerimis- ja registrifailide seadistamist.
Index.HTML ja Config.XML on selgitatud
Fail config.xml määrab ehituskeskkonna (Android, iPhone, Windows Phone), ikooni ja pritsmete asukohad ning Apache Cordova pistikprogrammid, mida soovite oma rakenduses kasutada.
Avage mall, mille pakkusin teenuses Notepad ++, ja näete ülaosas neid ridu:
Värskendage neid välju oma teabega, kuid jätke väljad „Eelistus” rahule. Ülejäänud konfiguratsioonifail on enesestmõistetav, kui lihtsalt väärtusi vaadata. Näiteks eelistuse nimi = 'täisekraan' käsib rakendusel käivitada ennast täisekraanirakendusena. Jäta kõik rahule, välja arvatud see viimane väärtus faili lõpus:
Muutke see oma veebisaidi tegelikuks URL-iks. See võimaldab rakenduse kasutajal täielikult navigeerida teie veebisaidil ja ainult teie veebisaidil - nad ei saa teie rakendust kasutades teie veebisaidilt lahkuda. Muidugi pole rakendusel URL-i navigeerimisriba, see pole isegi tegelikult murettekitav, kuid tagab ka selle, et kasutaja saab juurdepääsu kõigile teie veebisaidi lehtedele. Veebisaidi URL-i järel olev * on a metamärk , mis kodeerivas žargoonis tähendab, et see aktsepteerib kõike, mis on sisestatud * märgi asemele.
Muidugi, kui soovite piirata kasutajat ainult teatud veebisaidi lehtedega, lisate eraldi sellised väärtused:
Läheme edasi Index.html fail, see on leib ja või, mis muudab rakenduse reaalseks. Avage see Notepad ++ sees ja vahetage dokumendi keel HTML-iks. Mida index.html põhimõtteliselt teeb, on öelda Android-brauserile, kuidas oma veebisaiti kuvada - minu esitatud mallis on märgendid URL-i navigeerimisriba brauserist eemaldamiseks, telefoni nupu „Tagasi” lubamiseks rakendusest väljumiseks ja käivitamiseks Rakendus kuvatakse pärast tühjendusekraani. Rida, mida soovite muuta, on siin:
var url = ‘http://yourwebsite.com’
Rakenduse loomine rakenduses PhoneGap Build
Nii logige sisse oma GitHubi kontole ja navigeerige oma hoidla avalehele. Klõpsake hoidla nime all nuppu „Failide üleslaadimine” ja lohistage oma projekti kaust failipuu ekraanile. Nüüd tippige allservas kinnituskiri, näiteks “ minu esimene rakenduskatse ” . Lõpuks klõpsake käsul Muudatused.
Nüüd minge PhoneGap Build leht ja logige sisse. Nüüd klõpsake ehituslehel nuppu „Uus rakendus”. See palub teil sisestada tee oma GitHubi hoidlasse, nii tehke seda ja klõpsake siis käsku „Tõmmake .git reposityst”.
Nüüd pöörduge peamise lehe juurde tagasi ja klõpsake käsul „Värskenda koodi” ja „Tõmba uusim”.
Lõpuks klõpsake nuppu „Koosta“. See kompileerib teie rakenduse .apk-failiks ja pakub teile seejärel võimaluse .apk alla laadida. Nüüd saate selle .apk-faili oma arvutisse alla laadida ja telefoni laadida, seejärel sealt installida. Teise võimalusena saate oma telefoni abil QR-koodi skannida oma arvutiekraanil, et installida .apk-fail automaatselt oma Android-seadmesse.
See on kõik! Nüüd, et selgitada teile mõnda olulist asja:
- See oli äärmiselt lihtsustatud juhend, mis juhatas teid hübriidrakenduste kõige elementaarsema ehitamise juurde. Inimesed ei käi tavaliselt oma veebisaite kohalikku brauserisse pakkides ja Google Play poes Androidi rakendusena edasi andmas. Kuid nüüd, kui teate, kuidas seda teha, võite hakata lugema rakenduse PhoneGap dokumentatsiooni selle kohta, kuidas oma rakendust kohandada ja sellele palju maitset lisada, et saaksite loodetavasti luua tegelikult kasuliku rakenduse.
- Teiseks keelab Google Play sedalaadi rakenduste loomise meetodi linkide skeemiga rakenduste loomiseks ainult tulu eesmärgil. Nii et te ei saa luua rakendust nimega 'Teeni täna raha!' mis avab täiesti reklaame täis veebisaidi ja reklaamitulude panga. Teid keelatakse Google Play poes.
