Pub/Sub Messaging With Geo Data App Blueprint
One of the many specialties of Backendless Database that other no-code solutions lack is the ability to work with location-based, or geospatial, data. With UI Builder, as in our GEO chat app template, you can easily implement location-based features, including your own Google Maps.
The GEO Chat App Blueprint is one of our earliest and simplest blueprints, but the functionality it showcases is extremely powerful. If you are looking to implement location-based or pub/sub messaging functions into your app, this template is great tool to learn how they work.
App Blueprints are more than just templates from which to build a specific type of application or website. We design all of our App Blueprints to provide one or more key functions that a developer would want to add to their application, regardless of the app’s business use.
The GEO Chat App Blueprint showcases how to acquire a user’s location (with their permission) and display that location on a Google Map component in UI Builder when the user posts a message. Users can see where other users posted their messages from as well.
As with all of our App Blueprints, the entirety of this app blueprint was built without code using Backendless’ UI Builder.
Contents
1. What does the GEO Chat app do?
2. Location gathering and sending a message
3. Listening for and displaying messages on the Google Map component
4. Simple registration and sign in
What Does the GEO Chat App Do?
You can view the demo of the GEO Chat App Blueprint here.
The GEO Chat app is a basic group chat. Users can create an account simply by logging in. The app does not use a traditional signup page; rather, a user signs in with a username and password. If that username does not already exist, a new account is automatically created and the user is logged in.
When a user posts a message, the app places a pin on the map component showing where the message originated. Simultaneously, the app displays the message in the chat sidebar for all online users.
The app also users a real-time listener to display to other users that a message is being typed. On the Users list sidebar, a ... bubble will appear next to a user that is actively typing a message.
Next, we’ll break down how these features are implemented.
Location Gathering and Sending a Message
When the chat page opens, the app collects the user’s location (with the user’s permission). This information is stored in app data, not the database, meaning that the app is not collecting user location data permanently. Of course, if you choose to use similar logic in your app, you can store that data, but you will need to comply with data privacy laws.
When a user submits a chat, this location information is used to pin their message on the map at their location.
The logic used to post the chat utilizes the Pub/Sub Messaging API Codeless block to share the message with all other users that are logged in.
Without adding additional parameters, such as repeatEvery and repeatExpiresAt, pub/sub messages automatically expire in Backendless after just a few minutes. Thus, if you want to store the messages, you will need to add additional parameters to the API service displayed above.
You can view non-expired messages by visiting the messaging console in the Backend portion of your Backendless Console.
You can also manually post messages using this console.
Listening for and Displaying Messages on the Google Map Component
The Workspace container block in UI Builder contains the logic for displaying published pub/sub messages on the map and side panel. To view the logic we'll be discussing, click on the puzzle icon.
The real-time message listener, below, is triggered when a new pub/sub message is posted. The listener takes the message’s JSON format and uses it to create a list. The data in this list are then used to populate the chat sidebar as well as the Google Map component on the page.
Simple Registration and Sign In
The GEO Chat app uses a simple mechanism to allow users to register or login on the same screen.
Rather than having separate login and registration pages, when a user submits their login credentials, the app checks if the user account exists before logging in. If no account exists, a new user is automatically created.
To do this, the app runs two functions concurrently.
The register function is attempted first:
If the username does not already exist, a new user is created with the user’s credentials. Those credentials are then used to login the user.
Finally, once the user is logged in, the app navigates to the chat page.
Closing
The GEO Chat App Blueprint showcases how to implement geospatial data and messaging in a UI Builder app. Most importantly, it provides you with a template to follow for a variety of key Backendless functions. Backendless offers tons of tutorials that you can access for free to learn how more about these powerful functions.
Happy Codeless Coding!
Originally published at https://backendless.com on December 24, 2021.
