05 Apr

Creating Cross-platform Mobile Applications with Cordova / PhoneGap

PhoneGap Logo

In 1994 IBM released Simon, Simon is widely considered to be the first “smartphone” it was the first mobile device to use a touch screen and run apps. In the 90s and 2000s the mobile market has exploded with applications and devices, for developers this means needing to be able to develop apps for not only different size screens a but also for different platforms. Ideally it would be nice to find a cross-platform solution to write once and deploy “everywhere”. To account for different screen sizes we work with responsive design, where content moves fluidly to adapt to the size of the browser it is being viewed in.

 

Using responsive design works great for web applications, but what if we want to take our web application and  have it become a mobile application?  That is not as simple, to get our app to work on an Android device we need to rebuild it with the Android SDK, and then we need to build it again in Swift/Objective-C for IOS. Lucky for us there is an easy way to get the same responsive web app we built earlier to run as a mobile app on Android and IOS without having to rebuild it. Apache Cordova has created a technology that takes our HTML, CSS and JavaScript and transforms it into a mobile application that can be used across an array of different platforms.

 

In an earlier blog post we created a real estate rating application using different Google Material based design frameworks. Currently these applications are web apps and can be run off of your smartphone, but only through opening up your mobile browser and navigating to the page where the app is being hosted.

 

In this post, we will show you how to use Adobe’s PhoneGap – an open source distribution of Cordova – to simulate and build mobile apps using just HTML, CSS and JavaScript.

 

What you need to get started

  • A computer (We are using windows)
  • A mobile device  (We are using android)

 

Part 1 – Simulating and testing the application with Cordova PhoneGap

 

Step 1 ) Find a web application project to work with

First you will need to have a project to start with. You can either use one of your own web applications or you can clone the app we will be working with. We are going to be using our real estate app from an older blog post about using different UI frameworks. You can clone the project here.

Step 2) Install the PhoneGap Desktop Application

Now that we have our project we need to install the PhoneGap application on our computer. Click this link to download the desktop application.

Step 2) Install PhoneGap on your mobile device

On your mobile device you will need to install the free PhoneGap developer app. It is available on iTunes, Google Play and the Windows Phone Store.

 

Step 3 ) Create your app template and connect your devices

The next step is to create our app template. To do this open your PhoneGap desktopPhoneGap Mobile App Template app and click the add button on the menu. Select ‘Create new project’. Then select the blank project. There are also some other templates available for you to play with later on. Next, choose a folder on your file system in which to place the app. Give the app a name and ID click to create the project.

Now that you have your app template created open your mobile PhoneGap developer application. Replace the server address with the one highlighted in your PhoneGap desktop app and try to connect.

PhoneGap Mobile App Template - Server Address

If you can not connect try these steps to debug:

  • Check that you have the latest versions of the mobile PhoneGap developer app and PhoneGap desktop app (if you just downloaded them you should)
  • Make sure you do not have any firewalls blocking your connections
  • Check that your computer and phone are on the same wifi network

 

Step 4) Replace the template application code with your code

Go into the /www folder in your new template application. This is will be the root of your application code. You will notice that there is already an index file referencing the Cordova framework through a <script> tag:

<script type="text/javascript" src="cordova.js"></script>

You will want to copy your application files to the /www folder, open up your index.html, and add the Cordova <script> tag to your application. At this point you can save your index.html and you’ll be ready to test how well your app runs on a device.

Here’s a screenshot of what the demo-app-house-materialize project looks like with the Cordova script reference.

Adding Cordova Framework to Your Code

 

Step 5) View your app on different mobile devices

Select the play button to start the server for your application in the PhoneGap desktop app. You will now be able to connect to it via the PhoneGap developer app on your mobile device. When you click to connect in the PhoneGap developer app on your phone PhoneGap will wrap your HTML/JS/CSS application into a mobile friendly package. Then your application will be launched on your Android or iOS mobile device.

Step 6 ) Enhance, review, repeat

You can now enhance your app so that the mobile app looks as good as the web app looked. One example would be to modify the CSS file to make the container of the app 100% instead of a fixed pixel width.

 

Part 2 – Packaging our project as a mobile app

Step 1 ) Get started with PhoneGap Build

Go to:  PhoneGap BuildPhoneGap Build Logo

Click ‘get started’
Pick your plan (we are using the free plan)
Create an account and log in

 

Step 2) Uploading your project

Before you upload your app you will need to prep it. Whether the app is in a git repo or is uploaded as a zip file it will need an application descriptor config.xml file. We will go the zip file route:

  1. First, copy the config.xml from the PhoneGap project root to the /www folder that represents your “app”.
  2. Make sure all of the libraries, fonts, icons and frameworks you are using are also properly referenced and exist somewhere under your /www folder.
  3. Zip up the /www folder.

Now, to upload your app:

  1. Log into PhoneGap Build
  2. Click the ‘+ new app’ button
  3. Click the ‘Upload a .zip file’ button and select the zip file you created.

Once the zipfile is uploaded you will see a screen similar to the following screenshot.

PhoneGap Build - App Uploaded

 

Notice that in addition to building your app, you have the options to enable debugging and enable hydration. Debugging gives you access to a set of tools similar to the debugging tools available in your browser. Hydration helps with pushing code updates automatically.

If you want to generate the installation assets for each platform click the ‘Ready to build’ button. Doing this will result in the following screen.

PhoneGap Build - App Built

 

Step 3) Downloading your installers.

From the screen posted above you can see that by default you will have the ability to download builds for Android, iOS and Windows Phone. Although you can immediately download install assets for Android and Windows Phone right after building, you will need to provide a signing key for iOS before you can create iOS builds. Here’s some info on that: http://docs.phonegap.com/phonegap-build/signing/ios/

We will download an Android APK installer. Click on the Android button and a browser download prompt will display. Choose a folder on your machine to save your APK.

 

Step 4) Run the app on your Android phone
  • On your Android device, go into your security settings. Turn on the option to allow installation of apps from unknown sources.
  • Through some means, e.g. email attachment, get the APK install file on your android device and open it.
  • When you open the file it will ask you if you want to install it and at that time choose yes.
  • Congratulations you’ve now converted your web application into a mobile application and it’s running on your mobile device!

 

If you would like to view our final Android project you can download the apk file.

Sources

Share this

Leave a reply