Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    Latest Updates

Facebook Sample App

Sample app using Facebook API.

This sample apps shows you how to connect to Facebook and invoke Facebook API. You will learn:

  • Invoke the Facebook API.
  • Add a Login with Facebook button to your app.
  • Load data from Facebook.
  • Post a message on someone's wall.

Getting the App

To get the app UI:

  1. From the App page, select Create new app > JQuery Mobile > Blank and click the Create button.
  2. In the Create new dropdown, select From Plugin, check the Facebook Sample App plugin and press Import selected plug-ins button.
  3. A popup dialog should appear. Set the start page to Facebook_Login and confirm.
Facebook plugin.

Facebook plugin.

Getting the Backend

To get the app backend:

  1. Download the API Express project backup.
  2. Go to the API Express page.
  3. Press Create new project, upload the backup, set any project name (e.g. "Facebook API") and click Create.

Registering a Facebook app

Log in or sign up to developers.facebook.com.

Note

You should have a verified Facebook account. Read here for more information.

  1. Click My Apps in the top menu, then Add a New App.
  2. Enter your Display Name.
  3. Enter your contact Email and click Create App ID.
  4. From the list of products, select Facebook Login and select Web as the app platform.
  5. In the new window, insert the URL of your site. Use the following Site URL as a template, but use your Appery.io App ID:
https://appery.io/app/view/{ENTER HERE YOUR APPERY.IO APP ID}/app/Facebook_Me.html

If you're using libraries version below 3.0, the URL will look as following:
https://appery.io/app/view/{ENTER HERE YOUR APPERY.IO APP ID}/Facebook_Me.html.
Don't mention it if you don't know what it is about.

The Appery.io App ID can be taken from the Appery.io app URL:

App ID.

App ID.

Then, go to > Settings > Basic where you need to type appery.io in the App Domains field and choose the needed Category.

Lastly, click Save Changes. The App Settings tab should look like the following:

Facebook app.

Facebook app.

Now, when the app is saved, copy the App ID, which will be used to configure the Facebook API plugin.

App Settings

Since the App ID is copied to your clipboard, open the Facebook_API_settings service and paste it as the value for the client_id parameter.

Copy the Appery.io App ID from the URL string and paste it to the project_id:

You also need to connect your UI app with the backend API Express project. In order to do this, go to the API Express page and select the project you've created from the backup in the beginning of this tutorial. Then copy its UUID from the address bar.

API Express project UUID.

API Express project UUID.

Go back to your app, open the Facebook_API_settings service and paste the copied id as a value for API_EXPRESS_API_KEY field.

Lastly, on developers.facebook.com, go to the Products > Facebook login section and add the callback URL to the whitelist:

Adding the valid OAuth redirect URIs

Adding the valid OAuth redirect URIs

Now, let's slightly modify the app.

Since posting to a wall will require different access rights, open the Facebook_Helper item listed under the JavaScript folder:

Facebook Javascript.

Facebook Javascript.

Replace lines 7 and 8 with the following code:

var callbackUrl = "https://appery.io/app/view/" + Facebook_API_settings.project_id + "/app/Facebook_Me.html";
var url = "https://www.facebook.com/dialog/oauth?client_id="
    + Facebook_API_settings['client_id'] + "&redirect_uri=" + callbackUrl
    + "&scope=publish_actions&response_type=token";

The modified Facebook_Helper.js should look like the following:

Code updates.

Code updates.

The app, with the imported plug-in, allows the user to log in with their Facebook username and password, and returns the logged user information. Information is displayed on the Facebook_Me page.

Testing the Login API

Click on the small arrow icon to the right of the Test button in the upper-right corner of the screen and launch the Show without frame option.
After a few seconds, the following page will appear on the screen:

Click Login to Facebook. You’ll be redirected to the Facebook authorization page where you will need to enter your log in information. After successful authorization, you'll be automatically returned to the Facebook_Me page, which contains the personal information of the logged user.

Important iOS information

For the app to work on iOS platform you must set the project to Public:

Testing the app.

Testing the app.

Creating an API Express Service

Open your Facebook API project on API Express page.
Create a new service in the facebook folder.

Read more about creating API Express service here

Set the URL Template property of the Start component to post - this will be the name of the service. Set HTTP method to POST.

Change Request Body type to x-www-form-urlencoded and add 2 Request Body Parameters: access_token and message.

Properties of the Start component should look like the following:

API Express properties.

API Express properties.

Add a REST component. Set its URL to https://graph.facebook.com/me/feed, change HTTP method to POST.

Change Request Body type to x-www-form-urlencoded and add 2 Request Body Parameters: access_token and message. Bind them to BODY.access_token and BODY.message respectively, so that your service looks like the following:

API Express service flow.

API Express service flow.

That's all about API Express. Click Save button and close API Express Editor.

Importing Services Into the App

In the App Builder's Create New dropdown, click on API Express Service.
Select your API Express Project and the previously created post service:

Importing API Express services.

Importing API Express services.

Press Import selected services.

Designing the UI to Post a Message

Go to the Facebook_Me page and add the Input and Button components below the existing UI. Name the Input to message and provide any text for the Text property. Name the Button as post_message_button and change its Text property to Post message:

Updating app UI.

Updating app UI.

Mapping

Switch to the DATA tab. Select Service > Facebook_API_facebook_post_post as datasource and click Add.
Rename the added instance to postService:

Adding a service to a page.

Adding a service to a page.

Click Mapping for the Before send instance, and create the following mapping. Remember to check the Storage box on the left:

Mapping.

Mapping.

Click Save and return.

Switch to the DESIGN tab, select the post_message_button and add the following event: post_message_button > Click > Invoke Service > postService.

Read more about creating events here

Click Save.

Here's how the added wall message looks:

Test message.

Test message.

Testing the app

The final app will look like:

Testing the app.

Testing the app.