Создание мини-приложения для записи на прием к врачу в 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. Возможности для создания, развития и масштабирования ограничены лишь вашим воображением.