Cut Mobile App Dev Time with PhoneGap Wakanda Studio Extension

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.

 
 

 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.

Give a name to your solution.

Go to WebFolder, double click the index page.

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

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.

Rename the button to be “get geolocation parameters”.

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

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.

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

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.

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

 

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

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

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

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