Supabase’s Post

Transcript

Today we are looking at Supervise real-time in combination with post GIS 2. Paint real time location data onto the map. Now supervise real-time allows you to do a couple of different things. So for example in broadcast mode you can send a formal messages from one client to many other clients with low latency. You can track and synchronize shared state between clients. So that is called presence and then. So you can listen to changes in your Postgres database. And so that is what we want to do today. So we're going to use a Superbase edge function to insert location, real time location data from a Telegram chatbot into our database. And then we're going to draw that live location onto the map in next JS React application, OK. Let's have a look at the code. So first of all, we want to enable post J so we can easily store location data in our database. Now there's a video, I'll link it below you can check out. If you haven't worked with Postgis before, maybe have a look at how that works. So in our migration, we'll just enable the Postgis extension. Importantly, do enabled on a separate schema. And then we can do this. We're just creating a locations table. So here we're just tracking some event ID, the user ID created at timestamp where tracking the latitude and the longitude as double precision and then also as a geography point. So the way we insert a point is just using point long latch and then we're just setting up a bunch of foreign. Piece so don't have to worry about that in this case, you know, we're just tracking this and then we are altering the role level security policy. So we're making sure that we only allow public read access. So that will be, you know, broadcasting this our real time location in this case. Now we're also setting up a remote procedure call specifically to insert data into our function. The way we're doing this is we're doing a sending a timestamp, we're sending our latitude, our longitude and a user ID. And then what we're inserting here is basically in this case, we're just checking that there is an active event in our sessions, the user ID. So we're then getting kind of the event ID into the active event ID. So this is basically how we're. You know, getting kind of the event ID based on the user ID and then we're inserting that into our public locations. And so specifically here we are using setpoint to insert our to basically generate our geography point, which we then can use in Postgres to do a bunch of different things where we can, you know, calculate the distance we can, you know, generate Geojson that we can. Output to load on the map, so Postgres gives us a lot of power here, so we'll just store it as. Geography in our database. Now what we need to do is we also need to enable the real time subscriptions. So we can do that in our dashboard as well. So we can go to database and then publications and you can see super based real time. You can you know, select here which tables you want to track real time on. So now our case we just want to track it on locations on the public schema. And that's it. The way this is represented in your SQL migrations, if you want to put it in there is you drop the publication if it exists and then you create the publication supervise real time. And then we alter our publication Superius real time to add the table public locations. OK, so that's it. So now we have real time set up and we can use it in our JavaScript library now, first of all. The way we are inserting our locations and we're doing that through a super base edge function. So you can see that here. Of course I'll link the source code below again as well. So in our case we're using the Grammy framework, which is a great open source framework for handling Telegram bots. And then what you can see is we're doing so in the case that we're getting a live location broadcaster to us, we're just reading out the. Location and then we're inserting it into our database using the remote procedure call O. In this case, we're using the Super base service role key for inserting into the database because we have RLS turned on and then we're just inserting the user ID, the lat, long, and the timestamp and then that is inserted into our database correctly. So now switching gears. To real time, Real time really couldn't be easier to set up. So we use our super base client here, Super Base, which is creating a client using the Super base SSR. So in this case, it's just an next shares application. We're here on the client side, so we're creating a browser super based client. So that we can use our real time which uses web sockets on the client side to listen to changes in the database. Now the way we're setting up real time changes really couldn't be simpler. We're just saying super based channel. So we're listening to schema DB changes that is a channel. And then specifically on Postgres changes. So we can specify a couple of options here. In our case we're only listening to insert events. On the public schema on the locations table, and then we can also filter this down. In our case, we catch a lot of, you know, location data from different events. So on this page we're looking for specific event. So we're just putting the event ID and we're just saying when the event ID equals the event ID from the parameters here. Then we want to get the real time. Now the real time payload we get and we can cost it. We can inject our types here, which is from the tables location database types. There are linked you some documentation on how to generate these types to use in TypeScript. And then we're just using a location reference because here you know, we're in React and we're setting up our real time listener. In a use effect, so we need to pass a reference to our state use state reference to then update the different locations of the different users. So we're tracking multiple different users here as an example. And so we're just inserting basically based on the user ID. We're then tracking the location. OK, So what we can do now is we're just doing the console lock and then, you know, anytime we get a new payload, we're setting the location and we're also console logging it out. Now here we're using a great tool called Proto maps. Proto Maps has a PM tiles protocol. There is a video on how you can use. Auto maps to host your own maps on super based storage. I'll link that below as well. So you can kind of end to end build your geospatial applications on super base. And then really what we're doing here is just we're using React. Map Libra GL for React using proto maps here to paint our map and then we're just basically using React to loop through all our locations and then paint a marker onto the map. So that's great. So what we can do now is we can run this up, maybe test it out so NPM run dev. We'll head over to our real time map. Here. And so now we are waiting for updates. You can see that we are subscribed. And so now if I go to my Telegram bot and I select the live location sharing. So I say share my live location. Until I turn it off. So you can see now I'm sharing my live location here on the Telegram bot. And right away we are writing our location to the database and we're getting our updates here. And as we're getting our update, we're painting our map and we're painting it here. So this is where I am right now, you know, if you want to come find me. If you find me in the next 10 minutes, I'll give you a super cap. Well anyway, so yeah, that's pretty much it. This is how we can use super based real time to broadcast live location data. You can see we're also inserting it into our table here. So our locations table where inserting our real time. Location data, our lat long and our also our location geography, which we then can use to do some really, really cool stuff with OSG where we're tracking distance, generating Geojson kind of all these things. Cool. Yeah. So that's it really a short and sweet one because sugar is real time is just so convenient to use. Do let me know what other geospatial things post JS or you know, real time storage. Things you would like to learn about and we can see if we can get a video up and running for you. Thanks for tuning in and I'll see you next time. Bye bye.