Как сделать интерактивную панель для отправки SMS

Сегодня разработаем панель, через которую сможем отправлять SMS сразу нескольким адресатам, получать их ответы и видеть статистику по отправленным сообщениям через календарь и график. Будем использовать Next.js, Shadcn для интерфейса и SMS API от МТС Exolve для отправки сообщений.

Архитектура приложения

Мы создадим приложение, где администратор сможет вводить один или несколько номеров абонентов и текст сообщения и отправлять его одной кнопкой. На сайте реализуем календарь для выбора даты и просмотра всех отправленных SMS за конкретный день, а также график с их количеством.

Подготовка окружения

Разрабатывать будем на фулстек-фреймворке Next.js, который поддерживает серверный и клиентский код на React.js. Задача — создать компонент календаря и графика. Для этого мы обратимся к библиотеке Shadcn с готовыми компонентами, которые настроим под свои нужды. Основу слоя стилей Shadcn составляет Tailwind, и рекомендуется использовать его вместе с TypeScript. 

Если вы ещё не работали с TS — не страшно. Это просто язык статического анализа данных, и, разрабатывая на нём, можно всё так же писать на JS.

Переиспользуем код из другой статьи

В предыдущей статье (её полный код лежит на GitHub) мы уже создали часть нужной функциональности: отправку сообщений и запись данных в БД. Обратите внимание: ранее мы писали на JavaScript, а теперь будем на TypeScript. Главное — следите за расширением файлов, в целом ничего не меняется.

Разворачиваем приложение Next.js

Развернуть приложение Next.js можно с помощью документации на сайте https://nextjs.org. Но мы выбрали Shadcn, и эти ребята тесно сотрудничают с Next.js, поэтому предоставили возможность с помощью одной команды развернуть Next.js с Shadcn и настроить всё под себя. Перейдём в официальный источник https://ui.shadcn.com/docs/installation/next и воспользуемся командой, которая за нас всё сделает. Важно: выбирайте опцию с CSS-переменными и поддержкой TypeScript.

Копирование функциональности из прошлой статьи

Заходим в папку components и скачиваем файл SmsForm.js, переименовываем его в SmsForm.tsx, чтобы продолжить работать в TypeScript. Далее в папке api копируем файлы sendSms.js и messages.js и называем их sendSms.ts и messages.ts. Подключение к базе будет таким же, поэтому качаем в корне проекта файл db.js. Обратите внимание на пути подключения и настройте их под себя. После того как мы изменили расширение на ts, в скопированных файлах подсветятся ошибки TypeScript.

Сам TypeScript не вносит новой функциональности, а занимается только проверкой типов данных для лучшей отладки кода. Его можно настроить в конфигурационном файле tsconfig.json: указать, чтобы TS не подсвечивал ошибки или не проверял код. Также не забудьте скачать файл .env и заполнить его данными для подключения к БД, токеном авторизации МТС Exolve и SMS API для отправки сообщений. Если вы всё сделали правильно, то приложение уже может отправлять сообщения.

Компонент Calendar — календарь с сообщениями

Разработаем функциональность для компонента Calendar из Shadcn. Для начала нужно его скачать: находим в библиотеке и следуем инструкции по установке через CLI. Система сама добавит Calendar к нам в проект, а также все входящие в него компоненты Shadcn.

Не удивляйтесь, если в папке components появятся новые компоненты. Уже на этом этапе можно импортировать calendar на страницу и использовать, но мы так делать не будем, чтобы не захламлять код.

Инкапсулируем логику календаря, вынеся его в свой кастомный компонент. Создадим новый компонент в папке components и назовём его CalendarMessage.tsx. Обратите внимание: по соглашению между программистами для удобства желательно называть компоненты React с большой буквы, хоть и Shadcn по умолчанию именует их с маленькой. Это можно отредактировать в конфигурационном файле. Вот документация по его настройке: https://ui.shadcn.com/docs/components-json.

Логика работы календаря

Логика записи исходящих сообщений в БД у нас уже есть в файле api messages.ts. Нам остаётся «постучаться» к этому API, достать оттуда данные о SMS, отфильтровать по дате, выбранной в нашем календаре, и вывести через map все сообщения с помощью условного рендеринга под компонентом calendar. Обратите внимание, что мы преобразовываем дату к строке для сравнения, и не забывайте, что локаль даты может быть разной, как и часовой пояс. Внимательно следите за преобразованием и часовым поясом: эта статья лишь показывает пример реализации.

Содержимое CalendarMessage.tsx

Вставьте следующий код в компонент CalendarMessage.tsx:

import React, { useEffect, useState } from "react";
import { Calendar } from "./calendar";


// Определение интерфейса для объекта сообщения
interface Message {
  received_at: string; // Дата получения сообщения в формате строки
  sender_number: string; // Номер телефона отправителя
  recipient_numbers: string; // Строка с номерами получателей
  text: string; // Текст сообщения
}


const CalendarMessage: React.FC = () => {
  // Состояние для хранения текущей выбранной даты
  const [date, setDate] = useState<Date>(new Date());
  // Состояние для хранения списка сообщений
  const [messages, setMessages] = useState<Message[]>([]);


  // Эта функция для загрузки сообщений из API при монтировании компонента
  useEffect(() => {
    const getMessages = async () => {
      const res = await fetch("/api/messages");
      const data = await res.json();
      setMessages(data); // Сохранение полученных данных в состояние messages
    };
    getMessages();
  }, []);


  // Эта функция обрабатывает выбор даты в календаре
  const handleDateSelect = (newDate: Date | undefined) => {
    if (newDate) {
      setDate(newDate); // Обновление состояния date, если выбрана новая дата
    }
  };


  // Фильтрация сообщений по выбранной дате
  const filteredMessages = messages.filter((message) => {
    const messageDate = new Date(message.received_at).toDateString(); // Преобразование даты сообщения в строку
    return messageDate === date.toDateString(); // Сравнение даты сообщения с выбранной датой
  });


  // Рендер компонента
  return (
    <>
      <div className="w-full flex items-center justify-center">
        <Calendar
          mode="single" // Режим выбора одной даты
          selected={date} // Текущая выбранная дата
          onSelect={handleDateSelect} // Функция, вызываемая при выборе даты
          className="rounded-md border" // Классы стилей для календаря
        />
      </div>
      <div className="max-w-4xl mx-auto mt-10">
        <h2 className="text-lg font-semibold">
          Сообщения за {date.toLocaleDateString()}
        </h2>
        {filteredMessages.length > 0 ? (
          <ul>
            {filteredMessages.map((message, index) => (
              <li key={index} className="mb-2 p-2 border rounded">
                <p>
                  <strong>Номер отправителя:</strong> {message.sender_number}
                </p>
                <p>
                  <strong>Номера получателей:</strong>{" "}
                  {message.recipient_numbers}
                </p>
                <p>
                  <strong>Текст сообщения:</strong> {message.text}
                </p>
                <p>
                  <strong>Получено:</strong>{" "}
                  {new Date(message.received_at).toLocaleString()}
                </p>
              </li>
            ))}
          </ul>
        ) : (
          <p>Нет сообщений за этот день.</p> // Сообщение, если нет сообщений за выбранный день
        )}
      </div>
    </>
  );
};


export default CalendarMessage;

Остаётся импортировать этот компонент на главную страницу index.tsx.

Компонент Chart — график с отправленными SMS

Подобно установке календаря через Shadcn давайте установим компонент графика Chart. Так же вынесем логику графика в отдельный файл. Создадим в папке components компонент ChartMessage.tsx.

Логика работы графика для отображения количества SMS

Для реализации графика будем вновь использовать API messages.ts, чтобы достать данные с сообщениями. Запрограммируем график на отображение сегодняшней даты плюс два дня назад и два дня вперёд (вы можете указать любой диапазон и логику). Дальше мы должны получить данные по API: сравниваем их с датами в счётчике и при совпадении записываем в ячейку определённой даты количество сообщений. Не забывайте про часовой пояс! Рендерим компонент и наслаждаемся результатом.

Содержимое ChartMessage.tsx

Вставьте следующий код в компонент ChartMessage.tsx:

import React, { useState, useEffect } from "react";
import { Bar, BarChart, CartesianGrid, XAxis, Tooltip } from "recharts";
import { ChartContainer } from "@/components/ui/chart";


// Типы для сообщений и данных графика
interface Message {
  id: number;
  received_at: string;
}


interface ChartData {
  time: string; // дата в формате YYYY-MM-DD
  sms: number; // количество сообщений
}


// Конфигурация графика
const chartConfig = {
  sms: {
    label: "sms",
    color: "#2563eb",
  },
};


const ChartMessage: React.FC = () => {
  // Состояние для данных графика
  const [chartData, setChartData] = useState<ChartData[]>([]);


  // Получение данных при монтировании компонента
  useEffect(() => {
    const fetchData = async (): Promise<void> => {
      try {
        const response = await fetch("/api/messages");
        if (!response.ok) {
          throw new Error(`Error fetching messages: ${response.statusText}`);
        }
        const data: Message[] = await response.json();
        updateChartData(data);
      } catch (error) {
        console.error("Error fetching messages:", error);
      }
    };
    fetchData();
  }, []);


  // Функция для обновления данных графика
  const updateChartData = (data: Message[]): void => {
    const today = new Date();
    const counts: Record<string, number> = {};


    // Генерация диапазона дат для графика
    for (let i = -2; i <= 2; i++) {
      const date = new Date(today);
      date.setDate(date.getDate() + i);
      const dateString = date.toISOString().split("T")[0]; // Преобразование даты в строку YYYY-MM-DD
      counts[dateString] = 0; // Инициализация счетчика для каждой даты
    }


    // Подсчет количества сообщений по датам
    data.forEach((msg) => {
      const msgDate = msg.received_at.split("T")[0];
      if (counts.hasOwnProperty(msgDate)) {
        counts[msgDate]++;
      }
    });


    // Создание данных для графика из счетчиков
    const newChartData: ChartData[] = Object.keys(counts).map((key) => ({
      time: key,
      sms: counts[key],
    }));


    setChartData(newChartData);
  };


  // Отрисовка компонента
  return (
    <div className="max-w-4xl mx-auto mt-10">
      <ChartContainer config={chartConfig} className="h-[200px] w-full">
        <BarChart accessibilityLayer data={chartData}>
          <CartesianGrid vertical={false} />
          <XAxis dataKey="time" />
          <Tooltip />
          <Bar dataKey="sms" fill={chartConfig.sms.color} radius={4} />
        </BarChart>
      </ChartContainer>
    </div>
  );
};


export default ChartMessage;

Остаётся импортировать его на главную страницу index.tsx.

Результат

Над дизайном вы при желании поработаете сами, а основные функции мы добавили вместе — можно рассылать SMS и просматривать, что и в каком количестве было отправлено. Мы разместили весь код на GitHub.

Подводные камни компонента Chart

Если в консоли высветится ошибка — это нормально. Уже целый год разработчики серьёзной технологии Shadcn пытаются перейти с пропсов по умолчанию на пропсы кастомных компонентов. Вывод в консоли просто предупреждает программистов, что как только разрабам это удастся сделать, при обновлении, возможно, придётся залезть в код и кое-что допилить. Пожелаем им удачи.

Второй подводный камень — часовой пояс. База данных может иметь часовой пояс и преобразовывать даты по-своему. Можно следить за этим и устанавливать везде равные часовые пояса или преобразовывать дату во время выполнения кода. В компоненте календаря удалось вывести дату как строку, но в компоненте графика это оказалось сложнее: пришлось преобразовывать внутри. Как следствие, компонент календаря и компонент графика выводят сообщения в разных часовых поясах. Для продуктивной среды такой вариант не совсем подойдёт, а вот в качестве статьи очень даже.

Заключение

В статье реализована функциональность работы с абонентом через API-платформу МТС Exolve — это надёжный способ интеграции. В сочетании с готовыми компонентами задача становится вполне подъёмной. Тщательно планируйте логику работы приложения, задавайте ему стили и архитектуру, и у вас всё получится. Также не забывайте про правильную настройку и обработку даты. А если вы ещё не знаете TypeScript, то самое время его изучить — язык не сложный, а пользы от него предостаточно.