Phonegap solves your rapid mobile development needs

Phonegap solves your rapid mobile development needs

See the PowerPoint version of this post here – http://www.slideshare.net/jesses16/mobile-development-with-phonegap-and-ruby

Overview

Today I gave a short talk on how PhoneGap with Ruby provide a great system for rapid mobile development.  What do you gain by combining these technologies?

  • Accessibility & exposure – Get your mobile app into the various app stores, which is where your users will likely find them.
  • Familiar programming languages – Develop with your favorite backend system and familiar web technologies (HTML, CSS, JS).  Minimal or no knowledge of Objective C needed.
  • Access native capabilities – Access native features of the platform such as the camera and nav tools.
  • Unified code base – Use one project to power all your various platforms, such as iPhone, Android, and the mobile web.
  • Plugin Library – Not yet an overly active community, but there are some very good PhoneGap plugins ready to enhance and ease your development process.  https://github.com/phonegap/phonegap-plugins/

The clearest way to think about PhoneGap:

It’s a native code project that manages and exposes native functions to your web apps via JavaScript.

What a lovely idea.

Creating a project

There are a number of good resources for stepping you through your first PhoneGap project.  If you’re new to native development (xcode – iOS projects) there will probably be some gotchas.  However, this is fairly straight forward.

The PhoneGap “Getting Started” guide is a fine place to start. – http://phonegap.com/start#ios-x4

Structuring your git repos for PhoneGap

Perhaps the toughest part of the infrastructure setup is designing and configuring your git repos.  Again, the goal is to keep a single project for the application code base.  To do this, you will want to have a separate git repo for each platform-specific code base (free of core application code), and one for the core application itself.

Git Repo Structure

Git Repo Structure

In order to achieve this optimally, consider making your core application code a git submodule and importing it into your various platform projects.  In the figure to the left, there is a git repo for the iOS / xcode, which holds your MyApp.xcodeproj file, as well as all other xcode (and PhoneGap) libraries and code.  This stuff isn’t part of your application, it’s platform overhead, so it goes in its own bundle.  Same goes for Android project code (and Android PhoneGap libraries as well).

Your backend web data-serving application that powers the content of your mobile application is in a third repo.  This may or may not include your core app submodule depending on if you want to bundle in a mobile web version of your app.  Users will generally find your app through an app store, but if they hit the url with their mobile phone, it can be a nice perk if they go straight into the app.

The steps for setting up these repos is tricky, and requires that you think about it ahead of time.  The following post has a good set of instructions, which I based mine on.

See http://deadprogrammersociety.blogspot.com/2010/01/crossing-phonegap-for-multiplatform.html

Create the Repos

  1. mkdir MyApp
  2. mkdir MyApp/MyApp_IOS (could do the same for Android)
  3. Create XCode project in MyApp_IOS directory.  This means the XCode project files (such as your MyApp.xcodeproj and main project folder) live directly in this folder.
  4. Once you have gone through the PhoneGap Getting Started steps, a www folder will be created for you in this folder.
  5. Create a new repo (git init) in the www folder.  You probably don’t want a repository called “www” in your git account, so give this a better name in git.  Go to your new repo on github, and Admin page -> Settings, set a new “Repository Name.”  I used ‘MyApp_WWW.’
  6. Clone that www repo into the parent dir of a new shared location.  For me, I put this directly into the MyApp folder.  So now I have a MyApp folder containing two folders, one called “MyApp_IOS” and one called “MyApp_WWW.”
  7. Delete the folder MyApp_IOS/www.
  8. Create a git repo for the iOS / xcode in folder MyApp_IOS.  This is your second git repo, and remember, doesn’t contain a www folder at this time.
  9. In MyApp_IOS, run the command `git submodule add git@github.com:yourGitID/MyApp_WWW www`
    This will pull down the MyApp_WWW project as a submodule here, and name the local folder ‘www.’
git_submodule

This is what a submodule will look like

 

To pull down the code into the new ‘www’ folder for the first time, run `git submodule update init –` from the parent folder of ‘www.’  Now you can repeat step 9 for any project that has been designed to use a ‘www’ folder that contains the whole project.  This takes some configuration work on your end.  I’ll talk more about how a Ruby application might look that supports this below in the section Mobile Web App and Backend Server.

Updating the Submodule Repo

When you make updates to the shared submodule, you need to go to the folder of each platform-specific project and pull down the latest submodule code.  Do that with the following commands.

  1. `cd` into the ‘www’ folder.
  2. git checkout master
  3. git pull – this pulls the newest code down into your local code for this platform
  4. cd ..
  5. git commit ./www -m “pulling newest www code” – This step pushes back up to git the fact that your platform project is using the updated version of the www submodule.

Some more information – http://stackoverflow.com/questions/5828324/update-git-submodule?answertab=active#tab-top

Mobile Web App and Backend Server

Flat File Structure

Flat File Structure

The goal of this approach is to enable fast, friendly mobile app development.  With this system, you can have one code base for multiple platforms.  However, that means your different platforms should use the core app code repo in the same format.

In order for this to work for the majority of platforms, keeping a flat code structure is key.  For instance, the asset pipeline in Rails 3.1 is great, but won’t work well under the xcode / PhoneGap project.  See the image to the left as an example.

I used a simple Sinatra app to serve the mobile web application, as well as the backend project that actually served data to the application.

Private Git Submodule with Heroku

Heroku will accept your project with submodule, but it will fail during deployment if your repo is not public.  Importing gems has the same restraint: private gems cause issues in Heroku as well.  Below is a link with some ways to get around this issue.  I believe the quickest / easiest solution is to do the following:

  1. Create a new account in github, probably called something like MyAppServiceAccount.
  2. Add this account as a collaborator in the MyApp_WWW repo.
  3. In the MyApp_Mobile folder, modify the .gitmodule file.  Change the URL to the submodule to the format:
    `url = https://yourGitID:password_for_yourGitID@github.com/yourGitID/MyApp_WWW.git`

Now, Heroku can successfully access your submodule!

http://stackoverflow.com/questions/4840680/how-can-i-specify-a-gem-to-pull-from-a-private-github-repository/8949955#8949955

JavaScript Configuration Code Snipit

JavaScript Configuration Code Snipit

Custom Configuration

You may find that you need to do some (hopefully minimal) configuration of your application depending on the platform being used by your user.  There are a few options for you here, but nothing great.  I have yet to find an easy way to read xcode plist files into PhoneGap javascript code, but hopefully this is something the PhoneGap peeps implement soon.  See the below code snipit as an example.

Finally – A Theme

Don’t forget to use ThemeForest.net to find a great mobile theme for your app.  Spending $7 is a lot easier than getting good at PhotoShop!

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s