more config and responses

Author: mattdavis0351

config.yml

@@ -196,8 +196,8 @@ steps:
           workflowFile: "%payload.repository.html_url%/edit/master/.github/workflows/my-workflow.yml"
           actionsUrl: "%payload.repository.html_url%/actions"
 
-  - title: Add a second Action
-    description: Create a pull request to add another Action
+  - title: Prevent the workflow from running
+    description: Comment out the lines in the workflow to prevent unwanted runs
     event: pull_request
     # link: "{{ repoUrl }}/issue1/1"
     actions:
@@ -214,19 +214,39 @@ steps:
       - type: gate
         left: "%payload.pull_request.title%"
         operator: ===
-        right: Second Action
+        right: External APIs
 
         # if those statments FAIL... do this
         else:
           - type: respond
             with: e-rename-pr.md
             data:
-              title: Initial Workflow
+              title: External APIs
           # if those gates === true Then do this stuff
       ###############################################################################################################
       - type: closeIssue
         issue: Knock Knock...
       - type: respond
-        with: 10_some-markdown.md
-        data:
-          actionsUrl: "%payload.repository.html_url%/actions"
+        with: 10_action-two.md
+
+  - title: Create your new Action metadata
+    description: Add action.yml file for new joke action
+    event: pull_request.synchronize
+    actions:
+      - type: gate
+        left: "%payload.pull_request.title%"
+        operator: ===
+        right: External APIs
+      - type: respond
+        with: 10_create-metadata.md
+
+  - title: Create your Actions JavaScript files
+    description: Add joke.j and main.js to your Action
+    event: pull_request.synchronize
+    actions:
+      - type: gate
+        left: "%payload.pull_request.title%"
+        operator: ===
+        right: External APIs
+      - type: respond
+        with: 10_create-js-files.md

responses/09_new-action.md

@@ -9,7 +9,7 @@ You will still see the workflow trying to execute with every push if you look at
 ### :keyboard: Activity: Setting up the next Action
 
 1. [Edit]({{workflowFile}) your workflow file by commenting out every single line.
-2. Commit the changes to a new branch.
+2. Commit the changes to a new branch and name it `action-two`.
 3. Create a pull request named **External APIs**
 
 Like our first Action, I'll respond in the new pull request when I detect it has been opened.

responses/10_action-two.md

@@ -0,0 +1,32 @@
+## {{user.login}} you're doing great 👍
+
+Just like the first Action we wrote, we are going to need to setup a few directories and files.
+
+### :keyboard: Activity: Configure your second Action
+
+Now that you have all the necessary tools installed locally, follow these steps to ensure your environment is configured and ready for Actions.
+
+1. Open the **Terminal** (Mac and Linux) or **Command Prompt** (Windows) on your local machine and navigate to your course repo directory.
+2. Checkout the `master` branch
+   `git checkout master`
+3. Update the contents of your Learning Lab repo to your local machine:
+   `git pull`
+4. Checkout the `action-two` branch you created for this pull request.
+   `git checkout action-two`
+5. Create a new folder for our Actions files:
+   `mkdir -p .github/actions/joke-action`
+6. Navigate to the `joke-action` folder you just created:
+   `cd .github/actions/joke-action`
+7. Initialize a new project:
+   `npm init -y`
+8. Install the **request** and **request-promise** dependencies using `npm`:
+   `npm install --save request request-promise`
+9. Commit those newly added files,we will remove the need to upload **node_modules** in a later step:
+   `git add .`
+   `git commit -m 'initial joke action'`
+10. Push you changes to your repository:
+    `git push
+
+---
+
+I will respond once you have finished.

responses/10_create-js-files.md

@@ -0,0 +1,112 @@
+## Files? 🤔
+
+Yes... files... plural. As you probably know, in JavaScript and other programming languages it is common to break your code into modules so that it is easier to read and maintain going forward. Since JavaScript Actions are just programs written in JavaScript that run based on a specific trigger we are able to make our Action code modular as well.
+
+To do so we will create two files. One of them will contain the logic to reach out to an external API and retrieve a joke for us, the other will call that module and print the joke to the Actions console for us. We will be extending this functionality in our third and final Action.
+
+**Joke API**
+
+The first file will be `joke.js` and it will fetch our joke for us. We will be using the [icanhazdadjoke API](https://icanhazdadjoke.com/api) for our Action. This API does not require any authentication, but it does however that we set a few parameters in the [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers). I'll point out what those are when we get to the code, however it is outside of the scope of this course to cover HTTP in any depth.
+
+When we make our request to this API we will get back a JSON Object in the response. That Object looks like this:
+
+```
+{
+  id: '0LuXvkq4Muc',
+  joke: "I knew I shouldn't steal a mixer from work, but it was a whisk I was willing to take.",
+  status: 200
+}
+```
+
+It contains 3 key:value pairs of data that we can use in our own program or service. In our case, we are only interested in the `joke` field.
+
+**Joke Module**
+
+We will create a file named `joke.js` and it will reside in the `.github/action/joke-action` directory.
+
+The joke module will look like this:
+
+![screenshot of joke.js file](https://i.imgur.com/GklnbKN.png)
+
+We first bring in the `request-promise` library that we installed earlier using `npm`.
+
+Next we define a set of `options` that the `request-promise` library will use when it makes the request.
+
+📖Read more about [request-promise](https://github.com/request/request-promise/blob/master/README.md)
+
+Inside of the `options` block we add a key named `headers`. This defines the HTTP headers that the **icanhazdadjoke** API expects in each request that comes it's way.
+
+**icanhazdadjoke** cares the most about the keys, **Accept** and **User-Agent**, so we need to make sure we fill them in.
+
+Next we define an **asynchronous JavaScript function** to make the request for us, storing the JSON Object that is returned in a variable named `res`.
+
+Lastly, we `return` the `res.joke` which is only the value associated with the `joke` key of the JSON Object. This value will be random every time our Action runs because of how we are interacting with the **icanhazdadjoke** API.
+
+This file finishes up by exporting the newly created function so that we can use it in our `main.js` file.
+
+**Main Module**
+
+We will also create a file named `main.js` that resides inside of the `.github/actions/joke-action` directory.
+
+That file will look like this:
+
+![screenshot of main.js file](https://i.imgur.com/pTBDECt.png)
+
+Like we did in the `joke.js` file, we are first going to bring in our dependencies. Only this time, our dependency isn't something we installed, it's something we wrote! To do that we simply use `require()` to point to the location of the file we wish to bring in.
+
+Next we write another **asynchronous JavaScript function** that stores the return value of `getJoke()` in a variable called **joke**.
+
+Then we finish the function with a simple joke logged to the console.
+
+Don't forget to call the `run()` function.
+
+### :keyboard: Creating the javascript files for your new Action.
+
+1. Add the following contents to the `.github/actions/joke-action/joke.js` file:
+
+   ```javascript
+   const request = require("request-promise");
+
+   const options = {
+     method: "GET",
+     uri: "https://icanhazdadjoke.com/",
+     headers: {
+       Accept: "application/json",
+       "User-Agent":
+         "Writing JavaScript Action GitHub Learning Lab course.  Visit lab.github.com or to contact us."
+     },
+     json: true
+   };
+
+   async function getJoke() {
+     const res = await request(options);
+     return res;
+   }
+
+   module.exports = getJoke;
+   ```
+
+2. Save the `joke.js` file.
+3. Add the following contents to the `.github/actions/joke-action/main.js` file:
+
+   ```javascript
+   const getJoke = require("./joke");
+
+   async function run() {
+     const joke = await getJoke();
+     console.log(joke);
+   }
+
+   run();
+   ```
+
+4. Save the `main.js` file.
+5. Commit the changes to the `action-two` branch:
+   `git add .`
+   `git commit -m 'creating joke.js and main.js'`
+6. Push the changes to your repository:
+   `git push`
+
+---
+
+I'll respond in this pull request when you have completed these tasks.

responses/10_create-metadata.md

@@ -0,0 +1,31 @@
+### :keyboard: Activity: Create the metadata file
+
+💡All of the following steps take place inside of the `.github/actions/hello-world` directory.
+
+Our Action does not require much metadata for it to run correctly. We will not be accepting any inputs, nor setting any outputs. Because of that we simply need to name it, give it a description and define its environment.
+
+1. Create a file named `action.yml`
+2. Use the `name` parameter to name your Action `"external API action"`
+3. Next, add a `description` parameter and give it a value of `"use an external API to retrieve and display a joke"`
+4. Lastly, define the `run` parameter to use `"node12"` to execute the `"main.js"`
+
+   <details><summary>View the complete file</summary>
+
+   ```yaml
+   name: "external API action"
+
+   description: "use an external API to retrieve and display a joke"
+
+   runs:
+     using: "node12"
+     main: "main.js"
+   ```
+
+   </details>
+
+5. Save the `action.yml` file
+6. commit the changes:
+   `git add .`
+   `git commit -m 'update action.yml'`
+7. push them to the `action-two` branch:
+   `git push`

responses/dev-env.md

@@ -4,61 +4,60 @@
 
 This is an external library that we will install using `npm` which means that you will need [Node.js](https://nodejs.org/) installed.
 
-I find writing Actions to be easier from a local environment vs trying to do everything right here in the repository.  Doing these steps locally allows you to use the editor of your choice so that you have all the extensions and snippets you are used to when writing code.
+I find writing Actions to be easier from a local environment vs trying to do everything right here in the repository. Doing these steps locally allows you to use the editor of your choice so that you have all the extensions and snippets you are used to when writing code.
 
 If you do not have a preferred environment then I suggest following along with me exactly as you see on the screen, which means you'll need to install [Visual Studio Code](https://code.visualstudio.com/).
 
 ## Don't forget to set up your workstation 😉
 
-Most of your work going forward will take place away from your Learning Lab repository, so before continuing with the course ensure you have the following installed on your **local machine**.  
+Most of your work going forward will take place away from your Learning Lab repository, so before continuing with the course ensure you have the following installed on your **local machine**.
 
 1. [ ] [Node.js](https://nodejs.org)
 2. [ ] [Visual Studio Code](https://code.visualstudio.com/) or your editor of choice
 3. [ ] [Git](https://git-scm.com/)
 
-
 ### :keyboard: Activity: Configure your environment
 
 Now that you have all the necessary tools installed locally, follow these steps to ensure your environment is configured and ready for Actions.
 
 1. Open the **Terminal** (Mac and Linux) or **Command Prompt** (Windows) on your local machine
 2. Clone your Learning Lab repo to your local machine:
    `git clone {{repoUrl}}.git`
+
    <details><summary>View GIF</summary><img src="https://media.giphy.com/media/YnvmISGo2MbXpn2bc5/giphy.gif" alt="git clone example" /></details>
     <!-- ![alt text](https://media.giphy.com/media/YnvmISGo2MbXpn2bc5/giphy.gif) -->
 
 3. Navigate to the folder you just cloned:
    `cd writing-javascript-actions`
       <details><summary>View GIF</summary><img src="https://media.giphy.com/media/duA6JVCuXbt5gKqNLw/giphy.gif" alt="directory navigation" /></details>
     <!-- ![alt text](https://media.giphy.com/media/duA6JVCuXbt5gKqNLw/giphy.gif) -->
-4. Create a new branch named `hello-world`.  This is the branch we will use to write our first Action.  **Please do not capitalize letters unless I do, I run case-sensitive checks to make sure I can help you along the way!**
+4. Create a new branch named `hello-world`. This is the branch we will use to write our first Action. **Please do not capitalize letters unless I do, I run case-sensitive checks to make sure I can help you along the way!**
    `git checkout -b hello-world`
+
     <details><summary>View GIF</summary><img src="https://media.giphy.com/media/hvdeWGkjoy4UdfwbfQ/giphy.gif" alt="git checkout example" /></details>
-   
+
 5. Create a new folder for our Actions files:
    `mkdir -p .github/actions/hello-world`
     <details><summary>View GIF</summary><img src="https://media.giphy.com/media/Wn03sc0QsywHHD1LeN/giphy.gif" alt="create folder for action example" /></details>
 6. Navigate to the `hello-world` folder you just created:
    `cd .github/actions/hello-world`
+
     <details><summary>View GIF</summary><img src="https://media.giphy.com/media/ckCMgczjpbjNwkfJq4/giphy.gif" alt="navigate to folder for action example" /></details>
-   
+
 7. Initialize a new project:
    `npm init -y`
+
     <details><summary>View GIF</summary><img src="https://media.giphy.com/media/mEW0fJYx4oUjdgYHDV/giphy.gif" alt="navigate to folder for action example" /></details>
 
-8. Install the **core** and **github** dependencies from the [GitHub ToolKit](https://github.com/actions/toolkit):
-   `npm install --save @actions/core @actions/github`
+8. Install the **core** dependency from the [GitHub ToolKit](https://github.com/actions/toolkit):
+   `npm install --save @actions/core`
    <details><summary>View GIF</summary><img src="https://media.giphy.com/media/H3kGNqDI24lNOEKk5k/giphy.gif" alt="navigate to folder for action example" /></details>
-9.  Commit those newly added files,we will remove the need to upload **node_modules** in a later step:
-    `git add .`
-    `git commit -m 'initial hello-world'`
+9. Commit those newly added files,we will remove the need to upload **node_modules** in a later step:
+   `git add .`
+   `git commit -m 'initial hello-world'`
 10. Push you changes to your repository:
     `git push -u origin hello-world`
 
-
 ---
 
 I will respond once you have finished.
-
-
-