Nav

Lab 1: Create Project and Connect

Overview

In this lab, we will play the role of Sheryl the Marketing Manager. We are going to create a project using Flow Designer and consume the Customer API built in Module 3 to get Customer Information for her Facebook Marketing Campaigns.

Step 1: Create a new project

Navigate to the Design Center on the right-side panel or from the main page of the Anypoint Platform

module4 lab1 select design center
  1. click on +Create to create a new project.

    module4 lab1 create mule app
  2. Select Create new application

    module4 lab1 select mule app
  3. Enter a Project Name: <username> Facebook Campaign.

  4. Press the [Create] button.

    module4 lab1 create flowdesigner

    We need to create unique names to not have project name collisions.

    This will create a Cloudhub Worker (.2 vCores) that will automatically be updated.

Step2: Start Creating the Flow

The idea for this application is to do a periodic polling ETL application but for testing simplicity, we are going to trigger the process with an HTTP request instead.

The first window after you enter the name it’s a wizard. The idea is not to follow the wizard we are going to start from scratch.

  1. Press Go straight to canvas

    module4 lab1 choose listener
  2. Press on the Trigger None selected card. A List with listener options will open.

    module4 lab1 choose triggernone
  3. Select HTTP listener

    module4 lab1 http listener
  4. A card will open. In the configuration tab, complete the following information:

    • Path: /campaigns

      module4 lab1 http listener config

      When you create an http listener, a default HTTP Cloudhub configuration is created. You can Change, and create a new one, or you can edit the default one.

  5. Press the module4_lab1_close_button button. You will be returned to the canvas.

    module4 lab1 http listener complete

    Let’s see how easy is to reuse the assets we already built. In our organization we created an API called Customer API. This API is public in Exchange and is ready to be consumed. So what we are going to do on the next step is to call the Customer API, but we are not going to use and HTTP Request. In the Design Center we have REST Connectors. With REST Connect tool each API that you publish in Exchange is automatically converted into a connector that can be consumed in your APIs.

  6. Press module4_lab1_add_button button to add a new component.

    module4 lab1 http listener addnew
  7. Search Customer API and Select Customer API connector.

    module4 lab1 customer connector
  8. Select Get Customers operation

    module4 lab1 select operation
  9. A new card will open. Click Edit to configure the http connection.

    module4 lab1 customer config
  10. Complete with the following information:

    • Configuration Name: Customer API

    • Host: mythical-customer-api-v4-0.cloudhub.io

    • Port: 80

    • Base Path: /api

    • Protocol: HTTP

      Please, verify all the parameters to be the same as the instructions.
      module4 lab1 http customer consumer

      We need to add this configuration as a connection so it could be shared by everybody in the business group.

  11. Press the Add Connection button.

  12. Complete with a name and choose Connection in the Connection Type. We are not going to share the connection, so uncheck the option.

    module4 lab1 add connector
  13. Press the [Save] button to save your configuration.

  14. Press the [Save] button in the main panel to save the connector configuration.

    module4 lab1 customer connector save
  15. In the General tab configure

    • client_id: 11def1b704e24d87a5ea5769772c90a7

    • client_secret: 88845E529f1F42E4a5aC96Fd504c3e01

    • Accept: application/json

    • Content-Type: application/json

      module4 lab1 http consumer general
      We are going to consume an already deployed API. That’s why for security reasons we need to configure the Client ID and Client Secret
  16. Press the module4_lab1_close_button button to close the card. You will be returned to the canvas.

    module4 lab1 complete flow

    That’s it. We created an API that gets all the Customers and returns them in a JSON Format.

Now we need to test it.

Step 3: Testing the API

The testing is going to be covered in lab 3. What we are going to do is a quick request and see the response.

  1. Click the Test Button situated on the right top part of the screen.

    module4 lab1 run button

    Once you click on the Test button, the message will change to Preparing for test

    module4 lab1 starting message

    Finally you will see the message Running in a temporary environment

    module4 lab1 started message
  2. Once the API is running, we need to know the URL. To do this, click on the name of the API.

    module4 lab1 copy link

    This will copy the URL to the clipboard.

  3. Open your browser and paste the URL you copied, after that append /campaigns at the end and press enter

    Don’t forget to append /campaigns at the end of the URL
    module4 lab1 browser

Summary

In this lab, we

  • Created an API Using the Flow Designer

  • Tested the API Using the browser

On next lab we are going to send the information to the Facebook API.

Congratulations! You have completed Lab 1.

Please proceed to Lab 2