DEV Community: Ayush

Build a lo-fi cafe for your Discord Server in 5 minutes

Ayush — Mon, 14 Jun 2021 13:03:36 +0000

This blog was originally published at my personal website

I decided to have a chill voice channel where we all could sit together (virtually) and co-work while listening to a lo-fi audio stream and maybe have some occasional talks too.

We will be learning how to create a bot that automatically joins a voice channel whenever someone joins, starts broadcasting music & leaves after 5 minutes of inactivity.

Do you need something cool like this in your own server?

TL;DR
here's the github code with one click deploy button for heroku, ready.

Less gooo 🥳

Setup

Prerequisites

NodeJS LTS and VScode or IDE of your choice.
Pen
Pineapple
Apple
pen

Just kidding, let's setup the project now,

git init
npm init -y 
npm i -s discord.js dotenv ytdl-core-discord lodash

Go to Discord Developer Portal and create an application.

Go to Bot in menu

In the Build-A-Bot section here

Add copy the token and store it in a file. call it .env
```
// in .env file
DISCORD_BOT_TOKEN="Your Bot Token here"
```
Now let's invite the bot to our server

Go to OAuth2 Page

Scroll down to OAuth2 url generator andselect the bot permission

Scroll more and select these bot permission,
It allows the bot to connect, speak , viewchannels, and use voice activity

After selecting the appropriate permissions, click the 'copy' button above the permissions. That will copy a URL which can be used to add the bot to a server.

Paste the URL into your browser, choose a server to invite the bot to, and click “Authorize”.

To add the bot, your account needs "ManageServer" permissions.

Now that you've created the bot user, we'll start writing the NodeJS code for the bot.

Code

Here's the file and folder structure →

|—/client.js
|—/index.js
|—/.env
|—/.gitignore

We don't want to push Petabytes of node modules to GitHub. so, we'll create a .gitignore file.
Whatever we add inside here will be ignored by git and that's what we want.

// in .gitignore

node_modules/
.env

Inside .env file you should have the bot token, If you don't see the setup section once again.
You skippin' lines bro.

Copy your github server id and save it in your .env file.
Also create a voice channel in your discord server, add the exact channel name in .env file. (avoid using ' ' in discord channel name.

// in ./.env

DISCORD_BOT_TOKEN="Your Bot Token here"
DISCORD_GUILD_ID="Your discord server id here"
DISCORD_CHANNEL_NAME="lofi-channel-🎵"
VOICE_URLS="add more than two urls, seperated by comma"

Create a file called client.js and add these lines there.
line number one implies that we are requiring dependency.

// ./client

const Discord = require('discord.js');
require('dotenv').config();

const client = new Discord.Client();

client.login(process.env.DISCORD_BOT_TOKEN);

module.exports = client;

line number 2 means that we want to setup all variables,
inside .env file to the environment variables.
line number 6 and 8 wants the bot to login and then export it,
so we can use it inside any file now.

Now that we have our client ready,
Let's code the Bot.

Create a file index.js and require client.js.

// ./index

const client = require('./client');
const ytdl = require('ytdl-core-discord');
const _ = require('lodash')

This line means whenever the bot is ready (after login) announce it in console.

// ./index

client.on('ready', async () => {
  console.log(`Bot client Logged in as ${client.user.tag}!`);
});

Now after the bot is ready, we will react on all the events that discord sends whenever there's a voice activity using the line below, (voiceStateUpdate)

// ./index

client.on('voiceStateUpdate', lofiCafe);

lofiCafe is a function that will handle this event, let's declare the function above the voiceStateUpdate event handler.

const lofiCafe = async (oldMember, newMember) => {
  const guild_id = process.env.DISCORD_GUILD_ID;
    const channel_name = process.env.DISCORD_CHANNEL_NAME;
  const VOICE_URLS = process.env.VOICE_URLS.split(',')

    // find the voice channel 
  const voiceChannel = await guild.channels.cache.find(ch => ch.name === channel_name);

  let newUserChannel = newMember.channelID;
  let oldUserChannel = oldMember.channelID;

    // a function to play audio in loop
  const play = async (connection) => connection.play(
    await ytdl(_.sample(VOICE_URLS)),
    { type: 'opus', highWaterMark: 50, volume: 0.7 },
  )
  // When the song is finished, play it again.
    .on('finish', play);

  const Guild = await client.guilds.fetch(guild_id); 
  const botUserId = await client.user.id;
  const discordBotUser = await Guild.members.cache.get(botUserId); 

  if (newUserChannel === voiceChannel.id) {
    // if a user joins lo-fi music channel 

    // if bot not in voice channel and users connected to the channel
    if (!discordBotUser.voice.channel && voiceChannel.members.size > 0) {
      // play music
      voiceChannel.join()
        .then(await play)
        .catch(console.error);
    }
  } else if (oldMember && oldMember.channel && oldMember.channel.members
    && !(oldMember.channel.members.size - 1) && oldUserChannel === voiceChannel.id
    && discordBotUser.voice.channel) {

        // if there is only one member in the channel (bot itself)
        // leave the server after five minutes

    setTimeout(() => { 
                    // wait five minutes
      if (!(oldMember.channel.members.size - 1)) { 
                    // if there's still 1 member,
        oldMember.channel.leave();
      }
    }, 60000); // leave in 1 minute
  }
};

After writing these files, your client.js and index.js files should look exactly like this repo.

Deploy

Install Heroku CLI
Login to your heroku account in cli
```
heroku login
```
Create a new app
```
heroku create
```
Push your local git repository to heroku
```
git push heroku main
```
Go into your heroku app settings and add the config vars, like you added in .env .
Just because .env file won't be pushed to GitHub.

Enjoy 🎉

Have your friends sit and co-work in your new lo-fi cafe.

Acknowledgements

icon: Cafe by Andrejs Kirma from the Noun Project

background: Jack Berry on Unsplash

Use Immersive Reader to increase Reading Comprehension using Azure Function and Cognitive Services

Ayush — Fri, 10 Apr 2020 18:38:17 +0000

Use Immersive Reader to increase Reading Comprehension using Azure Function and Cognitive Services

Immersive Reader is a tool that implements proven techniques to improve reading comprehension for emerging readers, language learners, and people with learning differences. The Immersive Reader is designed to make reading more accessible for everyone. The Immersive Reader

Shows content in a minimal reading view
Displays pictures of commonly used words
Highlights nouns, verbs, adjectives, and adverbs
Reads your content out loud to you
Translates your content into another language
Breaks down words into syllables

Azure Functions is a solution for easily running small pieces of code, or “functions,” in the cloud. It’s a serverless offering from Microsoft Azure.

https://github.com/heyAyushh/ImmersiveFunction/raw/master/demo.gif

try the Demo here

In this blog post we will see how to enable Immersive reader for your frontend.

Learn how **Azure Functions** can access token from Azure portal on your web client’s behalf.
Add immersive reader to any website.
Enable images pls.
Working code sample is available here -

Prerequisites 🥚 -

NodeJS < 10+ & npm
Azure Account — Get it Free, for Students, for Professionals
VSCode with Azure Functions Extension installed

Go get your secrets first 🍕

Go this page and Execute a powershell script
Save the output as those are the secrets.

(Alt-text: Getting credentials for the project)

It actually executes a powershell script which deploys immersive reader cognitive service, sets up azure active directory for your app and returns essential secrets.

Let’s Get Going 🍳

Our first step will be installing Azure function core tools in local system so that we can test it. To do that we need to instruct npm to install and enable it for us.

(Alt-text: Just open terminal and install azure function core tools.)

npm install -g azure-functions-core-tools@3

Initialise a function App. This will be a folder where azure functions will be created and stored.

(Alt-text: Just open terminal and install azure function core tools.)

Execute

func init APPNAME

and choose node and JavaScript worker. You’ll see a folder generated with your APPNAME and consists host.json file. We will call this location as root of the directory.

Let’s create a “HTTP Trigger” function now. This will be a serverless function endpoint which authenticates and passes us the token required to access immersive reader resource. “HTTP Trigger” here means the function to be triggered (Start execution) by HTTP requests.

(Alt-text: Create a “HTTP Trigger” Azure function for our App)

func new --name GetTokenAndSubdomain --template “HTTP trigger”

Meanwhile you will see a sub-folder generated after this execution with files index.js and function.json.

Install Dependencies to be used in our app.

(Alt-text: Installed axios dependency using npm)

npm i -s axios dotenv

axios here is a js library that will help us with requesting the immersive service AD for token and dotenv will be used to load tokens and Secrets from .env file.

Create .env file to add secrets that can be accessed by our function. We have to load our secrets which we obtained earlier by the powershell script.

TENANT\_ID={YOUR\_TENANT\_ID} 
CLIENT\_ID={YOUR\_CLIENT\_ID} 
CLIENT\_SECRET={YOUR\_CLIENT\_SECRET} 
SUBDOMAIN={YOUR\_SUBDOMAIN}

Copy the code below and paste it into index.js of our created function in step 3.

(Alt-text: Paste the code below in Index.js of /GetTokenAndSubdomain function)

require('dotenv').config();
const axios = require('axios').default;

module.exports = async function(context, req) {
try {
const tokenResponse = await axios.post(
`https://login.windows.net/${process.env.TENANT_ID}/oauth2/token`,
new URLSearchParams({
grant\_type: 'client\_credentials',
client\_id: process.env.CLIENT\_ID,
client\_secret: process.env.CLIENT\_SECRET,
resource: 'https://cognitiveservices.azure.com/'
}).toString(),
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
);
var tokenResultParsed = tokenResponse.data;
context.res = {
status: 200,
body: { token: tokenResultParsed.access\_token, subdomain: process.env.SUBDOMAIN }
};
} catch (err) {
console.log(err);
context.res = {
status: 500,
error: 'Unable to acquire Azure AD token. Check the debugger for more information.'
};
}
};

This code is a simple Client Credentials OAuth2 handler for our function to grab token from Azure, It submits a post request to our Active Directory with our Client_ID and Client_Secret.

Line 1, Loads all the variables from .env file to actual processing environment. We are using them in our code with prefix process.env.

Line 6 starts the post request execution and it saves the data to tokenResponse . The token is extracted from the data JSON object using tokenResponse.data and stored into tokenResultParsed . context.res now returns the token to the frontend client or whoever hitting our endpoint.

You can go to root directory of the Function App and type

func host start

which will start a local development server on port 7071.

Try accessing localhost:7071/api/GetTokenAndSubdomainin your browser and you'll see a token render on page. If you do get a token, "Congrats! you've followed the blog correctly". If not, Please go back and check for some points that you might have missed.

Let’s Deploy our Function app with VSCode and azure function extension. Moreover we also need to copy the azure function url with authorization code in order to have it accessed by client.

(Alt-text: Deploy Azure function from VSCode and copy the function url in Azure portal)

8 . Now it’s time to embed Immersive reader js sdk in your HTML . Developing whole frontend is again out of the scope for this blog, however I'll describe how to get your sample html up and running. Grab the sample HTML site from here.

line no. 10. loads the immersive reader Javascript sdk

<script
    src="https://contentstorage.onenote.office.net/onenoteltir/immersivereadersdk/immersive-reader-sdk.1.0.0.js">
</script>

line 25 has a button with class immersive-reader-button Which on click handles function on line 75. handleLaunchImmersiveReader() Handles the authentication by executing the function getTokenAndSubdomainAsync() on line 55.

getTokenAndSubdomainAsync() sends a get request to our function with url on line 58. we need to paste URL obtained in step 7 here so that our client can access it. line 82 and 83 extracts token and subdomain which is passed in ImmersiveReader.launchAsync() .

line 87 has the extracts title from #ir-title class used in 26, Similarly content data which also needs to be passed in ImmersiveReader.launchAsync() is passed from #ir-content html class on line 27. Notice how the lang="en-us" is used to specify the language and dir="rtl"is used to specify rtl languages.

ImmersiveReader.launchAsync() Launches a iframe with beautiful immersive reader.

You can deploy the sample anywhere you like, ex. GitHub pages (in a private repo) or zeit.co

learn how to deploy site in 15s with zeit here.

Point 🎯: The GetTokenAndSubdomain API endpoint should be secured behind some form of authentication (for example, OAuth) to prevent unauthorized users from obtaining tokens to use against your Immersive Reader service and billing; that work is beyond the scope of this quickstart.

You can access the JS SDK Refrence here.

Oops, we have a problem after deployment of frontend. Probably that’s a CORS issue.

(Alt-text:Cross Origin Resource sharing issue)

This is why the frontend can’t access our function because Azure has some security enabled by default. Cross Origin Resource Sharing is a technique that permits resource sharing between scripts running on a browser client and resources from a different origin.

Let’s disable CORS just for our frontend so that it can have access to our function.

(Alt-text: Solving Cross Origin Resource sharing issue from Azure portal)

10 . Stay at Home

https://medium.com/media/b664fc6fad92dabe727aa7af8b6bccbe/href

Thanks for reading

https://medium.com/media/718ceaa86f20588648c8eb4f867151a7/href

Let me know the feedback.

Follow / Subscribe for more awesome azure content.

Deploy your frontend in 15 seconds with Zeit Now

Ayush — Fri, 10 Apr 2020 00:22:11 +0000

When I started deploying my frontends and stactic sites on zeit, I've never looked back. Zeit offers fast and zero config deployments and is my go to platform for frontend deployment.

(Alt-Text- zeit.co homepage, Develop, Preview, Ship)

Why Zeit?

Free for personal use
Instant static deploys
Zero Config Required
Collaborative
Automatic SSL
Blazing Fast

Requirements

Node.JS and npm / yarn

Let's go

Create a Account on zeit.co

Tip : Go to zeit.co on your phone and add the page to home screen for instant experience on mobile.
Go to your Terminal and Install Now command line tool.

(Alt-Text- zeit.co homepage, download zeit CLI)
```
npm i -g now
```
What is now?
Now command-line interface enables instant cloud deployment and local development.
Navigate to your project and deploy files.

(Alt-Text- Me executing all steps)

Make sure there is index.html in your folder.
Open your terminal at root of the folder you want to deploy.
execute now login to authenticate your cli with your id.
type now.

That's it; Yep just that; all you need is now

How to Build Google Actions using Azure Functions

Ayush — Wed, 18 Sep 2019 13:40:46 +0000

This article is part of #ServerlessSeptember. You'll find other helpful articles, detailed tutorials, and videos in this all-things-Serverless content collection. New articles are published every day — that's right, every day — from community members and cloud advocates in the month of September.

Find out more about how Microsoft Azure enables your Serverless functions at https://docs.microsoft.com/azure/azure-functions/.

I’m going to show you how to use Azure functions to build an Action for Google Assistant.

More precisely we will look at how we can do fulfillment by webhook in Dialogflow, using a backend by Azure Functions.

TL;DR

Go to Google Actions Console and create a new project.

Setup Invocation

Build actions -> Integrate actions from dialogflow -> go to dialogflow

Set default welcome intent -> enable webhook call Set default fallback intent -> enable webhook call

for welcome, Store sessionID & word, generate a jumbled word from dictionary, send it as response.

for fallback, look for same session id, return the word in response.

This is a story about how I built my first Google Action. You might be asking yourself,“what is a Google Action?”

Photo by Kevin Bhagat on Unsplash

Actions on Google is a platform allowing developers to create software applications known as “Actions” that extend the functionality of the Google Assistant.

Google Assistant is an artificial intelligence-powered virtual assistant developed by Google that is primarily available on mobile and smart home devices. Google Assistant can Order food, Book Cabs by having Actions enabled by Zomato and Uber respectively.

Some individuals (like my grandparents, some doctors, and the differently abled) find that using their voice, rather than keyboards, makes it easier to get day-to-day tasks done. There have even been predictions that voice will replace keyboards on the workstations of the future! (But how will we code?!)

One of the benefits of building an app on a voice platform (like Google Assistant) is that it helps bring inclusiveness in your Product, making sure everyone gets the same benefits of the changes you believe in.

What’s word Jumblr?

Jumblr Logo

My app word Jumblr is a game that gives you a jumbled word to unscramble.

For people with other devices — ex. Windows Phone

And, if you have an Android or Apple device you can install google assistant from your App store and you’re good to go.

Also, you can say to Google Assistant,

“ Hey Google, Talk to word Jumblr”.

Let’s understand what happens when we invoke word Jumblr.

Request Flow

Whenever a user says the phrase (An invocation to the Action), it triggers the Action and that triggers the Azure Function backend to handle the Request sent by the User in the phrase.

Example —
It might be “Book me a cab from **Uber*” *which will invoke uber google action listed in Google Assistant directory and it will invoke their backend service.

For us it’s “Talk to **word Jumblr**” what triggers our google action and then checks into dialogflow and then fowards request to our Backend Azure functions.

Here’s what you’ll need to get started:

A Google account (You don’t need a Google Assistant device, you can test in the Actions portal)
A Microsoft Azure account

Let’s get the party Started!

Step I —* Setup Google Actions*

Go to Google Actions Console and create a new project.

Create a New Project

Actions Portal will suggest some Templates — Choose Conversational

Choose Conversational as I’ll be guiding how to setup intents and webhooks on which Customized experience will suit us best for this project.

Choose Conversational down below the Menu.

Setup invocation of the project — Invocation sets up how people will be using phrases to trigger our google action.

Hey Dr. Music, can you play some good vibes?

Build actions -> Integrate actions from dialogflow -> go to dialogflow

Setup Actions and Intents — DIALOGFLOW

Step II. Dialogflow

Dialogflow is a Google-owned developer of human–computer interaction technologies based on natural language conversations.

We will be dealing with Intents here —
The Merriam-Webster dictionary gives the meaning as “the state of mind with which an act is done.” Tim Hallbom.

This means what Activity, or Events, or particular sets of message convey to do- Here, in** Welcome intent **— I want them to send request to my Azure function which will respond with a jumbled word.

** Set default welcome intent**

Set up events —
Welcome by Dialogflow, Google Assistant Welcome and Play game.

Sometimes a user can ask a implicit invocation
(instead of saying “Talk to word jumblr” he can say “play a game”)
and google action can automatically invoke word jumblr.

Setting Events which invoke Welcome intent

Now we need to train on what messages/phrases our intent will be same which is Welcome intent.

Here are some training phrases

Action and Parameters simplifies on the backend what intent action invocated our Azure function. If this goes up don’t worry we will be covering it later in Step III.

*Action *

Last step would be turn on fulfilment and Enable webhook, so that whenever this event occurs it sends the request to our azure function URL.

Enable Webhook

We need to do the same for Default Fallback Intent

Set action to unknown.

action of the intent

Next go to Fulfilment and enable webhook.

Dialogflow fulfilment

So we need a URL in webhook and that’s yet to happen.
Hold on to this tab and open a new one with portal.azure.com

Now i know you are like hey ayush, stop this choo choo train and explain why are we setting intents and fulfillments.

Choo-Choo Train

Here we go with another diagram —

Step after Invoking Welcome intent

When someone says, “Talk to word jumblr”, “hi”, “hello” etc.
A request is sent to our App with a sessionID and action of the welcome intent which is ‘input.welcome’

have a look here at dialogflow documentation to know what’s under the hood.

Steps after fallback intent

So what’s fallback and Why do we need it here?
Whenever a user attempts to solve a word, our app needs an intent for that. Now the attempt can be any word, like anything, even “quit” or “bye” or something ambiguous, so this way having no intent and letting it fall into fallback might help us here.

A request is sent to our App with a sessionID and action of the fallback intent which is ‘input.unknown’.

Step III. Preparing Azure Functions.

Hope you opened Azure Portal in new tab coz it’s gonna get schwifty here —

Create a function app
Choose a HTTP trigger function, name it invoke
Create another HTTP trigger function and name it HeyJumblr

But you’ll be like hey What’s Azure function?

Azure Functions is an event driven, compute-on-demand experience that extends the existing Azure application platform with capabilities to implement code triggered by events occurring in virtually.

So what’s going in Function I (invoke)—

function I

Dialogflow invokes our Azure function (function app 1) with the JSON request below —

Dialogflow request JSON

In the first function we just split the whole session string and get it replaced by the just the session id, reduce clutter maybe.
And then we pass the request to our heyjumblr (second az func) with the same session ID.

Notice what the queryResult.action have for us, it’s *“input.welcome”.
*That’s how we will recognise what intent called our function, whether someone said hi, or tried to guess a word.

But why do we need session ID?

Look here in the next function heyjumblr, this does the real work.
His work involves-

Getting a word from Dictionary ( I used “random-word” npm module)
Jumbling the word
Sending the word to dialogflow back

But here remains a more crucial step, when someone attempts to solve the word ( when we get “input.unknown” ) how do we know what word we gave the human to solve?

The solution here is pretty simple, storing the sessionID along with the word in a database so that we can recall which word was here in context.

Let’s have a attempt at that —

function II - heyjumblr

Our main function starts line no. 23 module.exports

In line no. 26 we handle if the request contains action “input.welcome”,so that we now know someone said hi to our app, to handle it we will grab a word which we got in line 27.

function on line no. 14 shuffleword() jumbles the word when passed to it as a parameter.

in line no. 29 We parsed the data exactly like how dialogflow can read it.
We need to pass our word in fulfillment text in json so that Dialogflow can understand the text we send and read it aloud in the speaker.

you can read more about dialogflow fulfillment response here.
Because you can send many responses like cards which looks good on devices with Screen.

so our two steps in azure function is done.

For the third step we need to store the sessionID and Word somewhere.
I chose azure table storage which is more likely to help us as a tabular database —

but we need a connection string to access permissions —
Our friends at Microsoft Docs can help with that.

In line no. 35–50 we stored a JSON object into the Table Storage.

Now let’s handle fallback intent.

in line no.53 we handle if the object has a queryAction which is “input.unknown”
We know what to do now, Check in the table if same sessionID has a word stored with it and compare the word returned by user with our word.

“queryResult.queryText” has the text sent to us by the user.
We compare it with the word we got, just like we did in line no. 54.

If the word is right we send the response,
if the word is wrong we send the response.

Awesome here we are finished with our third step.

Now we need to return back to where we left in Step II and fill the webhook url as the invoke one.

Voila, Now you can test your app in dialogflow or in Action Console.

Points to be noted (Production app),

Please have at How to Design Voice User Interfaces, when building an App like this for production.

Also note cold-start might get in your way as google assistant only waits for 10s to get a response from webhook. Cold start is a term used to describe the phenomenon that applications which haven’t been used a while take longer to start up.

To get around with cold start use Premium Plan or a App Service plan to host Azure function.

Serverless is the most suitable compute systems for these type of projects, which needs just a backend and a task to perform based on an event or an invocation.

Thanks for reading this blog.
Follow me for more awesome blogs.

The pics used in blogs were from Unsplash.
And I would thank editors to refine some words.

I would recommend you to stay hydrated.

qrfn : QR codes and Azure functions

Ayush — Thu, 09 May 2019 22:48:15 +0000

qrfn : QR codes and Azure functions

generateQR codes by just passing a text in Query Parameters.

Photo by Mitya Ivanov on Unsplash

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

Learn how Azure Functionscan 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

QR code.js — Quick Response Codes

RasteriseHTML — Downloadable Image

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.

QChain - QR Enabled Keychain

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).

Moreover when I Built Cliniq ** ,** 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 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

1. Write HTML to Respond with a Template

Requiring Stuff in

QRCode.js — To make QR code
rasterizeHTML — To make a Image out of HTML https://medium.com/media/08638f4f37ed6e9422f9bc72b1ed61d6/href

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.

https://medium.com/media/d1dc26b9d223af040a1570ec8dad6b5e/href

Scripts

QRcode.js https://medium.com/media/2833fa2f9b5d064f32d1ee210b47d2fe/href

This generates a QR Code in the HTML tag.

You can read more about QRCode.js here.

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

1 Step — Create an a Azure function App

2. Use in-portal development

step — 2 Use in-portal Development

3. Create a HTTP trigger/ Webhook / API function

Step 3 — Create a function

4. It’s the showtime.

Step 4 — Write the code.

CODE 😍

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.

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

Learn more about :

https://functions.azure.com/

https://imaginecup.microsoft.com/en-us/Events?id=0

this is the code to QRfn, May the 4th be with you.

https://medium.com/media/d4c80c9c56f3a23d8d290ce9c7fc71b7/href