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!

Comments

Awesome ... but

Hi David,

This is so awesome - I'm so impressed.
Now for the but - It would be nice if you show us how you created the mobile-scaffolding - I have no idea what you did there.Can we perhaps have a Part 2 section?

Cheers,

JJ

PS. Some points where I got stuck as I'm a bit of a beginner - it may help others:

  • What to add in the vhosts file?
  • It seems the REST endpoint you create can be named anything.
  • The hardest thing for me to figure out was how to run it: http://tutorial.local/mobile
  • How can I access it via my iphone or android phone over my local LAN? http://192.168.2.109/xxxxxx

questions

scaffolding is minimal mobile boilerplate + jquery + jquery mobile + a safe console.log. I just made it by including what I needed. It should be sufficient to just use the whole folder, and change script.js to suit your purposes.

VHosts are setup like this, so you just need to put them in the right dir:
http://httpd.apache.org/docs/2.0/vhosts/mass.html

I am using mod_vhost_alias for simplicity, but they offer a mod_rewrite solution, too.

So, make a symlink or dir named your IP address, and you can get to it from your phone. You can also use a DNS CNAME or dyndns to make a real host, and port-forward port 80 on your firewall t your dev machine.

You can name service endpoints anything, but I use one name so you have the right stuff in both places. If you use another, you will need to change the code.

Add new comment