Hoe maak je een eenvoudige Android-app in PhoneGap

Voor de meeste mensen klinkt het idee om een Android-app te maken net zo zwaar als bergbeklimmen. Mensen besteden maanden aan het leren coderen en de Android SDK gebruiken om apps te ontwikkelen, en de gemiddelde persoon, vooral een online bedrijfseigenaar, heeft misschien niet zo veel tijd.

Gelukkig is er een eenvoudige snelkoppeling naar het maken van een zogenaamde hybride app, in tegenstelling tot het maken van een native app. Een hybride app maakt in principe gebruik van de ingebouwde WebView van Android om uw app te presenteren, met plug-ins die uw hybride app toegang geven tot de camera, messaging-service en andere aspecten van het Android-systeem. Een hybride app kan eenvoudig worden gebouwd voor meerdere besturingssystemen, omdat ze meestal Java, HTML5 en CSS gebruiken om te worden uitgevoerd.

In deze handleiding leert u hoe u een hybride app kunt maken met behulp van het populaire app-bouwplatform PhoneGap. Wat we zullen doen is van uw website een installeerbaar .apk-bestand (Android-applicatie) maken dat op elke Android-telefoon kan worden geïnstalleerd. Wanneer de app wordt gestart, wordt uw website eenvoudig geopend in de native WebView-browser van Android, maar deze verschijnt als een app op volledig scherm - geen URL-navigatiebalk of een andere aanwijzing dat uw website eenvoudigweg in een browser wordt gepresenteerd.

Vereisten

Uw eigen website (om deze handleiding te volgen, kunt u gewoon een gratis WordPress-blog starten)

GitHub-account

PhoneGap-account
Notepad ++ (of soortgelijke tekstbewerkingssoftware die code kan herkennen)
Fotobewerkingssoftware voor het maken van app-pictogrammen (Photoshop, GIMP, enz.)

Coderingssjablonen

Dit zijn codesjablonen die u kunt gebruiken voor het doel van deze handleiding - ze zijn afkomstig van mijn eigen app ontwikkeld met PhoneGap, maar ik heb ze mijn persoonlijke informatie ontnomen. Het instellen van deze helemaal opnieuw met alle juiste parameters kostte me vele dagen van probleemoplossing, dus ik lever deze voor uw gemak. Graag gedaan!

> config.xml
> index.html

Ermee beginnen

Maak een map op uw bureaublad en noem deze www: zonder de offertes. Dit wordt de hoofddirectory van het project, waar de PhoneGap-bouwer alle bestanden voor uw project verwacht te vinden. Nu gaan we een pictogram voor uw app maken.

Open uw fotobewerkingssoftware en maak een nieuwe afbeelding in .PNG-indeling. Uw afbeeldingsinstellingen moeten er als volgt uitzien:

En nu kun je je pictogram tekenen, ik ga bijvoorbeeld een knopje maken:

De grootte van de afbeelding is afhankelijk van uw persoonlijke telefoonscherm, maar als u een app voor meerdere apparaten wilt ontwikkelen, maakt u natuurlijk meerdere formaten van hetzelfde pictogram. Hier is een tabel met de gebruikte beeldformaten:

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 (640 dpi / XXXHDPI)

Ik wil niet te lang praten over schermformaten en DPI, weet gewoon dat DPI vrijwel overeenkomt met de schermresolutie. Een telefoon met een schermresolutie van 1080 x 1920 gebruikt 480 dpi, maar dit hoeft niet noodzakelijk exact overeen te komen met de schermgrootte. Een telefoon kan een 5.2-scherm of een 6-scherm hebben en een resolutie van 1080 × 1920 hebben. Maar deze handleiding gaat niet over schermen van smartphones, dus laten we doorgaan.

Nadat u uw pictogram hebt getekend, slaat u het op als icon.png en verplaatst u het naar de map www:. Dit wordt het standaardpictogram voor uw app. Als u pictogrammen in verschillende formaten wilt maken die overeenkomen met de schermresolutie van de gebruiker, slaat u het pictogram op in verschillende grootten en namen, bijvoorbeeld Icon144.png, Icon192.png, Icon96.png, enzovoort. Vervolgens bewerkt u het bestand Config.xml om naar elk afzonderlijk pictogram te wijzen. Laten we verder gaan.

Dus nu je een pictogram voor je app hebt, heb je een splashafbeelding nodig. Dit is in feite een laadscherm, zoals een achtergrond die wordt weergegeven voordat je app wordt geladen. Splash-afbeeldingsformaten werken op hetzelfde principe als pictogrammen, maar zijn iets groter. Dit is de tabel:

PRO TIP: Als het probleem zich voordoet met uw computer of een laptop / notebook, kunt u proberen de Reimage Plus-software te gebruiken die de opslagplaatsen kan scannen en corrupte en ontbrekende bestanden kan vervangen. Dit werkt in de meeste gevallen, waar het probleem is ontstaan door een systeembeschadiging. U kunt Reimage Plus downloaden door hier te klikken

LDPI:
- Portret: 200x320 px
- Landschap: 320x200 px
Salbutamol:
- Portret: 320x480 px
- Landschap: 480x320 px
HDPI:
- Portret: 480x800 px
- Landschap: 800x480 px
xhdpi:
- Portret: 720px1280px
- Landschap: 1280x720 px
XXHDPI:
- Portret: 960 px1600 px
- Landschap: 1600x960 px
XXXHDPI:
- Portret: 1280 px1920 px
- Landschap: 1920x1280 px

Dus maak je splash image in de resolutie voor je apparaat, bewaar het als Splash.png en verplaats het dan in de map van je project. Fantastisch, je hebt nu het pictogram van je app en de splashafbeelding. Laten we verder gaan met het instellen van je configuratie- en indexbestanden.

Index.HTML en Config.XML uitgelegd

Het config.xml-bestand is wat de buildomgeving (Android, iPhone, Windows Phone), het pictogram en splashlocaties en de Apache Cordova-invoegtoepassingen die u in uw app wilt gebruiken, instelt.

Open de sjabloon die ik heb opgegeven in Notepad ++ en je ziet deze lijnen bovenaan staan:

Werk deze velden bij met uw informatie, maar laat de voorkeursvelden alleen. De rest van het configuratiebestand spreekt voor zich, als u alleen naar de waarden kijkt. Preference name = fullscreen vertelt bijvoorbeeld de app om zichzelf te lanceren als een app op volledig scherm. Laat alles met rust, behalve deze laatste waarde onderaan het bestand:

Verander het in uw daadwerkelijke website-URL. Hierdoor kan de app-gebruiker uw website volledig navigeren, en alleen uw website. Ze kunnen uw website niet verlaten tijdens het gebruik van uw app. Natuurlijk heeft de app geen URL-navigatiebalk, dit is niet eens echt een zorg, maar zorgt er ook voor dat de gebruiker toegang heeft tot alle pagina's op uw website. De * na de website-URL is een jokerteken, wat betekent dat in jargon jargon alles wordt geaccepteerd dat is ingevoerd in plaats van het * -teken.

Als u de gebruiker tot bepaalde pagina's op uw website wilt beperken, voegt u natuurlijk de volgende waarden toe:

Laten we verder gaan met het bestand Index.html, dit is het brood en de boterham van het feit dat de app echt werkt. Open het in Notepad ++ en verander de documenttaal naar HTML. Wat index.html eigenlijk doet, is de Android-browser laten weten hoe uw website moet worden weergegeven. In de sjabloon die ik heb verstrekt, zijn er tags om de URL-navigatiebalk uit de browser te verwijderen, de terugknop op de telefoon toestaan om de app te verlaten en de app te starten nadat het startscherm wordt weergegeven. De regel die u wilt wijzigen, is hier:

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

De app bouwen in PhoneGap Build

Log dus in op uw GitHub-account en navigeer naar de hoofdpagina van uw repository. Klik onder de naam van de repository op Bestanden uploaden en sleep uw projectmap naar het boomstructuurscherm. Typ nu een commit-bericht onderaan, zoals mijn eerste app-poging . Klik ten slotte op Wijzigingen vastleggen.

Ga nu naar de pagina PhoneGap Build en log in. Klik nu op de knop Nieuwe app op de buildpagina. Dit zal je vragen om het pad naar je GitHub-repository in te voeren, dus doe dat en klik vervolgens op Pull from .git reposity.

Nu terug op de hoofdpagina van de build, klik op Update code en Laatste pull-up.

Klik ten slotte op Bouwen. Het compileert uw app in een .apk-bestand en biedt u vervolgens de mogelijkheid om .apk te downloaden. U kunt dit .apk-bestand nu downloaden naar uw computer en overbrengen naar uw telefoon, en vanaf daar installeren. U kunt ook uw telefoon gebruiken om de QR-code op uw computerscherm te scannen om het .apk-bestand automatisch op uw Android-apparaat te installeren.

Dat is het! Nu, om u een paar belangrijke dingen uit te leggen:

Dit was een uiterst vereenvoudigde gids die je door het bouwen van de meest elementaire hybride apps leidde. Mensen gaan meestal niet rond met het inpakken van hun websites in een native browser en geven deze door als een Android-app in de Google Play Store. Maar nu u weet hoe u het moet doen, kunt u beginnen met het lezen van de PhoneGap-documentatie over hoe u uw app kunt aanpassen en er veel smaak aan kunt toevoegen, zodat u hopelijk een werkelijk nuttige app kunt maken.
Ten tweede verbiedt Google Play dit soort methoden voor het bouwen van een app om linkschema-apps te maken met als enig doel inkomsten. U kunt dus geen app maken met de naam Earn Money Today! die een website opent vol met advertenties en bankinkomsten op advertentie-inkomsten. Je wordt gebanned in de Google Play Store.