Как открыть свой смс чат

Как создать приложение для чата за двадцать минут

Мой отец любит напоминать мне, что в 1970-х, будучи компьютерным инженером, он был « программист до того, как программирование было в моде ». Он даже несколько раз показывал старые сценарии Fortran и COBOL. Прочитав этот код, я могу с уверенностью сказать, что сегодняшнее программирование определенно великолепно.

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

Сравнение, доказывающее, что разработка программного обеспечения — это строительство. Когда-то строительство любого дома начиналось с вырубки деревьев на его участке. Однако материалы, инструменты и методы быстро появились те, которые делают строительство быстрее, объекты крепче, а рабочих освобождают некоторые светские ú раундов.

Сколько небоскребов будет построено? стали бы они строить, если бы строители изготавливали собственную сталь?

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

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

Как создать приложение для чата

Давайте быстро создадим то, на что раньше уходили дни или недели. Мы создадим приложение общедоступного чата, использующее WebSockets для обмена сообщениями в реальном времени.

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

• 8base: Managed GraphQL API
• VueJS: JavaScript framework

Исходный проект и полный файл README можно найти в этом репозитории GitHub. Если вы хотите увидеть приложение целиком, загляните в ветку общедоступного чата.

Кроме того, в следующем видео (на английском языке) более подробно объясняется каждый шаг.

Семь шагов для создания приложение чата:

1. Настройка проекта

Клонируйте первоначальный проект и перейдите в каталог группового чата. Вы можете использовать пряжу или проект npm для установки зависимостей. В обоих случаях нам нужны все пакеты NPM, перечисленные в файле package.json.

Чтобы взаимодействовать с GraphQL API, нам нужно установить три переменные среды. Создайте файл .env.local в корневом каталоге с помощью следующей команды, и Vue автоматически установит переменные среды, которые мы добавили в этот файл после инициализации.

> .env.local

VUE_APP_8BASE_API_ENDPOINT a VUE_APP_8BASE_WS_ENDPOINT менять не нужно. Просто установите значение VUE_APP_8BASE_WORKSPACE_ID .

Если у вас есть рабочее пространство 8base, которое вы хотели бы использовать для создания приложения чата в соответствии с нашим руководством, обновите файл .env.local, указав идентификатор своего рабочего пространства. В противном случае получите идентификатор рабочей области в соответствии с шагами 1 и 2 краткого руководства по 8base.

2. Импорт схемы

Теперь нам нужно подготовить сервер со стороны рабочей области. Вы должны найти файл chat-schema.json в корне этого репозитория. Чтобы импортировать его в рабочую область, просто установите командную строку 8base и войдите в систему, а затем импортируйте файл схемы. GraphQL API.

В консоли 8base выберите Службы приложений > Особенности > гость. Обновите набор разрешений для публикаций и пользователей, подлежащих проверке, или установите для них значение «Все записи» (как показано на изображении ниже).

Роль «Гость» определяет, что разрешено делать пользователю, отправляющему неаутентифицированный запрос. к API.

Редактор ролей в консоли 8base.

4. Написание запросов GraphQL

На этом этапе мы определим и напишем все запросы GraphQL, которые нам понадобится для нашего компонента чата. Это поможет нам понять, какие данные мы будем считывать, создавать и прослушивать (через WebSockets) с помощью API.

Следующий код следует поместить в src/utils/graphql.js. Прочтите комментарии к каждой экспортированной константе, чтобы понять, что делает каждый запрос.

5. Настройка клиента Apollo для подписок

После написания запросов GraphQL пришло время настроить наш API. модули.

Сначала мы вызываем клиент API с помощью ApolloClient с желаемой конфигурацией по умолчанию. Для createHttpLink мы предоставляем нашу полностью созданную конечную точку рабочей области. Этот код находится в src/utils/api.js .

Далее давайте разберемся с клиентом подписки, используя subscribes-transport-ws и isomorphic-ws . Этот код немного длиннее предыдущего, поэтому стоит потратить время на чтение комментариев в коде.

Мы инициализируем SubscriptionClient, используя наши конечные точки WebSockets и workspaceId в connectionParams. Затем мы используем этот subscribeClient в двух методах, определенных в экспорте по умолчанию: subscribe() и close() .

subscribe позволяет нам создавать новые подписки с обратными вызовами данных и ошибок. Метод close — это то, что мы можем использовать для закрытия соединения. при выходе из чата.

6. Написание компонента Vue

Теперь у нас есть все необходимое для создания публичного чата. Осталось только написать компонент GroupChat.vue.

Скачать компонент с помощью ветки сервиса и продолжить.

Важное примечание: у каждого свое представление о красоте, поэтому я сделал только минимальный стиль, необходимый для того, чтобы компонент работал.

Скрипт компонента

Сначала нам нужно импортировать наши модули, простые стили и запросы GraphQL. Все это находится в нашем каталоге src/utils.
Объявите следующие импорты в GroupChat.vue.

Данные компонента

Мы можем определить, какие свойства данных мы хотим использовать в функции данных нашего компонента. Все, что нам нужно, — это способ сохранить пользователя чата, сообщения, имя «текущего» пользователя и любые сообщения, которые еще не были отправлены. Эти свойства можно добавить следующим образом:

Крючки жизненного цикла

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

Методы компонентов

Нам нужно добавить специальные методы для обработки каждого вызова/ответа API (createMessage, addMessage, closeChat и т. д. ). Все будет храниться в методах объекта нашего компонента.
‍
Одно замечание: большинство мутаций не ожидают и не обрабатывают ответы. Это потому, что у нас есть подписки, которые отслеживают эти мутации. При успешном запуске подписка обработает данные события.
‍
Большинство из этих методов говорят сами за себя. В любом случае прочитайте комментарии в приведенном ниже коде.

Шаблон компонента

И последнее, но не менее важное: у нас есть компонент GroupChat.vue.
‍
Существуют тысячи отличных руководств по созданию красивых пользовательских интерфейсов. Это не один из них.
‍
Следующий шаблон удовлетворяет минимальные требования к чат-приложению. Красиво это или нет решать вам. Но давайте быстро взглянем на ключевую маркировку, которую мы здесь реализовали.
‍
Как всегда, читайте комментарии к коду в тексте.

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

7. Заключение и тестирование

В этом руководстве мы рассмотрим, как использование современных инструментов разработки позволяет нам создавать реальные приложения за считанные минуты.

Надеюсь, вы Вы также узнали, как инициализировать ApolloClient и SubscriptionClient для эффективного выполнения запросов, мутаций и подписок GraphQL в вашей рабочей области. 8base, а также кое-что о VueJS.

Если вы работаете над мобильной игрой, мессенджерами, приложениями для уведомлений или любым другим проектом, требующим данных в реальном времени, подписка — отличный инструмент. А сейчас мы только начали их рассматривать.

Источник

СМС-чат на коленках

Как-то так нам нужен был SMS-чат для небольшой группы пользователей. Основными требованиями были надежность и простота реализации. Был средний офисный компьютер с Windows XP на борту, USB-модем Huawei E1550, сим-карта с положительным балансом, средний эникей.

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

В теории все было просто. Возьмем GSM-модем, напишем программу, которая проверяет входящие сообщения, получает из них нужную информацию, обрабатывает их и передает по списку подключенных участников.

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

Последним открытием стала программа от петербургской компании Headwind Solutions. Он называется «Персональный SMS-сервер». Программа платная, но есть демо на 30 дней. Начали подбирать.

Программа оказалась очень удобной и надежной. Его главная особенность в том, что он избавляет от необходимости работать напрямую с модемом. Она сама работает с GSM-модемом, проверяет входящие сообщения и отправляет исходящие. Если приходит новый, он вызывает скрипт и передает ему два параметра: номер отправителя и текст сообщения. Все остальное решает скрипт. Уже из скрипта можно вызвать процедуру и отправить сообщение программе. Сообщений может быть много, программа сама ставит их в очередь, чтобы правильно отправить и передать. Скрипт написан на VBS.

Кстати, программу можно запускать как службу Windows. Сначала мы игнорировали эту возможность, и это абсолютно напрасно что сервис работает стабильнее.

У нас нет останавливаемся на самой программе. Он имеет множество настраиваемых параметров, прост и хорошо описан в документации на сайте разработчика.

Давайте подробнее рассмотрим скрипт чата. Помимо самого скрипта вам потребуется создать в этой же директории три файла: hlr.txt, vlr.txt и vlr_back.txt.
Первый файл заполняется количеством подписчиков, имеющих доступ к чату. Формат: номер мобильного телефона без идентификатора абонента плюс.

79111234567 Иванов (энергетик)
79111234568 Петров (WDM)
79111234569 Сидоров (РРЛ)

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

Сценарий поддерживает три команды. Они начинаются с # (знак фунта). Для вступления в чат-группу необходимо отправить SMS на номер сим-карты модема с текстом #1, для терминации #0. Чтобы запросить текущий список пользователей, отправьте #?
Запросы от участников, не входящих в группу, игнорируются.

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

Вот настройка нашей программы. Параметры подбирались на протяжении нескольких лет методом проб и ошибок:

Ну и сам скрипт:

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

Ресурс

Настройки онлайн-чата и мессенджера¶

Шаг 1. Соедините каналы¶

Подключите необходимые каналы, чтобы начать общение с клиентами. Для этого на домашней странице проекта найдите Онлайн-чат и обмен мгновенными сообщениями :

Перейдите в Настройки , прокрутите вниз до Каналы :

В настоящее время существует два канала связи с клиентами:

Живой чат — это виджет, который появляется, когда вы нажимаете Чат Чат на веб-сайт. Подробнее о том, как подключить Чат-канал онлайн

Telegram — это бот в Telegram, ссылка на диалог, которую можно опубликовать в сети или в социальных сетях. Подробнее о подключении Telegram-канала

Активируйте необходимые каналы связи согласно инструкции.

Шаг 2. Подключение оператора Telegram¶

Оператор: Сотрудник вашей компании, который общается с клиентами с помощью Live Chat. Вы можете подключить любое количество операторов.

После активации Онлайн-чата будет создан оператор с теми же данными авторизации, что и у владельца проекта, к которому подключен чат.

Чтобы добавить нового оператора:

1. Перейдите на вкладку Операторы .
2. Нажмите кнопку Добавить оператора .
3. Установите Имя оператора . Он будет отображаться клиентам в чате.

Установите адрес электронной почты и пароль . С ними оператор входит в ваше приложение для общения с клиентами.

Введите один и тот же адрес электронной почты для оператора в онлайн-чате и для администратора в CRM, чтобы администратор, связавшийся с клиентом, автоматически взял на себя ответственность за запрос .

Укажите, будет ли у оператора административный доступ. Приложения администратора могут просматривать чаты других сотрудников и передавать чаты от одного оператора к другому.

Только владелец проекта может создать оператора-администратора. При необходимости владелец проекта может назначить администраторами одновременно нескольких операторов.

Установить аватар, который будет отображаться клиентам в чате.

• Изображение должен быть квадратным
• Размер Размер изображения: от 200 x 200 до 1500 x 1500 пикселей
• Файл может быть в формате: .png, .jpg, .jpeg

Если вы удалите агента, ваши данные будут храниться на вкладках Сообщение , История чата и Агенты с (Удалено) рядом с именем:

• В отчете , введенном администраторами , данные для каждого удаленного выведет оператора отдельно (ранее объединенный в строке Удаленный оператор — эта логика сохранится для операторов, удаленных до 15.06.2022).
• В История чата имя удаленного оператора будет сохранено в столбце Агент и может быть использовано в фильтре.
• На странице Операторы все удаленные операторы отображаются в обзорном списке. Удаленный оператор не может быть восстановлен, и его информация не может быть отредактирована.

Внимание: данные оператора будут сохранены только в том случае, если они будут удалены после 15.06.2022. Если оператор был ранее удален, содержащиеся в нем данные невозможно восстановить.

Шаг 3. Установите приложение оператора — Roistat Chat¶

Установка и регистрация¶

Использование С помощью приложения Roistat Chat менеджеры могут общаться с клиентами через онлайн-чат.

Загрузите приложение и запустите:

При установке в Windows вы можете получить сообщение о том, что запущено неизвестное приложение. Для продолжения установки нажмите Еще → Все равно начать .

Для авторизации введите данные, предоставленные вам при настройке оператора:

Вы должны войти в систему один раз. Приложение запоминает это, поэтому вы можете войти в систему автоматически.

Работа в приложении¶

Во время использования приложения вы можете:

Подать новое заявление о приеме на работу:

Количество непроанализированных посещений отображается в верхнем левом углу:

Когда клиент посещает ваш сайт, приложение автоматически создаст с ним чат, даже если он еще не начал разговор. Если включена опция Только с сообщениями от клиентов , пустые чаты не будут отображаться в общем списке. Эта опция включена по умолчанию. Если его отключить, автоматически созданные чаты будут отображаться в списке, но вы не будете получать о них уведомления.

Открывая пустой чат, оператор может самостоятельно начать общение с клиентом, зашедшим на сайт , но не писал в чат. При этом оператор увидит, какое объявление привело клиента и на какой странице в данный момент находится покупатель:

Ответить на запрос пользователя:

Вкладка Онлайн чаты в состоянии Выполняется с клиентами, которые в данный момент находятся в сети:

Редактировать или удалить свое сообщение:

Изменения в сообщении также будут отображаться для клиента.

Отправить запрос пользователя из чата в CRM:

Если у менеджера в CRM и у оператора в онлайн-чате один и тот же адрес электронной почты, то ответственность за запрос будет возложена на менеджера кто переписывался с клиентом.

Когда он будет с вами в следующий раз, когда клиент будет общаться в чате, вы увидите его имя, контактную информацию и информацию о билете:

Чтобы информация о клиенте появляется в чате, ваша интеграция с CRM должна поддерживать управление клиентами.

Оставьте новую заметку для записи сделок или важных моментов переписки (клиент не увидит):

Примечание. Заметки не отправляются с переписка оператора с клиентом при отправке билета к CRM.

Прикрепить файл или выбрать быстрый ответ из шаблона:

При необходимости можно воспользоваться поиском. Поиск работает как по названиям шаблонов, так и по содержащимся в них словам.

Изменение статуса обращения после завершения работы с клиентом:

Если оператор меняет статус чата на «Спам «, чат закрывается и у пользователя в окне чата выводится сообщение: «Оператор завершил разговор». В этом случае пользователь не сможет поставить оценку оператору или начать новый чат.

Если в момент входа клиента на страницу все операторы не в сети, при появлении любого оператора в сети клиент не увидит его, пока страница не будет обновлена. Если оператор выходит из системы во время диалога с клиентом, клиент не увидит изменения статуса оператора без обновления страницы.

Оператор-администратор¶

Если вам назначена роль администратора оператора, вы может:

просматривать чаты других операторов;

назначать чат конкретному сотруднику.

Сотрудник уведомляется о новом чате только тогда, когда оператор назначает чат. Если клиент снова напишет в этот чат в будущем, ответственное лицо получит уведомление.

Не приходят уведомления о новых чатах, которые еще никому не назначены.

Настроить всплывающие уведомления¶

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

Windows

Нажмите Пуск и перейдите к Настройки → Специальные возможности → Дисплей . Выберите нужную продолжительность из списка Показать уведомления для :

macOS

Открыть Терминал : Для этого запустите Spotlight ( Ctrl + пробел ), введите слово терминал и нажмите Enter . В Terminal введите команду:

Число 10 в примере — это количество секунд, через которое будет отображаться уведомление. Вы можете ввести любое число.

Дополнительные настройки¶

Шаблоны ответов¶

Чтобы вашим операторам было проще общаться с клиентами, настройте шаблоны для ответов на более частые вопросы. . Они будут доступны операторам в приложении.

Добавление нового шаблона отчета:

1. Перейдите на вкладку Шаблоны .
2. Нажмите Добавить шаблон сообщения .
3. Введите имя шаблона и текст сообщения.

Показать контактные данные клиента¶

В разделе Контактные данные клиента можно настроить отображение контактных данных клиента. поговорить.

По умолчанию данные отображаются администраторам и операторам чата. Чтобы сделать контактные данные клиента анонимными, вы можете запретить их показ администраторам и/или операторам, сняв соответствующие флажки:

После этого данные клиента будут частично скрыты:

Рейтинг¶

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

Статистику оценки оператора можно просмотреть в Сообщении .

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

Рассылка чата¶

Вы можете включить автоматическое распределение чатов между операторами, чтобы сотрудники не могли самостоятельно выбирать, какие чаты они приносят в работу.

Если включена опция Автоматически распределять чаты между операторами :

Кнопка Чат появится в приложении чата. При нажатии на нее оператор получит самый старый неразобранный чат. Администратор по-прежнему сможет изменять назначения чатов вручную.

Операторы больше не будут видеть чаты в разделе «Неанализируемые». Поэтому они не могут сами выбрать чат.

Настройка других полей¶

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

Оповещения о проблемах¶

Вы можете настроить автоматические оповещения при возникновении следующих проблем:

• Чат закрыт с рейтингом ниже 4;
• В рабочее время в чате нет операторов (уведомления срабатывают не чаще 1 раза в 30 минут).

Для этого откройте главное меню Roistat в верхнем левом углу, выберите Настройки и перейдите в Далее → Уведомление . Найдите категорию Живой чат и нажмите Добавить новый способ оповещения :

Создание лидов в CRM¶

Если интеграция с CRM настроена в вашем V of В проекте Roistat можно быстро создавать лиды на основе запросов клиентов в онлайн-чате.

Если клиент оставил заявку в чате, оператор должен нажать Создать лид в операторе приложение и введите контактные данные заказчика (если данных не было, вы можете запросить данные в чате). в противном случае принимается):

Информация о клиенте, текст диалога и, возможно, номер визита клиента будут отправлены в CRM. Обратите внимание, что отзывы менеджера, время отклика и оценки не отправляются в CRM.

Если вы хотите, чтобы менеджер, который связался с клиентом, автоматически отвечал за запрос, введите тот же адрес электронной почты для оператора в чате. и для админа в CRM.

FAQ¶

Это пока невозможно, но мы уже работаем над этим. Вы можете следить за обновлениями на нашем веб-сайте или подписаться на наш канал Telegram, чтобы получать мгновенные обновления о новых функциях. Roistat.

Возможно ли встроить приложение для операторов в CRM?

Такой возможности пока нет, но если такая функция важна для вашей работы, напишите нам; Мы обязательно рассмотрим ваше предложение.

Можно ли настроить автоматический ответ на определенные типы вопросов от заказчика?

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

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

Источник