Blog

The Appery.io team just released a number of really nice features. Learn about what’s new in this post.

App Builder improvements

New jQuery Mobile Popup component

The new jQuery Mobile Popup component gives you more power to build app UI.  The component can be used to notify the user to confirm an action, or just display any important information.

More List options

We added a number of properties to the list to simplify UI building. For instance, it is now easy to make the list read-only.

We also added the ability to manage the list items order. You can do this by using the Index property in the Properties panel:

A better way to select icons

Everyone likes icons, and there is now a better way to select one. If the component supports an icon (List, Button etc.), the Icon property will be available:

By clicking “Choose,” the icons list will appear:

This is much more fun as you can see the actual icon.

Cloud database improvements

The Appery.io cloud database got a number of very useful upgrades.

Indexes management

By adding the ability to manage database indexes, we allow you speed up the frequently used queries. It’s a good thing to use when transferring a lot of data between the devices and Appery.io backend:

To reduce data transfer and speed up the app, use the MongoDB Projection concept that the Appery.io database now supports. By using Projection, you can selectively retrieve columns from the database without the need to transfer excess data (columns). This will decrease the data being sent to the client (app), and also increase app responsiveness.

New ACL editor – for simplified database access rights

User access control is  now more flexible with the new ACL editor. You can specify access rights for each user separately, for all users at once, or just for the user that created a specific collection entry:

The Appery.io database now supports the Media Manager that helps manage files. You can upload and delete any sort of files directly from the database console by using it:

API updates

It’s now possible to get a file list based on the Files collection content and provided ACL for every file (you can of course control user access rights for files too).

Database versioning for more peace of mind

It’s always a good idea to make a backup of your database. With the new database versioning features, you can create versions (backups) of the database and restore to a particular version instantly:

Server Code improvements

To make development and testing faster, we combined the Script tab and Test tab into a single page. You can now quickly test the script and see the execution result without the need to switch tabs:

API update

The Server Code API was upgraded with a new service – multiUpdateObject. By using it, you can update multiple objects via a single REST service. See the Server Code API to learn what functionality can be used on the Appery.io server side.

Customer Console improvements

Customer Console is a great way to create a development process where a customer can manage databases and push notifications without the developer attention. The Customer Console adds the following new features:

• Export/import database data in JSON or CSV formats.
• Schedule push notifications.

Push improvements

To simplify working with Push, we have moved the Push tab together with the app. So now it’s a lot simpler; with every app, you can enable its own push capability: 

If you new to Appery.io Push Notifications, we recommend starting with this tutorial.

App exporting improvements

Now, when the app is exported from the Appery.io with “Release” checkbox checked, JavaScript files will be minified. This option works for all binary exports and reduces the final binary size. Head to the Exporting the app section if you want to know more about Appery.io app exporting possibilities.

With every new Appery.io update, our goal is to make app development faster and simpler in the cloud.

Follow us Twitter, and Facebook.  And if there is anything we can do better, let us know on the forum.

Building mobile apps with identity management wasn’t simple, until now. Auth0, a cloud service that eliminates the friction of identity for your app, and Appery.io, the only cloud platform with visual development tools and integrated backend services, are collaborating to make this happen. With the jointly created Appery.io Auth0 plugin, you can simplify identity management integration for your app, and this post will show you how.

Appery.io Platform

Appery.io is the only cloud-based platform with visual development tools and integrated backend services. Appery.io provides a powerful visual environment to build HTML5 and hybrid mobile apps connected to any API.

The Appery.io platform provides the following core features:

• Build HTML5 mobile apps and hybrid apps for iOS, Android, and Windows Phone.
• Drag and drop visual app builder for quickly building the app UI, with Source view for customizing the UI with any code.
• Connect to any cloud API service, and bind the service to the page via a visual binding editor.
• Integrated backend services that include: cloud database, push notifications, and server code.
• HTML5 app hosting.
• Fast testing in-browser, and on device via Appery.io Mobile Tester app.
• Collection of plugins that provide fast integration with popular API providers.

Read the rest of this entry »

Have you ever needed to perform operations in a certain time interval? For example – have you ever needed to check database records, and then based on specific conditions, send an appropriate push notification?

Some parts of this can be done via client-side code, but there is no guarantee that the user’s device will be online at the right time. The solution to this lies in one of Appery.io’s great backend features, Server Code.  If you aren’t familiar with it yet, here is a quick tip: Server Code enables custom and scalable business logic in the Appery.io cloud without the need to build and maintain server infrastructure. And one of the server code features is the jobs scheduler.

All of the scheduling logic can be found in a separate Jobs tab:

You will see schedule builder if you open it:

The basics of working with the jobs scheduler is simple – you choose the script that should be executed at a certain time or time interval. Then you should specify that time or interval. This can be done in two ways: by using the schedule builder or by using the Schedule expression:

Unlike the schedule builder where you simply need to select the needed parameters by choosing them from comboboxes, the Schedule expression retrieves values based on Quartz. Note one important thing – the Appery.io job scheduler doesn’t use a seconds parameter in Cron expressions. So, if you use an expression such as 0 0/5 * * * ? you’ll get an error. Remove the first number (zero in this case) and the expression will be correct – 0/5 * * * ? .

The minimum interval between script invocation is based on your plan. See our pricing to learn more.

All of your scheduled scripts are displayed at the bottom of the page:

If you no longer need to execute some of your scripts, turn them off by toggling the on/off button or delete it by clicking the cross icon.

Generally, that’s all you need to start scheduling your scripts. Simple, isn’t it? Here is detailed documentation about the Server Code jobs scheduler in case you’re stuck somewhere. Or get touch with us via forum or email to get our help. Happy coding!

EZAPP, a company from Israel, uses Appery.io to quickly build mobile apps for their customers.

“With Appery.io, we reduced the time to build an app to a minimum, we can easily integrate new services into our system, and we provide our customers with more value,” said Elad Welner, CEO of EZAPP.

About EZAP

EZAPP, located in Kfar-Sava, Israel, provides applications as a service to SOHO and SMB enterprises. They provide their customers with a sales app that allows them to increase their revenue,  manage their customers, publish coupons and promotions, and create an online store.

Situation:

With their demand for applications increasing exponentially, EZAPP needed an up-to-date development environment with integrated backend services, and a rich catalog of API plug-ins that would simplify integration with cloud services. Perhaps most importantly, they needed a platform that would allow them to create cross-platform apps easily and rapidly. EZAPP’s monetization strategy is subscription-based, centered on a monthly fee for their service.

Solution:

EZAPP evaluated several platforms, focusing most on Appery.io and Conduit. In the end, EZAPP chose Appery.io because of the following features:

• Simple-to-create templates and access to the source code. With Appery.io’s visual builder, it’s easy and efficient to create app templates that can be saved and reused. You also have immediate access to, and ability to edit the application source code.
• Excellent support. With multiple channels of support available, Appery.io’s support policies are top-notch. The EZAPP team evaluated Appery.io over a two-month period, and was so impressed by Appery.io’s excellent support and great overall results that, “from there it [Appery.io] was an easy choice.”
• Awesome Plug-ins. You can quickly add powerful functionality to your app with the numerous plug-ins available with the Appery.io platform, and you can easily create and add your own.

Results:

Thanks to Appery.io, EZAPP significantly reduced their build time, and gained access to a huge catalog of useful and easy-to-use plug-ins and services.

“Had we not used Appery.io, we had to develop and maintain all the platform aspects ourselves, and write all the add-ons instead of using existing ones, a process that would have cost us a lot of money and time,” continued Elad Welner, CEO of EZAPP.

Using Appery.io’s Database Hosting and Push Notification services, EZAPP expect to reach over 100,000 users in the coming year, and created more than 1,000 apps.

Read the complete case study.

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.