Blog

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 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:

Type a Tropo application name, and choose Scripting API:

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

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”:

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:

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:

In your Appery.io app, create the following 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:

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:

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:

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”:

Create the following mapping for REST service Request:

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:

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!

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.

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:

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:

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:

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:

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.

The Appery.io team released a number of really cool features over the weekend. Here is what’s new.

It’s faster

We made a lot of things go faster. You will see a big app builder speed improvement (and we are still not done, more speed is coming).

Easily schedule server-side jobs

You are building an app that needs to check for inventory once every hour or once a day? Now you can easily do this with new Server Code scheduler feature. Because this is a server-side script, the actual device can even be offline, but the script will still run. You pick a script and just set the schedule to run:

Manage app data and send push messages with Customer Console

Built a restaurant app for a client and would like the restaurant owner to manage the menu or send push message for special promotions? Now you can easily create a special Customer  Console for an app and let the client manage the app data and push messages. With the just launched Customer Console, the client can edit app data (data from database), and send push notifications, all from a user-friendly console (and you don’t need to be involved). You can even publish the Customer Console to a custom domain.

Get app insight with Google Analytics

Now you can easily collect statistics from you app by using the Google Analytics. Watch how many users use the app, or analyze data for certain periods. All the power of the Google Analytics is in your Appery.io app:

Styling the app with CSS is easier and faster

Earlier, when working with CSS  you have to test your app every time you want to see the changes. Now, you can see all the changes based on your CSS files directly inside the Appery.io app builder without the need to launch the app in the browser. Just write or edit the CSS and switch back to page to see the result:

Manage binary certificates in one place

New and convenient certificate management tool helps keep all certificates in one place. Mark certificate as default to be used by all apps, or choose a specific certificate for an app in Project > App settings. As before, you can auto-generate Android certificates inside the Appery.io platform:

Quickly build and deploy for Windows Phone

Need to build a binary for Windows Phone? It’s now as simple and fast as building for iOS and Android:

Customize and integrate more with additional Webhooks

We launched Webhooks in January to allow easy integration with other systems. In addition to app specific events (right screen shot), we just added account-wide Webhooks (left screen shot) such as App created, App removed and App renamed. With new Webhooks, you get more options to integrate with other systems:

Custom domain HTTPS hosting

Appery.io apps can be hosted on custom domain, and now the custom domain options also supports https.

As always, if you have any questions, feedback or comments, feel free to contact us at support@appery.io, post something on our forum or ping us on Twitter.

Google Maps is probably the most popular map widget used in the mobile apps today. Working with Google Maps in Appery.io app builder is very easy but as the same time is not very different than using other dev. tools. To add a Map component, simply drag and drop it from the palette onto the page:

Rename the Map component to google_map. This is done so it’s simpler to reference the component from code.

Next you can create your own JavaScript class and define map variable as following:

var map;
function initialize() {
    map = Apperyio("google_map").gmap;
    if (!map)
    {
        setDelay();
    }
    else
    {
        directionsDisplay = new google.maps.DirectionsRenderer();
    }
}

function setDelay()
{
    setTimeout(initialize, 50);
}

Google Maps is usually loaded asynchronously, so the approach with delay (as mentioned in code above) can be handy. This will ensure the map is completely loaded before you try to use it.

Generally that’s all you need to use Google Maps JavaScript API. All the actions you want to do next you can make based on Google Maps JavaScript API. Lets say you want to show direction from point A to point B. Place the button on the page and run following JavaScript by clicking on it:

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

var request = {
origin: 'Los Angeles',
destination: 'San Francisco',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
directionsDisplay.setMap(map);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
else
{
alert("Directions query unsuccessful. Response status: " + status);
}
});

The directions will be shown on the map:

To place the marker on the map you should provide latitude and longitude values of a certain point. Try to run following JavaScript code and you’ll see how the marker drop on the map:

var markerLatLng = new google.maps.LatLng(37.913597,-122.066059);

var marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    title: "Walnut Creek, CA",
    animation: google.maps.Animation.DROP
});

You can also place markers based on geographical names, not latitude and longitude. In this case you should use Google Geocoding services, to convert user-friendly names to latitude and longitude values. Create a REST service in the app builder with the following URL:

https://maps.googleapis.com/maps/api/geocode/json

You’ll get a coordinates (latitude/longitude) as a response of this service, and you of course can use them to add markers.

Any layers provided by Google Maps can be added too. Here is an example for Traffic layer, just run this code by clicking on the button:

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

Traffic layer in action:

As you can see using Google Maps and its API is very straightforward in Appery.io app builder. Check out our Google Maps section for more detailed tutorials.

OAuth is an open protocol to allow secure authorization from web, mobile, and desktop apps. However, making  OAuth work in your mobile app is not a simple task and often takes a lot of time and effort. Using the OAuth.io service is a great and simple way to save time, and make the authentication pretty much work out-of-the-box.

OAuth.io service can be easily integrated in Appery.io app. There are two ways to setup the OAuth.io plug-in in Appery.io app:

Include OAuth.js as JavaScript asset

This approach can be helpful when developing a mobile web app. Apps with OAuth.js included as JavaScript asset work from browser and can be quickly tested by clicking the Test button. Such approach saves development time because you don’t need to install the app on the device every time after making changes. These are the steps:

1. Go to OAuth.io web site and download the latest JavaScript library.
2. Upload this library to your Appery.io app by choosing Create New -> JavaScript -> Create from file.
3. You have to remove or comment the if statement on line 193 in that file because the Appery.io app already contains some methods with “OAuth” name.

Include as PhoneGap plugin

Apps with OAuth.io service included as PhoneGap plugin will not work from the browser. Such apps should be built as binary and installed directly on the device. Steps for adding OAuth.io as PhoneGap plugin are almost identical to adding any 3rd party PhoneGap plug-in:

1. Download repository from github plug-in page.
2. Create new folder for this plugin in the Appery.io app and upload oauth.js:
3. Add the following line of code to the very beginning of this file:
   • cordova.define(“com.phonegap.plugins.oauthio”, function (require, exports, module) {
     and the closing bracket to end of file “}”.
   • Edit the cordova_plugins.js file by adding plug-in description.

Once the OAuth.io included in Appery.io app the same code can be used to initialize and authenticate. See the OAuth.io documentation for code examples.

Examples

Adding Oauth.io service to your app is pretty simple.  See our detailed tutorial where we describe how to authenticate with Google and how to post to Facebook.

Being able to launch the native dialer app or SMS app from the app you are building might be a very useful feature. For instance, the app you are building might display a list of restaurants in the area with a phone number. You want to be able to click the number and call the restaurant. This functionality can be easily done with calling the “tel:” or “sms:” and passing the needed values. Here is the simple Appery.io app that contains just a two buttons:

Here is the JavaScript code for the “Send SMS” button:

window.location.href = "sms:+375292771265?body=Hello from Appery.io!";

Such code will open the SMS typing window with predefined text and phone number as following:

Second button has the following JavaScript code:

window.location.href = "tel:+375292771265";

Clicking on that button will open the dialer with pre-populated phone number:

It is not possible to programmatically call or send SMS without opening the appropriate window due to the security reasons.

iOS has some nuances when dialer or SMS window should be opened. Try to use such code for iOS platform:

window.open('tel:+375292771265', '_system');

Or for SMS:
window.open('sms:+375292771265?body=Hello from Appery.io!', '_system');

Please also note that these protocols (tel: and sms:) might work differently depending on OS/browser versions. On Android, you might get different functionally depending what app is selected for sending SMS messages.

Instead of using the native SMS app, a number of services such as AT&T and Twilio provide APIs to send SMS messages. Appery.io has plugins for AT&T and Twilio SMS API.

An app that has multi-language support is always better than the same app that supports just one language.  Appery.io app can be easily upgraded with multi-language support by using the i18next plug-in. This post will show you how to do it.

There are few steps to add the multi-language support:

1. Download i18next.js from the i18next web-site and upload it to WEB_RESOURCES folder in Appery.io app builder.
2. Create folder structure that corresponds to i18next structure and upload translation files in JSON format:
   
3. UI components that should be translated must be marked with special attributes: data-i18n, and data-i18n-target. Read more about it in our detailed tutorial.
4. Initialize the plug-in via JavaScript specifying needed options as initialize language (can be retrieved from the browser or device language) and fallback language. Fallback language is very handy feature and it’s define what language should be used in case of missing language or translation.

Downloading of translation files will take some time on initial app start up. There is no need to create any preloaders as all the files will be loaded automatically. It’s a good idea to use launch images to show that the app launching/loading. Once the translation files are loaded, properly marked components will be automatically translated accordingly to the initialized language.

To build an app with multi-language support, try the multi-language tutorial and read the i18next documentation.

Every modern app consists of two parts: front-end UI and backend. Backend services can greatly extend your app logic and help implement many useful features.  Appery.io provides a possibility to create your own server scripts without the need to maintain servers yourself.  Server code scripts (that’s how this feature is called in Appery.io) can be invoked from the app via a REST API and will  run on the Appery.io servers.

Using server code scripts provides the following advantages:

• Broader app logic
  Use server code services to extend your app logic. You can implement various backend features such as Restore password and others.  Some code logically belongs on the server.  For example, if you need to process data retrieved from multiple sources before presenting the results to the user, its more efficient to perform that logic in the server.
• Reusable code base
  Appery.io server scripts can be self-contained app modules which can be used from different apps. You can implement one handy feature and re-use it from all of your apps instantly and without any additional coding.
• Code accessibility 
  As Appery.io provides powerful a collaboration feature, server code can be shared with other users too. This makes team development much easier and faster.
• Extend with powerful 3rd party libraries 
  Server code supports several predefined libraries such as Underscore.js, moment.js, handlebar.js and others. You can also upload your own or other 3-rd party library and use it from the Appery.io. Libraries can be shared too!
• Keep your users on the latest version of the code.  Another important advantage of server code is the ability to modify your app without having to redistribute your app to your users.  If you make changes on the client side, that requires an update in the app store, and an update by all your users.  But if your logic is server based, you can be sure that all your users always have the latest version of your app.

The server code console can help test and debug your scripts from one place without the need to run REST API services. Want to add custom app logic to your app? Start with Server Code by trying this tutorial! And, to learn more about Appery.io Server Code, visit the documentation.

Many mobile apps use GPS sensors to track a user’s current location. For example, it could be a ride sharing app, fitness app, or a delivery app. This post shows how to build such an app in Appery.io. The app tracks your current location via  the device’s GPS sensor and stores the location into a database.

This is the app UI:

The GPS location is determined every 15 seconds (you can change the interval). The location is shown in the app and also saved into a cloud database. Because this is a native app (with PhoneGap), the app will continue tracking the location even if in the background or with the phone screen locked.

To try this app, download the app backup and create a new app from it. Keep in mind that you do need to build a binary file and install it on the device for testing.

Now you just need to configure the settings service with the correct database ID. This app uses a pretty simple database; it contains one collection with name Locations. This collection contains one column location with type of Geo point:

Open the GPSLocationTracking_settings file and change the database_id to your own.

Once the database ID is changed in the settings file, the application is ready to go.

Let’s take a quick look how the app works:

1. The GPS service starts initially after the Device ready event and runs every 15 seconds.

Here is the JavaScript code:

2. You can also change how often the GPS will run. To apply a new interval, first stop tracking, and then start it again:

3. In the case that the GPS fails to determine the location, an error message will be shown:

4. Every time a new GPS location is retrieved, the location is saved into a cloud database:

This is a starter app that uses the GPS sensor to track your current location. It’s very easy to add more features. For instance, you can add Google Reverse Geocoding service to get the address of a place. Or, you could also show all locations on a map.

If you want more practice, try the Building a mobile app with Google Maps and Geolocation tutorial.

Last November, we partnered with VisionMobile to help them reach out for their Developer Economics survey. Now the data for VisionMobile’s well-known reports on the state of the developer nation is out. The report features in-depth analysis and insights into the key issues in the app economy, including platform prioritization, going beyond tablets, trending revenue models, and making the right choices in developer tools.

Download the full report for free.