Добро пожаловать в заключительную часть нашей серии статей по интеграции Twilio с вашим Rails 4 приложением. В первой части мы рассмотрели процесс регистрации бесплатного аккаунта разработчика Twilio, получение телефонного номера и обработку входящего звонка. Во второй части мы обеспечили безопасность вебхуков, использовали REST API Twilio для отправки исходящих SMS и MMS и обрабатывали уведомления о доставке. В этой статье мы создадим контекстный VOIP-опыт для ваших пользователей, изучив, как:
— Создать TwiML-приложение
— Интегрировать Twilio Client JS SDK
— Генерировать Capability Token
— Подключить VOIP-звонок
В предыдущих постах блога мы использовали Twilio для совершения телефонных звонков и отправки текстовых сообщений. Эти возможности довольно мощные, но часто они изолированы от контекста приложения, с которым взаимодействует пользователь. С помощью Twilio Client WebRTC вы можете встроить VOIP-опыт непосредственно в ваше веб-приложение на Rails 4. Таким образом, пользователь будет иметь перед собой весь контекст вашего приложения во время голосового разговора.
Для целей этой статьи мы создадим простую веб-страницу, которую мог бы использовать агент службы поддержки для связи с клиентом, запросившим обратный звонок. Агент службы поддержки инициирует звонок на веб-странице, а клиент получит звонок на свой мобильный телефон. Предупреждаем, страница, которую мы создадим, не будет выглядеть так же красиво, как на изображении выше, но вы узнаете всё необходимое с точки зрения кодирования, чтобы создать подобную страницу в реальном мире.
Если вы не прошли первую и вторую части этого учебного руководства, клонируйте этот репозиторий GitHub, чтобы ваша кодовая база была актуальной. Выполните следующие команды, и вы будете готовы начать!
Вы увидите список полезных инструментов, которые можно использовать при создании или отладке вашего приложения. Нажмите на «TwiML Apps» и затем на «Create TwiML App».
Вы можете заметить, что эта форма конфигурации очень похожа на форму, которую вы заполняете для настройки телефонного номера. Вместо телефонного номера здесь есть поле «Friendly Name», которое можно рассматривать как название вашего приложения. Когда вашему приложению нужно инициировать исходящий VOIP-звонок, URL запроса голоса будет указывать на маршрут в вашем Rails 4 приложении, который сгенерирует TwiML и сообщит Twilio, что делать с этим звонком. Заполните Friendly Name и нажмите Save. Вы вернётесь к списку ваших TwiML-приложений, и созданное вами приложение будет вверху. Нажмите на ссылку для нового приложения.
Ваше TwiML-приложение имеет уникальный идентификатор, называемый Sid. Скопируйте значение этого Sid и откройте файл config/secrets.yml в вашем текстовом редакторе. Добавьте следующие выделенные строки.
В терминале создайте новую переменную окружения для хранения этого значения:
Теперь, когда TwiML-приложение создано, давайте сосредоточимся на создании представления для агента службы поддержки, использующего веб-приложение. Создайте новый файл app/controllers/customer_service_controller.rb:
Этот контроллер определяет единственное действие под названием agent. На данный момент действие просто инициализирует жёстко закодированный объект клиента. В реальном приложении эта информация будет извлекаться из базы данных или очереди клиентов, которым требуется обратный звонок.
Далее создайте новый каталог: app/views/customer_service. В этом каталоге создайте файл agent.html.erb:
В config/routes.rb добавьте следующую строку:
Запустите ваш Rails-сервер и перейдите по адресу http://localhost:3000/customer_service/agent, чтобы убедиться, что веб-страница выглядит так:
Это представление для нашего агента, и оно полезно отображает информацию (контекст) о клиенте, которому она собирается позвонить.
Если вы видите страницу выше, вы на правильном пути. Если нет, обязательно проверьте вывод на командной строке от команды rails server. Там может быть полезная информация для отладки проблемы. Теперь давайте заставим работать кнопку «Совершить звонок».
Первым шагом при начале работы с Twilio Client JS SDK является подключение JS-файла. Откройте app/views/customer_service/agent.html.erb и добавьте следующую строку внизу:
Есть два шага для инициации исходящего звонка:
— Инициализация SDK
— Подключение исходящего звонка
Для инициализации SDK вызовите Twilio.Device.setup. Добавьте элемент