Hvordan lage en grunnleggende Android-app i PhoneGap

Denne guiden vil lære deg hvordan du lager en hybridapp ved hjelp av den populære app-bygningsplattformen PhoneGap. Det vi skal gjøre er å gjøre nettstedet ditt til en installerbar .apk-fil (Android-applikasjon) som kan installeres på hvilken som helst Android-telefon. Når appen lanseres, vil den ganske enkelt åpne nettstedet ditt i Androids opprinnelige WebView-nettleser, men det vises som en app i fullskjerm - ingen URL-navigasjonsfelt eller annen anelse om at nettstedet ditt bare blir presentert i en nettleser.

Krav

Din egen nettside (for å følge denne guiden kan du bare starte en gratis WordPress-blogg)

GitHub-konto

PhoneGap-konto
Notisblokk ++ (eller lignende tekstredigeringsprogramvare som kan gjenkjenne kode)
Fotoredigeringsprogramvare for å lage appikoner (Photoshop, GIMP, etc)

Kodemaler

Dette er kodemaler du kan bruke til formålet med denne guiden - de er fra min egen app utviklet med PhoneGap, men jeg har fratatt dem min personlige informasjon. Å sette opp disse fra bunnen av med alle de riktige parametrene tok meg mange dager med feilsøking, så jeg leverer disse for din bekvemmelighet. Værsågod!

> Config.XML
> Indeks. HTML

Starter

Lag en mappe på skrivebordet og kall det “ www: ' uten sitatene. Dette vil være prosjektets hovedkatalog, der PhoneGap-byggmesteren forventer å finne alle filene for prosjektet ditt. Nå skal vi lage et ikon for appen din.

Åpne bilderedigeringsprogramvaren din og opprett et nytt bilde i .PNG-format. Bildeinnstillingene dine skal se slik ut:

Og nå kan du tegne ikonet ditt, for eksempel skal jeg bare lage en liten knapp:

Størrelsen på bildet avhenger av din personlige telefonskjerm, men hvis du har tenkt å utvikle en app for flere enheter, vil du selvfølgelig lage flere størrelser av det samme ikonet. Her er en tabell over bildestørrelsene som brukes:

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)

Jeg vil ikke bruke for lang tid på å snakke om skjermstørrelser og DPI, bare vet at DPI korrelerer ganske mye med skjermoppløsningen. En telefon som bruker 1080 × 1920 skjermoppløsning vil bruke 480 dpi, men dette gjør det ikke nødvendigvis korrelere nøyaktig med skjermstørrelsen. En telefon kan ha en 5,2 ”skjerm eller en 6” skjerm og ha en 1080 × 1920 oppløsning. Men denne guiden handler ikke om smarttelefonskjermbilder, så la oss fortsette.

Når du har tegnet opp ikonet, lagrer du det som icon.png og flytt den inn i www: mappen. Dette blir misligholde ikonet for appen din. Hvis du vil lage ikoner i forskjellige størrelser som samsvarer med brukerens skjermoppløsning, vil du lagre ikonet i forskjellige størrelser og navn, for eksempel Icon144.png, Icon192.png, Icon96.png, og så videre. Så ville du redigere Config.xml filen for å peke på hvert enkelt ikon. La oss gå videre.

Så nå som du har et ikon for appen din, trenger du et sprutbilde. Dette er i utgangspunktet en lasteskjerm, som et bakgrunnsbilde som vises før appen din lastes inn. Splash-bildestørrelser fungerer på samme prinsipp som ikoner, men er litt større. Her er tabellen:

• LDPI:
  • Portrett: 200x320px
  • Landskap: 320x200px
• MDPI:
  • Portrett: 320x480px
  • Landskap: 480x320px
• HDPI:
  • Portrett: 480x800px
  • Landskap: 800x480px
• XHDPI:
  • Portrett: 720px1280px
  • Landskap: 1280x720px
• XXHDPI:
  • Portrett: 960px1600px
  • Landskap: 1600x960px
• XXXHDPI:
  • Portrett: 1280px1920px
  • Landskap: 1920x1280px

Så lag sprutbildet ditt i oppløsningen for enheten, lagre det som Splash.png og flytt den deretter inn i prosjektmappen. Flott, du har nå appens ikon og plaskebilde, la oss gå videre til å konfigurere konfigurasjons- og indeksfilene dine.

Index.HTML og Config.XML forklart

Config.xml-filen er det som angir byggemiljøet (Android, iPhone, Windows Phone), ikonet og plasseringene og Apache Cordova-plugin-modulene du vil bruke i appen din.

Åpne malen jeg oppga i Notepad ++, og du vil se disse linjene nær toppen:

Oppdater feltene med informasjonen din, men la 'preferansefeltene' være. Resten av konfigurasjonsfilen er selvforklarende hvis du bare ser på verdiene. Innstillingsnavn = ”fullskjerm” for eksempel forteller appen at den skal starte seg selv som en app for fullskjerm. La alt være i fred, bortsett fra denne siste verdien nederst i filen:

Endre den til den faktiske nettadressen. Dette vil tillate appbrukeren å navigere fullstendig på nettstedet ditt, og bare nettstedet ditt - de kan ikke forlate nettstedet ditt mens du bruker appen din. Selvfølgelig vil appen ikke ha en URL-navigasjonsfelt, dette er ikke engang noe som bekymrer deg, men sørger også for at brukeren kan få tilgang til alle sidene på nettstedet ditt. * Etter nettadressen er en jokertegn , som i kodingsjargong betyr at den aksepterer alt som er skrevet inn i stedet for * tegnet.

Selvfølgelig, hvis du vil begrense brukeren til bare bestemte sider på nettstedet ditt, vil du legge til separate verdier som dette:

La oss gå videre til Indeks.html fil, dette er brød og smør for å få appen til å fungere. Åpne den i Notepad ++ og bytt dokumentspråk til HTML. Hva index.html i utgangspunktet gjør, er å fortelle Android-nettleseren hvordan du skal vise nettstedet ditt - i malen jeg ga, er det tagger for å fjerne URL-navigasjonsfeltet fra nettleseren, la telefonens 'tilbake' -knapp gå ut av appen og starte appen etter at sprutskjermen vises. Linjen du vil endre er her:

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

Bygge appen i PhoneGap Build

Så logg inn på GitHub-kontoen din, og naviger til hovedsiden til depotet ditt. Klikk på 'Last opp filer' under depotnavnet, og dra prosjektmappen din til filtreet. Skriv nå en kommisjonsmelding nederst, som “ mitt første appforsøk ” . Klikk til slutt på Forplikt endringer.

Gå nå til PhoneGap Build side og logg på. Klikk nå “Ny app” -knappen på byggesiden. Dette vil be deg om å angi stien til GitHub-depotet, så gjør det, og klikk deretter 'Trekk fra .git-reposity'.

Nå tilbake på hovedbygningssiden, klikker du på 'Oppdater kode' og 'Trekk siste'.

Til slutt klikker du på 'Bygg'. Den vil kompilere appen din i en .apk-fil, og deretter gi deg muligheten til å laste ned .apk. Du kan nå laste ned denne .apk-filen til datamaskinen din og overføre den til telefonen din, og deretter installere den derfra. Alternativt kan du bruke telefonen til å skanne QR-koden på dataskjermen din for automatisk å installere .apk-filen på Android-enheten din.

Det er det! Nå, for å forklare deg noen viktige ting:

• Dette var en ekstremt forenklet guide som ledet deg gjennom å bygge de mest grunnleggende hybridappene. Folk går vanligvis ikke rundt å pakke inn nettstedene sine i en innfødt nettleser og overføre dem som en Android-app i Google Play-butikken. Men nå som du vet hvordan du gjør det, kan du begynne å lese PhoneGap-dokumentasjonen om hvordan du tilpasser appen din og tilfører den mye smak, slik at du forhåpentligvis kan lage en faktisk nyttig app.
• For det andre forbyr Google Play denne typen app-byggemetode for å lage apper for koblingsskjemaer med det eneste inntektsformålet. Så du kan ikke lage en app som heter 'Tjen penger i dag!' som åpner et nettsted som er fullt av annonser og banker på annonseinntekter. Du vil bli utestengt fra Google Play-butikken.