DEV Community: Khoj Badami

AWS Lamda, API Gateway, Node - How to easily get access to query parameters in GET, POST, PUT.. requests.

Khoj Badami — Sat, 08 May 2021 05:49:31 +0000

Video Version Of Post

below is the text version of the post.

The Problem - Long and complex "event" object is given by API Gateway.

When you create a new Lamda function, the default code is as follows:

exports.handler = async (event) => {
    // AWS gives you this "event" as a parameter.
};

The "event" parameter is supposed to have all the details about the HTTP request. But, the "event" object is long and has a lot of stuff you don't care about.

Below is a sample event object for a GET request (with HTTP API version 2):

{
    "version": "2.0",
    "routeKey": "ANY /http_api_post_test",
    "rawPath": "/default/http_api_post_test",
    "rawQueryString": "first_name=Khoj",
    "headers": {
        "accept": "*/*",
        "accept-encoding": "gzip, deflate, br",
        "cache-control": "no-cache",
        "content-length": "0",
        "host": "he4vxo0r3j.execute-api.ap-south-1.amazonaws.com",
        "postman-token": "9d390677-0e57-4060-9040-850e94a5c964",
        "user-agent": "PostmanRuntime/7.26.8",
        "x-amzn-trace-id": "Root=1-608cd65c-3c8c34f603f20b100a7449d4",
        "x-forwarded-for": "106.220.136.5",
        "x-forwarded-port": "443",
        "x-forwarded-proto": "https"
    },
    "queryStringParameters": {
        "first_name": "Khoj"
    },
    "requestContext": {
        "accountId": "941626753563",
        "apiId": "he4vxo0r3j",
        "domainName": "he4vxo0r3j.execute-api.ap-south-1.amazonaws.com",
        "domainPrefix": "he4vxo0r3j",
        "http": {
            "method": "GET",
            "path": "/default/http_api_post_test",
            "protocol": "HTTP/1.1",
            "sourceIp": "106.220.136.5",
            "userAgent": "PostmanRuntime/7.26.8"
        },
        "requestId": "eoZuigwtBcwEPKg=",
        "routeKey": "ANY /http_api_post_test",
        "stage": "default",
        "time": "01/May/2021:04:17:32 +0000",
        "timeEpoch": 1619842652981
    },
    "isBase64Encoded": false
}

The Solution - There is an NPM Package For That (I made it)

Here is a link: https://www.npmjs.com/package/lamda-api-gateway-event-parser

This package helps you easily and uniformly extract the parameters from the event object.

The package, handles the following types of HTTP events/requests:

Simple GET Request with Query String Params
POST, PUT, PATCH, DELETE request with application/x-www-form-urlencoded form data.
POST, PUT, PATCH, DELETE request with multipart/form-data form data.
JSON Body of HTTP Request
XML Body of HTTP Request

What you get as an output...

In all the above cases, you get as an output an object with 3 to 5 keys with the below shape:

{
    userAgent: 'The user agent of the caller (in-case you need that)',
    originalEvent: {}, // the whole original event object, just in-case.
    prams: {}, // A nice neat prams object irrespective of the type of input HTTP event.
    error: 'In case there is an error parsing the XML or JSON, you get an error here.',
    [xmlString / jsonString]: 'The original XML / JSON string in-case you need that and are not happy with the parsing.' 
}

Quick Start

How to install?

The usual:

nmp i lamda-api-gateway-event-parser
yarn add lamda-api-gateway-event-parser

How to use?

Usually, parsing the event will be the very first thing you do in your Lamda Function. So, just add it like so..

const eventParser = require('lamda-api-gateway-event-parser'); // Bring it in.

exports.handler = async (event) => {
    let niceNeatParsedEvent = eventParser.parse(event); // Parsing the event.
    // All the other awesome things you need to do
};

About File Uploads & multipart/form-data Events

If the event we get is of the type: multipart/form-data, the package will extract all the form fields as usual and make a nice neat "params" object as described above.

In the case of the file, the contents of the file will be saved into the "tmp" folder (which is provided by AWS Lamda). When the "params" object is looked at, it will look like the following:

params: {
    simple_param_1: "Simple text value",
    file_upload_param_name: {
        type: 'file',
        filename: 'the name of the file',
        contentType: 'content type eg: image/jpeg',
        path: 'file path in lamda environment. eg: "/tmp/cat.jpeg"'
    }
}

Major credits to: https://github.com/myshenin/aws-lambda-multipart-parser for this part. But the repo is a little outdated and no longer maintained.

Not working as expected?

There are 2 assumptions this package makes (if your Lambda function is not running as per these assumptions, it may not work):

On the API Gateway side, we are using HTTP API (not REST API). Why? Because it's FASTER & CHEAPER. More info here.
API Gateway version 2 (latest). This version has a different "event" object structure from version 1. Because of this, the package might not be able to identify the "event type" and deploy the correct parser. This is the default from AWS for new functions right now.

jsPDF QR Code Tutorial & Code Samples - How To Generate A PDF With A QRCode using the jsPDF & qrCode.js Library

Khoj Badami — Wed, 03 Feb 2021 14:26:29 +0000

So, our goal is to generate a PDF using the jsPDF library. In the PDF, we need to have a QR code. When the QR code is scanned it takes the user to a particular URL. Let us see how we can accomplish all this.

Part A: Generating A QR Code In JavaScript

To do this, we will be using the QRCode.js library. It's maintained by davidshimjs.

Below is a github gist with everything you need to do:

Here is a link to a JS fiddle so that you can see it in action.

Part B: Using jsPDF to Generate A PDF With The Generated QR Code

The plan is simple:

We add the jsPDF CDN url.
Create a new JS document.
Get the "base64version" of the generated QR code using some Javascript.
Use the "addImage" method to add the QR Code to the desired location in the document.

Let's look at some code:

Let us look at a working codepen.

Part C: There is a better way than all this!

We have developed a better way to generate PDFs. It's a simple drag and drop builder with QR Code support and many other things.

Check out PDFGenerator.cloud!

Why Obama said, "I think Bubble Sort would be the wrong way to go.."

Khoj Badami — Wed, 24 Jun 2020 15:05:40 +0000

Let me share a quick clip with you first explaining the title...

Obama is right. Bubble sort would not be the way to go.

Why read this article? What will you get from it?

My goal with this article is to explain why. Not just a light overview.

A deep dive, which ends with bubble sort enlightenment.

Who this article is for?

If you have a formal education in computer science, you might not get much out of this article.

But, there are many self-taught developers like me, who got into programming without a formal education in computer science. We still know how to make web applications, mobile apps, games, and whatnot.

For my kind, this article might serve as a good introduction to computer science.

Is There A Void In Your Soul That NEEDS answers to...

How does Bubble Sort Work?
It takes different time to run based on different inputs. Why?
How much time does it take in the worst-case & best case & why?
How a simple trick can lead to a huge speedup in time? (This sounds like a clickbait title of some article, but it's not. I promise. 😋)
How to calculate how much time it takes to run?
Obama says it's slow! What does that really mean?
Eric Schmidt says, "a million integers", how much time would Bubble Sort take to get thought that?
Bonus topic: How to sum all the numbers from 1 up to some "n" like 1233212 quickly?

Okay, I guess your still here. Awesome! Let's fill that soul void! I'm excited.

There Is An Interactive Demo

You can stick in 6 different numbers until you have understood every facet of the algorithm. Click here to see it.

Part 1:: How Does Bubble Sort Work?

Part 2:: Optional (But fun, math thing that will help before you move ahead)

Part 3:: How to figure out how much time it takes? Why it's bad & why Obama was right after all.

Closing Comments

I hope you found some value & was a good introduction to computer science for you.

I am doing this project to feed my passion for teaching. Do let me know how I am doing. I want to make many more such demos + videos. The code behind the demo is open source. I am happy to answer questions about it too if any.