KOAjs First Try

Tried to use KOAjs for the server-side framwork for the backend processing. It’s a powerful framework with relatively simplified syntax, quite easy to start with. If you have some javascript background, with KOAjs probably will be easier for you to become a full-stacker.

There are some preparation readings below, Pls take a look

1. How to use AWS SDK in javascript 
2. Start with Koajs

So what i am trying to do is

1. Front-end
2. Ajax call to backend
3. Backend to receive parameters to call route53 to create a record
4. Upon successful return frontend a result
5. Front-end track the result and based on the result to present the result in HTML

Front-end

I am using bootstrap to build a form as below

1. Post will be send to /api/route53_a_record URI

2. And this post will triggering a javascript to call to backend

3. The “route53_a_record_status” is the field where the result will be shown.

Ajax call to backend

After the submit button clicked, javascript will be triggered.

function Route53_A_Record (){

  $.ajax({

    url:’/api/route53_a_record’,

    type:’post’,

    async:false,

    data:$(‘#route53_a_record’).serialize(),

    success:function(xhr){

      document.getElementById(“route53_a_record_status”).innerHTML = ‘Successful’;

    },

    error:function(xhr) {

      document.getElementById(“route53_a_record_status”).innerHTML = ‘Failed’;

    }

  });

}

So what will happen is the form will be sent to the backend (/api/route53_a_record) to handle. And end result will be filled-in back to HTML with document.getElementById functions

Back-end Processing and result return

And Promise needed here is to check the restful-api call result first before return the data back to the front-end.

dm=ctx.request.body.a_domain_name

// ctx.request.body function is use to extract the form data

var tasks=await new Promise((resolve,reject)=>{

route53.changeResourceRecordSets(params, function(err, data) {

if(err){

reject(err)

}

else{

resolve(data)

}

})

});

console.log(tasks);

if (!tasks) {

ctx.body= {

  “Status”:”Failed”

}

} else {

ctx.body= {

  “Status”:”Successful”

}

}

Upon successful, backend will send response and can be verified with chrome inspect.

Route53 has the record added ..

Result into HTML

I know it’s a bit ugly, ideally the button css need to track the result and change the text. Yet get it working …. Sia .. 😦

Similarly you can have more functions add-on to your portal…