Side Project 紀錄 — Mixtini & co.
Mixtini 是一個專注於推廣調酒與酒吧的線上服務，致力於建立一個統合的酒類社群。讓 Mixtini 陪伴你每一段私人的醇飲時刻，循著酒香，我們盡情探索生活的一百種可能。
緣起
對於做 side project 這件事，一直以來對於貢獻 open source 或是改善技術工具沒有太多熱情，比較想做一些小東西來解決生活上遇到的問題，而 Mixtini 就是從一個很小的需求出發，最後誕生的一個小工具。
常常與朋友出去調酒的時候，面對有限的材料，有時候一時會不知道該如何下手，或是每當朋友詢問某些酒類的時候，網路上的資訊有多又散在各處，常常都要自己 Google 下關鍵字再人工過濾。
再來就是有時候不常調的酒也還真的會忘記酒譜比例，所以想要一個簡單方便，聰明一點的調酒搜尋器。
備註：自從 AI 百花齊放後，或許使用 ChatGPT 問就可以得到想要的答案囉
這篇紀錄比較不會著墨太多技術的部分，主要是想在 side project 完成階段性任務後，把這一年來的過程用文字記錄下來。
成員
上一個 Side project — Instagram Lucky Draw，是一個在沒有設計師的情況下做出來的產品。因此，這次在要開始做 Mixtini 的前期，就決定想邀請一位設計師一起加入，一方面對於我們、還有整個產品產生的過程也會是一個全新的體驗。
延伸閱讀：
最後成員：三位工程師 + 一位 UIUX 設計師
服務簡介
Mixtini 定位自己為一個最終想要推廣調酒與酒吧的線上服務，初步構想包含主要的首頁 (Landing Page)、調酒搜尋器，以及酒吧地圖，最後在前前後後一年的時間，大家都在有正職工作只利用晚上假日的情況下，完成了 Landing Page 與調酒搜尋器。
首頁 (Landing Page)
調酒搜尋器
調酒搜尋器最早其實是出發自 over.party.lab 的一個 POC，後來因為想要把這個搜尋器再做好一點，就找了幾個新成員，才有了這個 Mixtini 的出現。
這裡記錄最早的版本，有興趣可以參閱：
粉絲專頁
為了方便與使用者溝通，且最直接收集使用者 feedback，我們也建立了一個 instagram account，透過定期分享一些基礎酒類知識與經典調酒，塑造 Mixtini 的整體品牌形象。
各種輔助進行的工具
工欲善其事必先利其器，在這個專案一開始，我們便開始思索，要用什麼樣的模式與什麼工具，來進行這次的 side project 呢？
專案管理
最後選定了使用 Trello 做為專案管理的工具，在這裡面記錄我們各種的討論、會議記錄、共用的資訊，或是各種發想的 idea。
線上會議工具
線上開會的話，使用 Google Meet 是比較容易(免費)的方法，我們在每次會議前都會發一個 Google 邀請，裡面會有這次會議的 Agenda 連結，提供大家先參考。
Code Repository
Code repository 的部分，還是選用習慣的 Github，也因為沒有要走 monorepo 的方式，預期會有多個 repo 來處理不同的部分，包含資料處理、後端、前端。因此直接開了一個 org，也比較方便大家合作。
UX 設計/討論工具
在設計的 mockup 部分，設計師選擇的是 InVision，這次我也是第一次認識這個服務與實際使用到，日常工作上公司使用的還是 Figma 居多。
另外，我們也使用了 Miro 這套服務，作為大家一起共同線上編輯討論用的一個共享平台。
前期發想過程
在第一次的實體會議時，我們就一起針對幾個問題先來 brainstorming，主要圍繞在產品目的、目標客群、實際效益、競爭者分析、優勢等等，一步一步透過問題來釐清我們這個 project 的目的與目標。
針對使用 Mixtini 的目標使用者，我們的設計師也帶著大家一起，走了一趟 UX 討論的流程，一步一步定義出我們目標使用者的 Persona。
延伸閱讀：什麼是 Persona？
對於網站的主視覺設計，我們也透過搜集各種網路上不同網站、或是設計的靈感，最後歸納出大家最喜歡的設計風格。
由於我們已經有了一個 POC 版本的調酒搜尋器，因此我們也利用這個版本來訪談許多使用者，希望得到不同使用者的回饋，再針對我們接下來要做的新版本的設計上做調整。
另外也針對 Mixtini 整體想要做的方向，實際訪問了業界線上的 Bartender 與酒吧老闆，回頭來再來調整與思考如果 Mixtini 想要做大的話，我們的方向應該往哪裡走。
技術架構
這次一樣還是直接使用了 Google 生態系的服務，使用 firebase hosting + functions + realtime database 搭配的組合。
後端服務
這次選用的與上一個 side project 一樣，使用 serverless 的 firebase functions 來當作我們的 API 與後端資料處理的服務，透過 SDK 來與資料庫溝通，存取與寫入資料。不過因為現在都改成 Pay as you go 的模式，所以使用 firebase functions 必須要綁信用卡才能使用囉。
前端
由於是 side project，因此選用了平常沒接觸過的框架使用，選用了 SSR 的 Next.js。
比較特殊的是，由於我們後端是 serverless，如果使用 firebase functions 搭配 server-side render 的 next.js 就是一個有趣的議題了，在網路上幾乎是很少找到有人這樣子搭配，所以一開始有點沒頭緒要怎麼來做。我們花了點時間來研究，最後才找到一套方法可以搭配起來使用。
簡單來說，我們透過 Push to master 後觸發 GitHub Actions，在這個 action 裏面會去把透過 next.js build 好的靜態檔案推送到 hosting 上面，另一方面也會同時 deploy 一個 serverless function with HTML template。
資料庫與資料處理
對於調酒搜尋器，前期的資料必然是要透過一些人工的方式來新增，如果要大家都直接 insert to DB，想必是絕對不可能的事。
因此，我們建立了一張 Google Sheets，裏面有著好閱讀的格式，讓所有成員都可以很簡單的新增資料。接著透過一隻 Serverless functions，去對資料做 parsing 並且整理過後存入我們的 realtime database，如此一來在還沒有任何 UI 介面可以使用前，可以大大將低新增資料的複雜度。
Instagram 貼文自動化
由於我們有一個 instagram 頁面，裡面的內容都會是我們生成，最後交由設計師上圖與調整視覺。我們將素材都放在 Figma 裏面，一開始希望大家都有辦法能夠自己透過素材來產生貼文，但發現這樣效率實在不是很好，而且除了設計師之外，工程師們對於 Figma 其實是很不熟悉的。
為了這個痛點，我們建立了一套自動化的方式，利用 Figma 的 extension，一樣搭配 Google Sheets，就可以自動將我們打入 Google Sheets 的貼文內容，直接轉到 Figma 裏面套上模板做使用。
效能優化
在做完 Mixtini 第一版的時候，剛好有個機會與 Summer 合作來回頭看看我們網站的效能，發現真的是蠻多可以改進的地方。
更多細節可以看 Summer 在 2021 年 MOPCON 的內容：
因為以往都做 B2B 的系統，其實對於網站效能這個議題並沒有太深入的研究，自己也趁這個機會好好的研究了一下網站效能這塊，更多細節也可以看以下的另一篇紀錄文章：
延伸閱讀：
Google Analytics
在服務前期，我們也加上了 GA，作為觀察服務使用人數的一個參考指標，雖然從 2021 年開始進入 maintain mode 後到現在很久了，但很意外每天都還是會有零星幾個使用者進來使用，實際看了一下頁面，其實也是真的有在搜尋使用的。
結語
每一個 Side project 都是會有一個生命週期的，通常半年、或是一個階段性任務完成後，這個 side project 就會進入 maintenance mode，除非真的找到一個 business mode & 成員有想要創業，否則通常大家慢慢重心都會轉移到其他的事情上。
Mixtini 實際進行的時間是從 2020 年底開始，一直到 2021 年底左右達成階段性任務，也就是完成第一版 Landing Page 與調酒搜尋器。
對於我自己來說，由於是解決自己真正的問題，過程中經歷了許多以前沒遇過的技術問題、也走過了在工作上不太可能經歷到的設計發想流程，更研究了以前沒關注的網站效能問題，整個過程是蠻有趣且獲益良多的。
雖然未來 Mixtini 會是 maintenance mode，如果大家有興趣與需要，還是歡迎來玩玩看，有任何問題也很歡迎與我討論～
調酒搜尋器：
