Acest ghid vă va învăța cum să creați o aplicație hibridă folosind platforma populară de construire a aplicațiilor PhoneGap. Ceea ce vom face este să transformăm site-ul dvs. într-un fișier instalabil .apk (aplicație Android) care poate fi instalat pe orice telefon Android. Când aplicația este lansată, va deschide pur și simplu site-ul dvs. în browserul WebView nativ al Android, dar va apărea ca o aplicație cu ecran complet - fără bara de navigare URL sau orice alt indiciu că site-ul dvs. web este pur și simplu prezentat într-un browser.
Cerințe
Propriul dvs. site web (în scopul urmăririi acestui ghid, puteți pur și simplu să începeți un blog WordPress gratuit)
Cont GitHub
Cont PhoneGap
Notepad ++ (sau un software similar de editare a textului care poate recunoaște codul)
Software de editare foto pentru crearea pictogramelor aplicației (Photoshop, GIMP etc.)
Șabloane de codificare
Acestea sunt șabloane de cod pe care le puteți utiliza în scopul acestui ghid - provin din propria aplicație dezvoltată cu PhoneGap, dar le-am dezbrăcat de informațiile mele personale. Configurarea acestora de la zero cu toți parametrii corecți mi-a luat multe zile de depanare, așa că le ofer pentru confortul dumneavoastră. Cu plăcere!
> Config.XML
> Index.HTML
Noțiuni de bază
Creați un folder pe desktop și numiți-l „ www: ' fără ghilimele. Acesta va fi directorul principal al proiectului, unde constructorul PhoneGap se va aștepta să găsească toate fișierele pentru proiectul dvs. Acum vom crea o pictogramă pentru aplicația dvs.
Deschideți software-ul de editare a fotografiilor și creați o nouă imagine în format .PNG. Setările imaginii dvs. ar trebui să arate astfel:
Și acum vă puteți desena pictograma, de exemplu, voi face doar un mic buton:
Dimensiunea imaginii depinde de ecranul telefonului personal, dar dacă intenționați să dezvoltați o aplicație pentru mai multe dispozitive, desigur, veți realiza mai multe dimensiuni ale aceleiași pictograme. Iată un tabel cu dimensiunile imaginilor utilizate:
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)
Nu vreau să petrec prea mult timp vorbind despre dimensiunile ecranului și DPI, știu doar că DPI se corelează destul de mult cu rezoluția ecranului. Un telefon care utilizează rezoluția ecranului 1080 × 1920 va utiliza 480 dpi, dar nu neapărat corelați exact cu dimensiunea ecranului. Un telefon ar putea avea un ecran de 5,2 ”sau un ecran de 6” și să aibă o rezoluție 1080 × 1920. Dar acest ghid nu se referă la ecranele smartphone-ului, așa că să mergem mai departe.
După ce ați creat pictograma, salvați-o ca icon.png și mutați-l în folderul www :. Aceasta va deveni Mod implicit pictogramă pentru aplicația dvs. Dacă doriți să creați pictograme în diferite dimensiuni care să se potrivească cu rezoluția ecranului utilizatorului, veți salva pictograma în diferite dimensiuni și nume, de exemplu Icon144.png, Icon192.png, Icon96.png și așa mai departe. Apoi ați edita fișierul Config.xml fișier pentru a indica fiecare pictogramă individuală. Sa trecem peste.
Deci, acum că aveți o pictogramă pentru aplicația dvs., aveți nevoie de o imagine de presiune. Acesta este practic un ecran de încărcare, ca un tapet care se afișează înainte de încărcarea aplicației. Dimensiunile imaginilor Splash funcționează pe același principiu ca și pictogramele, dar sunt puțin mai mari. Iată tabelul:
- LDPI:
- Portret: 200x320px
- Peisaj: 320x200px
- MDPI:
- Portret: 320x480px
- Peisaj: 480x320px
- HDPI:
- Portret: 480x800px
- Peisaj: 800x480px
- XHDPI:
- Portret: 720px1280px
- Peisaj: 1280x720px
- XXHDPI:
- Portret: 960px1600px
- Peisaj: 1600x960px
- XXXHDPI:
- Portret: 1280px1920px
- Peisaj: 1920x1280px
Deci, creați-vă imaginea splash în rezoluția dispozitivului dvs., salvați-o ca Splash.png și apoi mutați-l în dosarul proiectului. Minunat, acum aveți pictograma aplicației și imaginea stropită, să trecem la configurarea fișierelor de configurare și indexare.
Explicați Index.HTML și Config.XML
Fișierul config.xml este ceea ce setează mediul de construire (Android, iPhone, Windows Phone), pictograma și locațiile de stropire și pluginurile Apache Cordova pe care doriți să le utilizați în aplicația dvs.
Deschideți șablonul pe care l-am furnizat în Notepad ++ și veți vedea aceste linii aproape de partea de sus:
Actualizați aceste câmpuri cu informațiile dvs., dar lăsați câmpurile „preferință” în pace. Restul fișierului de configurare se explică de la sine dacă te uiți doar la valori. Preference name = ”fullscreen”, de exemplu, spune aplicației să se lanseze ca aplicație fullscreen. Lăsați totul în pace, cu excepția acestei ultime valori din partea de jos a fișierului:
Schimbați-l la adresa URL a site-ului dvs. web real. Acest lucru va permite utilizatorului aplicației să navigheze complet pe site-ul dvs. web și numai pe site-ul dvs. web - acesta nu poate părăsi site-ul dvs. web în timp ce folosește aplicația dvs. Desigur, aplicația nu va avea o bară de navigare URL, nici măcar nu este o problemă, dar asigură, de asemenea, că utilizatorul poate accesa toate paginile de pe site-ul dvs. web. * După adresa URL a site-ului web este un wildcard , ceea ce în jargonul de codificare înseamnă că va accepta orice este introdus în locul semnului *.
Desigur, dacă doriți să limitați utilizatorul doar la anumite pagini de pe site-ul dvs. web, veți adăuga valori separate ca aceasta:
Să trecem la Index.html fișier, acesta este modul în care aplicația funcționează efectiv. Deschideți-l în Notepad ++ și comutați limbajul documentului în HTML. Ceea ce face practic index.html este să îi spui browserului Android cum să afișeze site-ul tău - în șablonul pe care l-am furnizat, există etichete pentru a elimina bara de navigare URL din browser, a permite butonului „înapoi” al telefonului să iasă din aplicație și să lanseze se afișează aplicația după ecranul de pornire. Linia pe care doriți să o modificați este aici:
var url = ‘http://yourwebsite.com’
Construirea aplicației în PhoneGap Build
Deci, conectați-vă la contul dvs. GitHub și navigați la pagina principală a depozitului dvs. Sub numele depozitului, faceți clic pe „Încărcare fișiere” și trageți folderul proiectului în ecranul arborelui de fișiere. Acum introduceți un mesaj de confirmare în partea de jos, de genul „ prima mea încercare de aplicație ” . În cele din urmă, faceți clic pe Confirmați modificările.
Acum du-te la PhoneGap Build pagina și conectați-vă. Faceți clic acum pe butonul „Aplicație nouă” de pe pagina de construire. Acest lucru vă va cere să introduceți calea către depozitul dvs. GitHub, așa că faceți acest lucru, apoi faceți clic pe „Trageți de la .git depozitare”.
Acum reveniți la pagina principală de construire, faceți clic pe „Actualizați codul” și „Trageți cel mai recent”.
În cele din urmă, faceți clic pe „Construiți”. Acesta vă va compila aplicația într-un fișier .apk, apoi vă va oferi opțiunea de a descărca .apk. Acum puteți descărca acest fișier .apk pe computer și îl puteți transfera pe telefon, apoi îl puteți instala de acolo. Alternativ, puteți utiliza telefonul pentru a scana codul QR de pe ecranul computerului pentru a instala automat fișierul .apk pe dispozitivul dvs. Android.
Asta e! Acum, pentru a vă explica câteva lucruri importante:
- Acesta a fost un ghid extrem de simplificat care te-a ghidat prin crearea celor mai simple aplicații hibride. În general, oamenii nu se împachetează pe site-urile lor web într-un browser nativ și îl transmit ca o aplicație pentru Android în magazinul Google Play. Dar acum, că știi cum să o faci, poți începe să citești documentația PhoneGap despre cum să-ți personalizezi aplicația și să-i adaugi multă aromă, astfel încât să poți crea, sperăm, o aplicație de fapt utilă.
- În al doilea rând, Google Play interzice acest tip de metodă de construire a aplicațiilor pentru a crea aplicații de schemă de legături în scopul unic al veniturilor. Deci, nu puteți crea o aplicație numită „Câștigați bani astăzi!” care deschide un site web absolut plin de reclame și se bazează pe veniturile din publicitate. Veți fi interzis din magazinul Google Play.
