diff --git a/WebApplication/1_StaticWebHosting/README.md b/WebApplication/1_StaticWebHosting/README.md index 06c4e286..ff79dd8f 100644 --- a/WebApplication/1_StaticWebHosting/README.md +++ b/WebApplication/1_StaticWebHosting/README.md @@ -1,6 +1,6 @@ # Module 1: Static Web Hosting with AWS Amplify Console -In this module you'll configure AWS Amplify Console to host the static resources for your web application. In subsequent modules you'll add dynamic functionality to these pages using JavaScript to call remote RESTful APIs built with AWS Lambda and Amazon API Gateway. +In this module, you'll configure AWS Amplify Console to host the static resources for your web application. In subsequent modules you'll add dynamic functionality to these pages using JavaScript to call remote RESTful APIs built with AWS Lambda and Amazon API Gateway. ## Architecture Overview @@ -40,7 +40,7 @@ git config --global credential.helper '!aws codecommit credential-helper $@' git config --global credential.UseHttpPath true ``` -Next you need to create the repository and clone it to your Cloud9 environment: +Next, you need to create the repository and clone it to your Cloud9 environment: 1. Open the [AWS CodeCommit console][codecommit-console] 1. Select **Create Repository** 1. Set the *Repository name** to "wildrydes-site" @@ -67,7 +67,7 @@ Now from your Cloud9 development environment: Once your git repository is created and cloned locally, you'll need to pull in the files for your website and sync them up to the repository. **:white_check_mark: Step-by-step directions** -From your Cloud9 development environment(or local environment) +From your Cloud9 development environment (or local environment) 1. Change directory into your repository: ``` cd wildrydes-site/ @@ -95,18 +95,18 @@ From your Cloud9 development environment(or local environment) ``` ### Deploy the site with the AWS Amplify Console -Next you'll use the [AWS Amplify Console][amplify-console] to deploy the website you've just commited to git. The Amplify Console takes care of the work of setting up a place to store your static web application code and provides a number of helpful capabilities to simplify both the lifecycle of that application as well as enable best practices. +Next, you'll use the [AWS Amplify Console][amplify-console] to deploy the website you've just commited to git. The Amplify Console takes care of the work of setting up a place to store your static web application code and provides a number of helpful capabilities to simplify both the lifecycle of that application as well as enable best practices. **:white_check_mark: Step-by-step directions** 1. Launch the [Amplify Console console page][amplify-console-console] 1. Click **Connect App** 1. Select the *Repository service provider* used today and select **Next** 1. If you used GitHub, you'll need to authorize AWS Amplify to your GitHub account -1. From the dropdown select the *Repository* and *Branch* created today +1. From the dropdown, select the *Repository* and *Branch* created today ![Amplify Repository configuration](../images/amplify-console-repository-setup.png) -1. On the "Configure build settings" page leave all the defaults and select **Next** -1. On the "Review" page select **Save and deploy** +1. On the "Configure build settings" page, leave all the defaults and select **Next** +1. On the "Review" page, select **Save and deploy** The process takes a couple of minutes for Amplify Console to create the neccesary resources and to deploy your code. @@ -116,7 +116,7 @@ Once completed, click on the site image to launch your Wild Rydes site. ![Wild Rydes homepage screenshot](../images/wildrydes-homepage.png) -If you click on the link for *Master* you'll see various pieces of information about your website deployment, including sample renderings on various platforms: +If you click on the link for *Master*, you'll see various pieces of information about your website deployment, including sample renderings on various platforms: ![Amplify Client Renderings](../images/amplify-renderings.png) @@ -124,7 +124,7 @@ If you click on the link for *Master* you'll see various pieces of information a The AWS Amplify Console will rebuild and redeploy the app when it detects changes to the connected repository. Make a change to the main page to test out this process. **:white_check_mark: Step-by-step directions** -1. From your Cloud9 environment open the ```index.html``` file in the root directory of the repository. +1. From your Cloud9 environment, open the ```index.html``` file in the root directory of the repository. 1. Modify the title line: ``` Wild Rydes diff --git a/WebApplication/2_UserManagement/README.md b/WebApplication/2_UserManagement/README.md index f50804a9..d70a9059 100644 --- a/WebApplication/2_UserManagement/README.md +++ b/WebApplication/2_UserManagement/README.md @@ -1,10 +1,10 @@ # Module 2: User Authentication and Registration with Amazon Cognito User Pools -In this module you'll create an [Amazon Cognito][cognito] user pool to manage your users' accounts. You'll deploy pages that enable customers to register as a new user, verify their email address, and sign into the site. +In this module, you'll create an [Amazon Cognito][cognito] user pool to manage your users' accounts. You'll deploy pages that enable customers to register as a new user, verify their email address, and sign into the site. ## Architecture Overview -When users visit your website they will first register a new user account. For the purposes of this workshop we'll only require them to provide an email address and password to register. However, you can configure Amazon Cognito to require additional attributes in your own applications. +When users visit your website, they will first register a new user account. For the purposes of this workshop, we'll only require them to provide an email address and password to register. However, you can configure Amazon Cognito to require additional attributes in your own applications. After users submit their registration, Amazon Cognito will send a confirmation email with a verification code to the address they provided. To confirm their account, users will return to your site and enter their email address and the verification code they received. You can also confirm user accounts using the Amazon Cognito console if you want to use fake email addresses for testing. @@ -23,7 +23,7 @@ Each of the following sections provides an implementation overview and detailed, #### Background -Amazon Cognito provides two different mechanisms for authenticating users. You can use Cognito User Pools to add sign-up and sign-in functionality to your application or use Cognito Identity Pools to authenticate users through social identity providers such as Facebook, Twitter, or Amazon, with SAML identity solutions, or by using your own identity system. For this module you'll use a user pool as the backend for the provided registration and sign-in pages. +Amazon Cognito provides two different mechanisms for authenticating users. You can use Cognito User Pools to add sign-up and sign-in functionality to your application or use Cognito Identity Pools to authenticate users through social identity providers such as Facebook, Twitter, or Amazon, with SAML identity solutions, or by using your own identity system. For this module, you'll use a user pool as the backend for the provided registration and sign-in pages. Use the Amazon Cognito console to create a new user pool using the default settings. Once your pool is created, note the Pool Id. You'll use this value in a later section. @@ -39,7 +39,7 @@ Use the Amazon Cognito console to create a new user pool using the default setti ### 2. Add an App Client to Your User Pool -From the Amazon Cognito console select your user pool and then select the **App clients** section. Add a new app and make sure the Generate client secret option is deselected. Client secrets aren't supported with the JavaScript SDK. If you do create an app with a generated secret, delete it and create a new one with the correct configuration. +From the Amazon Cognito console, select your user pool and then select the **App clients** section. Add a new app and make sure the Generate client secret option is deselected. Client secrets aren't supported with the JavaScript SDK. If you do create an app with a generated secret, delete it and create a new one with the correct configuration. **:white_check_mark: Step-by-step directions** 1. From the Pool Details page for your user pool, select **App clients** from the **General settings** section in the left navigation bar. @@ -55,7 +55,7 @@ From the Amazon Cognito console select your user pool and then select the **App The [/js/config.js][configjs] file contains settings for the user pool ID, app client ID and Region. Update this file with the settings from the user pool and app you created in the previous steps and commit the file back to your git repository. **:white_check_mark: Step-by-step directions** -1. On your Cloud9 development environment open `js/config.js` +1. On your Cloud9 development environment, open `js/config.js` 1. Update the `cognito` section with the correct values for the user pool and app you just created. You can find the value for `userPoolId` on the Pool details page of the Amazon Cognito console after you select the user pool that you created. @@ -120,7 +120,7 @@ The [/js/config.js][configjs] file contains settings for the user pool ID, app c 1. After confirming the new user using either the `/verify.html` page or the Cognito console, visit `/signin.html` and log in using the email address and password you entered during the registration step. -1. If successful you should be redirected to `/ride.html`. You should see a notification that the API is not configured. +1. If successful, you should be redirected to `/ride.html`. You should see a notification that the API is not configured. ![Successful login screenshot](../images/successful-login.png) @@ -128,7 +128,7 @@ The [/js/config.js][configjs] file contains settings for the user pool ID, app c :key: Amazon Cognito provides two different capabilities for managing users, federated identities and user pools. [Amazon Cognito][cognito] user pools can handle almost every aspect about managing users, their login credentials, handling password resets, multifactor authentication and much more! -:wrench: In this module you've used user pools to create a completely hosted and managed user management system that will allow us to authenticate your users and manage their user information. From there you've updated the website to use the user pool and utlized the AWS SDKs to provide a signin form on the site. +:wrench: In this module you've used user pools to create a completely hosted and managed user management system that will allow us to authenticate your users and manage their user information. From there, you've updated the website to use the user pool and utlized the AWS SDKs to provide a signin form on the site. ### Next @@ -145,4 +145,4 @@ The [/js/config.js][configjs] file contains settings for the user pool ID, app c [serverless-backend]: ../3_ServerlessBackend/ [cognito-console]: https://console.aws.amazon.com/cognito/home [configjs]: ../1_StaticWebHosting/website/js/config.js -[jwt-decoder]: https://jwt.io/ \ No newline at end of file +[jwt-decoder]: https://jwt.io/ diff --git a/WebApplication/3_ServerlessBackend/README.md b/WebApplication/3_ServerlessBackend/README.md index 496eddd2..dfa1c88c 100644 --- a/WebApplication/3_ServerlessBackend/README.md +++ b/WebApplication/3_ServerlessBackend/README.md @@ -1,12 +1,12 @@ # Module 3: Serverless Service Backend -In this module you'll use [AWS Lambda][lambda] and [Amazon DynamoDB][dynamodb] to build a backend process for handling requests from your web application. The browser application that you deployed in the first module allows users to request that a unicorn be sent to a location of their choice. In order to fulfill those requests, the JavaScript running in the browser will need to invoke a service running in the cloud. +In this module, you'll use [AWS Lambda][lambda] and [Amazon DynamoDB][dynamodb] to build a backend process for handling requests from your web application. The browser application that you deployed in the first module allows users to request that a unicorn be sent to a location of their choice. In order to fulfill those requests, the JavaScript running in the browser will need to invoke a service running in the cloud. -You'll implement a Lambda function that will be invoked each time a user requests a unicorn. The function will select a unicorn from the fleet, record the request in a DynamoDB table and then respond to the front-end application with details about the unicorn being dispatched. +You'll implement a Lambda function that will be invoked each time a user requests a unicorn. The function will select a unicorn from the fleet, record the request in a DynamoDB table, and then respond to the front-end application with details about the unicorn being dispatched. ![Serverless backend architecture](../images/serverless-backend-architecture.png) -The function is invoked from the browser using [Amazon API Gateway][api-gw]. You'll implement that connection in the next module. For this module you'll just test your function in isolation. +The function is invoked from the browser using [Amazon API Gateway][api-gw]. You'll implement that connection in the next module. For this module, you'll just test your function in isolation. ## Implementation Instructions @@ -55,7 +55,7 @@ Attach the managed policy called `AWSLambdaBasicExecutionRole` to this role to g Next you need to add permissions to the role so that it can access your DynamoDB table. **:white_check_mark: Step-by-step directions* -1. While in the IAM Console on the roles page type `WildRydesLambda` into the filter box on the Roles page and choose the role you just created. +1. While in the IAM Console on the roles page, type `WildRydesLambda` into the filter box on the Roles page and choose the role you just created. 1. On the Permissions tab, choose the **Add inline policy** link in the lower right corner to create a new inline policy. ![Inline policies screenshot](../images/inline-policies.png) 1. Select **Choose a service**. @@ -74,7 +74,7 @@ Next you need to add permissions to the role so that it can access your DynamoDB #### Background -AWS Lambda will run your code in response to events such as an HTTP request. In this step you'll build the core function that will process API requests from the web application to dispatch a unicorn. In the next module you'll use Amazon API Gateway to create a RESTful API that will expose an HTTP endpoint that can be invoked from your users' browsers. You'll then connect the Lambda function you create in this step to that API in order to create a fully functional backend for your web application. +AWS Lambda will run your code in response to events such as an HTTP request. In this step, you'll build the core function that will process API requests from the web application to dispatch a unicorn. In the next module, you'll use Amazon API Gateway to create a RESTful API that will expose an HTTP endpoint that can be invoked from your users' browsers. You'll then connect the Lambda function you create in this step to that API in order to create a fully functional backend for your web application. #### High-Level Instructions @@ -99,7 +99,7 @@ Make sure to configure your function to use the `WildRydesLambda` IAM role you c ## Implementation Validation -For this module you will test the function that you built using the AWS Lambda console. In the next module you will add a REST API with API Gateway so you can invoke your function from the browser-based application that you deployed in the first module. +For this module, you will test the function that you built using the AWS Lambda console. In the next module, you will add a REST API with API Gateway so you can invoke your function from the browser-based application that you deployed in the first module. **:white_check_mark: Step-by-step directions** 1. From the main edit screen for your function, select **Configure test events** from the the **Select a test event...** dropdown. @@ -130,7 +130,7 @@ For this module you will test the function that you built using the AWS Lambda c ``` ![Configure test event](../images/configure-test-event-2.png) 1. Click **Create**. -1. On the main function edit screen click **Test** with `TestRequestEvent` selected in the dropdown. +1. On the main function edit screen, click **Test** with `TestRequestEvent` selected in the dropdown. 1. Scroll to the top of the page and expand the **Details** section of the **Execution result** section. 1. Verify that the execution succeeded and that the function result looks like the following: ```JSON @@ -147,7 +147,7 @@ For this module you will test the function that you built using the AWS Lambda c :key: [AWS Lambda][lambda] is a serverless functions as a service product that removes the burden of managing servers to run your applications. You configure a trigger and set the role that the function can use and then can interface with almost anything you want from databases, to datastores, to other services eithe publicly on the internet or in your own Amazon Virtual Private Cloud (VPC). [Amazon DynamoDB][dynamodb] is a non-relational serverless database that can scale automatically to handle massive amounts of traffic and data without you need manage any servers. -:wrench: In this module you've created a DynamoDB table and then a Lambda function to write data into it. This function will be put behind an Amazon API Gateway in the next module which will in turn be connected to your web application to capture the ride details from your users. +:wrench: In this module, you've created a DynamoDB table and then a Lambda function to write data into it. This function will be put behind an Amazon API Gateway in the next module which will in turn be connected to your web application to capture the ride details from your users. ### Next @@ -163,4 +163,4 @@ For this module you will test the function that you built using the AWS Lambda c [restful-apis]: ../4_RESTfulAPIs/ [dynamodb-console]: https://console.aws.amazon.com/dynamodb/home [iam-console]: https://console.aws.amazon.com/iam/home -[lambda-console]: https://console.aws.amazon.com/lambda/home \ No newline at end of file +[lambda-console]: https://console.aws.amazon.com/lambda/home diff --git a/WebApplication/4_RESTfulAPIs/README.md b/WebApplication/4_RESTfulAPIs/README.md index 3e2443fc..c1050da3 100644 --- a/WebApplication/4_RESTfulAPIs/README.md +++ b/WebApplication/4_RESTfulAPIs/README.md @@ -1,6 +1,6 @@ # Module 4: RESTful APIs with AWS Lambda and Amazon API Gateway -In this module you'll use API Gateway to expose the Lambda function you built in the [previous module][serverless-backend] as a RESTful API. This API will be accessible on the public Internet. It will be secured using the Amazon Cognito user pool you created in the [User Management][user-management] module. Using this configuration you will then turn your statically hosted website into a dynamic web application by adding client-side JavaScript that makes AJAX calls to the exposed APIs. +In this module, you'll use API Gateway to expose the Lambda function you built in the [previous module][serverless-backend] as a RESTful API. This API will be accessible on the public Internet. It will be secured using the Amazon Cognito user pool you created in the [User Management][user-management] module. Using this configuration, you will then turn your statically hosted website into a dynamic web application by adding client-side JavaScript that makes AJAX calls to the exposed APIs. ![Dynamic web app architecture](../images/restful-api-architecture.png) @@ -8,7 +8,7 @@ The diagram above shows how the API Gateway component you will build in this mod The static website you deployed in the first module already has a page configured to interact with the API you'll build in this module. The page at /ride.html has a simple map-based interface for requesting a unicorn ride. After authenticating using the /signin.html page, your users will be able to select their pickup location by clicking a point on the map and then requesting a ride by choosing the "Request Unicorn" button in the upper right corner. -This module will focus on the steps required to build the cloud components of the API, but if you're interested in how the browser code works that calls this API, you can inspect the [ride.js](../1_StaticWebHosting/website/js/ride.js) file of the website. In this case the application uses jQuery's [ajax()](https://api.jquery.com/jQuery.ajax/) method to make the remote request. +This module will focus on the steps required to build the cloud components of the API, but if you're interested in how the browser code works that calls this API, you can inspect the [ride.js](../1_StaticWebHosting/website/js/ride.js) file of the website. In this case, the application uses jQuery's [ajax()](https://api.jquery.com/jQuery.ajax/) method to make the remote request. ## Implementation Instructions @@ -64,7 +64,7 @@ In the Amazon API Gateway console, create a new Cognito user pool authorizer for 1. Click **Test** button and verify that the response code is 200 and that you see the claims for your user displayed. ### 3. Create a new resource and method -Create a new resource called /ride within your API. Then create a POST method for that resource and configure it to use a Lambda proxy integration backed by the RequestUnicorn function you created in the first step of this module. +Create a new resource called /ride within your API. Then, create a POST method for that resource and configure it to use a Lambda proxy integration backed by the RequestUnicorn function you created in the first step of this module. **:white_check_mark: Step-by-step directions** 1. In the left nav, click on **Resources** under your WildRydes API. @@ -109,7 +109,7 @@ From the Amazon API Gateway console, choose Actions, Deploy API. You'll be promp Update the /js/config.js file in your website deployment to include the invoke URL of the stage you just created. You should copy the invoke URL directly from the top of the stage editor page on the Amazon API Gateway console and paste it into the \_config.api.invokeUrl key of your sites /js/config.js file. Make sure when you update the config file it still contains the updates you made in the previous module for your Cognito user pool. **:white_check_mark: Step-by-step directions** -1. On your Cloud9 development environment open `js/config.js` +1. On your Cloud9 development environment, open `js/config.js` 1. Update the **invokeUrl** setting under the **api** key in the config.js file. Set the value to the **Invoke URL** for the deployment stage your created in the previous section. An example of a complete `config.js` file is included below. Note, the actual values in your file will be different. ```JavaScript @@ -154,7 +154,7 @@ Update the /js/config.js file in your website deployment to include the invoke U :key: [Amazon API Gateway][api-gw] is a fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale. You can easily plug in Authorization via [Amazon Cognito][cognito] and backends such as [AWS Lambda][lambda] to create completely serverless APIs. -:wrench: In this module you've used API Gateway to provide a REST API to the Lambda function created in the previous module. From there you've updated the website to use the API endpoint so that you can request rides and the information about the ride is saved in the DynamoDB table created earlier. +:wrench: In this module, you've used API Gateway to provide a REST API to the Lambda function created in the previous module. From there, you've updated the website to use the API endpoint so that you can request rides and the information about the ride is saved in the DynamoDB table created earlier. :star: Congratulations, you have completed the Wild Rydes Web Application Workshop! Check out our [other workshops](../../README.md#workshops) covering additional serverless use cases. @@ -180,4 +180,4 @@ Update the /js/config.js file in your website deployment to include the invoke U [serverless-backend]: ../3_ServerlessBackend/ [setup]: ../0_Setup/ [static-web-hosting]: ../1_StaticWebHosting/ -[user-management]: ../2_UserManagement/ \ No newline at end of file +[user-management]: ../2_UserManagement/ diff --git a/WebApplication/5_OAuth/README.md b/WebApplication/5_OAuth/README.md index 9839d1af..d08d1d75 100644 --- a/WebApplication/5_OAuth/README.md +++ b/WebApplication/5_OAuth/README.md @@ -2,7 +2,7 @@ *Note! This section is currently a work in progress and may not function 100%* -In this module we will turn our Wild Rydes application into a platform, enabling third party developers to build new applications on top of our APIs. Working with third party developers makes it easier for us to open new markets and geographies as well as provide new functionality for our riders. +In this module, we will turn our Wild Rydes application into a platform, enabling third party developers to build new applications on top of our APIs. Working with third party developers makes it easier for us to open new markets and geographies as well as provide new functionality for our riders. You'll configure your Cognito User Pool from module #2 to enable OAuth 2.0 flows. Using OAuth, third party developers can build new client applications on top of your APIs. We will create a new method in the application's API that allows unicorns to list the rides they have given. This will open a new line of business for us, making it easy for third party developers to build applications that help unicorns manage their time and earnings. First, we will create the new method to list rides. Then, we will enable OAuth flows in our Cognito User Pool and deploy a sample client. @@ -52,7 +52,7 @@ Make sure to configure your function to use the `WildRydesLambda` IAM role you c
Step-by-step instructions (expand for details)

-1. Choose on **Services** then select **Lambda** in the Compute section. +1. Choose on **Services**, then select **Lambda** in the Compute section. 1. Choose **Create function**. @@ -83,17 +83,17 @@ Make sure to configure your function to use the `WildRydesLambda` IAM role you c #### Background Amazon API Gateway can leverage an AWS Lambda function to make authorization decisions. In order to support bearer tokens, such as JWT tokens, you can use custom authorizers. When configured with a custom authorizer, API Gateway invokes a Lambda function with the request token and context. The Lambda custom authorizer must return a policy that API Gateway can use to make the authorization decision for the entire API, not just the specific method that was called. To make the creation of custom authorizers easier, we have created JavaScript and Python blueprints that you can select from the Lambda console. These blueprints contain a utility object that simplifies policy generation. -You can also return a set of key/value pairs that are appended to the request context values. The code for our custom authorizer is in the `ListUnicornAuthorizer` folder, open the folder and take a look at the `index.js` file to get an idea of how our custom authorizer works. To authorize access to our new list rides API we rely on a custom scope called `UnicornManager/unicorn` - this scope is automatically added to client tokens produced by the Unicorn Manager application. +You can also return a set of key/value pairs that are appended to the request context values. The code for our custom authorizer is in the `ListUnicornAuthorizer` folder. Open the folder and take a look at the `index.js` file to get an idea of how our custom authorizer works. To authorize access to our new list rides API, we rely on a custom scope called `UnicornManager/unicorn` - this scope is automatically added to client tokens produced by the Unicorn Manager application. #### High-Level Instructions -Use the AWS Lambda console to create a new Lambda function called **ListUnicornAuthorizer** that will process incoming JWT bearer tokens. Upload the provided [ListUnicornAuthorizer.zip](./ListUnicornAuthorizer.zip) as the function code. The authorizer Lambda function relies on an environment variable called **`USER_POOL_ID`**, define this in the Lambda console and set the value of the WildRydes **Pool Id** from the Cognito console. +Use the AWS Lambda console to create a new Lambda function called **ListUnicornAuthorizer** that will process incoming JWT bearer tokens. Upload the provided [ListUnicornAuthorizer.zip](./ListUnicornAuthorizer.zip) as the function code. The authorizer Lambda function relies on an environment variable called **`USER_POOL_ID`**. Define this in the Lambda console and set the value of the WildRydes **Pool Id** from the Cognito console. Make sure to configure your function to use the **WildRydesLambda** IAM role you created in module 2 of this workshop.

Step-by-step instructions (expand for details)

-1. Choose on **Services** then select **Lambda** in the Compute section. +1. Choose on **Services**, then select **Lambda** in the Compute section. 1. Choose **Create function**. @@ -203,14 +203,14 @@ In the API Gateway console, open the `WildRydes` API we created in module #4 and #### Background Our new partner website, called Unicorn Manager, is also a static application hosted on Amazon S3. You can define who can access the content in your S3 buckets using a bucket policy. Bucket policies are JSON documents that specify what principals are allowed to execute various actions against the objects in your bucket. -By default objects in an S3 bucket are available via URLs with the structure http://<Regional-S3-prefix>.amazonaws.com//. In order to serve assets from the root URL (e.g. /index.html), you'll need to enable website hosting on the bucket. This will make your objects available at the AWS Region-specific website endpoint of the bucket: .s3-website-.amazonaws.com +By default, objects in an S3 bucket are available via URLs with the structure http://<Regional-S3-prefix>.amazonaws.com//. In order to serve assets from the root URL (e.g. /index.html), you'll need to enable website hosting on the bucket. This will make your objects available at the AWS Region-specific website endpoint of the bucket: .s3-website-.amazonaws.com Because our application interacts with Cognito via the OAuth 2.0 implicit flow, which requires a redirect, we need our website to use HTTPS. To have an HTTPS endpoint for an S3 static website, we can use a [CloudFront distribution](https://aws.amazon.com/cloudfront/). #### High-Level Instructions Use the console or AWS CLI to create an Amazon S3 bucket. Keep in mind that your bucket's name must be globally unique across all regions and customers. We recommend using a name like `unicornmanager-firstname-lastname`. If you get an error that your bucket name already exists, try adding additional numbers or characters until you find an unused name. -You will need to add a bucket policy to your new Amazon S3 bucket to let anonymous users view your site. By default your bucket will only be accessible by authenticated users with access to your AWS account. See [this example](http://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-2) of a policy that will grant read only access to anonymous users. This example policy allows anyone on the Internet to view your content. The easiest way to update a bucket policy is to use the console. Select the bucket, choose the permission tab and then select Bucket Policy. +You will need to add a bucket policy to your new Amazon S3 bucket to let anonymous users view your site. By default, your bucket will only be accessible by authenticated users with access to your AWS account. See [this example](http://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-2) of a policy that will grant read only access to anonymous users. This example policy allows anyone on the Internet to view your content. The easiest way to update a bucket policy is to use the console. Select the bucket, choose the permission tab, and then select Bucket Policy. Using the console, enable static website hosting. You can do this on the Properties tab after you've selected the bucket. Set `index.html` as the index document, and leave the error document blank. See the documentation on [configuring a bucket for static website hosting](https://docs.aws.amazon.com/AmazonS3/latest/dev/HowDoIWebsiteConfiguration.html) for more details. @@ -219,7 +219,7 @@ Using the CloudFront console, create a new Distribution for web content specifyi

Step-by-step instructions (expand for details)

-1. In the AWS Management Console choose **Services** then select **S3** under Storage. +1. In the AWS Management Console choose **Services**, then select **S3** under Storage. 1. Choose **+ Create Bucket** @@ -275,7 +275,7 @@ Using the CloudFront console, create a new Distribution for web content specifyi 1. In the **Origin Domain Name** field, paste the URL for the S3 static website we just created and **/** as the origin path. **Do not select the bucket from dropdown list, paste the full website url including the http:// prefix. The origin type should be `custom`, not `s3`**. -1. In the **Viewer Protocol Policy** make sure that **Redirect HTTP to HTTPS** is selected. +1. In the **Viewer Protocol Policy**, make sure that **Redirect HTTP to HTTPS** is selected. ![Create CloudFront distribution](../images/create-cloudfront-distribution.png) @@ -298,7 +298,7 @@ Using the Cognito console, add a new client application called **UnicornManager*

Step-by-step instructions (expand for details)

-1. In the AWS Management Console choose **Services** then select **Cognito** under Mobile. +1. In the AWS Management Console, choose **Services** then select **Cognito** under Mobile. 1. In the intro page, click **Manage your User Pools** an open the **WildRydes** pool. @@ -342,7 +342,7 @@ Using the Cognito console, open the **WildRydes** User Pool and create a new cus 1. Specify **UnicornServer** as the **Name**. -1. Use **UnicornManager** as the **Identifier** for the custom resource server. +1. Use **UnicornManager** as the **Identifier** for the custom resource server. 1. In the **Scopes** section, declare a new scope called **unicorn**. I've used "**Allow listing of rides for unicorns**" as the description. @@ -354,7 +354,7 @@ Using the Cognito console, open the **WildRydes** User Pool and create a new cus ### 8. Configure the new app client for OAuth #### Background -Amazon Cognito User Pools supports the authorization code grant, implicit, and client credentials grants. Third party developers can load the Cognito hosted UI with their application ID and request any of the enabled flows. Cognito User Pools also exposes a set of client and server/admin APIs that you can use to build custom authentication flows. As a result of a successful authentication Cognito produces and OpenID Connect-compatible identity token and a JWT access token. The access token includes the custom scopes you declared for the application. +Amazon Cognito User Pools supports the authorization code grant, implicit, and client credentials grants. Third party developers can load the Cognito hosted UI with their application ID and request any of the enabled flows. Cognito User Pools also exposes a set of client and server/admin APIs that you can use to build custom authentication flows. As a result of a successful authentication, Cognito produces an OpenID Connect-compatible identity token and a JWT access token. The access token includes the custom scopes you declared for the application. In our example, we will use the implicit flow for the sake of simplicity. Implicit grant flows are mostly used by mobile applications. For web applications, you would normally require third party developers to host their own backend service and use the authorization code grant flow. @@ -364,9 +364,9 @@ Open the **App client settings** and configure the **UnicornManager** app to use

Step-by-step instructions (expand for details)

-1. In the AWS Management Console choose **Services** then select **Cognito** under Mobile. +1. In the AWS Management Console, choose **Services**, then select **Cognito** under Mobile. -1. In the intro page, click **Manage your User Pools** an open the **WildRydes** pool. +1. In the intro page, click **Manage your User Pools** and open the **WildRydes** pool. 1. Open the **App clients settings** from the **App integration** menu on the left. This page lists both the app clients declared for your user pool. Make sure you make the following changes only to the **UnicornManager** client app. @@ -445,4 +445,4 @@ Click **Sign up** to create the unicorn account. The hosted registration ui will Once the account is confirmed, the application will redirect you to the main web page of the Unicorn manager. Use the **Refresh** button on the top right to load a list of the rides for the unicorn you registered. -We have now turned **Wild Rydes** into a platform. Third party developers can now ask us for a new client app id, use our hosted UI to authenticate and register new users. This will allow us to grow our customer base and toolkit beyond what our team can produce by itself, **UnicornManager** is just the first step. +We have now turned **Wild Rydes** into a platform. Third party developers can now ask us for a new client app id, use our hosted UI to authenticate, and register new users. This will allow us to grow our customer base and toolkit beyond what our team can produce by itself, **UnicornManager** is just the first step. diff --git a/WebApplication/6_GraphQLAPI/README.md b/WebApplication/6_GraphQLAPI/README.md index cbd14371..60182cc5 100644 --- a/WebApplication/6_GraphQLAPI/README.md +++ b/WebApplication/6_GraphQLAPI/README.md @@ -2,11 +2,11 @@ *Note! This section is currently part of expansion of this lab. There is currently no Step 7* -In this module you'll use [AWS AppSync][appsync] to build a GraphQL API to find more information about the rides you have taken so far. In a subsequent module you will then modify our web application to add the ride history page which will query this API. +In this module, you'll use [AWS AppSync][appsync] to build a GraphQL API to find more information about the rides you have taken so far. In a subsequent module, you will then modify our web application to add the ride history page which will query this API. ## Architecture Overview -In the [Serverless Backend][serverless-backend] module you created a Lambda function that stored data in a DynamoDB bucket. Then in the [RESTful APIs][restful-apis] module you put Amazon API Gatewway infront of the Lambda function so you could connect it to your web application. Every time that you request a ride through that API, the Lambda function stores the data. Now, let's get that data out and present it as ride history. +In the [Serverless Backend][serverless-backend] module, you created a Lambda function that stored data in a DynamoDB bucket. Then, in the [RESTful APIs][restful-apis] module, you put Amazon API Gatewway infront of the Lambda function so you could connect it to your web application. Every time that you request a ride through that API, the Lambda function stores the data. Now, let's get that data out and present it as ride history. GraphQL provides a robust query language API that works well with web and mobile based applications. AWS AppSync has the ability to put a GraphQL API infront of many different backends, including: AWS DynamoDB, AWS ElasticSearch Service, Amazon RDS Aurora, and AWS Lambda functions. The GraphQL API you will build here will allow you to return all rides, information about rides by their ID, and information about the unicorns that served your ride. @@ -52,7 +52,7 @@ Use the AWS AppSync console to create a new GraphQL API. Call your API `RidesHis #### Background -AWS AppSync has created a base GraphQL schema that contains basic functionality for our API. We could use it to create and delete items from out database, but we're only interested in retrieving data in this module. Expand on what was created by adding a query to find rides based on the unicorn that serviced them. The DynamoDB table currently has no indexes on any other attributes and so you will need to create a SCAN request filtered by UnicornName. +AWS AppSync has created a base GraphQL schema that contains basic functionality for our API. We could use it to create and delete items from out database, but we're only interested in retrieving data in this module. Expand on what was created by adding a query to find rides based on the unicorn that serviced them. The DynamoDB table currently has no indexes on any other attributes, so you will need to create a SCAN request filtered by UnicornName. #### High-Level Instructions @@ -60,7 +60,7 @@ Create a new query `getRidesByUnicornName` that retrieves the ride information b **:white_check_mark: Step-by-step directions** 1. While in the [AWS AppSync Console][appsync-console] in your `RidesHistory` API, select **Schema**. -1. In the Schema editor modify the Query object to add a new query: +1. In the Schema editor, modify the Query object to add a new query: `getRidesByUnicornName(UnicornName: String, limit: Int, nextToken: String): RidesConnection` Such that the final object contains 3 queries: @@ -73,7 +73,7 @@ Create a new query `getRidesByUnicornName` that retrieves the ride information b ``` 1. Click **Save Schema**> -1. Under *Resolvers* find the *Query* section and select **Attach** next to the new query you just created. +1. Under *Resolvers*, find the *Query* section and select **Attach** next to the new query you just created. ![Query Resolvers section](../images/appsync-query-resolvers.png) @@ -121,8 +121,8 @@ Configure the AppSync GraphQL API to use the `WildRydes` user pool as an authori **:white_check_mark: Step-by-step directions** 1. While in the [AWS AppSync Console][appsync-console] in your `RidesHistory` API, select **Settings**. -1. Under *Authorization type* select *Amazon Cognito User Pool*. -1. Under *User Pool configuration* select the region of your user pool and then select the user pool created earlier. Lastly, select *ALLOW* as the default action. +1. Under *Authorization type*, select *Amazon Cognito User Pool*. +1. Under *User Pool configuration*, select the region of your user pool, and then select the user pool created earlier. Lastly, select *ALLOW* as the default action. 1. At the bottom of the page, select **Save**. ![Configured Authorization](../images/appsync-api-authorization.png) @@ -135,7 +135,7 @@ The [AWS AppSync Console][appsync-console] contains a helpful query tool that al 1. While in the [AWS AppSync Console][appsync-console] in your `RidesHistory` API, select **Queries**. 1. Select *Login with User Pools** 1. In the *Login with Cognito User Pools* popup, for `ClientId` enter the `appid` saved earlier. -1. Now you need to login with the user you created earlier in the [User Management][user-management] module. One thing to note is that in Cognito your username is different than your email. You'll need to head to the Cognito Console to find the user name for your created user: +1. Now, you need to login with the user you created earlier in the [User Management][user-management] module. One thing to note is that in Cognito your username is different than your email. You'll need to head to the Cognito Console to find the user name for your created user: 1. Go to the [Amazon Cognito Console][cognito-console] 1. Select **Manage User Pools** 1. Select the user pool created earlier **WildRydes** @@ -175,7 +175,7 @@ The [AWS AppSync Console][appsync-console] contains a helpful query tool that al } ``` -1. Click on the **Play** arrow button in the top of the page and select `getRides` from the new drop down that pops up. On the right you should see the results of the query: +1. Click on the **Play** arrow button in the top of the page and select `getRides` from the new drop down that pops up. On the right, you should see the results of the query: ``` { "data": { @@ -201,7 +201,7 @@ The [AWS AppSync Console][appsync-console] contains a helpful query tool that al } ``` -1. Execute this query from the **Play** drop down and you should now see all rides that were performed by the named unicorn provided. If you only have a single ride by this unicorn explore testing the query using a differnt UnicornName. Note that if you have very few saved rides, you might need to go into the `/rides.html` interface on the web application and generate more rides. +1. Execute this query from the **Play** drop down and you should now see all rides that were performed by the named unicorn provided. If you only have a single ride by this unicorn, explore testing the query using a differnt UnicornName. Note that if you have very few saved rides, you might need to go into the `/rides.html` interface on the web application and generate more rides. ``` { "data": { @@ -228,7 +228,7 @@ You've completed the testing of your AWS AppSync based GraphQL API! :key: [AWS AppSync][appsync] simplifies application development by letting you create a flexible API to securely access, manipulate, and combine data from one or more data sources. AppSync is a managed service that uses GraphQL to make it easy for applications to get exactly the data they need. -:wrench: In this module you've created an AppSync API and connected it to our DynamoDB database created in an earlier module. You then set the authorization mechanism to the same that we are using for our REST API and web application meaning you'll have a unified way across these 3 different aspects of the application. +:wrench: In this module, you've created an AppSync API and connected it to our DynamoDB database created in an earlier module. You then set the authorization mechanism to the same that we are using for our REST API and web application meaning you'll have a unified way across these 3 different aspects of the application. ### Next diff --git a/WebApplication/9_CleanUp/README.md b/WebApplication/9_CleanUp/README.md index 272b4d6e..f4633ece 100644 --- a/WebApplication/9_CleanUp/README.md +++ b/WebApplication/9_CleanUp/README.md @@ -7,7 +7,8 @@ This page provides instructions for cleaning up the resources created during the ### 1. Module 6 - AppSync GraphQL API Cleanup

-:white_check_mark: Step-by-step directions(expand for details)

+

:white_check_mark: Step-by-step directions (expand for details)

+ Delete the AppSync GraphQL API. From the AppSync console, select the application and click **Delete** 1. Go to the [AWS AppSync Console][appsync-console]. @@ -20,7 +21,8 @@ Delete the AppSync GraphQL API. From the AppSync console, select the application ### 2. Module 5 - OAuth Cleanup

-:white_check_mark: Step-by-step directions(expand for details)

+

:white_check_mark: Step-by-step directions (expand for details)

+ Delete the Unicorn Manager CloudFront distribution and S3 bucket for the static website hosting created in module 5. Using the Lambda console, also delete the **ListUnicornRides** and **ListUnicornAuthorizer** functions. If you have deployed the pre-requisites CloudFormation stack, delete the stack using the CloudFormation console. 1. In the AWS Management Console, click **Services** then select **CloudFront** under Networking & Content Delivery. @@ -31,7 +33,7 @@ Delete the Unicorn Manager CloudFront distribution and S3 bucket for the static 1. Using the **Services** dropdown, navigate to the **S3** console under Storage. -1. Select the **unicornmanager-xxx** bucket and click **Delete bucket**. In the confirmation window enter the bucket name and click **Confirm**. +1. Select the **unicornmanager-xxx** bucket and click **Delete bucket**. In the confirmation window, enter the bucket name and click **Confirm**. 1. Next, using the **Services** dropdown navigate to the **Lambda** console under Compute. @@ -56,7 +58,7 @@ Delete the REST API created in module 4. There is a **Delete API** option in the 1. Enter the name of your API when prompted and choose **Delete API**. ### 4. Module 3 - Serverless Backend Cleanup -Delete the AWS Lambda function, IAM role and Amazon DynamoDB table you created in module 3. +Delete the AWS Lambda function, IAM role, and Amazon DynamoDB table you created in module 3. **:white_check_mark: Step-by-step directions** @@ -120,7 +122,7 @@ AWS Lambda automatically creates a new log group per function in Amazon CloudWat **:white_check_mark: Step-by-step directions** -1. From the AWS Console click **Services** then select **CloudWatch** under Management Tools. +1. From the AWS Console click **Services**, then select **CloudWatch** under Management Tools. 1. Choose **Logs** in the navigation menu. 1. Select the **/aws/lambda/RequestUnicorn** log group. If you have many log groups in your account, you can type `/aws/lambda/RequestUnicorn` into the **Filter** text box to easily locate the log group. 1. Choose **Delete log group** from the **Actions** drop-down. diff --git a/WebApplication/README.md b/WebApplication/README.md index afd295f7..47c24b9f 100644 --- a/WebApplication/README.md +++ b/WebApplication/README.md @@ -1,8 +1,8 @@ ## Serverless Web Application Workshop -In this workshop you'll deploy a simple web application that enables users to request unicorn rides from the [Wild Rydes][wildrydes] fleet. The application will present users with an HTML based user interface for indicating the location where they would like to be picked up and will interface on the backend with a RESTful web service to submit the request and dispatch a nearby unicorn. The application will also provide facilities for users to register with the service and log in before requesting rides. +In this workshop, you'll deploy a simple web application that enables users to request unicorn rides from the [Wild Rydes][wildrydes] fleet. The application will present users with an HTML based user interface for indicating the location where they would like to be picked up and will interface on the backend with a RESTful web service to submit the request and dispatch a nearby unicorn. The application will also provide facilities for users to register with the service and log in before requesting rides. -The application architecture uses [AWS Lambda][lambda], [Amazon API Gateway][api-gw], [Amazon S3][s3], [Amazon DynamoDB][dynamodb], [Amazon Cognito][cognito], and [AWS Amplify Console][amplify-console]. Amplify Console hosts static web resources including HTML, CSS, JavaScript, and image files which are loaded in the user's browser via S3. JavaScript executed in the browser sends and receives data from a public backend API built using Lambda and API Gateway. Amazon Cognito provides user management and authentication functions to secure the backend API. Finally, DynamoDB provides a persistence layer where data can be stored by the API's Lambda function. +The application architecture uses [AWS Lambda][lambda], [Amazon API Gateway][api-gw], [Amazon S3][s3], [Amazon DynamoDB][dynamodb], [Amazon Cognito][cognito], and [AWS Amplify Console][amplify-console]. Amplify Console hosts static web resources including HTML, CSS, JavaScript, and image files which are loaded in the user's browser via S3. JavaScript executed in the browser sends and receives data from a public backend API built using Lambda and API Gateway. Amazon Cognito provides user management and authentication functions to secure the backend API. Finally, DynamoDB provides a persistence layer where data can be stored by the API's Lambda function. See the diagram below for a depiction of the complete architecture. @@ -23,7 +23,7 @@ architecture and verify your work. :warning: These modules are intended to be executed linearly. -After you have completed the workshop you can delete all of the resources that were created by following the [cleanup guide][cleanup]. +After you have completed the workshop, you can delete all of the resources that were created by following the [cleanup guide][cleanup]. ### Next