Linebot Sameple

It is a LINE chatbot written in Google Apps Script (Javascript) with Google sheet as its backend. It features that it works properly without the Google Apps Script editor.

Table of Contents

(click to expand or hide)

1. Set up the environment
   1. Notice
   2. Node.js and NPM
   3. Visual Studio Code (optional)
   4. Clasp
   5. Git
2. Working with Both Clasp and Git in VS Code
   1. Preparations
   2. Editing and uploading the codes to Github and Google
   3. Deploy on Google
3. Link LINE and Google Sheet
4. Link to LINE Notify
5. Debug

---

Set up the environment

Notice:

• All the commands in this file are run in a command prompt (terminal) in the working directory of the project in a single line per command block. To enter into the working directory, you have to
  1. Open a command prompt in Windows
  2. Open the File Explorer and copy the path of the working directory.
  3. Enter there by the following command (replace <dir> with the copied path):
     cd <dir>
  4. Tips: If you clone this repo, you can just double-click the enterCurrentDirectory.bat in the file explorer of the Windows.
• After the first time of the setup, this section can be skipped for the projects in the future.

Node.js and NPM

• Functionalities: Run clasp.
• Installation instructions: https://phoenixnap.com/kb/install-node-js-npm-on-windows

Visual Studio Code (optional)

• Functionalities: Editing codes off line
• Installation instructions:
  • Download and install VS Code from its official website.
  • Make the following jsconfig.json file in the root of the working directory to use IntelliSense to reference stuffs among different files. (This step can be skipped if you clone this repo.)

    {
        "compilerOptions": {
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        },
    }

  • Setup Google-apps-script word-completion in VS Code (Ref.):
    • Run the command. npm install @types/google-apps-script -g

Clasp

• Functionalities: Update the changes of codes on a computer to Google.
• Installation instructions (Ref.):

  • Run the command:
    npm install @google/clasp -g

  • Note: It is recommended to install clasp globally with the -g flag as the above. As a result, there will not be duplicated 170MB files in multiple projects.

  • Install inquirer if you want. (It is not necessary)
    npm install inquirer -g

• Note: Clasp cannot be run in PowerShell.

Git

• Functionalities: Version contorl and collaboration
• Installation instructions: Download from its official website and install it.

---

Working with Both Clasp and Git in VS Code

Preparations

1. Set up things of Github

   1. Sign up on Github.
   2. Create an empty folder locally as the working directory.
   3. Clone the repo to the working directory with the commands (Ref.1 Ref.2). If the folder is not empty, try the commands on stack overflow.
      git clone https://github.com/Rays314/LinebotSample
   4. Remove the commit history in the original repository.
      rm -rf .git (in Linux)
      rmdir .git /S /Q (in Windows)
   5. Remove the readme file in the original repository. (You may want to have a link to this file in your readme file to help people set things up.)
      rm README.md (in Linux)
      del README.md (in Windows)
   6. Create a new repository and copy the repo path (hyperlink) as <path>.
   7. Create the first commit to the new repository.
      git remote add origin <path>
git add .
git commit -m "Initial Commit"
git push -u origin master

2. Change the default editor of git to VS Code locally. (Ref.)
   git config core.editor "code --wait"

3. Google sheet and project

   1. Create a Google sheet.
   2. Create a Google apps script project with "Extensions" -> "Apps script" in the toolbar.
   3. Login to Google with clasp.
      clasp login
   4. Link to the project and download a removable code.js file to the src folder under the working directory with the command. (Note that <script ID> can be found in the project settings.)
      clasp clone <script ID> --rootDir ./src

4. Deploy on Google with the following instructions in the classic editor (Why classic: #1)

   1. Switch to the classic editor by entering the script editor and click the “Use classic editor” on the upper-right corner.
   2. Click “Publish” on the toolbar and then "Deploy as web app..."
   3. Project version: New
   4. Description: Initial deployment
   5. Execute the app as: Me
   6. Who has access to the app: Anyone , even anonymous

Editing and uploading the codes to Github and Google

1. Edit files.
2. Upload to Github (Why git before clasp: #3)
   git add .
git commit
git push
3. Upload to Google
   clasp push
4. Note: The above-mentioned commands can be automated by

   1. ctrl + shift + ` (backtick) to open an integrated terminal in VS Code

   2. Run the batch file
      batch\push.bat

      by typing b<tab>\p<tab><enter>

Deploy on Google

1. Get the <deployment ID>. It is followed by “@1 - Initial deployment” from the the result of the command. (Why you should get it: #2)
   clasp deployments

2. Deploy on Google
   clasp deploy -d <description> -i <deployment ID>

   Or equivalently, (Ref.)
   clasp deploy --description <description> --deploymentId <deployment ID>

3. Note: The above-mentioned commands can be automated by

   1. (Do it once) Get the <deployment ID> and replace the two "deployment ID" in batch\deploy.bat. Save the file.
   2. ctrl + shift + ` (backtick) to open an integrated terminal in VS Code
   3. Run the batch file. (Replace <description> by the double-quoted (surrounded by ") ASCII description of the version to be deployed.)
      batch\deploy.bat <description>
      by typing b<tab>\d<tab> <description><enter>

Link LINE and Google Sheet

Reference tutorial: https://youtu.be/vS00zQ75xRg

1. Login to LINE developers. Follow the instructions on it to create an account.
2. Create a new provider (by clicking the green icon and follow it).
3. Create a messaging API channel.
4. Switch from the "Basic settings" tab to the "Messaging API" tab.
5. In the "LINE Official Account features" section, in the row of "Allow bot to join group chats", click the "Edit" button to switch to "LINE Official Account Manager". In the section of "Toggle features", in the row of "Group and multi-person chats", switch to "Allow account to join groups and multi-person chats".
6. In the section of "Account details", copy the "Basic ID" (with the @ sign). Add the bot as friend in the LINE platform. It should be able to echo a message now. Otherwise, go to the debug section.
7. In the side bar, switch from "Account settings" to "Response settings". Disable "Greeting message", disable "Auto-response" and enable "Webhooks"
8. Go back to the LINE Developers. In the bottom of the Messaging API tab, issue the channel access token and copy it.
9. Duplicate the SettingsTemplate.js file in the src folder and rename the duplicated one into Settings.js.
10. Paste the channel access token to the Settings.js file. It will be like the followig sample but with a longer token.

    const CHANNEL_ACCESS_TOKEN = 'jhgfdj149qdagy1j/sdhnaf=';

11. In the section of "Webhook settings", edit the URL as follows. (Note that the project should have been publish on Google as a web app with the above instructions of preparations. And the <deploy ID> can be found with those of deploying on Google.)
    https://script.google.com/macros/s/<deploy ID>/exec
12. Toggle the below option into green to use webhhook.
13. Deploy a new version with the above instructions of deploying on Google.

---

Link to LINE Notify

1. Login to LINE Notify.
2. In my registered services page, add a service by filling all blanks. Notice that the "Service URL" and "Callback URL" should be as follows.
   https://script.google.com/macros/s/<deploy ID>/exec
3. Verify your identify with the mail in your mailbox that you just filled in.
4. Click the icon of the registered service. Copy the client ID and the client secret to the Settings.js file. It should be like the following sample.

   const LINENOTIFY = {
       CLIENTID: 'f5JSD2JkQWI18a',
       CLIENTSECRET: '4FS3FDJsuU1USi49SA53',
   };

5. Deploy a new version with the above instructions of deploying on Google.
6. Add the bot to a group and send a message of exactly 連動. Click the icon that

Debug

When the bot does not react properly. Follow the instructions below to debug.

1. Open the Google sheet linked to this project and check for the Exe log and the Fetch log tabs.
2. Use clasp open command to open the Apps Script editor. (Or in the tool bar of the Google sheet, click "Extensions" -> "Apps script".) Swtich to the execution tab to check the function that emits an exception.
3. Save and deploy a new version to Google.
4. Insert logImmediately function to some potential function to log the info to the Exe log sheet.
5. Follow the function-call stack and check for the newest added codes.