Blog

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:

Buddy is a cross-platform mobile “backend as a service”. In Appery.io app builder you can easily use any 3rd party REST API, including Buddy API. Every API is different and here is how to setup Buddy API. Buddy adds the actual action to invoke in the URL, after the ?, followed by any additional request parameters:

http://webservice.buddyplatform.com/Service/v1/BuddyService.ashx?UserAccount_Profile_Create&BuddyApplicationName=….&BuddyApplicationPassword=….

When setting up the service in Appery.io REST editor, set the URL to:

http://webservice.buddyplatform.com/Service/v1/BuddyService.ashx

then define all other request parameters as usual:

Once you setup all the request parameters you will be able to test the service.

We just released some really awesome features in Appery.io!

App Builder Database Integration

In early July we launched Appery.io Database where you can store app data. Now we have launched database integration in our app builder. This means you can point to a specific database, select the collection(s) you want to use and automatically generate all the REST services.  To create a services from database, select Create New > Database Services:

Next select the database:

Once the database is selected, you can select the services for which you want to generate REST services.

The first section creates REST services for User management.

The second section lists all the collections you have in current database. You can then select which actions (Create, Delete, etc) you would like to create for a particular collection:

When you click Import selected services button, the following REST services will be generated:

For example opening the service for creating a new message looks like this:

The request and response parameters are also generated.  Here is a screen shot of request parameters to create a new messsage:

Isn’t this awesome?

File API

We continue to add new features to Appery.io Backend Services by adding File API. You can now easily store files in the database. When you open any database, you will see a new Files tab:

Read more about the File API.

Project Export/Import

Our users have been asking for this feature for a long time and it’s now available. You can export and then import a project. To export a project, go to app options page (Export Backup):

To import an app from backup, click From Backup when creating a new app (you get to this screen by clicking More Options link, see next section):

Even easier way to create a new app

Last, but not least, it is now even easier to create a new app. Right from Apps page, enter a new app name and click Create. That’s it.

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:

In case you missed we just launched Appery.io Database – a cloud database for your mobile app. It’s the first feature as part of our mobile backend services. We are working on really cool stuff such as Push and more!

Database API Plug-in

Creating a new service based on Appery.io Database is very simple as each collection comes with a nice REST API hints:

But there is even easier way to add a service by using Appery.io Database API plug-in. From Project tab, click Create New > From Plug-in and select Appery.io Database API plug-in:

When you import the plug-in, you will be asked to enter the Appery.io Database Id you can get from the REST API hint section (or from Dashboard tab). If you don’t set it during import, you can always set in Services/ApperyDatabaseSettings file.

As you can see the URL is already set. Just set the collection and you will be ready to go. The service defaults to GET but you can change it to any method as shown. You can switch to Request Parameters, enter any request parameters and click Test. From Test, you can automatically define the service’s response structure.

The database key is also set in Request Parameters panel:

The {apperyDatabaseId} is resolved from Services/ApperyDatabaseSettings file.

We got some really awesome integration planned very soon. Right from Appery.io app builder you will be able to browser and create new collections.

Documentation

Looking for docs? View Appery.io Database docs. We are also working on some really nice tutorials. If you have any questions, you can always email us or post on our forum.

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.