前端時光屋(一)：用 Google Home 打造聲控番茄鐘

番茄鐘，是個不想工作或趕死線是很好用的工作方法：強迫自己工作二十五分鐘、休息五分鐘，提升專注力，降低自己亂逛社群網站看影片的可能性。但是通常找好的番茄鐘軟體就花了不少時間，再花點時間研究一下介面，不知不覺時間就過去了，不如弄個聲控的番茄鐘吧？

在想這件事情的同時，恰好喵到桌上有一顆 Google Home Mini，心想要是可以做出一顆聲控的番茄鐘應該很有意思。運氣很好，隔天的 前端修練精神時光屋 第一道題目就是番茄鐘，恰好幫我把頭痛的介面設計好了呢！

前端修練精神時光屋是什麼？

前端修練精神時光屋，是六角學院辦的活動，好像會有十道題目，每個題目都有一星期的時間可以做。沒有規定要做到什麼門檻，也不用擔心跟其他參賽者競爭，甚至不需要照著提供的設計稿做，可以自由地開發，完成後提交到精神時光屋的系統，就算完成一個關卡。完成三、六、九道關卡可以拿到不同的數位勳章，詳細可以看看六角學院的介紹：The F2E - 第二屆 前端 & UI 修練精神時光屋 或加入 Facebook 社團。

雖然不知道自己會不會努力做完所有的題目，但還是盡可能寫完一道題目順便寫一篇文章 XD

這個番茄鐘有什麼功能

原本題目給的是基本的番茄鐘功能、Todo List、統計和自訂鈴聲。Todo List 我覺得不太重要，畢竟要做的事情應該要統一記載某個地方，像我是放在 Google Calendar，就不想多打一份在番茄鐘上，當然這點應該見仁見智。自訂鈴聲的功能我也拔掉了，畢竟我有 Google Home，就讓它叫就好了。

所以整理了一下，這個番茄鐘的功能是這樣：「Hey Google，開始一個番茄鐘」。接著畫面就會自動開始倒數，時間到了的時候 Google Home 會開始叫。同時會畫面會倒數五分鐘的休息時間，休息時間結束 Google Home 也會叫。

放棄的時候也可以喊：「Hey Google，停止番茄鐘」。

統計的部分有留著，但暫停的部分我就沒做了，畢竟有暫停功能就會想一直暫停。我只有在必要時刻才會用番茄鐘，所以暫停功能對我來說太奢侈了 XD

前後端架構

這個活動可以不用做後端的，基本門檻只要把前端畫面拉完就好。另外，就算要做基本的番茄鐘功能其實也可以純前端寫完，只是要串 Google Home Mini，這樣做比較炫炮。

先講後端吧，後端基本上是 API：主要有「開始番茄鐘」、「放棄番茄鐘」、「查詢剩餘時間」、「查詢歷史紀錄」這四個功能。主要用 Koa.js 來寫，儲存歷史紀錄這件事情用 MongoDB 存。

當呼叫「開始番茄鐘」的時候，就會有一個變數設成 25 分鐘，然後每秒倒數，每當這顆番茄鐘倒數到 0，就會把時間記錄下來。隨時可以使用「查詢剩餘時間」來跟後端確認還剩多少時間，另外，也隨時可以使用「放棄番茄鐘」的功能，變數就會重設。而「查詢歷史紀錄」其實只會回傳所有歷史時間。

前端就很偷懶，簡單的 jQuery + AJAX 就呼叫完所有東西了，甚至沒有開始跟放棄的事件，它只會去跟後端拿「查詢剩餘時間」跟「查詢歷史紀錄」而已。

前端統計的部分，是抓回資料後用 Moment.js 去協助算出每天的番茄鐘個數，然後用 Chart.js 畫圖。

另外，因為拔掉了 Todo List 看起來很空，這邊跑去 call 了 Theysaidso.com 的 API，每天顯示一些名言佳句。

串接 Google Home Mini

到這邊你可能會發現，我們還沒有使用「開始番茄鐘」和「放棄番茄鐘」這兩支 API。畢竟我們要聲控，就要用它來串 Google Home Mini。

既然是 API，就必須有東西去呼叫 Web request。Google Home Mini 能夠直接呼叫 Web 請求嗎？這時候我們需要使用到 IFTTT 這個服務。IFTTT 是 If This Then That 的縮寫，它其實可以用來串接很多線上服務，像是 Google Assistant、Google Calendar、Twitter，甚至是 Philips Hue 等等。

雖然上圖中我們設定的是「Start pomodoro countdown」，但我們並不會直接使用這個指令。這裡希望喊出「Hey Google，開始番茄鐘」的時候不只可以呼叫這個 Web API，還能幫我們在 Google Home Mini 上設定 25 分鐘、30 分鐘的倒數計時器，並開始播放適合工作的音樂。要在 Google Assistant 上使用一個指令做那麼多事情，可以使用「日常事務（Routines）」功能，像圖中就是我設定的一些指令：

你想對著你的 Google Assistant 喊開機就自動打開電腦嗎？透過同樣的思路，只要把 WOL 網路喚醒 寫成 Web API，再搭配 IFTTT 就可以囉！

都串起來就把東西都做好了呢，來看看成果？（YouTube）