- π© Capture the Flag competitions
- π» Full-Stack Dev
- π Making tech education more accessible
chloerulezzzz's Introduction
chloerulezzzz's People
chloerulezzzz's Issues
One cat, two cats, red cat, blue cat
Week 1 Step 6 ⬀⬀⬀⬀⬀⬀β―β―β― | π Estimated completion: 25-35 minutes
Trying to make node-fetch happen
β Task:
- Run
git pull
and create a new branch calledtwocatz
- 1: Create and deploy an HTTP trigger Azure Function that creates a request for an image from the CataaS API
- 2: Return the image in the request body encoded in base64
- π Place your function URL in a repository secret called
TWOCATZ_ENDPOINT
and commit function code in a file namedTwoCatz/index.js
to thetwocatz
branch - π Create a pull request that merges
twocatz
tomain
, but do not merge it
Note: Every time you make a new commit to twocatz
, we will check your function by making a request.
π§ 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.
β How can I make a request to the CataaS API?
Let's use the node-fetch
module for this task.
-
Install the module in terminal using the following commands in order:
npm init -y npm install node-fetch
-
Add it to your code:
Add this line of code to reference the module at the top of your code (outside of the function):
const fetch = require('node-fetch)
-
Make the request!
Add the following code within the function:
let resp = await fetch(THE_ENDPOINT, { method: 'GET' }); let data = await resp.arrayBuffer() // we need to receive it as a buffer since this is an image we are receiving from the API // Buffer?? https://developer.mozilla.org/en-US/docs/Web/API/Blob
-
What should you place in place of
THE_ENDPOINT
? Change the code.
2: Return your images encoded in base64!
β What does it mean to encode something in base64?
Base64 is just another way to represent data. We can also represent the number 11 or 0 in base64. Remember that the images you see on your screen are actually just numbers!
When we're coding websites, we can use base64 to display images on websites. The base64 outputted from your API can be used to create this:
Base64 encoding allows programs to encode binary data into text (ASCII characters) in order to prevent data loss. We do this since there are certain transfer channels that only reliably transfer text data, and this encoding method allows us to safely transfer images in the form of text.
β How can I encode data 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.
β Now that I've got the picture in base64, how do I return it?
context.res
is the key to answering this question!
context.res = {
body: your_picture_in_base64
}
Getting Started with Serverless
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 theblog.md
file in root. - π Commit the change to
test
, make a pull request to your main branch, naming itAdding self introduction
and add a detailed description of your contribution. Then merge the pull request.
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.
βοΈVocabulary
Repositories
Repositories (or repos) are essentially folders where you can store files of code. The repo of our camp was duplicated into your account when you clicked "Create Template" so that you can commit changes and complete each lesson.
Issues
For our camp, each week is placed inside an issue. Only when you complete the week (committing the necessary code and commenting), will the issue close and you can move on to the next issue. Donβt worry β committing changes is easier than it sounds.
On usual repositories in the contributing world issues are tasks or bugs that need to be completed or fixed.
Fork
If you want to contribute to someone else's code, you would "fork" it. This creates a copy of the code under your account that you can make changes to. Create a fork when you want to make changes to someone else's code and contribute to it.
Branch
Creating a branch on a repository is like forking a repository. You would do this when you want to make changes to your code without harming a working version.
Pull Request
Once you make changes on a forked repository or another branch, you might need to bring the changes into the "main" repository. This allows YOUR changes to be visible in the main project! *You are basically asking for permission to "merge" your changes."
This allows you to:
- Collaborate on code
- Make comments
- Review the contributions made
Command Line Interface
A Command Line Interface (CLI) is your computer's visual application for accessing its operating system. There are different types of CLIs for different operating systems, such as Terminal for MacOs and PowerShell for Windows. If you have Windows, make sure to also install Git Bash for a better tool. In upcoming issues, we will refer to your CLI as your Terminal or Command Line, but remember that they mean the same thing!
Key functions you should be familiar with after this task include:
- Committing changes
- Forking a repository
- Making a new branch
- Making a pull request
Open up!
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.
β Tasks:
- Run
git pull
and create a new branch calledhackervoice
- 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
- π Place your function URL in a repository secret called
HACKERVOICE_ENDPOINT
and commit the function's code in a file namedHackerVoice/index.js
on thehackervoice
branch - π Create a pull request that merges
hackervoice
tomain
, but do not merge it
π§ Test your Work
Option 1:
Paste the function url directly in your browser and add the query parameters to the end of the url: ¶m_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).
- To create an Azure account, go to Microsoft Azure and press Start Free.
- 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.
Set Up Azure Locally on VS Code
- Confirm if you have installed the Azure Tools extension on VS Code
- Create your local project (:exclamation: when prompted to set the language, choose JAVASCRIPT not C#)
- Run the function locally
- Publish the project to Azure
- Get your function url the Output window in VS Code
- 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
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.
β What is happening in index.js?
- Start of function definition:
module.exports = async function
- Print comment in Azure Console anytime the function is triggered:
context.log()
- Get parameter from request body:
const name
- Conditional (ternary) operator to print message if parameter exists (else print error message):
//condition: if name exists name //? is chosen if the condition evaluates to true ? "Hello, " + name + ". This HTTP triggered function executed successfully." //: is chosen if the condition evaluates to false : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";
- Results of that conditional ternary statement are assigned to
responseMessage
which is returned in the function body
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¶m2=hi
β How to get content from a request parameter?
Request parameters are a way for an HTTP request to take in information! They are pretty much identical in purpose to why you would want a parameter for a function in a coding language. In this instance, we will need a parameter for the password.
- Request parameters are a property of the
req
or request parameter of the module - The request has a
query
object that stores all of the parameters passed in - You don't need to specify what parameters the user needs to input into the HTTP request
- You can acess any parameters that are sent in
You would access a parameter by calling on the query like this:
<property name> = req.query.<your property here>;
//example:
let color = req.query.color;
If the user makes a request with a parameter of <url>?color=blue
then the variable color in your function will hold that value.
Note: your parameter must be named
password
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.
β How can I return something in the function body?
In Azure, context
is an object that holds data about the response of the HTTP function. Read more about Accessing the request and response.
In our HTTP trigger function, we have defined context object with the body property:
context.res = {
// status: 200, /* Defaults to 200 */
body: responseMessage
};
To return the password in body, simply replace responseMessage
with password
.
4. Test your Function with Postman
- Deploy your function to Azure
- Get your function url from the Output window on VS Code(same as before) and make a request on Postman
- Add a parameter with the key
password
and give it any random value - Make sure that your function is returning the
password
parameter in the body
π Add Repository Secrets
β How do I add a respository secret?
[TOP SECRET] Please open
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 calledmorse
- 1: Install the
morse-code-converter
package - 2: Code an HTTP trigger function with
morse-code-converter
that takes in English as a parameter and outputs it in Morse Code - π 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 namedMorse/index.js
to themorse
branch - π Create a pull request that merges
morse
tomain
, but do not merge it
β Do not merge the branch!!
1: Installing Packages
Create a new HTTP trigger function in your Azure portal along with the Function App. Navigate to your Function App. This is not the function code, but the actual app service resource.
We will be using the morse-code-converter
npm package.
β Why do we need these "packages" and what are they?
Packages are awesome! They're chunks of publicly available code that someone else has written to help make coding easier for everyone else. These packages reusable code that increases functionality in your code.
Before the Azure Function can run the code we will write, we have to install all the necessary package dependencies. These packages contain code that we will "depend on" in the application; we have to install them in the console using npm install
.
β How do I install the package?
In the left tab, scroll down to Console:
Enter these commands in order:
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".
![Screen Shot 2021-04-26 at 3 15 21 AM](https://user-images.githubusercontent.com/28051494/116067063-a6684800-a63d-11eb-9652-fbda8805fd8a.png)
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.
![Screen Shot 2021-04-26 at 3 12 43 AM](https://user-images.githubusercontent.com/28051494/116066822-525d6380-a63d-11eb-9cea-5f2b82807cca.png)
π 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
β How do I receive the English as a parameter?
Query parameters can be accessed from the req
object in the input of the module.exports
function.
π‘ Since ours is named
plaintext
, we can access it withreq.query.plaintext
.
How would I send the English?
[place your function url here]&plaintext=[insert the English]
β How do I use the Morse Code package?
Tip: Try reading the documentation first.
const morse = require("morse-code-converter");
const code = morse.textToMorse('Hey how are you?'); // .... . -.-- .... --- .-- .- .-. . -.-- --- ..- ..-..
const text = morse.morseToText(code); // HEY HOW ARE YOU?
π‘ Be sure to return the code in the
body
of the response!
β Um. Body?
Tip: context.res
is the object you use to return a response to the user.
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!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.