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
Aaron made a mobile app in 4.5 minutes!
Fri, 05/11/2012 - 17:09
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
Thu, 06/28/2012 - 01:33
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.
Thu, 09/04/2014 - 10:54
Hi David,
when you are using services to the drupal backend are you using session state full service call or you are using drupal as resource owner with the token without cookie store ? ..
If you have experience with the last one can you provide more information how you did it ?
My question regarding the rest services call in full session mode is what I need to put as the domain parameter in Set-Cookie header if I want to store cookie on the mobile device ?
Thanks
Fri, 09/05/2014 - 22:31
Sessions are used by Drupal to track user-state, so it's all pretty effortless (using PHP's session stuff.) The REST interface works the same way. It's just a simpler interface to all the Drupal, stuff that serves up the raw data.
Tue, 09/09/2014 - 08:17
Actually I'm looking the way how to avoid cookie control on the development environment. I'm using the ripple emulator for faster emulation and development, the main problem is that I need to set up cookies after login for further REST communication with server if I dont want to get 403 forbidden response. I can't read and setup the cookies because browser looks that as a XSS attack so the only option is to disable cookies in development mode or try to avoid security in chrome and accept the cookies (I already remove HttpOnly param from response header). Do you had some experience with this kind of problems on local environment and mobile browser debugging ?
Wed, 09/10/2014 - 08:40
I haven't used Ripple, so I don't know how it affects the same-origin policy or cookie access.
But, we have had a lot of success lately with OAuth 2.0, and your question inspired me to write a new post on this topic!
Wed, 09/10/2014 - 05:07
Cookies are the way Drupal (and PHP) maintains session, and it's probably the best way to accomplish this. I think the issue is that you are setting up a non-standard environment using iframes (and requiring XSS) that would not exist in production, and requires all kinds of funny considerations that aren't part of actually deploying. Ripple isn't really doing too much for you in this situation, and I would recommend just hosting your mobile code on the same server until you get it deployed in a mobile (phonegap, etc) app that doesn't worry about this on the client-side. It's the simplest and fastest solution to accomplish your goals.
Wed, 09/10/2014 - 14:09
Dylan's comment wasn't here when I typed that. Open auth is a fine way to solve the issue, if it's really something you need, but using a cross-site Iframe (ripple) when it's not really needed is adding arbitrary complexity to your solution.
Thu, 01/21/2016 - 12:37
Howdy Aaron, it's been a few years since this mobile Drupal post came out, yet the idea behind for building fast mobile apps remains. I'm wondering, have you had a chance to get into Drupal 8 mobile for apps? Some of our clients are starting to ask for them or wonder why to get into mobile with Drupal. To help them, I share a resource that might useful to you as well. It's at https://axelerant.com/not-magic-drupal-8-mobile-global-reach/?utm_campa…. Do let me know if it helps or not.
Sat, 04/07/2012 - 01:10