Skip to content

Latest commit

 

History

History
230 lines (167 loc) · 8.99 KB

instructions.md

File metadata and controls

230 lines (167 loc) · 8.99 KB
Raw

The NFT Art Heist

Quick Links

Premise

A very important NFT was recently corrupted, and we need your help to restore the art! We have these tools handy:

  1. The RGB values of each pixel in the art
  2. A way to display hex values to restore the art

However, we still don't have a way to efficiently convert RGB values to hex values to restore the NFT. That's where you come in.

The Task

Your task is to harness the power of AWS Lambda serverless functions to deploy code in the cloud that:

  • Receives an RGB value formatted as r,g,b through a parameter named rgb

Example: https://sample-url.com?rgb=255,255,255

  • Returns the equivalent hex value formatted as ffffff in a JSON object with hex as the key name.

Example: {"hex":"ffffff"}

💡 Tip: Don't worry if you don't know how do work with the input and output of serverless functions! We'll walk through that.

In your portal, you will be automatically assigned pixel values that your function will restore when it functions correctly.

What the heck is a serverless function?

Topics to be familiar with:

  • HTTP Requests
  • APIs
  • "The Cloud"

In short, a serverless function is a way to run code without worrying about how to host a server. It allows developers to run small snippets of code meant to be executed over and over again on servers they don't need to manage.

A deeper dive into what "serverless" is.

Getting Started

  1. Make an account on the workshop website
  2. Access your AWS account using the provided credentials.

Coding in AWS

1. Navigate to AWS Lambda.

Go to the homepage of AWS Lambda and click on the orange button named Get Started with AWS Lambda. image

2. Create a new serverless function

On the dashboard of AWS Lambda, click on the orange button titled Create function. image

Leave the default settings as is and name the function whatever you want! (Ideally, it should be something identifiable later.) Press the Create function button at the bottom right corner to create the function.

3. Create an API Gateway

An API Gateway acts as a "doorway" to expose your AWS resources to the public; a way to let information in and direct it out. In our case, it'll act as a way for users to pass in a RGB color value through a parameter.

Navigate to this page and click Get started with Amazon API Gateway.

Click on Build for the HTTP API option.

Why are we not using a REST API? They have more options that make the API more secure, but those are not necessary for this use case.

image

At Step 1, select Lambda as an integration and find the function you just created in the dropdown. Name your API. image

Click Next to go to Step 2 and delete the text in Resource Path. Keep clicking Next until you get to Step 4: Review and create. Then, click Create. image

Lastly, make sure to keep this URL in handy! We'll be using it to access our Lambda function. image

4. Code the function

Click on the index.mjs file in the browser IDE that should have opened once your function was created.

If you closed that tab, navigate back with this link.

This is where the code for your serverless function will be edited and deployed. image

Recall that your function should do three things:

  1. Receive a RGB color value as an input from a URL parameter named rgb.
  2. Convert the RGB color value to its hex equivalent.
  3. Return the hex equivalent in a JSON object formatted as {"hex": "the hex value"}.

Starter Code:

import json

def lambda_handler(event, context):
    # Get the RGB value from the event object (parameter)
    rgb = event["queryStringParameters"]["rgb"]

    # Split the RGB value into separate red, green, and blue values
    split_rgb = rgb.split(',')
    
    # Access each hex value by indexes (make sure to convert to integer!)
    red = # Your code here
    green = # Your code here
    blue = # Your code here

    # Convert the red, green, blue color values to hex representation
    hex_red = # Your code here
    hex_green = # Your code here
    hex_blue = # Your code here
    
    # Concatenate hex values
    hex_value = # Your code here
    
    # Return the hex value
    return { 'hex': hex_value}

1. Parameters

URL Parameters are a simply a way of passing information. They look like this:

www.test.com?parameter1=value1&parameter2=value2

In our case, we put this line in our code to receive the "rgb" parameter.

rgb = event["queryStringParameters"]["rgb"]

2. Converting Values

First, keep in mind that the input type of the RGB value is a string and that it is formatted like r,g,b.

A user would've passed it in the URL like so, where the red, green, and blue values are all 1.

www.test.com?rgb=1,1,1

The next line of code splits the user's input into a Python List with the separated red, green, and blue values.

split_rgb = rgb.split(',')
# Example value of split_rgb: [1, 1, 1]

Using split_rgb, assign the red, green, and blue values from the List to their own variables. Be sure to convert them to integers!

red = # Your code here
green = # Your code here
blue = # Your code here

Format strings in Python can come in handy when you're converting between data values. Using this format string f'{your_variable:02x}', format the red, green, and blue RGB values in hex.

hex_red = # Your code here
hex_green = # Your code here
hex_blue = # Your code here

Finally, concatenate the values (now in hex) together in order of red, green, and blue to create a full color hex code.

hex_value = # Your code here

3. Returning a Response

The last line in the code provided returns your converted hex_value with this statement in a dictionary object.

return { 'hex': hex_value}

❓ Where is this returning to? If you're confused about where the function is returning its information to, head to the next section to see your lambda function in action.

5. Test

Get your URL you obtained from your API Gateway back in Step 3.

Case 1:

https://yoururl.com?rgb=100,100,100

Expected Result:

{"hex":"646464"}

Case 2:

https://yoururl.com?rgb=8,45,240

Expected Result:

{"hex":"082df0"}

Checking your logs!

Don't know what's erroring out? Click on Monitor on the top menu bar. image

Then, click on the most recent LogStream to see your function's logs. image

Help us restore the NFT!

image To see if your function is able to correctly restore the NFT, navigate to /test and submit the function's URL. You will:

  1. See feedback about which hex values were correct and which were not.
  2. Be able to see your successfully restored pixels on /art along with your peers'. image

💡 Tip: Roll your mouse over filled in pixels to see who did it and the time it was restored!

  1. Submit your function again to keep testing it.