This blog is part of the series Visual Builder Cloud Service Learning Path. In this lesson, we will look at integrating a third party REST API that has no description document (Swagger or ADF Describe). We will integrate the Twitter API to fetch a list of tweets for a list celebrities stored in a custom Business Object.

Importing the Starter Project

We'll start the lesson with an application that already contains the Celebrities Business Object and mobile application with a list of celebrities and a details page for each one.

  1. Download this ZIP file to your computer.
  2. In the VBCS list of applications, click Import > Application from File.
  3. Drag and drop the ZIP file into the dialog and click Import.

Creating an Application in Twitter

Before you can connect to the Twitter APIs, you need to register for the developer program and create an app in Twitter.

  1. Go to https://developer.twitter.com/en/docs/basics/getting-started and follow the instructions under Get started: Build an app on Twitter.

Registering the Twitter API

In order to work with a REST API, VBCS needs to understand basic information about that REST service, such as:

  • The service endpoints and verbs
  • The required query parameters and headers
  • The authentication method used to connect
  • The transformation patterns for creating URLs for pagination, sorting, and filtering

Since the Twitter API doesn't have Swagger documentation, we can run through a wizard to input this information manually.

  1. In the left sidebar, click the Service Connections icon
  2. Click the icon in the Services panel
  3. Click Define By Endpoint
  4. In the wizard, enter the following information and click Next:

    Field

    Value

    Method

    Get

    URL

    https://api.twitter.com/1.1/statuses/user_timeline.json

    Action Hint

    Get Many

    Service Base URL

    Leave default (https://api.twitter.com/1.1/statuses)
  5. In the Service tab, change the Service Name to Twitter.
  6. In the Authentication tab, enter the following information. Go to https://apps.twitter.com to get this information:

    Field

    Value

    Authentication Method

    Client Credentials OAuth 2.0

    Client Id

    The Consumer Key (API Key) from your app

    Secret

    Consumer Secret (API Secret) 

    Scope

    Leave blank

    Authorization URL

    https://api.twitter.com/oauth2/token

    Enable token relay

    		 Leave unchecked
  7. Click Request > URL Parameters. Add the following Dynamic Query Parameter:
    • screen_name – String
  8. Click Test. Enter SFGiants as the screen_name and click Send. The response body appears in the Body area below. Click the Copy to Response Body button.
  9. Click Create.

Consuming the Twitter API

Now let's drop a list into the Celebrity Detail page and populate it with a list of the celebrity's tweets.

  1. Go to the Mobile Apps panel and click Tweets > flows > main > CelebrityDetail. The page opens but gives a 404 error as there is no cebrityId provided. 
  2. Click the 
    button and enter 1 in the dialog box. The page renders with the Katy Parry information. 
  3. Drop a List View under the Twitter Feed header. 
  4. In the Property Inspector, click Add Data.
  5. Under Twitter, select GET /user_timeline.json and click Next.
  6. Choose the first template and click Next.
  7. Add the created_at field to Field 2 and the and the text field to Field 4. Set the Primary Key to id. Click Next.
  8. Map celebrity > twitterHandle on the left to uriParameters > screen_name on the right.
  9. Click Finish.

Wrapping the Twitter Feed List in an oj-bind-if

If you run the app now you'll notice that the Twitter call isn't working. If you look at the REST call in the Chrome Developer Tools, you'll see it's passing undefined as the screen_name. That's because the page hasn't finished loading the celebrity details before it tries calling Twitter. We fix that by wrapping the list in an oj-bind-if and check that celebrity object is populated before we render the Twitter list.

  1. Right-click the list in ContactDetail and choose Surround With > If
  2. Right-click the list and choose Select Parent > If. 
  3. In the Property Inspector, change the test to: 
    [[$page.variables.celebrityRecord.twitterHandle !== undefined]]
    Note: In our database we know that twitterHandle will always have a value. In more complex cases, you'll have to create more complex logic to handle null, undefined, empty string values, and other situations.
  4. Reload the page. The list of Tweets renders correctly.