Build a Mobile and Desktop-Friendly Application in Django in 15 Minutes

This article quickly walks you through the process of setting up an absolutely minimal mobile- and desktop-friendly web application using the Django framework. This particular framework works very well with mobile thanks to the way its templates are structured and makes for a good choice for new web-based applications. This article assumes that you have python 2.3 or later and SVN already installed and working.

First we need to download the latest Django:


~$ wget http://www.djangoproject.com/download/1.0.2/tarball/
~$ tar xzvf Django-1.0.2-final.tar.gz
~$ cd Django-1.0.2-final
~$ sudo python setup.py install

Install sqlite (often not included in Linux distributions):


~$ sudo apt-get install python-sqlite

Create a new project:


~$ django-admin.py startproject mobapp

(django-admin.py should now be in path). This should give you a directory structure like the following:

mobapp/
__init__.py
manage.py
settings.py
urls.py

Edit settings.py to use sqlite, and pick a db name

Sqlite is probably the easiest way to get started but if you want to use MySQL instead it requires just the addition of the DB name and authentication credentials to work. Now you need to write the relevant initial data into the DB (this is the data the Django uses for the Administration interface):

~$ cd mobapp
~/mobapp$ ./manage.py syncdb

You will be asked if you want to create a superuser. This is recommended (to get all the cool Django DB admin stuff). Right now the application is ready to run, but does absolutely nothing. Remedy this by typing the following:


~/mobapp$ ./manage.py startapp pub

This command creates a new "app" within the project. This should create a new directory called pub with some files in it, something like this:

pub/
__init__.py
models.py
views.py

Now open up the settings.py and edit it to make it aware of the new app:

Now to develop the actual app. For the sake of simplicity we’ll leave the models.py alone for now — this application will not use any database functionality.

Edit pub/views.py — this is where the guts of the code will reside. Paste in the following code:

views.py

This code requires 2 templates, one for mobile users, the other for desktop users. We need to create these templates and put them in a directory that Django knows about.


~/mobapp$ mkdir pub/templates

Create two new files in this directory, called m_index.html and index.html. You can put the following content in these files:

index.html

m_index.html

Now we need to let Django know where the templates for the project are. Open settings.py and add a line pointing to the relevant directory e.g.

Now that our index method is ready in views.py, we need to point a URL at it. Add the following line to urls.py

This pattern tells Django to point any blank URL at the index method in views.py e.g.

urls.py

And that’s it. Now if you start the server you have a minimal mobile- and desktop-friendly app:


~/mobapp$ ./manage.py runserver
Validating models...
0 errors found
Django version 1.0.2 final, using settings 'mobapp.settings'
Development server is running at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

If you now go to http://localhost:8000/ with your browser you should see the following page:

desktop view

Visit the same URL with a mobile device and you will see something like this:

mobile view

Discussion

This is an absolutely minimal Django application with a very modest feature set. Its main purpose is to demonstrate an approach to building a Django application that can simultaneously serve mobile and desktop users rather than show off any of Django’s great features. Please note that the device detection method used in this article is very basic, and really serves only as a way to differentiate mobile from desktop users rather than as a way to fine-tune the experience to the end device. To build a really consumer-friendly application you should use a more sophisticated device detection technology such as DeviceAtlas, which works fine with Django. Note that the device detection code used in this example is modelled on Andy Moore‘s PHP code.

This code for this application can be downloaded from the link below (mobapp.zip).

Exclusive tips, how-tos, news and comment

Receive monthly updates on the world of mobile dev.

Other Afilias Products

Try the world’s leading device detection solution at
DeviceAtlas - Try the world’s leading mobile device detection solution

Create amazing web presences on any screen with
goMobi - Create amazing web presences on any screen.

Evaluate your websites’ mobile readiness with
mobiReady - Evaluate your websites’ mobile readiness.

© 2017 Afilias Technologies Ltd. All rights reserved.

This is a website of Afilias Technologies Ltd, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland