Blog

Mobile developers often face the need to upload binary files, such as images, to the database. For example, this could happen in an app like Instagram, where a user takes photos with the device’s camera and then publishes it to their followers. Of course, all the data — including images — should be stored in the database, so the user can sign in from any device and see his or or her feed.

Another possible case for uploading images is sending an MMS (multimedia message) from your app, which can be done via the Twilio API. Twilio accepts a direct URL to an image. A user takes a picture with the device and uploads it to the Appery.io database. Then, a direct image URL is passed to the Twilio API.

In Appery.io, there are three ways to upload files to the database :

Read the rest of this entry »

OAuth 2.0 protocol is now the most popular authentication protocol for apps. By using OAuth protocol, you can securely authenticate with a variety of popular services what will increase app functionality and cover a much larger target audience.

The Appery.io App Builder has a large number of useful and convenient mobile development tools for rapidly creating Android, iOS and Windows Phone apps. Today we are glad to present another feature that significantly helps with the OAuth 2.0 authentication routine – the OAuth 2 Template plugin.

Read the rest of this entry »

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 »

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.

We just made it incredibly easy and fast to build enterprise mobile apps connected to Salesforce API with the Salesforce Mobile Pack for Appery.io. Appery.io has two plug-ins that make it super easy to connect to Salesforce:

• Salesforce OAuth API – this plug-is includes everything you need to connect to the Salesforce API via OAuth 2. Examples include Salesforce API, SOQL, and Chatter API
• Salesforce Contacts API Sample App – this plug-in includes the OAuth 2 implementation plus a Contacts sample app. The mobile web app allows you to view, edit and create new contacts on Salesforce using the REST API.

A step by step tutorial shows how to import and use the plug-ins.

Adding Salesforce plug-in

The Salesforce Contacts API Sample App has a complete app that allows to view and edit contacts in your Salesforce account. Use this app to learn how to use Salesforce API or as a starting for your app.

The Salesforce OAuth API has everything you need to get started. It includes a number of examples to get you started: using Salesforce API, using SOQL, and use Chatter API.

The Appery.io drag and drop visual app builder makes it incredibly easy to build or modify the app UI. You simply drag and drop components into the phone area. For example, editing the edit contact page from Contacts app:

Visual drag and drop editor

You are not limited to what the plug-in provides. You can build any app UI using the visual editor and connect to any Salesforce APIs. Here is an example defining a service that connects to Salesforce:

Salesforce API

Our guide shows in detail how to setup any Salesforce API service.

By combining the power of Salesforce and Appery.io dev. tools – we just made it super easy to build enterprise mobile apps entirely in the cloud. Visit https://appery.io/saleforce for a special promo code for Salesforce developers.

Originally posted on Maxa blog. 

To make it easy to build apps with AT&T API, we just added the AT&T OAuth API Plug-in. The plug-in sets up the OAuth 2 authentication by returning an access token which then can be used to invoke any other AT&T API.

To import the plug-in, select Create New > From Plug-in > ATT OAuth API:

Once the plug-in is imported, open ATT_Settings file:

and set the client_it, client_secret, and scope. The client_id, and client_secret will be available once you register an app at http://developer.att.com. The scope value depends on the API you are going to use. For example, if you the Location API, it will be TL. Refer to docs for the correct scope for each API.

Here is an example of a registered app with three scopes (in red):

One more thing that needs to be set is the OAuth 2 redirect (or callback URL) in app settings

For the callback URL to work correctly, also do the following in the Test window (upper right):

1. Uncheck Open in mobile frame
2. Make the app pulbic

When running the app and you are not signed in into AT&T, you will see this page:

when signed in, you will see the access token:

The access token is also stored into local storage so you can use it to invoke other AT&T APIs.

Learn how to add and send in app messages from your number with new AT&T In App Messaging API Plug-in.

Best Buy Products API and Sample App plug-in provides a simple, REST-based interface for entire product catalog – past and present. This includes pricing, availability, specifications, descriptions, and images for over a million current and historical products.

Adding the plug-in to your app

To add the Best Buy Products API and Sample App plug-in, from Appery.io builder, select Create New > From Plug-in. Open Shopping, then select Best Buy Products API and Sample App:

Click Import selected plug-ins. The plug-in will be imported and you will see all its files in the Project view:

Before you run the app, we need to enter the Best Buy API key. Open Services/BestBuy_Settings file and enter your API key:

If you don’t have an API key, get it from Best Buy.

You should also go to Project/App settings, set the Start Page to BestBuy_Category_List, set the theme to BestBuy_Theme and check the Render all pages in one HTML file checkbox.

Running the sample app

You can now launch the app by clicking the Test button (in the upper right corner).

The starting page of app contains the list of categories as shown below:

Click any category button. The list of the products from the category opens on the Products page:

Click any product to get the product details. The page renders the image preview to the item and the available attributes as shown below:

You can also perform a search by entering a query in the text input at the top and pressing the search button.

REST API services used in the plug-in

Now that we’ve seen how this sample app works, let’s dig deeper to see how the Best Buy Products API is exposed in Appery.io platform.

The following REST services are used for getting information from Best Buy Products API:

BestBuy_GetProductsService service is used for getting the list of required products. REST service Settings display the URL, and other settings:

The {searchQuery} will be set when the app is running, based on user input.

Request tab shows the request parameters defined in the service:

Response parameters are automatically created after doing a service test (in Test tab):

Response parameter:

All other services are set in the same way.

Once a service is added to the page, it is then mapped to the page (request and response):

How the plug-in works

Aetna GoodRx API and Sample App plug-in can be instantly added to any new or existing app. Aetna GoodRx is offering RESTful services that help to find the lowest retail cash price as offered by a national chain pharmacy for a given pharmaceutical. In addition, user will receive a URL for each result that will navigate to the page in the GoodRx mobile web experience that will display the pharmacy that is offering that price, and even find the closest branch to on their current location.

The ready-to-run app makes it super easy to start using the API. To add Aetna GoodRx plug-in:

1. From Appery.io builder, select Create New -> From Plug-in
2. Open Healthcare, then select Aetna GoodRx API and Sample App

After importing the plugin, set the default page to GoodRx_SearchPage, set the theme to GoodRx_Theme and check the Render all pages in one HTML file checkbox.

Using GoodRx API requires an API key which you can get from http://developer.carepass.com. To enter the API key, open Services/Aetna_GoodRx_Settings file:

Once the API key is set, click the Test button (upper right corner) to launch the app in the browser. The start page looks like this:

The page contains the search attributes for drugs as follows:

• Drug Name (open text field, required if National Drug Code Directory identifier field is empty)
  • For example: lipitor
• Drug form (drop-down, optional).
  • Possible values:
    • Tablet
    • Capsule
    • Injectable
    • Liquid
• Dosage in mg (optional, requires digits)
  • For example: 10
• Quantity (optional, requires digits)
  • For example: 30
• Manufacturer Type (drop-down, optional)
  • Possible values:
    • Brand
    • Generic
• National Drug Code Directory identifier (open text field, required if Drug Name is empty)

To test the app, you should enter some search parameters. For example, let’s enter “lipitor” in the “Drug Name” field. If you click the Search button then, you’ll see the screen with the search results:

If you click the Go to website button, you will be redirected to GoodRx desktop website or mobile website (if you launch the app on a mobile device).

The page shows information about the drug as well as information where it can be purchased.

Inside the plug-in

Now that we’ve seen how this sample app works, let’s dig deeper to see how the GoodRx API is exposed on the Appery.io platform.

GoodRx_LowPriceSearch service

GoodRx_LowPriceSearch is used for getting the list of the lower prices of the requested drugs. The URL and the main settings of the service as shown below:

If you open the Request tab, you’ll see that only the apikey parameter is defined here. The reason for this is that the service can receive different sets of parameters, so all the other required parameters are added dynamically in Javascript Helper.search() function before service invocation.

The response parameters are displayed under the Response tab:

GoodRx_Settings service

This service holds the API key. It is used in GoodRx_LowPriceSearch service.

We’ve just made the ESPN Headlines API and Sample App plug-in available. The API allows you to interact with ESPN’s various news stories. ESPN publishes hundreds of unique pieces of text content each day, covering dozens of sports and hundreds of athletes and teams. To make it easier to use the API to make mobile apps in Appery.io, we created a plug-in with some ready-made services (interfaces) to use the ESPN API.

To add this plug-in to an app, you just need to follow these steps in Appery.io:

1. From the Appery.io Builder, select Create New and then From Plug-in.
2. Click the check box for Sports/ESPN Headlines API and Sample App, and then click on the “Import selected plugins” button.
3. Open Services/ESPN_Settings file and set your API key. If you don’t have one, get one from http://developer.espn.com/.
4. Go to App setting and change Start Page to ESPN_Home.

Once you’ve created a new app based on this plug-in, you actually have a simple ready-to-run demo app. Just click the “Test” button in the right upper corner of the screen to see it work. In this tutorial, we’ll first walk through the sample app included with the plug-in. Then, we’ll show you, “under the hood,” some of how to the API is used in developing the app.

The App

To find news you are interested in via the app, follow these steps:

1. On the start page, select a sport (e.g., Golf) from the available sports displayed in the list:
   
2. You will then be sent to the Leagues page, which contains the list of existing leagues (if applicable). Select the Professional Golf Association league:
   
3. The Headlines page shows. The headlines are listed by titles and preview images. Select one of the headlines.
4. The Details page will display a short description of the news with the cover photo (if available). At the end, the URL of the original article on the ESPN web site is displayed.
5. Use the Back button to return to the previous pages and search for other news.

Under the Hood

Now that we’ve walked through the app, let’s take a peek under the hood.

Services

Services from the plug-in are linked to UI components as part of the design of the app. The following REST services that are defined in the ESPN API plug-in are used in the app.

ESPN_SportsList service

The ESPN_SportsList service is used for getting the list of available sports. REST Service Properties displays the URL, main settings, and whether a proxy is used, as shown below:

Request parameters contains the parameter sent to the ESPN service:

The service can be instantly tested and the response created automatically based on the returned response (JSON):

Response parameters:

The other services are set in the same way with their own parameters.

ESPN_SportByName service

This service is used to get a list of leagues for a given sport:

The {sportName} value is substituted in mapping when the service is running based on the selected sport:

ESPN_LeagueHeadlinesByAbbreviation service

This service is used to get the headlines for that sports league.

{sportName}, and {abbreveationName} are set when the service is running:

ESPN_GetNewsById service

This service is used for getting the details for each news item:

Mapping the UI to the Services

The final part in the app design is mapping the service parameters to the UI components. Here’s an example of this in action, showing the response parameters being mapped to output components:

Known issue

There is a known issue where the apikey parameter isn’t accepted, even if it’s specified:

This parameter is stored in ESPN_Settings. To resolve this problem, go to ESPN_Settings and create a new parameter apikey (now you have two identical parameters):

Remove the first one parameter (that was generated automatically) and launch the app. apikey should now be taken into account.