Kuinka luoda perustason Android-sovellus PhoneGapissa

Tämä opas opettaa sinulle, miten voit luoda hybridisovelluksen käyttämällä suosittua sovellusrakennusalustaa PhoneGap. Aiomme tehdä, on muuttaa verkkosivustosi asennettavaksi .apk (Android-sovellus) -tiedostoksi, joka voidaan asentaa mihin tahansa Android-puhelimeen. Kun sovellus käynnistetään, se yksinkertaisesti avaa verkkosivustosi Androidin alkuperäisessä WebView-selaimessa, mutta se näkyy koko näytön sovelluksena - ei URL-selauspalkkia tai muita vihjeitä siitä, että verkkosivustoasi yksinkertaisesti esitetään selaimessa.

Vaatimukset

Oma verkkosivustosi (tämän oppaan seuraamiseksi voit yksinkertaisesti perustaa ilmaisen WordPress-blogin)

GitHub-tili

PhoneGap-tili
Muistio ++ (tai vastaava tekstinmuokkausohjelmisto, joka tunnistaa koodin)
Kuvankäsittelyohjelmisto sovelluskuvakkeiden luomiseen (Photoshop, GIMP jne.)

Koodausmallit

Nämä ovat koodimalleja, joita voit käyttää tässä oppaassa - ne ovat omasta sovelluksestani, joka on kehitetty PhoneGapin kanssa, mutta olen poistanut heiltä henkilökohtaiset tietoni. Näiden asettaminen tyhjästä kaikilla oikeilla parametreilla kesti useita päiviä vianetsintää, joten tarjoan nämä avuksesi. Ole hyvä!

> Määritä XML
> Hakemisto.HTML

Päästä alkuun

Luo kansio työpöydällesi ja kutsu sitä www: ' ilman lainausmerkkejä. Tämä on projektin päähakemisto, josta PhoneGap-rakentaja odottaa löytävänsä kaikki projektisi tiedostot. Nyt aiomme luoda kuvakkeen sovelluksellesi.

Avaa valokuvankäsittelyohjelmisto ja luo uusi kuva .PGG-muodossa. Kuva-asetusten tulisi näyttää tältä:

Ja nyt voit piirtää kuvakkeesi, esimerkiksi aion tehdä vain pienen napin:

Kuvan koko riippuu henkilökohtaisesta puhelimen näytöstä, mutta jos aiot kehittää sovelluksen useille laitteille, teet tietysti useita kokoja samasta kuvakkeesta. Tässä on taulukko käytetyistä kuvakokoista:

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)

En halua viettää liian kauan puhumalla näytön koosta ja DPI: stä, tiedän vain, että DPI korreloi melko paljon näytön tarkkuuden kanssa. Puhelin, joka käyttää 1080 × 1920 -resoluutiotarkkuutta, käyttää 480 dpi: tä, mutta ei välttämättä korreloivat tarkalleen näytön koon kanssa. Puhelimessa voi olla 5,2 tuuman näyttö tai 6 tuuman näyttö ja resoluutio 1080 × 1920. Mutta tämä opas ei koske älypuhelinten näyttöjä, joten siirrymme eteenpäin.

Kun olet laatinut kuvakkeen, tallenna se nimellä icon.png ja siirrä se www: kansiosi sisään. Tästä tulee oletuksena -kuvake sovelluksellesi. Jos haluat luoda erikokoisia kuvakkeita, jotka vastaavat käyttäjän näytön tarkkuutta, tallenna kuvake erikokoisina ja -nimisinä, esimerkiksi Icon144.png, Icon192.png, Icon96.png ja niin edelleen. Sitten muokkaat Config.xml tiedosto osoittamaan kutakin yksittäistä kuvaketta. Siirrytään eteenpäin.

Joten nyt, kun sinulla on sovelluksellesi kuvake, tarvitset tilkakuvan. Tämä on periaatteessa latausnäyttö, kuten taustakuva, joka näkyy ennen sovelluksesi lataamista. Roiskekuvien koot toimivat samalla periaatteella kuin kuvakkeet, mutta ovat hieman suurempia. Tässä on taulukko:

• LDPI:
  • Muotokuva: 200x320px
  • Maisema: 320 x 200 kuvapistettä
• MDPI:
  • Muotokuva: 320x480px
  • Maisema: 480x320px
• HDPI:
  • Muotokuva: 480x800px
  • Maisema: 800 x 480 pikseliä
• XHDPI:
  • Muotokuva: 720px1280px
  • Maisema: 1280x720px
• XXHDPI:
  • Muotokuva: 960px1600px
  • Maisema: 1600x960px
• XXXHDPI:
  • Muotokuva: 1280px1920px
  • Maisema: 1920x1280px

Joten luo tilkakuva laitteesi tarkkuudessa, tallenna se nimellä Splash.png ja siirrä se sitten projektisi kansioon. Hienoa, sinulla on nyt sovelluksesi kuvake ja tilannekuva, siirrytään määritys- ja hakemistotiedostojen määrittämiseen.

Index.HTML- ja Config.XML-selitykset

Config.xml-tiedosto asettaa asennusympäristön (Android, iPhone, Windows Phone), kuvakkeen ja roiskeiden sijainnit sekä Apache Cordova -laajennukset, joita haluat käyttää sovelluksessasi.

Avaa Notepad ++ -sovelluksen tarjoama malli ja näet nämä rivit yläosassa:

Päivitä nämä kentät tietojesi kanssa, mutta jätä 'mieltymys' -kentät yksin. Loput määritystiedostosta ovat itsestään selviä, jos tarkastelet vain arvoja. Preference name = ”fullscreen” esimerkiksi kehottaa sovellusta käynnistämään itsensä koko näytön sovelluksena. Jätä kaikki yksin, paitsi tämä viimeinen arvo tiedoston alaosassa:

Vaihda se todelliseen verkkosivustosi URL-osoitteeseen. Tämä antaa sovelluksen käyttäjälle mahdollisuuden navigoida kokonaan verkkosivustollasi ja vain verkkosivustollasi - he eivät voi poistua verkkosivustoltasi käyttäessään sovellustasi. Tietysti sovelluksella ei ole URL-navigointipalkkia, tämä ei edes aiheuta huolta, mutta varmistaa myös, että käyttäjä voi käyttää kaikkia verkkosivustosi sivuja. Sivuston URL-osoitteen jälkeen * on a jokerimerkki , mikä koodaavassa ammattikiellossa tarkoittaa, että se hyväksyy kaiken, mikä syötetään * -merkin tilalle.

Tietenkin, jos haluat rajoittaa käyttäjän vain tietyille verkkosivustosi sivuille, lisäät erillisiä arvoja, kuten tämä:

Siirrytään eteenpäin Index.html tiedosto, tämä on leipä ja voi, jotta sovellus todella toimii. Avaa se Notepad ++: n sisällä ja vaihda asiakirjan kieleksi HTML. Mitä index.html pohjimmiltaan tekee, on kertoa Android-selaimelle verkkosivustosi näyttäminen - tarjoamassani mallissa on tunnisteita URL-selauspalkin poistamiseksi selaimesta, puhelimen Takaisin-painikkeen poistamiseksi sovelluksesta ja käynnistämisen sovelluksen jälkeen, kun splash-näyttö tulee näkyviin. Vaihdettava rivi on täällä:

var url = ’http://omasivustosi.com’

Sovelluksen rakentaminen PhoneGap Build -sovelluksessa

Joten kirjaudu sisään GitHub-tilillesi ja siirry arkistosi pääsivulle. Valitse arkiston nimen alla 'Lataa tiedostot' ja vedä projektikansio tiedostopuunäyttöön. Kirjoita nyt alareunaan sitoutumisviesti, kuten “ ensimmäinen sovellusyritykseni ” . Napsauta lopuksi Suorita muutokset.

Mene nyt PhoneGap-koontiversio sivu ja kirjaudu sisään. Napsauta sitten koontisivun Uusi sovellus -painiketta. Tämä pyytää sinua syöttämään polun GitHub-arkistoon, joten tee niin ja napsauta sitten 'Vedä .git-repositeetista'.

Palaa sitten takaisin rakennuksen pääsivulle, napsauta 'Päivitä koodi' ja 'Vedä viimeisin'.

Napsauta lopuksi 'Rakenna'. Se kokoaa sovelluksesi .apk-tiedostoksi ja tarjoaa sinulle mahdollisuuden ladata .apk. Voit nyt ladata tämän .apk-tiedoston tietokoneellesi ja siirtää sen puhelimeesi ja asentaa sen sitten sieltä. Vaihtoehtoisesti voit skannata puhelimesi QR-koodin tietokoneen näytöllä asentaaksesi .apk-tiedoston automaattisesti Android-laitteellesi.

Se siitä! Selittäkää nyt muutama tärkeä asia:

• Tämä oli erittäin yksinkertaistettu opas, joka opasti rakentamaan perustavimmat hybridisovellukset. Ihmiset eivät yleensä kierrä verkkosivustojaan natiiviselaimessa ja välittävät sen Android-sovelluksena Google Play -kaupassa. Mutta nyt kun tiedät miten se tehdään, voit alkaa lukea PhoneGap-ohjeet sovelluksesi mukauttamisesta ja lisätä siihen paljon makua, jotta voit toivottavasti luoda todella hyödyllisen sovelluksen.
• Toiseksi Google Play kieltää tällaisen sovellusten rakentamisen menetelmän luoda linkkijärjestelmäsovelluksia vain tuloja varten. Joten et voi luoda sovellusta nimeltä 'Ansaitse rahaa tänään!' joka avaa verkkosivuston, joka on täynnä mainoksia ja pankki mainostuloista. Sinut kielletään Google Play -kaupasta.