qrfn : QR codes and Azure functions
Tags: cloudcomputing, qrcode, serverlessarchitect, azure
Published: 2019-08-30 17:34:22

---
title: qrfn : QR codes and Azure functions
published: true 
tags: cloud-computing,qr-code,serverless-architect,azure
canonical_url: https://medium.com/@heyayushh/qrfn-6bba706fbbcb
---

### **qrfn : QR codes and Azure functions**

generate[**QR codes**](https://en.wikipedia.org/wiki/QR_code) by just passing a text in [_Query Parameters._](https://en.wikipedia.org/wiki/Query_string)

![](https://cdn-images-1.medium.com/max/1024/0*3EQRtUmQCcOvzkwG)<figcaption>Photo by <a href="https://unsplash.com/@aka_opex?utm_source=medium&amp;utm_medium=referral">Mitya Ivanov</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

In this blog post we will see how I used QR Codes till now.

- Learn how [**Azure Functions**](http://functions.azure.com)can be a lego piece in your Architecture and Business.
- No spoilers of Game of Thrones, feel free to read every part ;p
- Enable images pls.

### **tl;dr**

> 1. QR code.js — Quick Response Codes

> 2. RasteriseHTML — Downloadable Image

> 3. Read text from Query Parameter, and send QR code in Response.

> Didn’t understand? Fallthrough the blog.

### QR code?

I think QR code as a gateway to from the “real world” to the “internet”.   
We see QR Codes being used in many ways, in movie/event tickets, in Payments, WIFI network login etc.

But what’s a blog on QR without it’s full form right?   
It’s known as Quick Response Code.

![](https://cdn-images-1.medium.com/max/1024/1*UsxWbnYbgMGtOFw9-Dvi4g.jpeg)<figcaption>QChain - QR Enabled Keychain</figcaption>

We made **QChain** in an Experiment which was **startup for a Week**. We thought of an idea in **12 Hours** and Executed it whole **week long**.

Qchain gives you hope of finding lost key by just having a QR with the useful information of the owner.

To gather customers we generated funds by **Crowdfunding** and started Delivering their Product after a Week.

We used to **3D print** the case and Print the QR code on a Sticker Page, cut it and Paste it on the Case. We couldn’t Automate the hardware, but the Software, ofcourse I had **Azure functions**.

In form where people used to Pay us and Submit their information, I sent the submission to QRFn to generate their QR’s on the event(awesome r8).

![](https://cdn-images-1.medium.com/max/726/1*-kKYgluyWQkbFkOMs-lXLg.png)

Moreover when I Built [**Cliniq**](https://cliniq.ml) ** ,** I used QRfn while building the service for patients to book appointments. The idea behind Cliniq was to skip long waiting queues to see the doctor.

Patient portal can generate QR code with a Primary Key used in our database and can have an appointment book with a scheduled time.

Doctors can Scan the QR and write Symptoms, notes and Prescription in the fields. Doctor portal justs inserts the data using primary key in the QChain.

Similarly the Chemists can Scan the QR and retrieve Precription and provide medicines, using the primary key.

**QRfn** was found essential and delivering.

### **Azure Functions**

Azure Functions is a [serverless](https://azure.microsoft.com/solutions/serverless/) compute service that enables you to run code on-demand without having to explicitly provision or manage infrastructure. We can Use Azure Functions to run a script or piece of code in response to a variety of events.

Azure function is easy to imagine as a Lego, a piece which helps build a building or a ship with the elephants. It can serve as crucial API to all your Stack needs when there isn’t any existing API for the same.

Also this Lego piece can be a Ship alone, Performative and you don’t need to pay till you use it (pay per execution model).

### Ohkay now, Let’s get Started for QRfn

You can also use and copy paste the code from github repo as images won’t let you ;p [_https://github.com/heyayushh/qrfn_](https://github.com/heyayushh/qrfn)

### 1. Write HTML to Respond with a Template

_Requiring Stuff in <head>_

- QRCode.js — To make QR code
- rasterizeHTML — To make a Image out of HTML
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcarbon.now.sh%2Fembed%3Fbg%3Drgba%28248%252C231%252C28%252C1%29%26t%3Ddracula%26wt%3Dnone%26l%3Dhtmlmixed%26ds%3Dfalse%26dsyoff%3D20px%26dsblur%3D68px%26wc%3Dtrue%26wa%3Dtrue%26pv%3D56px%26ph%3D56px%26ln%3Dfalse%26fm%3DFira%2520Code%26fs%3D11px%26lh%3D222%2525%26si%3Dfalse%26es%3D2x%26wm%3Dfalse%26code%3D%25253C%21DOCTYPE%252520html%25253E%25250A%25253Chtml%252520lang%25253D%252522en%252522%25253E%25250A%25250A%25253Chead%25253E%25250A%252520%252520%252520%252520%25253Cmeta%252520charset%25253D%252522UTF-8%252522%25253E%25250A%252520%252520%252520%252520%25253Cmeta%252520name%25253D%252522viewport%252522%252520content%25253D%252522width%25253Ddevice-width%25252C%252520initial-scale%25253D1.0%252522%25253E%25250A%252520%252520%252520%252520%25253Cmeta%252520http-equiv%25253D%252522X-UA-Compatible%252522%252520content%25253D%252522ie%25253Dedge%252522%25253E%25250A%252520%252520%252520%252520%25253Ctitle%25253Etext%252520to%252520QR%25253C%25252Ftitle%25253E%25250A%252520%252520%252520%252520%25253Cscript%252520src%25253D%252522https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fjquery%25252F1.11.2%25252Fjquery.min.js%252522%25253E%25253C%25252Fscript%25253E%25250A%252520%252520%252520%252520%25253Cscript%252520type%25253D%252522text%25252Fjavascript%252522%252520src%25253D%252522https%25253A%25252F%25252Fcdnjs.cloudflare.com%25252Fajax%25252Flibs%25252Fqrcode-generator%25252F1.4.1%25252Fqrcode.js%252522%25253E%25253C%25252Fscript%25253E%25250A%252520%252520%252520%252520%25253Cscript%252520src%25253D%252522https%25253A%25252F%25252Fcdnjs.cloudflare.com%25252Fajax%25252Flibs%25252Frasterizehtml%25252F1.3.0%25252FrasterizeHTML.allinone.js%252522%25253E%25253C%25252Fscript%25253E%25250A%25253C%25252Fhead%25253E&amp;url=https%3A%2F%2Fcarbon.now.sh%2Fembed%2F%3Fbg%3Drgba%28248%25252C231%25252C28%25252C1%29%26t%3Ddracula%26wt%3Dnone%26l%3Dhtmlmixed%26ds%3Dfalse%26dsyoff%3D20px%26dsblur%3D68px%26wc%3Dtrue%26wa%3Dtrue%26pv%3D56px%26ph%3D56px%26ln%3Dfalse%26fm%3DFira%252520Code%26fs%3D11px%26lh%3D222%252525%26si%3Dfalse%26es%3D2x%26wm%3Dfalse%26code%3D%2525253C%21DOCTYPE%25252520html%2525253E%2525250A%2525253Chtml%25252520lang%2525253D%25252522en%25252522%2525253E%2525250A%2525250A%2525253Chead%2525253E%2525250A%25252520%25252520%25252520%25252520%2525253Cmeta%25252520charset%2525253D%25252522UTF-8%25252522%2525253E%2525250A%25252520%25252520%25252520%25252520%2525253Cmeta%25252520name%2525253D%25252522viewport%25252522%25252520content%2525253D%25252522width%2525253Ddevice-width%2525252C%25252520initial-scale%2525253D1.0%25252522%2525253E%2525250A%25252520%25252520%25252520%25252520%2525253Cmeta%25252520http-equiv%2525253D%25252522X-UA-Compatible%25252522%25252520content%2525253D%25252522ie%2525253Dedge%25252522%2525253E%2525250A%25252520%25252520%25252520%25252520%2525253Ctitle%2525253Etext%25252520to%25252520QR%2525253C%2525252Ftitle%2525253E%2525250A%25252520%25252520%25252520%25252520%2525253Cscript%25252520src%2525253D%25252522https%2525253A%2525252F%2525252Fajax.googleapis.com%2525252Fajax%2525252Flibs%2525252Fjquery%2525252F1.11.2%2525252Fjquery.min.js%25252522%2525253E%2525253C%2525252Fscript%2525253E%2525250A%25252520%25252520%25252520%25252520%2525253Cscript%25252520type%2525253D%25252522text%2525252Fjavascript%25252522%25252520src%2525253D%25252522https%2525253A%2525252F%2525252Fcdnjs.cloudflare.com%2525252Fajax%2525252Flibs%2525252Fqrcode-generator%2525252F1.4.1%2525252Fqrcode.js%25252522%2525253E%2525253C%2525252Fscript%2525253E%2525250A%25252520%25252520%25252520%25252520%2525253Cscript%25252520src%2525253D%25252522https%2525253A%2525252F%2525252Fcdnjs.cloudflare.com%2525252Fajax%2525252Flibs%2525252Frasterizehtml%2525252F1.3.0%2525252FrasterizeHTML.allinone.js%25252522%2525253E%2525253C%2525252Fscript%2525253E%2525250A%2525253C%2525252Fhead%2525253E&amp;image=https%3A%2F%2Fcarbon.now.sh%2Fstatic%2Fbanner.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=now" width="1024" height="473" frameborder="0" scrolling="no"><a href="https://medium.com/media/08638f4f37ed6e9422f9bc72b1ed61d6/href">https://medium.com/media/08638f4f37ed6e9422f9bc72b1ed61d6/href</a></iframe>

**_<body> of the HTML_**

The div placeholder will be holding the king of the throne( QR code here ). Screen is just a container for placeholder. Also I added A download button which executes a script named download() on click, which will download the file.

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcarbon.now.sh%2Fembed%3Fbg%3Drgba%28248%252C231%252C28%252C1%29%26t%3Ddracula%26wt%3Dnone%26l%3Dauto%26ds%3Dfalse%26dsyoff%3D20px%26dsblur%3D68px%26wc%3Dtrue%26wa%3Dtrue%26pv%3D56px%26ph%3D56px%26ln%3Dfalse%26fm%3DFira%2520Code%26fs%3D11px%26lh%3D222%2525%26si%3Dfalse%26es%3D2x%26wm%3Dfalse%26code%3D%25253Cbody%25253E%25250A%252520%252520%252520%252520%25253Cdiv%252520class%25253D%252522container%252522%25253E%25250A%252520%252520%252520%252520%252520%252520%252520%252520%25253Cdiv%252520id%25253D%252522screen%252522%252520style%25253D%252522width%25253A525px%252522%25253E%25250A%252520%252520%252520%252520%252520%252520%252520%252520%252520%252520%252520%252520%25253Cdiv%252520id%25253D%252522placeHolder%252522%252520class%25253D%252522.col-md-6%252520.offset-md-3%252522%252520style%25253D%252522margin%25253A-5px%252522%25253E%25253C%25252Fdiv%25253E%25250A%252520%252520%252520%252520%252520%252520%252520%252520%25253C%25252Fdiv%25253E%25250A%252520%252520%252520%252520%252520%252520%252520%252520%25253Cdiv%252520id%25253D%252522ASCII%252522%25253E%25253C%25252Fdiv%25253E%25250A%252520%252520%252520%252520%252520%252520%252520%252520%25253Cbutton%252520type%25253D%252522button%252522%252520class%25253D%252522btn%252520btn-dark%252522%252520style%25253D%252522margin-left%25253A40px%252522%252520onclick%25253D%252522download%28%29%252522%25253EDownload%252520this%252520QRCode%25253C%25252Fbutton%25253E%25250A%252520%252520%252520%252520%252520%252520%252520%252520%25253Cp%25253Eto%252520generate%252520qr%252520pass%252520text%252520in%252520the%252520url%252520-%252520https%25253A%25252F%25252Fqrfn.azurewebsites.net%25252Fapi%25252Fqrfn%25253Ftext%25253D%252522%25253C-enter%252520text%252520here%252520-%25253E%252522%252520%25253C%25252Fp%25253E%25250A%252520%252520%252520%252520%25253C%25252Fdiv%25253E%25250A%25253C%25252Fbody%25253E&amp;url=https%3A%2F%2Fcarbon.now.sh%2Fembed%2F%3Fbg%3Drgba%28248%25252C231%25252C28%25252C1%29%26t%3Ddracula%26wt%3Dnone%26l%3Dauto%26ds%3Dfalse%26dsyoff%3D20px%26dsblur%3D68px%26wc%3Dtrue%26wa%3Dtrue%26pv%3D56px%26ph%3D56px%26ln%3Dfalse%26fm%3DFira%252520Code%26fs%3D11px%26lh%3D222%252525%26si%3Dfalse%26es%3D2x%26wm%3Dfalse%26code%3D%2525253Cbody%2525253E%2525250A%25252520%25252520%25252520%25252520%2525253Cdiv%25252520class%2525253D%25252522container%25252522%2525253E%2525250A%25252520%25252520%25252520%25252520%25252520%25252520%25252520%25252520%2525253Cdiv%25252520id%2525253D%25252522screen%25252522%25252520style%2525253D%25252522width%2525253A525px%25252522%2525253E%2525250A%25252520%25252520%25252520%25252520%25252520%25252520%25252520%25252520%25252520%25252520%25252520%25252520%2525253Cdiv%25252520id%2525253D%25252522placeHolder%25252522%25252520class%2525253D%25252522.col-md-6%25252520.offset-md-3%25252522%25252520style%2525253D%25252522margin%2525253A-5px%25252522%2525253E%2525253C%2525252Fdiv%2525253E%2525250A%25252520%25252520%25252520%25252520%25252520%25252520%25252520%25252520%2525253C%2525252Fdiv%2525253E%2525250A%25252520%25252520%25252520%25252520%25252520%25252520%25252520%25252520%2525253Cdiv%25252520id%2525253D%25252522ASCII%25252522%2525253E%2525253C%2525252Fdiv%2525253E%2525250A%25252520%25252520%25252520%25252520%25252520%25252520%25252520%25252520%2525253Cbutton%25252520type%2525253D%25252522button%25252522%25252520class%2525253D%25252522btn%25252520btn-dark%25252522%25252520style%2525253D%25252522margin-left%2525253A40px%25252522%25252520onclick%2525253D%25252522download%28%29%25252522%2525253EDownload%25252520this%25252520QRCode%2525253C%2525252Fbutton%2525253E%2525250A%25252520%25252520%25252520%25252520%25252520%25252520%25252520%25252520%2525253Cp%2525253Eto%25252520generate%25252520qr%25252520pass%25252520text%25252520in%25252520the%25252520url%25252520-%25252520https%2525253A%2525252F%2525252Fqrfn.azurewebsites.net%2525252Fapi%2525252Fqrfn%2525253Ftext%2525253D%25252522%2525253C-enter%25252520text%25252520here%25252520-%2525253E%25252522%25252520%2525253C%2525252Fp%2525253E%2525250A%25252520%25252520%25252520%25252520%2525253C%2525252Fdiv%2525253E%2525250A%2525253C%2525252Fbody%2525253E&amp;image=https%3A%2F%2Fcarbon.now.sh%2Fstatic%2Fbanner.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=now" width="1024" height="473" frameborder="0" scrolling="no"><a href="https://medium.com/media/d1dc26b9d223af040a1570ec8dad6b5e/href">https://medium.com/media/d1dc26b9d223af040a1570ec8dad6b5e/href</a></iframe>
#### **Scripts**

- [**QRcode.js**](https://davidshimjs.github.io/qrcodejs/)
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcarbon.now.sh%2Fembed%3Fbg%3Drgba%28248%252C231%252C28%252C1%29%26t%3Ddracula%26wt%3Dnone%26l%3Djavascript%26ds%3Dfalse%26dsyoff%3D20px%26dsblur%3D68px%26wc%3Dtrue%26wa%3Dtrue%26pv%3D56px%26ph%3D56px%26ln%3Dfalse%26fm%3DFira%2520Code%26fs%3D11px%26lh%3D222%2525%26si%3Dfalse%26es%3D2x%26wm%3Dfalse%26code%3D%25253Cscript%25253E%25250A%252520%252520%252520%252520%25252F%25252F%252520Script%252520to%252520generate%252520QR%252520code%25250A%252520%252520%252520%252520var%252520typeNumber%252520%25253D%2525204%25253B%25250A%252520%252520%252520%252520var%252520errorCorrectionLevel%252520%25253D%252520%2527H%2527%25253B%25250A%252520%252520%252520%252520var%252520qr%252520%25253D%252520qrcode%28typeNumber%25252C%252520errorCorrectionLevel%29%25253B%25250A%252520%252520%252520%252520qr.addData%28%2527%2527%29%25253B%25250A%252520%252520%252520%252520qr.make%28%29%25253B%25250A%252520%252520%252520%252520document.getElementById%28%2527placeHolder%2527%29.innerHTML%252520%25253D%252520qr.createImgTag%2815%25252C%25252015%29%25253B%25250A%25253C%25252Fscript%25253E&amp;url=https%3A%2F%2Fcarbon.now.sh%2Fembed%2F%3Fbg%3Drgba%28248%25252C231%25252C28%25252C1%29%26t%3Ddracula%26wt%3Dnone%26l%3Djavascript%26ds%3Dfalse%26dsyoff%3D20px%26dsblur%3D68px%26wc%3Dtrue%26wa%3Dtrue%26pv%3D56px%26ph%3D56px%26ln%3Dfalse%26fm%3DFira%252520Code%26fs%3D11px%26lh%3D222%252525%26si%3Dfalse%26es%3D2x%26wm%3Dfalse%26code%3D%2525253Cscript%2525253E%2525250A%25252520%25252520%25252520%25252520%2525252F%2525252F%25252520Script%25252520to%25252520generate%25252520QR%25252520code%2525250A%25252520%25252520%25252520%25252520var%25252520typeNumber%25252520%2525253D%252525204%2525253B%2525250A%25252520%25252520%25252520%25252520var%25252520errorCorrectionLevel%25252520%2525253D%25252520%27H%27%2525253B%2525250A%25252520%25252520%25252520%25252520var%25252520qr%25252520%2525253D%25252520qrcode%28typeNumber%2525252C%25252520errorCorrectionLevel%29%2525253B%2525250A%25252520%25252520%25252520%25252520qr.addData%28%27%27%29%2525253B%2525250A%25252520%25252520%25252520%25252520qr.make%28%29%2525253B%2525250A%25252520%25252520%25252520%25252520document.getElementById%28%27placeHolder%27%29.innerHTML%25252520%2525253D%25252520qr.createImgTag%2815%2525252C%2525252015%29%2525253B%2525250A%2525253C%2525252Fscript%2525253E&amp;image=https%3A%2F%2Fcarbon.now.sh%2Fstatic%2Fbanner.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=now" width="1024" height="473" frameborder="0" scrolling="no"><a href="https://medium.com/media/2833fa2f9b5d064f32d1ee210b47d2fe/href">https://medium.com/media/2833fa2f9b5d064f32d1ee210b47d2fe/href</a></iframe>

This generates a QR Code in the HTML tag.  
You can read more about [QRCode.js _here_](https://davidshimjs.github.io/qrcodejs/).

![](https://cdn-images-1.medium.com/max/632/1*6scrQmwXQod3FLodbxHjLA.png)

#### _convert HTML to a JS String_

As we are sending client a HTML page from JS we should convert it. As the html content contains lots of ‘,”,< , the js will give errors of parsing, and either we have to use escape characters or use this code.

Mention the path and filename correctly.

In mac OS/ Linux run the command in the directory same as the HTML Page. or you can also copy-paste the console output too.

```
node convertHtmlToString.js | cat >> var.txt
```

Now, Save the content of var.txt/output for later use.

### Azure Functions

**_Requirements_**

- Azure Portal

#### 1. Create a Function App

![](https://cdn-images-1.medium.com/max/1024/1*1qkawESD4VCj3P_nvSQOlQ.png)<figcaption>1 Step — Create an a Azure function App</figcaption>

#### 2. Use in-portal development

![](https://cdn-images-1.medium.com/max/1024/1*FQbtLsJ-Zadw02nzpCUGuQ.png)<figcaption>step — 2 Use in-portal Development</figcaption>

#### 3. Create a HTTP trigger/ Webhook / API function

![](https://cdn-images-1.medium.com/max/1024/1*5hrwum90TWnjlomJ7SR7Vg.png)<figcaption>Step 3 — Create a function</figcaption>

#### 4. It’s the showtime.

![](https://cdn-images-1.medium.com/max/1024/1*Nwu9gBbOf7tWzjD53ocBJg.png)<figcaption>Step 4 — Write the code.</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*Ah12fSfztxEFj4G9dWbOdA.png)<figcaption>CODE 😍</figcaption>

The code has so much to say, merely 10 lines.

**_qrSite_** is the variable with the html code we saved earlier.

**_genQr(text)_** function returns a QR of the text passed earlier as an argument(same like my girlfriend).

**_context.res_** is the response body(json) for azure function of a successful request.

**Save** and **run** the _code_ either in test section or **postman** adding the text as mentioned below:

_https://<_ **_yourFunctionApp_** _>.azurewebsites.net/api/<_ **_yourFunctionName_** _>?_ **_text_** _=thanku4ReadingMyBlogLolplsclap_

and it will respond with a **HTML**  **_website_** with a _QRcode generator_.

![](https://cdn-images-1.medium.com/max/1024/1*3plRNv0lCBrX-nXezUSDow.png)

There we go, we have king of seven kingdoms, protector of the WiFi password, **QRfn**.

Learn more about :

[https://functions.azure.com](https://functions.azure.com)/

[https://imaginecup.microsoft.com/en-us/Events?id=0](https://imaginecup.microsoft.com/en-us/Events?id=0)

this is the code to [QRfn](https://github.com/heyAyushh/qrfn), May the 4th be with you.

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2FW0y2EuOIPWvK0%2Ftwitter%2Fiframe&amp;url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FW0y2EuOIPWvK0%2Fgiphy.gif&amp;image=https%3A%2F%2Fi.giphy.com%2Fmedia%2FW0y2EuOIPWvK0%2F200.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="269" frameborder="0" scrolling="no"><a href="https://medium.com/media/d4c80c9c56f3a23d8d290ce9c7fc71b7/href">https://medium.com/media/d4c80c9c56f3a23d8d290ce9c7fc71b7/href</a></iframe>