diff --git a/docs/content/labs/bookstore.md b/docs/content/labs/bookstore.md index ebcddf02..e24bb989 100644 --- a/docs/content/labs/bookstore.md +++ b/docs/content/labs/bookstore.md @@ -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) @@ -43,7 +43,7 @@ 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 @@ -51,17 +51,17 @@ You’ll have to add some activities to the flow for it to do something. To add ![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 @@ -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. @@ -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_ \ No newline at end of file +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_