Using the Google Maps API: Directions, Geolocation, Multiple Markers, and Layers

Adding a map to your mobile app can provide great value to users. Maps used together with a smartphone can solve a wide range of tasks, whether it’s a pizza delivery app, GPS navigation, or travel guide with attractions. One of the most popular online maps is Google Maps.

Appery.io provides a convenient way to work with Google Maps for mobile apps – a Google Map component with a set of configurable properties and a preinstalled marker. All you need to add the Google Map into your app is to drag and drop the component on the page. That’s all: Google Maps will be loaded when the page is displayed.

google_maps_logo

Read the rest of this entry »

Building a MusicShop App Using Model and Storage

Recently, the Appery.io App Builder was updated with several significant features. One of the most important and fundamental changes was the introduction of Model and Storage notions. To show the best practices of using these features, we created a MusicShop app and step-by-step tutorial which describes in detail how to build such an app from scratch. This tutorial also has a MusicShop app backup attached to allow you to pay more attention to Model and Storage usage (you shouldn’t create the app step-by-step in this case, just create it from the backup).

Read the rest of this entry »

Building Mobile Apps with Tropo API in Appery.io

Working with mapping has been improved to provide you with a more efficient and user-friendly way of binding your data. Now, with the upgraded Mapping feature binding your data is more intuitive; it also provides more features and flexibility. This tutorial uses old mapping, and will be updated shortly. The new mapping uses the same concepts. The following page shows how to migrate the old mapping to the new mapping.

Tropo provides a powerful cloud API that can be used to add real-time communication features to your app. Using  popular web technologies such as PHP, JavaScript, Ruby and many others, it makes it easier to create and control network features.

tropo_log

Tropo also provides a great REST API that lets you configure and control Tropo applications through the use of RESTful methods. This includes the ability to create new Tropo apps, add phone numbers to them, delete applications, and much more. And as Appery.io provides a very comfortable way to work with REST API’s, it’s unbelievably easy to add Tropo communication features to your Appery.io app.

But before you begin, the Tropo application should be created by using the Scripting or Web API. Lets start with creating a simple Tropo app!

Sign up on the Tropo website, and create a new app:

tropo_new_app

Type a Tropo application name, and choose Scripting API:

tropo_basic_info

Now you should create script. Click “New script” to create it:

tropo_new_script

The text editor will appear. Lets add some simple code:

say('Hello from Appery.io!');
call(numberToDial);
say("Hello, " + customerName + "! There is a message for you: " + msg + "!");

Code explanation:

Function say will pronounce “Hello from Appery.io!” text by using the Tropo’s Text-To-Speech engine. After that, the phone number that was passed as a REST parameter will be dialed. Once the call is accepted, a second phrase will be pronounced. Note that the second phrase contains REST parameters too.

Enter the script name, and click “Save.” Don’t forget to specify the script file extension as “.js”:

tropo_new_script

Click “CREATE APP,” and you’re done with the Tropo side. You can test your Tropo app directly from the browser by using Phono. Click “Call App from browser” and then click the phone icon in the bottom left corner:

tropo_call_from_app

Note that you can’t test the call function directly from the browser.

Now you can launch your Tropo app via REST services from Appery.io.

Copy the voice API key to your clipboard:

tropo_api_key

In your Appery.io app, create the following UI:

tropo_ui

If you not familiar with Appery.io yet, we recommend looking at this very simple beginners tutorial.

All the application magic will be kept in a single REST service that will start the Tropo session. Create the REST service and specify the following settings:

tropo_rest_settings

As you can see, there is the Appery.io Proxy provided for this REST service. Click “New channel,” enter a new proxy name for this REST, and then click “Create” to create a new proxy channel directly from the Appery.io builder.

Note: Read about the Appery.io proxy via the link.

In the Request tab, you can specify parameters and their values that can be passed to the Tropo app. In our case, the Request parameters are the following:

tropo_request_parameters

Go to the Test tab and click “Test.” If everything was done correctly, you’ll see a “Test successful” message, and a REST service response that contains both token and id:

tropo_test

Note that you should obtain phone number to make calls, otherwise the script will fail. You also need to link the UI and REST service parameters.

Switch to Data tab, and create a new datasource based on this REST service. Click “Edit Mapping”:

tropo_rest_datasource

Create the following mapping for REST service Request:

tropo_rest_mapping

This will map data from the UI components to the REST parameters. If it’s difficult to understand, read about REST services and mapping.

Unlike the Request parameters, we will print the REST service response without mapping to print all its data. Open the Events tab, and create the following event:

start_tropo_session > Success > Run JavaScript. Add the following JavaScript code:

Apperyio('session_response').val(JSON.stringify(data));

Note that session_response in this case is the name of your Text Area component.

The last thing to do is to launch our REST service by clicking the button. Switch back to Design view, select the “Start session” button and add the following event:

start_session > Click > Invoke service > start_tropo_session.

Now you can test your app by clicking the “Test” button in the top right corner of the screen.

Click “Start session” and you’ll see the result:

tropo_test_app

If something above was not clear enough for you, check out the Appery.io tutorials and documentation.

Go ahead and create apps using Tropo documentation and the power of Appery.io!

Using Facebook API in Appery.io App

When building a mobile app in Appery.io, it’s very easy to use and connect to any APIs. Facebook provides one of the most popular and widely used APIs that you can as easily use in the app you build in Appery.io.

facebook-logo

Appery.io provides a really simple out-of-box approach to pass the OAuth protocol and connect with Facebook. Before building the Appery.io app you need to register as developer with Facebook and create an app. Once it’s done, go to Appery.io builder and import the Facebook API plug-in:

fb_import_plug_in

Once the plug-in is imported you need to specify Appery.io app ID and Facebook app ID in the Facebook_Setting file that listed under the Services folder:

fb_settings

One more thing to do is change the Start Page in App settings to Facebook_Login. After that you can test the app. You’ll see the Login to Facebook button, clicking on which will dial the OAuth log-in dialog, where you should enter your Facebook login and password. After successful authentication, information about you will be displayed at the Facebook_Me page:

fb_me_page

All of the Graph API features can be used the same way, but note, that some actions requires certain scope. You can change default scope parameter in the Facebook_Helper JavaScript file:
fb_tutorial_helper

That’s it, you can now invoke any available Facebook API.  Go ahead and see how to post a wall message in our detailed Facebook tutorial.

New Tutorials on Building Mobile Apps with Appery.io Backend Services

Appery.io Updates its New HTML5 App Builder with Windows 8 Support, plus jQuery Mobile 1.2, PhoneGap 2.2, and Push Notifications

Windows 8 Support

Windows 8

Appery.io new HTML5 app builder has been the default builder for the past couple of weeks and we continue to update it with new features. One such feature is new Windows 8 support. In addition to jQuery Mobile/PhoneGap apps, you can now build Windows 8 apps with native support such as Snap View, Search Charm, Share Charm, and Live Tile.

To create a new Windows 8 app, click the “More create options” link from the Apps page and then select Windows 8 App as the app type. Try our Windows 8 app tutorial.

jQuery Mobile 1.2

We also upgraded to a much better jQuery Mobile version 1.2.

Selection_773

PhoneGap 2.2

We also upgraded PhoneGap to version 2.2. This means Appery.io cloud build has also been upgraded to PhoneGap 1.2.

If you use Appery.io Mobile App Tester for Android – go and grab an update so it also uses the latest PhoneGap version.

Push Notifications

A long requested feature – Push Notifications feature has been added to Appery.io Backend Services.

Selection_772

Want to try it? Try our new Push tutorial.

New Tutorial: Building a ToDo App with Appery.io Backend Services

Build this app and learn how the app builder is fully integrated with backend services.

Building a Mobile Search App with Appery.io Database, Part 2

Last week we put posted Building a Mobile Search App with Appery.io Database tutorial that shows you how to search a database for a particular search term. The way the search worked, is that the entire word has to be matched. For example, you could enter ‘Apple’ but not ‘Ap’ to search. In this post we are going to show you how to use a regular expression to get all objects that start with a particular letter. As for our data, are going to use US States.

Building the UI

To start, the UI that we need looks like this:

  • For input we use a search component
  • Below the input we have a grid, with one column and a label inside.

That’s all we need for the UI. Let’s now create the database.

Creating a database

  1. Create a new database by going to https://appery.io.
  2. Go to Collections tab and click Import button.
  3. Upload States CSV file to the database. Once the collection is created, it should look like this:

That’s it for the database. Let’s now add a REST service to search this collection.

Adding a REST service

  1. In Appery.io app builder, select Project > Create New > Database Services
  2. Select your database
  3. Expand States collection and check Query service.
  4. Click import Selected services button. A query search for States collection will be created.
  5. Let’s test the service. As we want to make the search a little bit more flexible, we are going to use a regular expression. For where param, enter the following:
    {"States":{"$regex":"^C", "$options":"i"}}

    The above will return all states that start with letter C or c. “$options”:”i” is what specifies the query to ignore the case.

We are done with the service. Let’s move on to mapping.

Mapping the service to the page

The input mapping looks like this:

This is JavaScript mapping:

return '{"States":{"$regex":"^'+value+'", "$options":"i"}}';

This is output mapping:

Invoking the service

The last thing we need to do is to invoke the service. Select the input search field, then Events > Add Event > Search. Add Action > Invoke Service, select the service instance.

Testing the app

To test the app, enter any letter, for example ‘n’ and click the magnifying glass inside the search input:

Building a Mobile Search App with Appery.io Database

This tutorial will show you how to build an app that searches data stored in Appery.io database.

Let’s start with building the mobile UI.

Building mobile UI

Using Appery.io app builder, create a page named Phones and build the following UI:

  • Maker name is  a placeholder
  • Below the button ,there is a grid with two columns and a label inside each column.

Creating a database

  1. Create a new database by going to https://appery.io.
  2. Go to Collections tab and click Import button.
  3. Upload Phones CSV file to the database. Once the collection is created, it should look like this:

Creating REST services to access the database

  1. In Appery.io app builder, select Project > Create New > Database Services
  2. Select your database
  3. Expand Phones collection and check Query service.
  4. Click import Selected services button. Two services will be generated under Services folder. One is a settings service that holds the database id and the other one is the query service.

Open the service and then open Request Parameter panel. It should look like this:

Click Test. As we didn’t specify anything for where parameter, you should get all the phones in the collection.

Let’s now test the where parameter. Enter the value of {“Maker”:”Samsung”}, then click Test. You should now get only records where the maker is Apple.

Note that we don’t need to create the response parameters as the response was automatically created when we imported the services.

Adding the service to the page

  1. Select the query service and drag and drop it over the phone frame. A box will appear on the left-hand side indicating a service instance was added to this page.
  2. Rename the service instance to: query_phones

Mapping the service to the page

  1. Open Data Mapping tab
  2. Map the input component to where parameter:
  3. Click Add and enter the following code:
    return '{"Maker":"'+value+'"}';

    this means any value entered from the page will be used to search the database.

  4. Click on Response Mapping and create the following mappings:
  5. Go back to Design view.
  6. The last thing we need to do is to invoke the service. Select the button, then Events > Add Event > Click. Add Action > Invoke Service, select the service instance.

Testing the app

Run the app in the browser and enter either Samsung or Apple as value. For example entering Samsung will produce the following:

Displaying a message when no records are found

  1. Add a new label component just above the grid
  2. Rename the component to no_records and uncheck Visible.
  3. Select the button, go to Events. Add a Run Custom JavaScript action with the following code:
    Appery("no_records").hide();

    That’s to hide the label on every new search.

  4. Now select the service instance on the page, then Events > Add Event > Complete. Add Run Custom JavaScript action with this code:
    if (jqXHR.responseText == "[]"){
       Appery("no_records").text("Nothing found");
       Appery("no_records").show();
    }

    If nothing is returned, show the message.

  5. Test the app, if you enter anything other than Apple or Samsung, you should get the following:

 

 

Video: Building jQuery Mobile App Connected to Twitter Search API

Using SQLite Database with Visual Data Mapper

If you want to use SQLite database, get data from the database and be able to use Appery.io visual data mapper, this post shows how to do it. It uses a Generic Service to get data from the database.