In this article, we are going to figure out how to create a chatbot using React via Urban Bot library. We will create a simple Telegram bot like on this gif.
Preconditions:
- node.js: 10+
- telegram bot token — you can get it from @BotFather, see instruction.
To creating chatbots with React, we will use the fresh library Urban Bot. It adjusts React to writing chatbots which you can launch in different messengers. Currently supporting is Telegram, Facebook, and Slack.
The main benefit of Urban Bot that you don’t need to know anything about messengers API, how chatbots work under the hood. All that you need is a basic knowledge of React. You just describe your app using ready components and hooks. To manage different screens, you can use Router component. Also, you can integrate anything from React ecosystem, for example, use Mobx or Redux as a state manager or just share parts from your React Web or React Native apps.
Installation
The easiest way to start it’s using the Urban Bot starter. It has a TypeScript and JavaScript version.
To install just type in your terminal.
TypeScript
npx create-urban-bot my-appJavaScript
npx create-urban-bot my-app --template jsAfter installing the starter will be inside my-app directory where you run create-urban-bot .
Set up Telegram
Open my-app with your favorite editor, open .env file and paste your Telegram token.
Also, we need to activate a Telegram render. Uncomment // import ‘./render/telegram’; inside src/index.ts or src/index.js.
All is ready to develop your Telegram bot! Run npm run dev script and write something to your bot which is connected with the Telegram token. It should work as a default app with two commands /echo and /logo.
If you see error looks like
error: [polling_error] {"code":"EFATAL","message":"EFATAL: Error: connect ECONNREFUSED 127.0.0.1:9150"}probably an internet provider blocks Telegram connection. You need to use a VPN, or you could use the Tor browser, see the example.
Developing
At first open src/App.js or src/App.ts , delete all default code except function App returns null;
Secondly, let’s add initial empty todos value and actions addTodo and toggleTodo. We will use useState hook from React to bind todos value and render. Be careful, if we change todos we shouldn’t mutate it, we should always pass a new array to setTodos.
Now we want that after a user sends a text to the chat, we add a new todo to our todos value. Urban Bot provides React hooks to subscribe to user actions. For this goal, we can use useText React hook from @urban-bot/core.
All is ready to display our todos . Urban Bot provides HTML syntax to format text. Let’s create a new array with formatted text. <s>...</s> means strikethrough, <br /> next line.
Also, create an array of buttons to change the “completed” status of every todo. To use buttons we should use Button component. To have a toggle action after click we should call the function toggleTodo with an id which todo is clicked.
Currently, App function returns null so our bot display nothing. To fix it we should paste our ready values to ButtonGroup component and return it. We pass the formatted text to ButtonGroup title prop and buttons to ButtonGroup children. maxColumns is optional prop to divide all buttons as a maximum three in a row.
Also, if todos is empty let’s display corresponding text.
Let’s check your bot! For example, if you type ‘add todo’ to a bot it should return a todo and a button to toggle its status.
If you type something else it returns a new message with two todos. Let’s make it will be one message every time and it will be edited after changing todos . To enable this, add a prop isNewMessageEveryRender={false} to ButtonGroup. You can make this behavior for all components if you pass this prop to Root component inside src/render/telegram.js .
<ButtonGroup title={title} maxColumns={3} isNewMessageEveryRender={false}>Final code src/App.js.
We left delete functionality but I will not describe it because it doesn’t open new conceptions, it’s just improvements, you can see it in the final github example.
The last important thing, what if two users or more start to write to our chatbot, don’t it to be intersections? No. Urban Bot renders every app instance unique for every user, so you don’t need to think about managing session at all, every user will have own todos. Despite it is a server app you will not feel a difference as if you write a regular client-side React application.
Summary
We considered how to write a simple Todo List app using React. The main goal of the article is to show the base conception of Urban Bot. We used only one App component but it is possible to create tens and hundreds of components and create a really complex SPA inside any chatbot. Also, we launch only Telegram messenger but we can launch this example on Facebook and Slack and in future on any messenger which supports chatbots.
If you like the idea, push the star on Urban Bot repository, it will be the best motivation to continue to develop a project.
Links
