Slik lager du en grunnleggende Android-app i PhoneGap

For de fleste høres ideen om å lage en Android-app så vanskelig som fjellklatring. Folk bruker måneder til å lære å kode og bruke Android SDK til å utvikle apper, og den gjennomsnittlige personen, spesielt en online bedriftseier, har kanskje ikke denne typen tid.

Heldigvis er det en enkel snarvei for å lage det som kalles en hybrid-app, i motsetning til å opprette en innfødt app. En hybrid-app bruker i utgangspunktet Android i WebView for å presentere appen din, med tilgjengelige plugin-moduler som lar hybridappen få tilgang til kameraet, meldingsservice og andre aspekter av Android-systemet. En hybrid app kan enkelt bygges for flere operativsystemer, siden de for det meste bruker Java, HTML5 og CSS til å kjøre.

Denne veiledningen vil lære deg hvordan du oppretter en hybrid app ved hjelp av populære app-bygningsplattformen PhoneGap. Det vi skal gjøre er å slå nettstedet ditt til en installerbar .apk-fil (Android-applikasjon) som kan installeres på alle Android-telefoner. Når appen blir lansert, vil den ganske enkelt åpne nettstedet ditt i Android's native WebView-nettleser, men det vises som en fullskjerm-app - ingen URL-navigeringslinje eller en annen anelse om at nettstedet ditt bare presenteres i en nettleser.

Krav

Din egen nettside (for å følge denne veiledningen, 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, osv.)

Kodemaler

Dette er kodemaler du kan bruke til denne veiledningen - de er fra min egen app utviklet med PhoneGap, men jeg har fjernet dem fra min personlige informasjon. Setter disse opp fra bunnen av med alle de riktige parametrene tok meg mange dager med feilsøking, så jeg gir disse for enkelhets skyld. Værsågod!

> config.xml
> index.html

Starter

Opprett en mappe på skrivebordet ditt og ring den www: uten anførselstegn. Dette vil være prosjektets hovedkatalog, hvor PhoneGap-byggeren forventer å finne alle filene for prosjektet ditt. Nå skal vi lage et ikon for appen din.

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

Og nå kan du tegne ditt ikon, 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 gjøre flere størrelser på det samme ikonet. Her er en tabell med bildestørrelsene som brukes:

36 × 36 (120dpi / 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 bruke for lenge å snakke om skjermstørrelser og DPI, bare vet at DPI stort sett korrelerer med skjermoppløsningen. En telefon som bruker 1080 × 1920 skjermoppløsning, bruker 480dpi, men dette korrelerer ikke nødvendigvis nøyaktig med skjermstørrelsen. En telefon kan ha en 5, 2-skjerm eller en 6-skjerm og har en oppløsning på 1080 × 1920. Men denne veiledningen handler ikke om smarttelefonskjerm, så la oss gå videre.

Når du har skrevet opp ditt ikon, lagrer du det som icon.png og flytter det inn i din www: mappe. Dette blir standardikonet for appen din. Hvis du vil lage ikoner i forskjellige størrelser som passer til skjermoppløsningen til brukeren, vil du lagre ikonet i forskjellige størrelser og navn, for eksempel Icon144.png, Icon192.png, Icon96.png og så videre. Da ville du redigere filen Config.xml for å peke på hvert enkelt ikon. La oss gå videre.

Så nå at du har et ikon for appen din, trenger du et splash-bilde. Dette er i utgangspunktet en laste skjerm, som et bakgrunnsbilde som vises før appen din er lastet inn. Splash bildestørrelser fungerer på samme prinsipp som ikoner, men er litt større. Her er bordet:

• 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 ditt splashbilde i oppløsningen for enheten din, lagre den som Splash.png og flytte den deretter i prosjektets mappe. Flott, du har nå appens ikon og splash-bilde, la oss gå videre til å konfigurere konfigurasjons- og indeksfiler.

Index.HTML og Config.XML forklart

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

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

Oppdater disse feltene med informasjonen din, men legg inn preferansefeltene alene. Resten av config-filen er selvforklarende hvis du bare ser på verdiene. Forhåndsnavn = fullskjerm for eksempel forteller appen å starte seg selv som en fullskjerm-app. La alt være, bortsett fra denne siste verdien nederst på filen:

Endre det til din faktiske nettadresse. Dette vil tillate app-brukeren å navigere helt 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 nettadresseb navigasjonslinje, dette er ikke engang en bekymring, men sørger også for at brukeren har tilgang til alle sidene på nettstedet ditt. * Etter nettadressen er et jokertegn, som i kodingsjargong betyr at det vil akseptere 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 Index.html- filen, dette er brød og smør som gjør at appen faktisk fungerer. Åpne den i Notisblokk ++ og bytt dokumentspråket til HTML. Hva index.html gjør i utgangspunktet fortelle Android-nettleseren hvordan du viser nettstedet ditt - i malen jeg har oppgitt, er det tagger for å fjerne nettadressens navigasjonslinje fra nettleseren, la telefonens tilbakeknapp være å gå ut av appen, og start appen etter at skjermen vises. Linjen du vil endre er her:

var url = 'http://yourwebsite.com'

Bygg Appen i PhoneGap Build

Så logg inn på GitHub-kontoen din, og naviger til hovedsiden til lageret ditt. Under oppbevaringsnavnet klikker du Last opp filer, og drar prosjektmappen din inn i skjermbildet for filtre. Skriv nå en commit-melding nederst, som min første appforsøk . Til slutt klikker du på Forbind endringer.

Gå nå til PhoneGap Build-siden og logg inn. Klikk nå på Ny app-knappen på byggesiden. Dette vil be deg om å legge inn banen til GitHub-depotet ditt, så gjør du det, og klikk deretter Træk fra .git reposity.

Nå tilbake på hovedbyggingssiden, klikk Oppdater kode og Trekk siste.

Til slutt klikker du på Bygg. Den vil kompilere appen din til en .apk-fil, og deretter presentere deg muligheten til å laste ned .apk. Du kan nå laste ned denne .apk-filen til datamaskinen din og overføre den til telefonen, og installer den derfra. Alternativt kan du bruke telefonen til å skanne QR-koden på skjermen 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 gikk deg gjennom å bygge de mest grunnleggende av hybrid apps. Folk går vanligvis ikke rundt på å pakke inn sine nettsteder i en innfødt nettleser og overfører den som en Android-app på 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 legger mye smak til det, slik at du forhåpentligvis kan lage en faktisk nyttig app.
• For det andre forbyder Google Play denne typen app-bygningsmetode for å lage apper til lenkeskjema med det eneste formålet med inntektene. Så du kan ikke opprette en app kalt Tjen penger i dag! som åpner et nettsted som er fullt fullt av annonser og banker på annonseinntekter. Du vil bli utestengt fra Google Play-butikken.

PRO TIPS: Hvis problemet er med datamaskinen eller en bærbar PC / notatbok, bør du prøve å bruke Reimage Plus-programvaren som kan skanne arkiver og erstatte skadede og manglende filer. Dette fungerer i de fleste tilfeller der problemet er oppstått på grunn av systemkorrupsjon. Du kan laste ned Reimage Plus ved å klikke her