Hello and welcome back. In the previous lecture, we created a REST interface for our state machine using API Gateway. Now, to invoke the methods in the API through a client, we'll need to download the client SDK generated by API Gateway, which will provide us with AJAX calls to invoke the API. I'll go to the API Gateway console and under the Stage, there is the SDK Generation tab. I'll choose my platform as JavaScript and generate the SDK. If you unzip this package, it includes all the libraries and object definitions necessary to make calls to the API. The README file has instructions on which third-party scripts to include and how to initiate an API Gateway client. Whereas apigClient.js has the method names you need to call. The rootGet and rootPost are what we're going to use in our page to make calls to the API Gateway. Here's an HTML page I've already created. I've included all the scripts mentioned in the README file. It's a goPizza restaurant webpage with menu choices, pickup options and payment methods. There is some HTML and styling here and if I open up in a local browser, it looks like this. The user selects the menu items, chooses the pickup or delivery options, and then selects the payment type and fills in the payment details and clicks on Order. We'll get all the information submitted in the HTML form to make the body of the POST call. Note that the body consist of input which has the necessary input parameters for our state machine. Then the name of the execution, we'll make it unique by appending order ID and a timestamp. And then there is a the state machine ARN of the state machine PizzaOrderWorkflow, which we want to be started through this call. Once the form in our page is submitted, we'll call the rootPost method of our API to initiate the state machine with the required inputs. Then we'll query the state of the state machine execution with our rootGet call and notify the user with printed status and with a sound playback. Our last lambda function in the state machine does just that for us. It converts the order status text to speech and creates an MP3 file and uploads it on the S3 from where our webpage can access and play it back. Okay, now to see everything in action. Let's upload our static HTML page along with the generated libraries and scripts on S3. I'll go to the S3 console here and create a bucket with a unique name. Let's call it gopizza. Make sure the bucket name is the same in the lambda function, notify with play, because in that, we refer to this bucket to upload the orderstatus.mp3 file, so they both should match. I'll upload our HTML page, lib folder, and apigClient.js files. Then I'll go to the Properties and enable Static web hosting for this bucket. And for index document, I'll type my HTML page name, which is gopizza.html, and Save. Now I'll make all the objects in the bucket public so that they can be accessed from the web. Now if we go to the endpoint provided to us in Properties, the webpage should be available. Let's put in some menu items and choose the pickup option, and I want to pay by credit card. Let's put all ones here, so our payment can pass. I'll open the Dev Console, so we can look at the API calls going through. Now let's click on the Order button and see the demo in action.

- [Female AI] Tina Brown, thank you for your order. It will be ready for pickup in 15 minutes.

I hope you heard that response coming from the webpage. As you can see, there are some console logs from the webpage that are put in there for debugging. If I open the Network console, you can see all the methods that have been called. OPTIONS method is always called first to make sure we have access to other methods since we enabled calls earlier in our API. For POST, you can see the params that we sent and the response, which was received to here, the executionArn and startDate of the state machine. Then for the GET call, we pass the same executionArn that was returned by the POST call as a query string parameter and received back the current state of the state machine including all these properties, and output from which we get back our order status. The last GET call is by the webpage to S3 to get the orderstatus.mp3 file from S3 to play it back, and which was placed there by the lambda function in our state machine. Now if we look here at the Step Function Console, we can see the last execution initiated by the webpage and see how it took the success path and notified the user with custom lifelike speech notification. I'll go back to the webpage now and let's now change the credit card number and name to submit another order.

- [Female AI] Tom Brown, sorry, your payment didn't go through. Please, try again.

Okay, as you saw, this order failed and the user notified. If you go to the Step Functions Console, you can see the state machine execution of the last order and it's following the Cancel path. If anything were to go wrong, you can easily debug it through these step functions as it logs every step. Okay, now our presentation layer is complete and we have successfully built a multi-tier web application on AWS using Cerberus architecture. Hope you enjoyed it.