Labqurzor App

.eslintrc.json

@@ -4,8 +4,7 @@
     "commonjs": true,
     "es6": true
   },
-  "plugins": ["prettier"],
-  "extends": "eslint:recommended",
+  "extends": "plugin:prettier/recommended",
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly"
@@ -14,7 +13,6 @@
     "ecmaVersion": 2018
   },
   "rules": {
-    "prettier/prettier": "error",
     "no-console": "off"
   }
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,7 +3,6 @@ name: Bug report
 about: Create a report to help us improve
 title: "Short description of the issue"
 labels: bug
-assignees: jorgeluiso, rubycalling
 ---
 
 #### Describe the bug

.github/ISSUE_TEMPLATE/feature_request.md

@@ -3,7 +3,6 @@ name: Feature Request
 about: Suggest an idea for this project
 title: "Short description of the feature"
 labels: enhancement
-assignees: jorgeluiso, rubycalling
 ---
 
 #### Is your feature request related to a problem? Please describe.

.github/pull_request_template.md

@@ -18,9 +18,8 @@ Also add a link to your own Messenger experience for your reviewer to test the c
 - [ ] My code follows the code style of this project.
 - [ ] My change requires a change to the documentation.
 - [ ] I have updated the documentation accordingly.
-- [ ] I have read the **[CONTRIBUTING](https://github.com/fbsamples/original-coast-clothing/blob/master/CONTRIBUTING.md)** document.
+- [ ] I have read the **[CONTRIBUTING](https://github.com/fbsamples/original-coast-clothing/blob/main/CONTRIBUTING.md)** document.
 - [ ] I have added tests to cover my changes.
 - [ ] All new and existing tests passed.
 - [ ] The title of my pull request is a short description of the requested changes.
-- [ ] I have added @jorgeluiso, @rubycalling as reviewers.
 - [ ] I have added the label **enhancement** to my pull request.

.github/workflows/tests.yml

@@ -0,0 +1,28 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: OCC CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: yarn install
+    - run: yarn run lint

.gitignore

@@ -17,4 +17,4 @@ node_modules/
 .eslintcache
 
 # dotenv environment variables file
-.env
+.env*

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": false,
+  "printWidth": 80
+}

.sample.env

@@ -1,21 +1,22 @@
 # Environment Config
 
-# store your secrets and config variables in here
-# only invited collaborators will be able to see your .env values
+# Store your secrets and config variables here.
+# Only invited collaborators will be able to see your .env values.
 
 # Page and Application information
 PAGE_ID=
 APP_ID=
 PAGE_ACCESS_TOKEN=
 
-# Your App secret can be found in App Dashboard -> Seetings -> Basic
+# Your App secret can be found in App Dashboard -> Settings -> Basic
 APP_SECRET=
 
 # A random string that is used for the webhook verification request
 VERIFY_TOKEN=
 
 # URL where you host this code
-# You can use LocalTunnel or Heroku ex: https://mystic-wind-83.herokuapp.com
+# You can use a tunneling service or Heroku ex: https://mystic-wind-83.herokuapp.com
+# It must be https, and without trailing slash.
 APP_URL=
 
 # URL of your website where the "shop now" is located
@@ -25,4 +26,4 @@ SHOP_URL=
 # Preferred port
 PORT=3000
 
-# note: .env is a shell file so there can't be spaces around =
+# Note: .env is a shell file so there can't be spaces around =

CONTRIBUTING.md

@@ -9,13 +9,13 @@ and for external contributions the recomendation is to file an Issue explaining
 why the changes would be usefull. Please also add to the issue if you would like
 to submit a Pull Request to solve the issue.
 
-When submitting a PR please provide the context and is best to reference the 
+When submitting a PR please provide the context and is best to reference the
 issue.
 
 ## Pull Requests
 We actively welcome your pull requests.
 
-1. Fork the repo and create your branch from `master`.
+1. Fork the repo and create your branch from `main`.
 2. If you've added code that should be tested, add tests.
 3. If you've changed APIs, update the documentation.
 4. Ensure the test suite passes.
@@ -36,10 +36,10 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 disclosure of security bugs. In those cases, please go through the process
 outlined on that page and do not file a public issue.
 
-## Coding Style  
+## Coding Style
 * We use Prettier for styling
 
 ## License
 By contributing to Sample Messenger App Original Coast Clothing, you agree that
 your contributions will be licensed under the LICENSE file in the root directory
-of this source tree.
+of this source tree.

LICENSE

@@ -2,7 +2,7 @@ BSD License
 
 For Messsenger For Sample Messenger App Original Coast Clothing
 
-Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
+Copyright (c) Meta Platforms, Inc. and its affiliates. All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification,
 are permitted provided that the following conditions are met:
@@ -14,7 +14,7 @@ are permitted provided that the following conditions are met:
    this list of conditions and the following disclaimer in the documentation
    and/or other materials provided with the distribution.
 
- * Neither the name Facebook nor the names of its contributors may be used to
+ * Neither the name Meta nor the names of its contributors may be used to
    endorse or promote products derived from this software without specific
    prior written permission.
 

README.md

@@ -28,10 +28,10 @@ Before you begin, make sure you have completed all of the requirements listed ab
 #### Grant  Messenger access to your Facebook App
 
 1. Go to your app Dashboard
-2. Under Add Product find Messenger and click Set Up
+2. Under _Add Product_ find _Messenger_ and click _Set Up_
 3. Now you should be in the App Messenger Settings
-4. Under Access Tokens, click on Edit Permissions
-5. Select the desired page and allow Manage and access Page conversations in Messenger
+4. Under Access Tokens, click on _Add or Remove Pages_
+5. Select the desired page and allow "Manage and access Page conversations" in Messenger
 6. Select the desired page and an access token should appear
 7. Get the Page ID from the page access token by using the [Access Token Debugger](https://developers.facebook.com/tools/debug/accesstoken/)
 8. In the section Built-In NLP, select your page and enable the toggle
@@ -48,97 +48,146 @@ $ cd original-coast-clothing
 You will need:
 
 - [Node](https://nodejs.org/en/) 10.x or higher
-- [Localtunnel](https://github.com/localtunnel/localtunnel) or remote server like [Heroku](https://www.heroku.com/)
+- Remote server service such as [Heroku](https://www.heroku.com/), a local tunneling service such as [ngrok](https://ngrok.com/), or your own webserver.
 
 # Usage
 
-## Using Local Tunnel
+## Using ngrok
 
-#### 1. Install the dependencies
+#### 1. Install tunneling service
+
+If not already installed, install ngrok via [download](https://ngrok.com/download) or via command line:
 
 ```bash
-$ npm install
+npm install -g ngrok
 ```
 
-Alternatively, you can use [Yarn](https://yarnpkg.com/en/):
-
+In the directory of this repo, request a tunnel to your local server with your preferred port
 ```bash
-$ yarn install
+ngrok http 3000
+```
+
+The screen should show the ngrok status:
+
+```
+Session Status                online
+Account                       Redacted (Plan: Free)
+Version                       2.3.35
+Region                        United States (us)
+Web Interface                 http://127.0.0.1:4040
+Forwarding                    http://1c3b838deacb.ngrok.io -> http://localhost:3000
+Forwarding                    https://1c3b838deacb.ngrok.io -> http://localhost:3000
+
+Connections                   ttl     opn     rt1     rt5     p50     p90
+                              0       0       0.00    0.00    0.00    0.00
 ```
+Note the https URL of the external server that is fowarded to your local machine. In the above example, it is `https://1c3b838deacb.ngrok.io`.
+
+#### 2. Install the dependencies
+
+Open a new terminal tab, also in the repo directiory.
 
-#### 2. Install Local Tunnel
 ```bash
-npm install -g localtunnel
+$ npm install
 ```
 
-Open a new terminal tab and request a tunnel to your local server with your preferred port
+Alternatively, you can use [Yarn](https://yarnpkg.com/en/):
+
 ```bash
-lt --port 3000
+$ yarn install
 ```
 
-#### 3. Rename the file `.sample.env` to `.env`
+#### 3. Set up .env file
+
+Copy the file `.sample.env` to `.env`
 
 ```bash
-mv .sample.env .env
+cp .sample.env .env
 ```
 
- Edit the `.env` file to add all the values for your app and page. Then run your app locally using the built-in web server
+Edit the `.env` file to add all the values for your app and page. Note that `APP_URL` will be the external URL from step 1.
 
-#### 4. Run your app locally using the built-in web server<
+#### 4. Run your app locally
 
 ```bash
 node app.js
 ```
 
 You should now be able to access the application in your browser at [http://localhost:3000](http://localhost:3000)
 
+Confirm that you canalso access it at the external URL from step 1.
+
 #### 5. Configure your webhook subcription and set the Messenger profile
 
-Use the `VERIFY_TOKEN` that you created in `.env` file and call the **/profile** endpoint like so:
+Use the `VERIFY_TOKEN` that you created in `.env` file and call the **/profile** endpoint in your browser or via cURL:
 ```
-http://localhost:3000/profile?mode=all&verify_token=verify-token
+http://localhost:3000/profile?mode=all&verify_token=verify-tokenl
 ```
 
+This will configure your webhook.
+
 #### 6. Test that your app setup is successful
 
-Send a message to your Page from Facebook or in Messenger, if your webhook receives an event, you have fully set up your app! Voilà!
+Send a message to your Page from Facebook or in Messenger.
+
+You should see the webhook called in the ngrok terminal tab, and in your application terminal tab.
+
+If you see a response to your message in messenger, you have fully set up your app! Voilà!
 
 ## Using Heroku
+
 #### 1. Install the Heroku CLI
 
 Download and install the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)
 
 #### 2. Create an app from the CLI
 
 ```bash
-git init
 heroku apps:create
 # Creating app... done, ⬢ mystic-wind-83
 # Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git
 ```
 
-#### 3. Deploy the code
+Note the name given to your app. In this example, it was `mystic-wind-83`.
+
+#### 3. Set your environment variables
+
+On the [Heroku App Dashboard](https://dashboard.heroku.com/), find your app and set up the config vars following the comments in the file ```.sample.env```
+
+Alternatively, you can set env variables from the command line like this:
+
+ ```bash
+heroku config:set PAGE_ID=XXXX
+```
+
+#### 4. Deploy the code
+
 ```bash
-git add .
-git commit -m "My first commit"
-git push heroku master
+git push heroku main
 ```
 
-#### 4. Set your environment variables
-  In your Heroku App Dashboard [https://dashboard.heroku.com/apps/mystic-wind-83](https://dashboard.heroku.com/apps/mystic-wind-83) set up the config vars following the comments in the file ```.sample.env```
+#### 5. View log output
+
+```bash
+heroku logs --tail
+```
 
-#### 5. Configure your webhook subscription and set the Messenger profile
-  You should now be able to access the application. Use the ```VERIFY_TOKEN``` that you created as config vars and call the **/profile** endpoint like so:
+#### 6. Configure your webhook subscription and set the Messenger profile
+  You should now be able to access the application. Use the ```VERIFY_TOKEN``` that you created as a config var and call the **/profile** endpoint on your app like so:
 
   ```
-  http://mystic-wind-83.herokuapp.com/profile?mode=all&verify_token=verify-token
+  http://<YOUR APP NAME>.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>
   ```
 
 #### 6. Test that your app setup is successful
 
-  Send a message to your Page from Facebook or in Messenger, if your webhook receives an event, you have fully set up your app! Voilà!
+Send a message to your page from Facebook or in Messenger. If your webhook receives an event, you have fully set up your app! Voilà!
 
 ## License
+
 Sample Messenger App Original Coast Clothing is BSD licensed, as found in the LICENSE file.
 
-See the [CONTRIBUTING](CONTRIBUTING.md) file for how to help out.
+See the [CONTRIBUTING](CONTRIBUTING.md) file for how to help out.
+
+Terms of Use - https://opensource.facebook.com/legal/terms
+Privacy Policy - https://opensource.facebook.com/legal/privacy