DEV Community: Vikram Chaudhary

Create a Free About Me Page Using AWS S3, API Gateway and AWS Lambda

Vikram Chaudhary — Fri, 19 Jun 2020 07:45:18 +0000

Hello Friends, In one of my article I created an About Me page using AWS S3, that would be the prelude for this article. In this article I will add a Contact Me section to the same page using the services like AWS API Gateway, AWS Lambda and AWS SES. And hence you will be having your own single page server less web app showing your work history details and contact me form.

This is one of the benefit of being in the tech space. If you want to avail this kind of web page, you have to pay around $5 per month. But I will show how to create for free.

My free web app looks like as shown here : My Sample profile, Not actual data

The page can be used by professionals to create an online profile showing their work history. And letting the end user to contact them.

I have not used any server for the contact form. In fact everything is server less and achieved with the help of AWS services.

Though you will not be able to contact me using the form as I have removed the Web API after writing this article.

This is going to be a long post, please be patient.

Adding a contact Me form to the Web Page

I have added a new section to the Web Page from this article as shown in the figure below.

HTML for the new section is as shown below.

<div class="container">
    <h1 class="contact-me">Contact Me</h1>

      <div id="Offer">
        <div class="row">
          <div class="inputbox">
            <input type="text" placeholder="Your Name" id="f_name" name="f_name">
          </div>
          <div class="inputbox">
            <input type="text" placeholder="Your email address" id="f_email" name="f_email">
          </div>
        </div>
        <div class="row">
          <div class="inputbox">
            <textarea id="f_offer" name="f_offer" rows="10">I would like to offer $100 per hour. Please work For Me</textarea>
        </div>
        <div class="row">
          <div class="col align-right">
            <button class="btn btn-large" type="button">Submit offer</button>            
          </div>
        </div>
      </div>
  </div></div>

And some of the CSS I have added is as below

.contact-me{    
    margin: 150px 50px 20px 0px;
    font-weight: bold;
    font-size: 40px;
}

.inputbox input {
    width: 100%;
    margin: 0px 20px 20px 0px;
    height: 30px;
    border-radius: 10px;
}

.inputbox textarea {
    width: 100%;
    margin: 0px 20px 20px 0px;
    height: auto;
    border-radius: 10px;
}

And I have added a JavaScript file which has Jquery code to call the API Gateway URL

var bg_x = 0;
jQuery(document).ready( function($){    

    // validate and process form here
    $("button", "#Offer").click(function() {

        alert('Hello World');
        var f_name = $("#f_name").val();        
        var f_email = $("#f_email").val();      
        var f_offer = $("#f_offer").val();

        if (f_name == "") {
            $("#f_name").focus().addClass( 'error' );
            $("#error_name").show();
            return false;
        }
        if (f_email == "") {
            $("#f_email").focus().addClass( "error" );
            $("#error_email").show();
            return false;
        }
        if (f_offer == "") {
            $("#f_offer").focus().addClass( "error" );
            $("#error_offer").show();
            return false;
        }
        var theData = { name: f_name, message: f_offer, fromaddress: f_email };  
        $.ajax({
            'url':  " https://bsx0pgkzr0.execute-api.us-east-1.amazonaws.com/default/ContactMe", 
            'type': 'POST',
            'crossDomain': true,
            'data': JSON.stringify(theData), 
            'crossDomain': true,            


            success: function( result ) { 
            if( result == 'success' )
                $("#Offer").fadeOut( 200, function(){ $("#msg").fadeIn(500); } ); 
            else {  
                $("i", "#error_msg").html( result );
                $("#Offer").fadeOut( 200, function(){ $("#error_msg").fadeIn(500); } ); 
            }
        }});
    });

});

Creating an AWS Lambda

This would be the main component of our small project. We will be using this component to receive the web request in JSON from the web page through API gateway and sending it to Amazon SES.

In the AWS console, search for the AWS lambda service. And in the AWS Lambda service console, click “Create Function” button.

Finally in the newly opened console too create a function, select “Author From Scratch” option.

I have named the function as “Contact Me” and selected Node as preferred programming language to create the method. Select “Create a custom Role” and you will be taken to a new console. In this console, you need to create a role which will allow you to grant access to lambda function to AWS services.

Once clicked on the “Create Function” you will be taken to the function console.

In this console, you need to add the trigger. The trigger will be used to invoke this function. In our case the trigger will be an API Geteway service.

Select the API Gateway service from the available triggers in the left hand side.

Below are the two figures showing the lambda method and trigger configuration.

As you can see in the figure b, I have created a new API gateway service. This API will be in turn calling the lambda method.

Click on the “ContactMe” box present in the figure above. You will find a console where you can add the code. Since I have selected NodeJS as my preferred language, I will get the console for NodeJS.

In the console, add the below code:

var aws = require('aws-sdk');
var ses = new aws.SES({
    region: 'us-east-1'
});
var StringDecoder = require('string_decoder').StringDecoder


exports.handler = function (req , context, callback){
    var parsedData = JSON.parse(req.body)

    var message = "Name :" + parsedData.name + "\n Email: " +  parsedData.fromaddress + "\n Message: " + parsedData.message ;

    var eParams = {
        Destination: {
            ToAddresses: ["vikram.vee@outlook.com"]
        },
        Message: {
            Body: {
                Text: {
                    Data: message
                }
            },
            Subject: {
                Data: "Some One Contacted You!!"
            }
        },
        Source: 'vikram.vee@outlook.com'
    };

    var email = ses.sendEmail(eParams, function(err, data) {
        if (err){ console.log(err);
        callback(400, err);
        }
        else {
            console.log("===EMAIL SENT===");
            console.log("EMAIL CODE END");
            console.log('EMAIL: ', email);
            callback(null,{
            "isBase64Encoded": false,
            "statusCode": 200,
            "headers": { "Access-Control-Allow-Origin": "*"},   
            "body": "message Sent"
        });
        }
    });
};

The above code receives the request data from the web page through API gateway. Transforms the data in readable format and sends the mail using Amazon SES.

And once you click on the API Gateway trigger in the Lambda function console, you can see the Web API we need to make the call as shown in the figure below.

Configuring API Gateway to Call Lambda

Since we have added API Gateway as trigger to invoke our lambda function. As shown in the figure b above, I have create a “ContactMe-API” API gateway.

Go to the API Gateway console, and find the newly created API.

We need to provide the Model for the API. This is used to convert the request data from web page to a structure we want the data in lambda.

I have named this Data Model as Mailer.

Next we need to provide this DataModel in the “Method Request”. Click on Resources > Contact Me > Any.

And you will see a console having the whole integration.

In the console, click on “Method Request”. And Enter “application/json” as content-type and Mailer as Model. Refer the figure below.

Configuring AWS Simple Email Service

Go the AWS Simple Email Service. Finally add the email you want someone to contact you.

Once you will enter the email, you will get a confirmation mail from AWS. You need to verify it.

Conclusion:

In this article, I have shown you how to create a free single page web app having a contact me form. I have used AWS S3, API Gateway and AWS Lambda services. To send the mail to the owner of web app I have added a contact me section.

Datatype size in C++

Vikram Chaudhary — Sat, 13 Jun 2020 01:32:52 +0000

Hello friends, We all work with data types and variable while writing a code in any programming language. But to use any data type for the variable without knowing much about the memory implication is not good.

Though we don't care much about the memory and its implication these days. As we have computers with large memory. But still we should be careful if we are dealing with large number of data types in our program.

In this article I will note down all the datatype and their memory requirement with code examples in C++. Our decision to use any variable depends on the maximum number of value a variable can hold and the bytes it use to store the value in memory.

Datatype and its size

Below are some of the most commonly used datatype and their size in bytes.

The commented code contains value of the variable.

Unsigned Integer

    int numBytes = 0;
    unsigned int myUnsignedInt = UINT_MAX;

    numBytes = sizeof(myUnsignedInt);
    cout << "Maximum value: " << myUnsignedInt << endl; //4294967295
    cout <<"Bytes used: " <<    numBytes << endl; //4

Unsigned long Integer

In case if the above value is not enough for you and you suspect that your variable may contain even bigger value. You can use unsigned long integer.

As we can see in the below code snippet, this type of variable can store large number but it comes up with memory trade of as it uses 8 bytes of memory.

    unsigned long int myUnsignedLongInt = ULONG_MAX;
    numBytes = sizeof(myUnsignedLongInt);
    cout << "Maximum value: " << myUnsignedLongInt << endl; // 18446744073709551615
    cout <<"Bytes used: " <<  numBytes << endl;//8

Unsigned long long Integer

For some compiles Unsigned integer and unsigned long integer can store the same number of maximum value. For those this is an alternate option.

For my compile the unsigned long and unsigned long long have same value.

    unsigned long long int myUnsignedLongLongInt = ULONG_LONG_MAX;
    numBytes = sizeof(myUnsignedLongLongInt);
    cout << "Maximum value: " << myUnsignedLongLongInt << endl; // 18446744073709551615
    cout <<"Bytes used: " <<  numBytes << endl;//8

Unsigned short int

If you know your variable may contain very less number, in that case it is always better to use this datatype. As we can see there would not be any memory trade of as it need only 2 bytes.

 unsigned short int myUnsignedShortInt = USHRT_MAX;
    numBytes = sizeof(myUnsignedShortInt);
    cout << "Maximum value: " << myUnsignedShortInt << endl; // 4197360
    cout <<"Bytes used: " <<  numBytes << endl;//2

Unsigned char

If your requirement is to use numbers up to 255 and be very efficient you can use unsigned char as shown in the below code. It uses only 1 byte of memory space to store the numbers up to 255.

Though it is primarily used to store characters but we can use to store integers as well.

    unsigned char myUnsignedByte = UCHAR_MAX;
    numBytes = sizeof(myUnsignedByte);
    cout << "Maximum value: " << (int)myUnsignedByte << endl; // 255
    cout <<"Bytes used: " <<  myUnsignedByte << endl;//1

Conclusion:

If we are working on memory intensive application in that case we should be aware of the different type of variable type and use them accordingly.

Three different ways to iterate vectors in C++ using for keyword

Vikram Chaudhary — Mon, 08 Jun 2020 10:08:59 +0000

Hello friends, Vectors in C++ are equivalent of List in C# and Java. Vectors are basically used to hold the elements of same type. More specifically it is a collection of elements. The elements could be of any primitive type like int, string, float or it could be any user defined type.

Please note that you should be using C++ 11 or above to use some of the features of the article.

Adding elements to Vector

In this article I will show you a small code snippet for different ways to iterate over the vectors in C++.

    vector<int> vec;
    for(int i = 0; i < 10 ; i++){
        vec.push_back(i);
    }

In the above code I have declared a variable of type vector named vec. And I am inserting 10 elements to the vector.

The elements will be inserted one after another in the increasing order of the index of the array. But we are not here to see how the elements are inserted, there are couple of more ways to do the same.

Iterate over a C++ vector

Since we have all the elements in the vector defined in the previous code snippet. What if we want to iterate over vector and find out about these items. There are three different ways we can iterate over the elements of vector in C++.

The first way to iterate over the elements is using the range for. It's new in C++ 11 and made the iteration even more attractive.

 for(auto item: vec){
        cout << item << endl;
    }

Basically in the above code, I am iterating over the vector using auto keyword. This will auto determine the type of the elements in the vector. It takes each and every element in the vector and proceeds for its task for that element. Here we are simply printing the element.

The second one is the traditional way we use in programming. By declaring a variable which will take care of the elements and size of the array. The variable will act as index for the vector elements.

In this approach we have to be bit careful as we should know about our vector. What is the size of the elements, how many iterations we want for the vector, the type of the elements in the vector, getting the elements using the index and so on.

Size returns unsigned integer that is the reason I have used the same for the variable deceleration. You can use integer as well but you will get a warning for the same.

  for(unsigned int i = 0; i < vec.size(); i++){
        cout << vec[i] << endl;
    }

The third way as shown in the below code snippet is use to iterators. There are methods provided by the C++ compiler to get the start and end iterator of the vector. The begin method takes the vector as the parameter and returns the beginning of the vector. The end of the vector is provided by end function. And there is a comparison which takes care of the end of the vector.

Instead of using the index notation or square brackets to get the element from the vector we use the reference of the iterator to get the current element.

 for(auto i = begin(vec); i  != end(vec); i++){
        cout << *i << endl;
    }
}

It all depends on the programmer which way he wants to iterate over the vector. But all the three ways mentioned above serve the same purpose. I would personally go for first approach due to ease of syntax and no need of adding an extra parameter.

Conclusion:

This was a short post to quickly review all the ways to iterate over a vector using the for keyword in C++. There are other ways as well to achieve the same using while and do..while.