Ituturo sa iyo ng gabay na ito kung paano lumikha ng isang hybrid app gamit ang tanyag na platform ng pagbuo ng app na PhoneGap. Ang gagawin namin ay gawin ang iyong website na isang nai-install na .apk (Android application) na file na maaaring mai-install sa anumang Android phone. Kapag inilunsad ang app, bubuksan lamang nito ang iyong website sa katutubong WebView browser ng Android, ngunit lilitaw ito bilang isang full-screen app - walang bar sa pag-navigate sa URL o anumang iba pang pahiwatig na ang iyong website ay ipinapakita lamang sa isang browser.
Mga Kinakailangan
Ang iyong sariling website (para sa layunin ng pagsunod sa patnubay na ito, maaari mo lamang simulan ang isang libreng WordPress blog)
GitHub account
AccountGap account
Notepad ++ (o katulad na software sa pag-edit ng teksto na maaaring makilala ang code)
Software sa pag-edit ng larawan para sa paglikha ng mga icon ng app (Photoshop, GIMP, atbp)
Mga Template ng Coding
Ito ang mga template ng code na maaari mong gamitin para sa layunin ng gabay na ito - ang mga ito ay mula sa aking sariling app na binuo gamit ang PhoneGap, ngunit tinanggal ko sa kanila ang aking personal na impormasyon. Ang pagse-set up ng mga ito mula sa wala sa lahat ng mga tamang parameter ay tumagal sa akin ng maraming araw ng pag-troubleshoot, kaya't ibinibigay ko ang mga ito para sa iyong kaginhawaan. Walang anuman!
> Config.XML
> Index.HTML
Nagsisimula
Lumikha ng isang folder sa iyong desktop at tawagan itong ' www: ' nang walang mga quote. Ito ang magiging pangunahing direktoryo ng proyekto, kung saan inaasahan ng tagabuo ng PhoneGap na mahanap ang lahat ng mga file para sa iyong proyekto. Lilikha kami ngayon ng isang icon para sa iyong app.
Buksan ang iyong software sa pag-edit ng larawan at lumikha ng isang bagong imahe sa format na .PNG. Ang mga setting ng iyong imahe ay dapat magmukhang ganito:
At ngayon maaari mong iguhit ang iyong icon, halimbawa gagawin ko lamang ang isang maliit na pindutan:
Ang laki ng imahe ay nakasalalay sa iyong personal na screen ng telepono, ngunit kung balak mong bumuo ng isang app para sa maraming mga aparato, siyempre gagawa ka ng maraming laki ng parehong icon. Narito ang isang talahanayan ng mga laki ng imahe na ginamit:
36 × 36 (120dpi / LDPI)
48 × 48 (160dpi / MDPI)
72 × 72 (240dpi / HDPI)
96 × 96 (320dpi / XHDPI)
144 × 144 (480dpi / XXHDPI)
192 × 192 (640dpi / XXXHDPI)
Hindi ko nais na gumastos ng masyadong mahabang pakikipag-usap tungkol sa mga laki ng screen at DPI, malaman lamang na ang DPI ay halos naiugnay sa resolusyon ng screen. Ang isang telepono na gumagamit ng resolusyon ng screen ng 1080 × 1920 ay gagamit ng 480dpi, ngunit hindi ito ginagawa kinakailangan maiugnay nang eksakto ang laki ng screen. Ang isang telepono ay maaaring magkaroon ng isang 5.2 'screen o isang 6' na screen at magkaroon ng resolusyon na 1080 × 1920. Ngunit ang gabay na ito ay hindi tungkol sa mga screen ng smartphone, kaya't magpatuloy tayo.
Pagkatapos mong iguhit ang iyong icon, i-save ito bilang icon.png at ilipat ito sa loob ng iyong www: folder. Ito ang magiging default icon para sa iyong app. Kung nais mong lumikha ng mga icon sa iba't ibang laki na tutugma sa resolusyon ng screen ng gumagamit, mase-save mo ang icon sa iba't ibang laki at pangalan, halimbawa ng Icon144.png, Icon192.png, Icon96.png, at iba pa. Pagkatapos ay ie-edit mo ang Config.xml file upang ituro ang bawat indibidwal na icon. Ituloy na natin.
Kaya ngayon na mayroon kang isang icon para sa iyong app, kailangan mo ng isang splash na imahe. Karaniwan ito ay isang loading screen, tulad ng isang wallpaper na nagpapakita bago i-load ang iyong app. Gumagana ang mga laki ng imahe ng splash sa parehong prinsipyo tulad ng mga icon, ngunit medyo malaki. Narito ang talahanayan:
- LDPI:
- Larawan: 200x320px
- Landscape: 320x200px
- MDPI:
- Larawan: 320x480px
- Landscape: 480x320px
- HDPI:
- Larawan: 480x800px
- Landscape: 800x480px
- XHDPI:
- Larawan: 720px1280px
- Landscape: 1280x720px
- XXHDPI:
- Larawan: 960px1600px
- Landscape: 1600x960px
- XXXHDPI:
- Larawan: 1280px1920px
- Landscape: 1920x1280px
Kaya likhain ang iyong splash na imahe sa resolusyon para sa iyong aparato, i-save ito bilang Splash.png at pagkatapos ay ilipat ito sa loob ng folder ng iyong proyekto. Mahusay, mayroon ka na ngayong icon ng iyong app at splash na imahe, lumipat tayo sa pag-set up ng iyong mga config at index file.
Ipinaliwanag ang index.HTML at Config.XML
Ang config.xml file ang nagtatakda ng kapaligiran sa pagbuo (Android, iPhone, Windows Phone), ang icon at mga lokasyon ng splash, at ang mga Apache Cordova plug-in na nais mong gamitin sa iyong app.
Buksan ang template na ibinigay ko sa Notepad ++ at makikita mo ang mga linyang ito malapit sa itaas:
I-update ang mga patlang na iyon sa iyong impormasyon, ngunit iwanan ang mga patlang na 'kagustuhan'. Ang natitirang file ng config ay maliwanag kung titingnan mo lamang ang mga halaga. Pangalan ng kagustuhan = 'fullscreen' halimbawa ay nagsasabi sa app na ilunsad ang sarili nito bilang isang fullscreen app. Iwanan ang lahat, maliban sa huling halagang ito sa ilalim ng file:
Palitan ito sa iyong tunay na URL ng website. Papayagan nito ang gumagamit ng app na ganap na mag-navigate sa iyong website, at ang iyong website lamang - hindi nila maiiwan ang iyong website habang ginagamit ang iyong app. Siyempre ang app ay hindi magkakaroon ng isang bar ng nabigasyon sa URL, hindi man talaga ito isang alalahanin, ngunit tinitiyak din na ma-access ng gumagamit ang lahat ng mga pahina sa iyong website. Ang * pagkatapos ng website URL ay a wildcard , na sa pag-coding ng jargon ay nangangahulugang tatanggapin nito ang anumang naipasok bilang kapalit ng * sign.
Siyempre, kung nais mong limitahan ang gumagamit sa ilang mga pahina lamang sa iyong website, magdagdag ka ng magkakahiwalay na mga halagang tulad nito:
Lumipat tayo sa Index.html file, ito ang tinapay at mantikilya ng paggawa ng app na talagang gumagana. Buksan ito sa loob ng Notepad ++ at ilipat ang wikang dokumento sa HTML. Ano ang karaniwang ginagawa ng index.html ay sabihin sa Android browser kung paano ipapakita ang iyong website - sa template na ibinigay ko, may mga tag upang alisin ang bar ng pag-navigate sa URL mula sa browser, payagan ang pindutan na 'pabalik' ng telepono upang lumabas sa app, at ilunsad ang app pagkatapos ipakita ang splash screen. Ang linya na nais mong baguhin ay narito:
var url = 'http://yourwebsite.com'
Pagbuo ng App sa Build ng PhoneGap
Kaya mag-log in sa iyong GitHub account, at mag-navigate sa pangunahing pahina ng iyong imbakan. Sa ilalim ng pangalan ng repository, i-click ang 'Mag-upload ng Mga File', at i-drag ang iyong folder ng proyekto sa screen ng file ng puno. Mag-type ngayon ng isang gumawa ng mensahe sa ibaba, tulad ng “ ang aking unang pagtatangka sa app ” . Panghuli i-click ang Mga Pagbabago.
Pumunta ngayon sa Pagbuo ng PhoneGap pahina at pag-sign in. Ngayon i-click ang pindutang 'Bagong App' sa build page. Hihilingin sa iyo na ipasok ang landas sa iyong GitHub repository, kaya gawin ito, at pagkatapos ay i-click ang 'Hilahin mula sa .git reposity'.
Bumalik ngayon sa pangunahing pahina ng pagbuo, i-click ang 'I-update ang code' at 'Hilahin ang pinakabago'.
Panghuli, i-click ang 'Bumuo'. Susubukan nito ang iyong app sa isang .apk file, at pagkatapos ay ipakita sa iyo ang pagpipilian ng pag-download ng .apk. Maaari mo na ngayong i-download ang .apk file na ito sa iyong computer at ilipat ito sa iyong telepono, pagkatapos i-install ito mula doon. Bilang kahalili, maaari mong gamitin ang iyong telepono upang i-scan ang QR code sa iyong computer screen upang awtomatikong mai-install ang .apk file sa iyong Android device.
Ayan yun! Ngayon, upang ipaliwanag sa iyo ang ilang mahahalagang bagay:
- Ito ay isang napakasimple na gabay na naglakad sa iyo sa pagbuo ng pinaka-pangunahing mga hybrid na app. Ang mga tao sa pangkalahatan ay hindi naglilibot sa pambalot ng kanilang mga website sa isang katutubong browser at ipinapasa ito bilang isang Android app sa Google Play store. Ngunit ngayon na alam mo kung paano ito gawin, maaari mong simulang basahin ang dokumentasyon ng PhoneGap kung paano ipasadya ang iyong app at magdagdag ng maraming lasa dito, upang maaari kang lumikha ng isang tunay na kapaki-pakinabang na app.
- Pangalawa, bawal sa Google Play ang ganitong paraan ng pagbuo ng app upang lumikha ng mga app ng link-scheme para sa nag-iisang layunin ng kita. Kaya't hindi ka makakalikha ng isang app na tinatawag na 'Kumita ng Pera Ngayon!' na magbubukas ng isang website na ganap na puno ng mga ad at bangko sa kita ng ad. Bawal ka sa Google Play store.
