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

В последние годы Telegram активно развивает свою платформу, позволяя разработчикам создавать мини-приложения (Mini Apps) с использованием веб-технологий. Эти мини-приложения можно использовать для выполнения различных задач, включая запись на прием к врачу. В этой статье мы рассмотрим процесс создания такого мини-приложения с использованием React.

Требования

Перед тем как начать, убедитесь, что у вас установлены следующие инструменты:

• Node.js и npm (или Yarn)
• React
• Telegram аккаунт
• Ngrok (для локального тестирования)

Шаг 1: Настройка окружения React

1. Создайте новый проект React, используя Create React App:

npx create-react-app telegram-doctor-appointment
cd 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 добавьте следующий код:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    const tg = window.Telegram.WebApp;
    tg.ready();
  }, []);

  return (
    <div className="App">
      <h1>Запись на прием к врачу</h1>
      <button onClick={() => window.Telegram.WebApp.close()}>
        Закрыть
      </button>
    </div>
  );
}

export default App;

2. Теперь у нас есть базовое приложение, которое взаимодействует с Telegram Web Apps API. Этот код готовит мини-приложение и добавляет кнопку для его закрытия.

Шаг 3: Создание интерфейса для записи

1. Обновите src/App.js, добавив форму для записи на прием:

import React, { useState, useEffect } from 'react';

function App() {
  const [name, setName] = useState('');
  const [date, setDate] = useState('');
  const [time, setTime] = useState('');

  useEffect(() => {
    const tg = window.Telegram.WebApp;
    tg.ready();
  }, []);

  const handleSubmit = () => {
    const appointment = { name, date, time };
    window.Telegram.WebApp.sendData(JSON.stringify(appointment));
  };

  return (
    <div className="App">
      <h1>Запись на прием к врачу</h1>
      <input
        type="text"
        placeholder="Ваше имя"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="date"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
      <input
        type="time"
        value={time}
        onChange={(e) => setTime(e.target.value)}
      />
      <button onClick={handleSubmit}>Записаться</button>
      <button onClick={() => window.Telegram.WebApp.close()}>
        Закрыть
      </button>
    </div>
  );
}

export default App;

Шаг 4: Настройка вебхука и тестирование

1. Для того чтобы Telegram мог взаимодействовать с вашим приложением, оно должно быть доступно по HTTPS. Если вы разрабатываете локально, используйте ngrok для создания туннеля:

ngrok http 3000

Скопируйте выделенный URL и настройте его как WebApp URL в Telegram BotFather, чтобы ваш бот мог работать с мини-приложением.

2. Теперь вы можете запустить приложение и протестировать его:

npm start

Ваше мини-приложение должно быть доступно в браузере и через ngrok-ссылку.

Шаг 5: Получение данных в боте

Теперь, когда пользователи отправляют данные через ваше мини-приложение, бот будет получать их в виде строки JSON. В вашем Telegram боте, который вы создавали ранее, нужно настроить обработку этих данных:

1. В вашем боте на Node.js добавьте обработку данных:

const { Telegraf } = require('telegraf');
const bot = new Telegraf('YOUR_BOT_TOKEN');

bot.on('web_app_data', (ctx) => {
  const appointment = JSON.parse(ctx.webAppData.data);
  ctx.reply(`Вы записались к врачу: ${appointment.name} на ${appointment.date} в ${appointment.time}`);
});

bot.launch();

2. Теперь бот сможет получать данные, отправленные из вашего мини-приложения, и отвечать пользователю.

Заключение

Это простой пример создания веб-приложения для интеграции с telegram mini app. Возможности для создания, развития и масштабирования ограничены лишь вашим воображением.