Week 4 Step 1 ⬤◯◯◯◯◯◯ | 🕐 Estimated completion: 20-25 minutes

Adding an Event Listener to your HTML Form!

Demo: 🐰

Congrats! If you made it this far, your Azure functions can now return data. However, users won't want to make POST requests with Postman to use your API though, so let's make it more user friendly.

✅ Task:

• 1: Create a bunnimage-frontend branch
• 2: Install LiveServer for testing
• 3: Optional Learn HTML basics with the interactive course
• 4: Write JavaScript to listen for the form to be submitted and call a function
• 5: Write a function in index.js to display input appended with a ❤️ in the output div
• 6: Commit your code to bunnimage/index.html and bunnimage/script.js
• 7: Create a pull request that merges bunnimage-frontend to main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Use LiveServer! This is a helpful VSCode extension that allows you to see your HTML that updates while you edit it.

‼️ Create & Reference index.js in index.html

    <script src="index.js" type="text/javascript"></script>

1: Writing the Event Handler Function!

On websites, there are many different types of events that can occur. For example:

• The user selects a certain element or hovers the cursor over a certain element.
• The user chooses a key on the keyboard.
• A form is submitted.
• Curious for more? Look here

We need to create a function which triggers when someone submits an image,
but first we will create a function which changes content on the page when we
submit text.

const bunnForm = document.getElementById('bunnForm');

bunnForm.addEventListener('submit', function (event) {
  const username = document.getElementById("username").value
});

event.preventDefault()

bunnForm.addEventListener('submit', function (event) {
   event.preventDefault()
   const username = document.getElementById("username").value
   const output = document.getElementById("output")
   output.textContent = username + "❤"
});

2: How do I trigger the function when the form is submitted?

The event listener triggers the JavaScript function when the form is submitted.
Here is how the form should look in the bunnimage index.html file:

<form id="bunnForm">
   <label for="name">Code: </label> <br>
   <input type="text" id="username" name="name" aria-label="name" /> <br>
   <input value="Submit" type="submit" />
</form>
<br/>
<div id="output"></div>

Here is the JavaScript which should be in a separate JavaScript file index.js:

const bunnForm = document.getElementById('bunnForm');

bunnForm.addEventListener('submit', function (event) {
   event.preventDefault()
   const username = document.getElementById("username").value
   const output = document.getElementById("output")
   output.textContent = username + "❤"
});

💡 the for attribute in the <label> and the aria-label attribute in the <input>element make the website more accessible to users needing assistive technologies such as screen readers.

📹 Walkthrough Video

Click the big green button that says Submit new issue, and you'll be good to go!

Week 4 Step 5 ⬤⬤⬤⬤⬤◯◯ | 🕐 Estimated completion: 5-20 minutes

Create the CataaS Website ~ meow

Demo: 🐱

Create a website that return a picture from the CatAAS API with the name of the cat being the input (each click should call the Cataas API)

✅ Task:

• 1: Create a new twocatz-frontend branch
• 2: Create an form page in a new HTML file called catzapp/index.html with a text input (type="text") and a button (type="button") that calls the Javascript function y1k3s() in twocatz/index.js
• 3: Create a img object with id image in catzapp/index.html
• 4: Write the y1k3s() function that replaces the img div with a picture from the CataaS API containing input from the text box
• 5: Commit your changes to catzapp/index.html and catzapp/script.js to the twocatz-frontend branch
• 6: Create a pull request that merges twocatz-frontend to main, and only merge the pull request when the bot approves your changes!

💡 Tip: It's a good idea to name your tags with id, since you'll then be able to use document.getElementById for modifying and getting values.

🚨 NOTE: The CounselorBot will be checking the code to see if you use the CataaS API endpoint. However, if the API is down, you may use the substitute version for testing purposes. Make sure to change it back when you submit your code!

🚧 Test your Work

Open up your LiveServer plugin and start your local server. To test your web app:

⚠️ When you enter "catzrule" into the textbox and click the button, is there a picture that appears with a cat and "catzrule" on it?

1: Creating an HTML template

In Visual Studio Code, you can create a html template containing the basic header tags by typing ! + Tab. This will create something like:

<!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>Document</title>
</head>
<body>
    
</body>
</html>

Everything that appers on the page will be in the <body> tags, and this is where you will be adding most (if not all of your html code.

2: Getting the Cat Pic

The img tag embeds an image, and it has attributes. We'll be using src.

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

 document.getElementById("YOUR_IMAGE_ID").src = THE_ENDPOINT + THE_INPUT

📹 Walkthrough Video

Final Project Step 7 ⬤◯◯◯◯◯ | 🕐 Estimated completion: 30 mins

Continuing your work...

✅ Task:

• Continue working in the final-project branch
• Review all of the issues that are currently open:
  • Close the issues that you have completed
  • Add 3-4 more issues based on the work you plan on doing this week (if they are not already there)
  • Label the issues you want to work on as "Priority"
  • Label the issues that you need your mentor's help with as "mentor" and send them to your mentor to review before your meeting
• 🚀 Commit any changes to the final-project branch, make a pull request, and merge it

Week 4 Step 1 ⬤◯◯◯◯◯◯ | 🕐 Estimated completion: 20-25 minutes

Adding an Event Listener to your HTML Form!

Demo: 🐰

Congrats! If you made it this far, your Azure functions can now return data. However, users won't want to make POST requests with Postman to use your API though, so let's make it more user friendly.

✅ Task:

• 1: Create a bunnimage-frontend branch
• 2: Install LiveServer for testing
• 3: Optional Learn HTML basics with the interactive course
• 4: Write JavaScript to listen for the form to be submitted and call a function
• 5: Write a function in index.js to display input appended with a ❤️ in the output div
• 6: Commit your code to bunnimage/index.html and bunnimage/script.js
• 7: Create a pull request that merges bunnimage-frontend to main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Use LiveServer! This is a helpful VSCode extension that allows you to see your HTML that updates while you edit it.

‼️ Create & Reference index.js in index.html

    <script src="index.js" type="text/javascript"></script>

1: Writing the Event Handler Function!

On websites, there are many different types of events that can occur. For example:

• The user selects a certain element or hovers the cursor over a certain element.
• The user chooses a key on the keyboard.
• A form is submitted.
• Curious for more? Look here

We need to create a function which triggers when someone submits an image,
but first we will create a function which changes content on the page when we
submit text.

const bunnForm = document.getElementById('bunnForm');

bunnForm.addEventListener('submit', function (event) {
  const username = document.getElementById("username").value
});

event.preventDefault()

bunnForm.addEventListener('submit', function (event) {
   event.preventDefault()
   const username = document.getElementById("username").value
   const output = document.getElementById("output")
   output.textContent = username + "❤"
});

2: How do I trigger the function when the form is submitted?

The event listener triggers the JavaScript function when the form is submitted.
Here is how the form should look in the bunnimage index.html file:

<form id="bunnForm">
   <label for="name">Code: </label> <br>
   <input type="text" id="username" name="name" aria-label="name" /> <br>
   <input value="Submit" type="submit" />
</form>
<br/>
<div id="output"></div>

Here is the JavaScript which should be in a separate JavaScript file index.js:

const bunnForm = document.getElementById('bunnForm');

bunnForm.addEventListener('submit', function (event) {
   event.preventDefault()
   const username = document.getElementById("username").value
   const output = document.getElementById("output")
   output.textContent = username + "❤"
});

💡 the for attribute in the <label> and the aria-label attribute in the <input>element make the website more accessible to users needing assistive technologies such as screen readers.

📹 Walkthrough Video

Week 1 Step 1 ⬤◯◯◯◯◯◯◯◯ | 🕐 Estimated completion: 5-20 minutes

GitHub

This week, you will be going through steps to set up tools needed to be successful in this camp. If you are already familiar with some, feel free to skip to the end and complete the task to move on.

✅ Tasks:

• 1: Optional: complete the get started with GitHub guide.
• 2: Create a new branch named test.
• 3: Add a paragraph introducing yourself under the About Me section in the blog.md file in root.
• 4 Commit the change to test, make a draft pull request to your main branch, naming it Adding self introduction and add a detailed description of your contribution. Then, click Ready for Review and merge the pull request once the CounselorBot approves it!

💡 Tip: You will only need to make a draft pull request for Week 1 Step 1. For the rest of the curriculum, you may create "regular" pull requests!

Making a Draft Pull Request

❓ When you're collaborating on GitHub with other developers, sometimes you might want to make a draft pull request before your code is ready to be reviewed! We can simulate this with the CounselorBot, and we will only be doing so with Week 1 Step 1.

Want a video demo? Click here!

Instead of clicking Create Pull Request, click the drop down arrow and click Create Draft Pull Request. Then, click Ready for Review. This allows the CounselorBot to review your pull request to check if you're ready to go!

What is GitHub?

GitHub is a industry-standard platform allows developers to save and collaborate on code. You can use GitHub to manage your files, changes in your project, version control (the ability to revert back to previous versions of your code as well as versions developed by other programmers), and more.

Check out "The Github Flow" for more information on issues, pull requests, committing, and branches!

If you want to learn more about what it is and how to use it, try taking this GitHub Learning Lab Course. After finishing it, you will have a strong understanding of all the features GitHub has to offer.

Key functions you should be familiar with after this task include:

• Committing changes
• Forking a repository
• Making a new branch
• Making a pull request

📹 Walkthrough Video

Week 2 Step 3 ⬤⬤⬤◯◯◯◯◯ | 🕐 Estimated completion: 10-30 minutes

Getting Emotional ~ With the Face API

Remember back in step 1 we used Postman to call the API? Well we are going to call the Face API with our Azure Function!

✅ Task:

Create an Azure function that can send a static image to the Face API that returns emotion data

• 1: Add Face API Keys and endpoint into your Function App's application settings.
• 2: Edit your function to make a request to the Face API using node-fetch and send back the emotion data in the body in JSON format body: {the_data}
• 3: Place your function URL in a repository secret called EMOTIONAL_ENDPOINT and commit your code to emotionalgifs/index.js on the emotionalgifs branch.
• 4: Create a pull request to merge emotionalgifs onto main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Use Postman! Paste the function url and make a POST request. Remember to attach the file in Body! In the output box, you should get the output. Make sure you're using an image with a real face on it or else it won't work. Here's an example of an output I get with this image:

{
  "result": [
    {
      "faceId": "a16f522d-0577-4e50-97cb-1feeef7aaf2e",
      "faceRectangle": {
        "top": 313,
        "left": 210,
        "width": 594,
        "height": 594
      },
      "faceAttributes": {
        "emotion": {
          "anger": 0,
          "contempt": 0,
          "disgust": 0,
          "fear": 0,
          "happiness": 1,
          "neutral": 0,
          "sadness": 0,
          "surprise": 0
        }
      }
    }
  ]
}

1. Define keys to authenticate the request

This function takes in one parameter, img, that contains the image we're trying to analyze. Inside, we have two variables involved in the call: subscriptionKey and uriBase.

The process.env object allows you to access super-secret values in your backend. This prevents hackers from getting your keys and doing bad stuff (like exploiting your resources).

async function analyzeImage(img){
    const subscriptionKey = process.env.SUBSCRIPTIONKEY;
    const uriBase = process.env.ENDPOINT + '/face/v1.0/detect';
}

Follow this Documentation to save your keys in your Function App's application settings.

• Get started in the Azure portal
• Work with application settings

💡 When you put the key and endpoint in Azure's application settings, it will only work after it is deployed and running with the Azure function url. In order to use postman and test this on your computer before deploying to Azure, you will need to code the subscriptionKey and uriBase like this:

const subscriptionKey = "YOUR_SUBSCRIPTIONKEY"
const uriBase = "YOUR_LOCALHOST_URL"

💡 Afterwards, when commiting the code to github for the counselorbot to check, you will need to replace the hardcoded subscriptionKey and uriBase variables with process.env.SUBSCRIPTIONKEY and process.env.ENDPOINT

2: Call the FACE API

Create a new function analyzeImage(img) outside of module.exports that will handle analyzing the image. Keep in mind this function is async because we will be using the await keyword with the API call.

Get your Face API keys ready! We need to let our Face API know that we are authenticated to access this resource.

❓ How do you specify the parameters for your request!

In order to specify all of our parameters easily, we're going to create a new URLSearchParams object. Here's the object declared for you. I've also already specified one parameter, returnFaceId, as true to provide an example. Add in a new parameter that requests emotion.

Remember, these parameters are coming from the Face API documentation!

let params = new URLSearchParams({
	'returnFaceId': 'true',
	'<PARAMETER NAME>': '<PARAMETER VALUE>'     //FILL IN THIS LINE
})

🛠️ Calling the API

In the same way we installed parse-multipart, install node-fetch.
Read the API section of the documentation. We're going to make a call using the fetch(url, {options}) function.

To call the fetch function - use the await keyword, which we need because fetch returns a Promise, which is a proxy for a value that isn't currently known. You can read about Javascript promises here.

API Documentation can be tricky sometimes...Here's something to help

💡 Request Headers tell the receiving end of the request what type of data is in the body.

    //COMPLETE THE CODE
    let resp = await fetch(uriBase + '?' + params.toString(), {
        method: '<METHOD>',  //WHAT TYPE OF REQUEST?
        body: '<BODY>',  //WHAT ARE WE SENDING TO THE API?
      
      	//ADD YOUR TWO HEADERS HERE
        headers: {
            '<HEADER NAME>': '<HEADER VALUE>'
        }
    })

async function analyzeImage(img){
    
    const subscriptionKey = '<YOUR SUBSCRIPTION KEY>';
    const uriBase = '<YOUR ENDPOINT>' + '/face/v1.0/detect';
    let params = new URLSearchParams({
        'returnFaceId': 'true',
        'returnFaceAttributes': 'emotion'
    })
    //COMPLETE THE CODE
    let resp = await fetch(uriBase + '?' + params.toString(), {
        method: '<METHOD>',  //WHAT TYPE OF REQUEST?
        body: '<BODY>',  //WHAT ARE WE SENDING TO THE API?
        headers: {
            '<HEADER NAME>': '<HEADER VALUE>'  //do this in the next section
        }
    })
    let data = await resp.json();
    
    return data; 
}

⏬ Receiving Data

Call the analyzeImage function in module.exports. Add the code below into module.exports.

Remember that parts represents the parsed multipart form data. It is an array of parts, each one described by a filename, a type and a data. Since we only sent one file, it is stored in index 0, and we want the data property to access the binary file– hence parts[0].data. Then in the HTTP response of our Azure function, we store the result of the API call.

//module.exports function
//analyze the image
const result = await analyzeImage(parts[0].data);
context.res = {
	body: {
		result
	}
};
console.log(result)
context.done(); 

📹 Walkthrough Video

Week 3 Step 6 ⬤⬤⬤⬤⬤⬤◯◯◯ | 🕐 Estimated completion: 10-20 minutes

Can you keep a secret?

This week, you will be going through steps to set up a Twilio account and create an Azure function that texts your Twilio number.

✅ Task:

• 1: Create a new branch named deepsecrets
• 2: Create an HTTP Trigger Azure Function and add its URL to a repository secret named DEEPSECRETS_ENDPOINT
• 3: Fill in the Azure Function URL as a webhook
• 4: Code the Function so that it returns the message it was sent
• 5: Test your function by texting your Twilio number and seeing output texted back to yourself.
• 6: Commit your function code to deepsecrets/index.jsto the deepsecrets branch
• 7: Create a pull request that merges deepsecrets to main, and only merge the pull request when the bot approves your changes!

🚧 Test Your Work

To test your work, try texting a message to your Twilio number - you should receive a text message back that repeats your own message.

💡 Yay! This means you've successfully configured your Twilio webhook.

Set Up a Twilio Account

Since you should already have a trial Twilio Account from Week 2, you will only need to reconfigure the webhook URL. You will use the same phone number as before.

1: Create an Azure Function

Next, we'll want to create an Azure Function that will eventually output the content of texts that your Twilio number receives. This will just be a simple HTTP trigger function.

Finally, we need to install the npm package qs to use in our function code later.

2: Configure Your Webhook URL

When someone sends a text message to your Twilio number, Twillio can call a webhook: your Azure Function. You can send a reply back simply by returning your message in the request body.

We'll configure the Webhook URL by filling in the Azure Function URL as a webhook.

3. Write your Azure Function

Now, we'll want to write our Azure Function. Go to the code for the function you created previously in this step.

First, we'll need to instantiate our qs npm package in order to use it.

const querystring = require('qs');

Next, we'll use the querystring object to parse our request's body.

const queryObject = querystring.parse(req.body);

From this output, we'll find its Body attribute and return it.

context.res = {
   body: queryObject.Body
};

📹 Walkthrough Video

Week 3 Step 2 ⬤⬤◯◯◯◯◯◯◯ | 🕐 Estimated completion: 10-20 minutes

Upload it!

This week, you will be going through steps to upload images to blob storage using Azure's SDK.

✅ Task:

• 1: Receive an image from a POST request using parse-multipart
• 2: Upload an image using @azure/blob SDK by naming the image test + the correct file extension
• 3: Store your function url to your repository secrets with the name BUNNIMAGE_ENDPOINT, add your blob url to your repository secrets with the name blob_url.
• 4: Commit your updated function code to bunnimage/index.js on the bunnimage branch
• 5: Create a pull request and only merge the pull request when the bot approves your changes!

🚧 Test Your Work

To test your work, you'll be using Postman to send a POST request in Postman with an image in the body to your function url. You should see a response similar to the below:

{
  "body" : "File Saved"
}

💡 Yay! This means it was successfully saved.

Writing our First Azure Function to Upload an Image

❓ How do I find my secret strings?

These are the same ones you added in your repository secrets in step 1. Here is a review:

• Note: You'll need to store these strings in environment variables as well, if you don't want to accidentally commit them. You can access these with process.env['thesecretname']

1: Reviewing parse-multipart to receive an image

In your main module.exports function, you'll want to use the parse-multipart library to parse the image from the POST request. Then you'll determine the fle extension, and then upload the file using an uploadFile() function we'll write later on.

const boundary = multipart.getBoundary(req.headers['content-type']);
const body = req.body;
const parsedBody = multipart.Parse(body, boundary);

2: Uploading the image

Let's start out by writing the function we can call to upload an iamge.

⬇ Uploading the image blob to your container

Our uploadFile function will be an asynchronous function that uses the BlobServiceClient to get a reference to the container, create a blob, and upload the data to that blob.

async function uploadFile(parsedBody, ext)

const blobServiceClient = BlobServiceClient.fromConnectionString(connectionString);
const containerName = "<YOUR_CONTAINER_NAME>";
const containerClient = blobServiceClient.getContainerClient(containerName);    // Get a reference to a container

const blobName = 'test.' + ext;    // Create the container
const blockBlobClient = containerClient.getBlockBlobClient(blobName); // Get a block blob client

const uploadBlobResponse = await blockBlobClient.upload(parsedBody[0].data, parsedBody[0].data.length);

💡 Be sure to return a string like "File Saved" from this function when the file has been uploaded!

Heading back to the module.exports main function

❗ Name your image file as test.png or test.jpg (depending on the submitted file extension) in our code for testing purposes.

let filetype = parsedBody[0].type;
if (filetype == "image/png") {
    ext = "png";
} else if (filetype == "image/jpeg") {
    ext = "jpeg";
} else if (filetype == "image/jpg") {
    ext = "jpg"
} else {
    username = "invalidimage"
    ext = "";
}

let responseMessage = await uploadFile(parsedBody, ext);
context.res = {
    body: responseMessage
};

4: Add your Blob URL as a secret

You'll need to add your Blob URL to the github repository as a secret so we can test it! Name our secret to blob_url and set it equal to your blob url, which should look like "https://bunnimagestorage.blob.core.windows.net". To find your url, simply place your storage account name in this template:

https://<your account name>.blob.core.windows.net

📹 Walkthrough Video

Week 2 Step 8 ⬤⬤⬤⬤⬤⬤⬤⬤ | 🕐 Estimated completion: 5-10 minutes

Ok, Boomer 😐

✅ Task:

Modify your Azure Function so that it texts the user back with a song.

• 1: Retrieve song url from a JSON object

  const songs = {"GenZ":"https://open.spotify.com/track/0SIAFU49FFHwR3QnT5Jx0k?si=1c12067c9f2b4fbf", 
  "GenY":"https://open.spotify.com/track/1Je1IMUlBXcx1Fz0WE7oPT?si=a04bbdf6ec4948b9", 
  "GenX":"https://open.spotify.com/track/4Zau4QvgyxWiWQ5KQrwL43?si=790d9e3ef2ed408d", 
  "BabyBoomers":"https://open.spotify.com/track/4gphxUgq0JSFv2BCLhNDiE?si=1abb329f2dc24f50", 
  "Unknown":"https://open.spotify.com/track/5ygDXis42ncn6kYG14lEVG?si=84b49b41d09d4d11"}

• 2: Use ${} to quickly insert strings
• 3: Return the url with a personalized message in the body of the request formatted like

We guessed you're part of this generation: [insert generation]! Happy listening! [song link]`

• 4: Commit your updated code to song4u/index.js in the song4u branch, and only merge the pull request when the bot approves your changes!

🚧 Test Your Work

To test your work, try texting a jpg image to your Twilio number (with a face!). You should receive a text back that contains the required message format.

Example:

Sent from your Twilio trial account - We guessed you're part of this generation: GenZ! Happy listening! https://open.spotify.com/track/0SIAFU49FFHwR3QnT5Jx0k?si=1c12067c9f2b4fbf

Working with JSON

JSON has keys and values. In our case, the generation is the key, and the url is the value.

See if you can determine the url with this syntax:

let value = json_object[key]

Shortcuts with Strings

You might be used to concatenating strings and variables like this:

let string = "Hello " + name

That can get tiring, though. Try this syntax:

let string = `Hello ${name}`

📹 Walkthrough Video

Final Project Step 7 ⬤◯◯◯◯◯ | 🕐 Estimated completion: 30 mins

Continuing your work...

✅ Task:

• Continue working in the final-project branch
• Review all of the issues that are currently open:
  • Close the issues that you have completed
  • Add 3-4 more issues based on the work you plan on doing this week (if they are not already there)
  • Label the issues you want to work on as "Priority"
  • Label the issues that you need your mentor's help with as "mentor" and send them to your mentor to review before your meeting
• 🚀 Commit any changes to the final-project branch, make a pull request, and merge it

Week 1 Step 7 ⬤⬤⬤⬤⬤⬤⬤◯◯ | 🕐 Estimated completion: 5-15 minutes

Name your Cat

✅ Task:

• Run git pull
• 1: Modify your Azure Function to output TWO generated cat pictures from the cat API and TWO random names from list below:
  • "Shreya, Emily, Fifi, Beau, Evelyn, Julia, Daniel, Fardeen"
  • Use the CataaS API endpoint: https://cataas.com/cat/cute/says/Bitcamp
• 2: Return the images, encoded in base64, and names in JSON format in the body

  body: {
      cat1: your-first-catpicture-in-base64,
      cat2: your-second-catpicture-in-base64,
      names: [name1, name2]
  }

• 3: Commit your updated function code in twocatz/index.js to the twocatz branch, create a pull request, and only merge the PR when the bot approves your changes!

🚨 NOTE: If the CataaS API is not working, please use this alternate endpoint: https://bit-cat.azurewebsites.net/cat/says/serverless

🚧 Test your Work

When you paste your Function URL in your browser or make a GET request with Postman, you might get something like:

{
  "cat1": "/9j/4AAQSk...",
  "cat2": "R0lGODlhCwHI...",
   "names": [
    "Daniel",
    "Shreya"
  ]

1: Select random items out of a list

1. Create an array with the names first
2. Generate a random number within the range of the array length

let names = ["name1", "name2"...]

let random_value = Math.floor(names.length * Math.random())

let resultname = names[random_value]

2: Return images in JSON format

context.res is the key to answering this question!

context.res = {
    body: {
        cat1: your-first-catpicture-in-base64,
        cat2: your-second-catpicture-in-base64,
        names: [name1, name2]
    }
}

📹 Walkthrough Video

Final Project Step 2 ⬤⬤◯◯◯◯ | 🕐 Estimated completion: 30 minutes

Laying out the groundwork

✅ Task:

• Make sure you're on the final-project branch
• Create a flowchart that demonstrates how different components in your project interact with each other
  • Create a new file on figma.com or whimsical.com called "Serverless Camp Project"
  • Include any Azure Functions and APIs you plan on using
• 🚀 Upload the flowchart as a jpg/png file in the "project" folder
• 🚀 Commit your changes to the final-project branch, make a pull request, and merge it

Mapping it out

To get started with building, you will first need to create a flowchart showing the flow of information and components you will include to make there project work. Nothing has to be finalized, but planning it out allows you to organize your ideas and thought processes.

Purpose of Programming Flowcharts

• Plan before the development phase - this helps you save a lot of hours of work
• Document your project and communicate how it works to others (this is really valuable when someone else is helping you debug your code)
• Prevent major technical issues with your code before you event start
• Ensure that you are more effectively using all the technologies available to you
• You will need to refer back to the flowchart while developing to review your work and sometimes come up with new ideas

Converting the checklist into a flowchart

1. Create a shape for each of the components from your checklist and label them inside their designated shape
2. Draw lines on all of the technologies that interact with each other
3. Near each line, use the previous bullet points you wrote to describe the relationship between the technologies starting with action verbs (e.g. between JS code/front-end --> Azure Function "Sends an HTTP Post Request with uploaded image)
4. Use arrow heads to show the direction in which one technology is impacting another

Week 3 Step 3 ⬤⬤⬤◯◯◯◯◯◯ | 🕐 Estimated completion: 10-20 minutes

Codename Blob + 3RR0R Handling

This week, you will be going through steps to handle POST requests with no data.

✅ Task:

• 1: Modify your function code so that it receives a header value called codename and uses it to name the image.
  • If an image isn't attached, return "Sorry! No image attached."
  • If an image is attached, return the output of the uploadFile() function
• 2: Commit your updated function code to bunnimage/index.js to the bunnimage branch.
• 3: Create a pull request that merges bunnimage onto main, and only merge the pull request when the bot approves your changes!

🚧 Test Your Work

To test your work, use Postman to send a POST request without an image attached. You should see a response similar to the below:

{
  "body" : "Sorry! No image attached."
}

💡 Yay! This means the error was successfully caught.

1: Modify the Function

Handle Empty Data

Now we'll want to handle cases where the POST request's body happens to be empty. In your original module.exports function, before you parse the body, make sure it exists! Only then should you upload your file to blob storage.

let responseMessage = ""
try {
    let password = // get the header called "codename"
    // use parse-multipart to parse the body
    // determine the file-type here!
    responseMessage = await uploadFile((place your parsedBody here), (place the extension here), (place the "codename" here));
    // fill the parameters in!
} catch(err) {
    context.log("Undefined body image");
    responseMessage = "Sorry! No image attached."
}

💡 Hint: You'll need to add another parameter to the uploadFile function since it now has to receive the body, extension, AND filename!

Headers

Headers are yet another way to pass on information in HTTP requests. Here's how to access them:

let the_header_value = req.headers['insert_header_name'];

In this case, the header value will be used to name our picture.

📹 Walkthrough Video

Week 2 Step 4 ⬤⬤⬤⬤◯◯◯◯ | 🕐 Estimated completion: 5-10 minutes

Getting Emotional ~ Returning the Dominant Emotion

✅ Task:

Modify your Azure Function so that it returns the Dominant Emotion of an Image.

• 1. In your function emotionalgifs, determine the dominant emotion in the emotion data and output the dominant emotion in the request body when you make a POST request
• 🚀 Commit your code to emotionalgifs/index.js on the emotionalgifs branch
• Create a pull request to merge emotionalgifs onto main, and only merge the pull request when the bot approves your changes!

1: Finding the Dominant Emotion

In order to match the results of the Face API with Gifs from the Giphy API, we need to determine the dominant emotion from the API response.

🛠️ Modifying the Azure Function

We need to access the emotion data by itself, without the face id and other analyzed data. To do this, we need to create another variable in the module.exports async function.

let emotions = result[0].faceAttributes.emotion;

💡 Now you've got the JSON object with all the emotion values, find the highest valued emotion! Use context.log(emotions) to see how it's structured.

We're accessing the data at index 0 because we're analyzing one face. If there were two faces, the data for the second face would be stored at index 1.

{
  "result": [
    {
      "faceId": "a16f522d-0577-4e50-97cb-1feeef7aaf2e",
      "faceRectangle": {
        "top": 313,
        "left": 210,
        "width": 594,
        "height": 594
      },
      "faceAttributes": {
        "emotion": {
          "anger": 0,
          "contempt": 0,
          "disgust": 0,
          "fear": 0,
          "happiness": 1,
          "neutral": 0,
          "sadness": 0,
          "surprise": 0
        }
      }
    }
  ]
}

"emotion": {
          "anger": 0,
          "contempt": 0,
          "disgust": 0,
          "fear": 0,
          "happiness": 1,
          "neutral": 0,
          "sadness": 0,
          "surprise": 0
}

let objects = Object.values(WHAT_IS_YOUR_JSON);
// FILL IT IN
// What your array could look like: [0.01, 0.34, .....]

const main_emotion = Object.keys(emotions).find(key => emotions[key] === Math.max(...objects));

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

📹 Walkthrough Video

Week 4 Step 2 ⬤⬤◯◯◯◯◯ | 🕐 Estimated completion: 20-25 minutes

Error Handling ~ Sir this is a Wendy's

Demo: 🐰

Ideally, users will fill the web form with the correct information. However, people make mistakes. In this step, we will be implementing some form validation to make sure that a user has inputted text value before submitting their password.

✅ Task:

• 1: Check you are on the bunnimage-frontend branch
• 2: Change your HTML form to accept multipart/form-data in index.html
• 3: Add a file input to index.html that accepts image/x-png,image/jpeg and add the attribute name=image
• 4: Modify the function in index.js to create an alert if either the file input or the name input is null
• 5: Modify the button so that it submits the form by changing its type attribute to "submit"
• 6: Prevent the page from reloading after submission
• 7: Commit your updated code to bunnimage/index.html and bunnimage/script.js
• 8: Create a pull request to merge bunnimage onto main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Open up your LiveServer plugin and start your server.

1: Accepting Images as an Input

In HTML Forms, the enctype attribute specifies how the form-data should be encoded when submitting it to the server. Like we learned before, if we want to upload files, we need send form-data encoded as multipart/form-data

    <h1>Bunnimage</h1>
    <form enctype="multipart/form-data">
    <label>Code: </label>

To add the image upload input, add an additional file input within the form & change the submit button's type.

<form enctype="multipart/form-data">
   <input type="file" name="image"></input>
   <input id="username" type="text" placeholder="Enter your file's name">
   <input type="submit" />

2: Input Validation?

We need to validate two things.

<form enctype="multipart/form-data">
    <input type="file" accept="image/x-png,image/jpeg" name="image"></input>
    <input id="username" type="text" placeholder="Enter your file's name">
    <input type="submit" />

📹 Walkthrough Video

Final Project Step 6 ⬤⬤⬤⬤⬤⬤ | 🕐 Estimated completion: 25 minutes

Documentation

✅ Task:

• Document your first component in blog.md
• 🚀 Commit your changes to the final-project branch, make a pull request, and merge it

Once you have successfully completed developing your first component, you can start documenting your project blog. Remember that the purpose of this blog is to help someone else create your project from scratch, so as you start writing, you will need to break down your code as much as possible and explain it so that someone else can learn from your example.

Check out the Save Money and Frustration on Amazon using Azure Functions blog to see how Fifi broke down her project into multiple steps.

Check out the Creating a File Sharing and Conversion Web App with Azure Functions blog to see how Emily breaks down her code into smaller chunks to document, describes how it works, and pastes the code at the bottom.

Quick tips

• If your project required any kind of groundwork like installing npm packages or setting up Azure locally, document this first in "Step 0"
• Break down your code:
  • Copy all of your code and paste it into a code snippet in your blog
  • Break it down into multiple snippets in order of how you wrote the code
  • Before each snippet, write a description of what the code is for and how it works
  • Define keywords that were new to you or would be to your audience
  • Tip: use substeps to make your blog easier to follow

If you have completed multiple components of your project this week, document them as you go.

Documentation Best Practices:

Final Project Step 5 ⬤⬤⬤⬤⬤◯ | 🕐 Estimated completion: 1-5 hours

Start Coding!

✅ Task:

• Based on your schedule determined in "timeline.md", find the first issue you need to work on and begin your first task
• 🚀 Close the issue when you have completed
• 🚀 Commit your changes to the final-project branch, make a pull request, and merge it

Developing the first component

💡 Start small then build big!

Let's look back at the advice we got from the previous step: "start small then build big." Your goal is to get something working - not to developing your final project in 1 week.

• Begin by just having one working component of the project. Ex:
  • Press a button on your webpage and receive information
  • Create a working Azure Function that can return information
• After that's complete and tested, begin building onto that with more and more features!

Committing code

❗ Best practices for commiting code is to commit it constantly. Any time you make a change, commit the change.

❓ Why?

Every time you develop something that works, commit and push it immediately. This is so that if/when your code breaks due to a bug, you can easily revert back to the latest working commit. It also shows a history of how you have worked on your code.

💡 Tip:: You want to name the commit accurately to the changes you have made so that they are easy to search through later.

Week 2 Step 7 ⬤⬤⬤⬤⬤⬤⬤◯ | 🕐 Estimated completion: 15-25 minutes

How old are you??

✅ Task:

Modify your Azure Function so that it determines the user's generation.

• 1: Write a function to download the image from the link you parsed in the previous step.
• 2: Use node-fetch to create a POST request to the Face API to receive an age.
• 3: Use vanilla Javascript to determine the generation from the age returned from the Face API using the following:

• 4: Commit your updated code to song4u/index.js on the song4u branch
• 5: Create a pull request to merge song4u onto main, and only merge the pull request when the bot approves your changes!

🚧 Test Your Work

To test your work, try texting a jpg image to your Twilio number (with a face!). After you text the image, you can context.log(age) or context.log(generation) to verify that your program and the FaceAPI is working!

We use context.log and not console.log, because Azure uses the context object in Functions.

‼️ Twilio does not allow a simple string to be sent. For example, the following code will NOT send a text back, but will still pass the bot's test, and allow you to move on to the next step.

context.res = {
        body: generation
    };
// THIS CODE WILL NOT RETURN ANYTHING BY TWILIO, but will work on Github!

Downloading image data

Based on the previous step, you should now be able to access your image url. We were able to access it with queryObject.MediaUrl0.

    let resp = await fetch(YOUR_URL,{
        /*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',
    })

    // receive the response
    let data = await resp.arrayBuffer()
    // we are receiving it as a Buffer since this is binary data

Analyzing the image

Recall the analyzeImage() function we wrote in the previous project. This time, you will be calling for age data instead of emotion data.

💡 Don't forget to read the documentation!

async function analyzeImage(img){
    const subscriptionKey = process.env['subscriptionkey'];
    const uriBase = // WHAT'S YOUR ENDPOINT?;
	// env variables (similar to .gitignore/.env file) to not expose personal info

    let params = new URLSearchParams({
	'returnFaceId': 'true',
	'returnFaceAttributes': //WHAT GOES HERE?
    })

    // making the post request
    let resp = await fetch(uriBase + '?' + params.toString(),{
        method: 'POST',
        body: img,
        // img is the parameter inputted
        headers: {
            'Content-Type' : 'application/octet-stream',
            // HOW DO YOU AUTHENTICATE?
        }
    })

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

    return data;
}

let age = result[0].faceAttributes.age

Determining and returning Generation

Using the provided names and age ranges, you can use if else logic in Javascript to determine the generation.

if (age > 5 && age < 25) {
    id = "GenZ"
}

Remember, Twilio will not allow a simple text like GenZ to go through, so all you have to do is return the generation in the body! We will return more data in the next steps, so you will be able to get a text back.

📹 Walkthrough Video

Week 1 Step 5 ⬤⬤⬤⬤⬤◯◯◯◯ | 🕐 Estimated completion: 25-35 minutes

Let me in!

✅ Tasks:

• Run git pull origin [BRANCH_NAME]
• 1: Add on to the HTTP Trigger in the previous issue to check if the user’s parameter input of “password” equals letmein.
  • If it does, output "Access granted."
  • If it doesn’t equal the correct password, output “Access denied.”
• 2: Commit the update function's code in a file named hackervoice/index.js to the root of the hackervoice branch!
• 3: Create a pull request to merges hackervoice to main, but do not merge unless the bot approves your changes.

🚧 Test your Work

When you paste your Function URL in your browser or make a GET request with Postman with a password parameter of "letmein", you should get a response of “Access granted.“. Otherwise, your function should output “Access denied.“.

‼️ Make sure you follow the exact responses we provided. Access denied. and Access granted.

1: Return from a Function

In the previous step, we received the password (the user's input). Now, we need to return either Access denied. or Access granted. to the user based on their input. We can do this by returning it in the body of the request!

💡 Recall the context.res object we saw in the HTTP Trigger template.

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

Place your message to the user in your_response!

📹 Walkthrough Video

Week 2 Step 2 ⬤⬤◯◯◯◯◯◯ | 🕐 Estimated completion: 5-20 minutes

Getting Emotional ~ With Parse-Multipart

Create an Azure function that takes in an image from a HTTP request, parses it with parse-multipart, and returns the base64 code of the image

✅ Task:

• Create a new branch called emotionalgifs
• 1: Create a new Azure Function called emotionalgifs with the HTTP Trigger template, install and use parse-multipart to parse an image from an HTTP request, and save its raw data in a variable
• 2: Return the image data encoded in base64 in the body of the Azure Function response
• 3: Place your function URL in a repository secret called EMOTIONAL_ENDPOINT and commit your code to emotionalgifs/index.js on your emotionalgifs branch
• 4: Create a pull request that merges emotionalgifs to main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Use Postman! Paste the function url and make a POST request. Remember to attach the file in Body! In the output box, you should get the output. Make sure you're using an image with a real face on it or else it won't work. Here's an example of an output I get with this image:

/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQIC...

1. Create emotionalgifs HTTP trigger function that parses images

What is multipart request?

A HTTP multipart request is a HTTP request that HTTP clients construct to send files and data over to a HTTP Server.

💡 This is commonly used by browsers and HTTP clients to upload files to the server.

Because we want to send an image file through an HTTP Request, we need a piece of software to parse the raw data to extract the image file. Here comes the handy NPM package: parse-multipart!

------WebKitFormBoundaryDtbT5UpPj83kllfw
Content-Disposition: form-data; name="uploads[]"; filename="somebinary.dat"
Content-Type: application/octet-stream

some binary data...maybe the bits of a image..
------WebKitFormBoundaryDtbT5UpPj83kllfw
Content-Disposition: form-data; name="uploads[]"; filename="sometext.txt"
Content-Type: text/plain

hello how are you
------WebKitFormBoundaryDtbT5UpPj83kllfw--

The lines above represents a raw multipart/form-data payload sent by some HTTP client via form submission containing two files. We need to extract all the files contained inside it. The multipart format allows you to send more than one file in the same payload, so that's why it is called multipart.

❓ Installing `parse-multipart`

Before you can install parse-multipart, you need to enter npm init -y into the terminal. This command allows us to set up a new npm package:

Open up a terminal in VSCode inside your function's directory, type npm install parse-multipart, and press enter.

💡 Forgot how to navigate a terminal? Check this out.

Note: the text outputted by the console does not mean there was an error! The npm package has successfully been installed.

const multipart = require('parse-multipart');

// here's your boundary:
const boundary = multipart.getBoundary(req.headers['content-type']);
  
// TODO: assign the body variable the correct value
const body = '<WHAT GOES HERE?>'

// parse the body
const parts = multipart.Parse(body, boundary);

2. Receiving the image

When the POST request is made to this function with an image, we need to:

1. Get the image from the parts (parse-multipart) variable
2. Convert the image to base64
3. Store the converted image in the response body

module.exports = async function (context, req) {
    // the code
}

context.res = {
        // status: 200, /* Defaults to 200 */

        body: //LEAVE THIS BLANK
};

let convertedResult = Buffer.from(parts[0].data).toString('_____');
// FILL IN THE BLANK

context.res = {
        // status: 200, /* Defaults to 200 */

        body: //WHAT GOES HERE?
};

📹 Walkthrough Video

Week 3 Step 4 ⬤⬤⬤⬤◯◯◯◯◯ | 🕐 Estimated completion: 10-20 minutes

Your time's up....

This week, you will be going through steps to create a Timer Trigger Function delete all files in your Blob storage container every 5 minutes. This assists us in automated cleanups for our storage container and removing outdated files that users no longer need.

✅ Task:

• 1: Create a Timer Trigger Function to delete all files in your Blob storage container every 5 minutes.
• 2: Test your new Timer Trigger Function
• 3: Commit your new code to the bunnimage branch!
• 4: Comment an expression that tells the Timer Trigger to run everyday at 6:23 AM.

💡 Tip: Cron expressions might help you with the last task.

🚧 Test Your Work

To test your work, use Postman to send a POST request with an image to your previous HTTP trigger function that will save your file within your blob. Recall that a successful save of your file will cause you to see a response similar to the below:

{
  "body" : "File Saved"
}

You should also double check that your file has been saved by navigating to your storage blobs.

Now run your timer trigger function using func start and re-check your storage blobs - they should be gone. Your logs notifying you of the blobs' deletions should also be displayed in your trigger function's console.

💡 Yay! This means your timer trigger function worked.

1: Create your Timer Trigger Function

First, we'll need to create a new Azure Function that runs on a schedule with the Timer Trigger template.

1. Create a new Function, naming it bunnimage-timer and select Timer trigger

2. Leave the Schedule as 0 */5 * * * * to have the function be triggered every 5 minutes.

3. Press enter on your keyboard.

2: Code your Timer Trigger Function

• Reference your container string from your environment secrets
• Reference the @azure/storage-blob package
• Reference your account name

const { BlobServiceClient } = require("@azure/storage-blob");

const connectionstring = process.env["AZURE_STORAGE_CONNECTION_STRING"];
const account = "YOUR_STORAGE_ACCOUNT_NAME";

To delete all the blobs in the container, you can first list all the blobs, then loop through deleting each one as you go.

await blobContainerClient.deleteBlob(filename)

const blobServiceClient = await BlobServiceClient.fromConnectionString(connectionstring);
const deletecontainer = "images";
const blobContainerClient = await blobServiceClient.getContainerClient(deletecontainer);

for await (const blob of blobContainerClient.listBlobsFlat()) {
    context.log(`Deleting blob name ${blob.name}`);
    
    // a line of code here should access the blob's name and use `deleteBlob()` to delete the blob!
}

context.log("Just deleted your blobs!")

📹 Walkthrough Video

Week 3 Step 7 ⬤⬤⬤⬤⬤⬤⬤◯◯ | 🕐 Estimated completion: 20-30 minutes

Leaky secrets

Store a message from Twilio in CosmosDB and return the most recent message

✅ Task:

• 1: Configure CosmosDB and add your CosmosDB Endpoint and Key in Azure App settings as COSMOS_ENDPOINT and COSMOS_KEY
• 2: Write functions to store a message and retrieve the most recent entry
• 3: Take a message from a Twilio POST request's parameters and use your functions to return the most recent message
• 4: Commit your updated function code to deepsecrets/index.jsto the deepsecrets branch
• 4: Create a pull request to merge deepsecrets onto main, and only merge the pull request when the bot approves your changes!

❗ Make sure to return your message in this format:

Thanks 😊! Stored your secret "insert_user's_message". 😯 Someone confessed that: "the_most_recent_message"

🚧 Test Your Work

To test your work, send your Twilio number a text message. Once you do so, if you navigate to your Cosmos database account, go to Data Explorer, and the dropdowns underneath your new SecretStorer database, you should see an item that contains a message with your text message!

Important Note: If you are triggering the function for the first time, you may see an error message like the one below:
TypeError: Cannot read property 'message' of undefinedStack: TypeError: Cannot read property 'message' of undefinedat module.exports (C:\home\site....)

Don't worry! Try sending another text message, and everything should work fine the second time around. This error occurs because you don't have anything stored in CosmosDB yet.

💡 Yay! This means you've successfully connected Twilio with your Azure Cosmos database and Function.

1: Create your Cosmos Databases

Before we do anything else, we'll want to create our Cosmos DB account.

1. Install @azure/cosmos

Now that your Azure Cosmos DB account is created, we should install the npm package @azure/cosmos.

🔧 1. Configuration

First, we need to instantiate a variable CosmosClient from the @azure/cosmos package we just downloaded.

const CosmosClient = require("@azure/cosmos").CosmosClient;

Create a config object that contains all of the sensitive information that we need to manipulate our data.

Call it config, and place keys for endpoint, key, databaseId, containerId, and partitionKey.

const config = {
  endpoint: process.env.COSMOS_ENDPOINT,
  key: process.env.COSMOS_KEY,
  databaseId: "SecretStorer",
  containerId: "secrets",
  partitionKey: {kind: "Hash", paths: ["/secrets"]}
};

2. The create Function

Now, we want to write an asynchronous create function that takes in the parameter of client (this will be our CosmosClient), databaseId, and containerId.

The create function will:

⭐️ Use the client to create a database with an id of databaseId if it does not exist.

⭐️ Use the client to create a container inside the database of ID databaseId. This container will have an ID of containerId and a key of partitionKey.

⭐️ The create function should be async because within it we are accessing CosmosDB.

⭐️ The create function does not need to have a return value.

❓ How do we do this?

Read Microsoft's documentation on how to create a database and container.
You will need to find which part of the docs to use, because in the real-world, you aren't always given the picture perfect instructions. You will need to figure out what code you need.

Hint: You don't need to create a new file like the docs say, because we already have our index.js file.

You also do not need the module.exports, because this function will be in our index.js file, and that is where we will be using it.

💡 Hint: The config.[value] variables are accessed from the config object you created earlier.

📜 2. The createDocument Function

⭐️ The createDocument async function will create a new document within the database container that contains the newItem data.

⭐️ newItem should be a parameter that is passed into the createDocument function.

⭐️ return your items object from the function which contains the most recent message.

1. In the createDocument function, we first need to establish a connection with your Azure Cosmos account. This way, your code can tell the database what it wants, and the database will respond!
2. In order to create this connection, read these docs

Note: remember when we created the create function? We need to use that function now! You will need to slightly modify one line of code in the docs to work with yoru create function!

3. After creating a connection with the CosmosDB, we need to query the database for the most recent document (so you can see someone else's secret 👀)

Note: Instead of their SQL query, we need to use SELECT top 1 * FROM c order by c._ts desc to only get the most recent document!

5. After stealing someone else's secret, it is only fair that we upload our own!
6. We need to create a new item in the database!
7. Return that secret that we stole ‼️‼️

3: The Main Function

Instead of directly passing queryObject.Body (the SMS message) to context.res:

⭐️ You'll instead save it in a JSON object with a key of message.

⭐️ Then, pass the JSON object containing the SMS message into the createDocument function you just coded to get your items object.

⭐️ Finally, create a custom response that you can send back to the original texter.

const queryObject = // use the `qs` npm package to parse the request body
let message = queryObject.Body;
let document = // create an object with the string `"message"` as the key, and the variable `message` as its value
let items = // call the createDocument function with the document we just made

Your response message must adhere to this format! Make sure to change the variable names message and items if you named them something different.

const responseMessage = `Thanks 😊! Stored your secret "${message}". 😯 Someone confessed that: ${JSON.stringify(items[0].message)}`

📹 Walkthrough Video

Week 4 Step 2 ⬤⬤◯◯◯◯◯ | 🕐 Estimated completion: 20-25 minutes

Error Handling ~ Sir this is a Wendy's

Demo: 🐰

Ideally, users will fill the web form with the correct information. However, people make mistakes. In this step, we will be implementing some form validation to make sure that a user has inputted text value before submitting their password.

✅ Task:

• 1: Check you are on the bunnimage-frontend branch
• 2: Change your HTML form to accept multipart/form-data in index.html
• 3: Add a file input to index.html that accepts image/x-png,image/jpeg and add the attribute name=image
• 4: Modify the function in index.js to create an alert if either the file input or the name input is null
• 5: Modify the button so that it submits the form by changing its type attribute to "submit"
• 6: Prevent the page from reloading after submission
• 7: Commit your updated code to bunnimage/index.html and bunnimage/script.js
• 8: Create a pull request to merge bunnimage onto main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Open up your LiveServer plugin and start your server.

1: Accepting Images as an Input

In HTML Forms, the enctype attribute specifies how the form-data should be encoded when submitting it to the server. Like we learned before, if we want to upload files, we need send form-data encoded as multipart/form-data

    <h1>Bunnimage</h1>
    <form enctype="multipart/form-data">
    <label>Code: </label>

To add the image upload input, add an additional file input within the form & change the submit button's type.

<form enctype="multipart/form-data">
   <input type="file" name="image"></input>
   <input id="username" type="text" placeholder="Enter your file's name">
   <input type="submit" />

2: Input Validation?

We need to validate two things.

<form enctype="multipart/form-data">
    <input type="file" accept="image/x-png,image/jpeg" name="image"></input>
    <input id="username" type="text" placeholder="Enter your file's name">
    <input type="submit" />

📹 Walkthrough Video

Week 1 Step 8 ⬤⬤⬤⬤⬤⬤⬤⬤◯ | 🕐 Estimated completion: 5-15 minutes

[TOP SECRET] Morse Code Converter

Welcome agent! You have made it this far so we know we can trust you. BitProject is working in an undercover operation, and we need a new way to communicate.

✅ Tasks:

• Run git pull and create a new branch called morse
• 1: Install the morse-code-converter package
• 2: Code an HTTP trigger function named morse with the npm package morse-code-converter. This HTTP trigger takes in a plaintext parameter (which is in english) returns a response of morse code.
• 3: Place the function URL of your new Morse Code HTTP Trigger as a repository secret named MORSE_ENDPOINT and commit your function's code to a file named morse/index.js to the morse branch
• 4: Create a pull request that merges morse to main, and only merge the PR when the bot approves your changes

1: Installing Packages

Create a new HTTP trigger function using the Azure extension in VSCode, and choose the Function App you previously created during this week.

We will be using the morse-code-converter npm package.

npm init -y 

npm install morse-code-converter

‼️ Woah! What just happened when the package was installed?

The first command created a package.json file to store your dependencies and essentially keeps track of what packages your application needs. You can find this file by going into the left menu and clicking on "App Files".

The next one actually installs the necessary packages with code, morse-code-converter.

💡 Note: If you get red text like WARN, you can ignore it.

‼️ Reminder: don't forget to import your package! `const morse = require("morse-code-converter");

💡 Make sure your parameter is named plaintext

2: Using morse-code-converter

💡 Be sure to return the code in the body of the response!

    context.res = {
        body: [insert your encoded English here]
    };

❗ Don't forget to git pull before making any changes to your local repo!!

‼️ Remember: we test your Morse Code function everytime you commit!

📹 Walkthrough Video

Week 1 Step 4 ⬤⬤⬤⬤◯◯◯◯◯ | 🕐 Estimated completion: 35-45 minutes

Building our first function ⚡[HackerVoice]

Managing a server is pretty complicated. As a student, mastering serverless functions can help you to build projects that solve real-world problems by integrating APIs, constructing user interfaces, and analysing data without worrying about managing servers.

⚡️ 10 Ways to Use Serverless Functions

✅ Tasks:

• Run git pull and create a new branch called hackervoice
• 1: Create an Azure account
• 2: Set up Azure locally on VS Code
• 3: Create an HTTP trigger Azure function that gets content from a request parameter called password and returns it in the function's body
• 4: Test your function locally with Postman and, when you confirm that it works, deploy your function
• 5: Place your function URL from the Azure portal in a repository secret called HACKERVOICE_ENDPOINT and commit the function's code in a file named hackervoice/index.js on the hackervoice branch
• 6: Create a pull request that merges hackervoice to main, and only merge when the bot approves your changes!**

🚧 Test your Work

Option 1:
Paste the function url directly in your browser and add the query parameters to the end of the url: &param_name=param_value. Your inputted password value should appear.

Option 2:
Use Postman! Paste the function url and make a GET request. In the output box, you should receive the value you put in for the request parameter.

1: Create an Azure Account

Azure is Microsoft's cloud computing platform (similar to Google Cloud Platform and Amazon Web Services).

1. To create an Azure account, go to Microsoft Azure and press Start Free.
2. After signing in with your Microsoft account and filling in your personal details, you will be asked to add a credit card.

• This is only for security purposes (preventing multiple free accounts per person).
• You won't be charged unless you choose to buy a premium account, which we do not need for this course.

2: Set Up Azure Locally on VS Code

1. Confirm if you have installed the Azure Tools extension on VS Code
2. Create your local project

• ‼️ When prompted to set the language, choose JAVASCRIPT not C#)
• ‼️ When prompted for the Authorization level, always choose Function

4. Run the function locally
5. Publish the project to Azure
6. Get your function url the Azure Portal
7. Test the function on Postman

❓ What should running the function look like?

Start the debugger by going to index.js and then pressing the F5 key.

Having trouble with Azure Tools? Try installing it this way

Once you receive the localhost link in the terminal, follow it and notice the terminal log "Executing 'Functions.[Name of your function]'" indicating that you made a request to the function.

If the request is successfully made in Postman this is what it should look like:

Once you deploy/publish the code to Azure successfully, you will get the function url in the Output of VS Code:

3: Create your own HTTP Trigger Function

You should see the HTTP Trigger Function template code Microsoft Azure starts you with when you first create your trigger.

Now, let's begin coding by modifying that template. First, you will need to retrieve content from a request parameter named password. Recall that parameters look like this in a full URL:

www.mywebsite.com/api/endpoint?param1=hi&param2=hi

<property name> = req.query.<your property here>;

//example:
let color = req.query.color;

Finally, we have to return something to the users. In this case, we will be returning the value of the request parameter we just retrieved.

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

4: Test your Function with Postman

1. Deploy your function to Azure
2. Get your function url from the Output window on VS Code(same as before) and make a request on Postman
3. Add a parameter with the key password and give it any random value
4. Make sure that your function is returning the password parameter in the body

5: Add Repository Secrets

📹 Walkthrough Video

Week 3 Step 5 ⬤⬤⬤⬤⬤◯◯◯◯ | 🕐 Estimated completion: 10-20 minutes

Download it!

This week, you will be going through steps to create an HTTP Trigger that takes parameter inputs and returns a download link for the given image.

✅ Task:

• 1: Create an HTTP Trigger Function named bunnimage-download that takes in "username" from the header
  • Have the function query for image with the correct associated username from blob storage using node-fetch
  • Have the function return an image download link in an attribute named downloadUri.
• 2: Place your new HTTP Trigger function secret in the repository named BUNNIMAGE_ENDPOINT2
• 3: Commit your new HTTP Trigger function code in bunnimage-download/index.js on the bunnimage branch
• 4: Create a pull request to merge bunnimage onto main, and only merge the pull request when the bot approves your changes!

🚧 Test Your Work

To test your work, use Postman to send a GET request with a "username" in the header. You should see a response similar to the below:

💡 The username value should be the name of an image you have already uploaded to the blob storage. Do it fast, or your timer trigger will delete it!

{
  "body" : {
     "downloadUri" : "https://<YOUR_STORAGE_ACCOUNT_NAME>.blob.core.windows.net/images/<USERNAME>.png",
     "success": true
  }
}

💡 Yay! This means you successfully fetched a download link to your image.

1: Modifying your Function

In our module.exports function, we'll want to:

1. Use the node-fetch package we installed earlier this week to determine if the requested image is available.

2. Use if-else statements to determine the success of the retrieval. Remember to test for both jpeg and png extentions!

3. Send back a JSON object containing the download link.

const username = req.headers['username'];
let download = ""
let downloadpng = "https://<YOUR_BLOB_STORAGE_URL>.blob.core.windows.net/images/" + username + ".png";
let downloadjpg = "https://<YOUR_BLOB_STORAGE_URL>.blob.core.windows.net/images/" + username + ".jpeg";

let pngresp = await fetch(downloadpng, {
   method: 'GET',
})
let pngdata = await pngresp;

let jpgresp = await fetch(downloadjpg, {
   method: 'GET',
})
let jpgdata = await jpgresp;

if (pngdata.statusText == "The specified blob does not exist." && jpgdata.statusText == "The specified blob does not exist." ) {
   success = false;
   context.log("Does not exist: " + pngdata)
   context.log("Does not exist: " + jpgdata)
} else if (pngdata.statusText != "The specified blob does not exist.") {
   success = true;
   download = downloadpng
   context.log("Does exist: " + pngdata)
} else if (jpgdata.statusText != "The specified blob does not exist.") {
   success = true;
   download = downloadjpg
   context.log("Does exist: " + jpgdata)
}

context.res = {
      body: {
               "downloadUri" : download,
               "success": success,
      }
};
context.log(download);
context.done();

📹 Walkthrough Video

Week 1 Step 8 ⬤⬤⬤⬤⬤⬤⬤⬤◯ | 🕐 Estimated completion: 5-15 minutes

[TOP SECRET] Morse Code Converter

Welcome agent! You have made it this far so we know we can trust you. BitProject is working in an undercover operation, and we need a new way to communicate.

✅ Tasks:

• Run git pull and create a new branch called morse
• 1: Install the morse-code-converter package
• 2: Code an HTTP trigger function named morse with the npm package morse-code-converter. This HTTP trigger takes in a plaintext parameter (which is in english) returns a response of morse code.
• 3: Place the function URL of your new Morse Code HTTP Trigger as a repository secret named MORSE_ENDPOINT and commit your function's code to a file named morse/index.js to the morse branch
• 4: Create a pull request that merges morse to main, and only merge the PR when the bot approves your changes

1: Installing Packages

Create a new HTTP trigger function using the Azure extension in VSCode, and choose the Function App you previously created during this week.

We will be using the morse-code-converter npm package.

npm init -y 

npm install morse-code-converter

‼️ Woah! What just happened when the package was installed?

The first command created a package.json file to store your dependencies and essentially keeps track of what packages your application needs. You can find this file by going into the left menu and clicking on "App Files".

The next one actually installs the necessary packages with code, morse-code-converter.

💡 Note: If you get red text like WARN, you can ignore it.

‼️ Reminder: don't forget to import your package! `const morse = require("morse-code-converter");

💡 Make sure your parameter is named plaintext

2: Using morse-code-converter

💡 Be sure to return the code in the body of the response!

    context.res = {
        body: [insert your encoded English here]
    };

❗ Don't forget to git pull before making any changes to your local repo!!

‼️ Remember: we test your Morse Code function everytime you commit!

📹 Walkthrough Video

Week 2 Step 1 ⬤◯◯◯◯◯◯◯ | 🕐 Estimated completion: 5-20 minutes

Getting Emotional ~ With the Face API

Because of amazing APIs, you don't need to be an expert in machine learning and AI to take advantage of cutting edge technology. In this project, we are going to be building an API and webpage to return you a GIF when you upload a picture of yourself!

✅ Task:

Create a request in Postman to send an image of a person to the Azure Face API to return the subject's emotions

• 1: Create a Face API Endpoint
• 2: Create a POST request in Postman to the Face API to retrieve the emotion attributes of this image
• 2: Place the API endpoint and subscription key in the GitHub repository secrets: API_ENDPOINT AND SUBSCRIPTION_KEY
• 3: Comment the output of your Postman request to move on

🚧 Test your Work

You should get the following expected output if you have configured your Face API correcty, as well as sent the request with the correct parameters and body.

{
  "result": [
    {
      "faceId": "d25465d6-0c38-4417-8466-cabdd908e756",
      "faceRectangle": {
        "top": 313,
        "left": 210,
        "width": 594,
        "height": 594
      },
      "faceAttributes": {
        "emotion": {
          "anger": 0,
          "contempt": 0,
          "disgust": 0,
          "fear": 0,
          "happiness": 1,
          "neutral": 0,
          "sadness": 0,
          "surprise": 0
        }
      }
    }
  ]
}

1: The Face API

The Face API will accept the image and return information about the face, specifically emotions. Watch this video on Microsoft Cognitive Services for an in-depth explanation: http://www.youtube.com/watch?v=2aA8OEZ1wk8

❓ Where can I find the Face API keys?

1. Navigate to the home page on the Micrsoft Azure portal (https://portal.azure.com/#home)

2. Click on the resource you need the keys for

3. On the left menu bar, locate the Resource Management section and click on "Keys and Endpoint"

2: Using Postman to Send a Request

Now, we can test if our API is working using Postman. Make sure to pay close attention to the documentation and the API Reference

Request URL

Request URL is used when a web client makes a request to a server for a resource. Notice that the request url listed in the API reference is this:

https://{endpoint}/face/v1.0/detect[?returnFaceId]\[&returnFaceLandmarks]\[&returnFaceAttributes]\[&recognitionModel]\[&returnRecognitionModel][&detectionModel]

Parameters

Parameters are typically used in requests to APIs to specify settings or customize what YOU want to receive.

Request Headers

Request Headers tell the receiving end of the request what type of data is in the body.

Request Body

The body of a POST request contains the data you are sending.

📹 Walkthrough Video

Week 4 Step 3 ⬤⬤⬤◯◯◯◯ | 🕐 Estimated completion: 20-25 minutes

Making fetch Happen

Demo: 🐰

We are going to how use the form to call our Azure Function! Yay 🎉! Things are coming together.

✅ Task:

• 1: Modify the function and use await fetch to send the form input to your Bunnimage Azure Function
• 2: If the upload was successful, change the output div to Your image has been stored successfully!
• 3: Modify your CORS settings in your function app so your frontend can make requests.
• 4: Commit your updated code to bunnimage/script.js to the bunnimage-frontend branch
• 5: Create a pull request to merge bunnimage-frontend onto main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Open up your LiveServer plugin and start your local server. To test your web app:

1. Upload an image and click submit. Do you get a "Your image has been stored successfully!" message?
2. Log into your Azure portal and navigate to your storage account. In your container, do you see your image?

1: How do I get form data?

To get the information the user entered in the form, you will need to create a FormData object. FormData lets you compile a set of key/value pairs to send.

const bunniForm = document.getElementById("YOUR_FORM_ID");
const payload = new FormData(bunniForm);
const file = fileInput.files[0]; // fileInput is the file upload input element
payload.append("file", file);

<form enctype="multipart/form-data" id="YOUR_FORM_ID">

2: How do I call the Azure Function?

The Fetch API is built in to Javascript to make HTTP requests (using GET, POST and other methods), download, and upload files.

💡 We don't have to install node-fetch as an npm package since fetch is built into JavaScript. Remember: we were using NodeJS before.

To start a request, call the special function fetch():

const response = await fetch(resource, options);

Fetch accepts two arguments:

• resource: the URL string, or a Request object
• options: the configuration object with properties like method, headers, body, credentials, and more.

3: How to configure "options"

In order to pass the type of method, the payload in the pody, and headers, you have to configure the "options" part of the fetch function.

const response = await fetch(resource, {
   method: ... ,
   body: ... , 
   headers: { ... }
});

Fill in the method, headers and body with the correct information compatible with your API!

💡 Refer back to previous Fetch requests we made in NodeJS for hints. Remember for this request, we are not receiving JSON!

How to validate that the upload worked

We need to let the users know if the upload was successful! We do this by making sure we receive a response from our upload API:

try { 
    // Try receiving data from your fetch request
    // Change the output div's value
} catch (e) {
    // If an error occurred, tell the user!
}

4: Update CORS Settings

CORS (Cross-origin resource sharing) settings tells the Function App what domains (such as wwww.website.com) can make requests to the Azure Functions.

📹 Walkthrough Video

Part 1

Part 2

Week 1 Step 3 ⬤⬤⬤◯◯◯◯◯◯ | 🕐 Estimated completion: 10-15 minutes

Getting Cat Pics with Postman 🐱

In this step, you will be using Postman Desktop Application to test the CataaS API by sending a GET request.

✅ Tasks:

• 1: Read and explore the documentation for the Cataas API
• 2: With Postman, specify the API Endpoint and set the parameters to send a GET request to the CataaS API and receive a cat picture with "Serverless" written on it
• 3: Comment, but do not Close with comment, the picture you receive from the API in this issue to move on

🚨 NOTE: If the CataaS API is not working, please use this alternate endpoint: https://bit-cat.azurewebsites.net/cat/says/serverless

1: Exploring the CataaS API

CATAAS is a RESTful API that exclusively delivers images of cats. The main feature is that we can change the properties of images, add text, truncate the image, add a filter and more. It's not an API with many real-world applications, but it's perfect for learning.

⭐ Interested in playing around with the API? Documentation is here.

2: Sending Requests with Postman

In this step, we'll be using a desktop application called Postman to test an API. Postman is a debugging tool for RESTful APIs, which allows you to test both pre-existing, community made APIs, or your own self-made APIs, without having to write any HTML test code!

Postman offers a web tool to test API's, but during the camp we will be using the desktop application.

• You can sign up for Postman here.
• Download and install the desktop application here
• Read the "Getting Started" documentation here

Open up the Postman application and try it out yourself:

• API endpoint: https://cataas.com/cat/cute/says/Serverless
• Parameters: color (color of the text) and size (font size)

Click Send to get your cat picture

📹 Walkthrough Video

Week 4 Step 7 ⬤⬤⬤⬤⬤⬤⬤ | 🕐 Estimated completion: 5-20 minutes

Ultimate CAT INVASION! ~

Demo: 🐱

It's now time to connect everything together! (catzapp/index.html, catzapp/script.js, and your Azure function)

✅ Task:

• 1: Make sure you're on the twocatz-frontend branch
• 2: Create 4 input boxes to accept 4 names, each with an id of name1, name2, name3, and name4 respectively
• 3: Modify catzapp/script.js so that it calls your Azure Function with the 4 names as parameters
• 4: Create 4 img tags, each with an id of image1, image2, image3, and image4 respectively
• 5: Display the outputs of the Azure Function as images in the tags
• 6: Commit your updated changes to catzapp/index.html and catzapp/script.js
• 7: Create a pull request to merge twocatz-frontend onto main, and only merge the pull request when the bot approves your changes!

💡 If your test doesn't pass the first time, it might be because your Azure Function is slow to respond. Simply re-run the job like this.

🚧 Test your Work

Open up your LiveServer plugin and start your local server. To test your web app:

⚠️ When you enter FOUR NAMES into each of the text boxes, do FOUR CAT PICTURES show up below?

1: How can Base64 turn into a Cat?

Now that you should've received strings of base64 from your Azure function call, you need some way to display them for the users.

📹 Walkthrough Video

Week 3 Step 8 ⬤⬤⬤⬤⬤⬤⬤⬤◯ | 🕐 Estimated completion: 10-20 minutes

Exposed!!

✅ Task:

Modify the deepsecrets Azure Function to

• 1: Query for all secrets stored in the CosmosDB
• 2: Select a random secret to return in the body
• 3: Commit your updated function code to deepsecrets/index.jsto the deepsecrets branch
• 4: Create a pull request to merge deepsecrets onto main, and only merge the pull request when the bot approves your changes!

❗ Make sure to return your message in this format:

Thanks 😊! Stored your secret "insert_user's_message". 😯 Someone confessed that: "a_random_secret"

Remember that the bot will be checking the response, so make sure you use the same emojis, punctuation, wording, and capitalization! Only the messages can be different.

🚧 Test Your Work

To test your work, send your Twilio number a text message. You should still receive a text back that contains a message with the same format and wording as the one below, but now the second secret returned will be random, and no longer the most recent secret stored!

Thanks 😊! Stored your secret "insert_user's_message". 😯 Someone confessed that: "a_random_secret"

💡 Yay! This means you've successfully queried for and returned a random secret.

1: Modifying the SQL Query

In your createDocument function, you'll first want to modify the original SQL query to now query for all secrets inside your container.

const querySpec = {
    query: "SELECT * from c"
};

2: Selecting a Random Item

Next, you'll want to select a random secret by:

1. Generating a random integer that is strictly less than the length of the array of secrets. (Hint: use Math.floor() and Math.random())
2. Returning the secret at an index of this random number.

let random_value = Math.floor(items.length * Math.random());

💡 Make sure to change your responseMessage to return the correct index of items.

📹 Walkthrough Video

Week 1 Step 2 ⬤⬤◯◯◯◯◯◯◯ | 🕐 Estimated completion: 5-20 minutes

Say "Hello" to VS Code

✅ Tasks:

• 1: Download Visual Studio Code and install the Azure Tools and Live Server extensions
• 2: Clone this repo using the terminal on VS Code and create a new branch named hello
• 3: In a new file called week1/helloworld.js, write and export a JS function hello that returns "Hello World"
• 4: Commit your changes to the hello branch
• 5: Create a pull request that merges hello to main, let CounselorBot check your code, and only merge the pull request if the bot approves it!

The Merge button will turn green when the bot approves the pull request.

💡 Tip: When we tell you to name a file called directory/thefile.js, the first part before the / is a directory (otherwise known as a folder).

🚧 Test your Work

If you run node helloworld.js in the terminal, the output should be Hello World

Note: From now on, you will never need to close an issue. The Counselor will do that for you, create new issues, and new comments for further instructions!

❌ My code failed, what do I do?

No worries, check this out to help resolve the issue.

💡 TIP: If you want to re-run a check without comitting something else, check this out.

1: The IDE - Visual Studio Code

An IDE is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of at least a source code editor, build automation tools, and a debugger. Although there are hundreds of IDEs to choose from, we are going to use Visual Studio Code due to its popularity and integration with Azure (via extensions and libraries).

💻 How to set up your VS Code Environment

Download VS Code for your operating system and check out this tutorial before getting started.

Inside VS Code, download the following extensions:

• Azure Tools (includes Azure Account, Azure App Service, Azure Functions)
• Live Server

All of the Azure extensions allow you to work on your Azure Function App in VS Code instead of working directly through the Microsoft portal. Live Server is a quick and temporary testing server, and you can use it to test HTML pages. To launch, right click on your html file and press "Open with Live Server" or click "Go Live" in the bottom right corner:

💡 Note: Dark Theme is our personal favorite, but feel free to choose whichever theme you like best. Go to this site to view your options!

2: GitHub with VS Code

Check out this awesome documentation about how to set up Git on your local computer

‼️ Don't forget to git pull before making any changes to your local repo!!

3: Writing and Exporting a JavaScript function

JavaScript enables the ability to export functions in a program so that you can access them in other parts of the program via the import statement. In this case, we want to export your programs in order for CounselorBot to check your code.

function hello() {
    // your code
} 

module.exports = hello

const hello = require('../../week1/helloworld.js')
const output = hello()

💡 Try to not use the web editor! Commit from your command line.

4: Committing to a repository using a command line?

Start out by downloading Git. Then, open your command line.

The Commands

Navigate to the directory in your command line where you want to keep your repository.

Tip: Use cd ./your-directory to change directories, pwd to find out where you are, and ls to list files & directories. More information is here.

Cloning your repository

Click on "Code" on your repo's page and find your repo's HTTP link:

Use the git clone command and replace the url to get your repository's files onto your local computer:

git clone https://github.com/example/example.git

Now is the time to make your changes to your code!

git add helloworld.js

git add *

git commit -m "insert your description"

git push

Congrats! Your changes should now be visible on Github

❗ Don't forget to git pull before making any changes to your local repo!! This gets any changes that were made by the bot.

📹 Walkthrough Video

Week 4 Step 1 ⬤◯◯◯◯◯◯ | 🕐 Estimated completion: 20-25 minutes

Adding an Event Listener to your HTML Form!

Demo: 🐰

Congrats! If you made it this far, your Azure functions can now return data. However, users won't want to make POST requests with Postman to use your API though, so let's make it more user friendly.

✅ Task:

• 1: Create a bunnimage-frontend branch
• 2: Install LiveServer for testing
• 3: Optional Learn HTML basics with the interactive course
• 4: Write JavaScript to listen for the form to be submitted and call a function
• 5: Write a function in index.js to display input appended with a ❤️ in the output div
• 6: Commit your code to bunnimage/index.html and bunnimage/script.js
• 7: Create a pull request that merges bunnimage-frontend to main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Use LiveServer! This is a helpful VSCode extension that allows you to see your HTML that updates while you edit it.

‼️ Create & Reference index.js in index.html

    <script src="index.js" type="text/javascript"></script>

1: Writing the Event Handler Function!

On websites, there are many different types of events that can occur. For example:

• The user selects a certain element or hovers the cursor over a certain element.
• The user chooses a key on the keyboard.
• A form is submitted.
• Curious for more? Look here

We need to create a function which triggers when someone submits an image,
but first we will create a function which changes content on the page when we
submit text.

const bunnForm = document.getElementById('bunnForm');

bunnForm.addEventListener('submit', function (event) {
  const username = document.getElementById("username").value
});

event.preventDefault()

bunnForm.addEventListener('submit', function (event) {
   event.preventDefault()
   const username = document.getElementById("username").value
   const output = document.getElementById("output")
   output.textContent = username + "❤"
});

2: How do I trigger the function when the form is submitted?

The event listener triggers the JavaScript function when the form is submitted.
Here is how the form should look in the bunnimage index.html file:

<form id="bunnForm">
   <label for="name">Code: </label> <br>
   <input type="text" id="username" name="name" aria-label="name" /> <br>
   <input value="Submit" type="submit" />
</form>
<br/>
<div id="output"></div>

Here is the JavaScript which should be in a separate JavaScript file index.js:

const bunnForm = document.getElementById('bunnForm');

bunnForm.addEventListener('submit', function (event) {
   event.preventDefault()
   const username = document.getElementById("username").value
   const output = document.getElementById("output")
   output.textContent = username + "❤"
});

💡 the for attribute in the <label> and the aria-label attribute in the <input>element make the website more accessible to users needing assistive technologies such as screen readers.

📹 Walkthrough Video

Week 1 Step 6 ⬤⬤⬤⬤⬤⬤◯◯◯ | 🕐 Estimated completion: 25-35 minutes

Trying to make node-fetch happen

✅ Task:

• Run git pull and create a new branch called twocatz
• 1: Create and deploy an HTTP trigger Azure Function that creates a request for an image from the CataaS API (https://bit-cat.azurewebsites.net/cat/says/serverless)
• 2: Return the image in the request body encoded in base64 in JSON format
• 3: Place your function URL in a repository secret called TWOCATZ_ENDPOINT and commit function code in a file named twocatz/index.js to the twocatz branch
• 4: Create a pull request that merges twocatz to main, and only merge when the bot approves your changes!

💡 Note: Every time you make a new commit to twocatz, we will check your function by making a request.*

🚨 NOTE: If the CataaS API is not working, please use this alternate endpoint: https://bit-cat.azurewebsites.net/cat/says/serverless

🚧 Test your Work

When you paste your Function URL in your browser or make a GET request with Postman, you might get something like:

{
    "/9j/4AAQSk..."
}

1: Making requests in Azure

To make a request to the CataaS API, you can try using the node-fetch module, but there are many other ways to do it as you can see here.

2: Return your images encoded in base64!

base64data = Buffer.from(originaldata).toString('base64')
//put what you want to turn into base64 inside "originaldata"
//"originaldata" will be encoded in base64.

For fun: Once your API successfully returns the images in base64, you can see what they look like using this website.

context.res = {
    body: { your_picture_in_base64 }
}

📹 Walkthrough Video

Week 4 Step 3 ⬤⬤⬤◯◯◯◯ | 🕐 Estimated completion: 20-25 minutes

Making fetch Happen

Demo: 🐰

We are going to how use the form to call our Azure Function! Yay 🎉! Things are coming together.

✅ Task:

• 1: Modify the function and use await fetch to send the form input to your Bunnimage Azure Function
• 2: If the upload was successful, change the output div to Your image has been stored successfully!
• 3: Modify your CORS settings in your function app so your frontend can make requests.
• 4: Commit your updated code to bunnimage/script.js to the bunnimage-frontend branch
• 5: Create a pull request to merge bunnimage-frontend onto main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Open up your LiveServer plugin and start your local server. To test your web app:

1. Upload an image and click submit. Do you get a "Your image has been stored successfully!" message?
2. Log into your Azure portal and navigate to your storage account. In your container, do you see your image?

1: How do I get form data?

To get the information the user entered in the form, you will need to create a FormData object. FormData lets you compile a set of key/value pairs to send.

const bunniForm = document.getElementById("YOUR_FORM_ID");
const payload = new FormData(bunniForm);
const file = fileInput.files[0]; // fileInput is the file upload input element
payload.append("file", file);

<form enctype="multipart/form-data" id="YOUR_FORM_ID">

2: How do I call the Azure Function?

The Fetch API is built in to Javascript to make HTTP requests (using GET, POST and other methods), download, and upload files.

💡 We don't have to install node-fetch as an npm package since fetch is built into JavaScript. Remember: we were using NodeJS before.

To start a request, call the special function fetch():

const response = await fetch(resource, options);

Fetch accepts two arguments:

• resource: the URL string, or a Request object
• options: the configuration object with properties like method, headers, body, credentials, and more.

3: How to configure "options"

In order to pass the type of method, the payload in the pody, and headers, you have to configure the "options" part of the fetch function.

const response = await fetch(resource, {
   method: ... ,
   body: ... , 
   headers: { ... }
});

Fill in the method, headers and body with the correct information compatible with your API!

💡 Refer back to previous Fetch requests we made in NodeJS for hints. Remember for this request, we are not receiving JSON!

How to validate that the upload worked

We need to let the users know if the upload was successful! We do this by making sure we receive a response from our upload API:

try { 
    // Try receiving data from your fetch request
    // Change the output div's value
} catch (e) {
    // If an error occurred, tell the user!
}

4: Update CORS Settings

CORS (Cross-origin resource sharing) settings tells the Function App what domains (such as wwww.website.com) can make requests to the Azure Functions.

📹 Walkthrough Video

Part 1

Part 2

Week 2 Step 6 ⬤⬤⬤⬤⬤⬤◯◯ | 🕐 Estimated completion: 10-15 minutes

Pose! Song Recommendation with Age Recognition

✅ Task:

Create a new Azure Function that parses a Twilio request body and returns the image url.

• Create a new branch called song4u
• 1: Create a Twilio account
• Install npm package qs
• 2: Create a new Azure Function called song4u that acts as a Twilio webhook
• 3: Return the image url from the POST request
• 4: Commit your updated function code to song4u/index.js on the song4u branch and add your function url to a repository secret named SONGREC_ENDPOINT
• 5: Create a pull request that merges song4u to main, and only merge the pull request when the bot approves your changes!

🚧 Test Your Work

To test your work, try texting a jpg image to your Twilio number. You should receive a link back that contains the image.

1: Creating a Twilio Account

In this project, the user will text an image to a Twilio number and an Azure function will analyze the image. The Face API will determine the age of the person in the image. We need to create a Twilio account first so that the user can text an image to your Twilio number.

Sign up for a free Twilio trial account here.

After we get our account set up, we need to get a phone number, which is free from your trial account.

Before you move on, be sure to create a new Azure function!

2: Configuring the Azure Function

Our new Azure function will act as a Twilio webhook.

💡 A Twilio webhook is the endpoint that will receive a POST request whenever a Twilio number is used or a text is sent. Twilio sends an HTTP request to a webhook whenever something happens (such as when a text is sent).

You will need to place your function's URL into the settings on your Twilio account.

Do you like the command line more? Try using the Twilio CLI instead!

3. Coding the Azure Function

Test the webhook out!

If you want more insight into how a webhook actually works, try this:

module.exports = async function (context, req) {
    const reqbody = req.body
    context.log(reqbody)

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

ToCountry=US&MediaContentType0=image%2Fjpeg&ToState=MI&SmsMessageSid=MM0fe83458b74a1f626eb0da4685ab28b5&NumMedia=1......

In order to parse the parameters from those values you just saw, we need an npm package.

❗ The parameter value you want to parse with qs and return from the Azure Function in the body is called MediaUrl0.

Now, to use qs, first don't forget to initialize it!

const querystring = require('qs');

Then, let's parse the request body, which is held in req.body.

const queryObject = querystring.parse(req.body);

From this outputted object, we'll find its MediaUrl0 attribute and return it.

context.res = {
   body: queryObject.MediaUrl0
};

📹 Walkthrough Video

Final Project Step 3 ⬤⬤⬤◯◯◯ | 🕐 Estimated completion: 20-40 minutes

Reviewing your Flowchart

✅ Task:

• Ask your mentor (or a friend) to carefully look over the flowchart and explain the project to you + take note if there are any holes in their explanation that you still need to visualize in the flowchart for it to make more sense
• Explain the flowchart back to them and ask them if they have any feedback on how you can improve the use of technologies in your project
• Use the feedback you improve your flowchart and update the file in the final-project branch
• 🚀 Commit your changes to the final-project branch, make a pull request, and merge it
  • In the pull request description, explain the feedback you received and the changes you made

How to improve a flowchart

There are 3 main things to focus on when you are getting feedback on and improving your flowchart:

1️⃣ Logic:

• Does the flowchart make sense?
• Do the arrow directions makes sense?
• Are the descriptions for the interactions between technologies logically correct?

2️⃣ Accuracy:

• Did you include all components required for this project?
• Do the arrows represent accurate relationships?
• Are the descriptions accurate to what purposes the components serve?

3️⃣ Readibility and visual appeal:

• Is it easy to understand what is going on? Is there an easier way to explain it?
• Are the colors/shapes simple and easy to read?
• If you are using color codes, do you have a legend that describes what the colors mean?
• Does the flowchart have a title?

Week 4 Step 1 ⬤◯◯◯◯◯◯ | 🕐 Estimated completion: 20-25 minutes

Adding an Event Listener to your HTML Form!

Demo: 🐰

Congrats! If you made it this far, your Azure functions can now return data. However, users won't want to make POST requests with Postman to use your API though, so let's make it more user friendly.

✅ Task:

• 1: Create a bunnimage-frontend branch
• 2: Install LiveServer for testing
• 3: Optional Learn HTML basics with the interactive course
• 4: Write JavaScript to listen for the form to be submitted and call a function
• 5: Write a function in index.js to display input appended with a ❤️ in the output div
• 6: Commit your code to bunnimage/index.html and bunnimage/script.js
• 7: Create a pull request that merges bunnimage-frontend to main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Use LiveServer! This is a helpful VSCode extension that allows you to see your HTML that updates while you edit it.

‼️ Create & Reference index.js in index.html

    <script src="index.js" type="text/javascript"></script>

1: Writing the Event Handler Function!

On websites, there are many different types of events that can occur. For example:

• The user selects a certain element or hovers the cursor over a certain element.
• The user chooses a key on the keyboard.
• A form is submitted.
• Curious for more? Look here

We need to create a function which triggers when someone submits an image,
but first we will create a function which changes content on the page when we
submit text.

const bunnForm = document.getElementById('bunnForm');

bunnForm.addEventListener('submit', function (event) {
  const username = document.getElementById("username").value
});

event.preventDefault()

bunnForm.addEventListener('submit', function (event) {
   event.preventDefault()
   const username = document.getElementById("username").value
   const output = document.getElementById("output")
   output.textContent = username + "❤"
});

2: How do I trigger the function when the form is submitted?

The event listener triggers the JavaScript function when the form is submitted.
Here is how the form should look in the bunnimage index.html file:

<form id="bunnForm">
   <label for="name">Code: </label> <br>
   <input type="text" id="username" name="name" aria-label="name" /> <br>
   <input value="Submit" type="submit" />
</form>
<br/>
<div id="output"></div>

Here is the JavaScript which should be in a separate JavaScript file index.js:

const bunnForm = document.getElementById('bunnForm');

bunnForm.addEventListener('submit', function (event) {
   event.preventDefault()
   const username = document.getElementById("username").value
   const output = document.getElementById("output")
   output.textContent = username + "❤"
});

💡 the for attribute in the <label> and the aria-label attribute in the <input>element make the website more accessible to users needing assistive technologies such as screen readers.

📹 Walkthrough Video

Week 4 Step 4 ⬤⬤⬤⬤◯◯◯ | 🕐 Estimated completion: 5-20 minutes

Downloading your image!

Demo: 🐰

Write and connect a JS file to make a GET request to the download Azure function that includes the codename to receive the link. Edit the button on the HTML page so that it downloads the file when clicked.

✅ Task:

• 1: Make sure you're on the bunnimage-frontend branch
• 2: Add an attribute of id with the value button1 onto the upload button
• 3: Create a new input field with an id of downloadusername and create a button with an id of button2 that calls the function downloadImage() in index.html
• 4: Create the downloadImage() function with a await fetch GET request to send downloadusername to your Bunnimage Azure Function to return the file download uri
• 5: If the fetch was successful, open the file download link using window.open() and make sure it replaces the page instead of opening a new tab.
• 6: Commit your updated code to bunnimage/index.html and bunnimage/script.js
• 7: Create a pull request to merge bunnimage-frontend onto main, and only merge the pull request when the bot approves your changes!