QR Codes: origin, uses, and possibilities

Apr 15, 2024

QR codes, or “Quick Response Codes”, created in 1994 by Masahiro Hara for the Japanese company Denso Wave, were originally designed to improve scanning speed in vehicle manufacturing but have transcended their initial industrial applications to become an almost ubiquitous tool in mobile technology and application development.

Unlike traditional barcodes, which are limited by their ability to store information in just one dimension, QR codes do so in two dimensions. This allows them to contain a significantly greater amount of data, including text, URLs, or even commands for complex actions. Moreover, they can be scanned from any angle, offering superior flexibility and reading speed.

This multidimensional capability not only broadens the type of data that can be stored but also facilitates a wider range of practical applications, making them extremely useful in the realm of software and mobile app development. From directing a user to a specific web page to automatically setting up WiFi connections, QR codes have become an interface between the physical and digital worlds, offering instant and direct interaction.

How Do They Work?

QR codes store information using a matrix of dots within a square, through patterns of black and white modules that represent bits of data. The structure of a QR code includes key components for its efficiency:

• Positioning patterns: Located at three corners of the square, these patterns allow the scanner to identify the orientation and size of the code, facilitating reading from any angle.

• Alignment patterns: Used in larger codes, these help adjust for distortions during scanning, especially on curved surfaces or at difficult angles.

• Timing patterns: These extend horizontally and vertically between the positioning and alignment patterns, providing a reference for the position of each data bit.

• Data areas: Here, the actual data is stored, which can be alphanumeric, binary, or Kanji, depending on the encoding scheme used.

• Error correction codes: Essential for maintaining data integrity, they allow the code to be readable even if up to 30% is damaged or obscured.

The decoding process begins with the scanning of the QR code through the camera of a mobile device or a specific reader. The reader’s software identifies the positioning patterns, adjusts the code’s perspective, and deciphers the data modules. Finally, the information is interpreted according to the type of encoding used and converted into a usable format.

Common Uses

QR codes have become an essential tool for developers due to their versatility and ability to store a large amount of information in a compact format. Below are some of the most frequent uses in the realm of development:

• Texts: QR codes can store simple text, such as messages, instructions, or additional information about a product or service. This allows developers to provide extra content without taking up additional space in the user interface.

• Open URLs: One of the most common uses is to redirect to websites. Developers can incorporate QR codes into applications to direct users to more information online without the need to type URLs.

• WiFi Network Connection: QR codes can store the necessary information to connect to a WiFi network. This is especially useful in public places or events, where users can scan a QR code and connect to the network without manually entering access credentials.

• Sending Emails: QR codes can be generated that, when scanned, automatically set up an email draft with a predefined recipient and subject, facilitating communication and promotion.

• Transfer of Contact Data and Event Details: QR codes can contain vCards with contact information or event details in iCalendar format, allowing for quick integration with calendar and contact applications.

• Customized Information: QR codes can be generated with personalized information, such as names, birthdates, or messages, for use on business cards, invitations, or gifts. Data can also be stored in JSON format, which can be interpreted by mobile applications to personalize the user experience.

To illustrate each of these uses, we will make use of the QREncode tool, which is available for any operating system and allows us to generate QR codes easily and quickly directly from the terminal.

Creating QR Codes with QREncode

Let’s start with the most basic example: we are going to generate a QR code that will contain text displayed to the user when scanned with their mobile device.

  qrencode -s 6 -l H -o text.png "This QR Code was created by betazeta.dev"
  

QR displaying the text 'This QR Code was created by betazeta.dev'

Each option passed to the qrencode command has a specific meaning:

• -s 6 indicates the size of the QR code modules.
• -l H indicates the level of error correction.
• -o text.png specifies the output file name.

You can check the documentation for complete and up-to-date information. If you assign a URL, automatically, by its format, the QR code will redirect you to the webpage you have specified after scanning it:

  qrencode -o url.png "https://betazeta.dev"
  

QR redirecting to the URL 'https://betazeta.dev'

In this case, the qrencode command generates a QR code in PNG format with the URL https://betazeta.dev. When scanning the code with a mobile device, a button will appear that will open the browser and redirect to our website upon being pressed. To create a QR code that connects us to a WiFi network, we can use the following command with its credentials (which will not be shown to the user upon scanning):

  qrencode -o wifi.png "WIFI:T:WPA;S:BetaZetaNetwork;P:Password;;"
  

QR which connects to a ficticious WiFi network

Regarding the topic of email and contact data transfer, we can generate a QR code that, when scanned, opens the default email client of the scanning device with a predefined recipient and subject.

QR opening an email draft with predefined recipient

In this case, the qrencode command generates a QR code in PNG format with the email address hi@betazeta.dev and predefined subject and body for the email. When scanning the code with a mobile device, it will allow us to open the email client on the device and create a new email with the specified recipient and subject. To conclude, we are going to generate a QR code that contains contact information in vCard format. To avoid issues with format and encoding through the terminal, we will first create a file vcard.txt with the following content:

  BEGIN:VCARD
  VERSION:3.0
  N:BetaZetaDev;
  FN:BetaZeta Dev
  ORG:BetaZetaDev
  TITLE:SoftwareDevelopment
  TEL;WORK;VOICE:34689365453
  EMAIL;WORK;INTERNET:hi@betazeta.dev
  URL:https://betazeta.dev
  END:VCARD
      

With the file created, we can have qrencode generate a QR code in PNG format with the contact information so that when it is scanned by a device, the contact appears on the device and can be added to the address book, make calls, send an email, etc.

  qrencode -o vcard.png < vcard.txt
  

QR que contiene información de contacto de BetaZetaDev

The pipeline < vcard.txt takes care of reading the content of the vcard.txt file and passing it to the qrencode command to generate the QR code with the contact information.

These are just a few examples of how QR codes can be created and used. Their versatility and ease of use make them a valuable tool for creating interactive and personalized experiences, which can be implemented in a wide variety of contexts and applications.

But for developers, there is an even more interesting option to add extra personality to our applications, and that is to create QR codes with customized information. By combining QR code generation with the interpretation of texts in JSON format, we can create codes that contain personalized information, such as IDs, names, or any data managed by our app. In this way, we can interpret these data in our mobile applications to personalize the user experience.

Summary

In the next chapter, we will create a practical example of how to interpret QR codes with customized information in a mobile application, displaying a personalized experience in the app after being scanned by the user. In summary, QR codes are a versatile and powerful tool that has revolutionized the way we interact with digital information. Their ability to store large amounts of data in a compact format and their ease of use make them a valuable tool for both developers and users.