Azure Functions QR Code Generator Tutorial

Want to explore Azure Functions while creating something fun and useful? In this guide, we’ll show you how to build a QR Code generator that runs entirely within an Azure Function. This project is a practical way to get familiar with Azure’s serverless capabilities while building something cool.

What You’ll Learn:

How Azure Functions work and how easy they are to set up.
How to generate QR codes using .NET libraries.
How quickly you can create a working application with minimal effort.

Whether you’re new to Azure Functions or want to expand your cloud skills, this tutorial is designed for you. Let’s dive in!

Azure Functions QR Code generated and displayed on a webpage

What Are Azure Functions?

Azure Functions are serverless, event-driven apps that run on-demand in the cloud. They allow you to write small pieces of code that respond to events like HTTP requests, without needing a server. These functions are great for microservices and tasks that need to be done quickly and efficiently, such as generating QR codes.

Thanks to Azure Functions, you can build and deploy your application with just a few lines of code, focusing on logic instead of infrastructure. This makes them perfect for projects like a Code generator.

Prerequisites for This Project

Before we start, ensure you have these tools installed:

Microsoft Azure Account (to deploy your function)
.NET 6 SDK
Azure Functions Core Tools
Azure CLI Tools
Visual Studio Code (or another code editor)

Once these tools are set up, you’re ready to begin building your Azure Function.

Creating a New Azure Function Project

We’ll use the Azure CLI and .NET Core to create and set up our function app. This manual method gives you insight into how the process works, and it can be easily replicated across different platforms.

Initialize the project: Open your terminal and run: func init QRCodeGen --worker-runtime dotnet This creates the basic structure for your function app.
Create an HTTP-triggered function: Next, create a function that responds to HTTP requests: func new --template "HttpTrigger" --name QRCodeGen --authlevel anonymous This command creates an HTTP endpoint that will trigger the function.
Test Locally: Start the function locally: func start Then, visit http://localhost:7071/api/QRCodeGen in your browser to see the default response.

Generating a QR Code with .NET

To generate a QR code, we’ll use the QRCode Generator library and SkiaSharp for bitmap handling. Here’s how you can add them to your project:

Install the QR Code package: dotnet add package Net.Codecrete.QrCodeGenerator --version 2.0.1
Install SkiaSharp for bitmap support: dotnet add package SkiaSharp
Download the necessary extension for SkiaSharp:
Create a file named QrCodeBitmapExtensions.cs and copy the code from the repository here.

Implementing the QR Code Generation

In QRCodeGen.cs, replace the default function with one that generates the QR code:

[FunctionName("GenerateQRCode")]
public static async Task Generate(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req, ILogger log)
{
    string qrtext = req.Query["qrtext"];
    log.LogInformation("Generating QR Code for {0}", qrtext);

    var qr = QrCode.EncodeText(qrtext, QrCode.Ecc.Medium);
    var pngout = qr.ToPng(10, 1, SkiaSharp.SKColors.Black, SkiaSharp.SKColors.White);
    
    var result = new ReturnObject { Image = Convert.ToBase64String(pngout) };
    return new JsonResult(result);
}

This function processes the qrtext query parameter, generates the QR code, and returns it as a Base64 encoded PNG.

Adding a Frontend for the QR Code Generator

Although Azure Functions aren’t meant for serving web pages, you can still host a simple HTML interface directly. Here’s how you can create a basic UI:

Create an index.html file in the www folder: <html> <head> <title>QR Code Generator</title> </head> <body> <h1>QR Code Generator</h1> <input id="inputbox" type="text" /> <button onclick="getQRCode()">Generate QR Code</button> <div id="demo"></div> <script> function getQRCode() { var input = document.getElementById('inputbox').value; var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { var jsonResponse = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = `<img src="data:image/png;base64,${jsonResponse.Image}" />`; } }; xhttp.open("GET", "/api/GenerateQRCode?qrtext=" + input, true); xhttp.send(); } </script> </body> </html>
Add a function to serve the HTML page: In QRCodeGen.cs, create another function to serve the index.html file: [FunctionName("Form")] public static HttpResponseMessage Form( [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req, ILogger log, ExecutionContext context) { string indexPage = File.ReadAllText(context.FunctionAppDirectory + "/www/index.html"); var result = new HttpResponseMessage(HttpStatusCode.OK) { Content = new ByteArrayContent(System.Text.Encoding.UTF8.GetBytes(indexPage)) }; result.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html"); return result; }

Deploying Your QR Code Generator to Azure

Once your function is ready, deploy it using the Azure CLI:

Log in to Azure: az login
Create a Function App in your Azure portal.
Publish the function: func azure functionapp publish qrcodegen --nozip

Your QR code generator is now live on Azure! You can access it via the Form URL and start generating QR codes in seconds.

Conclusion

By following this tutorial, you’ve learned how to build a simple Code generator using Azure Functions. You’ve seen how easy it is to create serverless applications in the cloud with minimal code and effort.

Want to scale this project or add advanced features like error handling or persistent storage? Azure Functions provides the perfect foundation to build on. Additionally, ZippyOPS offers consulting and managed services for cloud solutions, including DevOps, Cloud, and MLOps.

For assistance with your Azure Function projects or other cloud needs, contact us at sales@zippyops.com.