Een eenvoudige Android-app maken in PhoneGap

In deze gids leer je hoe je een hybride app kunt maken met het populaire app-bouwplatform PhoneGap. Wat we gaan doen, is uw website omzetten in een installeerbaar .apk-bestand (Android-applicatie) dat op elke Android-telefoon kan worden geïnstalleerd. Wanneer de app wordt gestart, wordt uw website gewoon geopend in de native WebView-browser van Android, maar deze wordt weergegeven als een app op volledig scherm - geen URL-navigatiebalk of enige andere aanwijzing dat uw website gewoon in een browser wordt gepresenteerd.

Vereisten

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

GitHub-account

PhoneGap-account
Kladblok ++ (of vergelijkbare 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 die is ontwikkeld met PhoneGap, maar ik heb ze ontdaan van mijn persoonlijke gegevens. Het kostte me vele dagen aan probleemoplossing om deze helemaal opnieuw op te zetten met alle juiste parameters, 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 aanhalingstekens. Dit wordt de hoofddirectory van het project, waar de PhoneGap-builder 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 zouden er als volgt uit moeten zien:

En nu kun je je icoon tekenen, ik ga bijvoorbeeld gewoon een kleine knop maken:

De grootte van de afbeelding hangt af van je persoonlijke telefoonscherm, maar als je van plan bent een app voor meerdere apparaten te ontwikkelen, maak je natuurlijk meerdere formaten van hetzelfde icoon. Hier is een tabel met de gebruikte afbeeldingsformaten:

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

Ik wil niet te lang praten over schermformaten en DPI, weet alleen dat DPI vrijwel overeenkomt met de schermresolutie. Een telefoon die een schermresolutie van 1080 × 1920 gebruikt, gebruikt 480 dpi, maar dit is niet het geval nodig correleren exact met de schermgrootte. Een telefoon kan een 5,2-inch scherm of een 6-inch scherm hebben en een resolutie van 1080 × 1920 hebben. Maar deze gids gaat niet over smartphoneschermen, dus laten we verder gaan.

Nadat u uw pictogram heeft getekend, slaat u het op als icon.png en verplaats het naar uw www: map. Dit wordt het standaard pictogram voor uw app. Als u pictogrammen in verschillende formaten wilt maken die passen bij de schermresolutie van de gebruiker, slaat u het pictogram op in verschillende formaten en namen, bijvoorbeeld Icon144.png, Icon192.png, Icon96.png, enzovoort. Dan zou je het Config.xml bestand om naar elk afzonderlijk pictogram te verwijzen. Laten we verder gaan.

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

• LDPI:
  • Portret: 200x320px
  • Landschap: 320x200px
• MDPI:
  • Portret: 320x480px
  • Landschap: 480x320px
• HDPI:
  • Portret: 480x800px
  • Landschap: 800x480px
• XHDPI:
  • Portret: 720px1280px
  • Landschap: 1280x720px
• XXHDPI:
  • Portret: 960px1600px
  • Landschap: 1600x960px
• XXXHDPI:
  • Portret: 1280px1920px
  • Landschap: 1920x1280px

Dus maak je splash-afbeelding in de resolutie voor je apparaat, sla het op als Splash.png en verplaats het vervolgens naar de map van uw project. Geweldig, je hebt nu het pictogram en de splash-afbeelding van je app. Laten we verder gaan met het instellen van je configuratie- en indexbestanden.

Index.HTML en Config.XML uitgelegd

Het config.xml-bestand bepaalt de build-omgeving (Android, iPhone, Windows Phone), het pictogram en de splash-locaties en de Apache Cordova-plug-ins die u in uw app wilt gebruiken.

Open de sjabloon die ik in Notepad ++ heb verstrekt en je ziet deze regels bovenaan:

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

Verander het in uw werkelijke website-URL. Hierdoor kan de app-gebruiker volledig door uw website navigeren, en alleen uw website - ze kunnen uw website niet verlaten terwijl ze uw app gebruiken. Natuurlijk heeft de app geen URL-navigatiebalk, dit is niet eens echt een probleem, maar zorgt er ook voor dat de gebruiker toegang heeft tot alle pagina's op je website. De * achter de website-URL is een jokerteken , wat in coderingsjargon betekent dat het alles accepteert dat wordt ingevoerd in plaats van het * -teken.

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

Laten we verder gaan met de Index.html bestand, dit is het brood en de boter om de app echt te laten werken. Open het in Notepad ++ en verander de documenttaal naar HTML. Wat index.html in feite doet, is de Android-browser vertellen hoe hij uw website moet weergeven - in de sjabloon die ik heb verstrekt, zijn er tags om de URL-navigatiebalk uit de browser te verwijderen, laat u de 'terug' -knop van de telefoon de app sluiten en starten de app nadat het welkomstscherm wordt weergegeven. De regel die u wilt wijzigen, is hier:

var url = ‘http://uwwebsite.com’

De app bouwen in PhoneGap Build

Log dus in op je GitHub-account en navigeer naar de hoofdpagina van je repository. Klik onder de naam van de opslagplaats op 'Bestanden uploaden' en sleep uw projectmap naar de bestandsstructuur. Typ nu onderaan een vastleggingsbericht, zoals ' mijn eerste app-poging ' . Klik ten slotte op Wijzigingen doorvoeren.

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

Nu terug op de hoofdbouwpagina, klik op 'Update code' en 'Pull nieuwste'.

Klik ten slotte op 'Build'. Het compileert uw app in een .apk-bestand en biedt u vervolgens de mogelijkheid om het .apk-bestand te downloaden. U kunt dit .apk-bestand nu naar uw computer downloaden en naar uw telefoon overbrengen en van daaruit installeren. Als alternatief kunt u 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! Om u nu een paar belangrijke dingen uit te leggen:

• Dit was een extreem vereenvoudigde gids die je bij het bouwen van de meest elementaire hybride apps leidde. Mensen wikkelen hun websites over het algemeen niet in een systeemeigen browser en geven het door als een Android-app in 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 echt nuttige app kunt maken.
• Ten tweede verbiedt Google Play dit soort app-bouwmethoden om link-schema-apps te maken met als enig doel inkomsten te genereren. U kunt dus geen app maken met de naam 'Verdien vandaag geld!' die een website opent die helemaal vol staat met advertenties en bankt met advertentie-inkomsten. Je wordt verbannen uit de Google Play Store.