This is the fourth post in a series of posts documenting my journey building Botler - your personal AI butler. In this post, I will build the the onboarding flow for our users where they connect their account to the Telegram bot.
A quick overview of what we've done so far. We've set up a NextJS app with authentication and connected it to a database. We also have a barebones Telegram bot running on an ExpressJS server. There's no point if these two can't talk to each other so that's what we're going to take care of now.
In this post, we'll build the first thing the users see when they log in to their dashboard. An onboarding flow where they connect their Telegram account to the web app so that we have enough information for the bot to be able to dynamically send messages (notifications, alerts) to our users. So yeah, let's get started!
Setting up the database model
For our bot to be able to message our users, we need to know their Telegram username and ID. And in order to be able to store these, we need to add these fields to our database.
We'll start by creating a new model to store Telegram related details for our users.
This model is pretty self-explanatory but the main fields to look at here are the
telegram_id, and the
user_id. We will be using the
user_id field to link the
telegram_details model to the
users model so we know which user these
telegram_details belong to. Linking these tables will also allow us to ensure that one user can only edit/update their own
Building the onboarding modal
Our model is ready but in order to be able to populate data in it, we need to show our users some sort of UI where they can give us this information. We're going to do this in an onboarding modal. The idea is, if a user has completed their onboarding, they get access to the dashboard and if they haven't, they will be shown this modal.
In the snippet above, we open a modal in which we run our onboarding flow. To build our onboarding flow, we've created a wizard UI using react-albus. Our wizard flow consists of 3 steps:
- Username step: In this step, we show our users a form and ask them for their Telegram username.
- Connection step: In this step, we ask our users to initiate a chat with our Telegram bot. Once they do that, we receive the message on our backend server and attach their user ID to their username.
- Success step: If everything goes according to plan, we show our users a message mentioning that they've successfully connected their account to the bot.
In the snippet above, we show our users a basic form with just one field asking for their Telegram username. Once they submit the form, we call our
insertTelegramUsername mutation to create a new entry in our
telegram_details table. When running the mutation, if something goes wrong, we show our users an alert asking them to reach out to us and if everything works as expected, we save the username to a state variable and take them to the next step.
We handle conflicts within our mutation as well. If for whatever reason (partially completed wizard flow), we already have an entry in the
telegram_details table for this user, we just replace that entry with the username the user submits here.
If you notice, we don't pass the
user_id field in our mutation. That's because Hasura has a neat option called column presets where we can set values from session variables while adding an entry into a column.
Very self-explanatory stuff here. We tell our users that we've saved their Telegram username and that we need them to add the bot on Telegram. Once they add the bot on Telegram, it will trigger the
/start command for our bot where we will (on the backend) listen for messages from their Telegram username and once the message is received, we will save their Telegram ID.
The code above is again, pretty self-explanatory. Whenever the bot receives a
/start command, we query the database and check if a user with that username exists. If they do, we check whether we have their
telegram_id and if we don't, we save it. After this, we show them a message asking them to return to the dashboard and continue their onboarding.
Within the dashboard, we want to double-check that we have their
telegram_id after they click the next button. We do that in the
handleNext function shared below.
In this function, we query the
telegram_details object for this user in our database to see if we have their
telegram_id. If we don't have it, we show them an error and ask them to reach out if they need some support. If we have their Telegram ID, we take them to the next step and show them the success message.
And with that, our onboarding flow is complete! You can see the full flow in action in the GIF below.
We're finally done with all the putting things together stuff and can now start building features. In subsequent posts, we will focus on incrementally adding services that the bot can send notifications and alerts for, and also work on adding some basic automation related features.
Another reminder that we're only 3 weeks away from launch and have only 23 (at the time of writing this) pre-order items remaining. You can get a lifetime subscription to Botler for only $10 if you place your order ASAP. You won't even be billed till the product goes live!