【專訪】Babu:一窺遊戲化地圖訊息 Flutter App

遊戲化即時訊息,生活遊戲化

Flutter Taipei
Flutter Taipei
9 min readMay 10, 2020

--

編輯/訪談:Chloe Hsu

Flutter 技術越來越受歡迎,在國內外也越來越多工程師和大小公司投入,許多團隊用 Flutter 來開發商業產品。你可能是前端、後端、Android 或 iOS 工程師又或者你是CTO、CEO、PO、PM,無論你是誰。當你你妳還在猶豫要不要投入 Flutter時,是不是還有所顧忌?學習 Flutter 要花多久時間?使用 Flutter 有什麼優勢和劣勢?為什麼我要選擇或是不選擇使用 Flutter?在台灣有哪些公司使用 Flutter?有多少的工作機會?有多少團隊真的在用 Flutter?還有等等更多的諸如此類的問題在你的腦海中浮出。

Flutter Taipei 聽到了!

這次 Flutter Taipei 的『App 蒐集企劃』有機會專訪到台灣的事必得科技帶你一窺事必得科技如何將 Flutter 應用在他們的商業產品中,使用 Flutter 後為產品及團隊帶來怎麼樣的效益呢?

Flutter Taipei 馬上帶你來探究竟!Let’s Go!

每個產品的出生都是為了解決某個痛點而存在。在認識背後技術之前,先帶大家來認識 Babu!

Babu

BaBu 是一款以地圖為核心結合發文與交友的社群軟體,Babu 的遊戲化社交方式,讓社交不再只是社交,遊戲化概念為生活帶來另一種樂趣。乾淨清新無廣吿,讓你/妳能夠專注在社交與分享生活哦!

Babu 為更有趣的即時訊息而生

即時訊息已經是人手必備的一個應用程式。 人們已習慣於用使用各類的行動裝置互相傳達各種形式 數位訊息 (文字、圖片、聲音、影片或其他)。 使用即時訊息雖然方便,事必得獨到地發現即時訊息的缺點

  1. 有重要訊息容易被一直更新的即時訊息淹沒
  2. 即時訊息以傳訊速度及時間為主功能並非以訊息連貫性和可收藏性為主
  3. 有專屬性,但無專屬性的操作感受
  4. 傳送方只能傳訊給已成為聯絡人的使用者,但無法選擇公開訊息。雖然部分應用程式支援公開訊息,但也無法設定該訊息的公開方式
  5. 無法定點公開訊息
  6. 欠缺現實互動性
  7. 目前即時訊息送出後默認是雙方直接接收訊息內容,欠缺驚喜亦欠缺選擇是否讀取內容的意向

Babu 正是為了解決即時訊息無法提供的功能服務而生

  • Babu 以地點為主要收發訊息的依據。
  • 傳送方為發送訊息的使用者,而接收方為收到訊息的使用者。

當傳送方發訊息時,接收方會收到傳送方的通知並於地圖上顯示該訊息的位置。 但此時點擊此地圖位置並無法取得訊息內容。 接收方需要去發送該訊息的地點,才可取得該訊息。

地點訊息組成方式

一個地點訊息根據七種以上資訊所組成:

  • 位置
  • 數位訊息內容
  • 發訊時間
  • 接收時間
  • 收件人數
  • 啟動條件
  • 收訊範圍

每一個資訊又包含了各種不同的設定

  • 收件人數 : 私訊或公開(不用指定踏入範圍即可收到唷!)
  • 收訊範圍:可讀取訊息的範圍 — 使用者與地點發出的範圍須交錯
  • 位置地點:地球上任何位置(地址、經緯度、座標、景點或地點名稱)
  • 發訊時間:發訊後的開始顯示時間,可以即時或是預設時間(指定未來在某個時間自動發送)發訊後的結束顯示時間,即時結束或可以自行設定結束訊息要延長或是縮短時間
  • 接收時間 : 收訊後的訊息顯示期間,即時或可以自行設定接收時間的長短
  • 訊息內容 : 文字、圖片、影片、聲音、音樂等於不同平台上的數位元素
  • 啟動條件 : 雙方或任一方只要出現在指定地點即可收取訊息!

Babu 的實際用途能夠怎麼應用呢?

根據以上條件,你可以玩出更多個性化的個人訊息哦!不只用在私人訊息和公開訊息,在行銷方面還能夠用來作為商用推廣及和地點有關的服務呢

什麼!Babu 能客製化訊息

冬天好冷想發個看起來暖心訊息做個身邊的人的小太陽,夏天熱到要融化想做個消暑的訊息,告白想發個滿滿羞澀有愛說不出的訊息讓你的對象感受到的訊息,想在平淡的生活中給家人朋友另一半一個驚喜,還有團康地圖藏寶遊戲!Babu都將這些得以實現了呢!!

Babu 的客製化訊息可依照不同的情境做變化!比起一般冷冰冰的即時訊息,透過客製化能讓對方更感受到你的心情!例如:告白、季節變化、節慶、一般或商用活動需求。透過購買各式各樣的特殊道具即可打造個人化訊息風格,來滿足各種情境下的訊息!

Babu 技術一窺究竟

你可能好奇 Babu 團隊如何評估而選擇了 Flutter 來作為主要開發技術,他們在使用 Flutter 時,什麼事情最讓他們頭痛… 讓我們往下窺探 Babu 的技術團隊吧!

Q1. 為什麼決定採用 Flutter 技術來開發?大約花多久的時間評估要 使用的技術?

之前就有在考慮轉跨平台,我們做了一些研究像是:H5、Cordova 和 React Native 等。在 2018 年底,突然蹦出 Flutter Preview by Google。抱著試試看的心態嘗試,結果一試成主顧!非常符合我們的期望。

  • 環境安裝便利
  • 快速開發
  • 部署雙平台

我們甚至還嘗試了 macos。而且 Dart 語言容易上手,Widget Tree 的概念基本上介面是堆疊出來的,只要有開發經驗都可以在短時間 pick up。

基本上整個機制是由google提供的,甚至他們用Dart & Flutter來開發新版的Fuchsia。所以沒花太多時間評估,大概一個月時間我們就決定轉到 Flutter

Q2. 團隊有多少人投入開發?大家是什麼樣的背景呢?

目前為 5 人團隊:

  • PM & QA x 1
  • UX x 1
  • Frontend x 1
  • Backend x1
  • 技術研發 x 1

Q3. 團隊花了多少時間開發呢?

從無到有花了大約兩個月時間。其中包含需求訪談、設計、開發、測試到最後的部署。

Q4. 團隊中的 Flutter App 使用的後端是第三方服務還是自架後端?還有用到哪些第三方服務?

後台架構都是上公有雲、降低維護成本與提高可用性。技術上使用到:

Q5. 團隊之前有使用非 Flutter 的技術開發 App 的經驗嗎?使用 Flutter 後在團隊協作或產出方面,有沒有特別想分享的經驗呢?

之前就有 Android 開發經驗。轉向 Flutter 之後,之前雙平台開發時程同步問題、技術問題都減少了。

雙平台同時推出的時程也比較好掌控、介面的設計與開發也較一致性、較方便。在雙平台遇到的問題也比較可以用相同的方式處理。 整體協作的步調變得比較有效率重點還是在於時程縮短!

Q6. 在決定使用 Flutter 技術時有什麼擔憂嗎?

怕不夠成熟。初期官方對移動端介面應用的支援也比較弱,第三方 library 資源不夠等等。在初期確實有遇到,還滿頭痛的。有些要自己動手去做,甚至還是會寫到 native code

Q7. 團隊如何評估適合的設計模式,並取得共識並決定採用呢?

設計基本上是自主的。 團隊提意見跟構想,設計完成後我們進行問卷調查,並且最終得到共識後採用。

Q8. 用 Flutter 開發時,什麼樣的事情讓你們覺得最有挑戰性/最困難?

地圖….我們的 App 是基於地圖去發文,地圖相當於我們的主體,但官方對地圖的支援卻是最慢。不管是在介面呈現或者是功能面,甚至到現在還在Preview 的階段。我們真的花了大部分的時間在調適地圖上的技術與效能。

Q9. 團隊的 Flutter App 中,有什麼特別想介紹的技術嗎?

與其從技術說起,倒不如說我們是從一個有趣的想法去實現技術。在 Babu裡,我們可以發地點訊息:針對一個地點發了一個訊息,但這個訊息不是發了 就可以被看到。而是對方到了該地點才能將其解鎖再去讀取,透過背景GPS 偵測(甚至 App 關掉也能運行)

當你靠近某個地點訊息,就會發送推播提醒使用者你靠近某個地點訊息,就可以解鎖訊息囉!

我們希望透過此概念讓使用者能結合遊戲跟其他人互動,例如:藏寶遊戲、告白等等。 為了增加有趣的微互動我們還使用了 Rive 來做一些動畫轉場和角色。

Q10. 團隊有使用任何 CI/CD 工具嗎?

  • 程式管理:GitLab 和 Source Tree
  • 程式建置:TeamCity
  • 程式部署:Fastlane
  • Fabric 做內部 Test Flight
  • 自動化測試:Appium

Q11. 如果可以重新選擇開發技術,你們還是會選擇用Flutter來開發嗎?

當然!減少人力成本,縮短開發時程更能達到所謂的 Agile 開發。最後能更快的 Time to market, why not?

雖然還是有些不成熟的地方,但都可以一一克服或做些平衡的調整。大致上是可以接受。

Q12. 你們會推薦什麼樣的 APP 使用 Flutter ?如果團隊決定使用Flutter 來開發,你們有什麼建議想給大家嗎?

目前 Flutter 適合使用於非地圖模式 App 開發或遊戲的 App 開發。但 Flutter 的好處是花 一半的時間即可得到 iOS / Android 的 App。如果是一般應用App,我們會強烈推薦。

Q13. 團隊現在或未來打算招募 Flutter工程師嗎?

目前團隊還在初期階段,雖然當前還沒有人員需求。不過,我們歡迎大家有任何對我們產品 上不管是技術或是問題都可以一起討論!

團隊 & 產品資訊

想認識更多有關 Babu 和事必得科技,以下傳送門請大家享用!還不趕快下載體驗看看用 Flutter 開發的 Babu,讓社交和生活添加另一種樂趣!

Babu App Store 下載
Babu Play Store 下載

歡迎閱讀「台灣 Flutter App 蒐集企劃」以了解完整計畫資訊哦!

--

--