Building PhoneGap / Apache Cordova iOS Apps with Jenkins

While there are several posts related to Jenkins and PhoneGap, I couldn't find a complete, up-to-date, 'step by step' guides that show how to setup continuous integration builds for your team.

I wanted to share my experience with both tools, but first let's start with some assumptions and requirements:

1. As of today the most updated development environment version is XCode 4.5 w/ iOS 6.0. It is highly recommended to update to the latest and greatest version so things work properly.
2. I used the latest Jenkins which is downloadable from its download site
3. After installing Jenkins, I used this cool xcode-plugin that really helps to get things done. You can install it by going to Manage Jenkins | Manage Plugins | Available | Search for xcode and install it.
4. As an optional step you should also install the Amazon S3 plugin to push the "Enterprise Site" artifacts (the IPA and PLIST files) so it can be available to others in your team.
5. You must have Apple's iOS Developer Program account. Make sure you create a Certificate and Distribution (Adhoc) provisioning profile using the portal. Start by creating a certificate for Distribution (remember to do this through the "Distribution" tab) and continue with adding the devices you want to test with. Finally create a provisioning profile (remember to do this in the "Distribution" tab). If you have done things correctly you should have a certificate in your default keychain. Here is what I see: 

   

   (1) Apple's Certificate (2) Your Certificate (3) Your private key
   Make sure you have something like this in your user's Keychain

6. Another assumption is that you use the latest version of Phonegap (currently v2.2) which provides handy command line tools to create iOS application shell.  I used:

./path/to/cordova-ios/bin/create /path/to/my_project com.example.my_project

Now before we start the real fun, let's explain a couple of caveats for working with Jenkins in this context:

1. Jenkins jobs run as the jenkins user (created by the Jenkins installer), your jenkins user doesn't really know about the Keychain that you have created. We will create a different Keychain accessible by your jenkins user.
2. Same goes to provisioning profiles, we will need to install the distribution provisioning profile for the jenkins user. 
3. Code Signing for development and distribution is done with different provisioning profiles, from time to time, developers override the project settings so the profile (the Xcode UI really sucks!)  is configured wrongly. For this end we will add a script that makes sure we use the right profile.

Now let's start the real fun:

1. Export the user's Keychain (usually under /Users//Library/Keychains) and import it into new Jenkins' Keychain (usually under /Users/Shared/Jenkins/Library/Keychains):
   user$ security default-keychain # retrieve the user's default keychain 
   user$ security export -k <user-keychain> -f pkcs12 -o <output-file-name>
   user$ sudo su jenkins # switch to jenkins account
   jenkins$ security create-keychain -P  <jenkins-keychain> 
   jenkins$ security import <exported-file-name> -k <jenkins-keychain> -f pkcs12 -A 
   jenkins$ security default-keychain -s <jenkins-keychain>  
2. Copy your distribution provisioning profile to jenkins' user profiles directory /Users/Shared/Jenkins/Library/MobileDevice/Provisioning Profiles/
3. Create a Jenkins job using the xcode plugin
   Fetch your code from git then add a build step which executes the xcode plugin build
   
   Remember that you should fill in these parameters
   • Target
   • Configuration
   • Project directory
   • output directory
   • Build IPA
   • Provisioning profile - direct to your profile
   • Unlock the keychain and provide the Keychain and its password
   
   
4. In your job you will need to make sure that the right profile is used during the execution, I had to use some search and replace tricks. For this end I first find the provisioning profile's hash (a 28 hex-decimal hash):
   cp </path/to/.xcodeproj>/project.pbxproj  </path/to/.xcodeproj>/project.pbxproj.bak
   
   sed 's/PROVISIONING_PROFILE\ =\ "[^\"]*"/PROVISIONING_PROFILE\ =\ "<Profile Hash>"/g' </path/to/.xcodeproj>/project.pbxproj > </path/to/.xcodeproj>/project.pbxproj.pro1
   
   sed 's/\"PROVISIONING_PROFILE\[sdk=iphoneos\*]\"\ =\ "[^\"]*"/\"PROVISIONING_PROFILE\[sdk=iphoneos\*]\"\ =\ "<Profile Hash>"/g' </path/to/.xcodeproj>/project.pbxproj.pro1 > </path/to/.xcodeproj>/project.pbxproj.pro2
   
   mv </path/to/.xcodeproj>/project.pbxproj.pro2 </path/to/.xcodeproj>/project.pbxproj
   
5. Distribute to external enterprise site - this one worth a separate post

REST Sniffer and Client - Working Together

A month ago I posted about REST Sniffer, a Chrome extension that helps with tracking REST calls. This time, I'll present a cool new feature that can help developers to detect and analyze bugs as well as support common Web apps development process integrated with Advanced REST Client.

The use case is very common, you are a Web (or Mobile-Web) developer given with a bug or scenario that requires several steps to reproduce. You probably start with opening a browser and trying out these steps. After simulating it, open the network panel and investigate that it's an API issue originated from this specific scenario (data, flow, state, etc). Now starts the beautiful twist, you pinpoint this API call and detach it to an external client that can reproduce this call in a similar environment. Let's see how it works in real life:

First you sniff your Web App's APIs, and click the "Load in REST Client" button

This operation automatically detaches this specific API call (including its method, URL, path, parameters and headers) to the Advanced REST Client where you can review and exercise this call again and again. Ultimately, step by step debugging it in your favorite IDE.

Finally Review the results in your client after resolving the issue

Many thanks to Paweł Psztyć the "Advanced REST Client" Google Chrome App creator who worked together with me on the integration and made it possible.

If you want to read more visit this short page prepared to help with understanding the workflow in details.

7 Tips for PhoneGap (&Mobile-Web) Beginners

While the mobile app market continues to grow steadily, mobile app development knowledge in most companies is still immature. Most companies have already aligned their business strategies with the latest mobile-world changes and started recruiting mobile teams but haven't yet streamlined their app development processes. This problem is notable also among mobile-web app developers, where the two domains have synthesized into one platform that carries both methodologies and twists. Here are some tips and thoughts I've gathered through my work with PhoneGap / Apache Cordova.

It’s a mobile app not a web app
The very first thing you notice when switching from web app to mobile-web app development is that your tools and environment are quite similar. This may lead to a misconception about your target audience environment and behavior. Actually, there is little in common between a web browser user and a mobile app user. For example the .click() event has a major role in browser use but really doesn't fit the mobile context where users prefer to tap (touch) elements of their app interface. Technically, "touchend” events are fired with no delay so they are significantly faster than “click” events.


Another example of a behavior that usually happens in the context of web browsers and doesn't make any sense in mobile apps, is highlighting elements after a user has clicked on them. In a mobile app, you need to prevent objects from being highlighted by a touch event.

Using a fully featured engine/framework vs. your own stack of libraries
As in creating web or desktop apps, one should choose the right UI patterns to develop mobile apps easily. Most mobile app workflows fit into short and gamified scenarios. There are plenty of game engines and App UI frameworks that can be very handy. Rather than using a fully featured framework that may limit your scenarios and put them in the wrong pattern, there is the option of using low-level libraries that solve a specific problem. This is usually better if your game or app has specific UI requirements like special animation but is less recommended if you want to build a traditional mobile-web app. Combining several libraries such as backbone.js and jquery transit may provide a great starting point in creating a flexible interface and smooth workflows.

Responsiveness and image preloading
You may make the assumption that since you are working on a client-side app, there is zero-time resource loading, for example, for loading images, scripts and local data files. This is, of course, not true and may cause bad user experiences and slow response times. To solve it, there are two methods that should be taken:
Use Asynchronous Module Definition (AMD) to load resources and handle dependencies. One simple implementation is requirejs.
Use the sprite technique to store your images and improve the drawing time. One simple implementation is spritejs. 

Usage analytics and A/B testing in the context of mobile web
Tracking and analyzing your users’ experience of your app is a key factor for improving your product incrementally. This also enables you to drop the MVP (most valuable product) before releasing a fully featured mobile app. Three great examples that are already adjusted to the mobile app world are Google Analytics, Mixpanel and KISSmetrics. Another technique that should help with improving your product incrementally is AB testing. This allows you to switch the content or view of your mobile app to show how your users consume it. For example, you can reorder the main menu items to see how many people get to the goal of selecting an option that you want them to select (purchasing your app, downloading more content, etc.).

Different platforms, same conventions? customization?
If you target several mobile platforms, it’s a bit naïve to think that your app is going behave in an identical manner on all platforms. This may lead to the fact that you will need to customize your app according to the target platform it is running on. Another factor is that if you use plain Apache Cordova (rather than the Phonegap build) you will need to customize several platform-dependent settings on your own. For example, if you want to hide the status bar when running your app, in iOS you will need to tweak Info.plist with the key field “UIStatusBarHidden” and the value “YES”. In Android it’s done differently by tweaking the app’s manifest file.

Emulator
One of the key benefits to using mobile-web is the fact that you can have one emulator that fits all platforms. In other words, you don’t need a different emulator for each platform (iOS emulator, Android Emulator, etc.). Chrome Ripple extension is the easiest way to do that.

Continuous delivery 
A key decision you will need to decide upfront is what method to use to build your mobile app, either independently (in-house) or using the Phonegap build. If you decide the former you can use automatic tools such as Jenkins and XCode Jenkins Plugin, which are highly recommended for easing the delivery process and streamlining the work within your team.

Sniff Your RESTful API

Over the last couple of weeks I have been working on a project that required full understanding of its RESTful API. During that time I was using traditional tools like my browser and an extra extension that allows me to get acquainted with the app's internal API. The main workflow (as a developer or a tester) was to make an action in the browser and then try to resolve what the hack happened under the hood.


So... I wrote an extension that made my life easier. Basically this extension provides my browser the power being aware of a specific RESTful API that is relevant to Web application. 


If you work with backbone.js, angularJS or spine (actually if you work with RESTful Web app) this can be highly valuable as you see the net traffic that is related to the Application.


First the user defines the high level endpoint structure:

Then when your app is monitored this info is presented:

Since it's an open source Github project, feel free to contribute and / or send pull requests.

if-ify, for-ify, foreach-ify and func-ify

A common question among developers is how to surround the current selection in the editor with a parent statement. For example if you start coding a statement that validates an expression and then want to iterate over an array of expressions and do the same to all its elements.

For this end Eclipse templates provide two variables "line_selection" and "word_selection" that help you build custom selection-based wrappers.

In this example three new templates were added to simplify this scenario:

You can import these templates (xml below) to your IDE via Preferences > PHP > Editor > Templates > Import...

How My Wife Drives the Technology World

ok, maybe a better name would be "My Cloud-based-Social-enabled-Service-oriented Mobile Apps Experience", but that's a long name for a post :)

It started last week as a small-talk between my wife and me about she attending so many shifts and medical sessions. According to my wife, she usually takes 4-5 shifts a month where the actual number is doubled (!). At that moment I had no tools to prove my point and here comes the requirements to build a small mobile app for her to report shifts and sessions while being able to write short notes about it (ok, she was asking this a long time ago). In addition she usually posts some info on Facebook during her shifts so I had to connect these reports somehow to her Facebook account. By the end of the month she hand a report about her shifts to the managers so this if the app could also print a summary it will be a big value for her.

Before sharing thoughts about my experience with this app development, here is how this app looks like on Android and iOS:

Mobile App
jQueryMobile (version 1.0) is really handy for creating cross-platform mobile interface, it provides easy to use APIs and is really covered well with lots of great examples. I had to use several other libraries like jQueryUrl, Moment.js, Mustache, requireJS and jsPDF. With so many "out-of-the-box" libraries it is super easy to build robust solution for client side in minutes(!!!)

Social-enabled:
Facebook JavaScript SDK helped me with giving a more "social look and feel" after creating  a  Facebook application. I also used  Facebook's OAth service authentication and Open Graph integration so users notify their friends about their activities with the "My Doctor Shifts" application. That's super important to engage the application users to your application!

Service-oriented (and Data-centric)
Zend Framework provides nice (lightweight) models representation and the MVC was useful to create the HTML view and services.

Cloud-based
Using  phpCloud was easy as always with plenty of slick workflows helping me to easily deploy my application and push updates to staging and testing targets. This way I always kept two versions that represent my Work in Progress and Done apps. I also got packages ready for deployed in case I want to deploy it to another Zend Application Fabric instance.

The application is available on github.

Getting Started with Facebook App Development

Last week I was playing with Facebook App development, getting ready to the Facebook announcement. It was quite pleasant experience, although things could be simpler. The Facebook Open Graph concept gives a nice overview on what and why this all about, so that part went very smooth. When things get technical, the Facebook Developers site turns messy. That is, all topics are covered in a 'tutorial' approach rather than an API approach like most developers are used to. Moreover, the layout of this page is definitely not intuitive as it mixes between reference and tutorial docs. That's said, the general experience was good.

To help other developers get started with Facebook app development I created a nice application which take the reader through the steps to develop applications with phpcloud.com. It was a nice exercise and it can really help with the development workflow.

The topic "Getting Started with Your Facebook App on phpcloud.com" covers :

1. Create an account on phpcloud.com
2. Create an app on Facebook
3. Setting up development environment
4. Deploy a sample Facebook app to phpcloud.com
5. Push updates to your Facebook app