A minimal mobile-aware web app with Python & cloud-based device detection

In this article we'll look at a how to make a minimal device-aware web application. The point of this article is not to demonstrate a useful application but rather to show just how little code is required to make an app that is fully device aware, and that can change its presentation entirely depending on the nature of the device accessing it.

To keep things simple and lightweight we'll use Python in conjunction with web.py and DeviceAtlas Personal (the cloud-based version of DeviceAtlas).

Web.py is a minimalist Python web framework that suits this example because it is simple and lightweight but the techniques demonstrated here will work equally well in any other web framework. You will need to install web.py if you want to run this example.

easy_install web.py

DeviceAtlas Personal is a device detection web service that requires no installation, configuration or maintenance – it just works. To make this easier to incorporate into a Python project I've attached a Python module to this article that wraps the web service into a convenience function that does everything you need.

Without further ado, here is the code:

import web
from DeviceAtlas import DaPersonal
 
urls = ( '/', 'index',)
app = web.application(urls, globals())
 
pageTemplate = '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test page</title></head><body><p>Hello, %s user</p><p>%s</p></body></html>'
 
class index:
    def GET(self):
        props = DaPersonal.get_device_properties(web.ctx.env['HTTP_USER_AGENT'])
        if props.has_key('mobileDevice') and props['mobileDevice']:
            return pageTemplate % ('mobile', props)
        else:
            return pageTemplate % ('sedentary', '')
 
if __name__ == "__main__":
    app.run()

Run the server as follows:

python test_app.py

Now, accessing the URL http://localhost:8080/ will result in two different outputs:

Desktop browser

Hello, sedentary user

Mobile browser

Hello, mobile user

{u'mobileDevice': True, u'isBrowser': False, u'displayWidth': 320, u'displayHeight': 480, '_source': 'cache'}

Notes

Caching – DeviceAtlas Personal is best used in conjunction with local caching to avoid the delay incurred by the round-trip to our servers. For new devices that have not been seen before and hence are not in the cache, the detection time is typically in the order of 500ms; for previously-seen (cached) devices it is unmeasurably small (less than 1ms). Caching is enabled by default in the module but you will need to create the appropriate directory for it (typically /tmp/DeviceAtlasCache).
DeviceAtlas Personal – this is a preview version of the service, and right now we make no guarantees about stability, performance, or uptime.
Deployment &ndash this application can be run as a standalone application that implements its own HTTP stack, or run as a CGI, or WSGI, or mod_python application with Apache / Lighttpd / nginx

Closing Comments

This is an extremely simple application, clearly, but it nonetheless demonstrates a couple of key points:

Device adaptation need not be complex. In this application cloud-based detection has completely removed this burden, and yet is accurate and very fast
Adapting websites do not necessarily require complex frameworks and lots of code

Attachment	Size
test_app.zip	5.06 KB

Posted by ronan 49 weeks ago