Den här guiden lär dig hur du skapar en hybridapp med den populära app-byggplattformen PhoneGap. Vad vi ska göra är att förvandla din webbplats till en installerbar .apk-fil (Android-applikation) som kan installeras på vilken Android-telefon som helst. När appen startas öppnar den helt enkelt din webbplats i Androids inbyggda WebView-webbläsare, men den visas som en helskärmsapp - ingen URL-navigeringsfält eller någon annan aning om att din webbplats helt enkelt presenteras i en webbläsare.
Krav
Din egen webbplats (för att följa den här guiden kan du helt enkelt starta en gratis WordPress-blogg)
GitHub-konto
PhoneGap-konto
Anteckningar ++ (eller liknande textredigeringsprogram som kan känna igen kod)
Fotoredigeringsprogramvara 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 kommer från min egen app utvecklad med PhoneGap, men jag har tagit bort min personliga information. Att ställa in dessa från grunden med alla rätt parametrar tog mig 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 kalla den ” www: ' utan citaten. Detta kommer att vara projektets huvudkatalog, där PhoneGap-byggaren förväntar sig att hitta alla filer för ditt projekt. Nu ska vi skapa en ikon för din app.
Öppna din fotoredigeringsprogramvara 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 naturligtvis att göra flera storlekar av samma ikon. Här är en tabell över de använda bildstorlekarna:
36 × 36 (120 dpi / LDPI)
48 × 48 (160dpi / MDPI)
72 × 72 (240 dpi / HDPI)
96 × 96 (320dpi / XHDPI)
144 × 144 (480dpi / XXHDPI)
192 × 192 (640 dpi / XXXHDPI)
Jag vill inte spendera för lång tid på att prata om skärmstorlekar och DPI, bara vet att DPI i stort sett korrelerar med skärmupplösning. En telefon som använder 1080 × 1920 skärmupplösning använder 480dpi, men det gör det inte nödvändigtvis korrelera exakt med skärmstorlek. En telefon kan ha en 5,2 ”skärm eller en 6” skärm och ha en upplösning på 1080 × 1920. Men den här guiden handlar inte om smarttelefonskärmar, så låt oss gå vidare.
När du har ritat upp din ikon, spara den som icon.png och flytta den inuti din www: mapp. Detta kommer att bli standard ikon för din app. Om du vill skapa ikoner i olika storlekar som matchar användarens skärmupplösning sparar du ikonen i olika storlekar och namn, till exempel Icon144.png, Icon192.png, Icon96.png, och så vidare. Då skulle du redigera Config.xml fil 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. Detta är i grunden en laddningsskärm, som en bakgrund som visas innan din app laddas. Splash-bildstorlekar fungerar på samma princip som ikoner, men är lite större. Här är tabellen:
- 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 in i projektets mapp. Bra, nu har du appens ikon och stänkbild, låt oss gå vidare till att konfigurera dina konfigurations- och indexfiler.
Index.HTML och Config.XML förklaras
Config.xml-filen är det som ställer in byggmiljön (Android, iPhone, Windows Phone), ikonen och stänkplatserna och de Apache Cordova-plugin-program som du vill använda i din app.
Öppna mallen som jag tillhandahöll i Notepad ++ så ser du dessa rader nära toppen:
Uppdatera dessa fält med din information, men lämna 'preferens' -fälten ensamma. Resten av konfigurationsfilen är självförklarande om du bara tittar på värdena. Inställningsnamn = ”helskärm” säger till exempel att appen ska starta sig själv som en helskärmsapp. Lämna allt i fred, förutom det sista värdet längst ner i filen:
Ändra den till din faktiska webbadress. Detta gör det möjligt för appanvändaren att helt navigera på din webbplats, och bara din webbplats - de kan inte lämna din webbplats när du använder din app. Naturligtvis kommer appen inte att ha ett URL-navigeringsfält, det här är inte ens ett problem, men ser också till att användaren kan komma åt alla sidor på din webbplats. * Efter webbadressen är en jokertecken , vilket i kodande jargong betyder att det accepterar allt som anges i stället för * tecknet.
Naturligtvis, om du vill begränsa användaren till endast vissa sidor på din webbplats, skulle du lägga till separata värden så här:
Låt oss gå vidare till Index.html fil, det här är brödet och smöret för att appen verkligen ska fungera. Öppna den i Notepad ++ och byt dokumentspråk till HTML. Vad index.html i grund och botten gör är att berätta för Android-webbläsaren hur du visar din webbplats - i mallen som jag tillhandahåller finns det taggar för att ta bort URL-navigeringsfältet från webbläsaren, låta telefonens 'tillbaka' -knapp stänga appen och starta appen efter att skärmen visas. Linjen du vill ändra är här:
var url = ‘http://dinwebsite.com’
Bygga appen i PhoneGap Build
Så logga in på ditt GitHub-konto och navigera till huvudsidan i ditt förvar. Klicka på ”Ladda upp filer” under förvarets namn och dra din projektmapp till filträdskärmen. Skriv nu ett kommit-meddelande längst ner, som “ mitt första appförsök ” . Klicka äntligen på Commit Changes.
Gå nu till PhoneGap Build sida och logga in. Klicka nu på knappen 'Ny app' på byggsidan. Detta ber 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 till huvudsidan, klicka på 'Uppdatera kod' och 'Dra senaste'.
Klicka slutligen på 'Bygg'. Det kommer att sammanställa din app till en .apk-fil och sedan presentera dig möjligheten att ladda ner .apk. Du kan nu ladda ner den här .apk-filen till din dator och överföra den till din telefon och sedan installera den därifrån. Alternativt kan du använda din telefon för att skanna QR-koden på din datorskärm 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 guidade dig genom att bygga de mest grundläggande hybridapparna. Människor går vanligtvis inte runt att slå in sina webbplatser i en inbyggd webbläsare och överföra 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 PhoneGap-dokumentationen om hur du anpassar din app och lägger till mycket smak till den, så att du förhoppningsvis kan skapa en faktiskt användbar app.
- För det andra förbjuder Google Play denna typ av app-byggnadsmetod för att skapa länk-schema-appar för det enda syftet med intäkter. Så du kan inte skapa en app som heter 'Tjäna pengar idag!' som öppnar en webbplats helt full av annonser och gör intäkter. Du kommer att förbjudas från Google Play Store.
