Using Adobe PhoneGap Build (iOS Push Notifications — Part II)

In this part of the iOS Push Notifications series I will take you through the process of creating a simple PhoneGap application and show you how to deploy it on a iPhone.

For building the application I am using Adobe PhoneGap build which is a build and deploy tool for JavaScript mobile apps. It builds your mobile apps and generates platform-specific executable files.

I find it very easy to use since you can generate your .apk for android, .ipa for iOS and .xap for windows simultaneously. Another advantage of using Adobe PhoneGap build is you do not need a mac to build iOS apps, you can build them on your windows machines, you would however need a mac to install the app on to your iPhone but in any case you would still be able to generate the .ipa file provided you have the certificates with you.

You can get more resources and examples on the Adobe PhoneGap Build Official Website.

Please do not get confused between PhoneGap and PhoneGap build, the latter one being a build and deploy tool, I have used the “PhoneGap” wherever I mean to say the JavaScript framework PhoneGap and used “PhoneGap build” or “Adobe PhoneGap Build” wherever I mean to indicate the build-deploy tool.

Let’s start with creating a Hello World PhoneGap app and we can deploy the same to see how PhoneGap build works.

If you see the official PhoneGap website, there are two ways of creating a PhoneGap app,

Using PhoneGap Developer mobile app.

2. Using PhoneGap Command Line Input(CLI).

I prefer to use the CLI since I find it is faster and easier to shoot commands on CLI but you can use either of them.

Before installing PhoneGap on your machine, you will need to install the following two pre-requisites :

Note that I have only included the commands and snapshots for mac, you can find corresponding windows command on the official PhoneGap website.

1. Node.js

Node.js is a JavaScript run time to build your JavaScript code and a pre-requisite for PhoneGap so you will have to install node first and then PhoneGap.

Download the mac installer from here and follow the installation wizard.

Once successfully installed open terminal application on your mac and type

node -v

it should give you the node version installed as shown below

**Node version displays if installed correctly.**

2. Git

Git is used in the background by the CLI to download assets. It comes pre-installed on some operating systems.

Download and install from here.

Once the installation completes open Terminal and type the following command to check if it has installed properly.

git --version

You should see the git version installed

**Git version is displayed if installed properly.**

Equipped with Node.js and git we can move on to install PhoneGap.

Install latest PhoneGap

To install PhoneGap open Terminal and type

sudo npm install -g phonegap@latest

This will make sure the latest stable version of PhoneGap is installed on your machine.

Terminal will ask you for a password since installations need admin access. You should see something like this going on :

To check if PhoneGap installed fine on your system, type the following command on Terminal.

phonegap -v

It should give you something like this :

**Version of PhoneGap installed on the system.**

Create a demo hybrid app to be deployed on to your apple device.

Our aim here is to just create an entry level Hello World app which can be deployed onto a apple phone.

Note that I am naming my folders and project around Push Notifications because I will be extended the same project for configuring push notifications as well in the next part of this series.

Go to the directory where you want to maintain your source code and run the following command on Terminal to create the structure of your app.

phonegap create PushNotification com.demo.pushiOS PushIOS

This will create a folder called PushNotification in the directory you currently are and create a PhoneGap project structure for you.

You can refer to this if you wish to understand the project structure in depth.

Your project structure would look something like this :

**Folder structure of the PhoneGap app we just created.**

b. Add the iOS platform to your app.

In your terminal navigate to the project folder you just created :

cd PushNotification

Now add the iOS platform using the following command :

phonegap platform add ios

This will add all the default plugins to your project and once the installer finishes executing, you should see the folder “ios” created in the platforms folder.

**iOS folder gets added in the platforms folder.**

Build and deploy app to check if its working.

This is the fun part. Now that we have the project structure created and required platform added, all we have to do is load the project on Adobe PhoneGap Build tool and let it do rest of the magic.

Adobe PhoneGap Build only takes in the www folder and config.xml file.

So copy the www folder of the project you just created and the config.xml file into a new folder and zip this new folder.

I have named the new folder as PushToUpload.zip. This folder will be uploaded to PhoneGap Build.

**Copy only the config.xml and www folder onto a new folder.**

**Zip this folder and upload to Adobe PhoneGap Build.**

So now go to the Adobe PhoneGap Build website and sign-in using an adobe id, if you don’t have one you can easily create one free of cost.

The homepage should look something like this once you have signed in.

**You can either pull a project from a git repository in the open-source section or upload a .zip file in the private section as shown in next snapshot.**

Click on private tab → “upload a .zip” file button to upload the zipped folder containing your www and config.xml. This is what I mostly use, however the only caveat being you can only upload one app at a time with the free account.

**PhoneGap Build is uploading your project.**

In case you are wondering where the name of the app “PushiOS” came from, PhoneGap build picks it from the <name>…</name> tag in your config.xml file

Next we need to upload the client .p12 and mobile provisioning certificate

I have explained how to create the required certificates here.

Once you have the certificates on your disk, click on the Account icon on the adobe PhoneGap Build page and follow the snapshots below :

**Click on Account icon → Edit Account.**

**Click on the second tab “Signing Keys”, it will open the list of keys you have added.**

**Click on add a key button to upload your certificates. Enter a title and select the client .p12 file and the mobile provisioning file and click “submit key”**

**The key gets added to your account, however it is locked- notice that there would be a yellow highlighted lock button.**

**Enter the certificate password you had used while exporting the .p12 certificate from the key chain access application to unlock the key.**

After providing the password — the yellow box will convert into a white one which means it is unlocked. If you click on this button again it will give you a pop-up asking if you want to lock it again.

That’s it, we are all set to start the build.

Usually PhoneGap Build builds your app as soon as you upload the signing keys but you can also trigger a manual rebuild using the rebuild button.

Go back to “Apps” page and if your build has started this is how it will look:

**PhoneGap Build is building your project for all three platforms simultaneously.**

In case your build hasn’t started automatically, you can click on “Rebuild all” to manually kick off a build.

If everything goes right, your ipa file will be generated and the ipa button will be active, click on this button to download the file to the your local drive.

If you still see a No key Selected in the iOS keys section, you can click on the drop down for keys and select the key you just added.

**You can select the correct key or add another key by clicking the drop down for keys as shown above.**

Notice that PhoneGap Build generates the executable for all three platforms simultaneously.

Along with the .ipa, .apk and .xap files which you can click to download to disk, it also gives you a QR code which you can scan on your device to install the app.

Running an .ipa file on your device

Now that you have your .ipa file you can load it onto your device using the iTunes application on your mac.

Connect your phone to the mac using the USB and start up iTunes application on your mac.

While creating the mobile provisioning you must have registered a device via its UDID — make sure its the same device you are using right now.

Follow snapshots below to install and run the application on your device using iTunes.

**Open iTunes application on your mac with the phone connected by USB and go to File →Add to Library.**

**Select the .ipa file you downloaded from Adobe PhoneGap Build.**

**The application will be added to your apps section. Click on Install to install it onto your phone.**

**You should see the app installed onto your phone.**

**Open the app to view the first page. This is the default PhoneGap page since we haven’t added any custom code.**

Conclusion :

Simple wasn’t it? So we have successfully created a Hello World PhoneGap application and installed it on our iPhone.

Further more we will add some custom code to the same app to enable push notifications.

Hope you had no issues following this tutorial, if you did face any issues please add it in comments and I would love to help you out.