9. API
Tags: aws
Published: 2021-01-14 10:27:27

After setting up the DynamoDB table, it was time to store the visitor count data of my website into that table. This is not done directly using Javascript code, instead the the [website](https://www.komlalebu.com) calls an API - Application Programming Interface created in AWS `API Gateway`, interfaced with its respective lambda function to perform the task, every time it is loaded.


![Alt Text](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fdd95f311b142d3a08a2cf94dc0e4e49b%2Ftenor.gif%3Fitemid%3D4704853&f=1&nofb=1)

# [API Gateway](https://aws.amazon.com/api-gateway/)

![Alt Text](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fkennbrodhagen.net%2F2015%2F12%2F02%2Fhow-to-access-http-headers-using-aws-api-gateway-and-lambda%2Faws-api-gateway-icon.jpg&f=1&nofb=1)

From the API Gateway console I selected create API.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rt405rzwryqhsd5fcp6q.PNG)

And selected `build` REST API.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0sepg566ua1qrqh6djvx.PNG)

Then I mentioned the name of my API and set endpoint preferrence as [edge location](https://wa.aws.amazon.com/wat.concept.edge-location.en.html) optimised.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ghmo8reh457yhjv71niu.PNG)

Once the api was created, I create an `option` method with integration point as `mock`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l76p7qa14niiuyr7iwxl.PNG)

And another `POST` method, with integration point as Lambda function, mentioning the name of the Lambda function.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hxp8twfax9704dy0ut27.PNG)

Then I had to enable [CORS](https://dev.to/lambdastore/enable-cors-for-aws-lambda-function-366a) from the actions menu. Without CORS enabled, client will not be able fetch data from the function.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p7ki6oqdq0p7xll8gnpn.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pgzy7w57s8auusvhdjmj.PNG)

Once that was done, it was time to deploy the API.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ahirxxs7h9h4lyrw1u1s.PNG)

I selected a new stage with name `dev` and deployed the API.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/elepwsj8j0nfoazy3czx.PNG)

After the deployment, I got the API invoke URL as below. This is the URL that [fetched](https://www.codeinwp.com/blog/fetch-api-tutorial-for-beginners/) by my JavaScript functon `callAPI`.([Read more](https://dev.to/jicoing/7-javascript-13h8))

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dfq3e149zsqff2exh4hl.PNG)

The API calls to Lambda function have been tested in [Postman](https://www.postman.com/).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e8p0zz58ajrc6vd10w6f.JPG)

as well as from the console ([Read more](https://dev.to/jicoing/12-infrastructure-as-code-1df4) - `Step 6`).

> # [AWS::Serverless::Api](https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/sam-resource-api.html)

However this was the manual method of creating an API from AWS console, the final version of the source code is using an API that is created using SAM template ([Read more](https://dev.to/jicoing/12-infrastructure-as-code-1df4)) with the API name as `aws-sam-komlalebu` having a different invoke URL. This api calls the lambda function `KomlalebuFunction`.
This website has a primary API to load count data to dynamoDB table with the help of a lambda function.
> [API Gateway: [aws-sam-komlalebu](https://dev.to/jicoing/9-api-1ad9) + Lambda: [KomlalebuFunction](https://dev.to/jicoing/10-python-2m0o)]


[template.yaml](https://github.com/jicoing/git-komlalebu-sam/blob/master/template.yaml)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qq9f27th79hzzyx3orl4.PNG)


as well as separate API's for retrieving likes/dislikes counts back from the table (which we will see later)**. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qurplo0mvoem7x84j4mh.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fo6rwwrx5362d7x07zxh.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/btytfrxx5bx0ikm76fsu.PNG)

And the API was setup.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0vobgcej8t0ytnl5d9l4.gif)