Accessing pre-built methods from AWS services like S3, Cognito or DynamoDB is super cool, but what do we do if we need some custom methods? Do we create another Node.js server on the side?
The answer is no!
We can directly create custom backend endpoints with AWS.
In this tutorial we will create an endpoint that will return the number of tasks present in the database and at the end we will use our Ionic AWS project to call it.
Let’s start by setting up the Identity and Access Management (IAM) there.
Select the “Roles“:
Create a new role:
Select AWS Lambda for type:
Add one permission to use DynamoDB:
And set the role’s name:
Now we need a lambda function there.
Select “Create a Lambda function“:
Many starting templates there, but we will start from scratch and create a blank function:
We can now use our role:
A basic getTableLength function is now created.
Let’s update this function:
We add everything we need to return a response to a client by setting up the response code, body and the response itself. Nothing hard here.
The context object will be used to send the response by using the succeed method.
Great, we have a basic response ready to be used!
The final part is creating the API in the Amazon API Gateway there.
Name the API:
Create a new method:
And set the type to GET:
The aim now is to use the getTableLength Lambda Function from your region (mine is us-east-1):
We are now redirected to this cool screen:
The most important area is the upper part, especially:
- One click on this link leads to the lambda function edition screen
- The API can be tested there
Here is the result of a test that sends a GET Request:
The API is working as it should!
This is only available in local, we need to expose it to the public.
A deployment is required:
A new Stage named Dev is created:
This Stage is generally used for development purposes.
Finally the service is available at this url:
The Ionic call! Back to our starter stack.
Back to the Ionic application
We head to the app.module.ts file to add the HttpModule:
From there you can go wherever you want, I’m going to make my test call in the tasks area, starting with the tasks.html file:
Just adding one button to make the call and moving to the tasks.ts file:
The callBackEnd method:
And we are done!
This error can pop:
XMLHttpRequest cannot load https://*.amazonaws.com/Dev. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.
Don’t worry, this can easily be handled in the API Gateway:
Ok now we are done!
We can now create any type of REST API in AWS.
Doing the work
Our final task is using DynamoDB in this API, more precisely in the Lambda Function.
At the top of our Lambda Function we add the following lines:
As you can see, AWS is available and every services are ready to be used.
The rest is very simple:
Setting up the params for the DynamoDB request, the ionic-mobile-hub-tasks table will be used.
The describeTable method will give us information about the table where our tasks are stocked.
If there are no errors, data.Table.ItemCount will give us the number of items, number that we add to the responseBody object.
When calling the updated API:
Our response is there!
If we know what we are doing, the whole process is simple. If not … it’s very easy to encounter many issues like the wrong roles, the wrong permissions, which url to call to access the endpoint and much more!
The whole process can be described as follow: Role -> Function -> API.
Take your time, and have everything correctly configured without skipping anything!