前提

大家好,我是 LINE Taiwan DevRel 團隊的 Evan Lin。很開心在這裡跟各位分享本年度的第三場開發者小聚。 這也是疫情後第一次在新竹舉辦的線下聚會的活動。 也是 LINE 台灣工程團隊第一次來到交通大學舉辦線下的活動。

KKTIX 活動網頁: 活動網址

本次 LINE Developer Meetup 開發者小聚,首先有 LINE 台灣技術長 Marco Chen 帶來的 LINE 技術新星實習計畫的相關介紹,並且有 LINE 資料工程團隊的負責人 Shawn Tsai 帶來關於 ”How ML Powers LINE Services” 。

文章列表

LINE Shopping App with Flutter / LINE Client Team - Evan Fang

投影片

(LINE 購物 App 功能介紹)

接下來輪到講者來自於 LINE Taiwan client App 開發團隊的 Evan Fang 。 來分享如何透過 Flutter 來開發下載榜第一名的 「LINE 購物 App」。 首先主要提到 LINE Taiwan Client App 團隊主要有負責的產品有:

  • LINE TODAY 的 App (在印尼有上架)
  • LINE SDK 也就是大家看得到的開源套件:
    • https://github.com/line/line-sdk-android
    • https://github.com/line/line-sdk-ios-swift
  • 當然也有協助開發 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 在 Anroid 上無法變更鍵盤語言
    • 解法:
      • 使用 Hybrid composition 並且更新 Flutter 到 1.20.0 版本之後。
  • 問題: Hybrid composition 在某些狀況下會 crash app
    • 解法:
      • LINE 提供相關解法,也被套件團隊了解使用另一種解法來解決。
  • 問題: 讀取資料量大的頁面,經常跑記憶體不足的狀況。
    • 解法:
      • 修改讀取方式,僅顯示使用者看到的部分在 Viewport。 其他部分資源部採取預讀與使用過後釋放,讓資源更有效運用。

小結

講者也分享了,目前 Flutter 很適合開發在不複雜的頁面。具有較高的效能,快速迭代與開發的工具,還相當的容易學習。但是如果需要開發比較複雜的頁面時,需要有能力追蹤到底層套件的原始碼,發生問題的時候才能夠解決。

最後也希望大家一起來下載一下 LINE 購物 App 感受一下 Flutter 開發出來的效能吧!!

Serving Location-based data / LINE 熱點 - Julian Shen

投影片

接下來由 LINE SPOT開發團隊的 Julian Shen 帶來分享他在處理地理資料 (location-based data) 時候所遇到的一些問題與經驗分享。關於LINE SPOT 可以參考 Julian 在 TECHPULSE 2019 的會場有介紹過關於 LINE SPOT 服務介紹。更多的 LINE SPOT 服務介紹與 LINE SPOT 架構介紹可以參考這篇文章 「LINE TAIWAN TECHPULSE 2019 科技盛會精彩回顧」

這次主要介紹 LBS: Location-Based Serivice 的內容,關於 LBS 相關的遊戲或是服務我們經常可以看到,舉凡打卡,地圖,導航都會用到。那麼要尋找兩個點之間距離上,可以使用的技術也相當的多。

找出距離幾公里的景點

在處理上面經常是拿到 GPS 座標,或是直接拿到地址。 地址是可以方便人類來閱讀的,但是真正要電腦能夠處理的就是經緯度的座標位置。 如果要對某一個座標找尋出距離三公里距離的所有座標,那是不是需要把資料庫裡面的地點全部拿來計算呢? 這裡介紹了一種方式叫做 K-D Tree 。

K-D Tree 的方法就是將地圖平面透過二分法的方式來切割,將每兩個點找出距離後作為一個區塊。透過這樣的方式可以很快速地找出兩個最相近的距離點。

如何將搜尋結果作 Caching

如果有一群人同時開 LINE SPOT 需要尋找三公里內所有座標,那麼有方式可以快速的暫存起來資料,並且快速的回覆使用者的需求嗎? 這時候可以考量使用 Hashing 的方式來將經緯度數值直接轉換成一串文字,透過這個方式可以快速找到上一次搜尋的結果。如果沒有搜尋過才去跑 K-D Tree 的搜尋,這樣一來就可以在不經過複雜的運算就可以快速的回覆使用者。

這個方式雖然可以快速地知道有沒有搜尋過,但是有一些問題如下:

  • 由於採取 zig zag travesal 的方式來 hashing ,可能不同的經緯到有相當相似的結果。
  • 可能相當的接近,由於在邊界上可能造成 geohashing 結果不同。

其他的方式

Google 也有提出 S2 Cell ID 的方式來區分地理資訊。而 Uber 也有提出 H3 的方式,透過六角形的方塊來切分整個地理資訊。也因為使用六角形,才能更精確地將地球球形的地理狀況表現出來。

「LINE 熱點」美食推薦

別再說新竹市美食沙漠, LINE 熱點也是有精選「十家新竹在地美食店家」。 也希望同學們了解地理資訊的處理經驗分享後。也都可以來 LINE 熱點來分享你的新竹美食地圖。

活動小結

立即加入「LINE開發者官方社群」官方帳號,就能收到第一手Meetup活動,或與開發者計畫有關的最新消息的推播通知。▼

「LINE開發者官方社群」官方帳號ID:@line_tw_dev

關於「LINE開發社群計畫」

LINE今年年初在台灣啟動「LINE開發社群計畫」,將長期投入人力與資源在台灣舉辦對內對外、線上線下的開發者社群聚會、徵才日、開發者大會等,已經舉辦30場以上的活動。歡迎讀者們能夠持續回來察看最新的狀況。詳情請看:


Buy Me A Coffee

Evan

Attitude is everything