DrupalCon Chicago

Creating an iPhone App for a Drupal Website

Wayne Eaker — Tue, 10 May 2011 12:00:00 +0000

Creating an iPhone App for a Drupal Website

Recently, Zengenuity released the LA2M to Go iPhone app, a companion to the Lunch Ann Arbor Marketing website. The LA2M website is one we built on Drupal 6, and it uses custom content types, Views and Imagecache for displaying upcoming and archived event information for the group. In creating our app, I wanted to build a system to synchronize the mobile device with the website, since event information changes on at least a weekly basis. It took a lot of research and testing various techniques (many of which of which didn’t end up working), but finally I worked out how to have the app to pull all its information automatically from the Drupal site. I hope that by publishing this blog post, I can speed up this process for you, and save you some frustration. There isn’t room here to go into every detail, but I’ll discuss the major frameworks I used, and I’ll point out some important issues that wasted a lot of my time.

The Titanium Mobile Framework

LA2M to Go is built with the Titanium Mobile Framework by Appcelerator. The Titanium SDK is free, and it allows you to write native iPhone apps in web developer friendly Javascript, instead of Objective-C. It also allows you to compile the same source code as a native Android app, though this is something I haven’t tried yet. To get started with Titanium, download the SDK here. This will provide you with the Titanium Developer application you need to compile your app. You will also need to have developer tools for the target mobile platform you plan to work with. So, if you are writing an iPhone app, you need to have an Apple iOS developer account, and download XCode and the iOS SDK from Apple. Android developers will need to get the Android SDK from Google.

When coding for Titanium, you have to use your own text editor or IDE, and then load your project into the Titanium Developer application. Titanium-based apps are compiled in a two-step process. First, your code is rewritten by Titanium Developer as native iPhone or Android source code. Then, command line tools provided by the iPhone and Android SDKs are used to compile the native code and install it into the simulator or directly onto your mobile device.

One word of warning: This process absolutely sucks. It’s the worst compilation and debugging system I’ve ever experienced. When working with Titanium, be prepared to write a lot of output log statements, because that’s how you’ll be doing much of your debugging. Also, the Titanium platform is seriously lacking in documentation, and the docs that do exist are difficult to use and search. There are very few example code snippets in the API docs, which means you need to search the developer forums. In the forums, code is often wrong or out-of-date, as there’s no way to know which version of the Titanium API it’s designed for. (The API has changed significantly from its initial release.) Appcelerator recently purchased Aptana, the makers of the excellent Aptana Studio IDE. So, I’m praying they ditch the Titanium Developer application for a more fully-featured IDE, with debugging tools and built-in documentation. This would help developers immensely. (Update (5/17/11): They have now done exactly this: https://developer.appcelerator.com/blog/2011/05/major-titanium-updates.html)

That said, I’ve written code in Objective-C with XCode before, and while XCode has both excellent debugging features and documentation, the speed at which you I create robust apps with Titanium, in a language that is more familiar to me as a web developer, means I’ll coming to back to it for my next app, despite its failings.

The DrupalCon Chicago App

If you were at DrupalCon Chicago, you probably used the conference app that was available for iPhone and Android. That app was created in Titanium, by the folks at Palantir. Fortunately for all of us developing Drupal-connected apps, they have made the app’s source code available, and their blog post about it is very informative.

There isn’t a lot of technical documentation about how expand or change the app, but after spending some time with it, I was able to figure out the key details:

Schema Definitions

The app is designed to import Drupal nodes and store them in an SQLite database on the device. This way the app can be used offline. In the code, there is a schema definition designed for the DrupalCon event node type in the Resources/drupalcon/entity.js file. (You will also find a schema for Drupal.org users in there, too.) If you are building a new app from this source code, you need to modify their schema to match whatever fields your content types have. They have chosen to call their event schema “node”, but you can rename this to whatever you want, and add additional schemas for more types. If you are adding new schema types (or changing the name of them), you need to make entries for them in the Resources/drupal/entity.js file. There’s a section at the top that starts with

main: {
...
types {
[a list of types and primary keys is here]

Add your new schema names to this list, following the pattern of the others in that section.

One thing I found useful when modifying the schema were the two commented out lines in app.js that clear the DB on every app launch.

//Drupal.entity.db('main', 'node').initializeSchema();
//Drupal.entity.db('main', 'user').initializeSchema();

These obviously need to be commented out in production, but are useful when changing the schema. (Adjust the parameters to fit your schema names.) Another helpful tool you will want to have is some sort of SQLite database browser. I ended up using the SQLite Manager Firefox extension, though, I didn’t especially enjoy it. It works, but it’s kind of clunky. If you are building and iPhone app and working in the simulator, the SQLite database is difficult to find. Here’s where it’s at:

/Users/[your_username]/Library/Application Support/iPhone Simulator/[sdk_version]/Applications/[application_guid]/Library/Application Support/database/main.sql

Yeah...it’s really buried down there. One of those folders is hidden too, so you will not find that database file with Finder. You just have to know where it is.

Renderers

If you look in Resources/drupalcon/drupalcon.js, you will see a series of sections that start like this:

DrupalCon.renderers.session = function(session) {

These sections define “renderers” for different entities that you have in the SQLite database. They don’t do anything on their own. You have to call it yourself after you query the DB. But, when you look around in the app code, you’ll see that having a function that renders an SQLite database row as a TableViewRow is very handy. It’s sort of like defining a theme template for a particular node type. If you have added fields and types to the database schema, you will need to update the renderers to display your new fields.

Windows

In Resources/windows are a bunch of files that define the various screens of the app. I don’t have space in this post to go through them all, but if you look at each one, you’ll get an idea of what you need to do to make similar windows that match your project. Most of them are TableViews, which is often what you want. There’s also a MapDetailWindow that shows a static image, and other windows to render HTML content. Be sure to include any new window files you create in your Resources/app.js file. (There’s a section in it with all the includes in a list.) Also, you need to add your new windows to the app’s tab group. That can be done by following the pattern in Resources/main.js.

Connecting the App to Drupal

When I started this project, I expected to use the Services module to access the Drupal data over JSON. My plan was to create a view for each content type that I needed to download and expose those views with the Views Service module. However, when trying this approach, I came across a big limitation of Views Service. This module only exposes the Views data that is directly returned by the query. It completely skips the normal rendering step of Views. This means if you want to include the URL for a specific Imagecache-processed version of an image, it can’t be done with Views Service. You also can’t rewrite the output of fields to combine two fields into one. Pretty much everything that is awesome about Views you can’t do with Views Service.

Views Datasource to the rescue! The day after I hit this limitation, Palantir released their code for their DrupalCon app. In their post, you will see they reference the Views Datasource module as an alternative to Services. Views Datasource allows you to expose Views as JSON, and it DOES send the output through the normal Views rendering engine. So, this means you can rewrite fields, get Imagecache urls, change field labels, and probably re-theme fields if you need to, though I didn’t try this last one. With this module, I was able to get exactly the JSON output I needed to download data into the app. I’m not going to go into a full detailed explanation, because actually, if you know how to use Views, it’s pretty straightforward. It works exactly like you expect it to.

Putting Everything Together

Once I had the JSON-formatted view on the Drupal site and the schemas defined in my application, everything else was just a matter of getting of the user experience and workflow that I wanted. (Ever app is different, so you’ll have to study the Titanium API and figure out what works for your project.) After only a couple weeks of development, I was able to go from conception to launching LA2M to Go in the App Store. While it was frustrating at times deciphering both the Titanium debug output and the DrupalCon app’s design, I’m really happy with the outcome. I’ll definitely use both of these technologies in future for Drupal-connected iPhone apps, and hopefully, this post will make it a little less frustrating for you to do the same.

Useful Resources

Getting Started with Titanium Mobile Platform

How to Create a Pull-to-Refresh Table in Titanium - Everyone loves this UI control.

Drupal-iOS SDK - A separate project that connects an iPhone app to a Drupal site using only native code in XCode. Have not tried this one out.

Wayne EakerMay 10, 2011

The Week in Drupal: March 18, 2011

Wayne Eaker — Sat, 19 Mar 2011 02:00:04 +0000

The Week in Drupal: March 18, 2011

After taking a week off for DrupalCon Chicago, here'a s look back at interesting modules, articles and other Drupal news of March 5 - March 18, 2011.

Drupal News

Martha Stewart Adds a Dash of Drupal

Great Posts and Tutorials This Week

What's New in Drush 4

Introducing Workbench: A New Approach to Managing Content Management

Boosting Solr Search Results at Query Time

Optimizing Javascript and CSS Files in Drupal

Theming individual CCK fields with templates and preprocess functions

Interesting New Modules and Themes

Views Items Per Page - Adds a selector for the number of rows to display in Views.

Webform Checkout - Link the Webform module to Ubercart.

Role Context - Give users a different role depending where in the site they are.

Javascript Loader - Use various libraries to load JS files asynchronously.

UC PDF Invoice - Generate a PDF invoice for Ubercart orders.

TwitterMiner - Query and store tweets. Output them with Views.

Copyright Notice - Add a configurable copyright notice to your footer.

BlackBoard Single Sign-on

Mobile jQuery Theme

Wayne EakerMarch 18, 2011

Drupal DrupalCon Chicago Drush Solr Twitter Ubercart Views module Webform module

The Week in Drupal: March 4, 2011

Wayne Eaker — Fri, 04 Mar 2011 10:30:00 +0000

The Week in Drupal: March 4, 2011

A look at interesting new modules, articles and other Drupal news from February 25 - March 4, 2011.

Drupal News

3 Days to DrupalCon Chicago - See you there!

VOIP Drupal Released

Great Posts and Tutorials This Week

Stored Procedures and Drupal 7

Interesting New Modules and Themes

Views Contextual Displays - Display different fields in Views based on context.

!&# Content - Pull content from Drupal into CiviCRM Dashlets.

If Preset - Adds conditionals to Imagecache actions.

WYSIWYG Fields - Add any CCK field to a WYSIWYG editor as in insert button. It's a generic form of WYSIWYG Imagefield

Recently Viewed - Show a block with recently viewed nodes. Includes Ubercart-powered Recently Viewed Products.

Audio Converter - Convert CCK audio fields to MP3 format automatically using FFMPEG.

WYSIWYG Button Order - Reorder buttons in editors enabled by the WYSIWYG module.

Computed Field Tools - Re-calculate CCK Computed Field fields in a batch.

OG Features - Allows you disabled certain features of Organic Groups on a per-group basis. For example, disabling submitting certain content types.

More Comments - Replaces the normal comment pager with a More button that loads comments with AJAX.

MuchoMenu - A "mega menus" implementation based on Panels.

Ubercart Order Node - Link Ubercart orders to nodes so you can extend them with CCK.

Fusion Commons - Fusion base theme for Drupal Commons.

Wayne EakerMarch 4, 2011

CCK module CiviCRM Drupal DrupalCon Chicago Imagecache module Organic Groups module Ubercart Views module WYSIWYG module

The Week in Drupal: February 25, 2011

Wayne Eaker — Fri, 25 Feb 2011 22:16:48 +0000

The Week in Drupal: February 25, 2011

A look at interesting new modules, articles and other Drupal news from February 18 - 25, 2011.

Drupal News

One Week to DrupalCon Chicago!

SBA.gov Using Drupal

Great Posts and Tutorials This Week

Lullabot Podcast: Building GRAMMY.com - Varnish, APC, Memcache, etc.

Unveiling the Drupal Commerce Beta

How the Drupal.org Home Page Map Works

Interesting New Modules

Panelizer - Attach Panels to nodes on an individual basis.

Context Rules - Integrate the Context module with Rules.

Advanced Gallery - Yet another image gallery system for Drupal. I like the idea behind this one, though. Nodereferences to nodes with Imagefield CCK fields.

Advanced CSS/JS Aggregation - Adds several features beyond the default aggregation options.

Multiple Exposed Filter - Add new filters to a view dynamically.

Node Theme Switcher - Use a CCK field to switch your theme per node.

Atrium Glossary - Add a glossary to Open Atrium.

Wayne EakerFebruary 25, 2011

Context module Drupal Drupal Commerce DrupalCon Chicago High Performance Image Galleries Open Atrium Panels module Rules module Theming

The Week in Drupal: February 4, 2011

Wayne Eaker — Fri, 04 Feb 2011 15:07:42 +0000

The Week in Drupal: February 4, 2011

A look at interesting new modules, articles and other Drupal news from January 28 - February 4, 2011.

Drupal News

DrupalCon Chicago Session Schedule Annouced

Great Posts and Tutorials This Week

Using XSS (Cross site scripting) to steal access

Beautiful, Easy Maps with in Drupal with Views and Mapstraction

Integrating Webform with Paypal

Creating new field formatters in Drupal 7

Drupal Coding Speed Tips, using an IDE

Using Render Arrays in Drupal 7

Interesting New Modules

Hashtags - Allows Twitter-style #hashtag tagging in your node content. Makes the hashtags links, and integrates with the standard taxonomy system.

Fancy Insert - Provides a nicer interface for inserting Imagefield images into node content with the Insert module.

Taxonomy Additions - Extra taxonomy features and improved Views integration for vocabularies and terms.

Atrium Leads - Add a "Business Lead" content type to Open Atrium to make it function like a sales CRM.

Media Pool - Allow a randomized default for Imagefields when an image hasn't been uploaded.

Dummy Image - Creates dummy placeholder images in nodes for missing Imagecache images. This is helpful if you are working on a development copy of a site and don't have all the uploaded images from the production server.

Wayne EakerFebruary 4, 2011

Drupal DrupalCon Chicago Imagecache module Imagefield module Location module Maps Open Atrium Programming Security Taxonomy module Webform module

The Week in Drupal: January 14, 2011

Wayne Eaker — Fri, 14 Jan 2011 11:00:00 +0000

The Week in Drupal: January 14, 2011

A look at interesting new modules, articles and other Drupal news from January 7 - 14, 2011.

Drupal News

U.S. House of Representatives Using Drupal

Pro Drupal Development, Third Edition Arrives

Only Eight Weeks Until DrupalCon Chicago - Buy Your Early Bird Ticket Now!

Great Posts and Tutorials This Week

Five reasons code-driven development and Features are good for you

Mobile Drupal Websites - A Four Part Series (Part 1, Part 2, Part 3, Part 4)

Report on Content Management Systems Powering Foundation Websites

Quick Peek at Drush 4

Interesting New Modules

404 Navigation - Show primary links and secondary links on your 404 error pages.

Webform Alternative UI - Drupal Gardens' custom Webform UI has been released for all.

UC Partial Payment - Accept partial payments at checkout with Ubercart.

Cache Backport (D7 to D6) - Use multiple caching systems on the same Drupal 6 site, like you can with Drupal 7.

Processing.js - Render Processing.js data visualization code with an input filter.

Wayne EakerJanuary 14, 2011

Caching Drupal DrupalCon Chicago Drush Features module Javascript Mobile Ubercart Webform module

The Week in Drupal: January 7, 2011

Wayne Eaker — Fri, 07 Jan 2011 11:00:00 +0000

The Week in Drupal: January 7, 2011

A look at interesting new modules, articles and other Drupal news from January 1 - 7, 2011.

Drupal News

Drupal 7 Released!

Session Selections Announced for DrupalCon Chicago

Great Posts and Tutorials This Week

8 New Drupal 7 Changes to Love

Your guide rocking your Drupal 7 Release Party

A List of Drupal 7 Release Party Locations

Interesting New Modules and Themes

Advanced Form - Make Drupal node forms simple by hiding administrative or other fields until an "Advanced" button is pressed. This could be handy.

jEditable - Inline editing for CCK fields.

SheetNode 1.5 Released: Now without the Java - Spreadsheet editing for your site.

Code Per Node - Inject javascript or CSS on a per-node basis.

Wayne EakerJanuary 7, 2011

CCK module Drupal Drupal 7 DrupalCon Chicago High Performance Javascript

The Week in Drupal: December 10, 2010

Wayne Eaker — Fri, 10 Dec 2010 15:28:12 +0000

The Week in Drupal: December 10, 2010

A look at interesting new modules, articles and other Drupal news of this week.

Drupal News

Drupal 7 Release Candidate 2 (RC2) is Out!

DrupalCon Chicago Session Voting is Now Open

Great Posts and Tutorials This Week

Improve Javascript Loading with Head JS - Includes code for Drupal 6 and 7. (D6 code in comments)

7 Ways to Scale the Learning Brick Wall of Drupal - A good list of resources. We also do Drupal Training in Michigan, in addition to the trainers listed.

Interesting New Modules

Media: Facebook - Embed Facebook images into content.

Botcha Spam Prevention - Adds extra hidden fields to forms that trick spam bots into to filling them out, at which point they are blocked.

SlideDeck for Views - SlideDeck is a slick accordion-style slideshow jQuery plugin. This module integrates it with Views.

Feeds: Youtube - Import Youtube videos to your site with the Feeds module.

Production Check and Production Monitor - Like a pre-launch checklist. Checks SEO, error logging and other important settings to make sure they are ready to go live.

Field Injector - Display CCK fields inside other fields, like putting an Imagefield image after the first paragraph. (Drupal 7 only)

Ubercart Option Categories - Group your Ubercart dropdown attributes into categories.

Comment Registration - Register new users inline with adding their first comment.

Panels Regions - Remove certain regions in specific Panels variants.

Wayne EakerDecember 10, 2010

CCK module Comment module Drupal Drupal 7 DrupalCon Chicago Facebook Feeds module jQuery Panels module Spam Ubercart Views module

The Week in Drupal: November 5, 2010

Wayne Eaker — Fri, 05 Nov 2010 15:04:14 +0000

The Week in Drupal: November 5, 2010

A look at interesting new modules, articles and other Drupal news of this week.

Drupal News

DrupalCon Chicago Registration and Call for Speakers is Open!

Great Posts and Tutorials This Week

Deploying content on an already existing site - including the deployment module after the fact.

Advanced Voting with the Decisions Drupal Module - Building approval and ranked-choice style voting systems on Drupal.

Drupal: Exposed - Webchick shows some quick core hacks (gasp!) that can really help with debugging and theming.

Panels 3.8 and Panel Fields - Damn...now you can put panels inside your views?! Amazing.

Interesting New Modules

Browser class - Add body classes to your page depending on browser and platform.

Context UserAgent - Similar to Browser class but designed for the Context module.

Giga Menu - A Mega-menu style menu module. Put more content in your dropdown menus.

Authorize.Net and PayPal modules for the Payment API - This looks like it could be handy for simple e-commerce sites. Ones that don't need the overhead of Ubercart.

Feeds Hacks - Add-ons for the Feeds module.

VideoJS - An HTML5 video player. Make your Drupal site iPad friendly.

Sign Here - A jQuery-based CCK field for taking signatures on an iPad or similar device. Drupal POS, anyone?

Wayne EakerNovember 5, 2010

Decisions Drupal Module Deploy module Drupal Drupal 7 DrupalCon Chicago E-Commerce HTML5 Panels module Views module