Blog

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:

var location = Appery ('location');
if (location.val() == '') {
   alert ('Please enter a location.');
   return;
}
var map = Appery ('googlemap1');
map.options['address'] = location.val();
map.refresh();

We first get the location entered using Appery.io 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:

var map = Appery ('googlemap1')
map.options['address'] = '';
map.refresh();

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

Result:

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

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 Appery.io 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.

We recently upgraded Appery.io 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.

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

New tutorial shows how to build an app with clickable list (master details) and uses HTML5 Local Storage.

Building Clickable List Mobile App with HTML5 Local Storage

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. Appery.io 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.

Appery.io Mobile Apps Builder recently added a number of new components: Contacts, Geolocation, and Google Map. Contacts and Getlocation are new native components and are located in Device palette:

This post is going to show you how to use the Contacts component. Once a new mobile app project is created (make sure to select Blank Mobile App, from Native tab), simply drag and drop Palette > Device > Contacts component into the mobile screen. Once the component is added, it will be shown on the left-hand side.

To keep the example simple, we are only going to display name and phone number of a contact. To display the contacts, we are using a List component and placing two Labels inside it, one for name and one for phone number. It looks like this:

Notice that we also mapped the collection of all contacts (top most $) to the list component itself.

Next is we need to map the component output to the UI. Output mapping looks like this:

As you can see above, we are only mapping the contact name and contact email. Just a few more things left to do.

Add a button to load the contacts:

Add click event to the button and attach Invoke Service action, selecting the contacts service (contacts1).

We are ready to test. Because this is a device component, we would need to test the app on the actual device. But, there is an easier way to test this service. Open Project > Services > Contact service, then open Echo Service panel. You will see some sample date. Click Enable Echo.

This is a sample contact data and a very simple way to test the app. Using this data we can now test this in the browser.

Click the big Test button to launch the app, the result will look like this:

Now we are ready to try this using the contacts on the device. Simply turn off Enable Echo. Save. Now when you ran the app, it will load contacts from your device. The easiest way to run the app on the device is using Appery.io Mobile Tester.

We just added two new tutorial. Try them today:

• Building RSS Mobile App
• Building Hello World HTML5 Mobile App With Local Storage

As Appery.io Mobile Apps Builder continues to grow, we are getting more and more questions. I figured it would be a good time to summarise all the places and ways you can get help and also submit/vote for new features.

Docs and getting started

All Appery.io docs, getting started, videos, how-to’s, future plans and more are located at help.appery.io. If someone is not there, just let us know and we will add it!

Appery.io forum

The Appery.io forum can be found at http://getsatisfaction.com/apperyio. We recommend to use Appery.io forum as the place to ask questions. Why? Because using the forum other users can see and search for answers. Other Appery.io users maybe be able to help you as well. If you have a question on your account information or want to share a private REST service URL, don’t hesitate to use email (below).

Voting for new features

Let’s say there is a new feature you would like us to add. Voting for new feature is very simple. Just go to Popular ideas section and enter your feature.

Support email

If you feel more comfortable with email, just send us your questions to support@appery.io

Send questions from Appery.io

When you open a Appery.io project, at the bottom of the screen you will see the following field:

Just enter a short question and click Submit. We will get an email with your question and reply to it.

Twitter

Twitter is a great way to get help, you can find us at @apperyio.

Facebook

Facebook is also a great way to get help, you can find us at facebook.com/apperyio.

No matter which help option you select, we will try to answer your questions as soon as possible.

In the context of mobile apps, basic access authentication is way for a Web browser to provide user name and password when invoking a REST service. A REST service that requires basic access authentication will look like this:

https://username:password@www.host.com/products

As you can see we are using https: and passing the username and password to the service.

Working with REST services (that return JSON or XML) is very easy in Appery.io Mobile Apps Builder. Appery.io comes with a service editor where you define service settings such as URL, and data format type (JSON, JSON, or XML). Request Parameters – for defining service inputs. Response Parameters – for defining service outputs.

Service properties for Twitter Search REST API:

Another very important feature of the service editor is the ability to test the service right from Appery.io. Here is an example testing Twitter search service:

From this screen you can also automatically create the service’s response parameters by clicking Populate Response Structure button.

Now, if you have a service that requires basic access authentication, you would simply enter the URL in the service settings:

The next step is usually to enter service request parameters and then test the service. But, when you test the service, the service will fail with a message like this:

Why does it fail? When you use a URL such as: https://username:password@www.host.com/products, basic access authentication is only supported by the Web browser. When you test the URL inside Appery.io, it does a regular GET request, without the basic access authentication and the service fails. When you run the actual app, everything should work, as request will be coming from the Web browser. We are looking at how to update the test feature to support basic access authentication.

What if you still want to create the service response parameters automatically? That’s still pretty easy to do. Run the service in Web browser. Copy the output. Open Response Parameters panel in service editor. Click Populate from Sample Response. Paste the response. Click Populate Response Parameters. That’s it. Again, keep in mind that when running the mobile app, everything will be working.

Navigating between pages in Appery.io is very simple. You first add an HTML event to a component, such as click for a button, and then add Navigate To Page action where you select the page to navigate:

This works very well, but it will replace the entire page. An alternative way to navigate or transition between pages is to use jQuery swipe transition which in my opinion looks better. Here is how to do it. You use the same event, such as click for a button. Then, we add Run Custom JavaScript action with the following code:

navigateTo('end', 's');

The first argument is the page name. The second argument indicates that a swipe transition should be done. That’s it. You are probably wondering why not do this via Navigate To Page action? It will be possible soon. We are going to add a check box so you will be able to select what type of transition you would like, a page replace or swipe. For now, this is a very simple work around.

Want to try it?

Just scan this QR code: