Blog

Join the Appery.io webinar this Wednesday, at 11am (Pacific Time) learn how to build mobile apps with Facebook API.

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.

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.

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.

Last week we published the first version of Singly plug-in in Appery.io. This means you can connect to Singly API in Appery.io builder in just a few seconds. This also means you can use Singly API to connect to over 18 social networks, integrate people’s contacts, photos, locations, fitness data, and more into your app.

Here is how to get the plug-in.

From Project view, select Create New > From Plug-in:

Select Singly API plug-in:

You will be asked to enter the Client ID and Client Secret. You get it from Singly.com (after creating a free account and registering an app):

If you don’t enter the values during import, you can always set these ids by going to Project/Services/SinglySettings.

Once the plug-in was imported, go to Project/Project Profile and set SinglyStart to be the first page to launch. Go ahead the launch the app. You will be asked to login to Twitter (that’s the default service set) and then should get something like this (it will be your Twitter information):

To change the service, open SinglyStart page, select the button and open Run Custom JavaScript action (Events tab). You will be able to see the initial request to Singly and the place to change the service.

Give it a try and let us know what you think. One thing to keep in mind, the current version will only work as a mobile app (it will not run as native). I’m working with Jeremie Miller form Singly to support hybrid apps as well as other APIs. Do let us know if you would like us to add a specific feature.