Blog

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.

We just made available the Twilio SMS API plug-in. This means if you need to send SMS messages from your mobile app, you can quickly use the Twilio SMS API plug-in. We will show you how to add the plug-in but you do need to sign up for free Twilio account. You will will get a Twilio phone number and you will also need to verify at least one phone number (where you would like to send SMS messages). If you go with a paid plan, you will be able to send SMS messages to any number.

From Appery.io builder, select Create New > From Plug-in:

Open Communication, then select Twilio SMS API:

Click Import selected plug-ins button. You will then see a prompt to enter the Twilio Account SID and Twilio AuthToken:

Both are available from the Dashboard:

If you don’t enter these values during the import step, you can always enter them by going to Project > Services > TwilioSettings.

Open TwilioSMS page. The UI is ready, there is a service and mapping (not shown) all completed. Everything is ready to go. You can of course change the UI to fit your application.

Note: when you import a plug-in, the current app theme will be used in the imported page (so your theme will probably be different).

Click the Test button and you should see a page like this:

Last weekend we participated in the AT&T Mobile Hacktathon hosted by StackMob. Just before the event we published StackMob API plug-in in Appery.io app builder so that it would be very simple to connect to StackMob. Here is how easy it is to connect to StackMob.

In Appery.io app builder, select Create New > From Plug-in, then select the StackMob plug-in:

When you click to import the plug-in, you will be asked to enter StackMob key that identifies your app:

If you won’t enter the key right away, you can always set it by going to Services/StackMobDatabseSettings file.

The StackMob service looks like this:

You will notice that the URL has [objectName] in it. Simple set it to the object schema name defined in StackMob. My object is called messages so the updated URL would be this:

https://api.mob1.stackmob.com/messages

The service does a GET by default but you can set it to do any other action.

We can now instantly test the service. Open Request Parameters panel and click Test Connection:

We get result back which means our service works (you should create a few sample objects in StackMob before testing). The service input is defined, we now need to define the service output. That can be done automatically by clicking Populate Response Structure button.

Once the service is ready, add it to the page, and bind the service to the UI:

and finally run the app:

If you plan to use MongoLab database in your app, it’s now even simpler with our new MongoLab database plug-in. Here is how to create one.

Click to import a plug-in:

then select Mobile and click MongoDB Database API:

next you will be prompted to enter database API key and database name. Both values can be found in your MongoLab account:

If you don’t set these values during import, don’t worry. You can also set them in Services/MongoLab_Settings after the import.

In addition to API key and database name you also need to set the collection name (as we don’t have that information). The collection name is defined and set in Request Parameters panel:

In the Default Value column enter the collection name. You may also set the collection name directly in the URL. The reason collection name is set in request parameters and not in the settings file is because it will change often while the other values are most likely going to stay the same.

Once the service is imported, you can test the service and automatically create the response structure from it.

We were getting a lot of questions how do you send email from your mobile app? We would always tell user to use SendGrid, a wonderful cloud service that provides REST API for sending out emails. Today we released SendGrid Mail API plug-in in Appery.io. All it takes now is a few clicks and you are ready to send emails from your mobile app.

To import the plug-in, click the block button in Project view:

Open Communication category and select SendGrid Mail API:

Click Import selected plug-ins button. You will be prompted to enter api_user and api_key values. Before being able to send out emails with SendGrid you need to sign up for an account (they do offer a free plan). You will then get a api_user and user_key. You may skip entering these values right now. You can always set them in Project/SendGrid_Settings.

Once the plug-in is imported, you will have page called Sendmail that looks like this:

The UI is built with jQuery Mobile.

You can also open the REST service (SendGrid_MailSend). The URL is defined here:

Request parameters:

{api_user} and {api_key} are set in SendGrid_Settings.

And finally the service mapping (UI to service):

This REST service has additional option parameters which are described here. You may modify the service as you need. SendGrid provides other API’s that you can find here.

Have fun building apps in Appery.io, now with SendGrid email API.

In addition to AT&T SMS API Plug-in, we just made available AT&T mHealth API Plug-in in Appery.io app builder.

mHealth gives you control over your health and wellness data and makes that data more accessible than ever before. With a rich ecosystem of supported devices and applications, mHealth enables you to manage your personal health and wellness from the palm of your hand, anytime, anywhere

Source: https://mhealth.att.com/what

In addition to REST services, the plug-in has two pages. On the first page there is a button to connect to mHealth. When you click on the button, mHealth login page will be opened. Once you login, you will be redirected back to the app and shown the second page. On the second page a simply REST service is invoked showing to what data access is available. The plug-in is set up with three scopes (/read/health/data/fitbit /read/health/data/poke /health/read/user). mHealth docs shows more available scopes.

To add the plug-in to your app:

1. Create a new app, make sure to create Mobile App (not Mobile Web)
2. Inside the builder, click on the “blocks” button in Projects view:
   
3. Select Fitness category, then check the plug-in
   
4. Click Import selected plugins. You will be prompted to enter the client_id and client_secret information. This information can be obtained from mHealth app settings. You may skip it and enter it later
5. Enjoy the plug-in!

The plug-in is just in time for AT&T Education Hackathon happening today and tomorrow in Palo Alto, CA. Appery.io team will be there.

Last week we published the first public Plug-in that allows to send SMS messages via AT&T SMS API. The plug-in also comes with a sample app that you can try. The only thing you need to do is provide your AT&T app information.

There are two ways to import the plugin. You can add the plugin when a new app is created or import into already existing app.

Adding to a new app

1. From Apps page, click Start Now
2. Click App Builder > Go
3. Click Mobile App > Start Now
4. Select Blank Mobile App template, click Next
5. Enter app name and click Add Plugins
   
6. Select Communication/AT&T SMS
7. Click Create Project With Select Plugins
8. As AT&T API requires authentication, you can optionally enter all the information here:
   
   This information can be found in AT&T app settings. If you don’t enter the information during this step, you can enter it by going to Project > ServiceSettings after the app has been created
9. That’s it, the app is created with the AT&T SMS plugin:
   

Adding to an existing app

1. If you have an existing app, from Projects view click the block icon (to the right of Create New… button)
   
2. Then select the plugin:
   
3. Click Import Select Plugins and you are done

That’s it. We will be adding more plug-ins very soon.