In-App Purchase Apps with PhoneGap: Part 1

Recently we were tasked with creating a mobile application that would utilize in-app purchases to unlock various items in the application. We decided to use PhoneGap as our development platform and Framework7 as our HTML/JS framework for the application. This would allow us to develop the application as both iOS and Android with only a few minor changes.

In developing the application, we uncovered a number of small issues that were not obvious at first and which caused minor delays in the development process. Nothing major but annoying just the same. In this series of posts, I plan to build a similar application and point out each of those minor issues. Hopefully this will serve two purposes. First, allow us to document each issue so that we can avoid them in the future. Second, to help any other developers avoid similar issues.

This post will cover getting node.js, npm, and PhoneGap set up on your computer.

Installing NPM

First, if you do not already have npm installed or even know what npm is…then we need to get you setup to use it. Npm is a package manager for node.js. A package manager is a tool to assist with the installation of components on your machine. To get setup with node.js and npm using the following link: https://nodejs.org

The LTS version is all we need. Click the button to install the LTS version. That will suit all of what we need to use node.js and npm for in these posts.

Once you’ve download the program and run the installer, you should be able to open a terminal window and type the following command:

node --version

It should show you a version number, for example my returns v9.5.0. You can do the same for npm.

npm –version

Mine returns 5.6.0. You now have node.js and npm installed. Let’s move on to installing the PhongeGap desktop, CLI, and mobile applications…

Installing Phonegap Desktop, mobile, and CLI

Go to the the PhoneGap website: https://phonegap.com

Click on the button labeled Get Started. This will take you to step 1, installing the desktop app. It also has the command you need to run in your terminal window to install the PhoneGap CLI. Install the desktop app for your operating system. Then open a terminal window and run the command to install the CLI version of PhoneGap. It should look something like this:

npm install -g phonegap

The -g is short for -global. This will install PhoneGap CLI so that you can use it from any folder on your machine. If you get an error, you may need to run the command as:

sudo npm install -g phonegap

This allows you to run the command as the administrator. You will need to enter your normal login password to allow the command to continue.

You may be wondering why we installed both versions. The desktop application does not allow you to install plug-ins, you need the command line interface to do that.

After installing the desktop application and the CLI using your terminal window and npm, you can type the following command to ensure that PhoneGap CLI is installed and working.

phonegap -v

My installation returns 7.1.1. Yours may return a different value depending on when you are viewing this post.

Finally, continue to step 2 on the phongap.com site and install the mobile application on your phone, tablet, etc. You should install the application on all of the devices you will be testing your application on during development.

You can now follow the remaining steps on the site to create a “Hello World” application and test it on your phone or tablet.

Start the PhoneGap desktop application.

Click the “+” and select “Create new PhoneGap project…”.

The “Hello World” template should already be selected; click next.

Choose the folder to save your project into. The selected folder will have another folder (the name you give your project) created and the files for your project will be in that folder.

Give your project a name, I just called mine “Hello World”. It is a good idea to enter in the ID for your application. As it states in the window, a normal convention is to use a reverse URL as the ID. So, for example, you could use something like com.yourname.helloworld. Normally, I use my company’s name in place of the yourname and the name of the application I am creating in place of helloworld.

Click create project, and you should see something like the image here.

Now, open the PhoneGap mobile application on your phone/tablet.

Edit the URL in the window to match the URL from the PhoneGap desktop application window. Click Connect.

If everything went well, you should now see the sample application running on your phone.

Congratulations

You’ve now created your first application that shows you absolutely nothing about what it takes to create a mobile application with PhoneGap. It is cool to see the application play on your phone though.

Note: You will notice that the PhoneGap desktop application allows you create an application with Framework7. Using that template will create an application that uses Framework7 v1.4. I will be using version 2+ and so we will need to manually setup the files.

This first step was fairly straight forward. Our next step will be creating a PhoneGap application that uses Framework7 version 2+.