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

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

pomodoro

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

前端修練精神時光屋,是六角學院辦的活動,好像會有十道題目,每個題目都有一星期的時間可以做。沒有規定要做到什麼門檻,也不用擔心跟其他參賽者競爭,甚至不需要照著提供的設計稿做,可以自由地開發,完成後提交到精神時光屋的系統,就算完成一個關卡。完成三、六、九道關卡可以拿到不同的數位勳章,詳細可以看看六角學院的介紹: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 畫圖。

pomodoro_chart

另外,因為拔掉了 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 等等。

ifttt

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

google_assistant

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

都串起來就把東西都做好了呢,來看看成果?(YouTube