Categories
Drupal Planet iPhone Development Talks

Drupal and Mobile Video – Dallas Drupal Camp 2013 – iPhone App and Presentation

Earlier this month, I spoke at the Dallas Drupal Camp about Drupal and mobile video. I’ve worked on a couple of projects for clients this year and last year that involved uploading and displaying videos from a mobile app on iOS and Android. Some of them have used Drupal for the server, others haven’t used Drupal at all. Mobile video can only be done through a native app (or PhoneGap), as HTML5 hasn’t provided support for uploading video through input types yet.

One of the obstacles to using Drupal as a video platform is getting everything set up – even though there are plenty of video modules, it can be tough to set up the Video module with Zencoder as a transcoding solution and Amazon S3 for storage and content distribution. Making this a lot easier if you are either starting from scratch or building out a proof of concept/minimum viable product is Octopus Video (http://octopusvideo.org/), a Drupal 7 distribution developed by Heidi Software and Symphony Themes. In effect, it’s a private YouTube distribution, which you can then extend using normal Drupal 7 modules and views to become a corporate training video archive, the back-end for a consumer-facing mobile app for cat videos, or whatever you want.

I gave a lightning talk about Octopus Video to the Austin Drupal User’s Group, and everyone there seemed pretty enthusiastic about the topic, so I decided to take it a step further and give a talk on it at the Dallas Drupal Camp this year.

In addition to sharing a lot of tips and tricks I learned from using Octopus Video as the server for a video-based mobile app prototype, I also created an open source iPhone app (Apache-style license) to show off some of the things you can easily do – upload video, display a list of videos from a Drupal video, and then play back videos stored on Amazon S3.

The GitHub repository for the open source iPhone app is here:

https://github.com/jefflinwood/DrupalMobileVideoAppIOS

This was a quick demonstration project for the Dallas Drupal camp, not extracted from a commercial project, so it’s missing a lot of the extras that would make it a polished app. I’ve added a few of them as issues to the GitHub project, and if I can find some more free time, I’d like to keep moving forward with it.

Categories
Android Drupal Planet Training

Training Class Recap – Building your first Android App for Drupal – SandCamp 2013

Recently, I had the opportunity to provide training on building Android apps at SandCamp in San Diego! I was excited to teach my first training class at a Drupal camp, because I like to teach, and I like Drupal. We built this app from scratch:

SandCampAndroidApp

Why Android apps? First, Android is open source, and the developer tools run on Windows, Mac, or Linux. Second, you can run the app you create in the class on your Android phone or tablet just by plugging it in, changing a simple setting on the phone, and then clicking “Play” in the Android Developer Tools. Third, a lot of the concepts for native mobile app development with Drupal (asynchronous networking, threads, list views, JSON/REST) are shared between the Android, iPhone/iPad, BlackBerry 10, and Windows Phone platforms.

I chose to teach how to build a Android 2.x style of application for this class – it was an intro class, with no expectations of knowing anything about app development or Java. Android 4 (Ice Cream Sandwich) has many new components, including the Action Bar, and Fragments, but they don’t work out of the box on Android 2.x, which is still running about 50% of Android devices.

We covered a lot of interesting topics – including Android layouts, Java classes, methods and exceptions, Android’s AsyncTask, Drupal’s Services and REST Server, Android ListViews, parsing JSON with Android, Android’s permissions, and last, loading an image off the web into an Android app.

I haven’t given a training class for a Drupal Camp before, but I found it to be very useful to me to create a training guide for the students that basically covered everything I spoke about, with lots of screenshots of how the app should look when you add this code, code listings, and discussion. It ended up being about 80 pages for a four-hour class, so it’s about half of a decent book right now.

The biggest request at the end of the class was – where should we go from here? There aren’t a lot of specific resources for building Android apps that talk to Drupal, but I can definitely recommend the Android Design web site:

http://developer.android.com/design/index.html

Before getting too deep into Android, it’s definitely important to understand how Google wants you to design apps. It’s definitely different from iOS app design, which is what you will usually find in when mobile design is discussed. Beyond that, I also highly recommend this book on Android development:

Android UI Fundamentals: Develop & Design by Jason Ostrander.

Google has an Android Developers web site, but I feel that it’s not well suited to beginning app development.

If you’re interested in Android or iOS mobile app development for Drupal, and you have any questions, feel free to contact me here through the Contact Form at the top.

Categories
Drupal Planet iPhone Development Talks

Drupal and Mobile Apps at the Dallas Drupal User Group

Here’s a talk I gave at the Dallas Drupal Users Group on creating mobile apps that use Drupal as a back end. Thanks to Level Ten Interactive for hosting the users group and inviting me up to speak!

Some links to interesting resources I used:

Codiqa – Rapidly Prototype your jQuery Mobile app

PhoneGap – Support HTML5 mobile web sites within native apps

AFNetworking – Easiest/best HTTP/REST/JSON networking library for iOS

Jeff Linwood’s Drupal and Mobile App Talk

Categories
Drupal Planet iPhone Development

Ubercart CRM for the iPad: My DrupalCon 2012 Twilio Developer Contest Entry

I won 2nd place (and a Kindle Fire) in the Twilio DrupalCon 2012 Developer Contest with an Ubercart customer support iPad app. The idea is that a e-commerce site customer support representative could use an iPad that not only handled customer support calls, but also showed the customer’s most recent order information as soon as they call.

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!

Categories
Drupal Planet iPhone Development

Drupal 7 Map App Example Project for iPhone and iPad

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

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

Categories
Drupal Planet Phonegap

Drupal + PhoneGap Podcast with Jeff at Modules Unraveled

Check it out! I did a podcast with Brian Lewis of Modules Unraveled, and it’s live today on his web site: Drupal and PhoneGap podcast. I had a lot of fun recording the podcast, having never done one before.

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

Categories
Drupal Planet Facebook Development iPhone Development

Drupal 7 + Facebook Open Graph + Timeline = iPhone app

We’re steadily getting closer to a vision of the semantic web – and it’s being driven by Facebook through their Open Graph Protocol. Open Graph came out in 2010, and it initially supported a large set of different object types and properties (for instance, music, article, book) – very interesting, but there are certainly more object types now!

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:

Categories
Drupal Planet Talks

Building Mobile Apps with Drupal – Drupal Camp Austin

I spoke at Drupal Camp Austin about developing mobile apps on top of Drupal. Most of the talk was about PhoneGap, but I also covered configuring the Services module to set up Drupal to serve content to mobile apps.

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!

Categories
Drupal Planet Phonegap

Easier Drupal Plugin for PhoneGap iOS Installation

There’s been a lot of buzz about PhoneGap this month – the project just released version 1.1.0, the open source project is moving to Apache, and the parent company, Nitobi, was acquired by Adobe.

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.

Categories
Drupal Planet iPhone Development Phonegap

Announcing: PhoneGap iOS Plugin for Drupal v0.1

PhoneGap iOS Plugin for Drupal v0.1 – Proof of Concept – https://github.com/jefflinwood/Drupal-Plugin-for-PhoneGap-for-iOS

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