Using Drupal to Make a Super Fast Mobile App

Let's imagine a scenario where you want a super-fast mobile app that uses a Drupal backend from an existing full site. Some people choose to use responsive design, and a "mobile-enabled" theme to accomplish this goal. It's not nearly as fast as a native app (especially on a phone with a bad connection) but it does work, and it looks good on mobile, using your existing data. It's faster to get everything together and troubleshoot, and in general, works quite well for a lot of apps.

That's cool, but it runs too slow on my iPhone

Here is a way to solve that problem. Using a Cache Manifest you can make most of your site work offline (client-stored), except the actual data. You even have the option of bundling the whole thing into PhoneGap app, with only live data being pulled from your Drupal site (less data to download, etc.) Using Phonegap allows you to do fancy stuff like take pictures, get geo-data, etc. A by-product of this technique, even without PhoneGap, is that you can get a really mobile-specific version of your site up and running, at least visually, very fast. Let's make a basic example, in about 10 minutes.

Fastest website-maker in the West

My local webserver has a vhosts VirtualRoot setup in ~/Sites/SITENAME/webroot/. So, just if yours isn't that way, just pretend it is, in the following. I am going to use drush (version 5) to get a site-scaffolding made, pretty quick (in terminal):

mkdir ~/Sites/tutorial/
cd ~/Sites/tutorial/
drush dl
mv drupal-7* webroot
cd webroot
drush site-install -y --db-url=mysql://root:root@localhost/tutorial --account-name='developer' --account-pass='root' --account-mail='konsumer@metaltoad.com' --site-mail='konsumer@metaltoad.com' --site-name='Services Tutorial' standard
drush dl services ctools devel
curl http://spyc.googlecode.com/svn/trunk/spyc.php -o sites/all/modules/services/servers/rest_server/lib/spyc.php
drush -y en services rest_server devel devel_generate
drush generate-content 50 10

Blammo! You made a website.

Make sure to set your db user/password and your own account details in the 'drush site-install' line. These instructions are on my Mac. Your commands will differ lots, if you are using Windows, and maybe a little if you are using Linux.

For my vhost setup, I did this to enable clean-urls on http://tutorial.local/ :

sudo sh -c 'echo "\n127.0.0.1 tutorial.local\n" >> /etc/hosts'
echo "
 
RewriteBase /
 
" >> .htaccess

Getting mobile on this app

Go visit your local Drupal site, login with your developer credentials (developer/root, if you used the above), and setup Services at http://tutorial.local/admin/structure/services. Add a REST endpoint at "services/rest", and enable "Session authentication". When done, click "Edit Resources" and enable them all.

Next we will add our mobile-scaffolding. To get it setup fast, download this file. Extract it to your Drupal webroot. It's just jquery-mobile and some other nice stuff. It's based on HTML5 boilerplate, but trimmed down for mobile-only dev, using jquery-mobile. I added a "welcome" page that is a node-list, and when you click on one, it loads the node. Have a look at index.html + script.js for how it works. Painfully simple. It doesn't even seem reasonable that you can get a native-looking app that grabs your content in so few lines of code.

With all this leisure and fortune, what will I have to stress about?

This is pretty simplistic. it just provides a list of nodes, and lets you read them. It's cool that it's so tiny, but more complicated stuff gets a bit hairy. I am working on a framework that will make this all even easier, and let you get back to all your free time and fortune.

Want more awesome content like this? Subscribe to our newsletter!