Open ghost opened 3 years ago
Week 1 Step 2 ⬤⬤◯◯◯◯◯◯◯ | 🕐 Estimated completion: 5-20 minutes
week1
week1/helloworld.js
helloworld.js
, Write and Export a JS function hello
that returns "Hello World"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!
Before we start coding, we need to install an IDE. 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).
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!
:exclamation: Don't forget to git pull
before making any changes to your local repo!!
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.
Week 1 Step 3 ⬤⬤⬤◯◯◯◯◯◯ | 🕐 Estimated completion: 10-15 minutes
In this step, we'll be using a software called Postman to test a premade 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!
You can sign up for Postman here.
In this step, you will be using Postman to test the Cataas API by sending a GET request.
Don't worry, we'll tell you what all that means in a moment!
"The cloud" refers to servers that are accessed over the Internet, and the software and databases that run on those servers. Cloud servers are located in data centers all over the world. By using cloud computing, users and companies don't have to manage physical servers themselves or run software applications on their own machines.
An API is a piece of software that lets two other pieces of software talk to each other! Imagine you're driving a car - the wheel and pedals would be like APIs between you and the car, since they allow you to controll the car easily.
Most of the time, an API will be used to connect an app to an external service. For example, the Twitter API could allow a user to automatically receive updates on tweets concerning a particular topic or event.
A server is a computer that provides (serves) data to other computers, called clients. Clients connect to servers through the internet.
Clients communicate with servers with through HTTP requests
. For example, when you are on your favorite browser and look up YouTube.com, you are making an HTTP "get" request to the server to load the contents from YouTube.com.
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.
Open up Postman and try it out yourself:
color
(color of the text) and size
(font size)Interested in playing around with the API? Documentation is here.
my cat was supposed to be here
Week 1 Step 4 ⬤⬤⬤⬤◯◯◯◯◯ | 🕐 Estimated completion: 35-45 minutes
password
.HACKERVOICE_ENDPOINT
so we can check your function.HackerVoice/index.js
on the week1
branch!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 get whatever value you put in for the request parameter.
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
Azure is Microsoft's cloud computing platform! We will be using it for all of our projects, but other alternatives such as Google Cloud Platform and Amazon Web Services also exist.
When you create an serverless function, you need to be able to "trigger" the function when you want to use/access it. This allows us to save a lot of money because we only have to run the servers when we need them. An HTTP trigger is one that can be used to invoke a serverless function with an HTTP Request.
What does it mean to trigger something? 🤔 Triggering is the same as "invoking" or calling upon the function. Let's say we have created simple a function that provides us with the current time. We can create a timer trigger that will invoke/call upon that function at some scheduled times in day, for example, every night at 10pm when it's time for bed.
Creating and deploying a simple HTTP trigger function
One more tip: don’t forget to save! Rewriting code can be challenging and extremely frustrating, so save yourself the trouble!
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.
Look at the code for a basic HTTP Function:
module.exports = async function (context, req) {
context.log('JavaScript HTTP trigger function processed a request.');
const name = (req.query.name || (req.body && req.body.name));
const responseMessage = name
? "Hello, " + name + ". This HTTP triggered function executed successfully."
: "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";
context.res = {
// status: 200, /* Defaults to 200 */
body: responseMessage
};
}
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, but 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>;
for instance, if you were looking for a color parameter, you can access it with the following code
color = req.query.color;
Note: your parameter must be named
password
Note: Every time you make a new commit to week1
, we will check your function by making a request.
Week 1 Step 5 ⬤⬤⬤⬤⬤◯◯◯◯ | 🕐 Estimated completion: 25-35 minutes
letmein
. If it does, return "Access granted."HackerVoice/index.js
to the root of the week1
branch!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 “Access granted.“. Otherwise, your function should return “Access denied.“.
Now that we've got the user's result, either Access denied.
or Access granted.
, we have to get it to them somehow. We can do this by returning it in the body of the request!
:bulb: 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
!
The function should output the following responses according to whichever case is true:
Access granted.
Access denied.
Week 1 Step 6 ⬤⬤⬤⬤⬤⬤◯◯◯ | 🕐 Estimated completion: 25-35 minutes
git pull
week1
branch TWOCATZ_ENDPOINT
TwoCatz/index.js
to the week1
branchNote: Every time you make a new commit to week1
, we will check your function by making a request.
When you paste your Function URL in your browser or make a GET request with Postman, you might get something like:
{
"/9j/4AAQSk..."
}
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!
base64data = Buffer.from(originaldata).toString('base64')
//put what you want to turn into base64 inside "original data"
//"originaldata" will be encoded in base64.
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.
For fun: Once your API successfully returns the images in base64, you can see what they look like using this website.
Week 1 Step 7 ⬤⬤⬤⬤⬤⬤⬤◯◯ | 🕐 Estimated completion: 5-15 minutes
body: {
cat1: your-first-catpicture-in-base64,
cat2: your-second-catpicture-in-base64,
names: [name1, name2]
}
week1
branchTwoCatz/index.js
to the week1
branch
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"
]
:bulb: The Base64 is shortened for clarity! Input the base64 into this converter to see whether your images are correct.
Hint: Remember what we did in step 6? You're going to have to make two of those requests for a two cat pictures, so create two different variables for each request to get two unique pictures.
Week 1 Step 8 ⬤⬤⬤⬤⬤⬤⬤⬤◯ | 🕐 Estimated completion: 5-15 minutes
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.
morse-code-converter
that takes in English as a parameter and outputs it in Morse Code.MORSE_ENDPOINT
.week1
branch.Morse/index.js
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.
:books: Reminder: don't forget to import your package!
const morse = require("morse-code-converter");
:bulb: Make sure your parameter is named
plaintext
:bulb: Be sure to return the code in the
body
of the response!
:exclamation: Don't forget to git pull
before making any changes to your local repo!!
Remember: we test your Morse Code function everytime you commit!
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.
✅ Task:
test
About Me
section in theblog.md
file in roottest
Adding self introduction
and add a detailed description of your contributionWhat 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](https://git-scm.com/downloads) 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!Commiting to a repository using a command line?
Setting up
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.
Cloning your repository
Click on "Code" on your repo's page and find your repo's HTTP link: ![image](https://user-images.githubusercontent.com/69332964/116948751-53e6e700-ac4e-11eb-821a-23ccca60f046.png) Enter this 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!Committing and pushing code
First, "stage" your changes. You will be specifying what files you want to commit the changes of. Stage `helloworld.js` changes only: ``` git add helloworld.js ``` Stage ALL your changes to the repository: ``` git add -A ``` Next, let's commit the code. Usually, your commits will be a group of changes that make sense together. *Add a description!* ``` git commit -m "insert your description" ``` Save your commits to the repository on Github! ``` git push ``` **For more information, refer to [this link](https://docs.github.com/en/github/managing-files-in-a-repository/adding-a-file-to-a-repository-using-the-command-line)**Congrats! Your changes should now be visible on Github
:exclamation: Don't forget to
git pull
before making any changes to your local repo!! This gets any changes that were made by the bot.Key functions you should be familiar with after this task include: