Je eigen App maken voor Android

Mobiele applicaties ontwikkelen lijkt soms ingewikkeld. Het aanmelden van een App aan Google Play en Apple iTunes is soms ook een lastige stap en kost je gelijk geld. Voor Android is er gelukkig een eenvoudige manier om je eigen App te maken en deze te installeren op je eigen telefoon en op die van je familie en vrienden als die dat goed vinden.

Maken van een App

Voor het maken van een App zijn er tegenwoordig een aantal sites waar je gratis met wat muis-clicks iets in elkaar kunt zetten. Een aardig voorbeeld is Como of Appery.io. Helaas zul je dan wel een registratie moeten doen en veelal wordt er een premium account gevraagd zodra je de applicatie in een store wilt zetten of meer mogelijkheden wilt. Meestal probeert men al snel geld aan je te verdienen. Door je iets meer te verdiepen in de techniek is het voor iemand die niet opgeleid is als programmeur zeker goed mogelijk een eenvoudige applicatie te maken met de gratis cloud hulpmiddelen die er tegenwoordig zijn. Bijvoorbeeld met de combinatie Google Sites en Android SDK. Beide zijn volledig gratis en vragen ook niet meteen om een premium account zodra je wat uitbreidingen wilt. En je kunt er altijd nog voor kiezen om tegen betaling je App dan in een store te zetten.

Google Sites

Met Google Sites is het mogelijk om pagina’s te maken die geschikt zijn voor mobiele weergave, ook binnen je eigen Android App. Je kunt je daar aanmelden met je eigen Google account. Met Google Sites maak je een nieuwe site aan bijvoorbeeld met een lege sjabloon, je moet dan een site naam opgeven en ook een unieke naam voor de URL straks waar de pagina te vinden is. Een leuke inhoud voor je eigen App is bijvoorbeeld een kaartje met daarbij een locatie voor een feestje of afspraak. Kies dan Invoegen en dan Kaart en vul daar dan je locatie in die je in je App wilt tonen. Je kan er onder ook een stukje tekst bij zetten bijvoorbeeld een uitnodiging voor een feestje of een gezellige afspraak in een restaurant.
Zo maak je vervolgens de site geschikt voor gebruik in de mobiele App:

1. Klik op de knop Meer acties rechtsboven in het venster.
2. Selecteer Site beheren in de keuzelijst.
3. Klik op Algemeen links in het venster.
4. Vink 'Site automatisch aanpassen aan mobiele telefoons' aan
5. Klik op Wijzigingen opslaan.

Als je de site af hebt zorg er dan voor dat je de link naar de site onthoud bijvoorbeeld:

https://sites.google.com/site/<naam van jouw applicatie>

Het is overigens ook mogelijk om een andere gratis dienst te gebruiken zolang deze maar netjes de mobiele pagina's voor je App kan weergeven.

Maken van de App

In het nu volgende voorbeeld gaan we een eenvoudige App maken waar je dan zelf erg makkelijk veranderingen in kunt maken ook nadat de applicatie op de telefoon is geïnstalleerd. We doen dit door gebruik te maken van de mogelijkheid dat een App ook een ingebouwde webbrowser kan gebruiken waar je dan eenvoudig de pagina’s van Google Sites in kunt tonen die je dan zelf maakt en aanpast binnen Google Sites.

Android SDK

Download, installeer en open de Android SDK op je Windows PC of laptop, en download Eclipse en Eclipse ADT.

De volgende instructies zijn gemaakt voor het gebruik met Eclipse ADT.
De instructies voor Android Studio zijn helaas hier niet te vinden.

Je moet nu de volgende stappen zorgvuldig doorlopen, het zijn aardig wat instructies maar zodra je deze nauwgezet volgt heb je aan het eind een eigen werkende App die je ook kunt doorsturen naar je familie en vrienden.

Nieuw Android Application Project

De nu volgende stappen laten je een voor een de schermen zien die je te zien krijgt en geven aan wat je moet invullen en wat dan de volgende stap is. Kies in het File menu van de Android SDK de optie New en kies dan Android Application Project, de krijgt dan dit scherm te zien (klik er op om het te vergoten).

Vul dan voor het veld Application Name jouw gekozen naam in, in dit voorbeeld myApp. De overige velden gaan automatisch mee. Maak de naam niet te lang en gebruik liever ook geen spaties. Klik dan op Next,

Kies de directory waar je de bestanden wilt opslaan in dit voorbeeld kiezen we C:App. Klik dan op Next.

Hier kun je het logo van je applicatie instellen, je kan eenvoudig een ander logo via browse selecteren. In dit voorbeeld gebruiken we het standaard logo launcher_icon wat al meegeleverd is. Klik dan op Next.

Alle waarden staan al goed in dit scherm dus klik dan op Next.

Alle waarden staan al goed in dit scherm dus klik dan op Finish.

Je hebt nu een nieuw project gemaakt waar je de applicatie in kunt maken.

Layout aanpassen

De volgende stap is dat je de layout van de zojuist gemaakte applicatie moet aanpassen zodat we de google site er in kunnen tonen. Dit doe je door de layout aan te passen.

Het bestand wat de layout bepaalt dat vind je dan hier. Open het bestand activity_main.xml.

Je krijgt dan dit scherm te zien aan de rechterkant in de Android SDK. Klik nu helemaal onder aan de tab activity_main.xml aan zodat je de tekst van dit bestand ziet.

Die tekst van het bestand ziet er dus zo uit.
Pas het bestand aan door het stukje met <Textview .. te vervangen door dit stukje tekst:

<WebView android:id="@+id/webView1" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />

Gebruik uit het File menu de Save optie of doe een Cntrl-S om je aanpassing te bewaren.

Na de aanpassingen ziet het bestand er dan zo uit.

Java Code aanpassen

De volgende stap is dat de standaard Java code die voor je is klaargezet iets aangepast moet worden. De aanpassing zorgt er voor dat we de Google site pagina gaan tonen in een web view.

Navigeer naar dit bestand in de Package Explorer en open het bestand MainAvtivity.java.

Je ziet dan aan de rechterkant in de Android SDK deze java code verschijnen. Pas dan deze java code als volgt aan en voeg deze regel toe boven in net onder de package regel:
import com.example.myapp.R;

Vervang het stuk tekst bij de OnCreate door de onderstaande tekst. Je zult wel even de goede link moeten opgeven dit moet namelijk wel jouw net gemaakte site zijn. Als je vooraf ook even de link in je browser test weet je zeker dat het de goede link is.

protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
super.onCreate(savedInstanceState);
WebView engine = (WebView) findViewById(R.id.webView1);
engine.getSettings().setJavaScriptEnabled(true);
engine.getSettings().setBuiltInZoomControls(true);
engine.loadUrl("https://sites.google.com/site/<naam van jouw applicatie>");
}

Na de aanpassing (bewaar je wijziging met File Save of Cntrl-S) ziet het programma er dan zo uit.

Internet Toestemming

Omdat je App een Internet verbinding gebruikt moet je aangeven dat de App de permissie nodig heeft om Internet te gebruiken. Deze toestemming moet in het bestand AndroidManifest.xml worden gegeven.

Dit bestand kun je hier vinden in de Package Explorer. Als je dit bestand opent dan zie je aan de rechterkant het volgende scherm.

Je moet dus nu de Internet Permissie gaan toevoegen als een "Uses Permission".

Klik daarvoor op Add en selecteer dan Uses Permission uit dit scherm.

Je ziet dan helemaal rechts dit scherm kies eerst dan de android.permission.INTERNET uit de picklist

De permissie die je hebt toegevoegd ziet er dan zo uit. Bewaar je wijziging weer met File Save of Cntrl-S waardoor het AndroidManifest.xml bestand bewaard wordt.

In tekst ziet het bestand er dan zo uit als de bovenstaande stappen niet gelijk lukken, de dialoog van de Android SDK is op dat punt zeker nog voor verbetering vatbaar.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.myapp"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />

<uses-permission android:name="android.permission.INTERNET"/>

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.myapp.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

Je App exporteren App als .sdk bestand

Na deze aanpassingen ben je klaar om het programma te exporteren zodat je het op je Android telefoon kunt installeren. In Android SDK wordt de extensie van een Android programma .sdk genoemd, dit is vergelijkbaar met dat op Windows de programma bestanden meestal eindigen op .exe.

Kies uit het Android SDK File menu de optie Export... je ziet dan dit scherm

Zorg dat je Export Android Application geselecteerd hebt. Klik dan op Next, je ziet dan dit scherm. Als er geen naam van het project staat, kies dan eerst je project in de Package Explorer of vul deze even in, in dit voorbeeld hebben we het project ook MyApp genoemd. Klik dan op Next.

Kies dan de directory waar je de keystore wilt opslaan in dit voorbeeld in je Documents folder. De keystore wordt gebruikt om de handtekening (je password) te bewaren voor eventuele andere applicaties die je later wilt maken. Vul ook een password in en zorg er voor dat je dit password ook onthoud je hebt het later weer nodig. Klik dan op Next.

Vul voor Validity (years) de waarde 25 in en vul je naam in bij First and Last Name, op deze manier wordt je App persoonlijk ondertekend. Klik dan op Next.

Vul in dit scherm in waar je het .apk bestand wilt bewaren. Klik dan op Finish, je applicatie is nu klaar!

De App installeren op een telefoon

Je kunt nu het gemaakte bestand MyApp.apk (of een andere naam die je zelf koos) op je telefoon installeren. Dit kan door het bestand naar de zelf via de e-mail te sturen als een bijlage.

Omdat de App niet uit de App store komt moet je wel een optie op je telefoon aanpassen zodat deze toestaat dat een App die van buiten de Google Play store komt. Deze instelling vind je in de Instellingen. Veiligheid en heet Onbekende Bronnen, zorg er voor dat deze optie aan staat anders krijg je een foutmelding als je de applicatie probeert te installeren.

Open op je Android toestel je e-mail en open je net gestuurde e-mail, je ziet dan het MyApp.apk bestand als bijlage.
Je kunt de bijlage dan installeren als een gewone App door deze te bewaren en daarna te openen zoals nu getoond wordt in de volgende screenshots.

Selecteer dan je applicatie die je net via de e-mail bewaard hebt.

Kies dan onderin de optie Install.

Als je dan Open kiest dan start de applicatie. Ook staat jouw applicatie nu tussen alle andere applicaties op de telefoon. Als de applicatie goed werkt dan kun je via een e-mail naar je vrienden of en/of je familie de App eenvoudig verspreiden, vertel er dan even bij dat de Veiligheid instelling tijdelijk even aangepast moet worden zodat Onbekende Bronnen ook wordt toegestaan. Zodra de App goed werkt kun je via de Google Sites pagina de inhoud veranderen. Je hoeft dan niet telkens de applicatie opnieuw te installeren als de applicatie opnieuw gestart wordt zal de nieuwe inhoud weer getoond worden.