【Nuxt.js × golang】ゴミ出しの通知をしてくれるラインbotを作った #Docker

経緯

起きてすぐにゴミ出しに行かないと間に合わないので寝起きでもすぐに判断できるように通知botを作成しました。

概要

管理画面で各曜日の設定することでbotからメッセージが送信されるアプリです。

処理のイメージ

管理画面では、ログインしたユーザーIDと画面上で設定した内容をfirestoreに保存します。
APIでは、毎朝6時にfirestoreからデータを取得して対象のユーザーに設定されている内容のメッセージを送信します。

管理画面のリンク

ログインしなくてもサンプル用画面でモーダルの操作などは行えます。

使用技術

言語はTypescriptとgolangで書いています。
詳細は以下の通りです。

管理画面

Nuxt.js
Typescript
liff
- Line Login SDK
firestore

API

golang
echo
firestore

その他

Docker
heroku
cron job
- APIを毎朝6時に叩く用

画面説明

ログイン後の画面

通知を停止するかどうかと各曜日の通知内容を編集できます
曜日ごとに設定した内容が表示されます
複数選択した場合は・区切りで表示されます

通知内容編集モーダル

通知する内容をチェックして更新するとその曜日の朝に通知されるようになります

詰まった点

デプロイ失敗

portを固定してデプロイしようとしていた
- portを環境変数にすることで解決
DockerfileにENTRYPOINT yarn run startと記載していた
- dockerで立ち上げるのは問題なかったがデプロイできなかった
- CMD ["yarn", "run", "start"]に修正して解決

`window is not defined`が出る

pluginsで次のようにファイルを作成した

import liff from '@line/liff'

if (!liff.id) {
  const liffId: string = process.env.liffId as string
  // liffの初期化
  liff.init({ liffId })
}

export default liff

ページ内で呼び出そうとしたらwindow is not definedが出た
importで呼び出すのではなく次のように書き換えてみたところ解決した

let liff: any = null
if (process.browser) {
  liff = require('@/plugins/liff')
}

storeの呼び出し方法

this.$storeでエラーが出る
次のような書き方で解決した

(this as any).$store.getters['users/getGarbageList']

できればthis.$storeに直したい

おわりに

今回初めてTypescriptで個人開発してみたが、storeの定義や呼び出しがjavascriptと結構違い大変でした。
その分引数や変数に型がついてると全体的にコードが読みやすくなる気がしました。
最後に今回書いたコードを載せておきます。

管理画面: https://github.com/d-yamagishi522/garbage-removal-notification-ui
API: https://github.com/d-yamagishi522/garbage-removal-notification-api

【Nuxt.js × golang】ゴミ出しの通知をしてくれるラインbotを作った

経緯

概要