emsesc / test-week2 Goto Github PK

Shell 0.55% Python 53.68% JavaScript 45.77%

test-week2's Introduction

Managing a server is pretty complicated, and building with serverless architectures simplifies this process. 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. Javascript is the core language of this course - one of the most in-demand languages to learn in the industry.

❓ Not sure how to get started? Click here!

⚡ Outline

Week 1 - Get Started with Azure Functions!

Set up tools needed for the "Emotion Reader" project
- Work with an IDE (VSCode)
- Configure Azure
- Navigate GitHub
Code your first Serverless Function
Set up your project
- Configure the Azure Face API
- Install dependencies
Learn how to test APIs with Postman

Week 2 - Working with APIs

Code a HTTP Trigger Serverless Function
- Parse an image
- Make a request to an API
- Return emotion data
Work with the Giphy and Twilio API
- Understand POST and GET requests
- Send data in different formats
- Text the user a gif

Week 3 - Incorporate a Database

Implement a CosmosDB database
- Learn about NoSQL databases and data structures
- Store data with documents
- Code functions to work with databases

Week 4 - Building a Frontend

Code a rudimentary frontend with HTML, CSS, and JS
- Code and style a page
- Integrate JS that makes a POST request to the HTTP Triggers
Visualize emotion data
- Integrate the data stored in the CosmosDB database
- Visualize the emotion data retrieved from the Face API

✔️ After completing the cabin, students will create their own app with this timeline:

Week 5 - Brainstorming & Proposals ⛈

Students will submit a final project proposal which should outline, at a high level, what their project will be. This includes a project flowchart that shows the different components of the project and how they will interact with one another.

Week 6 - Developing the MVP 💻

Students will be presenting their MVPs next week and will be working with their instructors and mentors to develop their projects over the course of the next 2 weeks.

Week 7 - Completing the MVP

Students should have an MVP (Minimum Viable Product) of the final project. This should be a bare bones version of the project with the most basic functionality working.

Week 8 - Finalizing & Adding Features 🎀

Students will continue adding features and building their project until it is fully complete.

Week 9 - Final Presentations

Students will prepare a final presentation with a slidedeck on their project as well as write a blog post detailing their project and how they made it from start to finish.

test-week2's People

Contributors

Watchers

Forkers

lazyplatypus

test-week2's Issues

Week 1

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

GitHub

❓ What is Github?

GitHub is a platform that is widely used in the tech industry, that enables code hosting and makes collaboration for coding a seamless process. 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.

Get started with GitHub

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

❗ Help! I don't know how to use it and I need more information.

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.

One very important rule...
Don't work on your code in the web editor. This is bad practice, and you will regret it later.

❓ What should I do instead?

Install Github Desktop and commit from your local computer. We'll go over code editors next if you don't have one to work on your code locally. You can also use git on your commandline.

📝 Task 1: Create a new branch named `test`, add a sentence introducing yourself to the end of the README.md file, and commit the change to `test`. Then, make a pull request to your main branch and merge the edits.

Pull Request Guidelines

Name the Pull Request Adding self introduction
In the description, place a sentence describing what the Pull Request contributes to the main branch.

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

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

🏕️ To move on, make sure you commit the change and merge the branch!

Week 2

Week 2 Step 1

Parsing Multipart

In your Azure Portal, go into your HTTP function and into the index.js file. You should see starter code there that has something like module.exports....
This is the file that we will be editing.

The Azure Function needs to:

Receive and parse an image from a webpage
Call the Face API and analyze the image

What is happening in this flowchart?

HTML Page: Where the user will submit an image; this page will also make a request with the image to the Azure Function.

Azure Function: Receives the request from HTML Page with the image. In order to receive it, we must parse the image...

Concepts to know:

Parsing data
Node dependency packages
Body and Headers of a request

We're going to be focusing on Part 1, which involves parsing multipart form data.

📝 Task 1: Analyze image input using the Face API

❓How do I parse image data?

In any HTML `` element that receives involves a file upload (which ours does), the data is encoded in the `multipart/form-data` method.

The default http encoding method is application/x-www-form-urlencoded, which encodes text into name/value pairs and works for text inputs, but it is inefficient for files or binary inputs.

multipart/form-data indicates that one or more files are being inputted. Parsing this type of data is a little more complicated than usual. To simplify the process, we're going to use an npm library called parse-multipart.

❓How do I install parse-multipart?

To import Node packages, we use the `require` function:

var multipart = require("parse-multipart");

This imports the parse-multipart package into our code, and we can now call any function in the package using multipart.Function().

Your function should look like this:

var multipart = require("parse-multipart");

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

❓What data is needed to parse the image?

Go to https://www.npmjs.com/package/parse-multipart for documentation and context on what the package does. Look specifically at the example in the "Usage" section and what they are doing, as we're going to do something similar.

Notice that multipart.Parse(body, boundary) requires two parameters. I've already gotten the boundary for you – just like the documentation example, our boundary is a string in the format "----WebKitFormBoundary(random characters here)".

In the multipart.Parse() call, you need to figure out what the body parameter should be.

Hint: It should be the request body. Think about the example Azure function. How did we access that?

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

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

🏕️ To move on, commit your new code to this repository and add your function URL to a repository secret named `FUNCTION_URL`.

Once it successfully parses an image, you can move on!

emsesc / test-week2 Goto Github PK

test-week2's Introduction

❓ Not sure how to get started? Click here!

⚡ Outline

Week 1 - Get Started with Azure Functions!

Week 2 - Working with APIs

Week 3 - Incorporate a Database

Week 4 - Building a Frontend

✔️ After completing the cabin, students will create their own app with this timeline:

Week 5 - Brainstorming & Proposals ⛈

Week 6 - Developing the MVP 💻

Week 7 - Completing the MVP

Week 8 - Finalizing & Adding Features 🎀

Week 9 - Final Presentations