Appery.io and Auth0 Join Forces To Simplify Mobile App Development With Identity Management

apperyio_plus_auth0

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 »

Launching Server Code With Jobs Scheduler

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?

server-code 

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:

jobs

You will see schedule builder if you open it:

schedule_builder

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:

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:

scheduled_jobs

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!

 

Learn How EZAPP Uses Appery.io to Build Mobile Apps Fast

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.

ezapp_1

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.

ezapp_2

 

Read the complete case study.

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.

Appery.io platform adds speed, server jobs, Google Analytics, Windows Phone build, Customer Console, more Webhooks, and many more features

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:

server_code_jobs_tab

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.

customer_console

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:

google_analytics

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:

css

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:

certificates

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:

exportin_the_app

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:

webhooks

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.

Using Google Maps API in Appery.io App

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:

google_maps_api

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:

google_map_directions

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
});

added_marker

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

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.

Connect With API Providers in Appery.io App Using OAuth.io

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

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.

Dialing number and sending SMS via JavaScript

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:

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:

2014-03-12 14.42.34

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:

2014-03-12 14.42.15

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.

Build a multi-language app in Appery.io

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.

i18n_blog_en_de_app

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