Create vCard QR Codes using Azure Functions

by Carlos Mendible on 28 Aug 2016 » Azure, dotNet

Today I’ll show you how to develop a Web API to Create vCard QR Codes using Azure Functions.

But wait what are Azure Functions?

As defined by Microsoft:

Azure Functions is a serverless event driven experience that extends the existing Azure App Service platform. These nano-services can scale based on demand and you pay only for the resources you consume.

And what does serverless means? I really like the definition given by Scot Hanselman in his post What is Serverless Computing? Exploring Azure Functions:

Serverless Computing is like this – Your code, a slider bar, and your credit card. You just have your function out there and it will scale as long as you can pay for it. It’s as close to”cloudy” as The Cloud can get.

Now let’s start:

1. Create a Function App


Head to portal.azure.com and hit the New button. Search for Function App and create one. You’ll be asked for an app name, resource group, app service plan and storage account where the code will live.

functionapp

2. Create the function


Create a new Function, selecting the empty C# template and give it a name: (i.e QRCoder)

qrcoder

3. Add the code


Replace the contents of the Code (run.csx) section with the following code and save it:

#r "System.Drawing"
#r "QRCoder.dll"

using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using QRCoder;

public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
{
    // Read the json request
    var qrRequest = await req.Content.ReadAsAsync<SimpleVCardRequest>();

    // Create the vCard string
    var vCard = "BEGIN:VCARD\n";
    vCard += $"FN:{qrRequest.Name}\n";
    vCard += $"TEL;WORK;VOICE:{qrRequest.Phone}\n";
    vCard += "END:VCARD";

    // Generate de QRCode
    QRCodeGenerator qrGenerator = new QRCodeGenerator();
    QRCodeData qrCodeData = qrGenerator.CreateQrCode(vCard, QRCodeGenerator.ECCLevel.Q);
    QRCode qrCode = new QRCode(qrCodeData);

    // Save the QRCode as a jpeg image and send it in the response.
    using (Bitmap qrCodeImage = qrCode.GetGraphic(20))
    using (MemoryStream ms = new MemoryStream())
    {
        qrCodeImage.Save(ms, ImageFormat.Jpeg);

        var response = new HttpResponseMessage()
        {
            Content = new ByteArrayContent(ms.ToArray()),
            StatusCode = HttpStatusCode.OK,
        };
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");
        return response;
    }    
}

// Request class to hold the Name and Phone number used to generated the vCard QR Code
public class SimpleVCardRequest
{
    public string Name { get; set; }
    public string Phone { get; set; }
}

4. Fixing the missing references

If you read the log you’ll notice the compiler can’t resolve the references to QRCoder and that’s because we are using a 3rd party library to generate the QR codes.

We need to upload the assemblies to the Functions App. Connect to your App via SFTP or your favorite method.

You’ll need to create a bin folder under the folder with your function’s name (i.e. QRCoder) and upload the QRCoder.dll and UnityEngine.dll files to it.

sftpqrcoder

6. Create an HTML endpoint for the function


Head to the Integrate tab and add a new HTML trigger and save it with the default values.

trigger

7. Test the Web API


Head to the Develop tab and copy the Function Url:

<img src=”/wp-content/uploads/2016/08/functionUrl.png” alt=”functionUrl” class=”aligncenter” size-medium wp-image-5662” srcset=”/wp-content/uploads/2016/08/functionUrl.png 1800w, /wp-content/uploads/2016/08/functionUrl-300x28.png 300w, /wp-content/uploads/2016/08/functionUrl-768x70.png 768w, /wp-content/uploads/2016/08/functionUrl-1024x94.png 1024w, /wp-content/uploads/2016/08/functionUrl-250x23.png 250w” sizes=”(max-width: 1800px) 100vw, 1800px” />

Now use postman to send payload to the Web API and get a QR Code

postman

The response should show a working QR code like the following:

qrcode

You can grab the code for the function here: https://gist.github.com/cmendible/4b6627bcf288b94af9be4d25f6e66d5f

Hope it helps!