benjamin erhart » Palm Pre

iPhone Web App Game – Lessons Learned

tla — Mon, 08 Mar 2010 11:44:09 +0000

Im letzten Monat hatte ich das Vergnügen ein Glücksspiel zu implementieren.

Um genau zu sein handelt sich um eine sog. 5 Reel Slot Machine, bzw. eigentlich um eine Simulation derselben. Sie trägt den Namen “Gold of Yucatan“, denn das ist das Thema: Das Gold von Yucatan zu finden… Ja, na, eh.

Das Ergebnis meiner Bemühungen ist auf den hier zu bewundern. Leider braucht man auch für ein Probespiel mit rein virtuellem Einsatz einen Account. Das iPhone Spiel kriegt man nur angeboten, wenn man mit einem iPhone oder iPod Touch User Agent daher kommt. Es empfiehlt sich Safari 4, wenn man kein iPhone zur Hand hat, denn der hat die entsprechenden UA Strings schon eingebaut und rendert auch die CSS3 Transitions korrekt.

Ich habe ein paar Photos gemacht:

Was ist nun das besondere an iPhone Web Apps?

Wenn man alles richtig macht, hat man am Ende eine Applikation, die sich fast genauso verhält, wie eine native iPhone Applikation. Einziger klarer Unterschied: Ohne Datenverbindung geht nix, denn die Web App wird immer vom Server geladen. Andererseits spart man sich dafür auch die Apple Zensur: Man muß nicht erst durch den iTunes Store, sondern kann das ganze einfach auf eigene Faust machen.

Wenn man will, kann man aber trotzdem von Apple beworben werden. Sie bieten einen eigenen Web App Katalog an. Zugegeben, der ist im Vergleich zum App Store äußerst unbekannt, der Werbeerfolg wird sich also in Grenzen halten. Bei der riesigen Menge an nativen Apps im App Store hilft die reine Präsenz in selbigen allerdings auch kaum mehr.

Architektur

Eine iPhone Web App befindet sich unter genau einer Resource, also einer einzigen HTML Seite. Alles was man anzeigen will, muß sich darin befinden.

Man kann natürlich dennoch mehrere “Seiten” haben, der Inhalt muß sich aber eben innerhalb einer einzigen HTML Datei befinden. Dieser kann mit JavaScript auch dynamisch generiert bzw. nachgeladen und hin- und hergewechselt werden.

Die alte WML Metapher des “Decks” und der “Cards” drängt sich auf.

Da ich jQuery Fan bin (meine Plugins dafür sollten das wohl hinreichend beweisen…), drängt sich mir die Verwendung desselben natürlich auf. Zum Glück war David Kaneda so freundlich und hat bereits jQTouch entwickelt. (Projektseite bei Google Code)

Das kapselt alles nötige Know-How in einer JavaScript und einer CSS Datei.

jQTouch Features

Automatisches setzen der benötigten spezifischen Web App Tags
Vorgefertigte Card Überblendungen mit CSS 3 Transitions und Animations
Unterstützung des Designs durch setzen entsprechender Klassen bei Orientierungsänderung
Eigene Tap Erkennung und Event Handling des Taps; Dies umgeht die Auslöseverzögerung bei einem Standard onclick Event.

Ich empfehle den Einsatz der letzten Revision im Trunk (aktuell 133) des Subversion Repositiories.

Es gibt dort leider ein paar kleine Probleme, die aber schnell abgestellt sind: Die min-height‘s für die verschiedenen Größen und Orientierungen sind nicht korrekt und vollständig.

Was ist beim Design zu beachten?

In erster Linie ist es wichtig, die unterschiedlichen Viewportdimensionen, die es zu unterstützen gilt, zu beachten.
Einerseits wird die App zuerst einmal im Safari aufgerufen. Dort haben wir 320 x 416 Pixel im Portrait- und 480 x 268 Pixel im Landscape-Modus zur Verfügung. (Die Adresszeile wird bei einer Web App automatisch ausgeblendet, man kann die 60 Pixel, die diese verbraucht also mitrechnen.)

Andererseits haben wir die Situation, bei der die App vom Home Screen gestartet wird. Hier gibt es kein “Browser Chrome”, also keine Bedienelemente mehr. Dadurch stehen 320 x 460 bzw. 480 x 300 Pixel zur Verfügung. Wenn man die Statusleiste auf black-translucent setzt, sogar nochmal 20 Pixel mehr – der Nutzen davon ist allerdings sehr begrenzt, die Statusleiste bleibt ja trotzdem da und hindert den Nutzer an der Bedienung darunterliegender Elemente.

Die App muß also dementsprechend gestaltet sein, so daß sie mit unterschiedlichen Größen zurechtkommt. Vor allem Hintergrundgrafiken sollten entsprechend angepasst werden. Optimal ist es, den zusätzlichen Platz nicht ungenutzt zu lassen, was natürlich nur in bestimmten Kontexten funktioniert.

Zu beachten ist auch, daß die Navigation vollständig mit eigenen Bedienelementen möglich ist – insbesondere der “Zurück”-Button des Browsers fehlt ja!

Das position: fixed Problem

Es liegt nicht weit entfernt, bei einer Web App fixierte Status- oder Toolbars einzubauen.
Da das iPhone die CSS Eigenschaft position: fixed nicht unterstützt, sondern dieses wie position: absolute behandelt und man andererseits

s die mit overflow: scroll scrollbar gemacht werden nur sehr benutzerunfreundlich mit zwei Fingern scrollen kann (und das auch längst nicht mit so geschmeidigem “natürlichem” Feedback), braucht man einen Workaround.

Matteo Spinelli von cubiq.org hat meines Wissens hier die am einfachsten zu verwendende Arbeit abgeliefert: iScroll
Ein JavaScript Objekt, daß mit einem Einzeiler beliebige Elemente mit einem Finger scrollbar macht, und dabei die gleiche Natürlichkeit im Scrollverhalten an den Tag legt, wie sonst überall am iPhone gewohnt.

Damit sind fixierte Toolbars kein Problem mehr!

Und auf anderen Geräten?

Palm Pre

Auf dem Palm Pre funktionieren Touch Web Apps ähnlich gut, leider kann man dort die App nicht ins Menü bringen und der Splash Screen wird nicht angezeigt.

Der zur Verfügung stehende Platz ist auch etwas anders: Der Viewport ist 320 x 460 Pixel (480 – 20 Pixel für die Statusleiste), allerdings befinden sich unten links und rechts zwei bis drei ca. 50 Pixel große runde Browser Bedienelemente, die den Inhalt überlagern: “Zurück” und u.U. “Vor” links, “Neu laden” bzw. “Stopp” (je nach Ladezustand) rechts.

Die Orientierungserkennung ist leider auch nicht verfügbar. Das ist besonders ärgerlich, wenn man weiß, das es sie in nativen Applikationen (die ja in JavaScript geschrieben sind) eben doch gibt!

Wenn man auf explizite horizontale Unterstützung verzichten kann, und am unteren Ende ein bißchen aufpasst, kann man also ohne Probleme auch für Pre anbieten.

Das Palm Pixi ist allerdings ziemlich lästig, weil das einen um 80 Pixel kürzeren Bildschirm hat – auf die möchte man eher nicht mehr verzichten.

Kleines Bonbon: Da Palm webOS Apps ja sowieso in HTML/CSS/JS geschrieben sind, fällt eine Portierung von einer Web App hin zu einer installierbaren webOS App äußerst leicht. Die aktuelle Marktdurchdringung lässt das momentan natürlich nicht besonders interessant erscheinen. Das könnte sich allerdings jederzeit ändern.

Android

Von den Android Geräten, die ich bis jetzt in den Fingern hatte oder mir zugetragen wurden (v.a. HTC Magic und Hero) bin ich schwer enttäuscht worden: Die Geschwindigkeit ist unterirdisch, Transitions werden offenbar nicht durch Hardware beschleunigt, Bewegung in animated GIFs ist faktisch nicht zu erkennen.

Das alles wäre noch zu ertragen und mit Abstrichen drumherum zu arbeiten. Allerdings kommts noch schlimmer: Hintergrundbilder von sich überlagernden

s werden teilweise einfach gar nicht angezeigt.

Obwohl da eigentlich ein WebKit wie bei den anderen Geräten am Werk sein sollte, gibts massive Renderfehler. Sehr arm.

Wichtige Links

Nochmal schnell zusammengefasst die wichtigen Links aus dem Text:
Apple: Was sind Webapps?
Safari Dev Center: Human Interface Guidelines for Webapps
jQTouch
jQTouch bei Google Code
iScroll

Pre and me – Erster Anwendungsprototyp PrivateSync

tla — Sat, 02 Jan 2010 13:46:57 +0000

Inzwischen habe ich bald einen Monat mit dem Gerät herumgespielt und bin dann doch erst mal soweit zufrieden, daß ich es nicht gleich wieder verkaufen werde.

App Catalog

Ich habe das Gerät jetzt an meine deutsche SIM gebunden und habe inzwischen Zugriff auf den App Catalog. (waaaahnsinnig Umfangreich. Keine 100 Apps…)

Das war allerdings ein ziemliches Theater: Erst mal ein kompletter Reset. Dann will das Ding sich natürlich nur wieder aktivieren lassen, wenn es nach Hause telefonieren kann via Datenverbindung. Da ich keine Lust hatte, nach Deutschland rüber zu fahren, habe ich mir die Roaminggebühren gegönnt.

Aktivierung geht auch, aber – welch Überraschung – man kommt immer noch nicht in den App Catalog. Grrrr. Erst nachdem ich dann das nächste Mal in einem deutschen Netz eingebucht war und von dort (über WLAN!) aus auf den Catalog zugegriffen habe, war ich endlich drin. Das ist wirklich saudämlich gelöst.

The Missing Sync

Nach viel Suchen habe ich inzwischen auch aufgegeben und The Missing Sync bezahlt. Was mich aber ziemlich ärgert: die Synchronisierung von Kontakt- und Kalenderdaten auf seinem Rechner ist eigentlich ein Basisfeature für das ich nicht noch extra zahlen will. Zumal 39,95$ nicht grad ein Pappenstiel sind.

The Missing Sync funktioniert auch einigermaßen, allerdings kommt man doch häufig in die Situation, daß man irgendwo mit seinem Rechner und seinem Handy ist, wo man gerade kein WLAN hat, in dem beide eingebucht sind und sich auch finden können.

Der Datenaustausch funktioniert nämlich nur über ein (W)LAN, das eine Verbindung ins Internet haben muß (der Handshake der Geräte läuft über den Pairing Server von Mark/Space) und das die direkte Kommunikation der Geräte nicht verhindert – was v.a. bei (halb)öffentlichen Café Hot-Spots durchaus öfter der Fall ist.

Das Pre verbindet sich auch nicht mit einem Ad-Hoc Netzwerk, daß man mit seinem Rechner initiiert.

Fazit: Es geht, aber lange nicht so schön und flexibel wie bei meinen SonyEricsson Telefonen in Kombination mit Bluetooth und iSync.

PrivateSync

Weil mich das alles ziemlich nervt, habe ich ein eigenes Sync Programm angefangen. Das Konzept ist, um es mir erst mal einfach zu machen, allerdings ähnlich wie beim Missing Sync: Es funktioniert über TCP/IP. Es braucht aber keinen Pairing Server – man muß nur die IP Adresse (oder eine gültige Domain) seines Rechners angeben.

Auf Rechnerseite brauchts einen Webserver, auf dem eine Datei im JSON Format liegt, die die Kontakt- und Kalenderdaten in der Datenstruktur, die Contacts Service und Calendar Service brauchen, vorhält.

Der Telefonteil ist als Prototyp grundsätzlich benutzbar, allerdings tut’s auch nicht viel: Beim ersten Start wird ein PrivateSync Account angelegt, in dem die Daten abgelegt werden. Im User Interface gibt man die Adresse der Datei an, drückt auf “Refresh Now” und wartet, bis die App die Daten eingelesen hat.

Einschränkungen:

Momentan funktionieren nur die Kontaktdaten, die Kalenderdaten sind allerdings analog zu handhaben und reine Fleißarbeit.
Es gibt noch keine echte Synchronisation, die Daten im PrivateSync Account werden vollständig mit den Daten vom Server überschrieben. Es gibt allerdings sowohl beim Contacts Service als auch beim Calendar Service eine Service Methode getChanges im Synergy Service, der das Syncing leicht macht – der Weg dahin ist also bereits geebnet.
Es fehlt noch eine Authentifizierung: Damit man die Daten ruhigen Gewissens auf seinen Webspace legen kann und nicht nur auf seinen lokal installierten Webserver, sollte da zumindest eine Basic Auth davor sein.
Der Server/Rechner Teil fehlt noch vollständig. Für meine eigenen Bedürfnisse reicht mir eine Webapplikation, die vCard/vCal Daten in das benötigte JSON umwandelt (Das Apple Adressbuch hat z.B. eine entsprechende Exportfunktion). Das werde ich mir schon in Perl zusammenbasteln – das ist für solche Datenoperationen ausgesprochen geeignet – und entsprechende Libraries gibts zum Beispiel bereits mit Text::vCard::Addressbook und Net::ICal::Calendar.
Schöner wäre natürlich eine vollständig integrierte Synchronisation, mit Hilfe einer nativen MacOS X Applikation, das die Adressbuch und iCal APIs verwenden. Gerade hier würde ich mich über Unterstützung freuen! Hat jemand Erfahrung damit?
Da der Telefonteil relativ einfach und offen ist, wäre eine Integration in eigene CRM Systeme, online Adressverwaltungen etc. sehr einfach zu bewerkstelligen. Auch existierende Social Networks könnte man damit anbohren. Facebook ist ja schon von Palm abgedeckt. Ich hätte momentan vor allem XING im Visier. Leider haben die kein simples REST API o.ä. veröffentlicht und gehen mit Ihren Schnittstellen auch nicht gerade hausieren – Informationen sind da etwas mühsam zusammenzuklauben. Sie konzentrieren sich offenbar ganz auf OpenSocial. Wäre interessant, ob man via OpenSocial an die Kontaktdaten seiner Kontakte kommen kann.

Den Prototyp (leider noch furchtbar schlecht dokumentiert und mit viel Experimentalcode) gibts hier:

github.com/tladesignz/PrivateSync

Sobald es einen vorzeigbaren Zustand erreicht, werde ich das bei PreCentral anbieten – bis dahin bleibts aber erst mal nur zum basteln bei GitHub.

Pre aufgebohrt

tla — Thu, 03 Dec 2009 16:33:37 +0000

Ich habe weiter herumgespielt und geforscht und bin über einige interessante Dinge gestolpert.

Homebrew Apps

Der AppCatalog funktioniert ja nicht, solange ich keine Lust habe, das Gerät bzw. den zugehörigen Palm Account an eine deutsche SIM zu binden. Deshalb habe ich mich mal nach Alternativen umgeschaut und prompt einiges gefunden:

PreCentral hat ein Homebrew App Verzeichnis mit einer eigenen feinen Installer App.

Diese muß erst mal händisch auf das Gerät gebracht werden, danach kann man alle weiteren Homebrew Apps ohne große Umstände mit dessen Hilfe installieren.

Für Leute, die keine Entwicklertools installieren wollen und auf Windows oder Mac unterwegs sind, gibt es eine Anleitung und Hilfstools, um das zu bewerkstelligen.

Wenn man die Entwicklungstools bereits installiert hat, brauch man das nicht, sondern kann folgendermaßen vorgehen:

Zuerst das Gerät in den Entwicklungsmodus bringen, wie bei Palm oder PreCentral beschrieben. (Ja, das ist der berühmte “Konami Code“)
Dann das Gerät per USB mit dem Rechner verbinden (nur laden)
Auf der Kommandozeile des Rechners novaterm bemühen
Schwups ist man als root auf dem Pre eingeloggt – das ging erstaunlich schnell, ganz ohne Verbindungseinstellungstrallalla (ausführliche Anleitung bei webOS Internals)
Die Installer App “Filecoaster” auf den Rechner laden und in ein Verzeichnis schmeissen, daß vom dort installierten Web Server erreichbar ist. Alternativ nimmt man z.B. seinen Webspace/Webserver im Internet
Dann wie in dieser Anleitung folgendes auf dem Pre ausführen:

root@palm-webos-device:/# /usr/bin/ipkg -o /var install http://[rechnerip|name]/com.palm_.net_.precoder.fcoaster_1.1.6_all.ipk root@palm-webos-device:/# luna-send -n 1 palm://com.palm.applicationManager/rescan {}

Das wars schon. Filecoaster ist installiert und kann direkt verwendet werden.

Hier meine vorläufige Homebrew App Empfehlungsliste:

Preload, ein weiterer App Manager mit noch mehr Apps und ein paar Zusatzfeatures
TweeFree, Twitter Client
Keyring, Zugangsdatenverwaltung
What Is My IP, zeigt die aktuell zugewiesene IP
WHOIS Mobile, whois Abfrage
Quick System Tasks, bündelt einige Einstellungen des Pre

Private Kontaktdaten

Nachdem sich in mir innerlich alles sträubt, schon wieder viel Geld auszugeben für The Missing Sync, habe ich ein wenig darüber nachgedacht, wie ich das Pre dazu kriege Kontakte und Kalenderdaten aufzunehmen, ohne sie irgendwohin ins Netz zu synchronisieren (sei es nun Palm, Google, Yahoo oder was auch immer).

Es gibt ja bereits den Datenübertragungsassistenten von Palm. Alles was ich also offenbar noch brauche, ist ein eigener Synergy Service, der die Daten aufnimmt, statt dem Palm Konto Service.

Die Entwicklerdokumentation von Palm ist ja leider nicht besonders umfangreich. webOShelp hilft aber hier weiter.

Das wird also mein erstes Projekt werden: Eine webOS App schreiben, die einen eigenen Synergy Service bereitstellt um Kontakt- und Kalenderdaten aufzunehmen. Synchronisieren soll das Ding erst mal noch nicht können müssen, aber auf lange Sicht wäre das natürlich fein. Im Endeffekt also ein Missing Sync Nachbau.

Natürlich will ich das als Open Source veröffentlichen.

Jeder, der mich bei dem Vorhaben unterstützen will, ist willkommen! Nur raus mit dem Know-How und der Manpower!

Hello World

Schließlich und endlich ein weiterer Erfolg: Ich hab schon vor einiger Zeit das Hello World Tutorial vollständig durchgemacht und heute selbiges auf dem Gerät zum laufen gebracht. Das macht wirklich Spaß. Gerät anstecken (Entwicklermodus muß freigeschalten sein, s.o.), in der Eclipse unter Run -> Run Configurations -> Mojo Application -> HelloWorld -> Main -> Target einfach “Palm Device” statt “Emulator” auswählen, dann “Run” wählen. Das wars schon!

Jiiiihaaa!

Mein neues Palm Pre

tla — Tue, 01 Dec 2009 00:12:46 +0000

Am Wochenende habe ich endlich mein neues Palm Pre bekommen und bin damit auch offiziell vom Feature Phone zum Smartphone Besitzer aufgestiegen.

Nachdem ich nun eine Weile damit herumgespielt habe, hinterlässt es mich mit gemischten Gefühlen.

Plus

Superhochauflösendes Display
Multitouchbedienung ist sehr geschmeidig
Multitasking (siehe Bild)
An sich gute Verarbeitung (mit Einschränkung – siehe unten)
Jede Menge Sensoren: Näherungssensor, GPS, Kompass, Lagesensor
USB Schnittstelle – als Laufwerk verwendbar
Austauschbarer Akku
Gestenfeld unter dem Display

Minus

Verarbeitung ist eigentlich sehr gut, bis auf eines: die beiden Hälften des Geräts lassen sich leicht gegeneinander verdrehen – das hätte besser gelöst werden müssen
USB Schnittstelle ist unter einer fummeligen Abdeckung
Ausschalten erfordert seit dem Update auf webOS 1.3.1 einen Staatsakt:
- Ausschaltknopf laaaaaang drücken
- dann nacheinander 3 (in Worten: DREI!) Buttons bestätigen: “Stromversorgung”, “Ausschalten/Akku wechseln” und “Ausschalten”
Auf der Tastatur fehlen mir Cursortasten um in den Formularen zu navigieren
Kein Syncing via Bluetooth mit Apples iSnyc/iCal/Addressbuch, stattdessen nur Drittanbieterapplikationen (The Missing Sync von Mark/Space, Demo Version) oder via Datenkrake Google. (flexiblesbuero.com hat darüber zwei Artikel: Snyc mit Missing Sync, via Google) Das ist sehr arm, vor allem, wenn man daran denkt, wieviel Energie sie darauf verwendet haben, direkt mit iTunes zu synchronisieren. (Und inzwischen den Schwanz eingezogen haben.)
Major Fail: Ich erreiche den App Catalog nicht. Offenbar haben das Problem alle Leute in Ländern, in denen das Gerät nicht offiziell verkauft wird. Ich habe das Palm Profil gegen eine österreichische SIM gebunden, das werde ich wohl demnächst ändern. Allerdings scheint es auch in Deutschland Probleme zu geben weil sich Palm wohl was ganz besonders schlaues ausgedacht hat: Es werden nur noch Applikationen für Länder angezeigt, die für diese und für deren Landessprache explizit freigegeben wurden.

Wegen dem Ausschaltgedöns und dem App Catalog Problem, das laut den Berichten erst mit dem Update auftritt, kann ich deshalb momentan jedem nur raten das Update nicht zu machen! Mir sind nämlich auch keine wesentlichen Unterschiede zwischen den Versionen aufgefallen.

Ganz generell schließlich ist mir das Gerät respektive Palm viel zu neugierig. Leider ist das bei Apples iPhone und bei Googles Android Plattform auch nicht anders.

Am liebsten würde das Ding ständig alle Daten absaugen und zu Palm nach Amerikanien schicken, zur “Datensicherung”. Na danke. Zum Glück kann man das abschalten.

Die Höhe ist aber, daß es mit Bordmitteln unmöglich ist, Kontakt- und Kalenderdaten auf das Gerät zu bekommen, ohne daß diese gleich noch mit einem Internetservice synchronisiert werden.

Es gibt zwar Software von Palm, mit der man einmalig seine PIM Daten zum Pre (offline) übertragen kann, das Gerät will diese aber dann nur importieren, wenn es gleichzeitig die Daten zum Palm Server oder zum Google Server synchronisiert.

Und solche sensiblen Daten werde ich ganz sicher nicht mit denen teilen!

Einziger Ausweg aus dem Dilemma: Eigenen Exchange Server installieren. Grrrr. M$ Software werde ich ganz sicher nicht anschaffen, und Zarafa habe ich bei meinem Arbeitgeber schon versagen gesehen. Mal schauen, was sonst noch bleibt.

Zum Schluß bleibt dann noch zu sagen: Da das Gerät ohne Anmeldung bei Palm nicht benutzbar ist, gilt wohl das gleiche wie fürs iPhone:

Ich sach ja: Wer ein iPhone kauft, erwirbt die Moralvorstellungen von Apple gleich mit: http://u.nu/7uqy3 (Mario Sixtus)

Palm und ich

tla — Tue, 17 Nov 2009 22:47:00 +0000

Nach langem hin- und herüberlegen bin ich nun auch endlich im Club der coolen Smartphonebesitzer angekommen.

Ich habe mir ein Palm Pre bestellt.

Weil ichs nun gar nicht mehr erwarten konnte, gleich mal das SDK installiert und das Eclipse Plugin.

Wer sich (noch) keinen eigenen Account bei Palm anlegen will: BugMeNot hat einen gelistet.

Ich bin schwer begeistert und fühle mich gleich wie zuhause. Alle Applikationen werden in HTML, CSS und JavaScript gebaut. Der Emulator setzt auf VirtualBox auf, das Eclipse Plugin macht gleich den Build und wirft die App in den Emulator.

Nach 5 Minuten ist das erste Ergebnis zu sehen.

Jetzt brauche ich nur noch eine Idee für eine Applikation!

Früher konnte ich mich gar nicht mit Palm anfreunden. Die PDAs mit den Stiften waren einfach zu fummelig.

Das webOS scheint aber ein richtig guter Wurf geworden zu sein. Viele Dinge von Apple abgeschaut und eigene Ideen mit eingebaut. Insbesondere die Entscheidung, daß Applikationen rein in Webtechnologien entwickelt werden, könnte der Platform enormen Auftrieb geben.

Seine ganze Entwicklermannschaft erst auszugliedern in eine eigene Firma und sie dann anschließend am ausgestreckten Arm verhungern zu lassen, kann sich offenbar manchmal auszahlen… (Nicht das ich das jetzt überall empfehlen könnte. *hust*)

Ich bin gespannt auf das eigentliche Gerät. Mal sehen, ob der Akku länger durchhält als bei der iPhone und Android Konkurrenz.