Делаем форму обратного звонка: лендинг, Go и SMS-уведомления

c2066d9c5514ca4b66ec503335ce0c2f.png

Привет, Хабр! Меня зовут Екатерина Саяпина, я Product Owner личного кабинета платформы МТС Exolve. Сегодня расскажу, как создать простую, но эффективную форму обратного звонка с SMS-уведомлениями. Дам пример для сценария, когда клиент оставляет заявку через форму, а менеджер связывается с ним через Callback API. После успешного разговора система автоматически отправляет SMS через SMS API с подтверждением договоренностей и следующими шагами.

SMS-уведомления здесь играют роль надежного канала для закрепления результатов разговора и напоминания о договоренностях. Они не требуют интернета или установки приложений и работают везде, даже при слабом сигнале связи.

Причем пример будет без громоздких фреймворков — только Go и чистый HTML с щепоткой JavaScript.

Зачем это нужно в 2024

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

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

Что в итоге получим

Сделаем два компонента:

  • минималистичный лендинг с формой заказа звонка;

  • сервер на Go для обработки запросов и отправки SMS через API Exolve.

Звучит просто, но дьявол, как всегда, кроется в деталях.

Начинаем с фронтенда

Создадим простой, но современный лендинг. Никаких тяжелых фреймворков — только HTML5, CSS и чистый JavaScript.




    
    
    Заказать звонок
    


    

    

Заказать обратный звонок

Стандартный HTML с JavaScript может многое. Position: fixed с transform — древний как мир способ центрирования модального окна, работающий везде, от кнопочных Nokia до последних айфонов. В этом примере я не использую Bootstrap или Material UI, потому что можно сделать просто и надежно. Асинхронная отправка через fetch избавляет от перезагрузки страницы.

Пишем сервер на Go

Теперь займемся серверной частью. Нам понадобится:

  • обработка входящих запросов;

  • валидация данных;

  • интеграция с API Exolve;

  • защита от спама.

Начнем с основной структуры проекта:

package main

import (
    "encoding/json"
    "log"
    "net/http"
    "os"
    "time"
)

type CallbackRequest struct {
    Name  string `json:"name"`
    Phone string `json:"phone"`
}

type ExolveConfig struct {
    ApiKey string
    From   string
    To     string
}

var (
    config ExolveConfig
    client *http.Client
)

func init() {
    // Загружаем конфигурацию
    config = ExolveConfig{
        ApiKey: os.Getenv("EXOLVE_API_KEY"),
        From:   os.Getenv("SMS_FROM"),
        To:     os.Getenv("SMS_TO"),
    }

    // Инициализируем HTTP-клиент
    client = &http.Client{
        Timeout: time.Second * 10,
    }
}
type ExolveResponse struct {
    CallID string `json:"call_id"`
}

// Создаем структуру для отправки SMS через Exolve API
func sendSMS(phone string, name string) error {
    smsBody := struct {
        Number      string `json:"number"`      // Отправитель 
        Destination string `json:"destination"` // Получатель
        Text        string `json:"text"`        // Текст сообщения
    }{
        Number:      config.From,
        Destination: phone,  
        Text:        fmt.Sprintf("Здравствуйте, %s! Мы получили ваш запрос на обратный звонок и свяжемся с вами в ближайшее время.", name),
    }

    jsonData, err := json.Marshal(smsBody)
    if err != nil {
        return fmt.Errorf("ошибка при формировании SMS: %v", err)
    }

    req, err := http.NewRequest("POST", "https://api.exolve.ru/messaging/v1/SendSMS", bytes.NewBuffer(jsonData))
    if err != nil {
        return fmt.Errorf("ошибка при создании запроса: %v", err)
    }

    req.Header.Set("Content-Type", "application/json")
    req.Header.Set("Authorization", fmt.Sprintf("Bearer %s", config.ApiKey))

    resp, err := client.Do(req)
    if err != nil {
        return fmt.Errorf("ошибка при отправке SMS: %v", err)
    }
    defer resp.Body.Close()

    if resp.StatusCode != http.StatusOK {
        return fmt.Errorf("неожиданный статус ответа: %d", resp.StatusCode)
    }

    return nil
}

// Обработчик для API обратного звонка
func handleCallback(w http.ResponseWriter, r *http.Request) {
    if r.Method != http.MethodPost {
        http.Error(w, "Метод не поддерживается", http.StatusMethodNotAllowed)
        return
    }

    var request CallbackRequest
    if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
        http.Error(w, "Ошибка при разборе запроса", http.StatusBadRequest)
        return
    }

    // Валидация номера телефона
    if !validatePhone(request.Phone) {
        http.Error(w, "Некорректный номер телефона", http.StatusBadRequest)
        return
    }

    // Проверка на спам через Redis или другое хранилище
    if isSpamRequest(request.Phone) {
        http.Error(w, "Слишком много запросов", http.StatusTooManyRequests)
        return
    }

    // Отправляем SMS
    if err := sendSMS(request.Phone, request.Name); err != nil {
        log.Printf("Ошибка при отправке SMS: %v", err)
        http.Error(w, "Внутренняя ошибка сервера", http.StatusInternalServerError)
        return
    }

    w.WriteHeader(http.StatusOK)
    json.NewEncoder(w).Encode(map[string]string{
        "status": "success",
        "message": "Заявка принята",
    })
}

func main() {
    // Настраиваем CORS
    corsMiddleware := cors.New(cors.Options{
        AllowedOrigins: []string{"*"}, // В продакшне заменить на конкретные домены
        AllowedMethods: []string{"GET", "POST", "OPTIONS"},
        AllowedHeaders: []string{"Content-Type", "Authorization"},
    })

    // Настройка маршрутов
    mux := http.NewServeMux()
    mux.HandleFunc("/api/callback", handleCallback)

    // Оборачиваем наш мультиплексор в CORS middleware
    handler := corsMiddleware.Handler(mux)

    // Запуск сервера
    log.Printf("Сервер запущен на порту :8080")
    if err := http.ListenAndServe(":8080", handler); err != nil {
        log.Fatal(err)
    }
}

Ядро системы — встроенный http-пакет Go. Без лишних фреймворков и зависимостей. Так проще масштабировать и удобнее дебажить. Плюс меньше кода — меньше багов.

CallbackRequest-структура намеренно простая: только имя и телефон. Расширить всегда успеем, а вот выкинуть лишнее потом — та еще головная боль.

ExolveConfig держит настройки API в одном месте. Загружаем из переменных окружения — классика 12 factor app. Хардкодить креды в код в 2024 — моветон, да и DevOps нас не поймет.

Безопасность и валидация

Добавим функции валидации и защиты от спама:

func validatePhone(phone string) bool {
    // Очищаем номер от всего, кроме цифр
    re := regexp.MustCompile(`\D`)
    cleanPhone := re.ReplaceAllString(phone, "")
    
    // Проверяем длину и начало номера
    if len(cleanPhone) != 11 {
        return false
    }
    
    if !strings.HasPrefix(cleanPhone, "7") {
        return false
    }
    
    return true
}

// Простая проверка на спам через in-memory-хранилище
// В реальном проекте лучше использовать Redis
var (
    requestLock    sync.RWMutex
    requestCounter = make(map[string]*rateLimiter)
)

type rateLimiter struct {
    count     int
    firstCall time.Time
}

func isSpamRequest(phone string) bool {
    requestLock.Lock()
    defer requestLock.Unlock()

    now := time.Now()
    limiter, exists := requestCounter[phone]
    
    if !exists {
        requestCounter[phone] = &rateLimiter{
            count:     1,
            firstCall: now,
        }
        return false
    }

    // Сбрасываем счетчик каждый час
    if now.Sub(limiter.firstCall) > time.Hour {
        limiter.count = 1
        limiter.firstCall = now
        return false
    }

    limiter.count++
    // Ограничиваем до 3 запросов в час
    return limiter.count > 3
}

ValidatePhone проверяет номер по длине и первой цифре. Никаких хитрых регулярок — они только усложняют поддержку. К тому же валидация номера на бэкенде — это последний рубеж обороны, основную работу должен делать фронт.

Защита от спама через in-memory-хранилище не идеал, но для начала сойдет. Три запроса в час от одного номера — адекватный лимит. Redis сразу не используем — начинаем с простого, усложняем по необходимости.

Улучшаем наш сервис

Но сначала посмотрим, как сделать обработку звонков через Voice API от Exolve. Это позволит нам не только отправлять SMS, но и автоматически совершать звонки.

type VoiceConfig struct {
    ServiceID string // ID нашего голосового сервиса
    Source    string // Номер, с которого будем звонить
}

func makeCallback(phoneNumber string) error {
    callbackBody := struct {
        Source      string `json:"source"`
        Destination string `json:"destination"`
        ServiceID   string `json:"service_id"`
    }{
        Source:      config.Voice.Source,
        Destination: phoneNumber,
        ServiceID:   config.Voice.ServiceID,
    }

    jsonData, err := json.Marshal(callbackBody)
    if err != nil {
        return fmt.Errorf("ошибка при формировании запроса: %v", err)
    }

    req, err := http.NewRequest("POST", "https://api.exolve.ru/call/v1/MakeCallback", bytes.NewBuffer(jsonData))
    if err != nil {
        return fmt.Errorf("ошибка при создании запроса: %v", err)
    }

    req.Header.Set("Content-Type", "application/json")
    req.Header.Set("Authorization", fmt.Sprintf("Bearer %s", config.ApiKey))

    resp, err := client.Do(req)
    if err != nil {
        return fmt.Errorf("ошибка при выполнении запроса: %v", err)
    }
    defer resp.Body.Close()

    if resp.StatusCode != http.StatusOK {
        return fmt.Errorf("неожиданный статус ответа: %d", resp.StatusCode)
    }

    return nil
}

MakeCallback — наша связь с Voice API от Exolve. Структура запроса максимально прозрачная: откуда звоним, куда звоним, какой сервис используем. Никакой самодеятельности — только то, что реально нужно.

Логирование и мониторинг

Важная часть любого сервиса — отслеживание его работы. Добавим структурированное логирование:

type LogEntry struct {
    Time      time.Time `json:"time"`
    Level     string    `json:"level"`
    Phone     string    `json:"phone"`
    Name      string    `json:"name"`
    Status    string    `json:"status"`
    Error     string    `json:"error,omitempty"`
    UserAgent string    `json:"user_agent"`
    IP        string    `json:"ip"`
}

func logRequest(r *http.Request, phone, name, status string, err error) {
    entry := LogEntry{
        Time:      time.Now(),
        Level:     "info",
        Phone:     phone,
        Name:      name,
        Status:    status,
        UserAgent: r.UserAgent(),
        IP:        r.RemoteAddr,
    }

    if err != nil {
        entry.Level = "error"
        entry.Error = err.Error()
    }

    jsonEntry, _ := json.Marshal(entry)
    log.Println(string(jsonEntry))
}

LogEntry-структура — наш швейцарский нож для отладки. Время, уровень, телефон, имя, статус — все, что поможет понять, что пошло не так. UserAgent и IP — бонусом для особо пытливых DevOps.

Добавляем метрики

Prometheus стал стандартом де-факто для мониторинга. Добавим базовые метрики:

var (
    requestsTotal = promauto.NewCounterVec(
        prometheus.CounterOpts{
            Name: "callback_requests_total",
            Help: "Общее количество запросов на обратный звонок",
        },
        []string{"status"},
    )

    requestDuration = promauto.NewHistogramVec(
        prometheus.HistogramOpts{
            Name:    "callback_request_duration_seconds",
            Help:    "Время обработки запроса",
            Buckets: []float64{.005, .01, .025, .05, .1, .25, .5, 1, 2.5, 5, 10},
        },
        []string{"status"},
    )
)

// Оборачиваем наш обработчик для сбора метрик
func metricsMiddleware(next http.HandlerFunc) http.HandlerFunc {
    return func(w http.ResponseWriter, r *http.Request) {
        start := time.Now()
        
        // Создаем свой ResponseWriter для отслеживания статуса
        srw := &statusResponseWriter{ResponseWriter: w}
        
        next.ServeHTTP(srw, r)
        
        duration := time.Since(start).Seconds()
        status := fmt.Sprintf("%d", srw.status)
        
        requestsTotal.WithLabelValues(status).Inc()
        requestDuration.WithLabelValues(status).Observe(duration)
    }
}

type statusResponseWriter struct {
    http.ResponseWriter
    status int
}

func (w *statusResponseWriter) WriteHeader(status int) {
    w.status = status
    w.ResponseWriter.WriteHeader(status)
}

RequestsTotal и requestDuration — два основных элемента нашего мониторинга. Первый считает запросы, второй измеряет время. Лишние метрики лучше не вводить: этих двух уже достаточно, чтобы следить за здоровьем сервиса.

Кэширование и оптимизация

Добавим Redis для более надежного контроля спама и кэширования:

type Cache struct {
    client *redis.Client
}

func NewCache(addr string) (*Cache, error) {
    client := redis.NewClient(&redis.Options{
        Addr: addr,
    })

    // Проверяем подключение
    if err := client.Ping().Err(); err != nil {
        return nil, fmt.Errorf("ошибка подключения к Redis: %v", err)
    }

    return &Cache{client: client}, nil
}

func (c *Cache) CheckSpam(phone string) (bool, error) {
    key := fmt.Sprintf("spam:%s", phone)
    
    // Получаем количество запросов
    count, err := c.client.Get(key).Int()
    if err == redis.Nil {
        // Ключа нет, создаем новый
        err = c.client.Set(key, 1, time.Hour).Err()
        return false, err
    }
    if err != nil {
        return false, err
    }

    // Увеличиваем счетчик
    count++
    err = c.client.Set(key, count, time.Hour).Err()
    if err != nil {
        return false, err
    }

    return count > 3, nil
}

Cache-структура оборачивает клиент Redis. Проверка спама теперь надежнее: счетчики живут час и не боятся перезапуска сервера. А для больших нагрузок Redis — самое то: быстрый, надежный, проверенный временем.

Деплой и конфигурация

Для контейнеризации используем Docker:

FROM golang:1.21-alpine AS builder

WORKDIR /app

COPY go.mod go.sum ./
RUN go mod download

COPY . .
RUN CGO_ENABLED=0 GOOS=linux go build -o main .

FROM alpine:latest

RUN apk --no-cache add ca-certificates
WORKDIR /root/

COPY --from=builder /app/main .
COPY config.yaml .

EXPOSE 8080
CMD ["./main"]

Dockerfile разворачиваем в две стадии: сначала собираем, потом упаковываем. Минимум слоев — минимум проблем. Используем как базовый образ легкий и быстрый Alpine Linux.

И docker-compose для локальной разработки:

version: '3'

services:
  app:
    build: .
    ports:
      - "8080:8080"
    environment:
      - REDIS_URL=redis:6379
      - EXOLVE_API_KEY=${EXOLVE_API_KEY}
    depends_on:
      - redis

  redis:
    image: redis:alpine
    ports:
      - "6379:6379"

  prometheus:
    image: prom/prometheus
    ports:
      - "9090:9090"
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml

  grafana:
    image: grafana/grafana
    ports:
      - "3000:3000"
    environment:
      - GF_SECURITY_ADMIN_PASSWORD=secret
    depends_on:
      - prometheus

Docker-compose хорошо подходит для нашей задачи. Он объединяет Redis, Prometheus, Grafana и позволяет избежать проблем с настройкой окружения.

Что у нас получилось в итоге

Мы создали простой, но надежный сервис обратного звонка с защитой от спама, мониторингом и логированием. Благодаря интеграции с Exolve API наше решение может не только отправлять SMS, но и автоматически совершать звонки. Однако все-таки стоит помнить, что это лишь учебный прототип и демонстрация того, как можно использовать Exolve в вашей работе. На его основе вам предстоит уже решить, как вы будете делать решение, которое подойдет конкретно для ваших задач и потребностей.

Если у вас возникли вопросы по интеграции с Exolve API или масштабированию сервиса, пишите в комментариях — обязательно отвечу.

© Habrahabr.ru