Недавно в одной из компаний директор предложил регулярно направлять выгодные предложения лояльному сегменту клиентов. Вместо того, чтобы отправлять менеджеров по продажам на указанный адрес. По мотивам этой истории мы с коллегой из отдела аналитики решили сделать гайд, как с помощью одной кнопки делать рассылку SMS по базе и при этом минимально беспокоить разработчиков.

Как показывает практика, сообщения могут быть самыми разными:

  • подтверждение заказа,

  • напоминание о встрече,

  • обновления по доставке,

  • внутренние коммуникации.

Как пишет Forbes, SMS открывают в 98% случаев, притом 95% пользователей делают это в первые 3 минуты после получения. Почему бы не создать механизм, который исключит людей и лишние сервисы ради простой рассылки.

Что предлагаем

На основе платформы МТС Exolve представим сразу три метода реализации функции отправки сообщений из браузера:

  • программный (код на Node.js)

  • SMS API

  • собственный UI-проект

Какой лучше для той или иной ситуации, когда лучше использовать и какие особенности встретятся в процессе — также покажем и расскажем.

Пример рассылки SMS из Node.js

Самые простые языки в плане реализации отправки SMS-сообщений — Node.js и JavaScript. В них легко реализуется связь с HTTP-методами GET и POST. Для удобства будем использовать библиотеку Axios (HTTP-клиент, основанный на Promise).

Принцип работы максимально прост: есть первая часть кода, которая что-то создает (в нашем случае — SMS-сообщение), непосредственный объект и вторая часть кода, которая получает его.

Axios выступает в роли алгоритма объединения, который обрабатывает запрос от источника, «забирает» объект и рассылает по получателям. Изначально состояние результата не определено, если получилось отправить — меняется на значение, иначе — на ошибку. В целом, на этом и основываются цветовые решения состояния отправки SMS-сообщений.

Главная особенность такого метода — пользователь либо получает сообщение, либо нет. Состояния «получил, но не до конца» нет изначально.

Теперь можно приступать непосредственно к программированию:

  1. Создание проекта и установка Node.js.

npm init
  1. Добавление библиотеки Axios в проект.

npm install –save axios
  1. Формирование констант для работы с Axios. В первую очередь производим подключение библиотеки, далее добавляем url-ссылку для отправки SMS-сообщений, генерируем номер для отправки сообщений и вставляем API-ключ.

const axios = require('axios');
const url = 'https://api.exolve.ru/messaging/v1/SendSMS';
const exolveNumber = '7999XXXXXXX';
const apiKey = ‘API_KEY’;
  1. Формирование массива данных для рассылки. В сложных проектах можем использовать полноценную базу данных, для примера достато��но массива.

var recipients = [    {        name: "Имя",        number: "Номер телефона"    },   
 {        name: "Валерий",        number: "799XXXXXXX"    },   
 {        name: "Дмитрий",        number: "7908XXXXXXX"            }];
  1. Перебор массива с отправкой SMS-сообщения через метод POST от Axios. В первую очередь формируется функция для поиска клиентов. Во-вторых, указывается текст сообщения с указанием имени получателя. Третья часть отвечает за отправку POST-запроса с помощью Axios, необходимо указать метод, URL, API и данные получателя. И, наконец, добавляется функция для отслеживания идентификатора сообщения.

recipients.forEach((person) => {var text = person.name + ', пора переходить в MTC Exolve!'; 
axios({        method: 'post',        url: url,        headers: {'Authorization': 'Bearer ' + apiKey},        data: {            number: exolveNumber,            destination: person.number,            text: text        }    }) 
.then((response) => {        console.log(response.data);      });});

В первую очередь необходимо найти виртуальный компилятор Node.js. Хороший пример — Replit, который позволяет вносить изменения как в основной код, так и в консоль. Первые две команды рекомендуем выполнять именно в ней.

После этого можно приступать к изменению указанного в примере кода. Все, что выделено жирным шрифтом, можно (а иногда даже нужно) изменять. Останется нажать на кнопку выполнения программного кода, и результат будет следующий:

В основе работы лежит интеграция с модулем SMS API от MTС Exolve, то есть, производится непрямая переадресация запроса с указанием всех необходимых параметров. Если нужно только отправлять сообщения, не отслеживая их состояния — более чем сойдет, потому что работать можно сразу с большими массивами данных.

Кому-то метод с применением программного кода нравится больше всего: контролируется все и вся, и при этом нужны минимальные вложения (нет переплаты за пользования готовым приложением). В то же время в Интернете достаточно много качественных примеров реализации таких методов, остается только копировать и вставить.

Но удобства для рядового пользователя немного: если нужно сделать рассылку по огромной базе или даже произвести внутреннюю кластеризацию и персонализированными предложениями, лучше обратиться к более автоматизированным системам. Или нагружать свой код, время от времени встречаясь с ошибками.

SMS API в МТС Exolve

Внутри MTC Exolve уже есть готовая CPaaS-платформа, которая позволяет без особых сложностей отправлять SMS, не покидая браузер. При этом сама работа производится внутри понятного интерфейса — с красочными кнопками и формами.

Внутри Exolve есть следующие методы взаимодействия с пользователями:

  • SendSMS — отправляет SMS-сообщение, указывается номер отправителя, номер получателя и сам текст;

  • GetList — получает данные об отправленных и полученных SMS-сообщениях, указывается id приложения, id сообщения (если нужно определенное), лимит по количеству выводимых строк, номер первой строки выборки, номер телефона отправителя, направление сообщения, статус отправления, статус билинга (или статус в общем), дата начала и конца выбора выборки в формате RFC-3339 / ISO-8601;

  • GetCount — получает количество отправленных и полученных SMS-сообщений по заданным параметрам, указывается id сообщения (если нужно определенное), лимит по количеству выводимых строк, номер первой строки выборки, номер телефона отправителя, направление сообщения, статус отправления, статус билинга (или статус в общем), дата начала и конца выбора выборки в формате RFC-3339 / ISO-8601;

  • GetAlphaNames — получает список всех созданных имен отправителя (альфа-имен), для обращения указывается пустой JSON.

Реализуем рассылку через SMS API и дополнительную систему REQBIN, в веб-версии. По факту это можно назвать тем же программированием, но в форме попроще — отправитель указывает HTTP-запросы, которые платформа обрабатывает и направляет далее получателям.

В область «JSON» необходимо вставить переменные из документации и указать соответствующие значения. После этого перейти во вкладку «Autorisation» и ввести код API из личного кабинета MTС Exolve. Нужно отметить, что предоставляемые ключи имеют формат Bearer.

Код API в личном кабинете MTС Exolve
Код API в личном кабинете MTС Exolve

Сразу после этого можно приступать к выполнению кода: нажать на кнопку «Send» и подождать несколько секунд. Виртуальный интерфейс отправит сообщение в Exolve с помощью API-запроса, произойдет переадресация и функция будет выполнена.

Результат работы следующего API-запроса в виде сообщения
Результат работы следующего API-запроса в виде сообщения

Самый главный плюс этого метода — нужен минимальный код, ориентир на рядового пользователя, и не нужно ничего дополнительно искать. 

Но в то же время минимизировать код — это не значит «отказаться». Все равно придется поработать с методами SMS API, изучить возможные проблемы и настраивать рассылку методом проб и ошибок. Также придется вручную обновлять номера получателей.

Собственный UI-проект

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

В первую очередь реализуется непосредственно код отправления сообщения. Необходимо подключиться непосредственно к API SendSMS, направить в него данные отправителя, получателя и само сообщение. Прикладываем готовый пример для использования на JavaScript, в котором необходимо добавить только код авторизации из личного кабинета:

async function postData(formProps) {
  const url = 'https://api.exolve.ru/messaging/v1/SendSMS';
  const data = { number: number, destination: destination, text: text };
  try {
    console.log(JSON.stringify(data));
    const response = await fetch(url, {
      method: "POST",
      body: JSON.stringify(formProps),
      headers: {
        "Authorization": "Bearer AuthorisationCode",
      },
    });
    const json = await response.json();
    console.log("Успех:", JSON.stringify(json));
  } catch (error) {
    console.error("Ошибка:", error);
  }
}
function logSubmit(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  const formProps = Object.fromEntries(formData);
  postData(formProps);
}
const form = document.getElementById("form");
form.addEventListener("submit", logSubmit);

Следующий шаг — создать форму для удобного ввода данных и отслеживания прогресса выполнения задачи. Мы также реализовали тестовый проект и предлагаем воспользоваться им в формате готового кода (проект Github, для использования необходимо изменить ключ авторизации на полученный в личном кабинете):

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@200;300&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <title>Exolve API example</title>
  </head>
  <body class="page">
    <div class="container">
        <form id="form">
          <div class="row">
            <div class="col-25">
              <label for="number">Номер отправителя / Имя отправителя</label>
            </div>
            <div class="col-75">
              <input type="text" id="number" name="number" placeholder="Введите номер / имя отправителя..." required minlength="1" maxlength="15">
            </div>
          </div>
          <div class="row">
            <div class="col-25">
              <label for="destination">Номер получателя</label>
            </div>
            <div class="col-75">
              <input type="tel" id="destination" name="destination" placeholder="Введите номер получателя..." required minlength="11" maxlength="11">
            </div>
          </div>
          <div class="row">
            <div class="col-25">
              <label for="text">Текст сообщения</label>
            </div>
            <div class="col-75">
              <textarea id="text" name="text" placeholder="Напишите что-нибудь..." style="height:200px"></textarea>
            </div>
          </div>
          <div class="row">
            <button type="submit" class="button">Отправить сообщение</button>
          </div>
        </form>
      </div>
    <script src="js/script.js"></script>
  </body>
</html>
Форма для ввода данных
Форма для ввода данных

Основная особенность этого метода в том, что можно использовать альфа-имя, привязанное к ключу авторизации. То есть, в личном кабинете нужно перейти во вкладку «SMS» и заранее подписать договор с MTC Exolve как юридическое лицо или ИП. Останется выбрать желаемое название для аккаунта отправителя (даже если он никак не записан у получателя), выбрать операторов и отправить заявку на согласование. Без этого отправить именное сообщение не получится.

Результат работы представленного выше программного кода
Результат ра��оты представленного выше программного кода

Надеемся, что MTC Exolve сможет облегчить работу по отправке сообщений, особенно по своей базе: больше не потребуется набирать 1000 и 1 сообщение на телефоне или делать рассылку по цене боинга через специализированные приложения.