Getting Started

[ghost]

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

:question: 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](https://guides.github.com/activities/hello-world/)

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

:question: Help! How does Github work?

:question: What is a Repo?

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

:exclamation: How can I use GitHub Desktop to commit my code?

1. Download GitHub desktop. This is one way you can commit changes to the cabin repo to complete each lesson here. 2. To have access to the cabin repository on GitHub desktop, the name of your repo needs to be entered in the top-left corner in the box with placeholder “Filter” and “Clone Repository” should be selected. 3. Click “Pull Origin” once the repo is cloned to pull to GitHub desktop the most current version of the learning lab. 4. Open VSCode by clicking the button “Open in Visual Studio Code”. The files in the learning lab will be opened in VS code, and now you can complete the lesson (adding the necessary code). You need to add your code in a new file, so make sure you create a new file under the folder in VSCode. When you are done creating your new file and adding the necessary code, save the file and return to GitHub desktop. 5. The change will be shown. Add a summary and description of your change and then click “Commit to main”. Next, click “Push origin”, to push the change made in VSCode to the website. *Remember, each step and lesson is posted on the repo on github.com. You will commit changes when the lesson instructs you to, and once you click “Push origin” and refresh the GitHub page, the issue will close and you can move on.*

:exclamation: 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.

:question: 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.

:pencil: 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

:camping: To move on, make sure you commit the change and merge the branch!

[ghost]

Week 1 Step 2

Getting Started

Downloading an IDE

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.

Visual Studio Code

:computer: Download VSCode and install some extensions!

**Visual Studio Code (or VSCode) was downloaded from this link: https://code.visualstudio.com** Inside VSCode, you downloaded four extensions: **Azure Account, Azure App Service, Azure Functions, and 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:

:question: What is an IDE and why do we need it?

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

:exclamation: OK, how do I install it?

To install VSC, go to: https://code.visualstudio.com/download and choose your operating system (ie. Windows, Mac, Linux, etc). Then click **Download** and run the installer (usually a `.exe` or `.zip` file). After it's installed, open it up and try it out. If you need some help navigating VSC, check out this super helpful YouTube video.

Make sure to use Dark Theme unless you want to live life on the edge...

:pencil: Task 2: Code and export a JavaScript function named hello that returns "Hello World" in a file named helloworld.js. Commit the file to the root directory of a new branch called week1.

:exclamation: Why and how do I export a function?

JavaScript enables the ability to [export functions](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) 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 to run them across the testing code. Let's say your function name is `hello`. To export it, add this line of code at the very bottom of your file outside of your function: `module.exports = hello`. Example: ```js function hello() { // your code } module.exports = hello ``` When you commit the file, we will try to run the function by importing it and compare it's output to the expected output like so: ```js let hello = require('../../helloworld.js') let output = hello() ``` #### How does this apply to code in the real world? Just like you can import code from modules other people have written, you can also **import functions you wrote from *other files* to reuse them.** In function oriented programming, you use functions over and over again to save code. If you want to use the function `hello()` in another file, you would need to import it.

:exclamation: Can I have more detailed steps?

1. Create a new file 2. Name the file helloworld.js 3. Write your code 4. If you have node installed on your computer, open terminal on VS Code and type 'node helloworld.js' 5. If you have not installed node on your computer, you will need to do that first: https://nodejs.org/en/download/ 6. Tip: to test your function, call it in your code. 7. Create a new branch named `week1` and commit your `helloworld.js` file in the root directory.

:camping: Make sure you export the function, and commit helloworld.js to the root directory of a new branch week1 in this repository to move on!

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!

[ghost]

Week 1 Step 3

Postman, APIs, and requests

:question: What is Postman and why do we need it?

Later, when we begin to code our Azure Function, we are going to need to test it. **How?** Just like our final web app and the first function we will code, we'll be sending requests to the Function's endpoint.

You can install Postman from the Chrome Store as a Chrome extension, or sign up here

:question: What is Postman going to do?

1. After this step, we will code an Azure Function that needs testing. 2. We will also later use Postman to **send a POST request** to our Azure Function to test if it works, mimicking what our static website will do. Our HTTP trigger Azure Functions will be an [API](https://www.youtube.com/watch?v=s7wmiS2mSXY) that receives requests and sends back information. To introduce you to sending requests to an API and how Postman works, we'll be **sending a GET request to an API this time.**

:exclamation: Getting Started with Postman

1. You can choose to sign up or skip and go directly to the app. 2. Close out all the tabs that pop up until you reach **this screen** 

:pencil: Task 4: Send a GET request to the Cat Picture API and receive a cat picture with "Bitcamp" written on it in a specified color and text size.

Try it out yourself:

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

Stuck? Check here:

1. **Specifying the API Endpoint:** Enter https://cataas.com/cat/cute/says/Bitcamp, which is the API endpoint, into the text box next to GET  2. **Setting Parameters:** Click on "Params" and enter `color` into Key and the color you want (eg. blue) into Value. Enter `size` into the next Key row and a number (eg. 50) into Value. > **Note on parameters:** > * the `size` parameter refers to the font size of your caption. It has a limit at around 1,200. > * Colors are pretty hit or miss; since the Cat API is on the web, but it generally adheres to HTML color names. Expect values such as "blue, green, yellow" to work. > * The API can take very large words as input for the caption, however only **34** characters can be seen on the picture at one time . 3. **Click `Send` to get your cat picture**

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

:camping: To move on, comment your cat picture 🐱

[shreythecray]

[ghost]

Week 1 Step 4

Writing Your First Function

Configuring Azure

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.

The Cloud

:question: So what is "The Cloud"?

 > A [server](https://www.infotech.co.uk/blog/it-infrastructure-what-does-a-server-actually-do) is a computer that provides (serves) data to other computers, called clients. Client 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. > ["The cloud"](https://www.cloudflare.com/learning/cloud/what-is-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. Watch the 5 min video below before continuing to understand what the cloud is: [](http://www.youtube.com/watch?v=dsKIpLKo8AE "What is The Cloud as Fast As Possible") If you want to learn more about Azure and all its cloud applications, feel free to check out this [link](https://azure.microsoft.com/en-us/overview/what-is-azure/), an overview of its capabilities.

:question: What are serverless functions?

Similarly, serverless functions are cool since they engage the use of serverless computing without the customer (you) having to worry about server space. This allows you to deploy code quickly and easily. Here's a great explanation of [Serverless Demystified](https://dev.to/kbariotis/serverless-demystified-333k) [⚡️ 10 Ways to Use Serverless Functions](https://dev.to/aws/10-ways-to-use-serverless-functions-bme)

:question: What is Azure?

**According to Microsoft:** > Azure is an ever-expanding set of cloud services to help your organization meet your business challenges. It’s the freedom to build, manage, and deploy applications on a massive, global network using your favorite tools and frameworks.

:exclamation: How do I create an account?

1. To create an Azure account, go to: https://azure.microsoft.com/en-us/free/ and press **Start free** to be relocated to a signup page.  2. After signing in with your Microsoft account and filling in your personal details, you will be asked to add a credit card. > Rest assured, this is only for security purposes (preventing multiple free accounts per person), and **you won't be charged** unless you choose to buy a premium account, which we do not need for this course. If you need some help navigating Azure, check out this super helpful [resource](https://azure.microsoft.com/en-us/get-started/) provided by Microsoft.

HTTP Trigger Functions

:question: What is an HTTP Trigger Serverless Function?

When you create an serverless function, you needs to be able to "trigger" the function when you need to use/access it. 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. What is an HTTP trigger? An HTTP trigger is one that can be used to invoke a serverless function with an HTTP request.

:exclamation: How can I create a resource and deploy a simple HTTP trigger function with it?

1. Click “Create a resource” in your [portal](https://portal.azure.com/) (near the top left of the screen) 2. Choose “Function App” (it should be in the list of popular resources, with the lightning logo, but you should also be able to search it in the marketplace) 3. Create a new resource group, with a unique resource name (related to what your app does e.g. "TimeFunction"). Add a unique Function App name as well (e.g. "ShreyasTimeApp"). 4. Make sure the "Code" button is selected next to Publish, the Runtime stack is Node.js, and the Version selected is 12 LTS 5. Select your region 6. All of the other tabs in this step should be correctly filled (you can double-check them if you want), so you should be ready to click "Review+Create" and then “Create” 7. Deploying may take a few minutes – be patient! Once the function is deployed, open it.  9. Go to the “Functions” tap on the left (with symbol {fx}).  10. Click “Add” on this page, and then search “HTTP trigger” (in the side window that opens)  12. Click “Add” (at the bottom of the side window) – creating this HTTP trigger may take a few seconds, so remember: patience! 11. Once this trigger is created, it should automatically open. Click the “Code + Test” tab on the left side, and you should be able to see and edit the code. 12. Click “Save” and “Refresh” (in that order, and refresh only once the trigger has completely saved) when you have finished writing your code (or in between – it never hurts). 13. Click “Test/Run” once you are ready to try out your new trigger function. If it all works smoothly, and the code has no errors, you should receive an output that says "Hello, Azure. This HTTP triggered function executed successfully." 

:exclamation: How can I use my function?

Let's try triggering this function! Click on the "Get function URL" button and copy the function url, then go ahead and paste it into a new tab. You will be able to see this in the log in your Azure portal, every time your trigger the function.  First let's try to understand what is happening here: ```javascript 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 }; } ``` The context.log statement at the top of the function is there to indicate to the developer (you) anytime a trigger has been made. Next, we have a constant variable called name that can be passed in through the query parameters (the Input section when you click "Test & Run"). Below this, we have a "conditional ternary operator" which allows us to make a simple conditional statement (if something is true, do this, else/otherwise do that) efficiently. ```javascript //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."; ``` In this case, we have additionally assigned the results of that conditional ternary statement to another variable called `responseMessage` so that we can return the result of the Azure Function using `context.res`. Once you have made sure that the function is saved, let's try running it again but now with new query parameters. In the variable definition of `name` we enable the function get the value of `name` in two ways. Let's test it out: 1. In the input, create a new Query parameter with the Name "name" and your name for the Value. 2. Run the function and check the HTTP response content - make sure that the output now contains your name. 3. Next, let's try to use the body to change the name. In the input body, change "Azure" to another name (a different name) in double quotes and run the function. You should notice that the output still contains the first name you provided. Check out the code and see if you can figure out why this is.

:question: Why does the function output prioritize the Query parameter over the body parameter?

```javascript const name = (req.query.name || (req.body && req.body.name)); ``` In the name variable definition you will see that or || operator. This indicates that the value of name can either be `req.query.name` or `req.body && req.body.name`. Because of the order of the options, it will take the first value if the first value exists. Thus, if we want to use the body, we will need to remove the name parameter from the query.

4. In the Input, remove the name query parameter and try running the function again. Try editing this function on your own! *(Don't forget to save when you make changes!)*

One more tip: don’t forget to save! Rewriting code can be challenging and extremely frustrating, so save yourself the trouble!

:pencil: Task 3: Create and deploy an HTTP trigger Azure Function that outputs the current time and date.

Example output:

Hello! The current time is: 17 : 41 : 34 PM

This time we'll try developing locally. Follow the directions in this link to set up and deploy your first Azure Function right in your local machine.

:question: Not sure where to start?

We need to edit the function so that it returns the current time. 1. First start by creating a variable that gets the current time (try googling "how to get current time in Javascript"). 2. Try to test your function to make sure that it is returning the time in the right format (and timezone). 3. Once you get the time printing, you can remove any extra code related to getting the parameters since we don't need that for this task. Make sure your output matches the example output with accurate current time.

:question: Still stuck? Check out the code below:

Javascript has a built in [Date object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) that evaluates to the time in milliseconds since 1 January 1970 UTC (keep the timezone in mind). First you want to create an instance of the Date object: ```javascript var currentdate = new Date(); ``` Next, you can use the [Instance Methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#instance_methods) in the linked documentation to use methods that calculate the current hours, minutes, and seconds to get the current time. ```javascript var currentime = currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds(); ```

:question: Where's the function URL?

Go to the function trigger you are working on, and find this button above the code. 

:exclamation: How should I test it?

**Option 1:** Paste the *function url* directly in your browser. Text with the current time should appear. **Option 2:** Use **Postman**! Paste the *function url* and make a GET request. In the output box, you should get something like this: 

:camping: To move on, place your function URL in a repository secret called HTTP_ENDPOINT so we can check your function. Remember to commit the function's code in a file named httptime.js to the root of the week1 branch!

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

:exclamation: How do I add a respository secret?

[Here are some steps:](https://docs.github.com/en/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository) 1. On GitHub, navigate to the main page of the repository. 2. Under your repository name, click `Settings`.  3. In the left sidebar, click Secrets. 4. Click New repository secret. 5. Type a name for your secret in the Name input box. 6. Enter the value for your secret. 7. Click Add secret.

[ghost]

Week 1 Step 5

One Cat Isn't Enough

More practice with Azure Functions

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.

Get started by creating another new HTTP Trigger Azure Function with the already created Function App.

:pencil: Task 5: Create and deploy an HTTP trigger Azure Function that outputs TWO randomly generated cat pictures from the cat API and TWO names from the list below.

Information required to complete task:

• API endpoint: https://cataas.com/cat/cute/says/Bitcamp
• List of names: "Shreya, Emily, Fifi, Beau, Evelyn, Julia, Daniel, Fardeen"

You should return the images in JSON format in the body.

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

Return your images encoded in base64!

:exclamation: Excuse me, base64? Why and how would I do that?

```js base64data = Buffer.from(originaldata).toString('base64') //put what you want to turn into base64 inside "original data" //"originaldata" will be encoded in base64. ``` #### **What even is base64? It looks like gibberish.** 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! #### **What's the real world application?** 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.

:exclamation: How can I make a request to the cat API?

**Hint:** You should try using the `node-fetch` module, but there are many other ways to do it as you can see [here](https://www.twilio.com/blog/5-ways-to-make-http-requests-in-node-js-using-async-await).

🔵 I'm still a little lost, some more help would be great!

1. Let's use the `node-fetch` module for this task. Install it on your Azure Portal console: **Step 1: Install the module** In the left tab, scroll down to **Console**.  Enter these commands in order: ```sh npm init -y npm install node-fetch ``` *If you're confused about what this "package" thing is, we'll explain more in depth in the next step.* **Step 2: Add it to your code** Add this line of code to reference the module at the top of your code: `const fetch = require('node-fetch)` 2. Time to make the request! ```js 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 ``` **Your turn!** What should you place in place of `THE_ENDPOINT`? Change the code. > **Tip:** You're going to have to make two of these requests, so create two *different variables* for each request to get a different picture.

:exclamation: How can I select random items out of a list?

**Hint 1:** You'll need to create an array with the names first. **Hint 2:** You'll need to generate a random number within the range of the array length.

🔵 I'm still a little lost, some more help would be great!

1. Create an array with the names: ```js var names = ["name1", "name2"...] ``` 2. Generate a random value in the correct range: ```js var random_value = Math.floor(names.length * Math.random()) ``` 3. Get the name! ```js var resultname = names[random_value] ``` *Do this two times to get two names!*

:exclamation: Now that I've got everything, how do I return it?

`context.res` is the key to answering this question! To return your two images and two names in the output: ```js context.res = { body: { cat1: your-first-catpicture-in-base64, cat2: your-second-catpicture-in-base64, names: [name1, name2] } } ```

:exclamation: How should I test it?

**Option 1:** Paste the *function url* directly in your browser. Text with the current time should appear. **Option 2:** Use **Postman**! Paste the *function url* and make a GET request. In the output box, you should get your desired output:  *Note: This image does not contain the desired output for this task.*

:camping: To move on, place your function URL in a repository secret called SECOND_ENDPOINT so we can check your function. Remember to commit the function's code in a file named twocatz.js to the root of the week1 branch!

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

:exclamation: How do I add a respository secret?

[Here are some steps:](https://docs.github.com/en/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository) 1. On GitHub, navigate to the main page of the repository. 2. Under your repository name, click `Settings`.  3. In the left sidebar, click Secrets. 4. Click New repository secret. 5. Type a name for your secret in the Name input box. 6. Enter the value for your secret. 7. Click Add secret.

[ghost]

Week 1 Step 6

Setting up the Emotion Reader Function

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 parse-multipart and node-fetch npm packages.

:question: 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`. [What is a package?](https://www.w3schools.com/nodejs/nodejs_npm.asp) [What is the node-fetch package?](https://www.npmjs.com/package/node-fetch) [What is the parse-multipart package?](https://www.npmjs.com/package/parse-multipart)

:pencil: Task 5: Make sure you've created a new Function App and installed parse-multipart and node-fetch.

In the left tab, scroll down to Console.

Enter these commands in order:

npm init -y 

npm install parse-multipart

npm install node-fetch

:exclamation: Woah! What just happened when they were installed?

The first command created a **package.json** file to store your dependencies and essentially keeps track of what packages your application needs. The next two actually install the necessary packages with code, `parse-multipart` and `node-fetch`. *Note: If you get red text like `WARN`, you can ignore it.*

:camping: To move on, place the function URL of your new HTTP Trigger as a repository secret named FUNCTION_URL. Then, commit your package.json file to the root directory of the week1 branch.

Remember: we check to see if you've placed your secrets everytime you commit!

[ghost]

Week 1 Step 7

📝 Week 1 Livestream Feedback

Please complete after you've viewed the Week 1 livestream! If you haven't yet watched it but want to move on, just close this issue and come back to it later.

Comment your feedback:

Help us improve BitCamp Serverless - thank you for your feedback! Here are some questions you may want to answer:

• How was the content? Did it help you? Was it too challenging or too easy? Did it help you complete the week's homework?
• How was the pace? Was it hard to follow along? Did we go too slow?
• If you could add/improve something to/in the livestream, what would it be?

:camping: To move on, comment your feedback.

[shreythecray]

Added issues for improvements

[ghost]

Providing Feedback

What was confusing about this week? If you could change or add something to this week, what would you do? Your feedback is valued and appreciated!

[shreythecray]

Added issues for improvements

[ghost]

That's it for Week 1, move on to Week 2 in your new issue!