Simulated Slot Machine Browser Game

In the “Architecting on AWS” course there is a slide showing how the AWS SDK for JavaScript can be used to allow a client side script to invoke a Lambda function.

In this example, a simulated slot machine browser-based game invokes a Lambda function that generates the random results of each slot pull, returning those results as the file names of images used to display the result. The images are stored in an Amazon S3 bucket that is configured to function as a static web host for the HTML, CSS, and other assets needed to present the application experience.

The example is taken from:

Tutorial: Creating and Using Lambda Functions

The tutorial is mainly about using the SDK for JavaScript and so is outside the scope of an Architecting course. However, it is a very interesting project. There are SDKs for IOS, Android and JavaScript. The SDK for JavaScript is for desktop and other web browsers.

I would recommend the following as pre-requisite knowledge, all of which are covered in the course:

  • Lambda
  • Assigning Roles to Lambda
  • S3 Static Web Sites
  • Dynamo DB
  • Cognito
  • Use of Access Keys

The tutorial uses a config.json file configured with suitable credentials (an access key id and secret access key) to give permission to the supplied Node.js scripts to create the resources for the project. In the Architecting course we talk about the use of passwords for Console access, and access keys for the use of CLI and SDK. So this is an example of using keys along with the AWS SDK.

The tutorial assets are downloaded from GitHub. Most of the tutorial involves using supplied Node.js scripts to create and configure the resources.

At the end of the tutorial, you click on the S3 Static Web site URL:

Clicking on the red handle spins the wheels and invokes the Lambda function, which selects images to display at random. The names of the images come from a Dynamo DB table, and the actual images from S3.

Pre-requistes for the tutorial are:

  • Install Node.js on your computer to run various scripts that help set up the resources
  • Install the AWS SDK for JavaScript on your computer to run the setup scripts.

If you don’t want to install these on your computer you could use Cloud9

Its fairly easy to get started with Cloud9, and it already has Node.js installed.

The tutorial guides you through the following:

Create an Amazon S3 bucket to store all the browser assets. These include the HTML file, all graphics files, and the CSS file. The bucket is configured as a static website.

The JavaScript code in the browser, a snippet of which you see in the slide above, needs authentication to access AWS services. Within web pages, you typically use Amazon Cognito Identity to do this authentication.

The Architecting course covers Cognito at a very high level. This is the course slide on Cognito:

Elsewhere I have a post about another project called “WildRydes”. That project also used a browser and a Lambda function, but the browser made a call to API Gateway which then invoked Lambda. The browser gained permission to invoke API Gateway by getting a token from a Cognito User Pool after signing up and logging in and then providing that token to API gateway. That scenario did not require Identity Pools.

In this tutorial, Cognito User Pools are not used. Instead, Identity Pools are used. In this tutorial, the user dosn’t have to login. Identity Pools can support unauthenticated identities by providing a unique identifier and AWS credentials for users who do not authenticate with an identity provider. This is typically used to allow Guest access to an application. The identity pool is configured to allow the browser to assume a Role with permissions to invoke the Lambda function. The javascript running within the browser supplies a Cognito Identity Pool Id.

Next we create an execution role for the Lambda function.

Next we create and populate the Dynamo DB table.

Next we edit the supplied Lambda function to reference the role and the bucket, create a zip file of the Lambda function and upload it to the Lambda service.

Finally, we access the S3 static web site URL to test the application.

Some “gotchas”:

Most of the tutorial uses Node.js scripts to create, configure and populate resources, but sometimes the required command is not explicitly supplied, because the command can vary depending if you are using Linux, Mac, Windows. For example, once we have edited the Lambda function to customise it, to create a zip file of the Lambda function:

zip slotpull.js.zip slotpull.js

Also, the instructions to copy some of the assets to the S3 bucket were missing. I downloaded the assets to my local windows machine, and then used the S3 console to copy the relevant files.

The tutorial dosn’t ask you to change the region in the various scripts. You can use any region as long as you are careful to spot any references to a region and edit the files.

To tear down, delete all the resources as usual. Alternatively, as it is all serverless, you could leave it in place.

 

 

Introduction to Lambda – Image Thumbnail Application

In the “Systems Operations on AWS course” there is a short section on Lambda, and an example of creating a serverless image thumbnail application.

The course does not include any labs on Lambda, however the above graphic from the courseware is a free qwiklabs.com lab called “Introduction to AWS Lambda”.

If you attended an official AWS course with a partner training organization, you will have likely created and used an account on xx-xxxx-qwiklab.com, where xx-xxxx is training partner specific.

You can also create an account directly with qwiklabs.com, There are over 100 labs based on AWS, some which are free, including “Introduction to AWS Lambda”

A user uploads an object to the source bucket

S3 detects the object-created event and invokes the Lambda function passing the event data as a function parameter.

Lambda reads the object, creates a thumbnail using graphics libraries, and saves the thumbnail to the target bucket.