If you get stuck in a point please ask questions on the gomobile-dev discussion forum.

Prerequisites

• Basic Plone development skills
• Basic ZopeSkel knowledge
• Basic five.grok knowledge (Grok framework integration for Plone)

This tutorial is little rough on details, but links to authoritative sources for more in-depth information. I hope to further polish this tutorial based on the user comments.

Note: currently the installation process does not work from China, as the local access to code.google.com and appspot.com servers is limited.

Installation

Install Web and Mobile to your buildout.

Possibly fight with lxml to get it running.

Create a Plone site (if you don’t already have an existing site).

Then install following add-ons, in this order in the site control panel

• Go Mobile
• Go Mobile Default Theme

Now your website should have a basic mobile experience with a default Web and Mobile theme.

Test mobile site

You can visit the mobile version of your site by putting a m.localhost domain in your /etc/hosts file. You don’t need a mobile browser, as the mobile site is detected by a domain name by default. Your mobile site should be available from http://m.localhost:8080/Plone

If you access the website with a mobile browser you will be automatically redirected to a mobile site.

Creating a mobile theme

Install the ZopeSkel based mobile theme template to your buildout.cfg.

parts =
   ...
   paster

[paster]
recipe = zc.recipe.egg
eggs =
  PasteScript
  gomobile.templates
  ${instance:eggs}

Rerun buildout to enable bin/paster command:

bin/buildout

Create a theme skeleton using paster. We use a Python package named gomobiletheme.yourcompanyname here as an example name for the theme package. If it asks for “override files” answer yes:

cd src
 ../bin/paster create -t gomobile_theme gomobiletheme.yourcompanyname

List your new theme egg in buildout in develop-eggs. (Alternatively: use mr.developer  if you indent to put it directly under version control.)

eggs =
    gomobiletheme.yourcompany
develop =
   src/gomobiletheme.yourcompan

Rerun buildout.

Test theme skeleton

Test the theme installs and works. Restart Plone and install your theme add-on in the add-on installer.

Navigate to m.localhost again and see that the mobile site still opens.

Theme theory

The generated mobile theme includes five.grok based viewlets.py and view.py files where you are to place

• Mobile theme viewlets (note: mobile theme does not use viewlet managers)
• Mobile specific view overrides
• Mobile specific page template overrides

All visual code registered against gomobiletheme.yourcompany.interfaces.IThemeLayer is available and used when your site is browser in mobile mode.

Changing logo

Change the generated gomobile.yourcompany.viewlets.Logo class.  In the example below we set it to use logo image file from our web theme.

class Logo(base.Logo):

 # Change logo URI here
 def getLogoPath(self):
 return "++resource++plonetheme.yourwebtheme.images/logo.png"

If you are using logo from the web theme resource directory, make sure <resourceDirectory> in theme browser/configure.zcml does not have <resourceDirectory layer=”"> set. If it’s set the resource directory is not activate for the mobile theme and the mobile theme cannot access the logo file.

The logo image is resized automatically by gomobiletheme.basic.viewlets.Logo base class for different mobile screen resolutions.

Changing footer text

In viewlets.py add:

class FooterText(base.FooterText):
 """ Free-form HTML text at the end of the page """

 # the presence of this viewlet includes a new page template
 # and overrides default footertext

Then include the page template itself. Add new file to the your theme package templates/footertext.pt:

<div id="footer-text" i18n:domain="isleofback.app">
 Your text goes here.
</div>

Change the default colours and CSS

Mobile theme static CSS and Javascript resources are provided by five.grok static folder mechanism. Transformations document provides some in-sight for different CSS files used by different handsets: common.css is served to all mobile phones, highend.css for Webkit and Firefox based browsers, lowend.css for limited browsers.

The default gomobiletheme.basic CSS resources are included by default with the theme skeleton. You need override only the CSS rules you specifically want to change for your own  theme. This can be done by adding rules to common.css, lowend.css and highend.css files which you can find from the generated theme package.

Further info

• Read theming manual in Web and Mobile documentation section.
• See Web and Mobile presentation in Plone Conference 2010
• See plonecommunity.app package for an open source example
• SVN trunk version of the theming manual for the latest instructions
• Subscribe to Web and Mobile discussion group for further questions

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

To tackle the lack of console.log() problem there are several approaches.

Use dummy placeholder if console is missing

This snippet wraps console.log (need to repeat for console.error etc.):

// Ignore console on platforms where it is not available
if (typeof(window["console"]) == "undefined") { console = {}; console.log = function(a) {}; }

Pros

• Easy

Cons

• Need to add to every Javascript file
• Messes with global namespace

Use module specific log function

This makes your code little bit ugly, more Java like. Each Javascript module declares their own log() function which checks the existence of console.log() and outputs there if it’s present.

mfabrik.log =function(x) {
 if(console.log) {
 console.log(x);
 }
}

mfabrik.log("My log messages")

Pros

• Easy to hook other logg
• You can disable all logging output with one if

Cons

• Not as natural to write as console.log()
• Need to add to every Javascript module

Preprocess Javascript files

Plone (Kukit / KSS) uses this approach. All debug Javascript is hidden behind conditional comments and it is filtered out when JS files are bundled for the production deployment. (The preprocessing code is here in Python for those who are interested in it).

if (_USE_BASE2) {
 // Base2 legacy version: matchAll has to be used
 // Base2 recent version: querySelectorAll has to be used
 var _USE_BASE2_LEGACY = (typeof(base2.DOM.Document.querySelectorAll) == 'undefined');
 if (! _USE_BASE2_LEGACY) {
 ;;;     kukit.log('Using cssQuery from base2.');

Pros

• Makes production Javascript files lighter
• Make production Javascript files more professional – you do not deliver logging statements indented for internal purposes for your site visitors

Cons

• Complex – preprocessing is required

Commit hooks

You can use Subversion and Git commit hooks to check that committed JS files do not contain console.log. For example, Plone repositories do this for the Python statement  import pdb ; pdb.set_trace() (enforce pdb breakpoint).

Pros

• Very robust approach – you cannot create code with console.log()

Cons

• Prevents also legitimate use of console.log()
• Github, for example, lacks possibility to push client-side commit hooks to the repository cloners. This means that every developer must manually install commit hooks themselves. Everything manual you need to do makes the process error prone.

Other approaches?

Please tell us!

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

3D accelerated effects are no longer the monopoly of desktop beta browsers (Firefox 4, Google Chrome 9… I am looking at you). Sony demoes Javascript WebGL on its Xperia handset. WebGL would be major turning point for mobile gaming, as it would lower the barrier of enty for building cross-platform mobile games.

Not just games, but the whole web user experience will be redefined when you can finally push impressive visuals to the site visitors.

I can so see the demo scene of 90s coming back soon…

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

• It is faster, especially it launches and opens new tabs faster than Chrome
• User interface has some nice new innovations, like non-intrusive Download pop-ups and password update dialogs
• Tab groups (Panorama) allows me to create different “workspaces” for leisure time, like Facebook surfing, and work time containing tabs for corporate email and calendar
• Sync works across my different computers, though Chrome can also do this nowadays

Tab groups

I have been experiementing with following tab groups which mostly correspond my different “behavior modes” I have on when working on a computer

• Work tabs: email, calendar, docs
• Social tabs: Facebook, Twitter and such
• Plone, Python and other programming related: All documents and links open, for example copy-pasting them to IRC discussion to give support for someone

Note that I had to add “Tab group” button manually to toolbar, as it was not added there automatically after update. Just right click on empty space next to tabs and choose “Customize”

Add-ons

Some add-ons I am using and I haven’t found equally good alternatives on Google Chrome

• New Tab JumpStart – speed dial for your recently visited pages and bookmarks when opening a new tab
• FireGestures – Mouse gestures which also work on user interface and not just web pages and which do not mess with right button click
• Web Developer toolbar - test print CSS styles, clear cookies easily, somethign that Firebug doesn’t do well
• User Agent Switcher (needed for mobile site development, some instructions here)
• …. and of course Firebug!

I still wish to have add-on sync, so I wouldn’t need to install add-ons separately on each computer.

Firefox for Mobile (Fennec) does not yet provide as solid experience as its desktop counterpart. Mobile Firefox team definitely need to add some speed to its engine before I can consider it alternative for WebKit on my Android phone. But when it gets there and the sync feature is in the place, I’ll start using it instantly.

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

mFabrik News – download now for iPhone and Android

Why create a mobile application?

The first question is why one rather create a mobile application when the same task can be accomplished with a mobile site? Most people even prefer mobile sites over applications. From a pure engineering viewpoint, mobile applications are usually just glorified RSS readers that embed Webkit and add some native user interface bling bling over it. With an app, you are limiting your target audience, because an application is limited to one platform. Maintaining application(s) and application developers is more expensive compared to a mobile site which few (cheap) PHP junkies can throw together.

But is not always technology or price which matters. Mobile applications have prestige value – having or showing success, rank, wealth, etc. If you have a high quality brand, you probably want to have a mobile application too. When you see the brand logo swinging forth and back in an iPhone application with smooth animation running 60 frames per second, you see that it is a proper placement for the brand logo. The output is more luxury, more carefully planned, and does not look like it was thrown together by few cheap web developers.

There are even rationale reason for going after applications. First, you are in a business of making money. It is a lot of easier when the platform itself is offering you a payment solution without a monthly fees (iTunes payment). Other good reason is that there exists interaction between the application and your content beyond the browser window.  You can push messages or do things even if the user is not on your site (see more information about the push solution we implemented below).

Mobile application development and Python

As most of this post readers are probably fellow Python developers, here are some thoughts specifically aimed for them. Python itself is not a very good alternative what comes to mobile application development. Though, the application itself may not contain Python code, Python still shines on the backend side of the things. For example, we’ll hope to publish an example application using Google App Engine in the near future.

The only future proof platform where Python is 1st class citizen for building applications, is Nokia’s Meego with its Pyside and Qt bindings. Unfortunately Meego doesn’t have any shipped handsets and looks like it never will.

Android has script bindings, but they are not good enough for real application development, as interaction with the native platform happens over TCP/IP sockets. However, Android has seen some recent exciting development from PyPy project, possibly enabling native Android development for Python in the future.

iOS with Python could be a go, now when Apple has lift ban on interpreted languages. I haven’t heard anybody doing it yet, though. CTypes had some problems long time ago regarding run-time generated code for Python bindings.

Python has also a port for Series 60 (Symbian) – don’t go there if you are not prototyping. It is good platform for students for  playing around, but unfortunately it has never been considered as serious development environment by the handset manufacturer. You have tons of headaches if you actually want to release a product version of your application.  Nokia N900, soon supported. is better prototyping platform for Python than Series 60 as you get full Debian userland.

Mobile application development and wrappers

There exist various wrapper technologies which help you to wrap your HTML5 application to a native application shell. With simplistic APIs provided through Javascript bindings, you can access a limited subset of native platform APIs. Wrapper technologies are mostly aimed for web developers, who do not have any experience on application development and they might want to skip the learn experience of native development.

Wrapper technologies do their job and produce decent apps. But if you are a Python developer I recommend you skip the wrapper step and build your own native user interface and embed Webkit yourself. Designing an user interface is much is easier with Apple’s Interface Builder or Google’s  Android tools than with half-baked Javascript bindings. The fact that you are actually able to insert a real breakpoint into your code is itself worth of skipping wrappers. If you already are a Python developer you already know at least one real programming language and mastering Objective-C or Java should be an easy task for you.

Webkit itself has bugs. You will regularly hit obscrure bugs when the amount of  Javascript and CSS code grows. In the worst cases Webkit just dies under your application without a way to debug the problem – sometimes without a workaround available for the problem. This means dead end for your lovely application. You don’t want to end up to this situation. So, just to have more low level control, using native tools is good.

mFabrik News application

mFabrik News mobile application allows you to follow the latest news of mobile and web development, produced by our hacking team. The applications source the news from our Plone based web site and WordPress blog (which you are currently reading). It uses special RSS streams prepared with our Web and Mobile multichannel publishing solution: news images are optimized for mobile device screens using a handset database (Wurfl) and some other HTML preproessing is done to make the posts look better in embedded WebKit. Processing is done using mobile.sniffer and mobile.htmlprocessing Python packages which are generic Python packages and should be usable in various environments, including App Engine.

iOS mFabrik News application has push notification support. Android doesn’t yet implement push solution, but it is coming for Android 2.2 handsets.  Please see the earlier blog post how we use Apple Push Notifications with Python.

Download, give the apps a spin and report any feedback! (direct links at the beginning of the post)

We may or may not release the source code of the applications, depending if anybody thinks they actually would find it useful.

Get developers  Subscribe mFabrik blog in a reader Follow me on Twitter

• Image uploads
• Payments for subscribed content

Sounds easy, right? Well it isn’t… Below are some notes for our due diligence work which you fellow developers might find interesting.

SDKs

Mobile phone vendors are jealously and don’t want to co-operate with each other. Building application which works in all handsets is major headache.

We found some reasonable candidates for cross-platform mobile development doing HTML and Javascript. HTML and Javascript pages are converted to native application using a wrapper technology (a.k.a. appaccelerator). Doing Flash Lite or Java ME can be pretty much forgotten nowadays as they won’t run on the most hyped platform, iPhone. Flash Lite has poor support for anything except content authoring due to primitive and limited APIs. Java ME provides horrible user experience.

(X)HTML is the only common language spoken by mobile phones. Thus, there has been a rise of “appaccelerators”, technologies which allow to create mobile applications with HTML(5) and Javascript.

• Phonegap: iPhone, Android, Blackberry and possibly S60 in the future. Pluses: BSD license, very active community. Minuses: bad documentation, difficult deployment process.
• Titanium: iPhone, Android. Pluses: Professional, Apache license. Minuses: Too tightly coupled with Appacclerator Inc. company.
• Rhomobile: iPhone, Android, Blackberry, S60, Windows Mobile. Pluses: Professional, tries to build open source community, the widest platform support. Minuses: Dual licensing and tightly coupled with Rhomobile Inc.
• Nokia Web-runtime: Nokia S60 and some other Symbian based phones. Pluses: Professional, good documentation. Minuses: Not open source, impossible to extend, Nokia has little interest to make this cross-platform, Nokia doesn’t like updating old models and web-runtime is useable only in the latest S60 5th edition models.
• Palm Pre supports web applications natively. However Palm Pre application business is still taking a shape.

All these wrap the browser component (WebKit) and provide some extra Javascript APIs when your web pages as executed under the application mode.

• Locationing
• Contacts
• SMS
• Client-side database
• and so on…

Rhomobile has little different use cases  from the rest of the bunch as it provides client-side programming using Ruby and less focuses on Javascript/web applications.

Payments and in-application purchases

There are four major way to do mobile payments “inside” the application for bought content and subscriptions. The price tag on the application itself is left out on this discussion as the application stores themselves take care of it.

• Credit card
• SMS
• App Store payment (thus far Apple only)
• Direct operator payments – you have a service provider (Bango) which can directly charge items to the operator phone bill based on handset identification.

App Store payment is the most attractive as it provides the best end user experience.  It allows you to use App Store payment mechanism inside the application. It is safe and no need to hassle with external payment providers. However, App Store payment can be used only for content consumed directly inside the application. You cannot use it e.g. for ordering a pizza. I think this might be related to recent EU legislation forbidding SMS payments for services not consumed in the phone itself.

SMS payment is ok for little payments. Operators take big cut of the revenue, generally 30% – 70% depending on the country. Short code fees usually start from 500€ set-up fee + 500€ / month. SMS cannot be often send as a background, but the user is presented the normal SMS editor which reduces the user experience somehow.

For credit card payments there exists several providers. Credit card has the cheapest entry fees, but the downside is that the user needs to have the credit card. This excludes teenager audience.

Direct operator payments are not very well supported yet globally. Most western operators support them. The operator also takes a big share and the fixed fee is pretty high.

My favorite payment provider thus far is Bango which provides credit card payment starting 9€ / mo. and scales up to worldwide SMS payments which cost few grannies per month.

In most cases, the payment experience will not be smooth. You need to open the phone main browser on the payment provider page to do the payment. This usually will close your own application. Rarely you can do the payment inside the application and support multiple platforms. After doing the payment most platforms allow you to close the browse and reopen your application using a special URL handler.

Wikipedia mobile payments page is also useful.

Image upload

<input type=”file”> won’t work on iPhone and some other platforms as those don’t have user browsable file system. Also the file dialog usually doens’t have image preview making it useless.

Phonegap has a branch which supports images picking using iPhone’s own gallery browser.

In any case, there is not yet cross-platform solution for this.

Future prospects

In some time-frame we will get rid of the need to wrap HTML applications natively as the web browser applications will support all HTML5 features without extensions and probably have some proprietary extensions for mobile specific features like SMS. We already have had some taste for this:

• The first taste of this is Mozilla’s Fennec mobile browser which has locationing support.
• iPhone’s Safari already supports client-side storage and CSS3.
• All phones have support for dial-in links. The format of the link may vary. DeviceAtlas is good place to hunt for this information.
• Nokia browser supports send SMS links
• Nokia browser supports downloadable map markers (to the map application of the phone itself)

The route, which you can bicycle through is drawn on Google Maps. There are nine  action points where the user can listen to streaming audio clips, with still images, in his/her mobile phone. This is sort of  augmented reality experience: The user sees the real world (where he/she is now bicycling) combined with the historic events (audio playback narrative). For example, at Linnansaari (a location on the route) you’ll see the actual 17th century castle ruins and the narrator tells how the castle exploded when fire, caused by a lighting, reached gunpowder warehouse… boom. The explosion caused stones fly over 400 meters.

Alternatively, the clips are available as podcasts from Oulu Tourism pages. You can download them into your iPod for offline listening and use in conjuction with a paper map. This demostrates interesting mix of multichannel publishing: paper, web, mobile and podcasts.

The tour is bilingual in Finnish and English.

There exists unreleased iPhone application, based on PhoneGap, which allows the user to track his/her location real-time on the web page. We didn’t see it worth of trouble to go through Apple iPhone application review process. When location based service support comes for the browser this feature is indended to be included as the standard HTML5 feature of the service.

There also exists Nokia Series 60 mobile application, based on PyS60 and Series 60 BrowserControl API, which allows the user to track his/her location in real-time. The application provides wrapper around Series 60 WebKit control and allows Javascript to access phone native functions (GPS) over localhost socket communication. Like with Apple, we didn’t see real-time tracking feature interesting enough to go through Symbian Signed process to get our application released. Also, BrowserControl had seriousquality problems and we didn’t consider it stable enough for the end users. Some work is available in PyS60 Community Edition repository.

The service is hosted on Python specific virtual server on Twinapex services server farm.

Features

• Premium content tailored for audio listening
• Dubbed in English and Finnish by a professional voice actor
• Bilingual: English/Finnish
• Adapts for smartphones (WebKit based browsers) and low end phones (XHTML mobile profile browsers)
• Streaming video and audio (RTSP / progressive HTTP download forv iPhone). Different audio quality is provided on depending on the handset features.
• Screen resolution detection based on user agent sniffing. Three different version of images are used.
• Custom Google Maps component for mobile is used. The component adapts for different mobile phones based on sniffing. Features include zoom, show action point, show the current location, search street address name. This component can be published on a request.
• Management interface features include video upload, video transcoding different mobile versions and editing bilingual content
• Apex Vertex handset database is used to detect the user’s mobile phone capabilities
• Apex Vertex logging and traffic analytics capabilities are used for the site statistics

Software stack

• Ubuntu 8.04 Hardy Heron virtual server
• Apache 2.2 / mod_python
• Python 2.5
• Django 1.0
• Django-CMS 1.0
• mobile.sniffer Python package to provide abstraction over different handset databases
• Apex Vertex streaming solution (RTSP based on Darwin streaming server by Apple)
• TinyMCE WYSIWYG editor
• Darwin streaming server
• ExtJS is extensively used in Apex Vertext management interface

Development effort

Development time: Around 100 hours. Three different developers where involved. Used development tools: Eclipse, PyDev, Subclipse, Subversion. There were around five meetings between the content provider and the technology provider. Few beta testing rounds using iPhone application were performed by bicycling in -10 celcius degrees weather (north and so on…). No polar bears were harmed during the creation of this mobile service.

The service is linked in from Oulu Tourism pages and thousands of paper brochures printed for Oulu summer season 2009.

About the author Mikko Ohtamaa

• LinkedIn
• Twitter