DEV Community

Cover image for 9. API
jicoing
jicoing

Posted on • Updated on

9. API

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 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

API Gateway

Alt Text

From the API Gateway console I selected create API.

Alt Text

And selected build REST API.

Alt Text

Then I mentioned the name of my API and set endpoint preferrence as edge location optimised.

Alt Text

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

Alt Text

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

Alt Text

Then I had to enable CORS from the actions menu. Without CORS enabled, client will not be able fetch data from the function.

Alt Text

Alt Text

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

Alt Text

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

Alt Text

After the deployment, I got the API invoke URL as below. This is the URL that fetched by my JavaScript functon callAPI.(Read more)

Alt Text

The API calls to Lambda function have been tested in Postman.

Alt Text

as well as from the console (Read more - Step 6).

AWS::Serverless::Api

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) 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 + Lambda: KomlalebuFunction]

template.yaml

Alt Text

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

Alt Text

Alt Text

Alt Text

And the API was setup.

Alt Text

Top comments (0)