Last update on Saturday, January 12th 2019

Analyzing the Ionic AWS Full-Stack Starter: Custom APIs

In the previous tutorials here and there, we analyzed the amazing Ionic AWS Full-Stack Starter project.

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.

Roles

Let's start by setting up the Identity and Access Management (IAM) there.

Select the "Roles":

Ionic AWS full stack starter role home

Create a new role:

Ionic AWS full stack starter role create

Select AWS Lambda for type:

Ionic AWS full stack starter role type

Add one permission to use DynamoDB:

Ionic AWS role permissions

And set the role's name:

Ionic AWS full stack starter role name

Lambda Function

Now we need a lambda function there.

Select "Create a Lambda function":

Ionic AWS full stack starter home lambda

Many starting templates there, but we will start from scratch and create a blank function:

Ionic AWS full stack starter blank lambda

We can now use our role:

Ionic AWS full stack starter lambda assign role

A basic getTableLength function is now created.

Let's update this function:

exports.handler = (event, context, callback) => {
  var responseCode = 200;

  var responseBody = {
    received: true
  };

  var response = {
    statusCode: responseCode,
    headers: {
      "x-custom-header": "custom header value"
    },
    body: JSON.stringify(responseBody)
  };
  context.succeed(response);
};

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!

API

The final part is creating the API in the Amazon API Gateway there.

Ionic AWS full stack starter api home

Name the API:

Ionic AWS full stack starter create api

Create a new method:

Ionic AWS full stack starter api method select

And set the type to GET:

Ionic AWS full stack starter api method choose get

The aim now is to use the getTableLength Lambda Function from your region (mine is us-east-1):

Ionic AWS full stack starter api setup lambda

We are now redirected to this cool screen:

Ionic AWS full stack starter api chain copy

The most important area is the upper part, especially:

  1. One click on this link leads to the lambda function edition screen
  2. The API can be tested there

Here is the result of a test that sends a GET Request:

Ionic AWS full stack starter api test

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:

Ionic AWS full stack starter api select deploy

A new Stage named Dev is created:

Ionic AWS full stack starter create dev stage

This Stage is generally used for development purposes.

Finally the service is available at this url:

Ionic AWS full stack starter stage url

What’s next?

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:

import { HttpModule } from '@angular/http';

@NgModule({
  .
  .
  .
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp, new AwsConfig().load())
  ],
  .
  .
  .
})

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:

 <ion-refresher (ionRefresh)="refreshData($event)">
    <ion-refresher-content
                  pullingIcon="arrow-dropdown"
                  pullingText="Pull to refresh"
                  refreshingSpinner="circles"
                  refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

  <button ion-button color="danger" (click)="callBackEnd()">Call Custom REST API</button>
.
.
.

Just adding one button to make the call and moving to the tasks.ts file:

import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

export class TasksPage {
.
.
.

  constructor(..., public http: Http) {
    .
    .
    .
  }

The callBackEnd method:

  callBackEnd() {
    this.http.get('https://2nseea33n8.execute-api.us-east-1.amazonaws.com/Dev')
      .map(res => res.json())
      .subscribe(result => console.log('result: ', result));
  }

And we are done!

Almost …

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.

‘member CORS?

Don’t worry, this can easily be handled in the API Gateway:

Ionic AWS full stack starter enable cors

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:

var AWS = require("aws-sdk");
var dynamo = new AWS.DynamoDB();

As you can see, AWS is available and every services are ready to be used.

The rest is very simple:

    var params = {
      TableName: 'ionic-mobile-hub-tasks'
    };

    dynamo.describeTable(params, function(err, data) {
      if (err) {
        console.log(err); // an error occurred
      }
      else {
        console.log(data.Table.ItemCount);
         var responseBody = {
          received: true,
          itemCount: data.Table.ItemCount
        };
        .
        .
        .
      }
    });

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:

Ionic AWS full stack api call itemcount

Our response is there!

Conclusion

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!

Analyzing the Ionic AWS Full-Stack Starter: Configuration and Providers

Understand how
the Awesome Io...
...

Analyzing the Ionic AWS Full-Stack Starter: The Features

Discover how the
Ionic AWS Full-S...
...

ES6 Features That Can't Be Ignored (part 1)

This first part will
show you the m...
...

Stay up to date


Join over 4000 other developers who already receive my tutorials and their source code out of the oven with other free JavaScript courses and an Angular cheatsheet!
Designed by Jaqsdesign