Das hört sich verrückt an, ist aber wirklich möglich.
Dieser Artikel bezieht sich ausschließlich auf die Entwicklung einer App für Android-Geräte ab Android 1.6.
Für Android-Geräte wird normalerweise in Java programmiert und dabei wird auf ein spezielles SDK für Android zurückgegriffen.
Doch auch mit relativ geringen Java-Kentnissen ist es möglich einfach Apps zu entwickeln.
Vorrausgesetzt man beherrscht zumindest HTML und Javascript.
Möglich macht dies das Android-Webview.
Das ist ein GUI-Element des Android-SDKs in welchem normalerweise Websites dargestellt werden.
Daher ist es natürlich prädestiniert für die Anzeige von Javascript getriebenen HTML-Dokumenten.
Doch nun stellt sich sicher der eine oder andere die interessante Frage „Wie löse ich das GUI Problem?“
Das Problem löst sich hier durch eine spezielle jQuery-Version welche für die Erstellung mobiler Websites konzipiert wurde.
jQuery kennen viele sicher aus der Webentwicklung.
Es ist ein Javascript-Framework mit mächtigen Werkzeugen zur Dom-Manipulation, Suchen und Selektieren innerhalb eines HTML-Dokuments und natürlich auch zur Anwendung von Blend- und Easing-Effekten.
Eigentlich ist all das ja schon sehr interessant für eine Entwicklung. Das mobile I-Tüpfelchen kommt hierbei durch die speziellen Funktionen von jQuery-Mobile welche die Erstellung von GUIs ermöglichen die sich vor GUI nativer Apps nicht verstecken müssen.
Am Anfang war das Webview
Wie Eingangs erwähnt, nutzen wir als Basis unserer App die native Webview des Android-SDKs.
Rein mit HTML und Javascript geht es daher zugegebener Weise nicht.
Allerdings ist es ein recht überschaubarer Akt eine App zu programmieren die eine Webview enthält welche ein eingebettetes HTM-Dokument enthält.
Zudem hat die einmal programmierte Webview-App einen immens hohen Recycling-Faktor.
Auch für den ungeübten Java-Programmierer sollte das einen Aufwand von maximal 15 Minuten darstellen, dank einiger adäquater Code-Beispiele im Web.
Nachfolgend werde auch ich hier ein Code-Beispiel geben.
Vorarbeit
Zunächst sind allerdings noch ein paar Arbeitsschritte notwendig bis hin zu unserem Ziel.
Das Android SDK muss installiert werden.
Um den Umfang des Artikels nicht zu sprengen, werde ich nun auf die Installation des SDK für Eclipse eingehen.
Falls Sie das SDK noch nicht installierten, folgen Sie bitte zunächst einfach den Schritten im Tutorial hinter diesem Link.
Bitte denken Sie auch daran Eclipse zu installieren, falls es noch nicht auf Ihrem Rechner installiert wurde.
Artikel über Android mit Eclipse: Klick
Nachdem wir nun alle die selbe Arbeits-Basis haben, kann es auch schon losgehen.
Erstellen des App-Grundgerüsts
Die Activity
Activities sollten Sie wahrscheinlich in nahezu allen Android-Apps antreffen.
Denn sie repräsentieren GUI-Oberflächen, beziehungsweise Screens auf der ein User Eingaben tätigen kann.
Um eine Activity zu erstellen leitet man von der Activity-Basisklasse ab. Genauer gesagt von „android.app.Activity“.
Bevor wir das jedoch tun können, müssen wir zunächst das Eclipse-Projekt erstellen.
Folgen Sie hierzu einfach den folgenden Schritten:
Erstellen der Webview
Doppelklicken Sie nun auf die Activity-Datei im Eclipse Projekt-Explorer.
In der nun geöffneten Activity-Source müssen wir ein paar Änderungen vornehmen.
Kopieren Sie hierzu einfach folgenden Code über den Code der Datei.
package com.brightsolutions.htmlapp;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class HappActivity extends Activity {
private WebView webView; // Anlegen des Webview-Members.
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true); // Wichtig, damit jQuery funktioniert.
webView.getSettings().setDomStorageEnabled(true);
// Hier binden wir die index.html ein.
webView.loadUrl("file:///android_asset/www/index.html");
return;
}
}Anhand der Code-Kommentare sollte das Wichtigste hierzu erklärt sein.
In Zeile 16, jedoch, wird eine Resource genutzt die wir nun erst noch erstellen, beziehungsweise konfigurieren müssen.
Im Normalfall liegt in unserem frisch erstellten Projekt unter dem Ordner "/res/layout" eine Datei namens "main.xml".
Wir müssen diese Datei öffnen und den Inhalt wie folgt ändern.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<android.webkit.WebView android:id="@+id/webView1" android:layout_width="fill_parent" android:layout_height="fill_parent"></android.webkit.WebView>
</LinearLayout>Hier bestimmen wir dass und wie wir das Webview einbetten wollen.
Diese Datei bestimmt insgesammt das Layout-Verhalten einer App.
Mehr dazu finden Sie hier: Klick
Die eigentliche App
Einbetten von HTML und Javascript
Im Root Ihres Projekt-Ordners befindet sich ein Unterordner Namens „assets“.
Das ist der perfekte Platz für unsere HTML- und Javascript-Dateien.
Also legen wir darin der Ordnung halber einen weiteren Ordner namens „www“ an.
Dort hinein legen wir unsere Scripts.
Die GUI
Wie bereit angesprochen, ist jQuery-Mobile eine große Hilfe beim Erstellen von Mobile-GUIs.
Nachfolgend steht hierzu ein Beispiel. Ich empfehle aber, dem Umfang des Themas halber, die jQuery-Mobile Website zu konsultieren.
Dort finden Sie jede Menge Beispiele zur Erstellung verschiedener GUI-Elemente mit jQuery-Mobile.
jQuery-Mobile anzuwenden ist wirklich einfach.
Im Grunde genommen bestehen die damit zu erstellenden GUIs lediglich aus HTML.
Über spezielle Attribute teilt man der jQuery-Mobile Engine bestimmte mit um sie dazu zu bringen entsprechende GUI-Elemente daraus zu erstellen.
Eines der häufigsten Attribute von Tags, welche GUI-Elemente beschreiben sollen, ist „data-role“.
Es gibt konkret den Typ des Elements an.
So zum Beispiel „listview“, „navbar“, „header“, „page“, „button“ oder „check“.
Über weitere Attribute die oft optional sind, kann man bestimmen welches Icon ein Element tragen soll, wie oder wo es positioniert werden soll oder einfach dessen Titel.
Um die Einfachheit zu demonstrieren, definiere ich in folgendem HTML-Code eine kleines Listview-Element mit 4 Listen-Einträgen.
<ul data-role="listview" data-theme="g">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Sed diam nonumy eirmod</a></li>
<li><a href="#">Dolores et ea rebum.</a></li>
<li><a href="#">Stet clita kasd.</a></li>
</ul>Wie zu sehen ist, besteht das Listview-Element ganz HTML-Typisch lediglich aus einem UL-Körper und 4 LI-Elementen.
Das Listview-Element entsteht dann daraus, indem die jQuery-Mobile Engine es über das Attribute „data-role“ als solches identifiziert.
Dies alleine würde schon ausreichen um eine hübsche Listview darzustellen.
Jedoch wären die Einträge dann noch nicht anklickbar. Daher liegen darunter noch A-Elemente.
Hier kann man ganz einfach entweder Aktionen definieren in dem man das „href“ Attribute auf ein anderes HTML-Dokument zeigen lässt, oder man bindet das Element per jQuery an ein Click-Event um in einem Eventhandler nach beliegen reagieren zu lassen.
Arbeiten an der App vollenden
Nachdem Sie Ihre Arbeiten an den HTML- und Javascript-Dokumenten Ihrer App beendet haben, folgen noch ein paar Handgriffe um sie zu vollenden.
Sie möchten wahrscheinlich ein individuelles Icon für Ihre App haben. Im Ordner "/res" im Root Ihres Projekt-Verzeichnisses finden Sie eine Hand voll Unterordner welche mit "drawable-" beginnen. Ihn ihnen befinden sich "icon.png" Dateien verschiedener Auflösungen.
Diese können Sie bearbeiten und zurückspeichern um ein eigenes Logo zu haben welches im App-Menu oder auf dem Desktop des Zielgerätes angezeigt wird.
Den Namen der App können sie im Ordner "/res/values" in der "Datei strings.xml" unter der Variablen "app_name" ändern.
Fügen Sie nun noch die Internet-Berechtigung hinzu.
Doppelklicken Sie hierzu im Projekt-Explorer auf die "AndroidManifest.xml" Datei im Root.
Nachdem sich der dazu gehörende Dialog geöffnet hat, finden Sie dort auch einen Reiter namens "Permissions".
Über den Button "Add" fügen Sie nun eine Permission hinzu und können anschliessend in einer Selectbox auswählen, welcher Art die Permission sein soll.
Wenn Sie fertig sind können Sie die App nun Einsatzfertig machen.
Klicken Sie hierzu im Projekt-Explorer mit rechter Maustaste auf den Projektnamen und wählen anschliessend "Export".
Folgen Sie nun den folgenden Schritten:
Hier müssen Sie nun die Einträge für den Keystore anlegen.
Mehr Informationen zum Keystore finden Sie hier: Klick
Wählen Sie nun einen Ausgabe-Ort nebst Dateinamen für die neu zu erstellende App.
Heraus kommt eine APK-Datei. Das ist quasi das Android-Gegenstück zur Java-JAR-Datei.
Tipps und Tricks
Während dem Erstellen der Javascript-App können Sie bequem den Eclipse-Webbrowser nutzen um Ihre Änderungen zu sehen. Alternativ können Sie auch den Opera-Mobile-Emulator nutzen. Letzterer ist ein kleiner Browser welcher einen Mobile-Browser emuliert. Beides ist attraktiver zum Testen der Änderungen. Denn das Starten der App im SDK-Emulator ist recht träge.
Stellen Sie in Ihrem Android-Gerät unter "Einstellungen" die Eigenschaft "Unbekannte Quellen" ein.
So können Sie Ihre App einfach auf Ihre SD-Karte laden und von dort aus im Gerät installieren.
Pro und Kontra
Diese Variante Apps zu erstellen ist sicher sehr einfach und daher recht verführerisch. Schon alleine wegen der tollen Wiederverwendbarkeit des App-Grundgerüsts.
Jedoch ist es nicht in jedem Fall anzuraten diese Variante einzusetzen.
Immer dann wenn Performance eine Rolle spielt, ist es eher der richtige Weg, eine native App zu programmieren.
Für jedoch, zum Beispiel die Ausgabe von Daten ist dieser Weg absolut ausreichend.
Große Nachteile sind:
- Große Packages.
- Performance-Einbusen.
- Speicher fressend.
Vorteile dagegen:
- Schnelle und einfache Erstellung von Datenausgaben.
- Man muss sich nicht sehr in die Android-SDK einarbeiten.
- Wiederverwendbarkeit des Grundgerüsts.
Anwendungs-Szenarien
Man kann es prima einsetzen um eine Schnittstelle zu eine Website herzustellen um zum Beispiel News in der App auszugeben.
Es kann direkt HTML von der Website per AJAX-GET abgeholt werden um sie innerhalb des HTML-Dokuments einzubetten.
Auch zum Beispiel eine Umfrage-App ist mittels diesem Weges recht einfach umzusetzen.
Download der Beispiel-App: Klick
Download der Beispiel-Sources: Klick
Die fertige Beispiel-App.
Viele Grüße
Marc Sven Kleinböhl
Kommentar hinzufügen