Создание и прием телефонных звонков с помощью .Net MVC

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

Однако на хакатонах иногда люди просто хотят как можно скорее завершить реализацию. Это может означать разницу между претензией на приз от спонсора или нет.

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

Сегодня я покажу вам, как создать приложение для совершения и приема телефонных звонков с помощью .Net MVC 5 и Twilio.

— Visual Studio и установленный .Net MVC 5.

— Учетная запись Twilio и номер телефона Twilio – Зарегистрируйтесь бесплатно!

— Ngrok для открытия вашего локального окружения для Twilio

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

В Visual Studio создайте новое приложение *ASP .Net Web Application* и назовите его *TwilioMakeAndReceiveCalls*.

На следующем экране выберите шаблон *Empty* и отметьте галочкой MVC.

Нажмите *OK*, и будет создано пустое приложение.

Пора добавить контроллер, чтобы мы могли проверить, работает ли наше приложение так, как ожидается. Щелкните правой кнопкой мыши на каталоге *Controllers* в *Solution Explorer* Visual Studio и выберите *Add* > *Controller*. Выберите *MVC 5 Controller – Empty* и нажмите *Add*. Назовите его *HomeController*.

В папке *Views/Home* создайте новое представление, нажав *Add* > *View*, и назовите его *Index*.

Когда вы запустите приложение, оно откроет новую вкладку браузера, и приложение будет работать под определенным портом. Запишите этот порт, так как мы будем использовать его в качестве параметра в ngrok, чтобы предоставить Twilio доступ к нашей локальной среде.

Мой коллега Девин также написал очень подробный пост, объясняющий, как настроить ваше .Net приложение для работы с ngrok. Вы также можете развернуть его на размещенном облачном сервисе, таком как Azure, если не хотите следовать этим шагам.

После завершения настройки ngrok вы сможете туннелировать ваше приложение, выполнив:

«`bash

ngrok http

«`

Это даст вам URL-адрес, который выглядит следующим образом:

«`

https://.ngrok.io

«`

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

Получите телефонный номер Twilio, если у вас его еще нет. Следующий анимированный GIF-файл показывает процесс приобретения телефонного номера, если он вам нужен. Убедитесь, что вы выбрали страну, для которой хотите получить этот номер.

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

Измените *Request URL* в разделе *Voice*, чтобы он указывал на предоставленный вам URL ngrok и на конечную точку *ReceiveCall*, которую мы создадим далее.

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

Прежде чем вносить изменения в наше приложение, убедимся, что библиотека Twilio установлена. Запустите следующее из *Package Manager Console*:

«`powershell

Install-Package Twilio

«`

Это позаботится обо всех зависимостях, которые нам понадобятся на протяжении всего проекта.

Создайте новый файл с именем *Settings.cs* в каталоге *Controllers* и добавьте к нему следующий код.

«`csharp

public static class Settings

{

public static string AccountSid = «ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxx»;

public static string AuthToken = «your_auth_token»;

}

«`

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

Откройте *Controllers/HomeController.cs* и измените класс, чтобы он наследовался от *TwilioController* вместо *Controller*.

Добавьте к нему следующий конечный пункт.

«`csharp

using Twilio.TwiML;

public class HomeController : TwilioController

{

public TwiMLResult ReceiveCall()

{

var response = new TwiMLResponse();

response.Say(«Hello from Twilio!»);

return TwiML(response);

}

}

«`

Именно так Twilio увидит это, когда кто-то позвонит на ваш номер телефона Twilio.

Позвоните на свой номер Twilio с другого телефона. Ваш собственный номер должен зазвонить, и вы будете знать, что все работает правильно.

Откройте *Views/Home/Index.cshtml* и добавьте форму внутри тега body.

«`html

Call

«`

Вернитесь к *ControllersHomeController.cs* и добавьте новый конечный пункт под названием *MakeCall*. Этот конечный пункт будет действием формы, которую мы только что создали в нашем представлении.

«`csharp

public TwiMLResult MakeCall(string phoneNumber)

{

var response = new TwiMLResponse();

response.Dial(phoneNumber, new { callerId = «your_twilio_phone_number» });

return TwiML(response);

}

«`

Запустите приложение, и вы должны увидеть экран с одним полем ввода и кнопкой, где вы можете ввести номер телефона.

Когда вы введете номер телефона и отправите форму, конечная точка *MakeCall* обработает этот запрос и инициирует телефонный звонок с использованием Twilio Rest API на введенный вами номер.

Как только звонок будет принят, человек на другом конце телефона услышит воспроизводимую музыку. Это потому, что URL, переданный в качестве третьего параметра, содержит ссылку на MP3-файл.

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

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

Отсюда мы могли бы использовать глагол Gather для создания IVR и глагол Record для хранения всех наших звонков. Это дало бы нам доступ к нашему собственному колл-центру.

Я был бы рад увидеть, что у вас получится. Свяжитесь со мной в Twitter @marcos_placona, по электронной почте marcos@twilio.com или MarcosPlacona на G, чтобы рассказать мне об этом.