Opera provides web based simulator which you can use to test your web pages in Opera Mini. Opera Mini is based on Java, on both mobile and in the simulator, so Java plug-in is needed.

If you don’t have an public IP address you are firewalled you need to do a port forward with SSH tunnel though a server having public IP:

ssh -gNR 8888:localhost:8888 yourserver.com

Then you just go to Opera Mini simulator and type your port forwarded address:

yourserver.com:8888

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

Please update your buildout pindowns for Dexterity 1.0:

extends =

http://dist.plone.org/release/4.1rc2/versions.cfg

http://good-py.appspot.com/release/dexterity/1.0?plone=4.1rc2

Please report all the issues in the issue tracker.

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

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

We here at mFabrik are interested to find organizations who are looking for

• Mobilizing their existing web sites
• Building mobile applications
• Need training regarding mobile development

Web and Mobile comes with commercial support if you need to guarantee that there is a person available fixing mobile related bugs on your site.

We’d also like to hear  if you do not find Web and Mobile a suitable solution for your Plone site: what are the pain points there and where we could help.

You can contact our Plone team via email research at mfabrik dot com.

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

Actually this is even better than before. While developing for Symbian or Meego, I always had a cloud of uncertainty hanging over my head. My experience with Symbian had taught me to be very skeptical about the platform and Meego devices weren’t out yet(and still aren’t ). And as everybody knows, those fears got some justification by Nokia. Maybe Meego will prevail, but I’m pretty sure Android is not going to disappear very soon.

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

To have the über-experience of customer engagement with mobile push notifications you need

• A mobile application (iOS, Android 2.2)
• RSS feed to notifications middleware server (our solution)
• RSS feeds themselves
• Windows/UNIX server running the middleware

How it is put together

Tornado web server is used to handle incoming HTTP requests in scalable manner.

feedparser library fetches RSS feeds and processes them to client notifications.

BitReader (post, source) library is used to create messages to interact with Apple push notification service (APNs). The protocol is bit based protocol running directly over TCP/IP. Apple service has been designed to handle high volumes of traffic – it does not use anything like stateless HTTP to waste bandwidth.

Django models are used to store the state of each individual subscriber. Django’s ORM abstraction allows us to use the same middleware for small distributions (< 1000 clients, SQLite database) or big ones (millions of clients, MySQL database). The stored state information includes the subscriber id and the current badge number – the red circle on the app icon showing the count unread posts. When the application is launched, it can decrease its badge number by doing a HTTP call to the server.

Django settings are used to put together required certificates and whether the application is run in sandbox mode.

Walkthrough

There is a core IO loop, running in a separate process, called stream observer. This loops updates fetches RSS feeds’ status and passes updates to Tornado server over HTTP.  With this arrangement, any HTTP capable client can send push notifications.

Tornado handles incoming updates, updates the related subscribe status – how many unread notifications, etc. through exposed Django views. The notification is formatted according to the variables available on the subscriber mobile platform. In Apple’s case, the notification message gets title, badge, sound and a launch image. Payload is checked against hard 256 byte limit.

Then the payload is pushed to Apple servers over TCP/IP protocol. SSL certificaties needed.

A subscriber is registered  when the mobile application is launched. The application asks a subscriber id from Apple servers. Then, this subscriber id is delivered to our middleware over normal HTTP call.

The middleware also handles feedback service which gives you list of devices which have unsubscribed from your service. This way you can cut off notifications from unsubscribed clients. This is also done using BitReader and TCP/IP.

Future

The architecture is built so that different push backends can be included in the service. Android support is on the roadmap and we probably will have Blackberry and Meego support (when/if Nokia announces such a service).

We have currently tested this solution with RSS streams from WordPress and Plone.

We may release source code when it’s ready.

More info

• http://blog.boxedice.com/2009/07/10/how-to-build-an-apple-push-notification-provider-server-tutorial/

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

For Android, search for your application in Android Pit and copy-paste Android Market Link. Android Pit also provides QR code (2D barcode) for your application.

Note that URL shorteners (bit.ly) do not like market:// protocol, so you might need to use alternative http://market.android.com notation. This, however, prompts a dialog in the device “Would you like to open this URL in a browser or in Market Place?”

More info

• http://developer.android.com/guide/publishing/publishing.html#marketintent

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

Can't bind to local 8600 for debugger

To fix this do the following steps exactly in this order

• Close Eclipse
• Disconnect USB cable
• Kill all adb instances on the task manager of your computer
• Start Eclipse
• Connect USB cable
• Launch the application

If this does not help then make sure that you are using IPv4 address for localhost DNS loopback name. Edit /etc/hosts and comment out all IPv6 entries.

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

Vote here.

• Backpacking with Plone: how our team has redefined North Lapland travel industry with Plone sites. I promise to bring a genuine Lapland snowball with me and toss it to the first person asking a question.
• Mad about mobile: How to turn your Plone web site to a mobile site in 15 minutes (* the actual time varies on the status of PyPi and buildouting speed). If you can’t afford iPhone 4 yet, I promise the site will be 100% functional on a 40$ budget phones also.
• Culture of good documentation: Plone is hated because newcomers cannot grasp how to customize it. I belive this is an attitude problem, not with the newcomers, but with module authors. This manual is now 86k words. If we can make it to go up to 100k words in the conference I’ll buy a beer everyone who participates the effort.
• The world outside Plone: Why there exist 13 600 000 Joomla! sites, but 20 000 Plone sites? Why single Joomla! freelancer-entrepreneur can make 250k€ a year alone? How we could make Plone more succesfully by learning what others are doing? Our team has some cross-system experience and we want to give you the best bits what others are doing right (and Plone might be doing wrong).

Vote here in the case you missed the link above.

Ps. If I am too boring I promise I will do only PHP/Joomla! jobs in the future, so vote me now or I will forever hold my peace :<

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