Как запрашивать и принимать обратную связь от клиентов с помощью SMS API
Сегодня мы опишем создание простого сервиса для отправки SMS с вопросами через веб-интерфейс своим клиентам и просмотра всех полученных ответов. На базе этого решения можно построить систему автоматической обработки обратной связи, поэтому вашему маркетологу должно это понравиться.
Мы используем SMS API от Exolve, фреймворк Next.js без APP роутера и базу данных PostgreSQL. Для тестирования в локальной среде и приёма сообщений из интернета работаем с Ngrok.
Установка Next.js
Первым делом устанавливаем приложение Next.js с помощью команды:
npx create-next-app sms-feedback
Для оформления графического интерфейса менеджера, который будет делать рассылки и анализировать полученную обратную связь, при установке Next.js выбираем фреймворк для работы со стилями Tailwind CSS.
Создание интерфейса
Переходим в корень проекта, если ещё находимся не там, и создаём папку components, а в ней — компонент SmsForm.js.
import React, { useState } from 'react';
const SmsForm = () => {
// Используем хук useState для управления состоянием полей ввода
const [phoneNumbers, setPhoneNumbers] = useState(''); // хранение номеров телефонов
const [message, setMessage] = useState(''); // хранение текста сообщения
// Функция для обработки отправки формы
const handleSubmit = async (event) => {
event.preventDefault(); // Предотвращаем перезагрузку страницы при отправке формы
// Делим строку, переводя в массив номеров телефонов
const destinationNumbers = phoneNumbers.split(',').map(number => number.trim());
try {
// Отправляем POST-запрос на серверный API для отправки SMS
const response = await fetch('/api/sendSms', {
method: 'POST',
headers: {
'Content-Type': 'application/json', // Указываем тип содержимого запроса
},
body: JSON.stringify({
senderNumber: 'ВАШ НОМЕР ОТПРАВИТЕЛЯ EXOLVE', // Номер отправителя
destinationNumbers, // Массив номеров получателей
text: message, // Текст сообщения
})
});
// Разбираем ответ API
const data = await response.json();
if (response.ok) {
alert('Сообщение успешно отправлено!'); // Показываем уведомление об успешной отправке
setPhoneNumbers(''); // Очищаем поле ввода номеров телефонов
setMessage(''); // Очищаем поле ввода сообщения
} else {
throw new Error(data.message || 'Что-то пошло не так'); // Обрабатываем ошибку, если запрос не был успешным
}
} catch (error) {
// Обрабатываем ошибку при выполнении запроса
console.error('Ошибка при отправке SMS:', error);
alert(`Ошибка: ${error.message}`);
}
};
return (