How to generate |QR codes using JavaScript and Node.js

in StemSociallast year

QR codes are a beneficial tool for many businesses, small and large companies use QR codes to store and transfer data about their businesses and products on cellphones.

Apart form that, there are also other unique uses of QR codes bordering around providing a unique identity to an entity and the storage of data for entities.

Apart from businesses, QR codes happen to be a very useful tool to wide number of people, there's not telling if at some point as a developer you won't need to work on integarting QR codes in your project.

This tutorial covers how you can create QR codes in your projects with Node.js/Express.

QR is an acronym for Quick Response, the name stems from the fact that QR codes can easily and quickly be read by mobile phones.

QR codes can be used to store different kind of data and also provide the data to the screen of a mobile phone in a fast manner upon request.

In this tutorial, we are going to use a package known as node-qrcode to generate our QR-codes.

Make sure you have Node.js and npm installed if not install them first and set them up, you will find many tutorials on that with just a Google search.

Firstly, we need to install the package, and to do that

  • create a project directory
  • open the project directory in command prompt
  • we will be using express generator to generate our Node.js app, you need to have Express generator installed first, run the following command in your project command prompt
npm install -g express-generator

After installing Express generator, we need to generate the project by running the following command in the project command prompt

express

Again, run npm install to install the required dependencies

The project directory should look familiar to this right now,

enter image description here

In order to start the server, run the command,

 SET DEBUG=node-qrcode-tutorial:* & npm start

if everything is running correctly we should see something like this in your command prompt

enter image description here

Then we would install the package we would be using to create the qr-code by running the following command

npm install --save qrcode

After getting that out of the way, open your text editor and in your project directory add a new file qr.js

In order to include the file in our project, we need to create a starter function in the new file we just created and export it, so add the following code in the new file

const  qrGenerator = function() {
    console.log('This is the qr tutorial')
} 

module.exports = {
    qrGenerator
}

In app.js add the following code below the line that says app.use('/users', usersRouter);

var  qr = require('./qr')

qr.qrGenerator()

If you restart your server and check the console you should see a log like this

enter image description here

This signifies that everything is working correctly, now we can move to the juicy part of this tutorial

On the first line of qr.js add the following code

var QRCode = require('qrcode')

In order to generate QR codes with the package we installed earlier, in qr.js replace the function qrGenerator with the following code

async (result) => {
    try {
        console.log(await  QRCode.toDataURL(result))
    } catch (error) {
        console.log(error)
    }
}

In app.js, replace the line qr.qrGenerator() with qr.qrGenerator('We are here), or any string of your choice.

If your restart your server now you should see a result like this in the console

enter image description here

Copy that long text starting form the point data:image/png till the end and search for it in your browser, you should get this

enter image description here

What if we want the code to be displayed in the command prompt, we will have to replace the content of the qrGenerator function in qr.js with the following code

async (result) => {
    try {
        console.log(await  QRCode.toString(result, {type:  'terminal'}))
    } catch (error) {
        console.log(error)
    }
}

If you restart your server now we should have something like this

enter image description here

We have now reached our objective for this tutorial which is to be able to generate QR codes with JavaScript and Node.js.

I hope you have found this to be helpful. Thank you for reading, cheers.