abgekliert

Blog Angekliert Über abgekliert Übersicht



Zeige nur Artikel mit dem Stichwort

entwicklung


Meine erste Android-App - ein Erfahrungsbericht


So sieht die App "3D BMI" aktuell aus

Einleitung

Als Nerd und ehemaliger Telekomiker habe ich eine gewisse Begeisterung für Handys und insbesondere Smartphones. Beginnend mit dem Sony-Ericsson P800 und einigen Windows-Geräten konnte einem der Spaß aber schon ausgetrieben werden. Aus Trotz griff ich sogar eine zeitlang zu einem Handy, dass einfach nur zum Telefonieren taugte. Vor ca. einem dreiviertel Jahr versuchte ich es dann doch wieder mit Android. Das HTC Desire ist verglichen mit den alten Windows-Geräten schon ein Quantensprung. Mal abgesehen von Tastatureingaben - die automatische Worterkennung ist eine Zumutung - kann man das Gerät echt benutzen. Unterwegs surfen geht nicht nur auf dem Papier, Mails gehen zuverlässig, und sogar Spiele machen Spaß. Die HTC Sense Oberfläche ist schick und ich hätte nie gedacht, dass ich mich einmal für eine Wetteranzeige auf einem Handy begeistern könnte. Also echt Respekt an Apple, die Smartphones endlich benutzbar gemacht haben, wenn auch nicht die eigenen.

Idee

Das tolle ist nun, dass man auch eigene Anwendungen programmieren kann, ohne sich groß umstellen zu müssen. Auf Basis von HTML und Javascript sollten sich eigene Ideen ganz leicht umsetzen lassen, ein leistungsfähiger Browser ist ja schließlich vorhanden. Einige Frameworks wollen einem dabei das Leben noch erleichtern. Ich entschied mich für PhoneGAP und JQuery mobile. Bei PhoneGAP gibt es schöne Einsteiger-Anleitungen für ein einfaches Hello-World. Also installierte ich Eclipse und wagte mich daran. Dazu muss ich sagen, dass ich überhaupt kein Java-Freund bin und um Eclipse sonst weite Bogen mache. Nach einigem K(r)ampf mit 32- und 64-Bit lief jedoch auch Eclipse und PhoneGAP. Als App-Idee wollte ich meinen BMI-Rechner umsetzen. Ein wenig Javascript und simples HTML - das sollte ja nicht so schwer sein. Das Komplizierteste dabei sind die Slider, aber die bringt ja JQuery mobile mit. Also eine einfache Seite damit gemacht, die alle Bedienelemente enthält. Im Emulator sah das auch ganz gut aus, aber am Handy war die Enttäuschung dann groß. Die JQuery-Slider waren nicht benutzbar. Nur ganze Werte, keine direkte Eingabe in die Felder, keine Chance einen Slider das amerikanische Feet und Inch-System beizubringen. Davon abgesehen brachen die Elemente komplett unterschiedlich um. Zusammengehörige Buttons wurden auseinander gerissen. JQuery war damit gestorben.

Schnelle Umsetzung

Nicht so schlimm, ich hatte ja alles bereits fertig. Größtes Problem sind die unterschiedlichen Bildschirmgrößen bei Android. Es gibt einfach zu viele verschiedene Geräte. Ich entschloss mich der Einfachheit auf Querformat festzulegen. Per Javascript lese ich einfach die Bildschirmhöhe aus und platziere davon abhängig alle Elemente. Auch die Textgröße wird davon bestimmt. Die Konfigurationsoptionen platzierte ich einfach ganz rechts, teilweise wird ein wenig abgeschnitten, wenn der Bildschirm das falsche Format hat. Man erkennt ja den Sinn und bedienbar ist es auch. Dummerweise stellte ich die App so in den Market und sammelte so die ersten 2 Tage richtig viele miese Bewertungen.


So sah die erste Version aus

Nacharbeiten

Denn als ich auf einem anderen Handy testete, sah plötzlich alles ganz anders aus. Obwohl mein HTC Desire und das ZTE Blade meines Sohnes die gleiche Bildschirmauflösung haben, sieht man etwas  anderes. Das Blade macht nämlich aus jedem Pixel 1,5 Pixel. Es erfolgte ein Ausflug in die Darstellung mobiler Browser. Dort ist ein  Pixel nämlich kein Pixel. Je nach Einstellung kann ja gezoomt werden  und selbst wenn man das abstellt gibt es Unterschiede. Und wie bringt man nun dem Gerät bei, nicht zu scrollen, wenn man einen Slider bewegen will? Also eigentlich wäre ja nichts zu scrollen gewesen, aber auch das war wohl nur mir klar. Also nichts mit einfach mal bekanntes umsetzen. OK, ich verteilte ja sowieso alle Elemente dynamisch, also konnte ich das alles relativ leicht einbeziehen. Dann lernte ich, dass auch die Statusanzeige eine Rolle spielen kann und man durchaus unterschiedliche Werte bekommt. Aber auch das war irgendwie zu lösen.

Nur die Slider funktionierten nicht so ganz zuverlässig. Eigentlich klar, weil ich ja im normalen Browser mit Dingen wie "onclick" arbeite, es das aber nicht gibt. Touchscreens arbeiten mit "touch". Also die Ereignisverwaltung angepasst und auch das geht nun - zumindest besser. Riesige Probleme hatte ich mit den normalen Eingabefeldern. In meiner Naivität ging ich davon aus, ich mache einfache Input-Felder und der Browser zeigt eine Tastatur an, wenn man darauf "klickt". Aber weit gefehlt, der Cursor blinkt im Feld, aber man kann nichts eingeben. Zuerst hatte ich ein onclick-Ereignis, was dem jeweiligen Feld den Fokus gibt. Dann erschien die Tastatur, aber verhielt sich sehr, sehr merkwürdig. Klickte man danach auf einen der Radio-Buttons, sprang man sofort wieder zum Feld zurück und ähnliches. Mit ontouch statt onclick geht das besser. Wobei ich es als alles andere als perfekt bezeichnen würde. Aber zumindest verhält es sich nun oft so, wie man es erwartet. Insgesamt ist die Ereignisbehandlung auf einem mobilen Gerät doch deutlich unterschiedlich zu einem normalen Browser.

Ohne PhoneGAP?

Zwischendurch habe ich auch eine Variante ohne PhoneGAP getestet. In Android gibt es nämlich die Möglichkeit mit WebView eben solche Web-Apps umzusetzen. Ohne externes Framework kann ja nur besser sein, dachte ich*. Aber in WebView stürzte die App ganz oft ab, wenn man in ein Eingabefeld klickte. Seltsam, aber ich ließ es dann.
*Ich mag Frameworks generell nicht. Diese taugen meist nur für einen kurzzeitigen Hype und überleben sich zu schnell. Ich pflege durchaus noch Programme, die ich vor 10-15 Jahren gemacht habe. Das geht nur, wenn man kein Framework einsetzt. Selbst wenn das noch gepflegt werden würde, könnte ich kaum einem Kunden erklären, dass die gewünschte Änderung in 5 Minuten zu machen ist, er aber 2 Tage für die Nacharbeiten für die neue Frameworkversion zahlen muss. Und das dann nur, weil dort die Browserweiche die Versionsnummern von neu erschienen Browsern kennt oder Sicherheitslücken behoben sind. Das ist übrigens auch der Grund, warum so viele CMS-Installationen mit Sicherheitslücken online sind. Die Agenturen trauen sich nicht dem Kunden zu sagen, dass man updaten müsste, weil das Geld kostet. Aber das ist ein anderes Thema.


Verbesserungen

Zuletzt machte ich aus den Radio-Buttons für die Konfiguration noch richtige Buttons und entfernte die Option für den Körperbau. Das verkleinerte die App um 2,5 MB. Ja, die 3D-Ansichten werden natürlich nicht live generiert. Diese stammen von einem 3D-Grafiker und waren nicht billig.

Was mich noch stört ist die langsame Geschwindigkeit. Auf dem ZTE Blade macht es keinen Spaß und selbst auf dem Desire könnte es ruckelfreier laufen. Dafür, dass ich eigentlich nur per ontouch-Ereignis eine einfache Berechnung durchführe und 2 kleine Grafiken platziere ist das schon eine Schande. Falls jemand Tipps hat, wie man eine HTML-App schneller machen kann, bin ich dafür sehr dankbar. Ebenso habe ich keine Ahnung, warum die Elemente bei Berührung einen Rahmen zeigen, der ein paar Pixel verschoben ist.

Erfolg

Was mich enorm positiv überrascht hat, ist die Anzahl der Downloads. In der ersten Nacht nach dem Einstellen in den Market wurde App bereits über 1500 mal heruntergeladen. Nach nunmehr 12 Tagen sind es immer noch mehr als 1000 Installationen pro Tag. Das finde ich erstaunlich, zumal die Bewertung mit 2 Sternen eher unschön ist. Wie bereits angesprochen hagelte es in den ersten beiden Tagen viele miese Bewertungen.

Download

Wer die App mal live sehen will, der sucht im Market einfach nach "3D BMI" und hält nach diesem Icon Ausschau:

Selbstverständlich freue ich mich riesig über 5-Sterne-Bewertungen. 8-)

Nachtrag vom 7.2.: Nachdem es nun möglich ist, den Market direkt zu verlinken, hier geht es zur App: 3D BMI

Dieser Artikel wurde veröffentlicht am 13.01.2011 um 12:46 Uhr. Noch kein Kommentar. Stichworte: android app entwicklung


Stichwortliste: (nur die wichtigsten, die komplette Liste gibt es hier)
amiga android baby blog blogparade buch ccc chips computer demo erziehung event flash forschung freunde fun gesellschaft gewinnspiel hacken handy infoprodukte intern internet kinder lohas marketing markus mp3 musik nürnberg online piraten podcast politik retro retro-computing scene selbermachen seo spiele technik test usb video web20 wirtschaft zensur