Generative Visuals using ProcessingJs with PhoneGap and Cordova

We all know that Processing is a snap to use on Android– you can compile to an Android application directly from the Processing IDE. However, a lot of visualists prefer iPad and Apple devices for its standardization, ease of use, and its form factor. Although Apple enforces its walled garden fairly rigorously, there are a few approaches to programming generative visuals on iDevices that make use of its robust support of HTML5 to enable JAVA and Processing based applications.

This tutorial shows how to build an iDevice app using ProcessingJs with PhoneGap and Cordova, with the end goal of compiling it to run directly on an iPad or even iPhone, using a combination of Processing for JS, XCODE, and HTML5 to iOS compilers. Programming environment is Mac OSX and XCODE with the PhoneGap HTML5 compiler. To begin with, you’ll need to download XCODE and PhoneGap.

About PhoneGap:
PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for multiple platforms including iOS, Android, and even the web.

About Processing:
Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.

Resources: 
Processing home: www.processing.org
Phonegap home: http://phonegap.com/
Phonegap/Apache Cordova API: http://docs.phonegap.com/en/2.3.0/index.html
Download XCODE: https://developer.apple.com/Xcode/index.php
Download PhoneGap: http://docs.phonegap.com/en/2.2.0/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS

This tutorial is in two parts.
PART ONE goes over how to build a PhoneGap project in XCODE and test it in the simulator.
PART TWO details compiling your PhoneGap project on an iOS device.

PART ONE: BUILD a PHONEGAP APPLICATION
Step 1: Install Phonegap and Xcode libraries
Step 2: Create an XCODE project
Step 3: Compile your project and initialize “www”

STEP 1
Now that’s you’ve downloaded (almost) everything you need to, you’ll first want to install Xcode from the Mac App Store or Apple Developer Downloads, which you’ll need to do any iOS development. You may need to install the Xcode Command Line Tools (Xcode Preferences -> Downloads -> Components -> Command Line Tools -> Install).

Next you’ll need to install the latest release of PhoneGap/Apache Cordova, which are the libraries you’ll need to compile HTML5 pages on an iOS device. Now that everything is downloaded and installed, let’s go ahead and build our iOS app.

STEP 2
Open up XCODE and “Create A New Xcode Project”. Select a Cordova based application (totes obvs), locate it in your workspace (you are developing using best practices, right? So you have a workspace?) and maybe even allow XCODE to set up a git repository for you, even though it’s not really necessary. You don’t need to check the button marked “Automatic Reference Counting” (ARC), you only need to worry about ARC if you are writing PhoneGap native plugins or writing native code. PhoneGap native plugins enable you to write your own native code and JavaScript APIs to extend the capabilities of the PhoneGap container.
Here’s where it gets complicated. To prevent spammy or malware apps (or just to keep the walls on its garden extra high) Apple has a number of restrictions on how an application can be built. You’ll need to register with apple to get a developer license ($100 bucks, vs $20 for Android) you’ll have to “sign” your app, and even go thru what’s called a Provisioning Portal to configure your iDevice and developer build.You’d rather test this out before making that kind of investment? Too bad– Apple requires that you set up a (paid) profile with all your data to do ANYTHING with their platform, so they can keep track of you.As far as I can tell, there is no way to even run an iDevice simulator without signing up for apple-land. Don’t like it? Developing for Apple is not for you, then. Perhaps you would like to develop for Android, where the barrier for entry is much, much lower.

Step 3
So, now that we have a project set up, let’s go ahead and compile it to the apple emulator– hit the “Play” button! XCODE will run its compiler, and you’re done! No, you’re not. Your PhoneGap project will be created within Xcode, and support files will be created in your workspace… however, there’s more work to be done before your project is up and running.

Step 4
All of the HTML and JavaScript used to create the guts for your PhoneGap project will be contained within a folder called “www”. Initially, this www folder will not exist within your PhoneGap project until after you’ve compiled it for the first time. Now that the project is compiled, you have to add the “www” folder to the “root” of your project FROM WITHIN XCODE.

To do this, right click on the project name, go to “Add Files to “MyProjectName”, find “www” in your workspace (be sure to select the actual www folder, not a parent folder or contents inside of the folder), and click “Add”. BE SURE to select “Create folder references” rather than “Create Groups for added folders”, or else it will throw some errors. You should now see the www folder under your project root. Click “Run” to see it run, and it should compile to your iDevice simulator.

Sometimes, there will be some random update to PhoneGap, your Mac OS, or to XCODE that will break this– version number for your iDevice simulator won’t match PhoneGap’s list or some damn thing, so you’ll have to get on the update treadmill to sort it out. This becomes even more important when you start to actually deploy to real devices.

Regardless, you should be able to see a Cordova “hello world” box appear in your iDevice simulator (depending on the version you’re using, your simulation will vary). Ok, you say– this is lame. Where’s my cool animation, where’s the fun interactivity? Well, you still have to go ahead and build it. Navigate to the www folder and look inside– you’ll see an HTML page called “index.html”. This is what gets compiled to your device– anything you want to run as an app you have to make execute from here. Keep in mind that this compiles as an iOS application, NOT as a regular webpage, so things like HTML links to other pages, the occasional javascript libraries, etc,  may not work, depending on how you have it coded.

That, however, is a subject for another tutorial.

What we’re going to do is run ProcessingJS out of our HTML page, and compile it to iOS! This allows us to make iPad and iOS apps using Javascript and even some kinds of JAVA, rather than Obj-C! Pretty nifty, right?

Before we do that, however, we want to make sure we’re compiling to an actual iDevice rather than a simulator. The simulators are great for quick tests, but if you’re interested in doing real production, you’ll need to compile to the real thing.

So, we first need Apple to “recognize” our device, and give it the correct credentials so XCODE can compile to it. I’ve personally had trouble getting one device to be “recognized” by multiple machines for this purpose– unlike iTunes where you can plug in whatever iDevice you want to whatever machine you want (more or less) and add some music, compiling software to an iDevice is a pain in the ass.

This is going to be a complicated dance between the XCODE environment and the Apple Developer Member center, with getting certification for some things from XCODE and putting it in the Provisioning Profile in Apple’s Member Center (https://developer.apple.com/membercenter/index.action— at this point you’ll have to be already registered, given Apple your yearly developer fee, etc, so go ahead and log in).

This part of the process is not fun, almost always frustrating, and the documentation seems to assume that you already know what you’re doing.

So, let’s get started!

PART TWO: COMPILING a PHONEGAP APPLICATION to an iOS DEVICE
Step 1: Register your device
Step 2: Get your Apple certification
Step 3: Get your App ID
Step 4: Create a Provisioning Profile
Step 5: Assign the profile to your device
STEP 1
First, you’ll register your device with XCODE– go to your Organizer window in XCODE and you should see your device there (you have plugged your iDevice into your workstation, right?) I don’t know how well this works if you’ve jailbroken or otherwise altered your machine’s specs– it may even give you grief if you’ve bought a refurbished  iDevice. If you’re serious about doing iDevice dev work, you might as well bite the bullet and get a brand new device for testing. You’ll want to name your device ( I chose “TenToniPad”) and find its ID, which you can get thru XCODE under “Organizer>Devices”.

STEP 2
Now go back to your Provisioning Profile in Apple’s Member Center. You’ll want to make a development certificate for the new “Provisioning Profile” you’ll create later on. Navigate to the “Certificates” area of the iOS Provisioning Portal, and follow the instructions that appear. All apps must be signed with a valid certificate before they can run on an Apple device. If you have an existing Development Certificate, it appears in the Assistant, and all you need to do is click Continue. This certificate marks you as an official Apple developer, and my understanding is that you can use this whenever you create an iOS application.

STEP 3
You’ll need to get an app ID (not the same as your iDevice ID). Navigate to the App IDs area of the iOS Provisioning Portal and click New App ID in the upper right, enter a name for the app ID under Description. This name is for your own use to identify the app, enter a bundle ID search string and click Submit.

STEP 4
Now create your actual “Provisioning Profile”! Hit “Provisioning” and then “New Profile” and you’ll get a window where you have to type in all this crazy info you’ve corrected: Profile Name, Certificates, App ID, and Devices. If you’ve done everything right up to this point, all the info will be helpfully populated in drop down lists.Helpful? Gah.
Once you hit submit, the Apple portal has to think about it for a while, and will eventually allow you to download the provisioning profile to somewhere you can find it later. If you’re doing a lot of apps (or planning to screw up and start over a couple times) you might want to have a folder somewhere that holds all these important certificates for later on.STEP 5
Now that you have your Provisioning Profile saved somewhere that you can find it, go into XCODE in Organizer>Devices and assign it to your iDevice. I’d like to tell you that it should work seamlessly, but my own experience was that I had to do this a couple times, delete the profiles, re-do them, delete some of the certification, and try again a couple times. Another thing I had an issue with was after I would delete the certification and start over from scratch, XCODE would re-spawn the old cert in my keychain– go to Applications>Utilities>Keychain access and make sure that you don’t have duplicates of your certification.


Leave a Reply