Skip to content

Fixed bookstore lab instructions #576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixed bookstore lab instructions #576

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/content/labs/bookstore.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This demo makes use of the Flogo Web UI. If you don't have that one running yet,

## Step 1: Create the app

Open the Flogo Web UI and from there, click "_New_" to create a new microservice and give your new app a name. Click "_Create a Flow_" to create a new flow and give it any name that you want. Now click on the flow you just created and to open the canvas where you can design your flow.
Open the Flogo Web UI and from there, click "_New_" to create a new microservice and give your new app a name. Click "_Create a Flow_" to create a new flow and give it any name that you want (e.g. Bookstore). Next, click 'Create an Action' of type 'Flow' and give it any name you want (e.g. BookstoreFlow). Now click on the flow you just created and to open the canvas where you can design your flow.

![step 1](../../images/labs/bookstore/step1.png)

Expand Down Expand Up @@ -43,25 +43,25 @@ Now it is time to configure the trigger to listen to HTTP messages. To start, cl

After that, click on "_Map to flow inputs_" to map the isbn from the HTTP trigger to the "_isbn_" parameter we created earlier. The parameter will already be selected because it is the only one. You'll need to concatenate `isbn:` with the actual number so you'll need to type (or paste) the following `string.concat("isbn:", $.pathParams.isbn)`.

Now for the outputs, click on "_Map to flow outputs_" to map the output parameters you created earlier to the response of the trigger. The `code` parameter will already be selected, so click on "_123 code_" in the Flow Output section to create the mapping. Now click on "_message_" in the Trigger Response section and select "_* data_" from the Flow Output section to create the mapping. Click "_save_" to make sure everything is, well…, saved. You can click the little `X` on the top-right (no, not your browser…) to close the dialog window and go back to the flow.
Now for the outputs, click on "_Map from flow output_" to map the output parameters you created earlier to the response of the trigger. The `code` parameter will already be selected, so click on "_123 code_" in the Flow Output section to create the mapping. Now click on "_data_" in the Trigger Response section and select "_* message_" from the Flow Output section to create the mapping. Click "_save_" to make sure everything is, well…, saved. You can click the little `X` on the top-right (no, not your browser…) to close the dialog window and go back to the flow.

## Step 3: Adding activities

You’ll have to add some activities to the flow for it to do something. To add an activity click on the large `+` sign

![step 3a](../../images/labs/bookstore/step3a.png)

On the right-hand side of the screen a list with all the activities the Flogo Web UI knows about will appear. From the list you can pick the "Log Message" activity and click it to make sure it is added to the flow. As you hover over the newly added activity, a cog will appear and as you hover over that thing, a menu will appear to configure your activity. In this window you can configure the inputs of the "_Log Message_" activity using data from all other activities and triggers in your flow. Right now, you only have the incoming data from the HTTP trigger. To make the log message a little more useful you can concatenate things together like in the HTTP trigger. To do so select the **concat** function from the string category (see #1), which will put a new function in the window. Now replace _str1_ with `"Getting book data for: "`, as that will be the first part of the message to log (see #2). The second part will be the isbn. To get the isbn on the place of _str2_, select _str2_ first and after that expand the "flow (flow)" section (by clicking on the little black caret) and click "_a.. isbn_" (see #3). That will enter the selected value on the place of _str2_ (see #4).
On the right-hand side of the screen a list with all the activities the Flogo Web UI knows about will appear. From the list you can pick the "Log" activity and click it to make sure it is added to the flow. When you click on the newly added activity, a cog will appear and if you click on this clog, a menu will appear to configure your activity. In this window you can configure the inputs of the "_Log_" activity using data from all other activities and triggers in your flow. Right now, you only have the incoming data from the HTTP trigger. To make the log message a little more useful you can concatenate things together like in the HTTP trigger. To do so select the **concat** function from the string category (see #1), which will put a new function in the window. Now replace _str1_ with `"Getting book data for: "`, as that will be the first part of the message to log (see #2). The second part will be the isbn. To get the isbn on the place of _str2_, select _str2_ first and after that expand the "flow (flow)" section (by clicking on the little black caret) and click "_a.. isbn_" (see #3). That will enter the selected value on the place of _str2_ (see #4).

![step 3b](../../images/labs/bookstore/step3b.png)

## Step 4: Invoking a REST service

The Google API for books is a REST service. To invoke a REST service you can add a new **Invoke REST Service** activity. As you hover over it to configure the values, you'll notice this activity has a lot more fields you can configure. For now the configuration should be:
The Google API for books is a REST service. To invoke a REST service you can add a new **REST Invoke** activity. When you click the cog of this activity, you'll notice this activity has a lot more fields you can configure. For now the configuration should be:

* **method**: `"GET"` (to get data from the API)
* **uri**: `https://www.googleapis.com/books/v1/volumes` (the URL of the service you want to call)
* **queryParams**: `{"q":"=$flow.isbn"}` (this appends a query parameter called `q` with the value of the isbn to the URL)
* **Settings/method**: `"GET"` (to get data from the API)
* **Settings/uri**: `"https://www.googleapis.com/books/v1/volumes"` (the URL of the service you want to call, it has to be between double quotes)
* **Map Inputs/queryParams**: `{"q":"=$flow.isbn"}` (this appends a query parameter called `q` with the value of the isbn to the URL)

## Step 5: Return data

Expand All @@ -71,13 +71,13 @@ Now click on "* message" and type (or copy) the structure below. Finally click "

```json
{
"title": "=$activity[rest_3].result.items[0].volumeInfo.title",
"publishedDate": "=$activity[rest_3].result.items[0].volumeInfo.publishedDate",
"description": "=$activity[rest_3].result.items[0].volumeInfo.description"
"title": "=$activity[rest_3].data.items[0].volumeInfo.title",
"publishedDate": "=$activity[rest_3].data.items[0].volumeInfo.publishedDate",
"description": "=$activity[rest_3].data.items[0].volumeInfo.description"
}
```

The above snippet maps the values from the REST service to fields that are sent back to the trigger. The mapping is done in a JavaScript-like syntax, so `$activity[rest_3].result.items[0].volumeInfo.title` means it will get the first result (arrays start with 0) and from that result get the _volumeInfo_ element and from that get the _title_ element. The double curly braces are used as by Go's templating engine.
The above snippet maps the values from the REST service to fields that are sent back to the trigger. The mapping is done in a JavaScript-like syntax, so `$activity[rest_3].data.items[0].volumeInfo.title` means it will get the first result (arrays start with 0) and from that result get the _volumeInfo_ element and from that get the _title_ element. The double curly braces are used as by Go's templating engine.

Your final flow should look something like the one below.

Expand All @@ -89,4 +89,4 @@ Those were all the steps needed to design the flow, now let's build an executabl

## Step 7: Run

To see the results, start your app and run `curl --request GET --url http://localhost:9233/books/0747532699`. That will give you the details on _Harry Potter and the Philosopher's Stone_
To see the results, start your app and run `curl --request GET --url http://localhost:9233/books/0747532699`. That will give you the details on _Harry Potter and the Philosopher's Stone_