✎LINE-BOTに関するToDo

# ✎LINE-BOTに関するToDo

Vivaldiのmarkdownメモでつけていた、マジガチの自分用メモなんでめちゃくちゃです。

  

LINE Developersに登録していることは前提

## LINE Developersでしておくこと

* [ ] LINEアカウントの作成
* Messaging APIを用いて権限を承認する
* その後、LINE Official Account ManagerのMessaging APIタブの、Channel Sercretを確認する
* LINE DevelopersからChannel Access Tokenを発行しておく

## ネットワークとのインターフェース

* 世界獲れるくらい雑な説明  
    nginx（エンジンエックス）はウェブサイトをインターネットで公開する際に使うソフトウェア  
    ngrok（エヌグロック）はローカルのサーバをインターネット上に公開するためのトンネルを作成し、一時的なURLを提供してくれる。らしい。セキュリティ的にはどうなの？
    
* [x] nginxセットアップ
    * [https://nginx.org/en/download.html](https://nginx.org/en/download.html)
    * Windowsタブからインストール
    * Cドライブ直下に解凍
    * nginxコマンドを実行して起動確認
    * で、多分これはexeから直で実行しないとなんか上手く起動しない
        * **訂正**
        * 管理者権限周りがうまくできていなそう ホントはnginx start で動いてほしいんですけどね

### ⚠nginxが起動しない！

1. クリーンな状態か確認
2. まずはnginxが起動していないことを確認：コマンドは asklist | findstr nginx
3. localhostが専有されていないことを確認：コマンドはcurl localhost

* [x] ngrokセットアップ
    * まずアカウント登録をしなければならない
    * [https://dashboard.ngrok.com/user/signup](https://dashboard.ngrok.com/user/signup)
    * そして次にダウンロードしてC直下とかに解凍する
    * [https://ngrok.com/download](https://ngrok.com/download)
* [x] nginx × ngrok の起動確認を行う
    1. [https://dashboard.ngrok.com/get-started/your-authtoken](https://dashboard.ngrok.com/get-started/your-authtoken) ページにあるCommand Lineを実行する
    2. nginxを起動
    3. ngrok http {nginxのポート番号} をコマンドラインに入力してトンネルをつなげる
    4. Forwardingに表示されているURLにアクセスすることができれば、localhostを公開することができたと確認できる
* [x] お片付けを行う
    1. ngrokはctrl+Cで停止
    2. ngnixは本来はcdをnginxの直下に移動してからnginx -s stopで強制停止だが、
    3. nginx.pidにポッドのIDを記載されていない不具合が生じている場合は強制的にタスクキルを行う。taskkill /f /im nginx.exe　で実行
    4. curl localhostでお片付けが終わったことを確認

#### 参考

* [https://qiita.com/mininobu/items/b45dbc70faedf30f484e](https://qiita.com/mininobu/items/b45dbc70faedf30f484e)
* [https://qiita.com/yugo-yamamoto/items/058156037171ce2c9779](https://qiita.com/yugo-yamamoto/items/058156037171ce2c9779)
* [https://teratail.com/questions/138853](https://teratail.com/questions/138853)
* [https://jobtech.jp/js/6099/](https://jobtech.jp/js/6099/)

以上でnginxとngrokによるバックエンドのためのセットアップは終了。あとで色々いじったりするかもだけど、一旦自分のローカルなパソコンが世界と接続できるようになりました。

## スモールbotを作る

### TypeScript入りの開発ディレクトリ構成を作る

* [ ] プロジェクトを用意する
    1. 好きにフォルダを作る
    2. npm init -y でプロジェクトを初期化する
    3. ライブラリをインストールする npm install --save-dev typescript eslint @types/node express ts-node ts-dotenv @types/express
        * **註**
        * \--save-devはシンプルに言うとグローバルでなくローカルにインストールするためのオプション
        * typescriptはTypeScript。
        * eslintはみんな大好きな怒ってくれる人
        * @types/nodeを入れておくと、nodeのデフォルトのモジュールで型の補完がきくようになる
        * ts-nodeはTypeScriptファイルをJavaScriptにコンパイルし、Node.js上で動くようにするためのファイル
        * Expressは、Node.js上でウェブアプリやAPIを素早くシンプルに作るための軽量フレームワーク。他のサーバー（例: Apacheやnginx）は主に静的ファイルの配信やリバースプロキシとして使われますが、Expressは動的なリクエスト処理やルーティング、ミドルウェアを使った拡張が容易な点が特徴。
        * ↑じゃあnginxいらなくない！？とパニックになっているが、一旦、一旦置いておく。だって要るって言ってたひとがいたんだもん！！！！！！
        * ts-dotenvは環境変数を扱うやつ。
    4. 本丸のSDKを入れる。 npm install @line\\bot-sdk
    5. LINE Developersで確認したChannel Access TokenとChannel Sercretを.envファイルに書き込む。
        * YOUR\_CHANNEL\_SECRETとYOUR\_CHANNEL\_ACCESS\_TOKENみたいにね。
    6. あとはPORT番号としてPORT=なんとか、っていうように、環境変数を入れたら一旦おしまい。

### PingPongコードを実際に書いてみよう

今回めちゃくちゃGo-Tech Blogさんを参考にしていただいたというかほとんどパクったようなものなので一旦そっちを当たってほしい。  
[https://go-tech.blog/nodejs/line-chat-bot/](https://go-tech.blog/nodejs/line-chat-bot/)

1. 色々書いていくんだけど、必須部分について.
    
2. dotenvでloadする。
    
    ```
    import { load } from 'ts-dotenv';
    const env = load({
      CHANNEL_ACCESS_TOKEN: String,
      CHANNEL_SECRET: String,
      PORT: Number,
    });
    
    ```
    
    また、環境変数からこれらPORT番号やアクセストークンなどを取り出して変数に代入しておく。
    
3. import する際の注意点として、参考記事ではClientがimportされているが、これは現在では非推奨となっているので、MessageAPIClientに置き換えておく。  
    [https://github.com/line/line-bot-sdk-nodejs](https://github.com/line/line-bot-sdk-nodejs)　がソース、なはず、
    
4. 参考コードの中のtextEventHandlerはWebhookEventを聴取してくれている。event.messageとかで中身を取り出す（WebhookEventのタイプがMessageだったらできるにょ）
    
5. このmessageの内容がpingであればpongと返したいが、返すときはTextMessageオブジェクトを返還する
    
    ```
    const pongMsg: TextMessage = {
      type: 'text',
      text: 'pong'
    }
    ```
    
    こんな感じで。
    
6. あとは参考コードを参考にしてください。本当にカミサマです。ありがとうございます。
    
7. nginxを起動し、さらにngrok http {PORT番号}でポートを起動する。ここでngrokから生成されたURLをLINE DevelopersのWebhookのURLに設定しておくこと。
    
8. 完成したら「npx ts-node index.ts」でいつも通りビルドしてスタートする。実際にpingと送ってpongと帰ってこればOK
    

#### 参考

* [https://qiita.com/ak2ie/items/57bf4e1b404d27113efc](https://qiita.com/ak2ie/items/57bf4e1b404d27113efc)
* [https://dev.classmethod.jp/articles/revisited-code-for-bot-sdk-update/](https://dev.classmethod.jp/articles/revisited-code-for-bot-sdk-update/)