real-time update multi-device GPS Logger with GoogleMapApi and LiveView
•
0 likes•168 views
Development of a Map Application that Reflects GPS Data from Multiple Devices in Real-Time Yuisho Takafuji proposes implementing a real-time multi-client GPS tracking map application using Phoenix LiveView, PubSub, and Presence to allow multiple device types to publish GPS data and view live updates on a map. The implementation covers authentication, rendering maps with LiveView, processing and broadcasting GPS data in real-time, and example client applications for browser, smartwatch, and IoT devices. Code examples and links are provided to demonstrate the proposed architecture and functionality.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to real-time update multi-device GPS Logger with GoogleMapApi and LiveView
Similar to real-time update multi-device GPS Logger with GoogleMapApi and LiveView (20)
Recently uploaded
Recently uploaded (20)
real-time update multi-device GPS Logger with GoogleMapApi and LiveView
- 1. Real-Time Update Multi-Client GPS Logger with LiveView and GoogleMap AP I Yuisho Takafuji
- 2. About me
- 3. Name • Yuisho Takafuj i Github: thehaig o Twitter: @the_haig o Jo b • Freelance programme r • Buddhist priest Organizatio n • Fukuoka.e x • Jodo Shinshu Higashi-Hongan-ji School (浄土真宗東本願寺派 )
- 8. Make no mistake about it.
- 9. BTW . What do you think of when you read are slide?
- 10. Real-Time Update Multi-Client GPS Logger with LiveView and Google Map API
- 12. Don't worry if you don't understand, I'll explain it to you now.
- 13. Overview GPS Logger Clients Native App WebView Smart Watch IoT with GPS module GPS Satellite GPS Logger Viewing Client-Server System Main Sub
- 14. GPS Logger |> Multi-Client http GET request http response http POST request with ACK
- 15. GPS Logger |> Multi-Client http GET request http response http POST request with ACK
- 17. Is This Enough?
- 18. No
- 20. Such a real-time system usually adopts a single-page application (SPA) framework with AJAX, asynchronous virtual DOM manipulation with Javascript.
- 21. SPA Process Receive http response from the server Send http request with AJAX when a user clicks some item Receive AJAX callback, and manipulate DOM or V-DOM
- 22. The manipulation is usually implemented by React, Vue, etc in Javascript
- 23. I don’t want to write much Javascript.
- 24. Is there anything good?
- 25. There is just the right one.
- 26. LiveView!
- 28. Sounds Good
- 29. GPS Logger |> Multi Client |> Real-Time Update LiveView
- 30. Real-Time Updat e Multi-Client GPS Logger with LiveView and Google Map API is…
- 31. Development of a Map Application that Re fl ects GPS Data from Multiple Devices in Real-Time Yuisho Takafuji It isn’t easy to implement functions that require real- time processing. However, by using some of the standard features of the Phoenix Framework, it was found to be easy to implement. In this paper, we propose the procedure. １Introduction
- 32. Hmm..
- 34. Impact is More importan t rather than clarity
- 36. Display and monitor drones on a map. Alpha Bravo Charlie Delta Alpha
- 37. Checking member's location in parallel with navigation when moving in a group
- 38. Do you want to make like this?
- 39. Let’s do it!
- 40. Implements with LiveView and Google Map API
- 42. Too hard?
- 43. No
- 44. Phoenix already has LiveVie w PubSub an d Presence . These make easy real-time and multi-client.
- 45. Of course , Authentication is easy
- 46. Authentication ● User Authentication for Browse r phx.gen.aut h An Authentication system generator of Phoeni x ● Token Authentication for AP I A little tweak to phx.gen.auth’s fil e implement authenticate api and pipeline
- 48. LiveView LiveView provides rich, real-time user experiences with server-rendered HTM L React, Vue like difference detection and re-render . LiveView can be implemented in Elixir with minimal use of JS, which can provide a rich user experience . Testing, of course, is also Elixir, not Jest .
- 49. LiveView function used this application ●push_even t ○ Elixir to JS send messag e ●pushEven t ○ JS to Elixir send messag e ●handleEven t ○ Listen message from Elixir
- 50. LiveView Authentication Application Publisher/Subscriber Real-Time Update LiveView
- 51. PubSub PubSub provides real-time Publisher/Subscriber servic e Subscriber is message receiver from subscribing topi c Publisher is message sender to subscribing topi c
- 52. PubSub function used this application ● Subscrib e Subscribe to the event by specifying topic id when mounting LiveView pag e ● Broadcas t Broadcast to the specified topic id and execute the function waiting in handle_info
- 54. Presence Phoenix Presence is a featur e Witch allows you to register process information on a topi c And Replicate it transparently across a cluster Such as • List users who are currently onlin e • Show message like “Haigo typing…..“
- 55. Presence function used this application ● Presence.trac k ● Track a channel’s process as a presenc e ● Presence.lis t ● Returns presences for a socket/topi c ● Presence.updat e ● Update channel presence’s metadat a ● Presence.get_by_ke y ● Returns the map of presence for socket/topic-key pair.
- 56. Presence Authentication Application Publisher/Subscriber Real-Time Update Presence
- 57. Implementation and integration. 5 specific implementation .
- 58. ● Init Project ● Authenticatio n ● Render GoogleMap on LiveVie w ● Integration and dem o ● GPS Logger Client and demo
- 59. Init Project
- 60. Init project ● Phoenix version is 1. 6 ● mix phx.new live_map_vie w ● cd live_map_vier w ● mix ecto.creat e
- 61. create API and Context ● mix phx.gen.json Loggers Map maps name:string description:strin g ● mix phx.gen.schema Loggers.Point points lat:float lng:float device_id:string map_id:intege r ● mix ecto.migrate
- 62. I will display the code from now on. I want you to feel two things. One is not a big deal. Other is have a small number of lines.
- 63. Add list and create point method to Loggers.ex
- 64. add create point API
- 65. Add endpoint
- 66. Authentication
- 67. Generate Authentication ● mix phx.gen.auth Accounts User user s ● mix deps.ge t ● mix ecto.migrate
- 71. Add View file
- 72. Pipeline
- 73. Add api scope to Router
- 75. Render GoogleMap
- 76. Add google map lib and phx.gen.live ● cd assets ● npm install @googlemaps/js-api-loader ● cd . . ● mix phx.gen.live --no-context --no-schema Loggers Map maps name:string description:string
- 77. Add Route
- 78. Create js hooks file
- 79. Set hooks
- 80. Set hooks to template file and styling
- 81. Set map height and expand max-width
- 83. Integration
- 84. Process ● GPS Logger Viewer will start subscribing to the topi c ● GPS Logger Client post Location Data to applicatio n ● Logger application broadcasts to subscribing topic Viewe r ● Viewer showing Map Updat e ● Logger Application update GPS Logger Client location data
- 85. GPS Logger Viewer start subscribing to the topic Authentication Application Publication/Subscribe Real-Time Update
- 87. GPS Logger Client post Location data Authentication Application Publication/Subscribe Real-Time Update
- 88. Logger Application broadcast to topic subscribing viewer Authentication Application Publication/Subscribe Real-Time Update
- 89. Send Broadcast
- 90. GPS Logger Viewer showing Map update Authentication Application Publication/Subscribe Real-Time Update Subscribe Map:1 Subscribe Map:1 Subscribe Map:2
- 91. GPS Logger Viewer showing Map update side Elixir
- 92. GPS Logger Viewer showing Map update side JS
- 94. Done this fulfill Real-time update and multi-client ?
- 95. One more thing
- 96. Logger Application update location data Authentication Application Publication/Subscribe Real-Time Update
- 97. Implement components ● Setup Presenc e ● Implement 3 util functio n ● Modify LiveView Mount proces s ● Presence track star t ● Presence updat e ● Presence diff
- 98. Create presence ● mix phx.gen.presenc e ● Add to supervisor
- 99. Implement Presence 3 util function ● extract_metadat a ● Convert belo w ● %{metas [%{key1-1}, %{key1-2}] } -> %{key1-1 } ● list_presenc e ● List tracking topic’ all key and payload pai r ● With extract_metadat a ● update_presenc e ● Update received key’s payloa d ● With extract_metadata
- 100. Presence 3 util function
- 101. 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
- 102. Presence.track start
- 103. Mount proces s 1st user access Presence track And Assign Presence List
- 104. Mount Proces s Mount 2nd user access Presence track And Assign Presence List
- 105. Presence.update
- 106. Presence diff
- 107. Show Presence Data
- 109. Client Implements
- 110. Implementation of the GPS Logger Clients • Browse r • Geolocation AP I • Smart Watch(Apple Watch ) • CoreLocatio n • Smart Phone Ap p • expo locatio n • Flutter background geolocatio n • IoT Device(Nerves ) • Circuits.UART + GPS Module
- 111. Common Process ● Sign in and get toke n ● Email and passwor d ● One Time Toke n ● Get map id with toke n ● Receive GPS data ● Post GPS data with token
- 112. SmartPhone ● Language: ReactNative ● Framework: Expo ● Location Library: expo-locatio n ● Map Library: react-native-map s ● HttpRequest: Axios
- 113. SmartPhone
- 114. SmartPhone WebView ● Client: Open WebView with authorization header toke n ● Server: new session create with token and redirect LiveView Pag e ● Client: WebView render LiveView Page
- 115. Nerves ● Language: Elixi r ● Framework: Nerve s ● Location Library: Circuits.UART with Registry + GPS modul e ● HttpRequest: HTTPoiso n ● Based on yannvery's repositor y ● https://github.com/yannvery/ gps_tracker
- 116. AppleWatch ● Language: Swift ● Framework: Swift U I ● Location Library: CoreLocatio n ● HttpRequest: URLSession
- 117. Demo
- 118. Awesome Demo
- 119. how was it ? It would have been easier than I expecte d
- 120. Todays code ● https://github.com/thehaigo/live_map_elixir_conf_2021 ● https://github.com/thehaigo/live_map ● https://github.com/thehaigo/live_map_nerves ● https://github.com/thehaigo/live_map_expo ● https://github.com/thehaigo/live_map_watch
- 121. Thank You