DEV Community

Cover image for Building a QR Code Generator with Azure Functions
Jeremy Morgan for Pluralsight

Posted on • Originally published at allhandsontech.com

Building a QR Code Generator with Azure Functions

Here's a fun project if you want to learn how to build Azure Functions. This project is going to be a little silly but educational.

We will build a QR Code Generator that runs 100% within an Azure function. There are thousands of QR Code generators on the internet, so this is a silly exercise, but I wanted to push the limits of what an Azure Function can do, show you how cool they are, and inspire you to build cool stuff with them.

If you'd rather watch a video, we have it here:

In this tutorial, you will learn:

  • How Azure Functions work and how simple they are
  • How to generate QR codes with .NET libraries
  • How little effort is required to build something like this

It'll be fun, and I hope you follow along. What we'll do in this tutorial:

  • Create an Azure Function
  • Implement a QR generator
  • Build a crude frontend for it
  • deploy it to Azure with Azure Functions Core Tools.

By the end of this tutorial, you'll have a functional QR code generator, and it may inspire you to build more cool things with Azure Functions. They are compact, simple, and easy to build.

You can find the full source code to this project here.

What is an Azure Function?

Azure Functions are serverless applications that run in Azure. They're small bits of code you can execute without a server or complicated instance. Most Azure Functions are "microservices" that do one small task and do it well.

Azure Functions can also respond to HTTP triggers to act as a sort of "mini API." They respond to HTTP requests just like a Web API would, but it takes much less setup with functions.

I'm starting to sound like an advertisement, but it is awesome. Years ago, this same project required you to set up a server or set up an ASP.NET Web API on an IIS server somewhere. Now we can do it in a few lines of code and push it to the cloud. Azure Functions allow you to focus on building cool stuff instead of all that setup.

Requirements

Here's what you'll need for this tutorial. I'll build this in Windows 11, but we're not using Visual Studio. I'll use the dotnet driver for this, so you can replicate it on Mac or OSX if you'd like. You will have to have this (free) software installed on your machine.

You will need:

So let's get started!

Creating a new Project

We're going to use the Azure CLI to create a new Azure function for us, and we'll use the dotnet driver to install software.

Visual Studio can automate this for us, but doing it this way gives a better view of the steps involved and can be done on many platforms.

First, we'll initialize a new function. We'll use the func command to create a new project named QRCodeGen. We'll specify the worker runtime as "dotnet" to choose C# as the language used.

Run this command in your project or repositories folder:

func init QRCodeGen --worker-runtime dotnet
Enter fullscreen mode Exit fullscreen mode

If you look in the folder, there isn't much here:

"How to build Azure Functions"

We still need to create an Azure Function within the project. Azure Functions have a set of templates, depending on what type of application you're making. We want to create an HTTP trigger, a function that responds to an HTTP request.

func new --template "Http Trigger" --name QRCodeGen --authlevel anonymous
Enter fullscreen mode Exit fullscreen mode

"How to build Azure Functions"

If you're using Visual Studio Code, you may see this message:

"How to build Azure Functions"

Select yes to install the extensions.

Now you will see a sample function that func created for you:

"How to build Azure Functions"

You can run it locally if you want to try it out. Type in

func start
Enter fullscreen mode Exit fullscreen mode

You will then see the function startup, and the console will give you some guidance on how to use the application:

"How to build Azure Functions"

As we can see, we can either send a GET or a POST to http://localhost:7071/api/QRCodeGen. Let's load it up in a browser and see what a simple GET returns:

"How to build Azure Functions"

We have a message showing:

This HTTP triggered function was executed successfully. Pass a name in the query string or in the request body for a personalized response.
Enter fullscreen mode Exit fullscreen mode

Ok cool. Let's dig into the code and see what this message means.

string responseMessage = string.IsNullOrEmpty(name)
    ? "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response."
    : $"Hello, {name}. This HTTP triggered function executed successfully.";
Enter fullscreen mode Exit fullscreen mode

As you can see in the code above, it's doing a check for a value in name. If that variable is empty or null, it will display the message we just saw.

But how do we populate that value? A few lines up, we see a parameter in the query that we can use:

string name = req.Query["name"];
Enter fullscreen mode Exit fullscreen mode

It will display a message with the name included if it's populated. We need to send it a URL with the name as a parameter like this:

http://localhost:7071/api/QRCodeGen?name=Jeremy
Enter fullscreen mode Exit fullscreen mode

So let's try that:

"How to build Azure Functions"

And there's my message. So now we know the function is working as expected. We load up a URL, get the parameter and modify the output.

For simplicity, we'll use this model for our QR code generator. We'll establish our URL to listen for requests, and pass the value in a GET command, then return a QR code. Let's start with generating that QR Code.

Install QRCode Generation tools

Turning text into a QR code is relatively complex. Luckily, you're using .NET. You won't have to build your generator by hand. The problem was solved a long time ago. We will use a library to generate a .PNG QR code for us. We only have to write some code around it and build a tool that solves our problem.

First, let's install the QRCode Generator package from Manuel BL. We'll do that using the dotnet driver. I'll specify the latest version at the time of this writing.

dotnet add package Net.Codecrete.QrCodeGenerator --version 2.0.1
Enter fullscreen mode Exit fullscreen mode

The QRCode generator works great but can only generate .svgs. Since we want a .PNG (bitmap) format, and want it to work under multiple environments, we need to install the SkiaSharp package:

dotnet add package SkiaSharp
Enter fullscreen mode Exit fullscreen mode

SkiaSharp includes the ability to generate bitmaps. But you must download and add this file to your project:

https://github.com/manuelbl/QrCodeGenerator/blob/master/Demo-SkiaSharp/QrCodeBitmapExtensions.cs

Create a file named QrCodeBitmapExtensions.cs in your project folder and copy the contents of this file to it. This will allow you to work with bitmaps, specifically .PNG files.

Now we have our QR Code generator tools, so let's make it work in our function.

Creating the QR Code Generator Function

If you open up QRCodeGen.cs, you'll see the Azure Function (a method) generated for us. It will look like this:

[FunctionName("QRCodeGen")]
        public static async Task<IActionResult> Run(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
            ILogger log)
        {
            log.LogInformation("C# HTTP trigger function processed a request.");

            string name = req.Query["name"];

            string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
            dynamic data = JsonConvert.DeserializeObject(requestBody);
            name = name ?? data?.name;

            string responseMessage = string.IsNullOrEmpty(name)
                ? "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response."
                : $"Hello, {name}. This HTTP triggered function executed successfully.";

            return new OkObjectResult(responseMessage);
        }
Enter fullscreen mode Exit fullscreen mode

Let's delete this method. The only thing you should see in QRCodeGen.cs is this:

namespace QRCodeGen
{
    public static class QRCodeGen
    {

    }
}
Enter fullscreen mode Exit fullscreen mode

Next, let's add a new method to generate QR codes.

First, add in the name decorator. This will give the method a name and change the URL to access it.

[FunctionName("GenerateQRCode")]
Enter fullscreen mode Exit fullscreen mode

Now, when we run our app, the URL will be:

http://localhost:7071/api/GenerateQRCode
Enter fullscreen mode Exit fullscreen mode

This will be the URL we call to generate a QR code, and we'll call it from JavaScript.

Next, create the method:

public static async Task<IActionResult> Generate(
  [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req, ILogger log)
  {

  }
Enter fullscreen mode Exit fullscreen mode

We're creating a method named Generate. We're passing in some parameters to tell the application we want an HttpTrigger:

[HttpTrigger
Enter fullscreen mode Exit fullscreen mode

And within that trigger, we are passing some parameters.

We want to set our authorization to anonymous so that anyone can access it:

AuthorizationLevel.Anonymous
Enter fullscreen mode Exit fullscreen mode

We only want to accept GET requests to this URL, so the following parameter specifies that:

"get",
Enter fullscreen mode Exit fullscreen mode

Then we'll set our route to null. If we wanted a different URL or particular route, we could specify it here. For simplicity's sake, we'll leave it as it is:

Route = null)]
Enter fullscreen mode Exit fullscreen mode

Next, we will pass in an HttpRequest object. This will contain the data from the incoming request so that we can grab parameters from it. When a GET request is sent to our function, we can extract things like headers, parameters, and more.

HttpRequest req
Enter fullscreen mode Exit fullscreen mode

Finally, we'll pass in a logger so we can log messages.

ILogger log
Enter fullscreen mode Exit fullscreen mode

Great now we have the method constructed. Let's fill it out.

Gathering Info from the Query String.

The user must send the text they want turned into a QR Code. It's usually a URL. We decided early on to keep things simple. We'll just gather this info from the query string sent to the API.

Remember that HttpRequest we passed into the method? We can get our Query parameter from that. We can establish a string variable and then grab the parameter from the query string:

string qrtext = req.Query["qrtext"];
Enter fullscreen mode Exit fullscreen mode

Add in the following message to log our output. We want to display what was sent to our qrtext variable:

log.LogInformation("Generating QR Code for {0}", qrtext);
Enter fullscreen mode Exit fullscreen mode

This way, we can doublecheck what was sent.

Now, let's generate our QR Code.

Generating the QR Code to PNG

Next, we want to take our string, encode it into a QR Code, then export that to a PNG.

So we'll make a static call to the QRCode library we installed earlier. We'll pass in the text we want to generate and the error correction value. Medium should be fine.

var qr = QrCode.EncodeText(qrtext, QrCode.Ecc.Medium);
Enter fullscreen mode Exit fullscreen mode

This is all it takes to generate a QR Code. But it's in an SVG format. We need to convert it into a PNG so we can display it.

Since we added that bitmap extension above, now our qr object has a method to turn the QR code into a PNG with a few parameters.

We need to add a scale: I used 10, which seemed to generate a decent size.

I used 1 for the border.

And I set the foreground (code) to SKColors.Black, and the background to SKColors.White.

Here's the code to enter:

var pngout = qr.ToPng(10, 1, SkiaSharp.SKColors.Black, SkiaSharp.SKColors.White);
Enter fullscreen mode Exit fullscreen mode

Ok, so now we have our QR Code. That was easy! Now let's package it up in JSON and send it out!

Creating a JSON Return Object

We've been creating this code within public static class GenerateQRCode. Let's create another class that will create a simple object we can return when the API is called.

Just outside of the GenerateQRCode class (before the last } ) create a ReturnObject class.

This class will have a single property named Image. This will be a string and we'll encode our PNG as text into it.

public class ReturnObject {
  public string Image { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

Now back in the GenerateQRCode class, let's go back to where we were. We'll create a new ReturnObject:

var ourResult = new ReturnObject{};
Enter fullscreen mode Exit fullscreen mode

Now, we'll take our PNG image and convert it into a Base64 string, and add that string to our return object:

ourResult.Image = Convert.ToBase64String(pngout);
Enter fullscreen mode Exit fullscreen mode

Easy. Now we'll just return our POCO (Plain old class object) as a new JsonResult, so it returns JSON to the caller:

return new JsonResult(ourResult);
Enter fullscreen mode Exit fullscreen mode

And that's there is to it. In about seven lines of code, we're taking a string, converting it to a QR code, and shipping it out the door.

Let's try it out.

Start up the Function Locally

We will start up the function and have it listening locally. We'll send a GET request with a query to test it out.

Type the following at the command line:

func start
Enter fullscreen mode Exit fullscreen mode

To start up the function.

You should see something like this:

"How to build Azure Functions"

Now we'll send a request to

http://localhost:7071/api/GenerateQRCode
Enter fullscreen mode Exit fullscreen mode

Remember the parameter we specified in our code was qrtext, so I'll add that to the end:

http://localhost:7071/api/GenerateQRCode?qrtext="hello world"
Enter fullscreen mode Exit fullscreen mode

I'm using Postman for this, so I can see the JSON rendered out:

"How to build Azure Functions"

And the bit of logging we did shows that it's rendering for "hello world":

"How to build Azure Functions"

So the steps are simple:

  • Send a GET to our URL
  • Append the text to generate and add it to qrtext
  • Accept the JSON.

Here's all the code we entered so far:

public static class QRCodeGen
   {
      [FunctionName("GenerateQRCode")]
       public static async Task<IActionResult> GenerateQRCode(
       [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 ourResult = new ReturnObject{};
           ourResult.Image = Convert.ToBase64String(pngout);
           return new JsonResult(ourResult);
       }
   }
   public class ReturnObject {
       public string Image { get; set; }
   }
Enter fullscreen mode Exit fullscreen mode

And that's fantastic, but we're not done. We still need to deploy it. But before we do that, let's build a small, simple JavaScript front end to interact with this function.

Building the Front End

We want this QR Code generator to be totally self-contained. While Azure Functions aren't really designed to serve up web pages, it is possible. In this case, we can set this up so we don't need to host our front end somewhere else. It's just a simple webpage so let's serve it up.

First, we'll create our index.html.

Create a folder named www and create a file named index.html.

This is going to be a super simple, crude front end—nothing fancy, just enough to get the job done.

Add in the following at the top:

<!DOCTYPE html>
<html>
<body>

<h2>QR Code Generator</h2>
Enter fullscreen mode Exit fullscreen mode

This is our basic header. Next, we'll need to add an input to get text from the user.

<input id="inputbox" style="width: 250px;" ></input>
<br /><br />
Enter fullscreen mode Exit fullscreen mode

This input has an id of inputbox, so we can grab this text with JavaScript. I added a couple of line breaks after it to space it out.

Next, we'll create a button that will call a JavaScript function:

<button type="button" onclick="GetQRCode()">Create QR Code</button>
Enter fullscreen mode Exit fullscreen mode

Then we'll have a place where we will insert the QR code. Remember this will be Base64 encoded so that we can populate this div with an image in our GetQRCode function.

<div id="demo"></div>
Enter fullscreen mode Exit fullscreen mode

Next, we'll put in the GetQRCode function, which makes an XMLHttpRequest back into our Azure Function and retrieves the JSON. It then parses it and replaces the "demo" div with our image. Note that we're adding an img tag with the header information so it creates an image we can view in our browser.

function GetQRCode() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var ourJSON = JSON.parse(this.responseText);
      document.getElementById("demo").innerHTML = "<img src=\"data:image/png;base64, " + ourJSON.image + "\">";
    }
  };
  input = document.getElementById('inputbox').value
  xhttp.open("GET", "/api/GenerateQRCode?qrtext=" + input, true);
  xhttp.send();
}
</script>
Enter fullscreen mode Exit fullscreen mode

Great! So now we have an index page that will draw up a small UI for our QRCode Generator.

I know we could add in error correction/handling or use a library for this, but I want to keep it as simple as possible.

Next, we need to serve this up with our Azure Function.

Serving the Index Page

Azure Functions are not intended to be web servers. In fact, Azure Static Web Apps do a much better job, but we're trying to keep this as simple as it can be. One single Azure Function to accomplish this task.

We can push out the index.html file so it will be served up by a browser. This gives a small interface for our application, and we can go back later and build a complete web app that takes advantage of this function or add it into a bundle of microservices if we like.

Open up GenerateQRCode.cs again, and at the top of our class (above [FunctionName("Form")]) let's add in another function.

We want this function to return a HttpResponseMessage this time. We're still going to make this an HttpTrigger, with anonymous authentication, and pass in the same values as before.

This time though, we need to pass in ExecutionContext context. This gives us our execution context so we can locate files within the local filesystem, and I'll explain why in a bit.

Another is this will return HttpResponseMessage instead of an IActionResult.

[FunctionName("Form")]
          public static HttpResponseMessage Form(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req,
            ILogger log, ExecutionContext context)
        {
Enter fullscreen mode Exit fullscreen mode

Next, we're going to open the index.html file we put in the www folder and read it all in as text. This is where the execution context comes from.

We want to open up the index.html file that lives in the www folder on the filesystem where the application is running. We do that with this line of code:

string indexPage = File.ReadAllText(context.FunctionAppDirectory + "/www/index.html");
Enter fullscreen mode Exit fullscreen mode

Then we'll create a new HttpResponseMessage with status code of OK (200):

var result = new HttpResponseMessage(HttpStatusCode.OK);
Enter fullscreen mode Exit fullscreen mode

Now we'll need to add some headers to that, and fill the "content" with the text we read from our index file:

result.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
result.Content = new ByteArrayContent(System.Text.Encoding.UTF8.GetBytes(indexPage));
Enter fullscreen mode Exit fullscreen mode

Now we have a 200 OK message with text/html header, and we have all the text from our index.html added to the content section of the header.

It's pretty hacky, but it works.

Then we simply return it:

return result;
Enter fullscreen mode Exit fullscreen mode

So the entire function looks like this:

[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);

    result.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
    result.Content = new ByteArrayContent(System.Text.Encoding.UTF8.GetBytes(indexPage));

    return result;
}
Enter fullscreen mode Exit fullscreen mode

Now, since we're introducing this outside file (index.html) that will need to be included in the build, we need to add this to our .csproj file.
In an ItemGroup, add in the following code:

<None Update="www\index.html">
     <CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
Enter fullscreen mode Exit fullscreen mode

I added mine in with the other file publishing settings:

"How to build Azure Functions"

Save it, and let's run our Azure Function Locally again:

func start
Enter fullscreen mode Exit fullscreen mode

And let's see how it works.

Testing our Front End

Now I have my function up and running locally, so I can just bring up a web browser to:

http://localhost:7071/api/Form
Enter fullscreen mode Exit fullscreen mode

and there it is in all its glory:

"How to build Azure Functions"

So I'll drop in a URL,

"How to build Azure Functions"

And there's my QR Code, temporarily generated. Awesome!!

Let's deploy this to Azure.

Deploying our Application

So I'm now calling this an "application" because it is. We've gone beyond the expected functionality of a simple function, just to show how powerful Azure Functions can be. Let's deploy this and see how it works.

With the Azure CLI, type in

az login
Enter fullscreen mode Exit fullscreen mode

You'll be directed via a web browser to log into Azure.

"How to build Azure Functions"

In your Azure Console, create a new Azure Function App. You can name this whatever you'd like.

"How to build Azure Functions"

Select to publish as code, and use the following Runtime stack. You can choose whatever region you'd like.

"How to build Azure Functions"

I'll choose Windows and the Consumption (Serverless) model:

"How to build Azure Functions"

I'll create a new storage account and press "review and create"

"How to build Azure Functions"

Make a note of your details:

"How to build Azure Functions"

Now we need to publish with the Azure CLI. We'll do that by using the func command and specifying that we want to publish an azure functionapp, the name, and we'll put "--nozip" to tell the command we aren't deploying a zip of the application, but rather the source code.

func azure functionapp publish qrcodegen --nozip
Enter fullscreen mode Exit fullscreen mode

You should see something like this when it's done.

"How to build Azure Functions"

You will need to log into your Azure portal, load up the function app and select "configuration".

"How to build Azure Functions"

Then find WEBSITE_RUN_FROM_PACKAGE and set the value to 0. This will allow our function to run from the files we've published.

"How to build Azure Functions"

Let's take a look!

Running the Application on Azure

After deployment, you should see a screen like this:

"How to build Azure Functions"

The "Form" URL is the one that will bring up our UI for the function:

"How to build Azure Functions"

And you can punch in your website and create a QR code from it!

"How to build Azure Functions"

And it works!! Our very own QR code generator that runs 100% from an Azure Function.

Conclusion

If you've been following along, thanks for sticking with it! You now have a cool project and a better familiarity with Azure Functions.

Serving up websites isn't exactly what Azure functions are designed for, but I wanted this to be a complete solution front to back on an Azure Function. No servers, no databases, and you don't have several services to keep track of.

We learned how Azure Functions work and how simple they can be. We didn't write much code here! We learned how to generate QR codes with .NET libraries, build a mini-application and deploy it to the cloud. I wanted to keep this as simple as possible for a good introduction. If you were building a "real" application, here's what I would recommend:

  • Hosting the front end on Azure Static Web Apps or similar service
  • Error checking the heck out of the input
  • Graceful error handling and logging
  • Pushing the images into storage for later retrieval
  • Designing the API so that it can be used by other types of applications as well

I hope this was fun! If you want to learn more about Azure Functions, we have several great courses here at Pluralsight:





Again here's the video version of this tutorial:

Questions? Comments? Let me Know!

Top comments (0)