LiveView, PubSub, Presenceを使って GoogleMapでいろいろやってみました

1. 2021/10/16 the_haigo
LiveViewとGoogleMapAPIで
遊んでみよう

2. ➤ Name: 隆藤唯章（タカフジ ユイショウ）
➤ Twitter: @the_haigo
➤ Github: thehaigo
➤ Job: フリーランスエンジニア / 僧侶
➤ Skill:浅く広い Full Stack
➤ 最近作ったもの
➤ GPS Logger(Nerves, WatchOS, Expo),GPS Log Viewer
➤ LiveView+YOLO、Nxで画像処理
About me

3. ElixirConf US 2021
登壇しました！

4. Real-Time Update
Multi-Client GPS Logger
with
LiveView and GoogleMap AP
I
Yuisho Takafuji

6. こちらの実装面に
フォーカスしていきます

7. 全体図
􀪬􀢹􀪬􀪬
PhxGenAuth
Phoenix
&
Presence
PubSub
􀢹􀡇􀡆􀢷􀡆􀟜􀎫􀑝
LiveView

8. PhxGenAuth
• 認証システム生成機能
• User Authentication for Browser
• phx.gen.auth Accounts User usersで一発
• Token Authentication for API
• phx.gen.authでできたファイルに以下を実装
• pipeline１つ
• トークン取得APIを１つ

9. LiveView
LiveView provides rich, real-time user experiences
with server-rendered HTML
•push_event
•ElixirからJS hookの関数を発火
•pushEvent
•JS から handle_infoで待受ている関数を発火
•handleEvent
•push_eventで実行される関数を定義

10. PubSub
PubSub provides real-time Publisher/Subscriber service
• Subscribe
LiveViewのmount時に購読するトピックを指定
• Broadcast
handle_infoで待受している関数をトピックを指定して実行する

11. Presence
Phoenix Presence is a feature
Witch allows you to register process information on a topic
And Replicate it transparently across a cluster
Such as
• List users who are currently onlin
e
• Show message like “Haigo typing…..“

12. Presenceの関数
• Presence.track
• 指定したトピックに対して key/valueペアのデータを追加
• key の値の変更を監視
• Presence.list
• 指定したトピックが保持しているkey/valueのペアを一覧
• Presence.update
• 指定したトピックのkeyの値を変更
• Presence.get_by_key
• 指定したトピックのkeyからvalueを返す

13. Agenda
• Init Project
• Authentication
• Render GoogleMap on LiveView
• PubSub
• Presence

14. プロジェクトの作成

15. Init project
• mix phx.new live_map_view
• cd live_map_view
• mix ecto.create

16. create API and Context
• mix phx.gen.json Loggers Map maps name:string
description:string
• mix phx.gen.schema Loggers.Point points lat:
fl
oat lng:
fl
oat
device_id:string map_id:integer
• mix ecto.migrate

17. Loggers.exに追加する関数

18. Point create API実装

19. router.exに追加

20. API Authentication

21. トークン取得API

22. Viewファイル作成

23. Pipeline

24. 認証pipelineを追加したscopeを作成

25. APIの認証テスト

26. Render GoogleMap

27. ローダーのインストールとLiveViewページ作成
• cd assets
• npm install @googlemaps/js-api-loader
• cd ..
• mix phx.gen.live --no-context --no-schema Loggers Map
maps name:string description:string

28. Router.exに追加

29. マップを表示する Hooks作成

30. Hooksファイルをオプションに追加

31. Hooksの読み込み

32. GoogleMapの表示にheightを設定
containerのmax-widthを100に変更

34. PubSub

35. 購読の開始

36. Broadcastの実行

37. Broadcastの流れ
􀪬􀢹􀪬􀪬
PhxGenAuth
Phoenix
&
Precense
PubSub
􀢹􀡇􀡆􀢷􀡆􀟜􀎫􀑝
LiveView
Subscribe
Map:1
Subscribe
Map:1
Subscribe
Map:2

38. Broadcast実行時に発火する関数

39. push_eventで発火する JS Hookの関数

41. Precense

42. Precenseのセットアップ
• mix phx.gen.presence
• supervisorに追加

43. Presence.exに使いやすくする関数追加

44. Mount process
1.Presence track
1.Get Map related Point
2.Grouped by device_id
2.Location data create for
GoogleMap
3.Assign Presence list data
4.push event to JS side with
location data

45. Presence.track start

46. Presence.update

47. Presence diff

48. Show Presence Data

49. Presenceのデモ

50. 他のGoogleMapApi使用例

51. 指定した地点をセンターにする

52. 移動ログをGeoJson形式で表示
• 移動ログを表示したいデバイスのボタンを押す
• handle_eventでデバイスのログデータをPresenceから取得
• デバイスにログ表示フラグを立ててPresenceをupdate
• ログデータをGeoJSONのLineString形式に変換
• push_eventでデータ送信
• map.data.addGeoJson でGeoJSONをGoogleMap上に描画

53. handle_event

54. Generate GeoJson

55. GeoJsonの描画

56. マーカーの追従とアップデート
• デバイスから位置データを送信される
• broadcastでhandle_infoで待ち受けている関数を発火
• 新規のデバイスならPresence.trackを、既知ならPresence.updateを実行
• 現在地とデバイスのログをGeoJsonにしてをpush_eventでJSに送信
• 追従フラグがあったら mapのセンターを設定
• windowに保持しているmakerをuuidから取得
• Markerの位置を更新
• GeoJson dataをuuidで取得して古いのを消して新しいものを追加

57. デバイスから位置データを受信

58. Broadcastでhandle_infoの関数を発火

59. 新規のデバイスならPresence.trackを
既知ならPresence.updateを実行

60. 現在地とデバイスのログをGeoJsonにしてをpush_eventでJSに送信

61. 追従フラグがあったら mapのセンターを設定

62. windowに保持しているmakerをuuidから取得

63. Markerの位置を更新

64. GeoJson dataをuuidで取得して古いのを消して新しいものを追加

65. Awesome Demo