What set this app apart was that instead of users entering a URL to generate a QR code, they would initiate a request through the app. Then a unique QR code would be generated which would be associated with their account details. The QR code would then be displayed on their screen while the payer scans the QR code using their mobile device's camera.

In this tutorial, you'll learn how to develop a custom QR code generator for URLs using Node.js and Next.js. I'll walk you through the process step by step, including setting up Azure Blob Storage to store the generated URLs. These URLs will then be displayed in the form of QR codes in your Next.js frontend application.

We'll build the backend of the application using Node.js and the Express framework, and the frontend (which interacts with the backend) with Next.js.

I'll also provide explanations on QR codes, the concept of buffers for handling binary data in Node.js, and how it is being used to stream the QR code image data to Azure Blob Storage.

So, let dive in.

Prerequisites

Before you begin you'll need an active Azure account and subscription to create an Azure blob storage.

Table of Contents

1. What is a QR Code?

2. How to Set Up Azure Blob Storage

3. Node.js QR Code

4. Code Overview

5. How to Connect the Frontend Application

6. Next.js Code Walkthrough

7. How to Start the Application Locally

8. Conclusion

What is a QR Code?

According to Investopedia, a Quick Response (QR) code functions as a specialized barcode, scannable by digital devices, that stores data within a grid of square pixels.

QR codes are extensively employed in digital payments, cryptocurrency, and transmitting web addresses to mobile devices. They can encode URLs, facilitating webpage access.

Now, let's delve into the process of programmatically generating QR codes. Today, I'll demonstrate this step-by-step. To begin, you'll set up an Azure Blob Storage instance in your Azure Portal.

How to Set Up Azure Blob Storage

Azure Blob Storage is a cloud-based storage service provided by Microsoft Azure. It is part of the Azure Storage suite, which also includes services such as Azure Files, Azure Queues, and Azure Tables.

Azure Blob Storage is designed to store large amounts of unstructured data, such as text or binary data, in the form of objects called blobs. If you are familiar with AWS, Azure Blob Storage is similar to an S3 bucket. Storage accounts are primarily accessed via REST API.

Step 1: Create a storage account

You can create your storage account by simply searching for Storage account in the search bar at the top of the Azure Portal.

Create Storage Accounts in Azure Portal

You can then run through the steps to create your storage account. Just note that this name needs to be unique and it also needs to be all lower case – no spaces but it can include numbers.

Create a New Resource Group

Step 2: Create a container

After creating your storage account, you can now create a container.

Create a New Container

When accessing blob storage with the QR codes stored in Azure Storage, the URL typically follows a structure like https://<storage_account_name>.blob.core.windows.net/<container_name>/<blob_name>.

Having a container allows us to structure the URLs in a meaningful and organized way, making it easier to manage and share the generated QR codes.

Step 3: Obtain Azure Storage connection string

In the Security + networking section, select "Access keys."

Make sure to copy the connection string and save it somewhere as it's required to establish a secure connection between the Azure Storage account and the Node.js application.

Obtain Access Key for the Container

That concludes the discussion on Microsoft Azure Storage. I must say, I thoroughly enjoyed exploring and solving these challenges.

Next, you will be diving into coding, specifically around Nodejs and and then moving on to frontend development, where you'll be using Next.js.

Node.js QR Code

First, you need to install Node.js and npm on your computer. Go to the Node.js website and download the version for your computer if you don't have it already.

Once you've installed them, check if Node.js and npm are installed correctly by typing these commands in your terminal:

node -v
npm -v

Next, go to this GitHub link to fork the project and then clone it to your preferred directory on your computer.

Github Repository Project

Once you've cloned the project repository, open the project with your code editor. I'm using VS Code. You'll notice that the project has of two folders: server and frontend. You'll start by navigating to the server folder by typing cd server in your terminal and then press Enter.

Change the current directory to a directory named "server."

Now you can install all the necessary dependencies by running npm install. This command will download and install all the required packages for the server-side application.

installation of dependencies

If everything went well, you should see something like this below after npm install:

Successful Installation

Next, you need to create a .env file in the server directory to store your environment variables. It's not advisable to hardcode sensitive credentials. You can do this easily by running touch .env in your terminal.

Create a new file named ".env"

In the newly created .env file, you'll define three variables that your application depends on: CONTAINER_NAME , AZURE_STORAGE_CONNECTION_STRING, and PORT .

Assign 'qrcode' as the value for CONTAINER_NAME. This was the name of the container you created inside the Azure Storage account. Also, set the PORT to 8000, which is the port your backend application will be listening on.

Now, for the AZURE_STORAGE_CONNECTION_STRING, you'll need to obtain the secret key from the access key you obtained earlier. Copy the connection string and paste it as the value for AZURE_STORAGE_CONNECTION_STRING in the .env file.

Store Secret Variables

Once you've added these environment variables to the .env file, save it and you're all set to run the server-side of the application!

Before you run the application, let me quickly explain the code. Click on the index.js file.

View Index.js file

Code overview:

Below is the code snippet containing the necessary logic for generating QR codes and establishing a connection with the Azure storage account you previously created.

const express = require('express');
const { BlobServiceClient, generateBlobSASQueryParameters, BlobSASPermissions } = require('@azure/storage-blob');
const qrcode = require('qrcode');
const { v4: uuidv4 } = require('uuid');
const { Readable } = require('stream');
const dotenv = require('dotenv');

dotenv.config();

const app = express();
const port = process.env.PORT || 5000;

// Allowing CORS for local testing
const origins = [
    "http://localhost:3000"
];

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', origins.join(','));
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});


const containerName = process.env.CONTAINER_NAME;

const blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTION_STRING);

app.use(express.json());

app.post('/generate-qr', async (req, res) => {
    const { url } = req.body;

    // Generate QR Code
    console.log('Received URL:', url);
    const qrCode = await qrcode.toBuffer(url);

    const bufferStream = new Readable();
    bufferStream.push(qrCode);
    bufferStream.push(null);

    // Generate unique file name for Azure Blob Storage
    const fileName = `qr_codes/${uuidv4()}.png`;

    try {
        const containerClient = blobServiceClient.getContainerClient(containerName);
        const blockBlobClient = containerClient.getBlockBlobClient(fileName);

        await blockBlobClient.uploadStream(bufferStream, 4 * 1024 * 1024, 20, {
            blobHTTPHeaders: {
                blobContentType: 'image/png'
            }
        });

        // Generate SAS token for blob
        const sasToken = generateSasToken(blockBlobClient);

        // Generate the Blob URL with SAS token
        const blobUrlWithSasToken = `${blockBlobClient.url}?${sasToken}`;

        // Send response with the Blob URL containing SAS token
        res.json({ qr_code_url: blobUrlWithSasToken });
    } catch (error) {
        console.error('Error generating QR Code:', error);
        res.status(500).json({ error: 'Internal Server Error' });
    }
});

// Function to generate SAS token for blob
function generateSasToken(blobClient) {
    const blobSAS = generateBlobSASQueryParameters({
        containerName: blobClient.containerName,
        blobName: blobClient.blobName,
        permissions: BlobSASPermissions.parse("r"), // Read permission
        startsOn: new Date(),
        expiresOn: new Date(new Date().valueOf() + 86400) // Token expires in 24 hours
    }, blobClient.credential);

    return blobSAS.toString();
}

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

Now I'll give a detailed explanation of the code structure, functionalities, and key components of the application.

Importing required modules:

• const express = require('express'): This line imports the Express.js framework, which is a Node.js web application framework for building web applications and APIs. It allows you to define routes, handle HTTP requests, and more.

• const { BlobServiceClient, generateBlobSASQueryParameters, BlobSASPermissions } = require('@azure/storage-blob'): This line imports specific modules from the @azure/storage-blob package, which is the Azure Blob Storage SDK for JavaScript. It allows you to interact with Azure Blob Storage from our Node.js application.

• const qrcode = require('qrcode'): This line imports the qrcode module, which is a popular Node.js library for generating QR codes.

• const{ v4: uuidv4 } = require('uuid'): This line imports the uuid module and specifically extracts the v4 function as uuidv4. The uuid module is used to generate universally unique identifiers (UUIDs) in Node.js.

• const{ Readable } = require('stream'): This line imports the Readable class from the built-in Node.js stream module. The Readable class is used to create readable streams, which are useful for handling data that can be read sequentially.

Configuring environment variables:

• dotenv.config();: This line loads environment variables from a .env file into process.env. The .env file typically contains CONTAINER_NAME and AZURE_STORAGE_CONNECTION_STRING you specify in your .env file.

Initializing the Express application:

• const app = express();: This line initializes an Express application instance, which you'll use to define routes, middleware, and other configurations for your web application.

Defining port configuration:

• const port = process.env.PORT || 5000: This line sets the port number for the Express application. It retrieves the port number from the process.env.PORT environment variable, if it exists. If not, it defaults to port 5000. This allows flexibility for deploying the application in different environments where the port may be specified externally.

Allowing CORS for local testing:

• CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers to restrict resources from being requested from another domain or application.

• In this section, CORS is being configured to allow requests from a specific origin (http://localhost:3000), which is typically used during local development.

• The app.use() function is used to add middleware to the Express application. Here, a middleware function is defined that sets the necessary CORS headers on every HTTP response.

• res.header('Access-Control-Allow-Origin', origins.join(',')): Sets the value of the Access-Control-Allow-Origin header to allow requests from the specified origins (in this case, http://localhost:3000).

• res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'): Sets the allowed headers for the CORS request.

• next(): Calls the next middleware function in the stack.

Azure Blob Storage configuration:

• containerName and blobServiceClient are initialized using environment variables (process.env.CONTAINER_NAME and process.env.AZURE_STORAGE_CONNECTION_STRING) configured earlier.

• blobServiceClient is initialized using the fromConnectionString() method from the BlobServiceClient class provided by the @azure/storage-blob package. This allows the application to interact with Azure Blob Storage using the provided connection string.

Express application configuration:

• app.use(express.json()): Adds middleware to parse JSON bodies of incoming requests. This enables the application to handle JSON data in requests.

Endpoint for generating QR codes:

• Defines a POST endpoint at /generate-qr to handle requests for generating QR codes.

• Upon receiving a request, the endpoint extracts the URL from the request body and generates a QR code image using the qrcode.toBuffer() function.

• The generated QR code image is then uploaded to Azure Blob Storage as a blob with a unique file name.

• After successfully uploading the image, a Shared Access Signature (SAS) token is generated for the blob, which provides temporary access to the blob with specified permissions (in this case, read-only).

• Finally, the endpoint responds with a JSON object containing the URL of the generated QR code image along with the SAS token.

Function to generate SAS token for blob:

• Defines a function generateSasToken() to generate a SAS token for a given blob client (block blob client in this case). The SAS token is generated with read permissions and an expiration time set to 24 hours.

Listening on port:

• The Express application listens on the configured port (port) for incoming HTTP requests. When the server starts, it prints a message indicating the port it is listening on.

Now, you can start the application locally.

To start the application, simply run npm start as shown below. If all goes well, you'll observe the message Server is running on port 8000 printed on your console.

Start the Application locally

How to Connect the Frontend Application

Now it is time to connect the frontend application with the backend application that is listening on Port 8000.

A typical full-stack application usually consists of at least two main components: a frontend (client-side) and a backend (server-side).

Frontend Component: This is the part of the application that users interact with directly. It's typically built using technologies like HTML, CSS, and JavaScript frameworks like React, Angular, or Next.js.

Backend Component: This is the part of the application that handles data storage, retrieval, and server side connectivity. It's usually built using server-side programming languages like Node.js (with frameworks like Express.js or Nest.js), Python (with frameworks like Django or Flask), Java (with frameworks like Spring), or Ruby (with frameworks like Ruby on Rails).

The backend communicates with the frontend, processes requests from users, interacts with databases, and generates responses.

To navigate to the frontend folder, open a new terminal by clicking the + , then use cd frontend to enter the frontend folder.

Navigate to Frontend Directory

Now, you can install all the necessary dependencies by running npm install. This command will download and install all the required packages for the Nextjs client-side application.

If everything went well, you should see something like this after npm install.

Successful Installation of Dependencies

Before you run the application, let me quickly explain the code.Navigate to the frontend folder, then inside the src/app directory, click on the page.js file.

View page.js file

Next.js Code Walkthrough

This code represents a React component serving as the frontend for the QR code generator backend application you've recently built. This component allows users to input a URL, submit it, and receive the corresponding QR code image for display.

'use client'

import { useState } from 'react';
import axios from 'axios';

export default function Home() {
  const [url, setUrl] = useState('');
  const [qrCodeUrl, setQrCodeUrl] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:8000/generate-qr', { url });
      setQrCodeUrl(response.data.qr_code_url);
    } catch (error) {
      console.error('Error generating QR Code:', error);
    }
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>QR Code Generator</h1>
      <form onSubmit={handleSubmit} style={styles.form}>
        <input
          type="text"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          placeholder="Enter URL like https://www.google.com"
          style={styles.input}
        />
        <button type="submit" style={styles.button}>Generate QR Code</button>
      </form>
      {qrCodeUrl && <img src={qrCodeUrl} alt="QR Code" style={styles.qrCode} width="200" height="200" />}
    </div>
  );
}

// Styles
const styles = {
  container: {
    minHeight: '100vh',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#121212',
    color: 'white',
  },
  title: {
    margin: '0',
    lineHeight: '1.15',
    fontSize: '4rem',
    textAlign: 'center',
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  input: {
    padding: '10px',
    borderRadius: '5px',
    border: 'none',
    marginTop: '20px',
    width: '300px',
    color: '#121212'

  },
  button: {
    padding: '10px 20px',
    marginTop: '20px',
    border: 'none',
    borderRadius: '5px',
    backgroundColor: '#0070f3',
    color: 'white',
    cursor: 'pointer',
  },
  qrCode: {
    marginTop: '20px',
  },
};

Now I'll give a detailed explanation of the frontend application's code structure, functionalities, and key components.

State management:

• import { useState } from 'react' imports the useState hook from React to manage state within the component.

• const [url, setUrl] = useState('') and const [qrCodeUrl, setQrCodeUrl] = useState(''): This state variables, url and qrCodeUrl, are initialized using the useState hook. These variables hold the input URL and the generated QR code URL, respectively.

Form submission:

• When the form is submitted, the handleSubmit function is triggered.

• This function prevents the default form submission behavior by using e.preventDefault().

• It sends a POST request to the server (http://localhost:8000/generate-qr) with the input URL using the Axios library.

• Upon successful response, the generated QR code URL is stored in the qrCodeUrl state variable.

Rendering:

• The component renders a title, a form with an input field for entering the URL, and a button to generate the QR code.

• When the QR code URL is available (qrCodeUrl is not empty), an image element is rendered to display the generated QR code.

Styling:

• The component includes inline styles defined using JavaScript objects.

• Styles are applied to the container, title, form, input field, button, and QR code image.

How to Start the Application Locally

Now, you can start the application locally.

To start the application, simply run npm run dev as shown below. If all goes well, you'll observe the message http://localhost:3000 printed in your console.

Application ready to start

Open your browser and paste the URL http://localhost:3000. The browser should render the application and look exactly as shown below.

Application running in Browser

Paste in the URL of a website – either your portfolio website or any website you wish to generate a QR code for. I pasted my portfolio website URL, https://wilfred-portfolio.vercel.app/, into the URL box. See the result below:

QR Code generated successfully

Conclusion

When it comes to picking the right tools, technology choices are important. Next.js is great for making the front end of a website, while Node.js works well for handling server-side tasks. Also Azure blob storage is great for storing unstructured data such as binary data like QR code.

But remember, this journey is not just about writing code. It's also about learning about different technologies and picking the best ones for what you need to do.

As I finish up this tutorial, I'd like to keep asking for feedback to ensure that this tutorial stays helpful. Feel free to share your thoughts or comments with me.

Thanks for reading!

Happy coding! 🚀

Contact Me:

• Twitter

• LinkedIn

• GitHub

A quick response (QR) code is a barcode that a digital device can easily scan. It encodes data as a series of pixels in a square grid.

Tracking information about supply chains using QR codes is very useful in marketing and advertising campaigns.

The International Organization for Standardization certified QR codes as a global standard in 2000. They are an improvement over the previous uni-dimensional barcodes (ISO).

QR codes were developed in the 1990s to provide more information than a regular barcode. They were created by Denso Wave, a Toyota affiliate, to monitor the production of vehicles.

In contrast to barcodes, which need a beam of light to bounce off the parallel lines, QR codes may be scanned digitally by devices like smartphones.

QR codes are used in cryptocurrency systems to enable digital payments, such as when displaying a Bitcoin address. QR codes are also often used to communicate site URLs to mobile devices.

In this article, we will use the segno library to create beautiful QR codes that perform so many functions.

What is Segno?

Segno is an open-source QR code generator that lets you create both regular and micro QR codes with very little effort. It also doesn't have any dependencies.

Segno offers a few serialization types like SVG, EPS, PNG, PDF, and text output. None of these serializers calls on an external library. Through a plugin design, Segno offers other serialization types. PyPy and Python versions 2.6 to 3.4 were used for testing.

How to Install Segno

Just like every other Python library, you can install Segno via pip.

pip install segno

How to Create a QR Code

So, using the .make() method, let's start by making the most basic QR code possible. Since the content is so brief, Segno automatically generates a fun-sized "micro QR" code, which carries raw data and that you can copy or transfer.

import segno

price_tag = segno.make("Hello World")
price_tag.save("hello-world.png")

The QR code is generated and saved into our project directory.

hello-world.png

We can add a border to the QR code to make it look more attractive. You can do this by adding the border parameter to the .save() method.

import segno
qrcode = segno.make('Vampire Blues')
qrcode.save('vampire-blues.png', border=5)

output: vapire-blues.png

The QR codes that we have been creating have been very small. We can make them look bigger by adding the scale parameter like this:

import segno
qrcode = segno.make_qr('Welcome')
qrcode.save('welcome.png', scale=10)

welcome.png

How to Create Colorful QR Codes

We can also create some colorful QR codes with Segno – they are really beautiful. This is possible with the help of many serializers which accept the parameters dark and light to specify the color of the dark modules and light modules.

Here are a couple examples to give you an idea of what's possible:

import segno
qrcode = segno.make("Green ave, Kingston")
qrcode.save('address.png', dark='darkred', light='lightblue', scale=10)

address.png

import segno
qrcode = segno.make("Green ave, Kingston")
# Dark modules with alpha transparency
qrcode.save('address2.png', dark='#0000ffcc', scale=10)

address2.png

import segno
micro_qrcode = segno.make('Rain', error='q')
micro_qrcode.save('rain.png', dark='darkblue', data_dark='steelblue', scale=5)

rain.png

How to Save QR Codes in Different Formats

Segno give us the flexibility to save our generated QR codes in different file formats such as .svg, .png, .eps, and .pdf.

Here's how you would do that:

import segno
qrcode = segno.make('Beatles')
qrcode.save('Beatles.svg')
qrcode.save('Beatles.png')
qrcode.save('Beatles.eps')

Use Cases for QR Codes with Examples

How to Make a QR Code for URL Sharing

We can easily generate a QR code that links to a URL. This lets us get online content by using the same technique with a little bigger payload.

We will create a QR code that links to my YouTube channel (Velcast Podcast), and then we will save it.

Here's the code for that:

import segno

video = segno.make('https://www.youtube.com/channel/UCNhFxpk6hGt5uMCKXq0Jl8A')
video.save('Video.png', dark="yellow", light="#323524", scale=5)

And the result:

video.png

How to Make a QR Code for a WiFi Configuration

We can also use the Segmo library to create a QR code for wifi configuration. The segno.helpers module offers factory methods to generate standard QR codes for encoding geographic coordinates, vCards and MeCards, WIFI setups, and EPC QR Codes.

The error correction level "L" is utilized in creating QR codes. If possible, we will apply the higher error correction level without altering the QR Code version.

The density of the QR code picture decreases with decreasing error correction level, which enhances minimum printing size. The more damage it can withstand before losing its ability to be read, the greater the error correction level.

The optimal balance between density and toughness for general marketing use is Level L or Level M. In industrial settings where maintaining a clean or undamaged QR code may be difficult, Level Q and Level H are the best options.

from segno import helpers

qrcode = helpers.make_wifi(ssid='MyWifi', password='1234567890', security='WPA')
qrcode.designator
'3-M'
qrcode.save('wifi-access.png', scale=10)

wifi-access.png

We can also do this code this way:

import segno
wifi_settings = {    
    ssid='(Wifi Name)',    
    password='(Wifi Password)',    
    security='WPA',
    }
wifi = segno.helpers.make_wifi(**wifi_settings)
wifi.save("Wifi.png", dark="yellow", light="#323524", scale=8)

We can use either of the two options for the code. They result in the same thing but represent different styles of writing and presentation.

Common use cases of using QR codes for wifi access include:

• Instead of giving consumers unique access codes, businesses may use QR codes to offer free WiFi access. Customers only need to scan the code to have access.
• Families can use it to grant visitors access to their internet at home.

How to Encode Contact Details in QR Codes

We can also store contact details in a QR code. We just need to make use of the helpers.make_mecard() method and we can pass in the contact details. It's also important to note that we can pass in a list to the method.

Let's look at an example:

from segno import helpers
qrcode = helpers.make_mecard(name='Shittu Olumide', email='me@example.com', phone='+123456789')
qrcode.designator
'3-L'
# Some params accept multiple values, like email, phone, url
qrcode = helpers.make_mecard(name='Shittu Olumide', 
                             email=('me@example.com', 'email@example.com'),
                             url=['http://www.example.com', 'https://example.come/~olu'])
qrcode.save('mycontact.png', scale=5)

Segno also allows you to perform the following actions:

• segno.helpers.make_geo: Launch the built-in mapping program at a certain Latitude and Longitude.
• segno.helpers.make_email: Send a message using a preset topic and body. Excellent for activating any number of potential activities from a mail server, like subscribing to newsletters, registering your arrival somewhere, and more.
• segno.helpers.make_epc_qr: Initiate an electronic payment.

QR code use cases

Now that you've learned how to create QR codes, here are some of their applications in businesses and in our daily lives:

• Digital payments.
• Sharing business information.
• Sharing personal contact information.
• QR code menus in restaurants.
• Facilitating WiFi authentication.

And many more.

Conclusion

Hopefully, this short article has whetted your appetite and inspires you to employ QR codes in your work and personal projects.

By developing some eye-catching, functioning QR codes in this article, we tested the Segno Python module. You can read the official documentation to learn more about the library.

In this tutorial, we'll learn how to generate QR codes in Angular 10 by building a simple example application.

But first of all, what's a QR code and what does it do?

According to Wikipedia:

A QR code (abbreviated from Quick Response code) is a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for the automotive industry in Japan.

A barcode is a machine-readable optical label that contains information about the item to which it is attached.

In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application.

A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to store data efficiently.

So it's simply a compact and efficient way of storing data.

Now let's see how to generate QR codes in your Angular 10 apps by creating an example.

Prerequisites

Before getting started you need a few prerequisites:

• Basic knowledge of TypeScript. Particularly the familiarity with Object Oriented concepts such as TypeScript classes and decorators.
• A local development machine with Node 10+, together with NPM 6+ installed.

Node is required by the Angular CLI like the most front end tools nowadays. You can simply go to the downloads page of the official website and download the binaries for your operating system.

You can also refer to your specific system instructions for how to install Node using a package manager. The recommended way though is using NVM — Node Version Manager — a POSIX-compliant bash script to manage multiple active Node.js versions.

Note: Don't want to install a local environment for Angular development but still want to try the code in this tutorial? You can use Stackblitz, an online IDE for frontend development that lets you create an Angular project compatible with the Angular CLI.

Step 1 — Installing Angular CLI 10

In this step, we'll install the latest Angular CLI 10 (at the time of writing this tutorial).

Angular CLI is the official tool for initializing and working with Angular projects. To install it, open a new command-line interface and run the following command:

$ npm install -g @angular/cli

At the time of writing, angular/cli v10 will be installed on your system.

Step 2 — Creating a New Angular 10 App

Let's now create our project. Head back to your command-line interface and run the following commands:

$ cd ~
$ ng new angular10qrcode

The CLI will ask you a couple of questions:

• Would you like to add Angular routing? Type y for Yes, and
• Which stylesheet format would you like to use? Choose CSS.

Next, navigate to you project’s folder and run the local development server using the following commands:

$ cd angular10qrcode
$ ng serve

Open your web browser and navigate to the http://localhost:4200/ address to see your app running.

Next, open a new terminal and make sure to navigate to your project's folder and run the following command to install the ngx-qrcode library from npm using the following command:

$ npm install @techiediaries/ngx-qrcode

Next open the src/app/app.module.ts file, and import NgxQRCodeModule from @techiediaries/ngx-qrcode in your module as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgxQRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library has been imported, you can use the ngx-qrcode component in your Angular application.

Please note that we have also imported the FormsModule.

Next, open the src/app/app.component.ts file and update it as follows:

import { Component } from '@angular/core';
import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  elementType = NgxQrcodeElementTypes.URL;
  correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
  value = 'https://www.techiediaries.com/';
}

Next, open the src/app/app.component.html file and add the following code:

<ngx-qrcode
  [elementType]="elementType"
  [errorCorrectionLevel]="correctionLevel"
  [value]="value"
  cssClass="bshadow"></ngx-qrcode>

We use various properties for configuring our QR code such as:

• the type,
• the error correction level,
• the value,
• the CSS class.

You can find out more information about these properties and the other supported properties from the official ngx-qrcode docs.

Next, add a textarea for entering the value that you want to encode:

<textarea [(ngModel)] = "value"></textarea>

Finally open the src/styles.css file and add the following styles:

.bshadow {

  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(5px 5px 5px #222222);
  opacity: .5;

}

textarea {
    margin-top: 15px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
    opacity: .5;
}

This is a screenshot of our application:

That's it we have finished our Angular 10 example project that demonstrates how to generate QR codes.

You can visit us on Techiediaries for tutorials about Angular and modern web development practices.

You can check out the application we've built in this article live on Stackblitz:

Efficient means doing things right. Effective is about doing the right things.

I am an advocate for efficiency and effectiveness. There must be a more efficient way to share contact details other than manually typing details into my mobile phone when I meet a new business contact.

Name cards with QR Code

Add a new contact on your mobile phone by scanning a QR Code

When Google launched the Google Contacts app in 2017, users could share contact information with QR codes. To add a new contact, simply scan a person's QR code to save their contact information on your phone.

I personally think that such an efficient way to save contact details should be implemented on business cards and marketing brochures.

The trend did not seem to take off, maybe because people did not know how to create the QR Codes in the first place.

Create a list of customized contacts QR Codes

I made use of a Google Sheets template to generate the contact QR codes.

Open the template (template link here) in another tab. Then click on “File -> Make a copy” to save it to your own "My Drive" (Google Drive account).

Google Sheets template to generate the contact QR codes

Note that this Google Sheets template seems to only work on desktops, not on mobile phones.

You can use this template by updating First Name, Last Name, Mobile Phone number and Email address. The contact QR Code will be generated in the next column based on these 4 fields.

=image(“https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=BEGIN:VCARD%0AN:" & A3 & “%20” & B3 & “%0ATEL;CELL:” & C3 & “%0AEMAIL:” & D3 & “%0AEND:VCARD”)

Then another person can scan the generated QR code to add the contact details to their phone.

New iOS and Android versions are equipped with QR Code scanner in camera mode

After scanning, simply click on “Save” to add the information to Contacts.

Scan QR code and save contact

This contact list QR Code template will be useful when you meet new people in a team or at a tradeshow and want to gather everyone’s contact details.

To create a single customized contacts QR Code

Go to QR Code Generator, and select ‘vCard’ where you can customize various fields. Remember to test it out, as some fields do not allow special characters like "," or "@".

https://www.qr-code-generator.com/

You can also add this QR code to your business cards and marketing brochures. Customers and business people can then easily scan and save your contact details to their mobile phones.

Go to a website by scanning a QR Code

Newer versions of iPhone and Android phones are equipped with QR code scanning in the camera app. Simply turn on the camera and hover over the QR Code to scan it. Then you can click the popup to go to the web address URL embedded.

For example, try to scan this QR code:

Web URL embedded https://www.qrcode-monkey.com

To create your own customized QR Codes

I usually go to QR Code Monkey to create a customized QR codes. It is friendly and free to use, and there are more options if you want to:

• add a logo image in the middle (this can be your company logo!)

• set a color (to follow your corporate identity)

• use some other other customized design

So now you can easily create marketing materials with QR code of your company's website.

Marketing materials with QR codes

QR Codes for name cards and marketing brochures

I hope the tips above are useful for getting things done more efficiently and effectively. All the best to your marketing and outreach efforts!

Thank you for reading!