Sådan oprettes en grundlæggende Android App i PhoneGap

For de fleste mennesker, ideen om at oprette en Android app lyder så vanskeligt som bjergbestigning. Folk bruger måneder til at lære at kode og bruge Android SDK til at udvikle apps, og den gennemsnitlige person, især en online virksomhedsejer, har muligvis ikke denne slags tid.

Heldigvis er der en simpel genvej til at oprette, hvad der kaldes en hybrid app, i modsætning til at oprette en indbygget app. En hybrid-app udnytter i grunden Android's indbyggede WebView til at præsentere din app, med tilgængelige plug-ins, som gør det muligt for din hybrid-app at få adgang til kameraet, messaging-tjenesten og andre aspekter af Android-systemet. En hybrid app kan let bygges til flere operativsystemer, da de for det meste bruger Java, HTML5 og CSS til at køre.

Denne vejledning vil lære dig, hvordan du opretter en hybrid app ved hjælp af den populære app-opbygningsplatform PhoneGap. Hvad vi skal gøre, er at gøre din hjemmeside til en installerbar .apk (Android-applikation) fil, som kan installeres på enhver Android-telefon. Når appen startes, åbner den simpelthen din hjemmeside i Android's native WebView-browser, men den vises som en fuldskærms-app - ingen navigationslinje til webadressen eller nogen anden anelse om, at dit website simpelthen bliver præsenteret i en browser.

Krav

Din egen hjemmeside (med det formål at følge denne vejledning, kan du bare starte en gratis WordPress-blog)

GitHub konto

PhoneGap-konto
Notepad ++ (eller lignende tekstredigeringssoftware, der kan genkende kode)
Fotoredigeringssoftware til oprettelse af appikoner (Photoshop, GIMP, osv.)

Kodningsskabeloner

Disse er kode skabeloner, du kan bruge til formålet med denne vejledning - de er fra min egen app udviklet med PhoneGap, men jeg har fjernet dem fra mine personlige oplysninger. Indstilling af disse fra bunden med alle de korrekte parametre tog mig mange dage med fejlfinding, så jeg leverer disse til din bekvemmelighed. Selv tak!

> config.xml
> index.html

Kom i gang

Opret en mappe på dit skrivebord og kald det www: uden citaterne. Dette er projektets hovedmappe, hvor PhoneGap-bygherren forventer at finde alle filerne til dit projekt. Nu skal vi oprette et ikon til din app.

Åbn din billedredigeringssoftware og lav et nyt billede i .PNG-format. Dine billedindstillinger skal se sådan ud:

Og nu kan du tegne dit ikon, for eksempel vil jeg bare lave 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, vil du selvfølgelig lave flere størrelser på samme ikon. Her er en tabel med de anvendte billedstørrelser:

36 × 36 (120 dpi / LDPI)
48 × 48 (160 dpi / MDPI)
72 × 72 (240 dpi / HDPI)
96 × 96 (320 dpi / XHDPI)
144 × 144 (480dpi / XXHDPI)
192 × 192 (640dpi / XXXHDPI)

Jeg ønsker ikke at bruge for længe at tale om skærmstørrelser og DPI, bare ved at DPI stort set korrelerer med skærmopløsningen. En telefon, der bruger 1080 × 1920 skærmopløsning, bruger 480 dpi, men det korresponderer ikke nødvendigvis nøjagtigt med skærmstørrelsen. En telefon kunne 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 smartphone skærme, så lad os gå videre.

Når du har lavet dit ikon, skal du gemme det som icon.png og flytte det inde i din www: mappe. Dette bliver standardikonet for din app. Hvis du vil oprette ikoner i forskellige størrelser, der svarer til brugerens skærmopløsning, vil du gemme ikonet i forskellige størrelser og navne, for eksempel Icon144.png, Icon192.png, Icon96.png og så videre. Derefter ville du redigere filen Config.xml for at pege på hvert enkelt ikon. Lad os gå videre.

Så nu du har et ikon til din app, har du brug for et stænkbillede. Dette er dybest set en læsningsskærm, som et tapet, der vises, før din app er indlæst. 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
• XXXHDPI:
  • Portræt: 1280px1920px
  • Landskab: 1920x1280px

Så opret dit splashbillede i opløsningen til din enhed, gem det som Splash.png og flyt det derefter inde i projektets mappe. Great, du har nu din apps ikon og splash image, lad os flytte til opsætning af dine config og indeksfiler.

Index.HTML og Config.XML forklaret

Konfiguren.xml-filen er, hvad der angiver byggemiljøet (Android, iPhone, Windows Phone), ikonet og splash-placeringerne og de Apache Cordova-plugin-moduler, du vil bruge i din app.

Åbn skabelonen, jeg gav i Notepad ++, og du vil se disse linjer nær toppen:

Opdater disse felter med dine oplysninger, men forlad præferencerne alene. Resten af ​​config-filen er selvforklarende, hvis du bare ser på værdierne. Forvalgsnavn = fuldskærm fortæller f.eks., At appen skal starte sig som en fuldscreen-app. Forlad alt alene, undtagen for denne sidste værdi nederst i filen:

Skift det til din aktuelle webadresse. Dette vil gøre det muligt for app-brugeren at navigere fuldstændigt på dit websted, og kun din hjemmeside - de kan ikke forlade din hjemmeside, mens du bruger din app. Selvfølgelig vil appen ikke have en navigeringslinje til webadresser, det er ikke engang en bekymring, men sikrer også, at brugeren har adgang til alle sider på din hjemmeside. * Efter webadressen er et jokertegn, som i kodende jargon betyder, at det vil acceptere alt, der er indtastet i stedet for * -tegnet.

Selvfølgelig, hvis du vil begrænse brugeren til kun bestemte sider på din hjemmeside, vil du tilføje separate værdier som denne:

Lad os gå videre til Index.html- filen, dette er brød og smør, der gør appen rent faktisk. Åbn den inde i Notepad ++ og skift dokumentets sprog til HTML. Hvad index.html gør det i grunden, er at fortælle Android-browseren, hvordan du viser dit websted. I den skabelon, jeg har angivet, er der tags til at fjerne webadressens navigationslinje fra browseren, lad telefonens tilbageknapp for at afslutte appen og starte appen efter skærmbilledet vises. Linjen du vil ændre er her:

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

Opbygning af appen i PhoneGap Build

Så log ind på dit GitHub konto, og naviger til hovedsiden i dit lager. Under opbevaringsnavnet skal du klikke på Upload filer og trække din projektmappe i filtræskærmen. Skriv nu en commit-meddelelse nederst, ligesom mit første app forsøg . Klik endelig på Commit Changes.

Gå nu til PhoneGap Build-siden og log ind. Klik nu på knappen Ny app på byggesiden. Dette vil bede dig om at indtaste stien til dit GitHub-depot, så gør du det, og klik derefter på Træk fra .git reposity.

Nu tilbage på hovedbyggesiden, klik på Opdater kode og Træk senest.

Klik endelig på Byg. Den vil kompilere din app til en .apk-fil og derefter præsentere dig for 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å computerskærmen for automatisk at installere .apk-filen på din Android-enhed.

Det er det! Nu for at forklare for dig nogle vigtige ting:

• Dette var en yderst forenklet vejledning, der gik dig igennem at opbygge de mest basale af hybrid apps. Folk går generelt ikke rundt om indpakning af deres websites i en indbygget browser og afleverer den 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 det, så du forhåbentlig kan oprette en faktisk nyttig app.
• For det andet forbyder Google Play denne slags app-bygningsmetode til at oprette linkprogrammer til det eneste formål med indtægter. Så du kan ikke oprette en app kaldet Tjen penge i dag! der åbner en hjemmeside, der er fuld af annoncer og banker på annonceindtægter. Du vil blive forbudt fra Google Play Butik.

PRO TIP: Hvis problemet er med din computer eller en bærbar computer / notesbog, skal du prøve at bruge Reimage Plus-softwaren, som kan scanne lagrene og udskifte korrupte og manglende filer. Dette virker i de fleste tilfælde, hvor problemet er opstået på grund af systemkorruption. Du kan downloade Reimage Plus ved at klikke her