updated step 4

Author: shreythecray

.bit/responses/1.4-Week 1 Step 4.md

@@ -18,7 +18,7 @@ Week 1 Step 4 ⬤⬤⬤⬤◯◯◯◯◯ | 🕐 Estimated completion: 35-45 min
 - [ ] Run `git pull`
 - [ ] ***1:*** Create an Azure account
 - [ ] ***2:*** Create an HTTP trigger Azure function that gets content from a request parameter called `password` and returns it in the function's body
-- [ ] 🚀 Place your function URL in a [repository secret](https://docs.github.com/en/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository) called `HACKERVOICE_ENDPOINT` and commit the function's code in a file named `HackerVoice/index.js` on the `week1` branch
+- [ ] 🚀 Place your function URL in a [repository secret](https://docs.github.com/en/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository) called `HACKERVOICE_ENDPOINT` and commit the function's code in a file named `HackerVoice/index.js` on a new `hackervoice` branch
 
 ## 🚧 Test your Work
 **Option 1:**
@@ -49,11 +49,13 @@ When you create an serverless function, you need to be able to "trigger" (call)
 
 ### Creating and deploying a simple HTTP trigger function
 
+> [Checkout this detailed tutorial on the Microsoft Azure website](https://docs.microsoft.com/en-us/azure/azure-functions/functions-create-your-first-function-visual-studio). We will cover the same content below.
+
 <details>
 <summary>:exclamation: Create a local project</summary>
   </br>
 
-1. Choose the Azure icon in the Activity bar, then in the Azure: Functions area, select the Create new project... icon.
+1. Click on the Azure icon in the Activity bar (leftmost vertical menu on VS Code). If you hover over the FUNCTIONS dropdown, you will see a bunch of icons appear on the right. Select the Create New Project icon that looks like a folder with a lightning bolt on it.
   <br>
   <img src="https://docs.microsoft.com/en-us/azure/azure-functions/media/functions-create-first-function-vs-code/create-new-project.png" width=400>
   <br>
@@ -66,9 +68,11 @@ When you create an serverless function, you need to be able to "trigger" (call)
   * Select how you would like to open your project: Choose Add to workspace.
 4. Using this information, Visual Studio Code generates an Azure Functions project with an HTTP trigger. You can view the local project files in the Explorer. To learn more about files that are created, see Generated project files.
 </details>
+<br>
 
 This is what your VS Code should look like after creating the local project:
 <br><img src="https://user-images.githubusercontent.com/28051494/122148350-35f4d080-ce0f-11eb-8763-c832ef097949.png">
+<br>
 
 <details>
 <summary>:exclamation: Publish the project to Azure</summary>
@@ -87,7 +91,7 @@ In this section, you create a function app and related resources in your Azure s
     * **Select a location for new resources**: For better performance, choose a [region](https://azure.microsoft.com/en-us/global-infrastructure/geographies/) near you.
 
 </details>
-
+<br>
 <details>
 <summary>:exclamation: Run the function locally</summary>
   </br>
@@ -110,6 +114,7 @@ You could have instead sent an HTTP GET request to the http://localhost:7071/api
 
 After you've verified that the function runs correctly on your local computer, it's time to use Visual Studio Code to publish the project directly to Azure.
 </details>
+<br>
 
 <details>
 <summary>:exclamation: Sign into Azure</summary>
@@ -125,14 +130,11 @@ If you're already signed in, go to the next section.
 2. When prompted in the browser, choose your Azure account and sign in using your Azure account credentials.
 3. After you've successfully signed in, you can close the new browser window. The subscriptions that belong to your Azure account are displayed in the Side bar.
 </details>
+<br>
 
-### Use the 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.
-
-![trigger the function](https://media.giphy.com/media/gK86LCd5HiEUpz1t0i/giphy.gif)
+### Understand the Code
 
-First let's try to understand the code:
+Open index.js and check out the code. It should look almost exactly like this:
 
 ```javascript
 module.exports = async function (context, req) {
@@ -150,63 +152,32 @@ module.exports = async function (context, req) {
 }
 ```
 
-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.
-
-<img width="300" alt="query parameters" src="https://user-images.githubusercontent.com/28051494/114982357-34754f00-9e44-11eb-95c1-f4fbae1bcb40.png">
-
-2. Run the function and check the HTTP response content - make sure that the output now contains your name.
-
-<img width="300" alt="output" src="https://user-images.githubusercontent.com/28051494/114982672-9930a980-9e44-11eb-94f6-fc9d786c7fa5.png">
-
-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.
-
-<details>
-<summary>:question: Why does the function output prioritize the Query parameter over the body parameter?</summary>
-  </br>
+Let's go line by line:
+- 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 (in sample.dat file): `const name`
+- Conditional (ternary) operator to print message if parameter exists (else print error message):
+  ```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.";
+  ```
+
+- 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`
+
+### Trigger the function
 
-```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.
-<br><br/>
-</details>
-
-4. In the Input, remove the name query parameter and try running the function again.
-
-<img width="300" alt="output" src="https://media.giphy.com/media/0FDszXrBqNmV9xR8Dp/giphy.gif">
-
-Try editing this function on your own! *(Don't forget to save when you make changes!)*
-
-
-<br><br/>
-</details>
+Let's try triggering this function! Locate this function on the [Azure portal](portal.azure.com) and get 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.
 
 *One more tip: don’t forget to save! Rewriting code can be challenging and extremely frustrating, so save yourself the trouble!*
 
-## Request Parameters
+### Creating a Request Parameters
 
 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.
 
-### 3: Creating a request parameter
 Look at the code for a basic HTTP Function:
 
 ```javascript
@@ -244,7 +215,7 @@ Go to the function trigger you are working on, and find this button above the co
 </details>
 
 
-*Note: Every time you make a new commit to `week1`, we will check your function by making a request.*
+*Note: Every time you make a new commit to `hackervoice`, we will check your function by making a request.*
 
 <details>
 <summary>:exclamation: How do I add a respository secret?</summary>

.bit/responses/1.5-Week 1 Step 5.md

@@ -13,7 +13,7 @@ Week 1 Step 5 ⬤⬤⬤⬤⬤◯◯◯◯ | 🕐 Estimated completion: 25-35 min
 - [ ] Run `git pull`
 - [ ] ***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."
 - [ ] ***2:*** If it doesn’t equal the correct password, the function should output “Access denied.”
-- [ ] 🚀 Commit the update function's code in a file named `HackerVoice/index.js` to the root of the `week1` branch!
+- [ ] 🚀 Commit the update function's code in a file named `HackerVoice/index.js` to the root of the `hackervoice` branch!hackervoice
 
 :exclamation: Make sure you follow the *exact* response we provided. `Access denied.` and `Access granted.`
 

.funcignore

@@ -0,0 +1,7 @@
+*.js.map
+*.ts
+.git*
+.vscode
+local.settings.json
+test
+tsconfig.json

.gitignore

@@ -1 +1,94 @@
-*node_modules/*
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TypeScript output
+dist
+out
+
+# Azure Functions artifacts
+bin
+obj
+appsettings.json
+local.settings.json

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "ms-azuretools.vscode-azurefunctions"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Attach to Node Functions",
+            "type": "node",
+            "request": "attach",
+            "port": 9229,
+            "preLaunchTask": "func: host start"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "azureFunctions.deploySubpath": ".",
+    "azureFunctions.postDeployTask": "npm install",
+    "azureFunctions.projectLanguage": "JavaScript",
+    "azureFunctions.projectRuntime": "~3",
+    "debug.internalConsoleOptions": "neverOpen",
+    "azureFunctions.preDeployTask": "npm prune"
+}

.vscode/tasks.json

@@ -0,0 +1,23 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "func",
+			"command": "host start",
+			"problemMatcher": "$func-node-watch",
+			"isBackground": true,
+			"dependsOn": "npm install"
+		},
+		{
+			"type": "shell",
+			"label": "npm install",
+			"command": "npm install"
+		},
+		{
+			"type": "shell",
+			"label": "npm prune",
+			"command": "npm prune --production",
+			"problemMatcher": []
+		}
+	]
+}

HttpTrigger1/function.json

@@ -0,0 +1,19 @@
+{
+  "bindings": [
+    {
+      "authLevel": "anonymous",
+      "type": "httpTrigger",
+      "direction": "in",
+      "name": "req",
+      "methods": [
+        "get",
+        "post"
+      ]
+    },
+    {
+      "type": "http",
+      "direction": "out",
+      "name": "res"
+    }
+  ]
+}

HttpTrigger1/index.js

@@ -0,0 +1,13 @@
+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
+    };
+}

HttpTrigger1/sample.dat

@@ -0,0 +1,3 @@
+{
+    "name": "Azure"
+}

host.json

@@ -0,0 +1,15 @@
+{
+  "version": "2.0",
+  "logging": {
+    "applicationInsights": {
+      "samplingSettings": {
+        "isEnabled": true,
+        "excludedTypes": "Request"
+      }
+    }
+  },
+  "extensionBundle": {
+    "id": "Microsoft.Azure.Functions.ExtensionBundle",
+    "version": "[2.*, 3.0.0)"
+  }
+}