寫在前面
大家好，我是 LINE Taiwan DevRel 團隊的 Evan Lin。很開心在這裡跟各位分享本年度的第三場開發者小聚中，由 LINE Client Team - Evan Fang 所帶來的分享 - 「 LINE Shopping App with Flutter 」。
KKTIX 活動網頁: 活動網址
活動全文網址： TBD
投影片
演講影片
什麼是 「LINE 購物 App」?
(LINE 購物 App 功能介紹)
講者分享如何透過 Flutter 來開發下載榜第一名的 「LINE 購物 App」。 首先主要提到 LINE Taiwan Client App 團隊主要有負責的產品有:
- LINE TODAY 的 App （在印尼有上架）
- LINE SDK 也就是大家看得到的開源套件：
- 當然也有協助開發 LINE App 的一些功能。
- 最新的也就是今天要介紹的「LINE 購物 App」
關於 「LINE 購物」的介紹
LINE購物 與多家知名購物網站合作，匯集超過2,000萬件商品，只要在搜尋處輸入想找的商品，讓你一個網頁就能一次看各家購物網站的商品資訊和價格，讓你從此不用處處比！
透過 LINE購物 不僅僅可以一站找到你需要的商品，還可以獲得更多的回饋。
Flutter 打造 LINE 購物專屬 APP
為了提升更佳的使用者體驗，打造更精緻的服務介面，LINE 購物也決定在今年推出了專屬的 APP 。 但是希望能快速地到使用者的反饋，並且即時的改善更好的使用者體驗。 開發團隊選擇使用 Flutter 作為開發的程式架構，透過 Flutter 可以一次開發出 Android 與 iOS 的應用。 而選擇 Flutter 的理由如下:
效能考量:
以整合性設計框架而言，透過 Widget Rendering 可以讓 Flutter 直接在 Canvas 上面操作，具有類似於 Native App 的效能。
快速開發:
單一的 code base 來開發兩個平台的 App。在 UI 元件的開發上，很適合透過 Flutter 使用。可以確保 UI 設計的一致性，讓使用者有相同的使用體驗。
Flutter 支援 Hot reload 可以在 IDE 上面只重新編譯更新的部分，能夠快速的看到變更的成果。
豐富的開發資源:
豐富的官方導覽教學，還有 Dart Devtool 與 pub.dev 開發資源可以參考。
最後成果
最後的成果也相當的亮眼，使用 Flutter 可以在三個月之內於 iOS 與 Android 平台上完成一致性的使用設計體驗。 並且獲得當月份的下載量第一名的肯定。
遇到的問題分享
當然在使用 Flutter 開源套件也會遇到一些問題，但是 LINE 開發團隊也有跟 Flutter 團隊回報並且溝通相關的問題。目的希望能讓套件更完善，也能讓產品更符合使用者期待。 以下條列式一些問題:
- 問題： Flutter 在 Android 上無法變更鍵盤語言
- 解法:
- 使用 Hybrid composition 並且更新 Flutter 到 1.22.0 版本之後。
- 解法:
- 問題： Hybrid composition 在某些狀況下會 crash app
- 解法：
- LINE 提供相關解法與完整複製流程，並與Flutter團隊共同解決。
- 解法：
- 問題： 在可以上下滑動的頁面呈現大量UI元件時，滑動時經常有記憶體不足的問題
- 解法：
- 修改讀取方式，僅使用者看到的部分(Viewport)會使用記憶體。釋放不在 Viewport 的UI元件資源。
- 解法：
小結
講者也分享了，目前 Flutter 很適合開發在不複雜的頁面。具有較高的效能，快速疊代與開發的工具，還相當的容易學習。但是如果需要開發比較複雜的頁面時，需要有能力追蹤到底層套件的原始碼，發生問題的時候才能夠解決。
最後也希望大家一起來下載一下 LINE 購物 App 感受一下 Flutter 開發出來的效能吧！！
立即加入「LINE開發者官方社群」官方帳號，就能收到第一手Meetup活動，或與開發者計畫有關的最新消息的推播通知。▼
「LINE開發者官方社群」官方帳號ID：@line_tw_dev
關於「LINE開發社群計畫」
LINE今年年初在台灣啟動「LINE開發社群計畫」，將長期投入人力與資源在台灣舉辦對內對外、線上線下的開發者社群聚會、徵才日、開發者大會等，已經舉辦30場以上的活動。歡迎讀者們能夠持續回來查看最新的狀況。詳情請看:
徵才訊息
《LINE 強力徵才中!》與我們一起 Close the Distance 串聯智慧新世界 » 詳細職缺訊息