I’ve been to a couple of dev days/hackathons sponsored by Twilio, but I’ve never had a chance to actually use Twilio in an app or project. Twilio is a voice-over-IP provider that lets you add voice capabilities to your web application or iOS mobile app. It also handles SMS sending and receiving, if you’re doing text messaging.

Twilio iPad Ubercart Drupal App

Twilio just came out with an iOS SDK, which I thought could be pretty interesting for their DrupalCon Developer Contest up in Denver. The first step I took was to research different ways to use Twilio in Drupal, and I ran across the voip modules – unfortunately, they were only released for Drupal 6 (beta 9), and when I tried out the Twilio integration, I ran into lots of little errors, and Twilio couldn’t connect to my Drupal 6 site. I need to go back and file some issues in the issue queue. I dropped the VOIP Drupal modules, and simply followed Twilio’s directions for integrating the iOS SDK with a standard PHP app, and then rolled that into a Drupal 6 module and dropped it on the server. This actually worked really well, and pretty quickly, I had a phone number I could call from my iPhone that would ring my iPad, and then my iPad could answer the call and I could have a nice, illuminating conversation with myself. Luckily no one walked in on me talking to myself and a few Apple devices. From what I understand, the Twilio SDK is coming to Android pretty soon, and I would imagine the Drupal integration would be exactly the same.

So I had a great little app thrown together for calling someone on an iPad through a telephone number, but that’s not the most exciting thing. Luckily Twilio had one of their developer evangelists stationed in a room at DrupalCon, so I picked his brain about what to add – he suggested CiviCRM, but I’d used that before and didn’t think I could get that integrated in 6 hours. I liked the idea, though, so I went with Ubercart, even though I’d never used it before. Ubercart was actually super easy to set up, so no real issues there. The only catch was trying to figure out how to integrate Ubercart with the iPad app – I ended up rolling my own integration with JSON, because I needed to search Ubercart orders by phone number, and I needed to pull the products that the order contained as well.

On the iPad side, I used the AFNetworking library, which makes asynchronous network calls extremely easy. I also created a user interface in the Apple’s XCode Interface Builder, which is more or less drag-and-drop for positioning UI elements.

That actually took a decent amount of time, simply to get all of the UI elements into place that a customer service rep might need from someone’s order. I wrote some Objective-C to set the properties on each of those UI elements from the JSON returned by my Drupal/Ubercart integration module, and the app now could show order information!

I read the email saying I was selected as a finalist for the Developer Contest around 8am on Wednesday, and I would need to do a 10 minute demo at 5pm – that was great, but I was giving a presentation on PhoneGap and Drupal at DrupalCon at 1pm, so I couldn’t really worry about the Developer contest demo until after that :)

There were two other great entrants at the Developer Contest – VuzzBox and Drupal SMS Server – so that was cool to see that there was such a wide variety of things you could do with Twilio and Drupal.

I came in second place, which I’m really happy with – I basically entered the contest so I would have something to keep me from going nuts worrying about my PhoneGap presentation before DrupalCon started! Now my plans are to figure out if there is an actual need or desire for this app with some of the e-commerce/shopping cart packages out there – if this sounds interesting to you, let me know!

GitHub Project URL - https://github.com/jefflinwood/Drupal-Map-App-for-iPhone-and-iPad

I like writing native iPhone and iPad apps with Objective-C. What I don’t like doing is writing the same code over and over again – it would be great to have a starting point that I can use again and again. I find myself reusing classes, open source libraries, and design patterns from previous apps when I build new ones.

What I’d like to do is share a starting point for creating iOS applications for Drupal sites running Services 3. Because Drupal can do many different things, this isn’t going to be a general-purpose Drupal client that you can just point to a Drupal server. Instead, it’s meant to be the first 20% of a mobile application project.

I’d like to get feedback from others about how they would use this, and what they would like to see in the project.

Overview

This project is an example iPhone/iPad application with a common code base that pulls location-based information about businesses from a Drupal 7 web site, displays it on a Google Map inside an iPhone or iPad app, and then lets you pick a business to display.

Credit to Open Source iOS Libraries used in this App

• AFNetworking - https://github.com/AFNetworking/AFNetworking - this great HTTP networking library makes async HTTP REST calls very easy to do. Much credit given here for all of the heavy lifting
• SVProgressHUD - https://github.com/samvermette/SVProgressHUD - the activity indicator that Apple should have included with iOS – works great for showing progress while downloading networked data

Drupal 7 Setup

I’d like to bundle all of the Drupal 7 functionality together into a Drupal “app” (different from a mobile app), or possibly just a feature. Basically, the modules you need are:

• Services 3
• ctools
• Geocoder
• Geofield
• Views
• Services Views Address Field

I added a REST endpoint with access to get nodes, and access to get views. I also created a content type called business with an image field, an address field, and a geofield. There’s a simple view that just returns all businesses, but I would like to improve that with proximity search. Unfortunately, the current proximity search solution for Geofield doesn’t seem to let me alter the origin point from the view’s arguments, so there is some work to be done there.

I used the Acquia Dev Desktop to build this Drupal 7 site locally, so I don’t have it up and running on a server just yet.

The URL for your Drupal site is in AppData.m – change the REST URL to match your site’s end point, and change the image URL to match your site’s image directory for large image thumbnails.

Thoughts/Questions/Improvements?

Send them to jlinwood@gmail.com

Or get in touch with me through my web site http://www.jefflinwood.com/ or

Also, I went ahead and did a screencast – most of it is setting up a a basic PhoneGap app in XCode 4 for iOS, with a little dash of Drupal+jQuery Mobile towards the end. Check that out on YouTube – I’d never done a screencast either!

Jeff Linwood – PhoneGap for Drupal

In my case, I wanted to create an app for keeping track of highpoints, which are the highest point in each US state (for instance, Mount Whitney in California). Users can “summit” a highpoint, and then share that on their Facebook Timeline through an iPhone app I’m working on:

To support the Open Graph Protocol, you’ll need Drupal to provide meta tags for Facebook to parse. There are several modules in this space, but the momentum appears to be with the D7 module Metatag. Metatag is great, but it does not support custom Open Graph types (in the November dev release, anyway), so I had to modify the Open Graph module to add my “highpointer:highpoint” Open Graph type, and it’s custom properties – state and height. I also had to add “fb:app_id” as a custom type, because I didn’t want to use the Drupal for Facebook module just yet for this project. The next step would be to make this more flexible.

You’ll need to create an app as a Facebook Developer, then configure its Open Graph type, action, and properties. Your iOS or Android app can make one call to the Facebook API to tell Facebook that your user has summited a highpoint, or read a book, or whatever your site does. Then, in their Facebook Timeline, your app’s Aggregation will show up:

Right now, the Facebook iOS SDK Single Sign On does not work with the code samples they provide and the current version of the Facebook mobile app and iOS 5. The workaround is to either authenticate through Mobile Safari to the mobile version of Facebook’s web site, or put up a Facebook login dialog box in your app for the user to authorize your app. I went with the login dialog box:

Toolbar icons and app background are from MediaLoot, which is a great graphic design resource, and well worth the money.

Some of the third party iPhone libraries I relied on:

• Facebook iOS SDK (https://github.com/facebook/facebook-ios-sdk)
• Drupal iOS SDK (https://github.com/workhabitinc/drupal-ios-sdk)
• SVProgressHUD – activity indicator (https://github.com/samvermette/SVProgressHUD)
• EGOCache – caching Drupal Views on device (https://github.com/enormego/EGOCache)
• AFNetworking – networked image downloading (https://github.com/AFNetworking/AFNetworking)

I’d love to hear your thoughts on Drupal as a back-end for mobile apps, and using PhoneGap with HTML5, CSS, and JavaScript to build mobile apps for Drupal.

The talk was recorded on video, and after it gets posted, I’ll put it up on this blog as well!

PhoneGap provides an easy way to make web pages into native mobile apps by wrapping HTML, CSS, and Javascript with an iPhone, Android, Windows Mobile, or Blackberry application. PhoneGap plugins provide services that web apps can’t get, such as interfacing with the phone’s camera.

For Drupal web sites, this means that if you add a mobile theme to your site, you can wrap your site with PhoneGap and have a mobile app. There’s certainly more you can do with mobile and PhoneGap, but that’s the easiest thing to do.

It gets a little trickier if you want to build an actual mobile application that isn’t just your Drupal site, re-skinned. You can certainly write JavaScript that talks to Drupal Services, but it’s pretty painful to write and debug. I wrote a PhoneGap plugin for Drupal for iOS that makes this much easier.

I just finished testing out the plugin on PhoneGap 1.1.0, the latest release, and it works great. I think the biggest frustration will be PhoneGap’s new whitelist feature for only allowing access to certain domains through your app. You will specifically have to add any domains that you retrieve content, images, JavaScript, or CSS from. For instance, code.jquery.com if you use an externally hosted jQuery.

I cleaned up the installation process for the Drupal Plugin by forking two open source projects that the Drupal Plugin for PhoneGap relies on: the Drupal IOS SDK  and ASI HTTP Request and making all of the changes that you previously needed to make yourself in my forks.

While working on the Building an app with jQuery Mobile, Phonegap, and Drupal 7 series of blog posts, I found myself writing JavaScript to access the Drupal Services API, using jQuery’s $.post and $.get.

This quickly became unwieldy, so I felt like I either had to create a JavaScript library for interacting with Drupal that I could leverage in the future, or to follow the lead of the PhoneGap team and create a Drupal plugin in Objective-C that exposed Drupal Services with an easy-to-use JavaScript API. Because Kyle Browning’s Drupal iOS SDK already has code for interacting with the Drupal Services API, I decided to create a PhoneGap plugin.

Creating a PhoneGap plugin for iOS was a little trickier than I thought, mostly because the plugin documentation isn’t up to date, and PhoneGap is changing quick! I extended the PGPlugin class and used PluginResult to return NSDictionary objects from the Drupal iOS SDK to JavaScript.

Also, getting a PhoneGap project running with the Drupal Plugin will be a pain with version 0.1! This is mostly because PhoneGap bundles libraries into its framework that the Drupal iOS SDK needs. I’d like to make this as painless as possible to use, so that it’s easy to get started.

I’m also only exposing four methods in the 0.1 version of the plugin – node.get, user.login, user.logout, and system.connect. I’m planning on adding all of the methods that the Drupal iOS SDK exposes.

Here’s some sample code for PhoneGap that interfaces with the Drupal plugin API:

window.plugins.drupal.login(username, password,
  successCallback,failureCallback)
window.plugins.drupal.nodeGet(1,successCallback,failureCallback);

I’d like to get some feedback on this project from anyone who’s using PhoneGap now with Drupal to see if this solves a lot of the problems with writing a lot of JavaScript to interface with Drupal. There are also some memory management issues with camera uploads in particular that I’d like to make sure aren’t as big a problem with the Drupal plugin.

Next Steps for this project:
=================
* Finish the node methods from the Drupal iOS SDK
* Add the file methods from the Drupal iOS SDK
* Add the view methods from the Drupal iOS SDK
* Reduce the number of steps needed to add the Drupal Plugin to a PhoneGap application
* Figure out a testing strategy
* Document the JavaScript API
* Create a sample application
* Build an Android version
* Update/test plugin with PhoneGap 1.0

With jQuery Mobile, to make buttons, we can use the <a href> tag with a data-role=”button” attribute. If you’re submitting a form, use the <button> tag instead – jQuery Mobile will format both of those the same way.  We’ll go ahead and add a button that doesn’t do anything yet – replace the contents of the <div data-role=”content”> tag with this:

<div data-role="content">             
  Welcome to the jQuery Mobile Demo App for Drupal!             
  <p/>             
  <a id="takePhotoButton" data-role="button">Take Photo</a>         
</div>

Run it in the iPhone Simulator, and it looks pretty good for us not having to do too much!

We’ll take advantage of jQuery’s bind method and PhoneGap’s deviceready event for our button functionality.

One gotcha you will probably run into is that you’re used to binding to the click event with jQuery on desktop browsers. With jQuery Mobile, we need to bind to the tap event for our button instead.

We’re using the PhoneGap Media Capture API with the camera – only one line of Javascript needed to bring up the camera on the phone.

navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 1});

You’ll need to provide functions to handle success and errors, along with PhoneGap’s CaptureImageOptions. In our case, we’re limiting the number of photos the user can take to one at a time.

Here’s the JavaScript we need to add to our index.html

<script>
        function captureSuccess(mediaFiles) {
            navigator.notification.alert('Success taking picture:');
        }
        function captureError(mediaFiles) {
            navigator.notification.alert('Error taking picture: ' + error.code);
        }
        $(document).bind("deviceready",function () {
            $("#takePhotoButton").bind("tap", function() {
                navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 1});
            });
        });
</script>

You won’t be able to see this run in the iPhone Simulator, because the iPhone Simulator doesn’t have a camera – instead, you’ll need to run it on an actual iPhone (or iPod Touch or iPad with a camera).

In my next post, we’ll cover how to upload images to Drupal 7 using Services 3.

This first post in the series will get you up and running with jQuery Mobile and PhoneGap on iOS with XCode 4. We’ll get to Drupal a little bit further down the road, so if you just want to do some apps that don’t connect to a server, this post should be useful.

I’m going to use Drupal 7 as the server for the app. Drupal 7 has a lot of functionality built in, but not web services, so you will need to install the Services 3 module.

To build the client application, first download and install the latest version of PhoneGap, following the directions for getting started here:

http://www.phonegap.com/start#ios-x4

For this post, I’m using XCode 4 as the IDE for iOS, so I linked to the specific directions for that platform. I’m also going to target iOS 4.x and above, using the PhoneGap Media Capture API to access the camera.

After running the PhoneGap installer, open XCode 4 and start a new project. You should see the PhoneGap template as one of your options:

Click Next on the Choose your template dialog

I’m going to use DrupalApp as my Product Name, and com.jefflinwood as my company identifier.

Click Next.

Now put your new project into a folder of your choice (for instance, under your home directory’s Documents), and let XCode 4 create a local git repository if it offers to.

Click Create

XCode 4 will do some processing, and then you should see your new DrupalApp project in Xcode.

Hit the Play button in the upper left hand corner of XCode to run your project in the iPhone Simulator. PhoneGap will load, but it won’t have any content to display. The first time you run your project, PhoneGap will actually create a www folder you can drag into XCode to get started. Here’s what the iPhone Simulator will look like:

Now that we have our XCode project set up, and we’ve run our project, we need to add the www folder to our project. With the current version of PhoneGap, this needs to be done manually – the template isn’t set up to import the www folder into the XCode project. Luckily, this is pretty easy.

Open up the DrupalApp project folder in Finder. It should look like this:

Drag the www folder onto your XCode DrupalApp Project, right between DrupalApp and PhoneGap.framework. This is so XCode will bundle the contents of the www folder with your app when it packages the app to run on the iPhone Simulator or on an iPhone, iPod Touch, or iPad.

Xcode will prompt you to create folder references for any added folders – choose this option if the Create groups option is selected.

Click Finish.

Now run the project again, (stopping the currently running DrupalApp if it is still running) and PhoneGap should let you know it’s working:

The next step is to download and add jQuery Mobile (from http://jquerymobile.com/download/) to your XCode project. We will bundle the CSS, Javascript, and images into our app to minimize download times.

In the finder, create a new folder under the www folder named css, and copy the jquery.mobile-1.0b1.min.css file into the css folder. Create another folder under the www folder named javascripts, and copy the jquery.mobile-1.0b1.min.js file into the javascripts folder. You’ll also need to download jQuery 1.6.2 from http://code.jquery.com/jquery-1.6.2.min.js into your javascripts folder.

Now open the index.html in your www folder so we can add the CSS file and the two Javascript files.

In the index.html element, add

<link rel="stylesheet" href="css/jquery.mobile-1.0b1.min.css"/>

and

<script type="text/javascript" charset="utf-8" src="javascripts/jquery-1.6.2.min.js"></script>

<script type="text/javascript" charset="utf-8" src="javascripts/jquery.mobile-1.0b1.min.js"></script>

Now that we have jQuery Mobile added to our project, go ahead and run the project – you shouldn’t see any difference in the output from the iPhone Simulator. This is because jQuery Mobile expects your content to be in <div> tags that correspond to individual pages in your mobile application. This is a little different from what you might be used to, where each page in a web application is a separate HTML file. To minimize download time, and to enable transition effects between pages, it’s best to set up as many of your pages in one HTML file as possible. You can link to other HTML files, of course, but you may lose your transitions between the two – and mobile users strart to expect to see those transitions.

I mentioned that jQuery Mobile wants its content structured into <div> tags instead of individual HTML pages. With those <div> tags, you’ll need to tell jQuery Mobile how your content is structured with the new HTML5 data-* attributes. For instance, <div data-role=”page”>…</div> wraps a mobile page, while <div data-role=”header”>…</div> is the header and <div data-role=”content”>…</div> is the content of the page.

We’re going to replace the contents of the <body> tag of our index.html with some content structured for jQuery Mobile:

<body>  	  
  <div data-role="page" id="home">         
    <div data-role="header">             
      <h1>Home</h1>                       
    </div>         
    <div data-role="content">
      Welcome to the jQuery Mobile Demo App for Drupal!         
    </div>     
  </div> 
</body>

Run the app in the iPhone Simulator:

In the next post, I’m going to show you how to use PhoneGap’s cross-platform features to take photos with your smartphone’s camera.

Drupal 7 makes an ideal back-end for mobile apps, because it already has everything you need for content authoring and permissions built-in. There isn’t any reason to write a lot of server-side code to add a forum or groups or blogs to your mobile app. Another advantage is the large Drupal ecosystem of consultancies, developers, books, training, and conferences that you can turn to for help.

Tablet Puppy Ipad App

The night before the birds-of-a-feather, I built an iPad app to show the Drupal IOS SDK in use with an almost out-of-the-box Drupal 7 site. Here’s the github repo for my iPad demo app for Drupal – I’m not going to submit it to the App Store :)

Configuring Drupal to be the back end for Mobile

Right out of the box, Drupal 7 isn’t going to work as a back-end for mobile apps. You will need to install Services 3 to make it possible for Drupal to act as a REST server for its content. You’ll also need to set up an endpoint URL for your REST service, and tell Drupal which resources to expose at that endpoint. This is all much easier in Drupal 7/Services 3 than it was in Drupal 6/Services 2 – if you are using Drupal 6, see my article on Using Drupal 6 with the REST Server.

Drupal Services Modules for REST Server

The first step is to install the modules you’ll need for Services 3:

Services 7.x-3.0-rc3 – requires the ctools 7.x module

To make Services work with the Drupal iOS SDK for iPhone app development, you’ll also need:

Rest Server PLIST 7.x-1.0 – enable rest_server and rest_server_plist

If you’re also planning to retrieve views from your mobile app (and that’s most of the power here) you’ll need to install the Views module and the Services_views module. Services_views exposes Views as a resource to Services

Views 7.x-3.0-beta3 – enable Views and Views UI

Services_views 7.x-1.x-dev – enable Services_views

To keep this focused, I’m not including directions on how to install modules here – read the Drupal.org handbook on installing modules.

In the next post, I’ll cover how to configure Services so you can use Drupal as the server side of a mobile solution!