Hogyan lehet létrehozni egy alapvető Android alkalmazást a PhoneGap alkalmazásban

Ez az útmutató megtanulja, hogyan lehet hibrid alkalmazást létrehozni a népszerű alkalmazásépítő platform, a PhoneGap segítségével. Amit meg fogunk tenni, az az, hogy a webhelyét telepíthető .apk (Android-alkalmazás) fájlokká alakítjuk, amely bármely androidos telefonra telepíthető. Az alkalmazás elindításakor egyszerűen megnyitja a webhelyet az Android natív WebView böngészőjében, de teljes képernyős alkalmazásként jelenik meg - nincs URL navigációs sáv vagy bármilyen más nyom, hogy webhelyét egyszerűen egy böngészőben mutatják be.

Követelmények

Saját webhely (az útmutató követése érdekében egyszerűen indíthat egy ingyenes WordPress-blogot)

GitHub-fiók

PhoneGap fiók
Jegyzettömb ++ (vagy hasonló szövegszerkesztő szoftver, amely felismeri a kódot)
Fotószerkesztő szoftver alkalmazásikonok létrehozására (Photoshop, GIMP stb.)

Sablonok kódolása

Ezek a kódsablonok, amelyeket felhasználhat az útmutató céljára - saját, a PhoneGap alkalmazással kifejlesztett alkalmazásomból származnak, de megfosztottam őket személyes adataimtól. Ezeknek a nulláról való beállítása minden helyes paraméter mellett sok napos hibaelhárítást igényelt, ezért ezeket az Ön kényelme érdekében nyújtom. Szívesen!

> Config.XML
> Index.HTML

Elkezdeni

Hozzon létre egy mappát az asztalon, és hívja „ www: ' idézetek nélkül. Ez lesz a projekt fő könyvtárja, ahol a PhoneGap készítője elvárja, hogy megtalálja a projekt összes fájlját. Most létrehozunk egy ikont az alkalmazásához.

Nyissa meg a fotószerkesztő szoftvert, és hozzon létre egy új képet .PNG formátumban. Képbeállításainak a következőképpen kell kinéznie:

És most megrajzolhatja az ikonját, például készítek egy kis gombot:

A kép mérete a személyes telefon képernyőjétől függ, de ha egy alkalmazást több eszközre kíván fejleszteni, akkor természetesen több méretet is készít ugyanabból az ikonból. Itt van egy táblázat a felhasznált képméretekről:

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)

Nem akarok túl sokáig tölteni a képernyőméretekről és a DPI-ről, csak tudom, hogy a DPI nagyjából korrelál a képernyő felbontásával. Az 1080 × 1920 képernyőfelbontást használó telefon 480 dpi-t fog használni, de ez nem így történik szükségszerűen pontosan korrelál a képernyő méretével. Lehet, hogy egy telefon 5,2 vagy 6 hüvelykes, 1080 × 1920 felbontású. De ez az útmutató nem az okostelefonok képernyőiről szól, ezért lépjünk tovább.

Miután elkészítette az ikonját, mentse el másként icon.png és helyezze át a www: mappába. Ez lesz az alapértelmezett ikon az alkalmazásodhoz. Ha különböző méretű ikonokat szeretne létrehozni, amelyek meg fognak egyezni a felhasználó képernyőfelbontásával, akkor az ikont különböző méretben és néven mentené el, például Icon144.png, Icon192.png, Icon96.png stb. Akkor szerkesztené a Config.xml fájl minden egyes ikonra mutat. Menjünk tovább.

Tehát most, hogy van egy ikon az alkalmazásához, szüksége van egy fröccsenő képre. Ez alapvetően egy betöltő képernyő, mint egy háttérkép, amely az alkalmazás betöltése előtt jelenik meg. A fröccsenő képméretek ugyanúgy működnek, mint az ikonok, de valamivel nagyobbak. Itt van a táblázat:

• LDPI:
  • Portré: 200x320px
  • Tájkép: 320x200px
• MDPI:
  • Portré: 320x480 képpont
  • Tájkép: 480x320px
• HDPI:
  • Portré: 480x800px
  • Tájkép: 800x480 képpont
• XHDPI:
  • Portré: 720px1280px
  • Tájkép: 1280x720px
• XXHDPI:
  • Portré: 960px1600px
  • Tájkép: 1600x960px
• XXXHDPI:
  • Portré: 1280px1920px
  • Tájkép: 1920x1280px

Tehát hozza létre a splash képet a készülék felbontásában, és mentse el Splash.png majd helyezze át a projekt mappájába. Remek, most megvan az alkalmazás ikonja és a fröccsenő kép, térjünk át a konfigurációs és indexfájlok beállítására.

Az Index.HTML és a Config.XML magyarázata

A config.xml fájl állítja be az összeállítási környezetet (Android, iPhone, Windows Phone), az ikonokat és a splash helyeket, valamint az alkalmazásban használni kívánt Apache Cordova plug-ineket.

Nyissa meg azt a sablont, amelyet a Notepad ++ programban biztosítottam, és a tetején a következő sorokat látja:

Frissítse ezeket a mezőket az adataival, de hagyja békén a „preferencia” mezőket. A konfigurációs fájl többi része magától értetődő, ha csak megnézi az értékeket. A preferencia neve = „teljes képernyős” például azt mondja az alkalmazásnak, hogy teljes képernyős alkalmazásként indítsa el magát. Hagyjon mindent békén, kivéve ezt az utolsó értéket a fájl alján:

Módosítsa a tényleges webhely URL-re. Ez lehetővé teszi az alkalmazás felhasználójának, hogy teljes körűen navigáljon az Ön webhelyén, és csak az Ön webhelyén - nem hagyhatja el az Ön webhelyét az alkalmazás használata közben. Természetesen az alkalmazásnak nem lesz URL navigációs sávja, ez nem is igazán aggasztó, de arról is gondoskodik, hogy a felhasználó hozzáférhessen az Ön weboldalának összes oldalához. A * URL után a webhely URL-je a helyettesítő karakter , ami a kódzsargonban azt jelenti, hogy mindent elfogad, amit a * jel helyére írnak be.

Természetesen, ha a felhasználót csak a webhely bizonyos oldalaira szeretné korlátozni, akkor különálló értékeket adjon hozzá, például:

Térjünk át a Index.html fájl, ez a kenyér és vaj az alkalmazás tényleges működéséhez. Nyissa meg a Notepad ++ alkalmazásban, és állítsa a dokumentum nyelvét HTML-re. Az index.html alapvetően azt jelenti, hogy megmondja az Android böngészőnek, hogyan jelenítse meg webhelyét - az általam megadott sablonban vannak olyan címkék, amelyek eltávolítják az URL navigációs sávot a böngészőből, lehetővé teszik a telefon „Vissza” gombjának kilépését az alkalmazásból, és elindíthatják az alkalmazás a splash képernyő után jelenik meg. A módosítani kívánt sor itt van:

var url = ‘http://sajatwebhely.com’

Az alkalmazás kiépítése a PhoneGap Build alkalmazásban

Tehát jelentkezzen be GitHub-fiókjába, és navigáljon a tárház főoldalára. Az adattár neve alatt kattintson a „Fájlok feltöltése” elemre, és húzza a projekt mappáját a fájlfa képernyőre. Írja be az aljára egy kötelező üzenetet, például: az első alkalmazás-kísérletem ” . Végül kattintson a Változások végrehajtása elemre.

Most menj a PhoneGap Build oldalt és jelentkezzen be. Most kattintson az „Új alkalmazás” gombra a build oldalon. Ez arra fogja kérni, hogy adja meg a GitHub-tárház elérési útját, ezért tegye meg, majd kattintson a „Húzás a .git-tárhelyről” gombra.

Most térjen vissza a fő buildoldalra, kattintson a „Kód frissítése” és a „Pull legújabb” gombra.

Végül kattintson az „Építés” gombra. Összeállítja az alkalmazást .apk fájlba, majd bemutatja az .apk letöltésének lehetőségét. Most letöltheti ezt az .apk fájlt a számítógépére, és átviheti a telefonjára, majd onnan telepítheti. Alternatív megoldásként használhatja telefonját a QR-kód beolvasására a számítógép képernyőjén, hogy automatikusan telepítse az .apk fájlt Android-eszközére.

Ez az! Most, hogy elmagyarázzak néhány fontos dolgot:

• Ez egy rendkívül leegyszerűsített útmutató, amely végigvezette Önt a hibrid alkalmazások legalapvetőbb építésén. Az emberek általában nem járják körbe webhelyeiket egy natív böngészőben, és adják át azt Android-alkalmazásként a Google Play áruházban. De most, hogy tudod, hogyan kell csinálni, elkezdheted elolvasni a PhoneGap dokumentációját arról, hogyan szabhatod testre az alkalmazást, és adhatsz hozzá sok ízt, hogy remélhetőleg létrehozhass egy valóban hasznos alkalmazást.
• Másodszor, a Google Play betiltja ezt a fajta alkalmazás-építési módszert link-séma-alkalmazások létrehozására kizárólag bevétel céljából. Tehát nem hozhat létre „Keressen pénzt ma!” Nevű alkalmazást. amely teljesen tele van hirdetésekkel és a hirdetési bevételekkel teli weboldalon. Letiltják a Google Play áruházból.