Applicaties maken (Phonegap)

Uit hybride.me/ns
Versie door Teis (Overleg | bijdragen) op 20 mei 2015 om 19:24

(wijz) ← Oudere versie | Huidige versie (wijz) | Nieuwere versie → (wijz)
Ga naar: navigatie, zoeken

Mobiele applicaties maken lijkt ingewikkeld en is dat soms ook, maar er bestaan een aantal methodes die ook beginners toelaten zelf mobiele applicaties te ontwikkelen. Allereerst is het interessant te weten welke soorten mobiele applicaties er bestaan:

  • native apps zijn gemaakt in de specifieke programmeertaal van één platform zoals Android, iOs of Windows Phone. Een native app voor Android kan dus niet werken op een iPhone. Dit soort apps kunnen alle functies van de smartphone gebruiken (zoals bv de camera, het versturen van sms, het gebruik van het kompas), maar zijn wel vrij gecompliceerd om te maken.
  • web apps zijn websites die geoptimaliseerd zijn voor mobiel gebruik. Omdat elke smartphone een webbrowser heeft kunnen webapps op elk platform gebruikt worden. Een webapp moet je dus niet installeren. Het nadeel is wel dat webapps daarom sommige functies van de smartphone niet kunnen aanspreken.
  • hybrid apps bieden het beste van de twee. Native apps zijn ook gemaakt met webtechnologie zoals html en javascript, maar worden op de smartphone geïnstalleerd en gebruiken speciale stukjes code die ervoor zorgen dat ze ook alle functies van de smartphone kunnen gebruiken.
Een screenshot van hybride.hart één van de applicaties in dit project die een hybrid app is

Op het internet staan verschillende handleidingen In deze handleiding wordt kort uitgelegd hoe je zelf een eenvoudige hybrid app kan maken voor het Android besturingssysteem. In dit voorbeeld bouwen we een applicatie die bij een druk op een knop een dialoogvenster met een bericht weergeeft.

Stap 1: HTML & Javascript

Om hybrid applicaties te maken heb je een zekere kennis van HTML en Javascript nodig. HTML is de code waaruit iedere website is opgebouwd. Javascript is een eenvoudige programmeertaal die websites interactief kan maken. Als je ooit al met HTML en Javascript hebt gewerkt kan je onmiddellijk aan de slag. Voor nieuwe gebruikers is het aan te raden om zich eerst wat meer te verdiepen. Deze tutorial op codeacademy.com leert je de basis van HTML [1] en de volgende stap brengt je de basis van Javascript bij [2]

Stap 2: Installeer alle benodigde software

Deze handleiding maakt gebruik van Android Studio en Phonegap. Android Studio is een programma dat het maken van Android applicaties vergemakkelijkt (net zoals Word het schrijven van een brief vergemakkelijkt). Phonegap zorgt ervoor dat onze applicatie die bestaat uit HTML en Javascript gebruikt kan worden alsof het een native app was. Het installatieproces kan misschien een beginnende gebruiker afschrikken, maar http://assortedgarbage.com/apigee/ biedt een duidelijke handleiding (in het Engels) met screenshots die alle stappen doorloopt voor zowel Windows als Mac computers.

Stap 3: Maak een nieuwe applicatie

Open de Terminal (op OSX) of Command Prompt (op Windows) applicatie op uw systeem, typ dit commando en bevestig met enter phonegap create helloworld com.world.hello HelloWorld Deze code zorgt ervoor dat Phonegap een nieuwe map maakt in uw documenten die helloworld heet en daarin een nieuw project start met de naam HelloWorld.

Stap 4: Open de nieuwe applicatie in Android Studio

  1. Start Android Studio
  2. Ga in de menubalk bovenaan naar “Tools” -> “Android” -> “SDK Manager”
  3. Selecteer "Android SDK Build-tools" en "Android 4.4.2 (API 19)" en klik op "Install"

Phonegap InstallSDK.png

  1. Ga in de menubalk bovenaan naar "File" -> "Import project" en selecteer de helloworld folder die daarnet werd aangemaakt

Phonegap Import.png

  1. Klik op volgende en zorg ervoor dat je in het volgende scherm Android API 19 Platform hebt geselecteerd in de linker kolom.

Phonegap SelectAPI.png

  1. Klik op volgende

Stap 5: De applicatie testen

Ga in de menubalk bovenaan naar “Run" -> "Run Android". De applicatie wordt dan gebouwd en zal openen in de emulator. Dit is een stukje software die een smartphone nabootst in je computer.

Stap 6: De applicatie aanpassen

Je hebt net je eerste Android applicatie gemaakt! Maar natuurlijk willen we ook de functionaliteit ervan aanpassen.

Voeg een knop toe aan je applicatie

Open hiervoor het bestand index.html in de www folder en voeg ergens tussen <body>...</body> de volgende code toe:

<button onclick="toonBericht()">Klik hier!</button>

Deze code voegt een knop toe met de boodschap Klik hier!. Wanneer iemand op de knop klikt wordt de functie toonBericht() uitgevoerd.

Voeg de functie toonBericht toe

Wanneer je op de knop klikt zou er natuurlijk niets gebeuren, omdat de funtie toonBericht() nog niet bestaat. Open het bestand index.js in de www/js folder en voeg in de onDeviceReady(){ ... } functie de volgende code toe:

function toonBericht(){
   alert("Hallo!");
}

Test de applicatie

Ga in de menubalk bovenaan opnieuw naar “Run" -> "Run Android".