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,
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
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
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
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
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
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.