Build Mobile Apps with Google Map and Geolocation

Posted: December 27th, 2011Author:

In the past couple of weeks we have added Contacts device component as well as Geolocation device component (based on PhoneGap) and Google Map UI component (Contacts and Geolocation are on the Device palette, Google Map is on the Mobile palette) . In this post I’m going to show you how to use Google Map component to display any user entered location as well as use Geolocation service to display your current location.

The app looks like this (after entering New York, NY as location):

You can try the app on your mobile device.

You can scan this QR code for example:

On Android devices, you might have to enable location in browser settings.

The first button (Show My Location) uses very simple JavaScript to get the location entered and then use it to show the location on the map. The JavaScript is invoked (via Run Custom JavaScript action) on click event and looks like this:

We first get the location entered using JavaScript API. Some basic error checking to make sure something was entered. Then we use the API again to get the Google Map component. Then we set the address and update the component. That’s it.

To get the current location to display on the map, I first added Geolocation service based on PhoneGap’s to the screen:

Service input is not very interesting as we keep all the default values:

Once we get a location from the Geolocation service, we want to feed it to the Google Map component. Service output mapping looks like this:

and here is how the same mapping looks in visual Data Mapping tab:

As you can see, the Geolocation service is invoked and its result is then mapped to the Google Map component. The only other important thing is invoking the service. The invocation is done like this. We first invoke the service on button (Show My Location) click. Because we need the map to be updated only after Geolocation service has completed and not asynchronously, we use the services Success event to run JavaScript to update the map with new location values:

This will ensure the map update occurs only after the Geolocation service has completed.


If you need any help, you can always find us on the forum, Twitter, Facebook or via email.

Building Mobile Apps in the Cloud with and PhoneGap

Posted: December 20th, 2011Author: – the easiest platform for building mobile apps in the cloud is a cloud-based mobile apps builder. It lets developers build HTML5/JavaScript and native apps very quickly, entirely in the cloud. There is nothing to download, nothing to install, and nothing to configure. Just create a new project, and you are ready to start building your mobile app with HTML5/JavaScript and PhoneGap.

Continue reading Building Mobile Apps in the Cloud with Tiggr and PhoneGap

Using 3rd Party JavaScript Library In Your Mobile App

Posted: December 15th, 2011Author:

One of the really great benefits building a mobile Web app is that you can use any custom JavaScript, a 3rd party library or something you wrote yourself. In Mobile Apps Builder, you build mobile Web apps (which alter can be exported as native with PhoneGap) and so you can use any custom JavaScript. How do get the custom JavaScript code in the app? There are three ways.

First is using Run Custom JavaScript action attached to any HTML event. For example, let’s say you want to invoke some custom JavaScript on button click:

This approach works well but usually should be limited to just doing “small” tasks.

The second approach allows you to import a full JavaScript file/library into your app. It’s done by creating a new JavaScript file (asset) and you get the following options:

As you can see, you can easily create a file by importing it from a URL or load it from a file.

The last option is to add a JavaScript resource via project profile (Project > Project Profile > External resources):

This option will link to the specified file.

Happy mobile development. Mobile Apps Builder Now Uses PhoneGap version 1.2

Posted: December 13th, 2011Author:

We recently upgraded to use PhoneGap 1.2. Any mobile app (native) that you create, PhoneGap is automatically installed. You can export the app as native and also use PhoneGap API in your mobile app.

You can always find the version number by going to Project > Project Profile > External resources:

New Mobile Tutotial: Building Clickable List Mobile App with HTML5 Local Storage

Posted: December 12th, 2011Author:

Mapping REST Service to jQuery Mobile UI – Visual Data Mapper

Posted: December 12th, 2011Author:

Mapping mobile UI to service is one of the most basic tasks in any mobile app (or a standard Web application). Input data entered by the user is sent to the service (input), the service is invoked, returns data (result) is sent back to the app for displaying results. Mobile Apps Builder makes it super easy to map UI to service. Let’s look at an example.

REST service settings:

REST service input parameters:

REST service output parameters:

To open the standard mapping editor, there are two buttons in properties for a service:

Mapping UI to service look like this:

The service input parameters are on the left and are mapped to input components and properties on the right.

Mapping service back to UI for displaying the result looks like this:

The service output parameters are on the left and are mapped to output components and properties on the right.

Now there is even a more visual way to do the same. There is a new Data Mapping tab in the main editor, clicking the tab will open a visual data mapping editor:

That’s a pretty cool way to do mobile UI to REST service mapping.

Rapid Mobile App Development with StackMob and

Posted: December 8th, 2011Author:

This article was written by Crawford Comeaux and published on StackMob blog. Crawford is an independent mobile app developer that recently participated in Startup Weekend down in Baton Rouge, LA and ended up winning. This post is about how he used StackMob and to quickly build a web app prototype during the Startup Weekend event. His app is called AudienceAmp and he needs your help to win Global Startup Battle.

Here is his story: TRULY Rapid Prototyping with StackMob and Tiggr.