EmoPhone: Как создать IVR на базе Twilio с использованием PHP и и ngrok

До появления мобильных телефонов существовали только стационарные. В старших классах я часто звонил домой человеку, в которого был влюблён. Звонок на полу-приватный номер для личных разговоров всегда был непростым испытанием. Я надеялся вопреки всему, что трубку возьмёт именно тот, кто мне нравится, а не его родители или братья с сёстрами. Неловкие разговоры с неодобрительными отцами были обычным делом в эпоху стационарных телефонов.

Я не хочу вновь переживать экзистенциальный ужас тех звонков. Но я хочу использовать телефонный звонок как способ пробудить ностальгию и улучшить навыки программирования. Запускайте Терминал и доставайте свои диски с микстейпами. Мы создаём EmoPhone — IVR на базе Twilio, который воспроизводит эмо-музыку с помощью PHP и ngrok. Попробуйте прямо сейчас: +1 504-684-7369

Прежде чем мы приступим к руководству (и множеству отсылок к моим любимым эмо-группам), давайте пробежимся по инструментам, которые понадобятся для создания IVR на PHP.

— Аккаунт Twilio для питания номера горячей линии EmoPhone

— ngrok, чтобы предоставить Twilio URL для запросов к нашему приложению

— PHP 5.4.0 или новее

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

Если вы новичок в Twilio, вам нужно создать аккаунт и купить телефонный номер. Вы можете поискать номер с нужным вам кодом региона или номер, содержащий фразу, которая вам нравится. Я искал номер, в котором есть фраза «emo».

Вот как это сделать в формате GIF.

Далее загрузите ngrok. Если вам нужно немного убедительности, почему мы используем ngrok, ознакомьтесь с этими 6 потрясающими причинами его использования. Он поможет Twilio получить доступ к коду, который мы напишем, и музыке, которую мы будем воспроизводить. ngrok позволяет открыть локальные файлы для всего мира через URL. Мы будем использовать ngrok, чтобы предоставить Twilio URL-адреса, необходимые для выполнения нашего кода и бесперебойной работы EmoPhone.

Создадим папку для хранения нашего кода. Откройте Терминал и введите cd Documents. Затем напишите команду mkdir Hacks. Это создаст папку в вашей директории Documents под названием Hacks. Теперь у нас есть место для хранения первого фрагмента кода, который мы напишем, и место для хранения кода ваших будущих проектов.

Теперь давайте решим проблему Зулендера. А именно, файлы, которые мы создадим, находятся на вашем компьютере, и Twilio не имеет к ним доступа. Запустите сервер, чтобы открыть наш код для ngrok. Убедитесь, что у вас установлен PHP 5.4.0 или новее, чтобы вы могли запустить сервер с помощью следующей команды. Убедитесь, что вы находитесь в директории Hacks, затем введите в терминал php -S localhost:8888. Ваш сервер должен быть запущен. Затем перейдите в директорию, куда вы загрузили ngrok, и введите ./ngrok http 8888. Вы должны увидеть это.

Отлично, наша среда разработки настроена, и мы можем писать код.

Первое впечатление имеет значение. Нам нужно поприветствовать звонящего, прежде чем мы начнём использовать телефонные линии и воспроизводить хиты.

Первый фрагмент кода, который мы написали, будет содержать XML-команды, которые мы называем TwiML. Это XML-глаголы, которые инструктируют Twilio выполнять такие действия, как запись звонков, воспроизведение файлов, ответ с помощью синтеза речи и многое другое.

Этот файл будет обрабатывать входящий звонок и приветствовать звонящего. Создайте файл с именем incoming-call.xml. Затем вставьте в этот файл следующий код. Вот как это будет выглядеть:

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

Теперь давайте разберём, что делает каждый глагол в этом фрагменте кода:

— — Twilio что-то запрашивает с нашего сервера, а именно наш файл TwiML. Этот глагол даёт Twilio понять, что мы его слышим и отвечаем на запрос.

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

— — этот глагол позволяет воспроизвести аудиофайл звонящему. Чуть позже мы будем использовать его для воспроизведения грустных хитов, а в данном случае мы воспроизводим записанное вступление, которое я предоставил для Emo Dial.

— — этот глагол собирает все данные, которые пользователь вводит, нажимая 1, 2, 3 и т.д. при выборе песни.

Откройте браузер и перейдите по адресу localhost:8888/incoming-call.xml. Вы должны увидеть свой красивый XML-файл.

С этим кодом наш звонящий готов выбрать песню от Taking Back Sunday, Brand New, Say Anything или Saves The Day. Готовы ли мы её воспроизвести? Пока нет, но мы уже близко.

Теперь у нас есть способ поделиться нашим кодом с внешним миром API. Но нам всё ещё нужно понять, что мы скажем Twilio делать с этими песнями, как обрабатывать ввод пользователя и как воспроизводить песни, выбранные пользователем.

Ваш звонящий больше не загадочный незнакомец. Теперь вы знаете, какую песню он хочет услышать, потому что он сделал выбор. Глаголы и помогут нам проинструктировать Twilio, как обработать этот выбор.

Twilio нужно собрать ввод пользователя, который затем будет передан в файл ‘handle-user-input.php’. Этот файл ‘handle-user-input.php’ запустит действие, сообщая Twilio воспроизвести песню, связанную с выбором пользователя. Прежде чем перейти к этому, мы добавим необходимый TwiML в incoming-call.xml прямо перед тем, как что-либо сообщать пользователю.

Наш обновлённый XML-файл будет выглядеть так. Вы можете увидеть изменения на строке 4 и строке 11.

Спасибо, XML. Вы отлично справились, но если мы говорим с серверами и обрабатываем непредсказуемые вводы пользователей, нам понадобится более динамичный язык программирования — PHP.

XML — это статический язык. Он может передать наше приветствие звонящему без проблем, потому что мы каждый раз передаём одно и то же приветствие. Наш пользователь не будет выбирать одну и ту же песню каждый раз, если только он не большой фанат Brand New. Тем не менее, мы не можем на это рассчитывать, поэтому переходим к PHP.

Доверьтесь простым действиям, они вынесут вес того, что мы хотим получить от нашего PHP-файла. Например, переменная, которую использует глагол , очень важна в этом файле. Так же важна переменная $digitPushed. Эта переменная содержит данные о том, что мы будем воспроизводить, а именно цифры, которые нажал пользователь.

Теперь Twilio знает, какую кнопку нажал звонящий, благодаря тому, что PHP передал эту информацию. Но Twilio не знает, что с этим делать. В следующем фрагменте кода мы подробно опишем, что Twilio должен делать с каждым из четырёх выборов песен, используя операторы switch в PHP.

Вы захотите разместить свои песни в той же директории, что и весь ваш код. Таким образом, когда Twilio будет искать mp3-файл для воспроизведения, он найдёт его в директории, которую ngrok открывает через URL. Добавьте URL переадресации ngrok с именем файла песни, которую вы хотите воспроизвести, в поля вашего PHP-файла. Мой URL переадресации ngrok — http://emophone.ngrok.io. Файл, который я хочу воспроизвести, — TakingBackSunday.mp3, поэтому я бы добавил http://emophone.ngrok.io/TakingBackSunday.mp3 в первое поле воспроизведения. Я бы сделал то же самое для других песен, которые хочу воспроизвести.

Назовите этот файл handle-user-input.php

Наши хиты в сети, давайте завершим создание EmoPhone.

Код написан. Сервер запущен. Мы съезжаем с Exit 152 и приближаемся к дому. Теперь нам нужно указать Twilio на наш URL переадресации ngrok. Вернитесь в панель управления Twilio и перейдите на вкладку «Voice». Там вы увидите поле для URL запроса. Скопируйте URL переадресации из ngrok и вставьте его в поле URL запроса для вашего номера Twilio, добавьте расширение файла, затем нажмите «Сохранить».

Ваше приложение в сети! Оно воспроизводит музыку! Оно в мире! УРА.

Перефразируя слова Адама Лаззара:

*Вы можете сказать всем своим друзьям*

*Приложить телефон к голове*

*Всё это было лишь желательным экспериментом*

*Всё это было лишь желательным экспериментом*

*(Единственное, о чём я жалею, это то, что я никогда не позволял тебе перезвонить мне)*

Теперь, когда у вас запущен и работает ваш первый IVR на базе Twilio, вы можете настроить его по своему усмотрению. Если вы не фанат эмо-музыки, создайте горячую линию с часто задаваемыми вопросами по «Времени приключений». Вы можете сделать IVR с вашими любимыми цитатами из «Офиса», вы можете пойти ещё дальше и создать IVR, который рассказывает истории о ваших любимых IVR! Возможности безграничны.

Если вы хотите расширить свои знания в области создания IVR, ознакомьтесь с несколькими постами ниже и, пожалуйста, свяжитесь со мной в Twitter. По вопросам или комментариям длиннее 140 символов пишите мне на email kyleky@twilio.com. Я весь во внимании, особенно если у вас есть идеи для новых эмо-песен, вопросы, приложения для обмена или хакерские трюки, о которых стоит узнать.

— Подробные руководства по IVR

— Создание системы IVR с Twilio и Django

— Бизнес-причины высокого уровня для создания IVR на Twilio.