Så här skapar du en grundläggande Android-app i PhoneGap

För de flesta människor låter tanken att skapa en Android-app lika svårt som bergsklättring. Människor spenderar månader att lära sig hur man kodar och använder Android SDK för att utveckla appar, och den genomsnittliga personen, särskilt en onlineföretagare, kanske inte har den här typen av tid.

Lyckligtvis finns det en enkel genväg för att skapa det som kallas en hybrid app, i motsats till att skapa en inbyggd app. En hybridapp använder i grunden Android's inbyggda WebView för att presentera din app, med insticksprogram som är tillgängliga så att din hybridapp kan komma åt kameran, meddelandeservice och andra aspekter av Android-systemet. En hybrid app kan enkelt byggas för flera operativsystem, eftersom de mest använder Java, HTML5 och CSS för att köra.

Den här guiden kommer att lära dig hur du skapar en hybridapp med hjälp av populära app-byggnadsplattformen PhoneGap. Vad vi ska göra är att göra din webbplats till en installerbar .apk-fil (Android-applikation) som kan installeras på alla Android-telefoner. När appen startas öppnar den helt enkelt din webbplats i Android: s inbyggda WebView-webbläsare, men den kommer att visas som en helskärmsapp - ingen webbplatskarta eller någon annan aning om att din webbplats enkelt presenteras i en webbläsare.

Krav

Din egen hemsida (för att följa den här guiden, kan du helt enkelt starta en gratis WordPress-blogg)

GitHub konto

PhoneGap-konto
Notepad ++ (eller liknande textredigeringsprogram som kan känna igen kod)
Fotoredigeringsprogram för att skapa appikoner (Photoshop, GIMP, etc)

Kodningsmallar

Det här är kodmallar som du kan använda i den här guiden - de är från min egen app utvecklad med PhoneGap, men jag har tagit bort dem från mina personliga uppgifter. Om du ställer upp dem från början med alla korrekta parametrar har jag tagit många dagars felsökning, så jag tillhandahåller dessa för din bekvämlighet. Varsågod!

> config.xml
> index.html

Komma igång

Skapa en mapp på skrivbordet och ring det www: utan citaten. Det här är projektets huvudkatalog, där PhoneGap-byggaren kommer att förvänta sig att hitta alla filer för ditt projekt. Nu ska vi skapa en ikon för din app.

Öppna din bildredigeringsprogram och skapa en ny bild i .PNG-format. Dina bildinställningar ska se ut så här:

Och nu kan du rita din ikon, till exempel ska jag bara göra en liten knapp:

Bildens storlek beror på din personliga telefonskärm, men om du tänker utveckla en app för flera enheter, kommer du givetvis att göra flera storlekar på samma ikon. Här är en tabell med de bildstorlekar som används:

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

Jag vill inte spendera för länge pratar om skärmstorlekar och DPI, bara vet att DPI i stort sett korrelerar med skärmupplösningen. En telefon som använder 1080 × 1920 skärmupplösning kommer att använda 480dpi, men det korrelerar inte nödvändigtvis exakt med skärmstorleken. En telefon kan ha en 5, 2-skärm eller en 6-skärm och har en upplösning på 1080 × 1920. Men den här handboken handlar inte om smarttelefon skärmar, så låt oss gå vidare.

När du har skapat din ikon, spara den som icon.png och flytta den i din www: mapp. Det här blir standardikonen för din app. Om du vill skapa ikoner i olika storlekar som matchar användarens skärmupplösning, skulle du spara ikonen i olika storlekar och namn, till exempel Icon144.png, Icon192.png, Icon96.png och så vidare. Då skulle du redigera filen Config.xml för att peka på varje enskild ikon. Låt oss gå vidare.

Så nu när du har en ikon för din app behöver du en stänkbild. Det här är i grunden en laddningsskärm, som en tapet som visas innan din app är laddad. Splash bildstorlekar fungerar på samma princip som ikoner, men är lite större. Här är bordet:

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

Så skapa din stänkbild i upplösningen för din enhet, spara den som Splash.png och flytta den sedan i projektets mapp. Bra, du har nu din apps ikon och stänkbild, låt oss gå vidare till att konfigurera dina config- och indexfiler.

Index.HTML och Config.XML förklaras

Konfigureringsxml-filen är vad som ställer in byggmiljön (Android, iPhone, Windows Phone), ikonen och stänkplatserna och de Apache Cordova-plugin-program du vill använda i din app.

Öppna mallen som jag angav i Notepad ++ och du kommer se dessa linjer nära toppen:

Uppdatera dessa fält med din information, men lämna fältet enbart. Resten av config-filen är självklarande om du bara tittar på värdena. Preference name = fullscreen berättar till exempel att appen startar sig som en helskärmsapp. Lämna allt ensam, förutom det här sista värdet längst ner i filen:

Ändra den till din faktiska webbplatsadress. Detta gör det möjligt för appanvändaren att navigera fullständigt på din webbplats, och bara din webbplats - de kan inte lämna din webbplats när du använder din app. Självklart kommer appen inte att ha en navigeringsfält för webbadresser, det här är inte ens riktigt ett problem, men ser också till att användaren kan komma åt alla sidor på din webbplats. * Efter webbadressen är ett jokertecken, vilket i kodande jargong betyder att det kommer att acceptera allt som är inmatat i stället för * -tecknet.

Självklart, om du vill begränsa användaren till endast vissa sidor på din webbplats, skulle du lägga till separata värden som följande:

Låt oss gå vidare till Index.html- filen, det här är brödet och smöret som gör att appen faktiskt fungerar. Öppna den inuti Notepad ++ och byt dokumentets språk till HTML. Vad index.html gör i grunden berättar för Android-webbläsaren hur du visar din webbplats. I mallen som jag angav finns det taggar för att ta bort navigeringsfältet från webbläsaren, låta telefonens ryggknapp stänga appen och starta appen efter att stänkskärmen visas. Linjen du vill ändra är här:

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

Bygga App i PhoneGap Build

Så logga in på ditt GitHub-konto och navigera till huvudsidan i ditt förråd. Under lagringsnamnet klickar du på Ladda upp filer och drar din projektmapp till filträdesskärmen. Skriv nu ett commit-meddelande längst ner, som mitt första appförsök . Klicka äntligen på Commit Changes.

Gå nu till PhoneGap Build-sidan och logga in. Klicka nu på knappen Ny app på byggdesidan. Detta kommer att be dig att ange sökvägen till ditt GitHub-arkiv, så gör det och klicka sedan på Dra från .git reposity.

Nu tillbaka på huvudbyggnadssidan klickar du på Uppdatera kod och Pull senaste.

Slutligen klickar du på Bygg. Den kommer att kompilera din app till en .apk-fil och sedan presentera dig med möjligheten att ladda ner .apk. Du kan nu hämta den här .apk-filen till din dator och överföra den till din telefon och sedan installera den från det. Alternativt kan du använda din telefon för att skanna QR-koden på datorskärmen för att automatiskt installera .apk-filen på din Android-enhet.

Det är allt! Nu för att förklara för dig några viktiga saker:

• Detta var en extremt förenklad guide som gick igenom dig genom att bygga de mest grundläggande hybridapplikationerna. Människor går inte i allmänhet kring att paketera sina webbplatser i en inbyggd webbläsare och skickar bort den som en Android-app i Google Play Butik. Men nu när du vet hur du gör det kan du börja läsa telefongapdokumentationen om hur du anpassar din app och lägger mycket smak på det, så att du förhoppningsvis kan skapa en faktiskt användbar app.
• För det andra förbjuder Google Play den här typen av app-byggnadsmetod för att skapa applikationer med länkschema för intäkterna. Så du kan inte skapa en app som heter Tjäna pengar idag! som öppnar en webbplats som är helt full av annonser och bank på annonsintäkter. Du kommer bli bannad från Google Play Butik.

PRO TIPS: Om problemet är med din dator eller en bärbar dator, bör du försöka använda Reimage Plus-programvaran som kan skanna förvaret och ersätta korrupta och saknade filer. Detta fungerar i de flesta fall där problemet uppstått på grund av systemkorruption. Du kan ladda ner Reimage Plus genom att klicka här