AWS - Serverless Lambda Functions

Summary - Lamda functions served up using Amazon's AWS server using the lambda functions module allow you to host simple functions and pay only when those functions are called. Uses npm install serverless

AWS lambda functions allow you to serve just a function, a stateless function, via Amazon's AWS servers. This means you can serve one function and only pay for it when it is used. They allow up to 1 million hits for free.

Stateless - The function is stateless, which means it does not remember anything. It is simply a function that runs in a container that opens up when called and closes upon returning a value. It can be passed in arguments via a query string, so it can use passed in data. It can also use other data created with the function.

The end result is an http URL that serves up the data returned by the function. It can be used in your frontend APP simply by doing a fetch call to the URL.

---

Installation - Serverless
Serverless can be used for AWS, azure, google, and most other serverless hosts. One of these steps you have to choose which one you want...

// install globally
// not within the project - do this once only - I think - not sure
sudo npm install -g serverless

// install template to get us started
// do this within the project you want to host with AWS
// 
sls create -t aws-nodejs

severless.yml - config file - research - see video for detailed setup 
this will tell you about how to connect your function with AWS - its very simple!
a further video explains how to deploy your function. however, it is as simple as running sls deploy, once your .yml file is setup properly. But there are a couple tricks for how to run in dev mode as well as how to deploy locally so you don't get charged while you test

---

Example - The AWS Function

Basics of using this function. There is a great deal more you can do in these functions, such as getting and storing photos, etc, but the point is that there is one function, it does one thing and returns one thing then is gone. Once we deploy this AWS will give us a URL that calls this function. On the frontend we simply fetch the URL and handle the response.

'use strict'

const emojis = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

module.exports.badge = async (event, context) => {
    const score = event.queryStringParameters.score
    const emoji = emojis[score/100]
    return {
        statusCode: 200,
        headers: {
            'Access-Control-Allow-Origin': '*'     
            // this is so we don't get cors error, we put * for all for testing, but in production we will want replace with the proper URL (our frontend URL?) we expect to request this function so it allows only that URL to call it.
        }
        body: JSON.stringify({
            message: 'It worked!',
            input: emoji
        })
    }

}

---

Example - React Frontend

Say you have a scoring system and every time a user gets to a certain score they are awarded a new 'graphic' like an emoji.  You can have a simple function in AWS that holds an array of emoji's. Then you send in a query parameter with the player's score and return an emoji depending on their score. It takes in a value of a score and returns an item in the array based on the score. Simple enough, right?

On the frontend you simply fetch the AWS URL with the score parameter in the query string and display the result. In React you would do this by storing the result of the fetch call in the state. You also would call that same function in componentDidUpdate. Say you want to update the player's emoji every time their score increases by 100.

class Badge extends Component {
    constructor(){
        this.state = {
            badge: ''
        }
    }

    componentDidMount(){
        this.getBadge(this.props.score)
    }

    componentDidUpdate(prevProps, prevState){
        if(prevProps.score < this.props.score + 100){
            return null
        }
        this.getBadge(this.props.score)
    }

    getBadge = () => {
        fetch(`awsUrl.com?score=${this.props.score}')
            .then(res => res.json())
            .then(data => this.setState({ badge: data.input }))
            .catch(err => console.log(err))
    }

    render(){
        return(
            <div>{this.state.badge}</div>
        )
    }

}