Denne guide lærer dig, hvordan du opretter en hybrid-app ved hjælp af den populære app-bygningsplatform PhoneGap. Hvad vi skal gøre er at omdanne dit websted til en installerbar .apk-fil (Android-applikation), der kan installeres på enhver Android-telefon. Når appen startes, åbner den simpelthen dit websted i Androids oprindelige WebView-browser, men det vises som en app i fuld skærm - ingen URL-navigationslinje eller noget andet fingerpeg om, at dit websted simpelthen præsenteres i en browser.
Krav
Dit eget websted (med det formål at følge denne vejledning kan du simpelthen starte en gratis WordPress-blog)
GitHub-konto
PhoneGap-konto
Notesblok ++ (eller lignende tekstredigeringssoftware, der kan genkende kode)
Fotoredigeringssoftware til oprettelse af appikoner (Photoshop, GIMP osv.)
Kodningsskabeloner
Dette er kodeskabeloner, du kan bruge til denne vejledning - de kommer fra min egen app udviklet med PhoneGap, men jeg har frataget dem mine personlige oplysninger. Opsætning af disse fra bunden med alle de korrekte parametre tog mig mange dages fejlfinding, så jeg leverer disse for din bekvemmelighed. Selv tak!
> Config.XML
> Indeks. HTML
Kom godt i gang
Opret en mappe på dit skrivebord, og kald den “ www: ' uden citaterne. Dette vil være projektets hovedkatalog, hvor PhoneGap-bygherren forventer at finde alle filerne til dit projekt. Nu opretter vi et ikon til din app.
Åbn din billedredigeringssoftware, og opret et nyt billede i .PNG-format. Dine billedindstillinger skal se sådan ud:
Og nu kan du tegne dit ikon, for eksempel laver jeg bare en lille knap:
Billedets størrelse afhænger af din personlige telefonskærm, men hvis du har til hensigt at udvikle en app til flere enheder, laver du selvfølgelig flere størrelser af det samme ikon. Her er en tabel over de anvendte billedstørrelser:
36 × 36 (120 dpi / LDPI)
48 × 48 (160dpi / MDPI)
72 × 72 (240 dpi / HDPI)
96 × 96 (320dpi / XHDPI)
144 × 144 (480dpi / XXHDPI)
192 × 192 (640dpi / XXXHDPI)
Jeg vil ikke bruge for lang tid på at tale om skærmstørrelser og DPI, bare ved, at DPI stort set korrelerer med skærmopløsning. En telefon, der bruger 1080 × 1920 skærmopløsning, bruger 480 dpi, men det gør det ikke nødvendigvis korrelere nøjagtigt med skærmstørrelse. En telefon kan have en 5,2 ”skærm eller en 6” skærm og have en opløsning på 1080 × 1920. Men denne vejledning handler ikke om smartphoneskærme, så lad os gå videre.
Når du har tegnet dit ikon, skal du gemme det som icon.png og flyt det inde i din www: mappe. Dette bliver til Standard ikon til din app. Hvis du vil oprette ikoner i forskellige størrelser, der svarer til brugerens skærmopløsning, gemmer du ikonet i forskellige størrelser og navne, for eksempel Icon144.png, Icon192.png, Icon96.png osv. Så ville du redigere Config.xml fil for at pege på hvert enkelt ikon. Lad os gå videre.
Så nu hvor du har et ikon til din app, har du brug for et stænkbillede. Dette er dybest set en indlæsningsskærm, som et tapet, der vises, før din app indlæses. Splash-billedstørrelser fungerer på samme princip som ikoner, men er lidt større. Her er bordet:
- LDPI:
- Portræt: 200x320px
- Landskab: 320x200px
- MDPI:
- Portræt: 320x480px
- Landskab: 480x320px
- HDPI:
- Portræt: 480x800px
- Landskab: 800x480px
- XHDPI:
- Portræt: 720px1280px
- Landskab: 1280x720px
- XXHDPI:
- Portræt: 960px1600px
- Landskab: 1600x960px
- RYGFDPI:
- Portræt: 1280px1920px
- Landskab: 1920x1280px
Så lav dit stænkbillede i opløsning til din enhed, gem det som Splash.png og flyt det derefter ind i projektets mappe. Godt, du har nu din apps ikon og stænkbillede, lad os gå videre til opsætning af dine konfigurations- og indeksfiler.
Index.HTML og Config.XML forklaret
Config.xml-filen er det, der indstiller byggemiljøet (Android, iPhone, Windows Phone), ikonet og stænkplaceringerne og de Apache Cordova-plug-ins, du vil bruge i din app.
Åbn den skabelon, jeg angav i Notepad ++, og du vil se disse linjer nær toppen:
Opdater disse felter med dine oplysninger, men lad 'præference' -felterne være alene. Resten af konfigurationsfilen er selvforklarende, hvis du bare ser på værdierne. Præference navn = ”fuldskærm” for eksempel beder appen om at starte sig selv som en fuldskærms-app. Lad alt være i fred, undtagen denne sidste værdi i bunden af filen:
Skift den til din faktiske websteds-URL. Dette gør det muligt for appbrugeren at navigere fuldstændigt på dit websted og kun på dit websted - de kan ikke forlade dit websted, mens du bruger din app. Naturligvis har appen ikke en URL-navigationslinje, dette er ikke engang et problem, men sørger også for, at brugeren kan få adgang til alle siderne på dit websted. * Efter websteds-URL er en jokertegn , hvilket i kodningsjargon betyder, at det accepterer alt, hvad der indtastes i stedet for * tegnet.
Selvfølgelig, hvis du vil begrænse brugeren til kun bestemte sider på dit websted, tilføjer du separate værdier som denne:
Lad os gå videre til Indeks.html fil, dette er brød og smør for at få appen til at fungere. Åbn det i Notepad ++, og skift dokumentsprog til HTML. Hvad index.html grundlæggende gør, er at fortælle Android-browseren, hvordan man viser dit websted - i den skabelon, jeg har angivet, er der tags, der fjerner URL-navigationslinjen fra browseren, tillader telefonens 'tilbage' -knap at lukke appen og starte appen efter at skærmbilledet vises. Linjen, du vil ændre, er her:
var url = ‘http://ditwebsite.com’
Opbygning af appen i PhoneGap Build
Så log ind på din GitHub-konto, og naviger til hovedsiden i dit arkiv. Under arkivnavnet skal du klikke på 'Upload filer', og trække din projektmappe til filtræskærmen. Skriv nu en meddelelsesmeddelelse i bunden, som “ mit første app-forsøg ” . Klik endelig på Foretag ændringer.
Gå nu til PhoneGap Build side og log ind. Klik nu på knappen 'Ny app' på build-siden. Dette beder dig om at indtaste stien til dit GitHub-arkiv, så gør det og klik derefter på 'Træk fra .git-reposity'.
Klik nu på 'Opdater kode' og 'Træk senest' på hovedbygningssiden.
Klik til sidst på 'Byg'. Det kompilerer din app til en .apk-fil og giver dig derefter muligheden for at downloade .apk. Du kan nu downloade denne .apk-fil til din computer og overføre den til din telefon og derefter installere den derfra. Alternativt kan du bruge din telefon til at scanne QR-koden på din computerskærm for automatisk at installere .apk-filen på din Android-enhed.
Det er det! For at forklare dig et par vigtige ting nu:
- Dette var en yderst forenklet guide, der ledte dig gennem opbygningen af de mest basale hybrid-apps. Folk går generelt ikke rundt og indpakker deres websteder i en indbygget browser og sender den ud som en Android-app i Google Play Butik. Men nu hvor du ved, hvordan du gør det, kan du begynde at læse PhoneGap-dokumentationen om, hvordan du tilpasser din app og tilføjer en masse smag til den, så du forhåbentlig kan oprette en faktisk nyttig app.
- For det andet forbyder Google Play denne form for app-opbygningsmetode til at oprette link-skema-apps til det eneste formål med indtægter. Så du kan ikke oprette en app kaldet 'Tjen penge i dag!' der åbner et websted, der er fuldstændig fuld af annoncer og bankerer annonceindtægter. Du bliver forbudt fra Google Play Butik.
