Blog

This 5-minute video shows how to create a simple, yet real mobile app that talks to an API backend.

We just added a second template called Slide Panel App Example in addition to the Tabbed Pages App Example we published last week. When you create a new app, you can base the app on this template and use it a great starting point. The app has a Panel menu which slides from the left, and allows you to navigate to three pages. The Panel is configured via page templates. This simplifies app development as you need to make changes to navigation only in one place.

Read the rest of this entry »

Developers love to look at examples. A very nice feature in Appery.io platform is that you can create a new app based on an existing example/template. We just added a new Tabbed Pages Example and will be adding more soon.

Read the rest of this entry »

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.

We pushed a number of really nice features over the weekend. Check out the release notes and what’s new. A full blog post is coming up shortly.

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!

Update (May 27): links were unlinked as this content not currently available.

Appery.io developers: we just upgraded the mapping feature in Appery.io! It’s now a lot more powerful and flexible.  This post is a quick overview of what has changed. The two links (Mapping, Model and Storage) provide more details on the new features. Read this post and then visit the links to learn more.

• Mapping
• Model and Storage

Old mapping

This is how the old mapping looked. This shows a data source (service) has been added to the page:

Clicking on Edit Mapping, would open the service request mapping:

and this is service response mapping:

New service events and mapping

The new mapping is a lot more flexible and greatly simplifies building mobile apps in Appery.io. When you switch to Data view, a data source will now be shown like this. Make sure to click the expand arrow on the left to see the data source events:

The mapping in Before send event and in Success event – that’s the exact the same old mapping Appery.io had before and the one you are used to. When a service was invoked, the request mapping would happen on Before send event and response mapping would happen on Success event.

As you can see what we have now is a lot more flexible. In addition to doing mapping, you can now also run any other action (click +Add button to see the actions), plus Run JavaScript which allows you to run any custom script. Plus, you can invoke any action on Error and Complete events. You can even run the new Mapping action on those events!

New Mapping action

The new Mapping action allows you to invoke mapping on any event, not just on service invocation (last in the list):

The new Mapping action can also be invoked from the UI:

For example, on button click, you can move data from page to storage, or from storage to page:

Mapping: page, service, storage

The mapping is no longer limited to service-page mapping. You can now map data between page, service and storage. This is where the new Mapping actions comes into play. Before you could only map between page and service. Now you can map between page and storage (local storage, session storage). In other words, you can map data from page into storage, or move map data from storage to page. Here is how the new mapping looks:

Notice that on the left side there are: Page and Storage. On the right side there are: Page, Storage, and Service Request. With the new mapping, we have simplified mapping between Page, Storage and Service.

Documentation

Please read the following pages that explain in more detail the new features:

• Mapping
• Model and Storage

This video shows how to build a mobile app and enable the Customer Console. The Customer Console allows an app owner who, (for example) owns a restaurant, or some other business, to:

• Modify app data
• Send push notifications to all app users
• No need to ask or involve the app developer
• Deploy the console to appery.io URL or a custom domain such as http://mybusinessname.com

Read more about the Customer Console.

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.