Forem: Bit Project

Using GitHub Actions to Test Student Code Submissions

Emily Chen — Mon, 11 Jul 2022 02:37:06 +0000

Background

This blog is based on Bit Project's CounselorBot, which you can test out yourself!

We currently have two available courses:

Get started with this video tutorial or this walkthrough page.

Overview

GitHub Actions are often used for automated code operations, usually automatic deployments. However, they also have another handy-dandy use case: checking students' code submissions so you (being lazy) don't have to run them yourself!

In a future tutorial, we'll also talk about how output from GitHub Actions can be automatically commented on students' pull requests to provide feedback on what went wrong.

Outlining Our Plan

All of the workflow files used as examples in this tutorial can be found here.

Each "step" in our curriculum requires a different test. When a student (the user) commits to the repository, we need to...

Figure out which workflow file to run
Figure out which step the student is on

...in order to run the correct test.

Alongside actually running the tests, we will also be using GitHub Actions to determine the answers to these two questions.

Writing the YAML File

name: Getting Started
on:
  push:
    branches:
      - hello

The first section of the YAML file gives the GitHub Action a display name and configures when the action should run. In this case, it'll run when a commit is pushed to the hello branch.

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v2

      - name: Setup Node Environment
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install Dependencies
        run: |
          npm install minimist
          npm install node-fetch

The next section provides other steps to "set up" our environment. We will mainly be using node to test code; npm dependencies can also be installed if they will be used in the tests.

      - name: Get Count
        id: vars
        run: echo ::set-output name=count::$(node ./.bit/scripts/getProgress.js --repo=${{github.event.repository.name}} --owner=${{github.repository_owner}} )

Our first "unique" step in this workflow involves using this script to retrieve the step that the student is currently on. This "count" value is an integer that correlates with steps in our curriculum.

Note: the echo ::set-output name=count:: part sets the output of the file that runs to a local variable named count, which will be accessed later with steps.vars.outputs.count.

Testing Different Types Of Submissions

Now that the environment for our workflow is set up, we can run different test files, which provide feedback on student code. With GitHub Actions, you are essentially just running commands on a terminal. This opens up options from running JavaScript files to testing webpages to calling Azure Functions.

All test examples used in this tutorial can be found in this directory and this directory.

Testing Program Files (JS, Python)

      - name: Step 1
        if: ${{steps.vars.outputs.count == 1 && github.event.head_commit.message != 'Update progress'}}
        run: |
          node .bit/tests/test.1.2.js --repo=${{github.event.repository.name}} --user=${{github.repository_owner}}

This step can be added onto the steps section of the YAML file for workflow configuration. A conditional statement is utilized to only run this test if the "count" value is correct. The command node .bit/tests/test.1.2.js would then execute this test.

try { hello = require('./../../week1/helloworld.js') }

The test first attempts to import the student's code in the repository.

let helloworld = hello()
let test_output = "Hello World"

If successful, it will attempt to execute the imported functions.

await functions.throwError(`Got: '${helloworld}', was expecting: '${test_output}'.`, user, repo)
console.log(`Got: "${helloworld}", was expecting: "${test_output}".`)
process.exit(1)

Note: Source code for the functions.throwError() method can be found here. It includes functions used to provide feedback to students and reduce repetition in tests.

Depending on its success, the test will provide feedback by throwing errors in the workflow.

Testing Webpages with Cypress

Cypress is a powerful testing tool that allows a simulation of a user's actions on a website.

describe('Testing Bunnimage', () => {
    it('Testing Week 4 Step 1', () => {
        cy.visit('bunnimage/index.html')
        cy.get('input[type="text"]').type('console.log("hi yall")')
        cy.get('input[type="button"]').click()
        cy.get('#output').contains('console.log("hi yall")❤️')
    })
})

A simple example of a test as shown here simulates typing console.log("hi yall"), clicking the specified button on the page, and checking to see if the output equals console.log("hi yall")❤️. In the workflow's output, feedback from Cypress is provided.

Testing APIs

Student coded endpoints can also be tested with HTTP requests run in the workflow. The key to this method is asking students to add "repository secrets" that can then be accessed during the workflow as environment variables using the below syntax.

      - name: Step 12
        if: ${{steps.vars.outputs.count == 12 && github.event.head_commit.message != 'Update progress'}}
        env:
          MORSE_ENDPOINT: ${{ secrets.MORSE_ENDPOINT }}
        run: |
          npm install node-fetch
          node .bit/tests/test.1.8.js --repo=${{github.event.repository.name}} --user=${{github.repository_owner}}

This example accesses the student's MORSE_ENDPOINT secret (this can be later accessed in the code with uri = process.env.MORSE_ENDPOINT).

try {
    const resp = await fetch(uri + "&plaintext=ilovebitproject", {
        method: 'GET'
    });
    var data = await resp.text()
    let test = JSON.stringify(data)
    functions.validateResponseStatus(resp, uri)
} catch (e) {
    console.error("We're having trouble making a request to your endpoint. Try again?")
    await functions.throwError("We're having trouble making a request to your endpoint. Try again?", user, repo)
    process.exit(1)
}

First, utilizing the student's endpoint, an HTTP GET request is made to see if the endpoint is alive.

if (data.length < 3) {
    console.error("No response... Try again!")
    await functions.throwError("No response... Try again!", user, repo)
    process.exit(1)
} else if (data == answer) {
    console.info("Yay!🎉 Success - thanks for helping us on this top secret mission. Welcome to the team.")
    console.info(`We got "${answer}" with the input of ilovebitproject`)
} else {
    console.error(`YIKES! We got "${data}" instead of "${answer}". Try again!`)
    await functions.throwError(`YIKES! We got '${data}' instead of '${answer}'. Try again!`, user, repo)
    process.exit(1)
}

If a response is received, the test attempts to determine if the output of the endpoint matches the correct "answer."

As demonstrated in this test shown above, multiple test cases can be at once with feedback returned to the student as output of the workflow.

Conclusion

GitHub Actions are extremely versatile as they allow developers to create their own environment, automating tasks and running scripts. Running on repositories, GitHub Actions can easily be incorporated with other services on GitHub: from bots, to branches, and to pull requests.

This use case demonstrates the power of GitHub Actions beyond automating deployment; extending into the area of learning and education.

Azure Functions, APIs, and the Weather

TheDirector23 — Thu, 01 Apr 2021 22:13:04 +0000

I wanted to create a program that answers the question “What should you do tomorrow?” based on the weather forecast. The goal was to help people come up with creative things to do tomorrow and plan out their day. Often, we fall back on the same activities or, if it's a nice day, find out we're too late to book something. Then we have regrets.

This was one of the first multi-layered coding projects I’d ever tackled, but it’s pretty simple with the right API and Azure Functions. In this tutorial blog, I’ve split the work into three parts: the webpage, the HTTP trigger, and the JavaScript.

What you’ll need:

A Microsoft Azure subscription (you can get one for free for a limited time)
An account at openweather.org (this is totally free for the API we’re using unless you want to upgrade)
Visual Studio Code (and to make things easier, install the Live Server extension – for testing your webpage along the way – the Azure Functions extension, and the Azure App Service extension)

Part #1: The Webpage

This is the easiest part because the webpage is relatively simple. The most important section is creating the div and form elements for the submission form. You need one overall div (I used the id “container”), inside of which is a hidden div (id “hidden-weather”) and a form element (id “zipcode-form”).

<div id="container">

        <div id="hidden-weather" type="hidden"></div>

        <form id="zipcode-form" onsubmit="handle(event)">



        </form>

</div>

Leave the onsubmit part for later – that comes with the JS, which is Part #3.

Inside the form element add two input tags. The first creates the zip code input box, and the second creates the submit button, which activates the whole process, with the HTTP trigger function and the API.

<input type="text" name="zipcode" id="zipcode-input" accept="5" placeholder="Enter zip code">
<input size="100" type="submit" value="Get recommendations!" id="submit-button-style"></input>

The rest of the code in this section formats the webpage. The code below would be placed inside the div with the id "container".

<div id="weather-result">

    <center>
    <h3>Weather Forecast for Tomorrow:</h3>
    </center>

</div>

  <br>
  <br>

<div id="recommendations-result">

    <center>
    <h3>Recommendations:</h3>
    </center>

</div>

Now that we have the user interface complete, let's code the Azure function the user will trigger.

Part #2: Azure Functions

This part can get a little complicated because you’re dealing with a lot of things at the same time. I’m just going to cover the most important parts.

Create a Function App resource – once the resource is deployed, create a new HTTP trigger function. Don’t open the trigger yet, though, because you need to install an npm package in the console. Under Development Tools, open the console and install node-fetch. This makes calling the API a lot simpler.

Go back to your HTTP trigger and open the Code + Test tab. Create a const outside of the async function called fetch.

const fetch = require('node-fetch');

This lets you use the npm package that was installed earlier.

We'll then define three constants: the first deals with the zip code, while the next one calls the API, and the final one formats the forecast data as a JSON file.

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    const zipcode = (req.query.zipcode || (req.body && req.body.zipcode));
    const apiResult = "";
    const jsonResult = await apiResult.json();

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: jsonResult
    };
}

Let's take a look at the apiResult constant a bit more closely because that's the most important one.

In your Open Weather account, go to the free 5 day, 3-hour forecast API documentation page here: https://openweathermap.org/forecast5#zip. Go to the “by ZIP code” section and copy the posted link. This link calls the 5 day, 3-hour forecast API.

api.openweathermap.org/data/2.5/forecast?zip={zip code},{country code}&appid={API key}

Back in the HTTP trigger, let's modify our apiResult using this information, with await fetch () and the URL you just copied.

const apiResult = await fetch ("https://api.openweathermap.org/data/2.5/forecast?zip={zip code}");

Then, let's make sure it's actually going to use the zip code entered when calling the API, by replacing the placeholder {zip code} with our variable zipcode:

const apiResult = await fetch ("https://api.openweathermap.org/data/2.5/forecast?zip=" + zipcode);

Next, let's add a few parameters to limit the hours to a full day (i.e. cnt(or "count") as 8, for 8 3-hour segments) and use imperial units (instead of scientific ones, like Kelvin).

const apiResult = await fetch ("https://api.openweathermap.org/data/2.5/forecast?zip=" + zipcode + "&cnt=8&units=imperial");

Finally, insert your Open Weather API key at the end, by tacking on &appid=, followed by your API key.

Part #3: The JavaScript

I’m not going to explain all of the JS either, but I am going to describe how to access certain information and call the trigger function.

async function handle(event) {
  event.preventDefault();

  var zipcode = document.getElementById("zipcode-input").value;
  console.log(zipcode);
  const resp = await fetch(
    "https://weatherapifunction.azurewebsites.net/api/WeatherAPI?zipcode=" +
      zipcode,
    {
      method: "POST",
    }
  );

  var data = await resp.json();
  console.log(data);

  const weatherForecastForTommorowNoon = data.list[6];
  const weatherForecastCity = data.city;

var output;

// Abbreviated algorithm
if(weatherForecastForTommorowNoon.pop >= .01){
  output = "string of rainy day activities";
} else if((weatherForecastForTommorowNoon.pop >= .01) && (weatherForecastForTommorowNoon.weather[0].description == "snow")){
  output = "string of snowy day activities";
}

  var weatherRegular = `
      <!Forecast data from API>
            `;

  var recommendations = `
      <p>${output}</p>

  `;

  $("#weather-result").html(weatherRegular);
  $("#recommendations-result").html(recommendations);
}

The most important section of the code above is the resp constant. It calls the Azure trigger function using the trigger’s URL and sends the zip code entered on the website to the trigger function (by accessing the form element “zipcode-input” created earlier using document.getElementById).

async function handle(event) {
  event.preventDefault();

  var zipcode = document.getElementById("zipcode-input").value;
  console.log(zipcode);
  const resp = await fetch(
    "https://weatherapifunction.azurewebsites.net/api/WeatherAPI?zipcode=" +
      zipcode,
    {
      method: "POST",
    }
);

Now, the entered zip code is run through the trigger function and used when the API is called. It uses POST rather than GET method, as the zip code is being sent to the Azure trigger function.

Notice console.log(data) – now that the data is logged in the console, we can access it using the next two constants. Const weatherForecastForTomorrowNoon accesses tomorrow's three-hour forecast data from 1 pm to 4 pm. The next constant accesses the city outputted in the console – it was only used in displaying the general forecast on the website, not in generating activity recommendations.

console.log(data);

const weatherForecastForTommorowNoon = data.list[6];
const weatherForecastCity = data.city;

Next comes the algorithm – basically, create a list of activities, and then match weather to those activities (you need snow for sledding and skiing, sun and wind for sailing and flying a kite). Create if/else statements for these conditions and activities – if weatherForecastForTomorrowNoon.{enterWeatherConditionHere} is <, >, or = a certain temperature or measurement, make the variable output equal a string with the activities that are recommended based on the weather conditions.

// Abbreviated algorithm
if(weatherForecastForTommorowNoon.pop >= .01){
  output = "string of rainy day activities";
} else if((weatherForecastForTommorowNoon.pop >= .01) && (weatherForecastForTommorowNoon.weather[0].description == "snow")){
  output = "string of snowy day activities";
}

After you have created all of these conditions (based on humidity, temperature, wind speed, and precipitation) create four solely weather-based if/else statements that cover all temperatures possible (but no other weather conditions). There may be a day without wind or precipitation, but there will always be temperature.

else if(weatherForecastForTommorowNoon.main.temp <= 30){
  output = "string of cold activities";
} else if((weatherForecastForTommorowNoon.main.temp >= 31 && weatherForecastForTommorowNoon.main.feels_like <= 60) && weatherForecastForTommorowNoon.pop == 0){
  output = "string of chilly day activities";
}

//Add more conditionals to the end

Now there are no holes in the algorithm. Add these temperature-based statements to the end of your conditionals so that the forecast data is run through these last (because these are the most general statements, and conditionals should always be ordered with the most specific statement first and the most general statement last).

Final Result

Your project should now look something like this: https://github.com/TheDirector23/come-rain-or-shine

Of course, you can always add improvements! The recommendations could be customized based on user inputs (location, personality questions, preferred activities). The recommendations could also be linked to local businesses based on the entered zip code as well (a local marina might be linked to a recommendation to go sailing). Other locations and recommendations could be offered if the conditions aren't great.

That's about it! Hopefully now you're ahead of the weather when it comes to planning for tomorrow.

Serverless Bit Camp

Anita Padman — Sun, 21 Mar 2021 19:13:23 +0000

The first thing students entering the tech industry usually hear is the importance of building side projects and maintaining a portfolio. University and technical boot camp curriculums often provide step-by-step rubrics for coding projects, but when it comes time to start a project from scratch many students are not exactly sure what tools to use or where to start. That's where Bit Project comes in!

Bit Project’s Introduction to Serverless Bit Camp, cohosted by Microsoft, serves as exciting introduction to the world of Serverless Architecture, Azure Functions, JavaScript, and API documentation.

What’s Serverless?

Serverless Architecture provides a way to build and run applications without having to worry about how to manage infrastructure. It gives developers a chance to focus more on building an awesome product and less on managing the server it will run on. Serverless Architecture with Azure functions connect to other exciting and rapidly growing tech fields like building APIs, microservices, integrating systems, or working with IoT (Internet-of-things).

So, how does the 8-week Bit Camp work?

Week 1-3: The first 3 weeks of the course closely follows an open-source GitHub learning lab tutorial where students learn everything from setting up a development environment on VS Code and Azure to creating a function application that they will eventually deploy as their very own static web app from end to end.

We understand that it is not always easy learning new technologies without a little guidance from others! The Serverless Instructors are comprised of students who have successfully mastered the course from past iterations of the camp, and they hold office hours every week to help students understand the course work and navigate any bugs. Additionally, each week of the camp there are live lecture livestreams on Twitch hosted by Chloe Condon, a cloud advocate at Microsoft!

Week 4-8: The last 5 weeks of the camp are more of a free for all where students are paired with an industry mentor with whom they can create their own Serverless application and apply the knowledge of Node, CSS, HTML, JS, and external APIs concepts they were introduced to in the learning labs. The 1:1 student mentorship opportunity offered by this Bit Camp provides students the unique opportunity to work with a seasoned engineer to bounce ideas, debug any issues, and learn more about services provided by Azure! Mentor-mentee meetings are generally super casual and serve as a great networking opportunity for both parties who become super invested in making sure each student’s passion project comes to life.

The best part about Serverless is the versatility to create projects that truly cater to whatever interest you want to pursue… whether that’s finding new Spotify recommendations or keeping track of Earthquake warnings. Don’t believe me? Check out the super cool projects from past iterations of this camp!
https://dev.to/azure/get-inspired-by-these-bitcamp-final-projects-by-high-school-students-5c30

Next Steps

The next Serverless Bit Camp is set to start this upcoming June! The open-source curriculum is open to anyone, but if you are interested in a mentorship opportunity be sure to apply by {deadline here}.

Twilio Camp

Simk-ops — Sun, 21 Mar 2021 19:05:26 +0000

Our "Intro to Javascript" Bit Camp was launched in December 2020, in partnership with Twilio. Through this camp, we hope to create more open-source education over the world. Javascript is a broad language and we aim to help students take their first step in the world of web development and programming.

Bit Camps are open-source hands-on learning experiences where students get exposure to rising technologies and industry culture through our carefully catered programs and one-on-one mentorships. Bit Project aims to give students the power to light their creativity and pave their future paths.

In this program, students learn through a miniature game called "TwilioQuest" which teaches them about Javascript in a fun and simple manner. Students have weekly live stream sessions which are led by instructors and sometimes Margaret Staples, who is a Developer at TwilioQuest. We help students develop their thinking process through various review sessions, live coding demonstrations, and home reviews every week.

"Margaret is very knowledgeable and inspiring. She helps explain different topics and gives the students a different perspective." - Instructor at BitCamp

Students are also given the opportunity to actively interact with their assigned Twilio mentors starting around week 3.

Towards the end of the program, students work on a clock project using Javascript, HTML, and CSS. They get to explore different functions to make their projects customizable and unique. Initially, students have very limited exposure to programming but by the end of this program, they get inspired to explore more about Javascript.

In the future, our goal is to have a wide variety of projects and expand our curriculum to better cater to students to want to go deeper into Javascript and web development languages.

Face Mask Detection

Kim Do — Sat, 20 Mar 2021 19:08:11 +0000

Face Mask Detection

Upload an image or video to detect whether you or someone else is wearing a face mask!

Description

The Face Mask Detection where it uses facial and object recognition to accurately distinguish those with or without masks. The user would upload an image and the program would analyze it and output whether or not they're wearing a mask. This project is needed to prevent higher risk of spreading the coronavirus and to enforce those who don't follow proper guidelines to wear a mask.

Creator

Hello! My name is Kim, a sophomore studying Computer Science at the University of Southern California. I have many interests but currently, I want to explore more in the field of robotics, artificial intelligence, and front-end development. Outside of coding, I love to do digital design, gaming, hanging out with friends, and streaming on twitch! I also have a personal website here if you would like to know more about me.

Why I Created this Project

I created this project because I wanted to address the problem with people not following the guidelines for wearing face-masks during a global pandemic. It saddens me to see those not putting on masks when needed in public because it causes a higher risk of spreading the virus even more. Thus, I created this project to encourage and enforce people to wear one.

Another reason why I created this project is because like most college students, we want to be able to attend in-person classes as soon as possible and the only way we can go back to our college campuses is for the number of COVID cases to die down. Therefore, I felt that like a project like this can simulate technology that can benefit those who are trying to prevent the virus from spreading as much as possible.

Project Features

Python: A programming language that can be used, for example, back-end and software development.
Microsoft Azure Functions: Helps you launch serverless applications.
Face and Object Recognition/Detection
- Artificial Intelligence
- Machine Learning
- Deep Learning
Google Collaborate
Front-End-Development
- HTML
- CSS
- Javascript
- JQuery
- Bootstrap
OpenCV: A library of programming functions mainly aimed at real-time computer vision.
Tensorflow API: A free and open-source software library for machine learning.
- Keras: An open-source software library that provides a Python interface for artificial neural networks.

Diagram of Project

Facial and Object Recognition

We need to create the code for the program that reads an image pixel by pixel and uses facial and object recognition to output a frame and percentage on the face in order to detect whether or not the person is wearing a face mask.

I did this part of the project in an environment called google colaboratory. It's a colab, similiar to Jupyter Notebook that allows anyone to write and execute python code through the browser, and is especially well suited to machine learning, data analysis and much more. I also created a repository in github entirely for my code so I can clone it every time I enter back to my colab file.

First, we have to import many different libraries in order for this to work and the ones we need are shown below.

import cv2
import os
from tensorflow.keras.preprocessing.image import img_to_array
from tensorflow.keras.models import load_model
from tensorflow.keras.applications.mobilenet_v2 import preprocess_input
import numpy as np
from google.colab.patches import cv2_imshow

We're using a very basic and simple face detector called the Haar Cascade due to my first time playing around with face detection.The Haar Cascade algorithm is a machine learning object detection algorithm which is used to identify objects in an image or video. Instead of creating and training the model from scratch, we use the “haarcascade_frontalface_alt2.xml” to detect faces. It's one of the oldest face detector file applications and it detects the face in a matter of few seconds using machine learning. It's not the best in accuracy but it's one of the fastest. Once the face is detected, then we will use this model file from Keras Tensorflow called mask_recog.h5 to detect masks.

faceCascade = cv2.CascadeClassifier("haarcascade_frontalface_alt2.xml")
model = load_model("mask_recog.h5")

Once we have everything set up, we start the code. First, we need to convert the file into a grayscale image or video and then use our Haar Cascade to detect the face in the image. Note, my code can currently only detect one face at a time. It will output an error if there is more than one face or more than one output (ex. detects one person wearing a mask and one not wearing a mask). Once the images and faces are identified, you send it out to the mask detector application. We basically pre-processed the image in order to meet the requirements for Haar Cascade application. Now, we send that image to a predictor file through the model_recog.h5 OpenCV file and the rest of the code is basically it creating a frame around the face of the person and outputting a percentage as well. A person wearing a mask will be labeled with a rectangular green frame with a high percentage (most likely between 95%-100%) and a person not wearing a mask will be labeled with a rectangular red frame with a low percentage (< 90%).

#converting the file into a grayscale image or video
def face_mask_detector(frame):
  frame = cv2.imread(fileName) #google colab library that will be later commented out
  gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
  faces = faceCascade.detectMultiScale(gray,
                                        scaleFactor=1.1,
                                        minNeighbors=5,
                                        minSize=(60, 60),
                                        flags=cv2.CASCADE_SCALE_IMAGE)
  faces_list=[]
  preds=[]

  #mask-detector function
  #creation and design of the frame output
  for (x, y, w, h) in faces:
      face_frame = frame[y:y+h,x:x+w]
      face_frame = cv2.cvtColor(face_frame, cv2.COLOR_BGR2RGB)
      face_frame = cv2.resize(face_frame, (224, 224))
      face_frame = img_to_array(face_frame)
      face_frame = np.expand_dims(face_frame, axis=0)
      face_frame =  preprocess_input(face_frame)
      faces_list.append(face_frame)
      if len(faces_list)>0:
          preds = model.predict(faces_list)
      for pred in preds:
          (mask, withoutMask) = pred
      label = "Mask" if mask > withoutMask else "No Mask"
      color = (0, 255, 0) if label == "Mask" else (0, 0, 255)
      label = "{}: {:.2f}%".format(label, max(mask, withoutMask) * 100)
      cv2.putText(frame, label, (x, y- 10),
                  cv2.FONT_HERSHEY_SIMPLEX, 1, color, 2)

      cv2.rectangle(frame, (x, y), (x + w, y + h),color, 3)
      cv2_imshow(frame) #google colab library that will be later commented out
  return frame

Finally, we just give the program what file we want it to read and we do that by inputting it and then showing it on google colab through the imshow library. The image output function code is very simple but the video output function is more because it needs to detect each frame and gives us a file output (due to google colab not having a live server to allow us to watch a video). Thus, there would be a generated output file for the video. Thus, our working code is created and now we need to connect it to our front-end for others to use it.

#image output
input_image = cv2.imread("image.jpg")
output = face_mask_detector(input_image)
cv2_imshow(output)

#video output
cap = cv2.VideoCapture('video13.mp4')
ret, frame = cap.read()
frame_height, frame_width, _ = frame.shape
out = cv2.VideoWriter('output.avi',cv2.VideoWriter_fourcc('M','J','P','G'), 10, (frame_width,frame_height))
print("Processing Video...")
while cap.isOpened():
  ret, frame = cap.read()
  if not ret:
    out.release()
    break
  output = face_mask_detector(frame)
  out.write(output)
out.release()
print("Done processing video")

Front-End Development

Due to time contraints, I was inspired by a particular design and used a template and modified it to my own in order to make my website application. Below is the homepage of my website. I used HTML, CSS, Javascript, JQuery, and Bootstrap to create and modify my website.

Layout of Website

Homepage: Main page that demonstrates my title, logo, navigation bar, and an iconic carousel for important reminders and relevant information.
Demo Page: To demonstrate the easy and simple steps of how to upload an image or video to create an output.
Upload Page: The area where the user will upload their image and video and the output will display back with a frame and percentage that shows if the person is wearing a mask or not.
About Page: The project description, information, and future discussion are posted there.
Gallery Page: A carousel containing lots of images that I tested out to show some samples of what similar results could be produced.

Static Web App

We had to use static web app in order to deploy our website.

Here is a link to my website: https://gentle-meadow-05bb21c1e.azurestaticapps.net/

Back-End Development

Uploading File

We would need to create two buttons to wear we can pick or upload our chosen image or video file and then creating a submit button in order to send the data to our HTTP trigger. Once it does that, it goes through the face mask detection functions that we created and await for our JSON response to bring back the image or video with whether or not the person is wearing a mask.

Azure Function App

Now we need to create a Microsoft Azure function to call the API, face detector function, and front-end image in order to read the uploaded file from the user. First, I went on my portal and created a entirely new function. Below are the settings I used but they can vary for others.

Then, after creating the function, I went on Visual Studios and installed the necessary extensions (such as Azure Functions) and uploaded the files I wanted to put in my function. Then I deployed it from VS code to the portal and thus, it successfully connected. There were definetely errors in terms of installing the correct libraries and such but I was able to fix most of it. After it was done connecting, I used Postman to test it out as well and it worked! Now, it became the matter of trying to figure out how connect it to my front-end as well.

Results

The results should be similiar to what you see below. The image on the left presents a person not wearing a mask while the person on the right presents a person wearing a mask.

Demo

Future Plans

I plan to have many improvements and suggestions to my project.

In the future, I want to integrate this into a webcam where it’s able to detect LIVE and in real-time of whether or not the person is wearing a mask or not.
- However, this might not require Azure Functions so it would stray a different path.
I want to use a different algorithm where it's able to more accurately detect faces because sometimes, when someone uploads an image, it doesn't always work and only seems to be working for really high-quality images which is not feasible for real-life images.
I also want to implement an algorithm to where it can detect more than one face instead of only one.

Special Thanks

I want to thank so many people who supported my journey throughout BitCamp. I first want to thank you Ankit, my personal mentor who fought through and through with me in trying to fix errors and help me understand so many concepts. I learned so much from him and really want to say that he's an amazing mentor. 11/10! I also want to thank you Julia, Emily, and Evelyn for being awesome and kind instructors who kept me organized and supported us so much. Thank you for all the communication and flexibility you gave us! Finally, I want to thank you Chloe, Daniel, and Shreya for providing and teaching us with very well-explained and professional lectures to those who had no clue about Microsoft Azures in the beginning. I was very grateful for every one of you and for this great opportunity! It was a fun experience that I recommend to those who want to learn more about Serverless Microsoft Azure.

Serverless Music Player

Rishik Hombal — Sat, 20 Mar 2021 18:58:37 +0000

GitHub Repository

Check out my website!

Abstract

This project is a music player built in React using Typescript and SASS. The application features a library allowing
users to select which song they would like to play and also includes play, pause, skip, and seek functionality.
Additionally, the app is mobile friendly and is capable of resizing and restructuring to have a pleasant user experience
on devices with a smaller form factor. One of the main reasons I made the project is to have a single place where I can
listen to music - particularly open access music. There are many times when I hear a song in a YouTube intro or outro,
and it is very inconvenient for me to listen to that song. Sometimes these songs aren't available on Spotify, so I have
to hunt for a Soundcloud profile, or some other service that I can use to listen to this song, and then every time I
want to listen to this song, I will need to return to this service. This application removes that need. Instead of going
to many different services, users can stay in this application and stream all of their open access music. This allows
for a much more convenient listening experience for an end user, and hopefully, this will lead to them listening to
smaller artists who are not on big music streaming services such as Spotify or Apple Music.

My setup and I

A React Music Player to listen to and discover small artists creating open access music

Hello everyone! My name is Rishik, and I'll walk you through the steps on how to replicate my application for the
Bitproject Serverless Camp. The main purpose of this project is to help users have a more cohesive experience when
finding and listening to music from smaller artists. Instead of visiting many different sites in order to find a certain
song to listen to, users can stay on this one site and listen to all the music they want.

In this tutorial, we will focus on writing the display code first, then styling, finally we will look at how to provide
data using an Azure Function. Before we start, here are some technologies you should be familiar with:

Javascript
Typescript
React
CSS
SASS

To begin, we will create a React application using a Typescript template. You can use your preferred way of doing this,
but I will use
npx create-react-app app-name --template typescript. To prevent any errors, make sure that your application name is in
all lowercase and any words are separated by dashes. Next, to add SASS to our application, we will use the
command npm install node-sass.

Now we will start building the application. First for organization, we are going to create two folders inside our src
directory. Call these folders components and styles. The create-react-app template gives us some starter files and
code. Most of this we will not need. In fact, keep only the App.tsx, index.tsx, react-app-env.d.ts, and App.css files.
In the App.tsx file, delete all the code within the function, and rename the App.css file to App.scss and move it
to your styles folder.

Next, within your components folder, create five .tsx
files: Library.tsx, LibrarySong.tsx, Nav.tsx, Player.tsx, and Song.tsx and import React from 'react' at the top of
each. Create corresponding scss files for each of those except LibrarySong.tsx Now, going back to the App.tsx file,
we are ready to start writing some code. First, we will need to write some utility functions to perform some actions
within our application. First, we are going to write code to update the current time of our song. To do that, we're
going to create a time update handler function like so:

const timeUpdateHandler = (event: any) => {
    const currentTime = event.target.currentTime;
    const duration = event.target.duration;

    const roundedCurrentTime = Math.round(currentTime);
    const roundedDuration = Math.round(duration);
    const animationPercent = Math.round((roundedCurrentTime / roundedDuration) * 100);
};

This function takes in the event that is fired whenever a song's current time changes and then it does some math to
output the current time in the song. It also determines how much of the progress bar should be filled at a given time.
You may notice that despite this function doing a lot of computation, the results of this computation are not used
anywhere. To use these results, we will add the current song info to the state. To do this, we must first
import useState from react, then we have to create a Type for this state so that we keep with Typescript's concept of
strongly typing all parts of our application that we can. Create a types.ts file somewhere within the src directory to
hold all the types we will use for this application. For this particular part of state, we will create a type called
SongInfo.

export type SongInfo = {
    currentTime: number;
    duration: number;
    animationPercent: number;
}

This creates a type with three properties. The current time, duration, and the percent that the progress bar should be
filled. We can now go back to the App.tsx file and import this type.

Now, using the useState hook in React, we will create a state hook storing the song info.

const [songInfo, setSongInfo] = useState<SongInfo>({
    currentTime: 0,
    duration: 0,
    animationPercent: 0
});

As you may recall, useState has two parts. A getter to return the current value of the state, and a mutator to change
the state. Here, songInfo is our getter, and setSongInfo is our mutator. We must also include an initial value for
the state. Now going back to the handler we wrote, we can add the values to the state.

setSongInfo({ ...songInfo, currentTime, duration, animationPercent });

Now, lets add some more types and parts of state to set us up for building the rest of the application. Going back to
the types.ts file, we can add a new type.

export interface SongModel {
    name: string;
    cover: string;
    artist: string;
    audio: string;
    color: string[];
    id: string;
    active: boolean;
}

This allows us to store the information for each song we send to our application. Going back to the App.tsx file, lets
add some more state We need to add some parts of state to check if our library bar is open, to store our songs, to
determine what our current song is, and to determine whether a song is playing. We will do this in a similar way to our
last piece of state.

const [isLibraryOpen, setIsLibraryOpen] = useState(false);
const [songs, setSongs] = useState<SongModel[]>([{
    color: [],
    id: "",
    active: false,
    artist: "",
    audio: "",
    cover: "",
    name: ""
}]);
const [currentSong, setCurrentSong] = useState<SongModel>(songs[0]);
const [isPlaying, setIsPlaying] = useState(false);

Now let's add another handler to skip to the next song when the current one ends.

const songEndHandler = async () => {
    let currIndex = songs.findIndex(song => song.id === currentSong.id);
    await setCurrentSong(songs[(currIndex + 1) % songs.length]);
    if (isPlaying)
        await audioRef.current.play();
};

This async handler determines which song has just ended, and then goes to the next song. If the previous song was
playing, this next song will also play when it is loaded.

Now, we can start building our components. Go to the nav.tsx file. Our navbar will bre responsible for display and for
opening and closing our library of music. to create this element, we will use a React functional component. First, we
will need to determine what information this component needs. We do not want to give it too much access to our
application as this leads to inefficiency, but it also must be able to fulfill its purpose. Recall that we created a
part of state to track our library. Our nav component will need access to that part of state, so we will pass that in
props. To do this, we first need to create a type to inform typescript about what parameters our function will take.
Going back to our types.ts file, we will create a new type.

export type NavProps = {
    isLibraryOpen: boolean,
    setLibraryOpen: (open: boolean) => void
}

This is a type with two parameters, the first is a normal boolean, the second indicates that it is a method which takes
in a boolean input, and returns void

Back in our Nav.tsx file, we can now create this component.

const Nav = ({ isLibraryOpen, setLibraryOpen }: NavProps) => {
    return (

    )
}

This creates our functional component which can return some babel style tsx code.

Inside the return, we will put what content we want in the navbar. In our case, a name, and a button to open and close
the library.

<nav>
    <h1>Rishik Music Player</h1>
    <button onClick={() => setLibraryOpen(!isLibraryOpen)}>
        Library
    </button>
</nav>

The button toggles the boolean in the state to open and close the library. Finally, we export default Nav at the end
of the file so we can use this component in other places.

In the App.tsx file, we can now add this component.

Just like we did in our nav component, we will also have a return here. In our return, we will create a div to store our
components, and then we will add our Nav component.

return (
    <div>
        <Nav isLibraryOpen={isLibraryOpen} setLibraryOpen={setIsLibraryOpen}/>
    </div>
)

While we're here, lets also add our audio into the application. Inside this div, lets create an audio tag which will
implement the handlers we created for it.

<audio onTimeUpdate={timeUpdateHandler} onLoadedMetadata={timeUpdateHandler}
       onEnded={songEndHandler} src={currentSong.audio}/>

We will also need to use reference this audio in order to use it within our application. To do this, we will use
the useRef hook within react.

const audioRef = useRef<HTMLAudioElement>(null!);

To link this with the audio tag, we will add a html attribute ref={audioRef} on the audio tag.

We will do the Song similarly to the Nav component. We will determine what data it needs to take in, we will create a
type for those props, then we will create and export the component. For the song, all it needs to know is which song is
currently playing, so it can display the information.

We create the type for the props

export type SongProps = {
    currSong: SongModel
}

Then create the component

const Song = ({ currSong }: SongProps) => {
    return (
        <div className={"song-container"}>
            <img src={currSong.cover} alt={"album cover"}/>
            <h2>{currSong.name}</h2>
            <h3>{currSong.artist}</h3>
        </div>
    );
};

For the LibrarySong, we will need to add some more logic to set the current song when we select it in the library. We
will create another method to use the state mutator. Setting the current song is something we will do quite often, so we
can create a file with reusable methods.

Create a file called util.ts and let's create a function to set an active song. To do this, we will need to get the
selected song and set it to be active, and get all other songs and make sure they are inactive to ensure that we do not
have concurrent audio streams. Finally, we will update the songs state with this new information.

export function setCurrentSongActive(song: SongModel, songs: SongModel[], setSongs: Function): void {
    const newSongs = songs.map(s => {
        if (s.id === song.id) {
            return {
                ...s,
                active: true,
            };
        } else {
            return {
                ...s,
                active: false
            };
        }
    });
    setSongs(newSongs);
}

We can now use this to select a song from the library.

const songSelectHandler = async () => {
    await setCurrentSong(song);

    setCurrentSongActive(song, songs, setSongs);
    if (isPlaying) {
        await audioRef.play();
    }
}

This async handler will set the current song part of the state, and then it will set the selected song as active and
play it if the previous song was also playing.

Now we can create the type and component

export type LibrarySongProps = {
    song: SongModel,
    songs: SongModel[],
    setCurrentSong: (song: SongModel) => void,
    audioRef: HTMLAudioElement,
    isPlaying: boolean,
    setSongs: (songs: SongModel[]) => void
}

return (
    <div onClick={songSelectHandler}>
        <img src={song.cover} alt={"album cover"}/>
        <div className={"song-description"}>
            <h3>{song.name}</h3>
            <h4>{song.artist}</h4>
        </div>
    </div>
);

Now, when we click on a song in our library, it will become selected and active. Now, lets create the library. The
library will need to display all the Library songs which we will map. We will have the props type and the component.

export type LibraryProps = {
    songs: SongModel[],
    setCurrentSong: (song: SongModel) => void,
    audioRef: HTMLAudioElement,
    isPlaying: boolean,
    setSongs: (songs: SongModel[]) => void,
    isLibraryOpen: boolean,
}

const Library = ({ songs, setCurrentSong, audioRef, isPlaying, setSongs, isLibraryOpen }: LibraryProps) => {
    return (
        <div>
            <h2>Library</h2>
            <div>
                {songs.map(song => <LibrarySong song={song} setCurrentSong={setCurrentSong} songs={songs} key={song.id}
                                                audioRef={audioRef} isPlaying={isPlaying} setSongs={setSongs}/>)}
            </div>
        </div>
    );
};

Our final component is the player. The player will have the most logic of all our components. First we need to set a
song as active from the library if we select it in the player using our next or previous buttons.

const activeLibraryHandler = (nextPrev: SongModel) => {
    const newSongs = songs.map(s => {
        if (s.id === nextPrev.id) {
            return {
                ...s,
                active: true,
            };
        } else {
            return {
                ...s,
                active: false
            };
        }
    });
    setSongs(newSongs);
};

Now we need a handler to play a song. With our isPlaying state, this is relatively easy.

const playSongHandler = () => {
    if (isPlaying) {
        audioRef.pause();
        setIsPlaying(!isPlaying);
    } else {
        setIsPlaying(!isPlaying);
        audioRef.play();
    }
};

Next we need to skip. We can combine forwards and backwards into one function using a switch statement. We will also
need to handle wrapping when we reach the end or beginning of our library. To do this, we can use our currentSong state
along with our activeLibraryHandler we created earlier.

const skipTrackHandler = async (skipDirection: string) => {
    let currIndex = songs.findIndex(song => song.id === currSong.id);
    switch (skipDirection) {
        case 'skip-back':
            if (currIndex === 0) {
                await setCurrentSong(songs[songs.length - 1]);
                activeLibraryHandler(songs[songs.length - 1]);
                break;
            }
            await setCurrentSong(songs[--currIndex]);
            activeLibraryHandler(songs[--currIndex]);
            break;
        default:
            await setCurrentSong(songs[(currIndex + 1) % songs.length]);
            activeLibraryHandler(songs[(currIndex + 1) % songs.length]);
            break;
    }
    if (isPlaying)
        await audioRef.play();
};

Finally, we must handle the seeking feature. To start, we need to handle the dragging on the progress bar.

const dragHandler = (event: any) => {
    audioRef.currentTime = event.target.value;
    setSongInfo({ ...songInfo, currentTime: event.target.value });
};

Then, we need to format the time for display

const getTime = (time: number): string => {
    return (
        Math.floor(time / 60) + ":" + ("0" + Math.floor(time % 60)).slice(-2)
    );
};

This takes the time of the song and formats it in the format mm:ss

Finally, we need to fill the progress bar depending on how time has elapsed in the song.

const trackAnimation = {
    transform: `translateX(${songInfo.animationPercent}%)`
};

Now we can return the jsx code to display our player controls.

return (
    <div className={"player"}>
        <div className={"time-control"}>
            <p>{getTime(songInfo.currentTime)}</p>
            <div className={"track"}
                 style={{ background: `linear-gradient(to right, ${currSong.color[0]}, ${currSong.color[1]}` }}>
                <input min={0} max={songInfo.duration || 0} value={songInfo.currentTime} type={"range"}
                       onChange={dragHandler}/>
                <div className={"animate-track"} style={trackAnimation}/>
            </div>
            <p>{songInfo.duration ? getTime(songInfo.duration) : "0:00"}</p>
        </div>
        <div className={"play-control"}>
            <FontAwesomeIcon icon={faAngleLeft} className={"back"} size={"2x"}
                             onClick={() => skipTrackHandler('skip-back')}/>
            <FontAwesomeIcon icon={isPlaying ? faPause : faPlay} className={"play"} size={"2x"}
                             onClick={playSongHandler}/>
            <FontAwesomeIcon icon={faAngleRight} className={"forward"} size={"2x"}
                             onClick={() => skipTrackHandler('skip-forward')}/>
        </div>
    </div>
);

This logic displays the progress bar, the play/pause button depending on whether the song is currently playing, and the
skip buttons. These icons are from the FontAwesome npm package.

Now we can finally put this all together and start the styling. In our App.tsx file, we can add our final components
and pass in their props.

return (
    <div>
        <Nav isLibraryOpen={isLibraryOpen} setLibraryOpen={setIsLibraryOpen}/>
        <Song currSong={currentSong}/>
        <Player isPlaying={isPlaying} setIsPlaying={setIsPlaying} currSong={currentSong} audioRef={audioRef.current}
                songInfo={songInfo} setSongInfo={setSongInfo} songs={songs} setCurrentSong={setCurrentSong}
                setSongs={setSongs}/>
        <Library songs={songs} setCurrentSong={setCurrentSong} audioRef={audioRef.current} isPlaying={isPlaying}
                 setSongs={setSongs} isLibraryOpen={isLibraryOpen}/>
        <audio onTimeUpdate={timeUpdateHandler} ref={audioRef} onLoadedMetadata={timeUpdateHandler}
               onEnded={songEndHandler} src={currentSong.audio}/>
    </div>
);

Styling

Now we can start styling our components.

Let's start by styling the main App.tsx file with our App.scss file. In our App.tsx file, we need to add classes
to our wrapping div to add in transitions and to change our main layout if the library is open. In the div, we add the
attribute
className={`App ${isLibraryOpen ? 'library-active' : ""}`} and in the app.scss file, we will add some styling
for these classes.

.App {
  transition: all 0.5s ease;
}

.library-active {
  margin-left: 30%;
}

And now, we can add styling for some general types in our entire project.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3 {
  color: rgb(54, 54, 54);
}

body {
  font-family: "Amatic SC", cursive;
}

h3, h4 {
  font-weight: 400;
  color: rgb(100, 100, 100);
}

@import "./song";
@import "./player";
@import "./library";
@import "./nav";

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');

The final line of code allows for this project to import a non-standard font from Google Fonts. The other import
statements allow for us to pass our global styling into the other stylesheets.

Let's style library next. Similarly to the previous file, we will need to add classed depending on whether the library
is open or not. We do this with the attribute className={`library ${isLibraryOpen ? 'active-library': ""}`} on the
wrapping div. Now in our library.scss file,

.library {
  position: fixed;
  top: 0;
  left: 0;
  width: 20rem;
  height: 100%;
  background: white;
  box-shadow: 2px 2px 50px #a2a2a2;
  overflow: scroll;
  transform: translateX(-100%);
  transition: all 0.5s ease;
  opacity: 0;

  h2 {
    padding: 2rem;
  }
}

.library-song {
  display: flex;
  align-items: center;
  padding: 1rem 2rem 1rem 2rem;
  cursor: pointer;
  transition: background 0.5s ease;

  img {
    width: 30%;
  }

  &:hover {
    background: gainsboro;
  }
}

.song-description {
  padding-left: 1rem;

  h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1rem;
  }
}

.selected {
  background: #aeadad;
}

.active-library {
  transform: translateX(0%);
  opacity: 1;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}

*::-webkit-scrollbar {
  width: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

@media screen and (max-width: 768px) {
  .library {
    width: 100%;
  }
}

This stylesheet styles the library component and the scrollbar for both Chromium and Mozilla browsers. Additionally, on
mobile devices, the library's size is rescaled.

Next we style our navbar,

nav {
  min-height: 10vh;
  display: flex;
  justify-content: space-around;
  align-items: center;

  button {
    background: transparent;
    cursor: pointer;
    border: 2px solid rgb(65, 65, 65);
    padding: 0.5rem;
    transition: all 0.3s ease;

    &:hover {
      background: rgb(65, 65, 65);
      color: white;
    }
  }
}


@media screen and (max-width: 768px) {
  nav {
    button {
      z-index: 10;
    }
  }
}

This styles the navbar and rescales the UI on mobile devices.

Similarly, we need to style the player:

.player {
  min-height: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.time-control {
  width: 50%;
  display: flex;

  input {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    cursor: pointer;
  }

  p {
    padding: 1rem;
  }
}

.play-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  width: 30%;

  svg {
    cursor: pointer;
  }
}

p {
  font-size: 1.5rem;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  background: black;
}

input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  height: 16px;
  width: 16px;
  background: transparent;
  border: transparent;
}

.track {
  background: lightblue;
  width: 100%;
  height: 1rem;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.animate-track {
  background: rgb(204, 204, 204);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0%);
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .time-control {
    width: 90%;
  }

  .play-control {
    width: 70%;
  }
}

This styles the progress bar on both Chromium and Mozilla browsers.

Finally, we need to style the song component,

.song-container {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  img {
    width: 20%;
    border-radius: 50%;
  }

  h2 {
    padding: 3rem 1rem 1rem 1rem;
    font-size: 3rem;
  }

  h3 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 768px) {
  .song-container {
    img {
      width: 60%;
    }
  }
}

Serverless Function

Now we can get started on the creation of our http trigger to deliver our song data to our application. First, we must
create a standard Http Trigger using the Azure extension in Visual Studio Code. After we get the starter files, open
the index.js file.

As an example I will provide a sample array of music that we can use for this tutorial. If you wish, you may provide any
music you choose that meets the same format.

const songData = [
    {
        name: "Beaver Creek",
        cover:
            "https://chillhop.com/wp-content/uploads/2020/09/0255e8b8c74c90d4a27c594b3452b2daafae608d-1024x1024.jpg",
        artist: "Aso, Middle School, Aviino",
        audio: "https://mp3.chillhop.com/serve.php/?mp3=10075",
        color: ["#205950", "#2ab3bf"],
        id: uuidv4(),
        active: false,
    },
    {
        name: "Daylight",
        cover:
            "https://chillhop.com/wp-content/uploads/2020/07/ef95e219a44869318b7806e9f0f794a1f9c451e4-1024x1024.jpg",
        artist: "Aiguille",
        audio: "https://mp3.chillhop.com/serve.php/?mp3=9272",
        color: ["#EF8EA9", "#ab417f"],
        id: uuidv4(),
        active: false,
    },
];

Insert this song array into the module.exports section of the file. We will also need to import the uuid package to
assign ids to our songs. Finally, the function should end with the context.res section. Inside that section, we must
pass the songData as a part of the request.

context.res = {
    body: songData
};

This makes the body of the request include the songData array we provided.

Consuming the API call

Finally, we must put these parts together to get the songs within our application.

To do this, we must create a function to fetch from our endpoint. This function will check to see whether the data has
already been loaded, if it has not, then we will use the fetch method to return a Promise from the endpoint with the
song data we provided earlier. We then add the songs to the state.

let loaded = false;
const getSongData = async (): Promise<void | SongModel[]> => {
    if (loaded) return;
    return await fetch("url")
        .then(res => {
            return res.json() as Promise<SongModel[]>;
        })
        .then(res => {
            setSongs(res);
            loaded = true;
        });
};

However, we will still need to call this function as the page loads. To do this, we can use the useEffect react hook.
The useEffect hook takes in a callback function, and an array of dependencies that the hook watches for. When the
dependencies update, the hook will fire. In the callback function, we need to get the data, and then we need to set the
currentSong.

useEffect(() => {
    if (!loaded) {
        getSongData();
        setCurrentSong(songs[0]);
    }
}, [loaded]);

My hope with this project is that if it gets deployed, it can help develop a love for smaller artists who are not big
enough to get their music on large streaming platforms. To further improve the user experience for this application, I
would like to add a way for a user to add music to the application without hardcoding it into the function. I would also
like to color more components to give the player a unique look for each album that is played.

TimeToEat

Jason — Sat, 20 Mar 2021 18:55:45 +0000

Get notification reminders for proper eating habits!

Who am I?

My name is Jason Wu and at this moment, I'm a Sophomore at the University of Rhode Island studying CS. I love food, lifting weights, skincare, video games, honestly anything you can think of, I like!

Because of lockdown, I haven't been outside to do anything for the past 10 months. Seriously. Nothing. No restaurants, gym, not even boba. I love to eat and workout, but not being to do the ladder during quarantine, I've gained weight and have been eating late at night as well. I would order food just to keep my sanity alive if I'm at home all day.

But I am determined to go back to my old self! I want to control what I eat and go back to exercising!
That's why I created this application, TimeToEat to help me with diets and fasting (Intermitted Fasting more specifically)!

What is TimeToEat?

TimeToEat is a web application that gives you daily reminders for you to start or stop eating at specific times of the day through SMS messages. Currently, the application is set to remind you daily at 12PM and 6PM PST.
The app will take your name and phone number, sent them to a trigger function in Microsoft Azure, and it will be stored in an Azure storage account. Then it's scheduled to send the reminder at those times through the Twilio API and send you a text with a personalized message.

Frontend

During my frontend development, I created a website from scratch with HTML. I decided to not use a template because I have never created a website and wanted to go on a journey of making one for the first time. Although it does not have much CSS and JS for the design and fun animations, I wanted to learn that step by step in the future. For my application, I needed to make a form for users to input their names and phone numbers. I did this in my main index.html file.

After getting the data from the form, I sent it into the frontend javascript file. In this file, it first waits for the form data to be sent there. Once received, the form data will then have all the inputs recognized by name within the script. Then the Azure function script was called to be triggered. (More about Azure function in Backend!)
Finally, the name and phone data will be sent to the Azure URL. All this is located in the index.js file.

When my frontend was functional, I decided to use Azure and deploy it with GitHub and Static Web App. Then I went on towards the backend development.

Backend

Within the backend, I mentioned that I used Microsoft Azure. The form data from my frontend would be sent into an Azure HTTP Trigger Function. In Microsoft Azure, the development of anything requires some steps. It requires you to have an Azure subscription, resource group and then you can make a function app.

HTTP Trigger Function

This function will trigger when we call it, which we did in the index.js file. It will take the form data we sent through the URL in the parameters earlier and then add it into a Javascript Object Notation or JSON file.

Our formdata.json will store the form data for all the users.

Timer Trigger Function

The timer trigger function does what it sounds like. The function will trigger on a timer. For our application, we wanted to send notifications to users at a specific time each day. This timer function will first read all the data in the formdata.json file and then add it into an array. When all the data is in the array, the function will then loop everything in the array and send the information to the Twilio API to send the SMS message.

Twilio backend

In the Twilio application that we used, we created a Twilio account and received an API URL, an ID, and an authentication token. We needed to put all this information within the timer function's JSON file. Because I used a Twilio trial account, the application is only limited to send SMS messages to Twilio verified phone numbers.

The Future

For future development plans, I want to add tons of new features. Here's a list.

Selecting which time zone you are in
Picking what time(s) to receive the SMS messages
Available to non-Twilio verified phone numbers
More frontend development (Design, Exceptions, Confirmation page)

But until then, this web application will help me towards a scheduled and healthy diet!

Thanks!

I appreciate your time in checking out my web app! This project would not be possible without the help of my mentor Ankit, and all the instructors, and the team of Bit Project Serverless BitCamp which was cohosted by Microsoft. I had many ideas, some even scrapped, but this whole experience creating this was super entertaining, and learned so much. Once again, Thanks!

smsEarthquake Alert

je02ff — Sat, 20 Mar 2021 18:53:43 +0000

Hello! My name is Jeff Roden and I am a non-traditional student at Oklahoma State University. I previously worked as a geologist for the past 10 years and am currently in the middle of a career pivot to software engineering. When it came time to choose a personal project, I knew that I wanted to blend my past experience into mine somehow. So I decided to make smsEarthquake Alert! It is a web app that utilizes Microsoft Azure functions, Cosmos DB, Twilio, and an API from the USGS that provides real time earthquake data. A text message is then sent out letting you know the location and magnitude of a recent earthquake in an area of interest decided on by the user.

smsEarthquake Alert Flowchart

I decided to start on what I was most familiar with, building out a simple static website for people to sign up for the service. The main purpose here is to collect a users phone number to receive a text, as well as the smallest earthquake size to be notified about (minimum magnitude) and a latitude, longitude and radius around that location in miles the earthquake needs to occur in. Once the user enters in their critera and hits submit, the form data is sent to an Azure HTTP trigger function that takes that data and stores it into Cosmos DB. I was going to use the Geocoding API so a user could just enter a city name and state instead of lat/long's, but that will have to wait for version 2!

Just for a little extra info I also decided to display a table showing earthquakes that have happened world-wide in the past hour, day, and week using data from the USGS API.

Sign-up Page

Sign-up Page HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>smsEarthquake Alert</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="main">
        <div class="nav">
            <ul>
                <li><a href="#text">Text Alert</a></li>
                <li><a href="#hour">Earthquakes Past Hour</a></li>
                <li><a href="#day">Past Day</a></li>
                <li><a href="#week">Past Week</a></li>
              </ul>
        </div>
       <div class="main-container">
            <header class="main-header">
                <a name="text"></a>
                <h1>
                    <span class="tan">sms</span>Earthquake Alert
                </h1>
                <h2>Enter your phone number and other criteria to recieve notifications</h2>
            </header>
            <div class="form">
                <form method="POST" id="formsub" action="https://smsearthquake.azurewebsites.net/api/HttpTrigger1_subForm?code=BPBzT9AZmQdk4y9TEuPFgUv2VsHZ2910zP9Parws3XaYnhldorfRJA==">    
                    <input type="text" id="phoneNum" class="input-phoneNum" placeholder="phone number" autocomplete="off"></input>
                    <input type="text" id="mag" class="input-mag" placeholder="minimum magnitude" autocomplete="off"></input><br>
                    <input type="text" id="radius" class="input-radius" placeholder="radius (ft)" autocomplete="off"></input>
                    <input type="text" id="lat" class="input-lat" placeholder="latitude" autocomplete="off"></input>
                    <input type="text" id="long" class="input-long" placeholder="longitude" autocomplete="off"></input><br>
                    <button id="submit-button" class="submit-button">submit</button>
                </form>
            </div>
            <div class="table-hour">
                <a name="hour"></a>
                <h1>Earthquakes in the Past Hour</h1>
                <table class="table">
                    <tr class="eq-info">
                        <th>Magnitude</th>
                        <th>Place</th>
                        <th>Time</th>
                        <th>Longitude</th>
                        <th>Latitude</th>
                        <th>Depth (Km)</th>
                    </tr>
                    <tbody id="hourData">
                    </tbody>
                </table>
            </div>
            <div class="table-day">
                <a name="day"></a>
                <h1>Earthquakes in the Past Day</h1>
                <table class="table">
                    <tr class="eq-info">
                        <th>Magnitude</th>
                        <th>Place</th>
                        <th>Time</th>
                        <th>Longitude</th>
                        <th>Latitude</th>
                        <th>Depth (Km)</th>
                    </tr>
                    <tbody id="dayData">
                    </tbody>
                </table>
            </div>
       </div>
    </div>
</body>
</html>
<script src="bc.js" type="text/javascript"></script>

Sign-up Page Javascript

//Collecting Form data and Posting it to my HTTP Trigger
var formsub = document.getElementById('formsub');
var button = document.getElementById('submit-button');
var phoneNum = document.getElementById('phoneNum');
var mag = document.getElementById('mag');
var lat = document.getElementById('lat');
var long = document.getElementById('long');
var radius = document.getElementById('radius');

button.addEventListener('click', function (ev) {

    ev.preventDefault();
    ev.stopPropagation();
    var body = {
        "phoneNum": phoneNum.value,
        "lat": lat.value,
        "long": long.value,
        "radius": radius.value,
        "magnitude": mag.value
    }
    fetch("http://localhost:7071/api/formsSubmit", {
        method: "POST",
        headers: {
            "content-type": "application/json"
        },
        body: JSON.stringify(body)
    })
});

//Populating Tables with recent EQ data
fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson').then(
    res => {
        res.json().then(
            data => {
                var temp = "";
                data.features.forEach(u => {
                    temp += "<tr>";
                    temp += "<td>" + Math.round(u.properties.mag * 1e2) / 1e2 + "</td>";
                    temp += "<td>" + u.properties.place + "</td>";
                    var utcSeconds = u.properties.time;
                    var d = new Date(utcSeconds);
                    temp += "<td>" + d + "</td>";
                    temp += "<td>" + u.geometry.coordinates[0] + "</td>";
                    temp += "<td>" + u.geometry.coordinates[1] + "</td>";
                    temp += "<td>" + Math.round(u.geometry.coordinates[2] * 1e2) / 1e2 + "</td></tr>";
                })
                document.getElementById("hourData").innerHTML = temp;
                console.log(data);
            }
        )
    }
)

Azure Function HTTP Trigger

I have an azure HTTP trigger that takes the form data pushed from my html page, adds an empty earthquake ID array to it, then sends it on its way to be stored in Cosmos DB. This empty eqID array was needed so I can keep track of what earthquakes someone has already been notified about so they dont get repeat texts about the same quake!

module.exports = async function (context, req) {

    const contact = req.body;
    contact.eqID = []
    context.bindings.outputDocument = contact;

}

Azure Function HTTP Timer

Now for the hard part! I needed to pull a user contact from my Cosmos DB, then fetch a list of earthquakes from the USGS API that met the contact's lat/long/radius and magnitude criteria.

I then cycle through this list of earthquakes and check the unique ID assigned to each quake by the USGS agaisnt an array of eqID's the user has already been texted about. If the ID isn't in that list, they get a message about it listing the size and approximate location texted to them through Twilio.

This was a lot for me to process at first so I started out by just writing some pseudo-code to get a grip on how I needed to structure the logic.

Now my solution uses a double nested for loop, so will be O(n^2). I am sure there is a more efficient solution than this, but its what I ran with for now ;-)

Logic structure in hand I then set out to put all of this in action through an Azure HTTP timer function that executes every 10 minutes to check for new quakes!

const fetch = require('node-fetch');

//Beginning of the Timer function
module.exports = async function (context, myTimer, contacts) {
//arrays used for the twilio message body and updating the cosmos DB with quake IDs.
    var messages = [];
    var documentsToSave = [];

 //Pulling a contact from Cosmos and getting their EQ criteria into vars to make a fetch request
    for(var contact of contacts) {
        var startTime = new Date().toISOString().substring(0,10);

//As Americans we are used to using miles, but the USGS API deals in kilometers, so I convert a users desired radius from miles to kilometers before making the fetch call to the USGS.
        var maxradiusKm = contact.radius * 1.60934;
        var fetchUrl = "https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=" 
                + startTime + "&latitude="
                + contact.lat + "&longitude="
                + contact.long + "&maxradiuskm="
                + maxradiusKm + "&minmagnitude="
                + contact.magnitude;
        var response = await fetch(fetchUrl);

//We now have an array of earthquakes that have happened in the users desired area  
      var EQs = await response.json();

        EQs.features.forEach(quake => {
            const quakeMag = Math.round(quake.properties.mag * 1e2) / 1e2;
            const place = quake.properties.place;

//Checking here to make sure its a new quake, and not one previously notified about
//If its new one, a text is sent out 
            if(contact.eqID.includes[quake.id] == false)
                messages.push({
                    body: quakeMag.toString() +" magnitude "+ place,
                    to: "+1"+contact.phoneNum
                }); 
                context.bindings.messages = messages;
                contact.eqID.push(quake.id);
                documentsToSave.push(contact);
        });
        context.bindings.outputDocument = documentsToSave;
    } 
};

In Oklahoma, suprisingly, it usually doesn't take long for a quake to happen these days! Now, we just have to sit and be patient and wait for mother nature to stretch it's legs.. err plates? But there's no plate boundaries in Oklahoma you exclaim? .... ok you're right, but that is a whole different blog post :-) Regardless, now we sit and wait for a bit!

Getting Notifications from Twilio

Here is a screen grab from my phone letting me know about earthquakes that have happened within 100 miles of where I live, Oklahoma City:

As you can see, we already had a handfull of tiny earthquakes before 4 pm for that day.

Conclusion

I've learned a ton on this project. I came in to this with very minimal front-end experience and felt pretty overwhelmed at first. It is always easy to start a project and then kind of just lose focus and stop. In this regard the Bit Project was excellent in keeping me on task and having people here to not only help me figure all this stuff out, but to also keep me accountable and on track!

Special thanks to my mentor Anthony Chu, who carried me out of many holes and frustrating dead ends I fell into while putting this together and also to the Bit Project serverless intructors Emily, Evelyn, and Julia!

And also a thousand thank you's to everyone that devotes their time and effort in making this project happen!

Building a Productivity Timer using Azure Functions and Twilio

Tessa Nishida — Sat, 20 Mar 2021 18:44:32 +0000

WorkSpace was built to help young kids stay engaged while learning online. The web app uses a Pomodoro timer and guides kids through breaks and work time. Parents also have the option to fill out a contact form which is used to send them a report of their child’s activity at the end of each session using an Azure function and the Twilio API.

Visit WorkSpace: https://lively-bush-0e9bdb91e.azurestaticapps.net/

About Me

Hello! My name is Tessa Nishida, and I am a sophomore studying computer science at the University of Utah. I am originally from Honolulu, HI and I enjoy running, hiking, and traveling!

About Workspace

While helping to tutor young students during the pandemic, I noticed that kids had difficulties staying focused and motivated while learning online. Created WorkSpace to help kids develop good time management skills and help parents better idea of how their child learns.

How it Works

Below is a diagram of the basic structure of the web app...

Here is a general outline of how to connect the frontend and backend..

Create a Azure Static Web App
Call Azure Function from frontend (Remember to use async functions!)
Call the Twilio API in the backend

Done!

Thank you!

This project was built as a part of the Bit Project Serverless BitCamp cohosted by Microsoft. I would like to thank my mentor Marie Hoeger for helping me throughout this process, as well as Emily, Evelyn, and Julia for leading our cohort.

Dine the Distance

Anita Padman — Sat, 20 Mar 2021 18:42:10 +0000

About Me

Hi! My name is Anita, and I'm currently a junior studying Computer Science at the University of Illinois at Chicago. When I'm not doing school work, my favorite hobbies include biking, cooking, and painting (I've been doing a lot of online paint alongs during lockdown).

I'm a HUGE foodie. One of my favorite social activities has always been going out to eat with friends. I thoroughly miss in-person classes in Chicago because it gave me an excuse to try out new places for takeout nearly every week. If you're ever in the city, I 10/10 recommend heading to Brightwok Kitchen!

Choosing a place to eat has always been a struggle of mine, and there are a couple factors I always take into account:

Convenience – I have never been one to take a road trip just for the sake of getting some food.
Cuisine – I crave Sushi way more often than I would like to admit.

That's pretty much it. I'm generally not that picky 😊

What's Dine the Distance? 🚗

Dine the Distance is a web application that takes the zip location locations between two points (you and a friend), a restaurant cuisine, and delivers restaurant recommendations at a neutral midpoint location. Each restaurant recommendation is requested from the Azure Maps API and includes a link to the location’s website, menu, phone number, and address. Dine the Distance provides food locations that are convenient whilst filtering results by cuisine preferences. It was created to help avoid situations where you and your friends cannot decide on a place to meet up and grab some food.

Now we'll go into the steps I took to build this project the necessary details to replicate it in the future:

Creating the Azure Function App 💻

Navigate to the Azure Portal and create a Function App Resource that uses a Node.js runtime stack.
After it has deployed, add an HTTP trigger to your resource. This is where we will be providing the backend code for our application!
Before the function can be used, you will want to install the necessary package dependencies. Run “npm init -y” in your terminal to create a package.json file to store your dependencies. Next, install the following dependencies (npm install):
- node-fetch
  - To make our HTTP requests
  - https://www.npmjs.com/package/node-fetch#api
- us-zips
  - To convert user zip code input into latitude and longitude coordinates
  - https://www.npmjs.com/package/us-zips
- geolib
  - To find the midpoint between two coordinate locations
  - https://www.npmjs.com/package/geolib

Frontend ✨

Create a form for user input

<form onsubmit="handle(event)" enctype="multipart/form-data">
    <div class="row">
        <div class="form-group col-md-6">
            <input type="text" name="zip1" placeholder="Zip Code 1" required>
            <input type="text" name="phone1" placeholder="Phone Number 1" required>
        </div>

        <div class="form-group col-md-6 mt-3 mt-md-0">
            <input type="text" name="zip2" placeholder="Zip Code 2" required>
            <input type="text" name="phone2" placeholder="Phone Number 2" required>
        </div>
    </div>

    <div class="text-center" style="padding-top: 30px;">
        <input type="text" name="cuisine" placeholder="Food Cuisine" required>
    </div>
    <div class="text-center"><button type="submit">Find Food!</button></div>
</form>

To capture the user’s location, contact information, and preferred cuisine information, you will need to create a form in an index.html file. The main elements you will definitely need in this form include:

Two inputs for two user zip code locations
Two inputs for two user phone numbers
A submit button to send the form data to our HTTP trigger (called dineTrigger)

Send user's form data to our HTTP trigger (dineTrigger)

  var functionUrl = "/api/dineTrigger"
  const resp = await fetch (functionUrl, {
      method: 'POST',
      body:JSON.stringify({zip1, zip2, cuisine}),
      headers: {
        'Content-Type': 'application/json'
      },
  });

  var data = await resp.json();
  var newData = JSON.stringify(data.results);
  var obj = JSON.parse(newData);

Send an object containing the user zip code and cuisine information and await a JSON response body that can be parsed to populate the frontend with relevant restaurant information.

Backend ⚙️

`HTTP Trigger 1 (dineTrigger)`

Our first HTTP trigger will send our user zip code and cuisine information to Azure Maps to retrieve restaurant information.

Convert zip codes into coordinates and find the midpoint

   module.exports = async function (context, req) {

       var body = req.body;

       //zip code 1 -> latitude and longitude (us-zips) -> zip1Response
       //zip code 2 -> latitude and longitude (us-zips) -> zip2Response
       // midpoint lat lon (geolib) -> centerCoords 

       var zip1 = body.zip1;
       var zip2 = body.zip2;

       var zip1Response = usZips[zip1];
       var zip2Response = usZips[zip2];

       var centerCoords = geolib.getCenterOfBounds([
           { latitude: zip1Response["latitude"], longitude: zip1Response["longitude"] },
           { latitude: zip2Response["latitude"], longitude: zip2Response["longitude"] },
       ]);

       var cuisine = body.cuisine;

       var testResult = await analyzeCoords(centerCoords["latitude"], centerCoords["longitude"], cuisine);

       context.res = {
           // status: 200, /* Defaults to 200 */
           body: testResult
       };
   }

Before we can request restaurant data, we will need to find the midpoint between the two zip code locations entered by the user. This is where the us-zips and geolib node packages come in handy! First, convert the user zip code locations into JSON objects with their respective latitude/longitude coordinates using the usZips function. Next, we will use these coordinates to find the midpoint via geolib.getCenterOfBounds. Lastly, pass in the center latitude, center longitude, and preferred user cuisine into another function (analyzeCoords) to send this data to the Azure Maps API.

Request Restaurant Data

   async function analyzeCoords(latitude, longitude, cuisine){ 

       const subscriptionKey = process.env['map-key']; 
       const uriBase = 'https://atlas.microsoft.com' + '/search/fuzzy/json';

       let params = new URLSearchParams({
           'api-version': '1.0',
           'query': cuisine + ' ' + 'restaurant',
           'subscription-key': subscriptionKey,
           'lat': latitude,
           'lon': longitude,
           'limit': 10
       })


       let resp = await fetch(uriBase + '?' + params.toString(), {
           method: 'GET'
       })

       let data = await resp.json();

       return data; 
   }

Let us take a closer look at the analyzeCoords (latitude, longitude, cuisine) function. In this function, you will want to populate your URL search parameters and perform a GET request for your response data that we will parse through for the user to see on the frontend.

Refer to the Free Form Search API documentation to add or modify URL parameters:

https://docs.microsoft.com/en-us/rest/api/maps/search/getsearchfuzzy

`HTTP Trigger 2 (msgTrigger)`

Our second HTTP trigger will send users text message directions to the restaurant they select.

Add Twilio Bindings to your HTTP Trigger's function.json file

   {
     "type": "twilioSms",
     "name": "message",
     "accountSidSetting": "TwilioAccountSid",
     "authTokenSetting": "TwilioAuthToken",
     "from": "+1425XXXXXXX",
     "direction": "out",
     "body": "Azure Functions Testing"
   }

You'll need to create a Twilio Account in order to populate your Twilio resource binding with the proper accountSID, authToken, and Twilio phone number. In this project, I created two bindings in order to send a separate text to each of the two user's who will need the restaurant address.

Send user's restaurant choice to the HTTP trigger (msgTrigger)

   async function sendAddress(phone1, phone2, address, name){
     var functionUrl = "/api/msgTrigger";
     const resp = await fetch (functionUrl, {
       method: 'POST',
       body:JSON.stringify({phone1, phone2, address, name}),
       headers: {
         'Content-Type': 'application/json'
       },
     });
   }

Similar to how we sent an object containing form information to dineTrigger, we'll need to make another POST request to send an object containing the user's phone numbers and restaurant location to our new HTTP trigger.

Text both users the address of the restaurant they select

   module.exports = async function (context, req) {

       var body = req.body;
       var phone1 = body.phone1;
       var phone2 = body.phone2;
       var address = body.address;
       var restaurantName = body.name;

       var txtMessage = "Thanks for using Dine the Distance! Here's the address to go to " + restaurantName + ": " + address;

       //send directions

       context.bindings.message = {
           body : txtMessage,
           to: phone1 
       };
       context.bindings.message2 = {
           body : txtMessage,
           to: phone2 
       };
   }

Finally! It's time to send the users the address of the restaurant they plan to go to. After defining the body of the received POST request, we can formulate our message into a variable (txtMessage) and specify the body and phone numbers we want to contact in context.bindings.message.

Deploying the Static Web App 🚀

Create a static web app in Azure in the Azure Portal and add the workflow to the master branch of the GitHub repo you are currently working in
Grab a friend and try a new restaurant with Dine the Distance!

Here's a link to try out my version: https://calm-moss-0d1a6c110.azurestaticapps.net/

Additionally here's my Github repo if you want to check out my code: https://github.com/a-padman/Dine2

So what's next? 🔮

Dine the Distance has some room for additional features. The next course of action involves presenting each user with a distance tracker to help them visualize how far they will need to drive to each recommended restaurant.

Until then....with Dine the Distance, you and your friends can stop aimlessly scrolling on online for restaurants nearby and instead utilize this all-in-one functional web app next time you want to grab a bite!

Special Mentions 🤗

This project was created as part of the Bit Project Serverless BitCamp cohosted by Microsoft. I'd like to thank my mentor Marie Hoeger for answering all my questions and making this project a great learning experience! Additionally, thanks to Emily, Evelyn, and Julia for coordinating our cohort activities and laying out clear expectations throughout the Bit Camp.

Lastly, the name credit for this app goes out to my dear friend Divya Francis 💖

Save Money and Frustration on Amazon using Azure Functions

FifiTeklemedhin — Tue, 29 Dec 2020 02:53:15 +0000

Amazon is a service known for convenience and efficiency. However, it is often frustrating to buy a product on Amazon only to find out that another site was selling it for less, or that the item was sold at a discount shortly after. This dilemma is contradictory to the benefits of online shopping mentioned above, with little efficiency and convenience in having to manually search for the best prices.

Recently, I have been learning about Microsoft Azure, and found the PERFECT way to save myself lots money and frustration! Through serverless computing, automating the task of observing a product’s price becomes a fun and affordable challenge. The result I came up with was PriceScraper, a web app that takes in an Amazon link and some basic information and sends a message if an item fluctuates in price. In this tutorial, I will walk you through how to create your own PriceScraper app to gain a better understanding of Azure as well as price fluctuations on Amazon.

Note: Before you start, please remember to react to and comment on this article! I would love any feedback to improve your experience.

Overview

Flowchart:

The program interface is a basic form with fields for a link to a product, a phone number, the number of days the user wants to receive notifications, and a baseline discount percentage for the item. The website triggers an Azure Function HTTP trigger, which inputs the data into a SQL database. Then, a timer trigger checks the price of the item every day, updates the database, and sends a text message to the user under three conditions. The user is notified if an item’s price increases from the time the user submits the form, the price decreases to the desired discount value, or the notification period is reached.

Heads Up! By the end of this tutorial, you will have:

Installed Visual Studio Code
Created a Microsoft Azure account and subscription (free trial included)
Created a Twilio account (free trial included)
Created a GitHub account

Step 1: Setting up the Basics:

Create an Azure Account:

In order to do anything, we need to have access to Azure! This means creating an account and subscription. As mentioned above, Azure comes with a free $200 credit, which is PLENTY for our purposes. If you already have an account, then create a new subscription or resource group in order to store everything related to your project.

Install VSCode

We are using Python as the language for our functions, and sadly, the Azure Portal is very limited in terms of use with Python than it is with other runtime stacks. Because of this issue, we are using Visual Studio Code as an alternative. VSCode has GREAT integration with Azure, as both the editor and the platform were created by Microsoft. We will be using the Azure Portal for administrative configurations (mainly with creating resources and managing the remote app), but VSCode is where most of the work will be done.

So, with that information in mind, it is time to download VSCode! This is a relatively straightforward process; all you have to do is search ‘download VSCode’ or follow this link. After installing the editor, I would highly reccomend signing into Github through the editor. While this tutorial does not involve version controlling anything, it is the wisest decision to keep track of your code so you can:

Go back to your last working version
Keep your code in case your subscription is disabled

Create a Database

Since PriceScraper is a web app, it is extremely important to find a way to keep track of data across all users. This is another instance where using Azure is a benefit: we get to host a database with minimum overhead cost and easy set up.

The first step is to create the actual database in the Azure portal. However, it is important to note that there are many options on Azure for databases. Make sure to search ‘SQL databases’ in the top search bar.

After selecting ‘SQL databases’, click + on the top left corner of the screen:

Lastly, fill out the basic information for your database. If you have not already, create a subscription, then name your database and select a server closest to your location. Most importantly, make sure to properly configure your database (link in compute+storage section in form) so that it requires the LEAST amount of money you can spend. Since this project will most likely be for personal use, you can minimize the database specifications to cut costs to a couple dollars:

After a couple minutes, the database should be created, and you will be led to a page similar to this

The database is nearly setup, save one important step; configuring SQL authentication. If you go to query editor from the left menu, you will be prompted to create a username and password to access and modify the database.

Make sure to remember your username and password for the database!! You will be using it in future steps.

Connect the Database to VSCode:

In order to regularly access the database, it is easiest to use an extension in VSCode and have it right alongside the rest of our app. On the left hand bar in VSCode, go to the icon resembling several blocks and search up ‘Azure Databases’. From there, click install and wait for the extension to appear as an icon on the bar.

Next, we need to actually link our Azure account to VSCode. Press Ctrl + shift + p to open the command bar, then type ‘SQL’ and choose ‘MS SQL: Connect’. You might be prompted with a message telling you to sign into your Microsoft credentials, with a link to the external site. In that case, log in and authorize all permissions.

Next, go to the extension on the left bar and hover over ‘connections’. Click on the ‘+’ symbol that appears and a menu similar to the command bar will pop up.

When prompted for the database link, go to the database in azure portal, and server name is in overview on the far right.

After inputting the server name, press enter to continue or put in db name if you want. Then, select ‘SQL Login’ and use your SQL login username and password you had created for authentication. Follow the next couple of prompts related to the SQL login, then you should be connected, with the name of your database and a green dot showing up when the extension is open:

Step 2: Creating Columns for the Database

It finally time to start using our database! Click on your database, then navigate to the ‘Tables’ directory. Notice one dataset that says DBO: this is the set we are branching off of to create our table. To create the table, we are going to create SQL queries specifying the columns and their datatypes. Right click on the database name and select ‘New Query’, and a new document should pop up. In this document, copy and paste the following query:

CREATE TABLE dbo.ScrapedData (
    phonenumber FLOAT(100),
    baseline_percentage FLOAT(100),
    duration FLOAT(100),
    original_price FLOAT(100),
    current_price FLOAT(100),
    link VARCHAR(400)
)

The datatype capacities are somewhat arbitrary save for the link and phone number columns. Since the phone number will have at least 10 digits, it is better to stick to a high capacity. Same goes for the link; many URLS are extremely long and would actually max out 255 characters.

Step 3: Creating Functions

Now it is time to set up our functions. We will be creating an HTTP trigger, which has a url as an endpoint, as well as a timer trigger, which independently goes off after a specified interval of time. As previously mentioned Python is not as easily integrated with the Azure portal as other runtime stacks are, so we will be using VSCode extensions in order to program our app.

Go through this quickstart guide, which should take around thirty minutes to complete in order to learn how to set up a Python function in VSCode. As with version control, we will not explicitly be going over deploying your app from your local machine to the remote version, but that information can be found in the guide. After you have followed the instructions, you should have created an HTTP triggered function. Make sure to make a folder for all of your code for this app.

Creating a Timer Trigger

To create a timer trigger, follow the same steps outlined in the guide, but change the type from HTTP to timer in the menu bar. If you are prompted for an N-CRONTAB time interval for when the function is triggered, use this link to generate your desired interval.

Setting Up Twilio

Twilio is an awesome service that we will be using in order to send SMS messages to users. Since we will need a Twilio account to access its API in our functions, we will be setting it up right now. Go to the Twilio website and create a new account. If you already have an account, feel free to use it so long as you have billing set up. Otherwise, create a new account in order to get a free trial.

Important Note: not having billing set up with your account will limit you to sending messages only to manually authorized numbers. This will restrict your app to people you personally know.

Step 4: Inputting Data into the Database

It is finally time to start coding! We will begin by programming our HTTP trigger, which will process the user’s request through the webform, and create a row in the database using the information provided.

Go to the topmost icon in VSCode’s left panel, click add folder to workspace, and navigate to where you saved your functions. Then in your function, go the nested folder with the same name as the main directory, and open init.py.

When you open up your init.py file, you will have a boilerplate for creating a basic HTTP trigger. This is where all of our code for the trigger will live.

Connecting to the Database:

Now that we have our function ready to go, we need to set up a connection with our database. The first step is to install a VERY important python package in pyodbc. Go to this link for the pip command and install it to your trigger’s directory in the terminal. After installation is complete, make sure to import pyodbc at the top of init.py.

Pyodbc is perhaps the most complex dependency in this entire project, but the gist is that it allows you to connect to a database and write SQL queries within Python. Below is the code initializing a connection instance that we will be using in our function:

import pyodbc

server = '<db_link>'
database = '<db_name>'
username = '<your_user>'
password = '<your_password>'
cnxn = pyodbc.connect('DRIVER={ODBC Driver 17 for SQL Server};SERVER='+server+';DATABASE='+database+';UID='+username+';PWD='+ password)
cursor = cnxn.cursor()

The variable dbCnxn is the actual connection to the datababase, and ‘cursor’ is an object that lets you perform actions through that connection to actually query the database. Before running, make sure that your local environment is to the database. Make sure that all of these Check the database extension and make sure that the database has a green dot instead of a red on)

Important note: since we are programming this locally, the database is being accessed through varying IP adresses since varying ports are used every time we run a function. Left unchecked, this is a huge problem since our database requires manual authorization of IP adresses to get through its firewall. Therefore we need to configure our firewall settings so that ALL IP adresses are allowed to query the database, since we never know what IP address our local server will access the database endpoint through. Go to database in the Azure protal and select Overview in the left tab. On the righthand menubar, select set server firewall:

You will be redirected to a page called ‘firewall’ settings’, where you can give a range of authorized ip addresses. Go to ‘Rule Name’ and enter in a description like “allows all”, then put in 0.0.0.0 as the starting IP and 255.255.255.255 of ip addresses, which allows for every combination possible in IPv6.

Now it is time to test the code. Your code should look like this so far:

import logging

import azure.functions as func
import pyodbc

server = '<db_link>'
database = '<db_name>'
username = '<your_user>'
password = '<your_password>'
cnxn = pyodbc.connect('DRIVER={ODBC Driver 17 for SQL Server};SERVER='+server+';DATABASE='+database+';UID='+username+';PWD='+ password)
cursor = cnxn.cursor()

def main(req: func.HttpRequest) -> func.HttpResponse:
    logging.info('Python HTTP trigger function processed a request.')

    name = req.params.get('name')
    if not name:
        try:
            req_body = req.get_json()
        except ValueError:
            pass
        else:
            name = req_body.get('name')

    if name:
        return func.HttpResponse(f"Hello, {name}. This HTTP triggered function executed successfully.")
    else:
        return func.HttpResponse(
             "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.",
             status_code=200
        )

Refer back to this link to run your function. In your terminal, you will most likely see connection errors, but these issues vary too widely to cover in this tutorial. Pyodbc can be VERY frustrating, so my advice is to make Google and StackOverflow your best friends! Search up any error that comes up and follow verified instructions until something sticks. If you experience any issues with PyLint, refer to this link to delete and create a new virtual environment for your function. You are good to go once your terminal looks similar to the following:

Specifying Request Parameters:

Finally! Our technologies are set up and we can query into our database using Python. Here is a quick reminder on what this trigger should do:

Take request parameters sent by the user through the webform
Using the URL provided, webscrape the price off of the site
Update the database with a new row with all of the request parameters along with the original price and current price for the item (which are equivalent)

In order to accept various request parameters, we need to edit the function.json file to include all of the the form information. It should be right under the init.py file in your directory. Edit and save your file so that it matches the following JSON:

{
    "scriptFile": "__init__.py",
    "bindings": [
      {
        "authLevel": "anonymous",
        "type": "httpTrigger",
        "direction": "in",
        "name": "req",
        "phonenumber": "req",
        "url": "req",
        "baseline_percentage": "req",
        "duration": "req",
        "methods": [
          "get",
          "post"
        ]
      },
      {
        "type": "http",
        "direction": "out",
        "name": "$return",
        "url": "$return",
        "phonenumber": "req"
      }
    ]
  }

Webscraping Prices with a URL:

Now that we can access all of the information the user inputs, we need to get the information about the price as well. The user only inputs a URL, so it is our job to somehow retrieve the price with it.

We will be using another great python library called Beautiful Soup, which allows us to webscrape, or parse the HTML off of a site. Webscraping is so central to this project that PriceScraper was named after it! Because webscraping is so important, choosing the simplest and most efficient way to scrape the price is a priority. Beautiful Soup is extremely beginner friendly, and is the largest reason we are using Python functions.

In order to install Beautiful Soup, call pip install bs4 in your terminal or search up ‘beautiful soup download’. After installing, make sure to import the package:

from bs4 import BeautifulSoup

You will also need to download and import the requests package:

import requests

Once everything is imported, copy and paste the following function into init.py:

def scrape_price(URL: str):
    headers = ({'User-Agent':
            'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36',
            'Accept-Language': 'en-US, en;q=0.5'})

    page = requests.get(URL, headers=headers) #response.text gets page and html
    soup = BeautifulSoup(page.text, 'html.parser')

    price_tag = soup.find(id='priceblock_ourprice')
    if price_tag is None:
        price_tag = soup.find(id='priceblock_dealprice')
    if price_tag is None:
        price_tag = soup.find('data-asin-price')
    if price_tag is None:
        price_tag = soup.find(id='price_inside_buybox')
    if price_tag is None:
        price_tag = soup.find(class_='p13n-sc-price')
    if price_tag is None:
        return "incompatible"
    price = price_tag.get_text()
    #gets the lowest price if a range is listed
    if('-' in price):
        price = price[:price.index('-')]

    #turn into number
    price = price.replace('$', '')
    price = float(price)
    return price

Notice the page variable, which gets the actual page using the URL parameter. Soup is a Beautiful Soup object that takes the page, and parses out its HTML. The method soup.find() selects an individual element through an attribute (in this case the element’s id).

One thing to note is that the function will not work for some sites. Amazon is a huge platform with different layouts for deals and discounts and so on, making it difficult to know which attribute to select and ensuring that your program will not work in every case. To make sure that the program does not crash, we check multiple elements for the price, then return “incompatible” if it is not found. Otherwise, the value is cleaned up into only numeric characters, casted into a float value, and returned.

Updating the Database:

We now have all of the information needed to create a row in the database for the user’s request. Along with the request parameters, we will input the webscraped price two times, once as the original price (the price of the product at the time the request is processed), and once as the current price (which will be updated every time the program checks for price fluctuations).

We are going to use the pyodbc variables that we created in previous steps to query into the database and insert all of the values:

def update_database(url:str, phonenumber:int, baseline_percentage:float, duration:float, original_price:float, current_price:float, item_name: str):
    row_str = ""
    cursor.execute("INSERT INTO dbo.ScrapedData VALUES (?,?,?,?,?,?,?)", int(phonenumber),float(baseline_percentage), float(duration), float(scrape_price(url)), float(scrape_price(url)), url, item_name)

This is actually all the code you need to insert a new row! However, we want to make sure that a user can only track the same URL once. To do this, we are going to create another query to delete a row if the phonenumber and link exist elsewhere. Afterwards, make sure to call ‘cnxn.commit()’ in order to actually modify the database’s contents:

cnxn.commit()
    cursor.execute('''WITH removing AS (
    SELECT 
        phonenumber, 
        baseline_percentage, 
        duration, 
        original_price,
        current_price, 
        link,
        ROW_NUMBER() OVER (
            PARTITION BY 
                phonenumber,  
                link
            ORDER BY 
                phonenumber, 
                link
        ) row_num
        FROM 
            dbo.ScrapedData
        )
        DELETE FROM removing
        WHERE row_num > 1;''')

    cnxn.commit()

When testing our function, it would be convenient to see the rows in the table without constantly running a query through hitting a button in VSCode or the Azure portal. In order to do so, add one more query to the function that selects all of the rows. Then, store each row in a string and return the value:

 cnxn.commit()
    cursor.execute("SELECT * FROM [PriceScraper].[dbo].[ScrapedData]")
    row = cursor.fetchone()
    while row:
        row_str += row.__repr__() + "\n"
        row = cursor.fetchone()
    return row_str

Your complete function should look like this:

def update_database(url:str, phonenumber:int, baseline_percentage:float, duration:float, original_price:float, current_price:float, item_name: str):
    row_str = ""
    cursor.execute("INSERT INTO dbo.ScrapedData VALUES (?,?,?,?,?,?,?)", int(phonenumber),float(baseline_percentage), float(duration), float(scrape_price(url)), float(scrape_price(url)), url, item_name) 

    cnxn.commit()
    cursor.execute('''WITH removing AS (
    SELECT 
        phonenumber, 
        baseline_percentage, 
        duration, 
        original_price,
        current_price, 
        link,
        ROW_NUMBER() OVER (
            PARTITION BY 
                phonenumber,  
                link
            ORDER BY 
                phonenumber, 
                link
        ) row_num
        FROM 
            dbo.ScrapedData
        )
        DELETE FROM removing
        WHERE row_num > 1;''')

    cnxn.commit()
    cursor.execute("SELECT * FROM [PriceScraper].[dbo].[ScrapedData]")
    row = cursor.fetchone()
    while row:
        row_str += row.__repr__() + "\n"
        row = cursor.fetchone()
    return row_str

Calling our Functions and Handling Requests:

Now that our functions are written, we need to actually use them! All of the functions require the parameters, so the first thing we need to do is set up a way to access the request parameters. In the boilerplate for an HTTP trigger, the main function is responsible for getting this information:

import logging

import azure.functions as func


def main(req: func.HttpRequest) -> func.HttpResponse:
    logging.info('Python HTTP trigger function processed a request.')

    name = req.params.get('name')
    if not name:
        try:
            req_body = req.get_json()
        except ValueError:
            pass
        else:
            name = req_body.get('name')

    if name:
        return func.HttpResponse(f"Hello, {name}. This HTTP triggered function executed successfully.")
    else:
        return func.HttpResponse(
             "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.",
             status_code=200
        )

Notice the variable name, which is assigned as a property of req, or the request for the function. Use name as reference to getting our parameters:

def main(req: func.HttpRequest) -> func.HttpResponse:
    logging.info('Python HTTP trigger function processed a request.')

    phonenumber = req.params.get('phonenumber')
    url = req.params.get('url')
    baseline_percentage = req.params.get('baseline_percentage')
    duration = req.params.get('duration')
    name = req.params.get('name')

The next thing we need to do is check whether each parameter is sent in, most especially the URL. If all of the parameters are sent in, we can return a response to the request, which calls update_database(). In this function call, update_database() is given the form parameters as well as the original price and the (equivalent) current price. Returning the function call as a response will output the return value of update_database(), which we set to be the rows contained in the database.

all_vals = {"phone": phonenumber, "url": url, "percent": baseline_percentage, "dur": duration, "name": name}
    null_valls = ""

    if not phonenumber:
        null_valls += "phonenumber, "
    if not url:
        null_valls += "url, "
    if not baseline_percentage:
        null_valls += "baseline_percentage, "
    if not duration:
        null_valls += "duration, "
    if not name:
        null_valls += "name" 

    if url and scrape_price(url) == "incompatible":
        return func.HttpResponse(
             f'url unsupported',
             status_code=200
        )
    if url and phonenumber and baseline_percentage and duration and name:
        return func.HttpResponse(update_database(url, phonenumber, baseline_percentage, duration, scrape_price(url), scrape_price(url), name))

    else:
        return func.HttpResponse(
             null_valls,
             status_code=200
        )

And with that, our HTTP trigger is complete! To test the trigger, run it in terminal and copy and paste the URL provided. I highly recommend using the Postman API Client with this URL as an endpoint. From there, you can input test parameters and see whether the output is correct. Another alternative, of course, is do test in a web browser, but inputting parameters in a search bar is extremely frustrating and inefficient.

Step 5: Checking for Fluctuations and Sending Notifications

Step 4 was all about giving our PriceScraper some data to go off of. Now, we get to work on retrieving and updating that data! Through programming a timer trigger, we will:

Check whether we need to notify any users
Send the notifications
Update the database with the current prices for each item

Here is a flowchart outlining the logic for our code:

Setting Up Dependencies:

You are going to need every dependency used in the previous trigger, along with some new packages. Navigate to init.py in your timer trigger function, then copy and paste every import. Refer back to the instructions and make sure you have downloaded and imported:

requests
pyodbc
beautiful soup

After importing pyodbc, make sure to copy the following code, with each variable being global:

server = '<db_link>'
database = '<db_name>'
username = '<your_user>'
password = '<your_password>'
cnxn = pyodbc.connect('DRIVER={ODBC Driver 17 for SQL Server};SERVER='+server+';DATABASE='+database+';UID='+username+';PWD='+ password)
cursor = cnxn.cursor()

You will additionally need to download Twilio package and import the following to send SMS messages:

import os 
from twilio.rest import Client

Getting Database Information:

We will be using a pyodbc cursor object again to query into the database and create parallel lists for each column. These lists which can then be used to check who needs to be notified and draft a message with the relevant information.

def get_Database_Information():
    phonenumbers = []
    names = []
    links = []
    original_prices = []
    current_prices = []
    percentages = []
    durations = []

    cursor.execute('SELECT phonenumber,link,original_price FROM dbo.ScrapedData;')
    row = cursor.fetchone()
    row_str = ""
    while row:
        row_str += row.__repr__() + "\n"
        row = cursor.fetchone()

    # get all of each type of data
    cursor.execute('SELECT phonenumber FROM dbo.ScrapedData;')
    row = cursor.fetchone() 
    while row:
        row_str = row.__repr__()
        row_str = row_str.replace('(','')
        row_str = row_str.replace(')','')
        row_str = row_str.replace(',','')
        row_str = float(row_str)
        phonenumbers.append(row_str)
        row = cursor.fetchone()

    cursor.execute('SELECT item_name FROM dbo.ScrapedData;')
    row = cursor.fetchone()
    while row:
        row_str = row.__repr__()
        row_str = row_str.replace('(','')
        row_str = row_str.replace(')','')
        row_str = row_str.replace(',','')
        names.append(row)
        row = cursor.fetchone()

    cursor.execute('SELECT link FROM dbo.ScrapedData;')
    row = cursor.fetchone()
    while row:
        row_str = row.__repr__()
        row_str = row_str.replace('(','')
        row_str = row_str.replace(')','')
        row_str = row_str.replace(',','')
        links.append(row)
        row = cursor.fetchone()

    cursor.execute('SELECT original_price FROM dbo.ScrapedData;')
    row = cursor.fetchone()
    while row:
        row_str = row.__repr__()
        row_str = row_str.replace('(','')
        row_str = row_str.replace(')','')
        row_str = row_str.replace(',','')
        row_str = row_str.replace(' ', '')
        row_str = float(row_str)
        original_prices.append(row_str)
        row = cursor.fetchone()

    cursor.execute('SELECT current_price FROM dbo.ScrapedData;')
    row = cursor.fetchone()
    while row:
        row_str = row.__repr__()
        row_str = row_str.replace('(','')
        row_str = row_str.replace(')','')
        row_str = row_str.replace(',','')
        row_str = row_str.replace(' ', '')
        row_str = float(row_str)
        current_prices.append(row_str)
        row = cursor.fetchone()

    cursor.execute('SELECT baseline_percentage FROM dbo.ScrapedData;')
    row = cursor.fetchone()
    while row:
        row_str = row.__repr__()
        row_str = row_str.replace('(','')
        row_str = row_str.replace(')','')
        row_str = row_str.replace(',','')
        row_str = row_str.replace(' ', '')
        row_str = float(row_str)
        percentages.append(row_str)
        row = cursor.fetchone()

    cursor.execute('SELECT duration FROM dbo.ScrapedData;')
    row = cursor.fetchone()
    while row:
        row_str = row.__repr__()
        row_str = row_str.replace('(','')
        row_str = row_str.replace(')','')
        row_str = row_str.replace(',','')
        row_str = row_str.replace(' ', '')
        row_str = float(row_str)
        durations.append(row_str)
        row = cursor.fetchone()

    return phonenumbers, names, links, original_prices, current_prices, percentages, durations

At the end, the function returns all of the lists.

Finding Who Needs to Be Notified:

There are three cases in which a user will be notified by PriceScraper:

The price has increased
The price has meets the user’s ideal price
The duration the user wanted notifications for has been reached

We will be writing methods for each of these cases. The parameters for each method is different, but all of them require lists outputted by our get_database_information() method:

#if price increases from current
def price_increased_from_current(current_prices, links, phonenumbers, names):
    increased_notifs = []

    for i in range(len(current_prices)):
        updated_current_price = scrape_price(links[i], current_prices[i])
        if updated_current_price > current_prices[i]:
            increased_notifs.append([phonenumbers[i], names[i], current_prices[i], updated_current_price, links[i]])
    return increased_notifs
    #use to send to phone number 'price for <item> has increased from <old current> to <new current>

#if price is within baseline percentage
def price_increased_from_baseline(original_prices, links, phonenumbers, percentages, current_prices, names):
    baseline_notifs = []

    for i in range(len(original_prices)):
        original_price = original_prices[i]
        baseline_price = original_price - (original_price * percentages[i] * .01)
        updated_current_price = scrape_price(links[i], current_prices[i])
        current_price = current_prices[i]
        if current_price <= baseline_price:
            baseline_notifs.append([phonenumbers[i], names[i], updated_current_price, links[i]])
    return baseline_notifs

#if duration reached
def duration_reached(phonenumbers, durations, names, links, current_prices):
    duration_notifs = []

    today = datetime.date.today()

    for i in range(len(durations)):
        updated_current_price = scrape_price(links[i], current_prices[i])
        if(durations[i] == 0):
            duration_notifs.append([phonenumbers[i], names[i], updated_current_price, links[i]])

    return duration_notifs

Each function outputs a contact list with all the information needed to compose a notification message for each user.

Note: the timer trigger also uses the scrape_price() function, which you can copy and paste from below:

def scrape_price(URL: str, current_price):
    headers = ({'User-Agent':
            'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36',
            'Accept-Language': 'en-US, en;q=0.5'})

    '''
    URL = str(URL)
    if 'dp/' in URL:
        url_short = URL[URL.index('dp/'):]
        if '?' in url_short:
            url_short = url_short[: URL.index('?')]
    '''


    page = requests.get(URL[0], headers=headers) #response.text gets page and html
    soup = BeautifulSoup(page.text, 'html.parser')

    price_tag = soup.find(id='priceblock_ourprice')
    if price_tag is None:
        price_tag = soup.find(id='priceblock_dealprice')
    if price_tag is None:
        price_tag = soup.find('data-asin-price')
    if price_tag is None:
        price_tag = soup.find(id='price_inside_buybox')
    if price_tag is None:
        price_tag = soup.find(class_='p13n-sc-price')
    if price_tag is None:
        return current_price
    price = price_tag.get_text()
    #gets the lowest price if a range is listed
    if('-' in price):
        price = price[:price.index('-')]

    #turn into number
    price = price.replace('$', '')
    price = float(price)
    return price

Sending Messages:

Now it is time to create our reminder system! The actual function to send a message is very simple:

def send_message(phonenumber, message): 
    # Your Account Sid and Auth Token from twilio.com/console
    # and set the environment variables. See http://twil.io/secure
    account_sid = '<your account sid>'
    auth_token = '<your auth token>'
    client = Client(account_sid, auth_token)
    to_str = '+1{}'.format(phonenumber)
    message = client.messages \
                    .create(
                        body=message,
                        from_='<your account phone number>',
                        to= to_str[0:len(to_str)-1]
                    )

    print(message.sid)

Make sure to input your account sid, auth token, and phone number into the function. This information can be found through the Twilio console, but make sure to never copy and paste them into the code. If you happen to push that code with github, anyone can access your information. Beyond that, Twilio screens to check if your information was posted to the internet, and automatically disables those credentials. Instead, set these credentials as environment variables.

After the helper function works, we will move on to creating a bigger method that iterates through each of the contact lists made from price_increased_from_current(), price_increased_from_baseline(), and duration_reached(). Each contact list contains sub lists with the phonenumber, product name, original price, current price, and URL, and is traversed in an individual loop. One by one, messages are sent out to each user on the list for each notification type:

def send_messages(increased_from_current, increased_from_baseline, reached_durations):

    for i in increased_from_current:
        phonenumber = i[0]
        name = i[1]
        old_price = i[2]
        current_price = i[3]
        link = i[4]
        send_message(phonenumber, "Product {} has increased in price from ${} to ${}\nLink to product: {}".format(name[0], old_price, current_price, link[0]))

    for i in increased_from_baseline:
        phonenumber = i[0]
        name = i[1]
        current_price = i[2]
        link = i[3]
        send_message(phonenumber, "Product {} meets your ideal discount percentage at ${}!\nLink to product: {}".format(name[0], current_price, link[0]))

    for i in reached_durations:
        phonenumber = i[0]
        name = i[1]
        current_price = i[2]
        link = i[3]
        send_message(phonenumber, "The set duration for {} is complete! The current price for this product is ${}\nLink to product: {}".format(name[0], current_price, link[0]))

Updating the Current Price:

In order to keep track of fluctuations, the PriceScraper needs to be able to update the current price to the most recent time it was checked. We do this at the very end of the program so that we are not comparing the current price to itself when checking for notifications.

   def get_current_prices(phonenumbers, prices, urls):

        for i in range len(urls):
            if(scrape_price(urls[i]) != prices[i]):
                cursor.execute('UPDATE dbo.ScrapedData SET current_price = {} WHERE phonenumber LIKE \'%{}%\' AND link LIKE \'%{}%\';'.format(scrape_price(url[i]), phonenumbers[i], urls[i]))
                cursor.commit()

All this function requires is the phone numbers, prices, and urls in the database. The url is used to scrape the current price off of the site, then is compared to the price listed in the database for the product. In the query, a row is modified if the scraped price is different from the. listed price. This is where the phonenumbers comes in: we specified in the HTTP trigger that a phonenumber can only correspond to a given URL once. Therefore, in the query, we make sure to change only the row with both that phoennumber and link so as not to change the current price for all users.

Tying Everything Together:

Now, we will call all of the methods we just created in the main function. To call every other method, we first need to create a list for every column in the database using get_database_information():

def main(mytimer: func.TimerRequest) -> None:
    phonenumbers = get_Database_Information()[0]
    names = get_Database_Information()[1]
    links = get_Database_Information()[2]
    original_prices = get_Database_Information()[3]
    current_prices = get_Database_Information()[4]
    percentages = get_Database_Information()[5]
    durations = get_Database_Information()[6]

Using these lists, we will make our contact lists by calling price_increased_from_current(), price_increased_from_baseline(), and duration_reached():

increased_from_current = price_increased_from_current(current_prices, links, phonenumbers, names)
    increased_from_baseline = price_increased_from_baseline(original_prices, links, phonenumbers, percentages, current_prices, names)
    reached_durations = duration_reached(phonenumbers, durations, names, links, current_prices)

Lastly, we will send the notifcations and update the database:

    send_messages(increased_from_current, increased_from_baseline, reached_durations)
    get_current_prices(phonenumbers, prices, urls)

    utc_timestamp = datetime.datetime.utcnow().replace(
        tzinfo=datetime.timezone.utc).isoformat()

    if mytimer.past_due:
        logging.info('The timer is past due!')

    logging.info('DATA: %s', get_Database_Information())

Note: make sure to keep the boiler plate code!! This is what makes sure your function is triggered at the right intervals.

This is what messages sent through the function will look like:

Step 6: Developing the Frontend

We are so close to finishing the PriceScraper! All that is left is creating an interface for users to actually access the back end through. We will develop a very simple form using HTML, CSS, and JavaScript. However, since we want our PriceScraper to be publicly accessible, we will create an Azure Static Webapp to deploy it to the Internet.

Setting Up a GitHub Account:

The first step to creating a static webapp is to have a GitHub Account. GitHub is a host for coding repositories, meaning that it is used for keeping track of different versions of a project and across different collaborators and tasks. Azure Static Webapps requires you to deploy your code to GitHub, then deploy it again to the webapp instance located in the Azure Portal. This link is provides great walk through on how to set up GitHub and an Azure Static Webapp, then connect both to VSCode.

After learning how to create and deploy a webapp, open the index.html page in your local webapp and paste the following code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="script.js" type="text/javascript"></script>
    <link rel="stylesheet" href="styles.css">
    <title>Amazon Webscraper</title>
</head>
<body>
    <h1>Price Scraper</h1>
    <form onsubmit="jsonifyData(event)" action="database.php" method="POST">
        <h4>Phone number: </h4> 
        <input id="phonenumber" name="phonenumber" type="tel" placeholder="only numbers" required class="field" autocomplete="off">

        <h4>Product Name </h4>
        <input id="product_name" name="product_name" type="text" placeholder="input the product price" required class="field" autocomplete="off"> 

        <h4>Product URL: </h4>
        <input id="url" name="url" type="url" placeholder="input the product url" required class="field" autocomplete="off">

        <h4>Baseline discount percentage: </h4>
        <input id="percentage" name="percentage" type="number" placeholder="-" required class="field" autocomplete="off">    

        <h4>Notification time frame (days): </h4>
        <input id="duration" name="duration" type="number" placeholder="-" required class="field" autocomplete="off"> 

        <br>
        <br>
        <button type="submit" onsubmit="jsonifyData(event)" class="submit">Submit</button>

        <br>
        <span class="form-status" id="popup"></span>



    </form>


</body>
</html>

This has all of the code for the front end, but is somewhat primitive looking. You can either style this code by yourself or refer to my styling:

And there you have it! We have a beautiful front end for the PriceScraper.

Handling Form Data:

The gif above is a demo of the finished product, with the data actually being sent to our HTTP trigger. We need to validate the user input so that they put in working links and the right type of data. This is easiest to do in JavaScript, which is optimized for compatibility with HTML. In the directory for your style sheets and HTML, create a file called script.js. Then copy and paste the following code:

function validatePhonenumber(phonenumber)
{
    var numberType = typeof phonenumber;
    var regExp = /[a-zA-Z]/g; //any letters

    if( numberType != "number")
    {
        var noHyphens = phonenumber.replaceAll('-', '');
        console.log(noHyphens + ", length: " + noHyphens.length);
        if((noHyphens).length != 10 || (regExp.test(phonenumber)))
            return null;

        return noHyphens
    }


    return phonenumber;


}

function cleanDuration(duration)
{
    console.log("dur peeps");
    const currentDate = new Date();
    var stopDate = new Date();

    stopDate.setDate(currentDate.getDay() + duration);

    return duration;
}


function cleanPercentage(percentage)
{
    if(percentage > 100)
        percentage = percentage % 100;

    return percentage;
}


function validateURL(url)
{
    var request = new XMLHttpRequest();  
    request.open('GET', url, true);
    request.onreadystatechange = function()
    {
        if (request.readyState === 4)
        {
            if (request.status === 404) 
            {  
                return null;
            }  
        }
    };

    return url;
}

The code above validates and cleans the user input to work with our function code. For example, the function validatePhonenumber() makes sure hyphens are erased from the input and the length is verified to be 9 - 10 digits. The main function for this script is jsonifyData(). The first half of the function gets the form input when the submit button is pressed:

function jsonifyData(event)
{
    event.preventDefault();
    var phonenumber = document.getElementById('phonenumber').value;
    var product_name = document.getElementById('product_name').value;
    var url = document.getElementById('url').value;
    var percentage = document.getElementById('percentage').value;
    var duration = document.getElementById('duration').value;

    if(validateURL(url) == null)
    {
        $('#popup').html("INVALID URL");
        return;
    }  
    if(validatePhonenumber(phonenumber) == null)
    {
        document.getElementById("popup").innerHTML = "INVALID PHONENUMBER";
        //$('#popup').html("INVALID PHONENUMBER");
        return;
    }

If the data is not valid, the process is terminated and the function sends an error message to the user. Otherwise, the cleaned data is sent as parameters for an XHTTP request, which posts the parameters from the form to the trigger:

var params = 'url=' + url + '&phonenumber=' + validatePhonenumber(phonenumber) + '&duration=' + duration + '&baseline_percentage=' + percentage + '&name=' + product_name.replaceAll(' ', '-');
    var http = new XMLHttpRequest();
    //TRIGGER LINKS: 'https://pricescrapertester.azurewebsites.net/api/SQLFormCompleter?'   'http://localhost:7071/api/SQLFormCompleter'
    var trigger_url = '<your http trigger link>';

    http.open('POST', trigger_url+params, true);

    http.setRequestHeader('Content-type', 'application/multipart/form-data');

    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    console.log("POST: " + trigger_url+params);
    console.log(params);

    document.getElementById("popup").innerHTML = "FORM STATUS: SUCCESS";

Make sure to use your own trigger urls, which can be found in ‘Overview’ for each function app. Once script.js works, redeploy your static webapp.

Step 7: CELEBRATING!!

Congratulations! You have built a web app from scratch and, more importantly, have saved yourself plenty of money and frustration when it comes to shopping on Amazon. This is no easy feat, but I hope you have enjoyed coding this project as much as I have. If you would like to refer to my code, here is the link to my Github repository for the project. Thank you for reading this article, and please leave any feedback or questions in the comments.

Special Thanks:

I would also like to thank BitProject and Microsoft, who inspired me to create this project! I am grateful to have learned about cloud computing and Azure in such a fun and engaging way.

Creating a File Sharing and Conversion Web App with Azure Functions

Emily Chen — Sun, 20 Dec 2020 01:44:38 +0000

If you or someone you know participated in this year's AP Collegeboard Exams, you probably recognize the stress of submitting handwritten work within a small time constraint.

Bunnimage aims to help alleviate that stress for students and others working at home. It takes an image as an input on an upload page and converts it into a PDF that is available at a download page.

Overview

In this tutorial, we'll be walking through:

Creating the "Upload" page and an HTTP Trigger Function that will upload the user's image to a storage container.
Setting up an Event Grid Subscription and a Function that converts the image into a PDF and stores it again.
- This is where the API will live!
Creating the "Download" page and an HTTP Trigger Function that retrieves the correct PDF.
Optional For those who are interested, we can add another Function to delete the files and keep our containers squeaky clean.
- Note: The diagram above excludes the optional deletion feature.

You can find a sample of the final product at my Github repository.

Before we start:

Make sure you have an Azure Subscription so we can utilize the amazing features of Microsoft Azure Functions (It's free!) 🤩
Register for an account on Online Convert (with the free version), as we will be using this API convert our images
If you want to host your website somewhere, check out Repl.it, or you can just have your project run locally

Step 1: Upload the image ⬆️

Creating a Function App

We're going to have a lot of triggers in this project, so let's get started by creating a Function App! Follow those steps to create the Function App, and then create the first HTTP trigger (this will upload our image).

Note: it will be helpful if you keep track of these strings for reference later in the project: Storage account name (found in "Hosting"), Function app name, Resource Group

Before we start coding the trigger, though, we need to install some npm packages/libraries.

Click on the "Console" tab in the left panel under "Development Tools".

Inside the console (shown on the right panel), type in the following commands:

npm init -y

npm install parse-multipart

npm install node-fetch

npm install @azure/storage-blob

Tip: The Azure Storage Blob client library is going to be a key piece of the project. After all, it's about blobs!

Setting up your storage account

This is the storage account you created when creating the Function App. If you don't know what it is, search "Storage Containers" in the query box in Azure portal.

We're going to need to create 2 containers: "images" and "pdfs." Think of these as folders in the account.

You will need to upgrade your storage account because Event Grid Subscriptions will only work with a v2 version. Follow this tutorial to upgrade it.

**Writing our First Azure Function to Upload an Image**

⬇ Some housekeeping...

For the function to work, we have to initialize the packages/libraries we installed in the beginning of part 1.
Take note of the process.env value being assigned to connectionstring in the code below (Line 3). Use this tutorial to add in your own secret strings from your storage container.
- The storage container is the one you created when you started your Function App. Navigate to it and find your secret strings here:
- Keep these safe, and use the connection string in the corresponding variable in the code.
- Note: You'll need to store other strings in environment variables later on in the tutorial

Let's start just by initializing a few variables we'll need.

⬇ The main block of code

Notice that we are able to name the file with the user's username in line 10 by receiving it from the header.
- Later on in the JS, we will send the username in the header of the request.
The parse-multipart library is being used in lines 4-11 to parse the image from the POST request we will later make with the frontend; refer to the documentation linked above.
Some if-else logic is used from lines 13-22 to determine the file extension.
We then call the uploadBlob() function in line 24.

⬇ Uploading the image blob to the "images" container

Notice the uploadBlob() function! This is what uploads the parsed image to the specified "images" blob container.
- Here's a YouTube Video to help explain the handy dandy library

Frontend: The "upload" webpage

Next, I created a static HTML page that will accept the image from the user and send to the Azure Function we just coded using Javascript.

Note: I removed unnecessary sections of my code because I wanted to make the webpage ✨fancy✨, but you can see the whole thing here.

Above we have:

Input box for the username (simple but insecure auth system)
Button to submit

However, a static HTML webpage can't make a request to the Azure Function itself, which is where we're going to cook up some JS. 😯

Frontend: Javascript for interacting with the Azure Function

This block of Javascript updates the preview thumbnail while getting the picture, gets the username, and sends them both over to the function we just coded.

First, loadFile() is called when the file input changes to display the thumbnail.

async function loadFile(event){
    console.log("Got picture!");
    var image = document.getElementById("output");
    // Get image from output 
    image.src = URL.createObjectURL(event.target.files[0])
    // load inputted image into the image src and display
}

Then, handle() is called when the file is submitted to POST the image and username. The image is sent in the body, and username is sent as a header. Lines 15-30

Be sure to change the function url on Line 19 to the one of your upload image Function!

Deploy your code

Try doing it locally with the live server extension for VS Code
Try Azure Web Apps
I personally used repl.it

Update CORS Settings

This is a crucial step!! 😱 If you don't change your CORS (Cross-origin resource sharing) settings, the POST request won't work. This tells the Function App what domains can access our Azure Function.

Options:

Recommended: Change it to a wildcard operator (*), which allows all origin domains to make requests
- Be sure to remove any other existing inputs before attempting to save with wildcard
Change it to the domain you are using to host your code

Home stretch! 🏃🏻‍♀️

It's finally time to test our first step that our app will make!

Navigate to your HTML page and submit an image

Go to the "images" storage container and check to see if your image is there!
Error? Check the log in your Function

Step 2: Convert The Image 🔄

Create another Azure Function

Yep... We need yet another Azure Function. (What can I say? They're pretty helpful.) This one will trigger when the image blob is stored, then convert it into a PDF, and store it in the "pdfs" container.

However, this time, it will be an Event Grid Trigger, so make sure you select the right one!

What's the difference?

Event Grid Triggers trigger based on an Event Grid Subscription, which we will create later in this step. Our trigger will fire when a blob is stored in the "images" container

HTTP Triggers fire when a GET or POST request is made to the endpoint (function URL)

Commercial Break 📺

Let's recap:

Step 1 ✅: We created the "Upload" page and an HTTP Trigger Function that uploaded the user's image to a storage container.
Step 2: We will create an Event Grid function that converts the image into a PDF by calling the Online Convert API and will upload the PDF to blob storage.

⚠😵WARNING😵⚠ Lots of code ahead, but it's all good! I split it into sections.

First off, the Online-Convert API!

We're going to need to get another secret key, except this time from the API. Here's how to get that.
Once again, save it in your environment variables so it's accessible.
Note: This API does have restrictions on the amount of conversions during 24 hours, so just be aware that you may get an error after reaching the limit.

⬇ This convertImage() function does exactly what it's called: convert the image by calling the Online-Convert API. Here's some documentation around how to use the API with Azure Blob Storage.

async function convertImage(blobName){
    const api_key = process.env['convertAPI_KEY'];
    const accountKey = process.env['accountKey'];
    const uriBase = "<https://api2.online-convert.com/jobs>";
    // env variables (similar to .gitignore/.env file) to not expose personal info
    // check out documentation 
    img = {
    "conversion": [{
        "target": "pdf"
    }],
    "input": [{
        "type": "cloud",
        "source": "azure",
        "parameters": {
            "container": "images",
            "file": blobName
        },
        "credentials": {
            "accountname": "bunnimagestorage",
            "accountkey": accountKey
        }
    }]
    }

    payload = JSON.stringify(img);

    // making the post request
    let resp = await fetch(uriBase, {
        method: 'POST',
        body: payload,
        // we want to send the image
        headers: {
            'x-oc-api-key' : api_key,
            'Content-type' : 'application/json',
            'Cache-Control' : 'no-cache'
        }
    })

    // receive the response
    let data = await resp.json();

    return data;
}

⬇To check the status of the conversion and determine whether we can store the PDF to blob storage yet, let's use this checkStatus() function that makes a request to the same https://api2.online-convert.com/jobs endpoint, except with a GET request instead of POST.

async function checkStatus(jobId){
    const api_key = process.env['convertAPI_KEY'];
    const uriBase = "<https://api2.online-convert.com/jobs>";
    // env variables to keep your info private!

    // making the post request
    let resp = await fetch(uriBase + "/" + jobId, {
        /*The await expression causes async function execution to pause until a Promise is settled 
        (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment. 
        When resumed, the value of the await expression is that of the fulfilled Promise*/
        method: 'GET',
        headers: {
            'x-oc-api-key' : api_key,
        }
    })

    // receive the response
    let data = await resp.json();

    return data;
}

Then we can use the same uploadBlob() function from before to upload our object!

After this we get to the main section of our code.

⬇It gets the blobName, calls the functions, and downloads the PDF to be stored.

The blobName is retrieved from the EventGrid subscription subject* in lines 10-11
Because the API does not convert the image immediately, we need a while loop to repeatedly check for the status of the conversion in lines 21-36
The last portion is used to download the converted PDF by sending a GET request to the URI from the completed file conversion response. Lines 43-47

What's a subject? This part of the Event response contains information about what specific file caused the Azure Function to fire. For example: /blobServices/default/containers/test-container/blobs/new-file.txt where the file is new-file.txt

Now that the long block of code is done with, let's take a look at some responses you should expect from the API.

This is what you would get if the file is still converting 🤔
Here's what you would get when the conversion is complete! (yay) 🥳

In particular, there are 3 important pieces of the output we should examine:

update.status.code: This tells us whether its done processing or not
update.output[0].uri: This gives us the URL where we can download the PDF (used in the last GET request)
result.id: Gives the ID of the file conversion "job" so we can continually check for its status

Before we can test our code, we need one last step: the trigger!

Creating an Event Subscription

When the image blob is stored in the "images" container, we want the conversion from jpg/jpeg/png to pdf to begin immediately!

Just like how "subscribing" to a YouTube channel gives you notifications, we're going to subscribe to our own Blob Storage and trigger the Azure Function.

Tip: You'll want to keep the names for your storage account and resource group handy.

Search "Event Grid Subscriptions" in the search bar
Click "+ Event Subscription" in the top left
Fill in the form to create the Event Subscription:

If it asks you for a name, feel free to put anything you want - I named it "fileUploaded"
Under Topic Types, select "Storage Accounts"
The "Resource Group" is the Resource Group that holds your storage account
The "Resource" is your storage account name

Note: If your storage account doesn't appear, you forgot to follow the "upgrade to v2 storage" step

Under Event Types: filter to Blob Created

The "Endpoint Type" is "Azure Function"

The "Function" is the function we want triggered when an image is uploaded, so the convertImage function
Tweaking some settings...
Navigate to the "Filters" tab and "Enable Subject Filtering"
Change the "Subject Begins With" to /blobServices/default/containers/images/blobs/
- This way, the subscription will not trigger when a PDF is stored in the "pdfs" container. It will only trigger when something is stored in "images."

Congratulations! You have now subscribed to the "blob created" event in your "images" container that triggers the convert image function!

Upload a converted PDF to the "pdfs" container!

Now that we've connected our Functions and frontend together with an Event Grid Subscription, try submitting another image to check if it successfully uploads as a PDF into the "pdfs" container.

If you used my code and have the same context.log()s, you should get something like this when the PDF uploads:

Step 3: Downloading the PDF on the HTML page ⬇

Now that we have a PDF stored in the "pdfs" container, how will we get the PDF back to the user? You got it right, yet another Azure Function!

Create another HTTP Trigger - this one will return the PDF download URL to the frontend when triggered.

Commercial Break 📺

Let's recap:

Step 1 ✅: We created the "Upload" page and an HTTP Trigger Function that uploaded the user's image to a storage container.
Step 2 ✅: We will create an Event Grid function that converts the image into a PDF by calling the Online Convert API and will upload the PDF to blob storage.
Step 3: We will create a HTTP Trigger function that returns the PDF to the user when triggered by the "Download" page.
Step 4: Optional If you choose, create another HTTP Trigger function and modify other code to delete the image and PDF blobs from storage containers once they are unneeded.

Azure Functions: Check if the PDF is ready to be served 🍝

⬇First, it receives the username to get the correct PDF from the header of the request, which is made by the webpage. You will see this request later on in the JS of this step.

var fetch = require("node-fetch");
module.exports = async function (context, req, inputBlob) {
    context.log('JavaScript HTTP trigger function processed a request.');

    var username = req.headers['username'];
    var download = "<https://bunnimagestorage.blob.core.windows.net/pdfs/>" + username + ".pdf";

⬇Then, using the personalized URL, it performs a GET request to check if the PDF has been stored in the "pdfs" container.

    let resp = await fetch(download, {
        method: 'GET',
    })
    let data = await resp;
    if (data.statusText == "The specified blob does not exist.") {
        success = false;
        context.log("Does not exist: " + data)
    } else {
        success = true;
        context.log("Does exist: " + data)
    }

⬇The function then returns the URL for downloading the PDF and whether or not the PDF is ready for download to the webpage.

    context.res = {
            body: {
                    "downloadUri" : download,
                    "success": success,
            }
    };
    // receive the response

    context.log(download);
    context.log(data)
    context.done();
}

Frontend: Creating the Download HTML page

Once again, the "fancy" stuff is omitted.

⬆Like we created the "upload" page in Step 1, we now need a "download" page for users to receive the PDF.

This piece of code creates:

An input for the username Line 6
One button for refreshing to check if the PDF is ready Line 8
One button for downloading the file Line 9

Frontend: Downloading the PDF on the Webpage

Time to get bombarded with some lovely JS!

Part 1 ⬇:

Change the HTML on lines 2-4 to display the current status (whether it's looking for the PDF, whether it's ready for download, etc.)
Make a request on lines 9-16 to the HTTP Trigger Function we just coded, sending the username inputted on the HTML page along with it

Part 2 ⬇:

First we're going to find the link to download the PDF with data.downloadUri on line 1
Change buttons from "Refresh" to "Download" when PDF is ready for download
- How to do this? Remove the "Refresh" button Lines 10-11 and make "Download" visible Line 9
Set the onclick attribute of the "Download" button to call the getPdf() function with the unique username + link for download. Line 8
- The getPdf() function allows for immediate download with window.open(link) Lines 16-19

Amazing! You're done!

Here's the finished product in which I download the cute bunny shopping picture I uploaded earlier.

Congratulations! I hope this knowledge of Azure Functions helps you create even more fun apps!

If you're interested in augmenting this app, try using your new knowledge of Blob Storage, HTTP Triggers, the Node SDK (@azure/storage-blob), and some Stack Overflow to assist you to add a feature to delete the image and PDF blobs.