Создание мини-приложения для записи на прием к врачу в Telegram на React

Никита Калашников
В последние годы Telegram активно развивает свою платформу, позволяя разработчикам создавать мини-приложения (Mini Apps) с использованием веб-технологий. Эти мини-приложения можно использовать для выполнения различных задач, включая запись на прием к врачу. В этой статье мы рассмотрим процесс создания такого мини-приложения с использованием React.
Требования
Перед тем как начать, убедитесь, что у вас установлены следующие инструменты:
- Node.js и npm (или Yarn)
- React
- Telegram аккаунт
- Ngrok (для локального тестирования)
Шаг 1: Настройка окружения React
1. Создайте новый проект React, используя Create React App:
1npx create-react-app telegram-doctor-appointment
2cd telegram-doctor-appointment
2. Удалите стандартные файлы и подготовьте минимальное окружение, оставив только следующие файлы:
src/index.js
src/App.js
src/App.css
Шаг 2: Подключение к Telegram Web Apps
Telegram предоставляет специальный объект window.Telegram.WebApp
, который мы будем использовать для взаимодействия с Telegram Web Apps API.
1. В файле src/App.js
добавьте следующий код:
1import React, { useEffect } from 'react';
2
3function App() {
4 useEffect(() => {
5 const tg = window.Telegram.WebApp;
6 tg.ready();
7 }, []);
8
9 return (
10 <div className="App">
11 <h1>Запись на прием к врачу</h1>
12 <button onClick={() => window.Telegram.WebApp.close()}>
13 Закрыть
14 </button>
15 </div>
16 );
17}
18
19export default App;
2. Теперь у нас есть базовое приложение, которое взаимодействует с Telegram Web Apps API. Этот код готовит мини-приложение и добавляет кнопку для его закрытия.
Шаг 3: Создание интерфейса для записи
1. Обновите src/App.js
, добавив форму для записи на прием:
1import React, { useState, useEffect } from 'react';
2
3function App() {
4 const [name, setName] = useState('');
5 const [date, setDate] = useState('');
6 const [time, setTime] = useState('');
7
8 useEffect(() => {
9 const tg = window.Telegram.WebApp;
10 tg.ready();
11 }, []);
12
13 const handleSubmit = () => {
14 const appointment = { name, date, time };
15 window.Telegram.WebApp.sendData(JSON.stringify(appointment));
16 };
17
18 return (
19 <div className="App">
20 <h1>Запись на прием к врачу</h1>
21 <input
22 type="text"
23 placeholder="Ваше имя"
24 value={name}
25 onChange={(e) => setName(e.target.value)}
26 />
27 <input
28 type="date"
29 value={date}
30 onChange={(e) => setDate(e.target.value)}
31 />
32 <input
33 type="time"
34 value={time}
35 onChange={(e) => setTime(e.target.value)}
36 />
37 <button onClick={handleSubmit}>Записаться</button>
38 <button onClick={() => window.Telegram.WebApp.close()}>
39 Закрыть
40 </button>
41 </div>
42 );
43}
44
45export default App;
Шаг 4: Настройка вебхука и тестирование
1. Для того чтобы Telegram мог взаимодействовать с вашим приложением, оно должно быть доступно по HTTPS. Если вы разрабатываете локально, используйте ngrok для создания туннеля:
1ngrok http 3000
Скопируйте выделенный URL и настройте его как WebApp URL в Telegram BotFather, чтобы ваш бот мог работать с мини-приложением.
2. Теперь вы можете запустить приложение и протестировать его:
1npm start
Ваше мини-приложение должно быть доступно в браузере и через ngrok-ссылку.
Шаг 5: Получение данных в боте
Теперь, когда пользователи отправляют данные через ваше мини-приложение, бот будет получать их в виде строки JSON. В вашем Telegram боте, который вы создавали ранее, нужно настроить обработку этих данных:
1. В вашем боте на Node.js добавьте обработку данных:
1const { Telegraf } = require('telegraf');
2const bot = new Telegraf('YOUR_BOT_TOKEN');
3
4bot.on('web_app_data', (ctx) => {
5 const appointment = JSON.parse(ctx.webAppData.data);
6 ctx.reply(`Вы записались к врачу: ${appointment.name} на ${appointment.date} в ${appointment.time}`);
7});
8
9bot.launch();
2. Теперь бот сможет получать данные, отправленные из вашего мини-приложения, и отвечать пользователю.
Заключение
Это простой пример создания веб-приложения для интеграции с telegram mini app. Возможности для создания, развития и масштабирования ограничены лишь вашим воображением.