Разработка онлайн-чата для Transcribersteam
Transcribersteam - сайт по услугам транскрибации. Занимается расшифровками аудио/видео материалов.
Задача:
Повысить количество проектов для расшифровок. Завоевать доверие клиентов и получить и иметь возможность общаться с заказчиками на сайте.
Решение:
Разработка онлайн-чата для сайта с упором на выделяющийся дизайн и быструю обработку HTTP-запросов
Этапы работы
7) Оплата проекта;
6) Помощь в установке на сайт, тестирование;
3) Разработка (написание кода, настройка сервера и Telegram'a);
5) Презентация готового продукта и всей его функциональности;
4) Тестирование;
2) Согласование полного функционала;
1) Разработка макетов дизайна интерфейса чата и согласование;
Внешний вид чата
Функционал чата
Функция для отправки текстовых сообщений;
Функция для отправки видео;
Настраиваемая анти-спам система с оповещениями;
Функция - переключатель звуковых сообщений;
Информация о статусе консультанта;
Смайлы;
Горячие клавиши для быстрого начала диалога;
Меняющий заголовок страницы после получения сообщения - "Новое сообщение!";
Функция для отправки графических изображений;
Как работает чат
Пользователь присылает сообщение на сайте - Сообщение приходит вам в Телеграм - Вы отвечаете из Телеграма - сообщение приходит пользователю в чат на сайте
Чат был установлен 18 апреля. Увеличен спрос на услуги. Увеличено среднее время, которое проводят пользователи на сайте. Увеличено количество клиентов.
Данные о сайте Услуг транскрибации
Проделанная работа
Аудит сайта на предмет его дизайна и стилистики;
Разработка HTML-структуры;
Написание CSS-кода по макету из Figma, чтобы придать HTML-структуре нужный вид дизайна интерфейса чата;
Продумывание логики для каждой функции в чате;
Подготовка Телеграм(создание группы, ботов, настройка webhook);
Построение дорожной карты, чтобы отобразить всю логику "на бумаге";
Цикл: разработка функции - тестирование;
Финальное тестирование чата: кроссбраузерность, различные сценарии поведения, проверки работоспособности "под нагрузкой (одновременно до 100 активных пользователей в чате) ";
Адаптация чата под мобильные экраны;
Презентация готового чата заказчику;
Помощь с интеграцией на сайт клиента;
Создание видео-инструкции для самостоятельного изменения некоторых частей кода без каких-либо знаний. На случай, чтобы самостоятельно можно было изменить текст, добавить горячие кнопки, изменить цвета и т.д.
Написание кода для серверной части;
Настройка корректного взаимодействия сервера с фронтендом (кодом чатом на сайте);
Подключение алгоритма шифрования и настройка шифрования данных, чтобы защитить данные от XSS-атак на сайт клиента, если таковые будут;
Обфускация кода на фронтенде с применением сложной системы шифрования для защиты;
Передача данных клиенту (сервер, телеграм группа, телеграм боты, программные коды, видео-инструкция, документация);
Написание документации - руководство по пользованию чатом и пояснение каждой функции в коде для разработчиков;
Разработка нескольких макетов в Figma, правки и доведение до идеала, который хочет клиент;