APP DESIGN
-

De app laten samenstellen

Als je app helemaal klaar is moet je de verschillende onderdelen (jquery, html en css) laten samenvoegen tot één bestand. Bij android is dat een apk bestand.

In je mapje app heb je nu in ieder geval de volgende bestanden:

1. index.html

2. config.xml

3. icon.png

4. splash.png

Deze bestanden zijn absoluut noodzakelijk anders doet je app het niet. Daarnaast heb je wellicht ook nog andere bestanden zoals foto's enz.

Het samenvoegen wordt gedaan door phonegap. Dat gaat het gemakkelijkste door een zipfile up te loaden naar phonegap.

Je gaat als volgt te werk:

1. Ga met de windowsverkenner (Windowstoets+E) naar het mapje app.

2. Selecteer alle bestanden (CTRL+A)

3. Klik op je rechter muisknop en kies voor "kopieren naar gecomprimeerde (gezipte) map

4. Windows maakt dan een ingepakt bestand aan waarin al je bestanden staan. De naam van het bestand is willekeurig, je kunt het eventueel een andere naam geven maar dat hoeft niet.

Phonegap

PhoneGap Build – maak een account bij Adobe en upload je app naar https://build.phonegap.com/

    Als je al eerder software bij Adobe hebt gedownload (ook trial-versies) dan heb je al een Adobe ID, bestaande uit je e-mailadres en een wachtwoord. Als je dat nog niet hebt, kun je op PhoneGap Build ter plekke een Adobe ID maken.

    Je upload dan je app als zip-bestand en enkele ogenblikken later kun je een app downloaden. Op Android-apparaten is die app direct te installeren. Op Apple-apparaten (iPhone, iPad) heeft het wat meer voeten in de aarde. Dan moet je eerst bij Apple een developer account aanmaken en een developer key downloaden en exporteren naar een .p12-bestand. Dit kun je vervolgens gebruiken om je app bij PhoneGap Build te signeren. Dat werkt allemaal ook, maar het is een stuk ingewikkelder dan bij niet-Apple-apparaten. 

    Een demo-app via PhoneGap build ziet er dan bijvoorbeeld zo uit:

     
    vb1


    Klik op een van de knoppen om de app voor het betreffende platform te downloaden, of scan de QR-code met je telefoon. Hij wordt dan direct gedownload en geïnstalleerd als het platform dit toestaat. Als je het bestand gedownload hebt kun je het vervolgens aan je zelf mailen en je mail openen op je mobiele apparaat en vervolgens de app downloaden.

5. Ga naar phonegap en log in op je account.

6.

Kies voor "upload a .zip file". Na het uploaden krijg je het volgende:

7. Kies voor "ready to build"

8. Uiteindelijk is dit het resultaat:

9. Door op het android logo te klikken kun je het bestand downloaden en vervolgens als bijlage naar je apparaat mailen en vervolgens de app installeren. Je kunt ook de QR-code inscannen en direct de app installeren.

10. Je kunt in windows ook een android-omgeving emuleren. Bijvoorbeeld met het programma bluestacks of nox-player.

Opdracht:

1. Koppel het html bestand van je app aan je site

2. Koppel het apk-bestand aan je site op

Uiterlijk dinsdag 4 juli a.s. moet alles klaar zijn en geef ik er een cijfer voor.

Veel succes!

 

 

©jw webdesign