Cut Mobile App Dev Time with PhoneGap Wakanda Studio Extension

Saad Mousliki

In my previous article,  where I introduced the use of Wakanda and PhoneGap to build a hybrid mobile application that manages a list of contacts, I manually packaged the client side part of the application before uploading it to PhoneGap build.

This packaging process was too tedious, taking about 10 steps. To deal with this, we have developed a new Wakanda Studio Extension that performs all the packaging of the client-side application and provides a .zip file as output.

Now, I’ll show you how to use the extension so you also can cut your development time.

Background 

Before starting this tutorial, you should have some basics on HTML5, JavaScript, the mobile development world, and installing Wakanda. 

In this article I’ll use the Wakanda DataStore  as a NoSQL database that will be remotely accessed by our native app to get data using REST/HTTP and JSON format, so having also some basics on working with Wakanda could be very helpful. 

What the Extension Does

After creating your project using Wakanda Studio, click the Extension button on the top side of the Studio, enter your settings and click on the Package button.

The extension will then:

  • create a new folder that will contain the package
  • modifies the HTML page by adding the PhoneGap library:
    <script type="text/javascript" src="phonegap.js"></script>
  • adds these two lines to the index-smartphone.js to redirect the http request to the given IP address:
    WAF.core.restConnect.defaultService = "cors";
    WAF.core.restConnect.baseURL = http://wakanda server_url:application_port
  • adds other lines to the same file to get the WAF API from the local client side folder
  • adds the config.xml file to the package with the given settings (for more detail see: https://build.phonegap.com/docs/config-xml)
  • adds CORS support: Cross Origin Resource Sharing to the server side code, to allow the REST/HTTP call from the mobile device

The following diagram gives an overview of the process:

  1. Create a Wakanda Project, which is a simple HTML5, CSS3 and JavaScript mobile web site.
  2. Use the PhoneGap extension to package the project.
  3. Upload the .zip file to PhoneGapBuild.
  4. Generate the native application (.apk, .app, …etc.)
  5. Install in test the application in your mobile.

 process

 

 Using the Extension

Before you start using the PhoneGap Wakanda Studio Extension, you should download Wakanda Version 4 production release. After downloading Wakanda, you will have two folders: the first one for Wakanda Server and the second one for Wakanda Studio. Copy the PhoneGap folder of the extension into Wakanda StudioExtensions.

1)   Create a Project

Open the Wakanda Studio and create a new Solution.

create

Give a name to your solution.

name

Go to WebFolder, double click the index page.

index page

Go to the Smartphone page by clicking in the upper right side of the Studio.

smartphone

Now, design your interface by adding widgets from the right panel, and also by using the properties panel in the left side.

In my PoC, I’ll add a button to the page, so when clicking in the button the location of the device will be displayed in the alert.

add a button

Rename the button to be “get geolocation parameters”.

Now, click on the button and in the right properties panel choose the On Click event.

on click

Write this code to get the device location and display it on the text field widget :

button1.click = <b>function</b> button1_click (event)

    {

        navigator.geolocation.getCurrentPosition(onSuccess, onError);

    function onSuccess(position) {

        var coord = 'Latitude: '  + position.coords.latitude  + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />' + 'Altitude: ' + position.coords.altitude + '<br />';

        alert(coord);

    }

  // onError Callback receives a PositionError object

  //

    function onError(error) {

        alert('code: '    + error.code    + 'n' + 'message: ' + error.message + 'n');

    }

};

    };

Now, the application uses the PhoneGap API to get the mobile location.

The application doesn’t have any interaction with the server, so we will be more interested in the client side code than server side.

2)   Package the Project Using the Extension

Now, click on the PhoneGap Extension in the Studio and set the settings.

NOTE :    You should set all the details to enable the package button.

settings for packaging

Don’t forget to check the Set Preferences checkbox to allow the application to use the Geolocation API of PhoneGap.

package button

Now, click on Package button at the bottom of the settings.

3)   Upload the Zip File to PhoneGap Build

As an Output of the extension you will get a zipped file which should be uploaded into PhoneGap build to get the native mobile application that you should install and test in your mobile.

upload zip

After generating the native application for each device, we download the .ipa to test it in a simulator or a real smartphone.

NOTE : You should have an app store provisioning key to build an IOS application and get .app to test it in your mobile or in the simulator.

4)   Install and test the native application

testapi 

After installing the application on an iPhone simulator, we can run it by clicking on its icon in the menu.

run on iphone

After clicking on the application icon, we will get the same page that we have created using Wakanda Studio.

created

After clicking the “get geolocation parameters”, the alert appears and shows up the geolocation parameters as in this image.

alert

Conclusion

Using the PhoneGap Wakanda Studio extension will help web developers go native without any need to manually package their applications. I created this demo hybrid application in 10 minutes, and after using PhoneGap build I have six native applications: Android, IOS, WindowsPhone …etc.

The extension is still in the development stage and could have some bugs and limitations, so I need more feedback to enhance and help the web developers migrating their web applications to mobile phones.

Let me know your comments.

Download the application.zip

Github: https://github.com/saadmos/PhoneGapWakandaStudioExtension

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • John Karpowski

    Great tool! Thanks Saad

  • http://efren-martinez.pro Efren Martinez

    i didn’t know wakanda, looks good, i’ll try it , thanks !

  • http://yeastycode.com Popsana

    This wakanda sounds interesting.

    I think I’m gonna give it a try.

  • tomByrer

    Thanks for the walkthough!

    How can we test on a real iPhone/Android please?

  • Saad Mousliki

    You’re welcome :)

    The use of PhoneGap Build is explained in this video : http://www.youtube.com/watch?v=u6YBDqIFlvg

  • desmond chee

    Hey,

    I’m lost in this tutorial.
    I couldn’t find the “Extension button” on the top side of the Studio?
    Do you have any screen capture to show?

    Thanks.

  • desmond chee

    One more question:
    How to add the PhoenGap extension?
    I copy the phonegap folder to studio/extensions/ but also cant see it in Wakanda?

  • Saad

    Hi desmond,

    You should rename the extenson folder to be “PhoneGap”, and also use the Wakanda 4 production release.

    If you still have any issue don’t hesitate to ask !