Как я делился рождением сына с помощью Twilio, Dropbox и ASP.NET

**Рождение ребенка — это потрясающе, но поделиться этим событием бывает сложно**

24 января 2017 года в нашей семье появился мальчик. Когда он родился, мы испытали безграничную радость от появления нового члена семьи и хотели поделиться этим с друзьями и родственниками, которые находились за три тысячи миль от нас. Но тут возник вопрос: как лучше всего поделиться этим событием?

Кто-то наверняка спросит: «А ты слышал о Facebook или Instagram?» Но это решение не совсем подходило для моей ситуации. У нас уже есть двухлетняя дочь, которая не перестала нуждаться в нашем внимании с рождением брата. К этому добавилось резкое сокращение сна, что означало меньше энергии и желания заниматься чем-то еще. Мне нужен был способ автоматизировать процесс с минимальным вмешательством. Поэтому мы создадим API, который позволит людям отправлять SMS на номер Twilio и получать фотографии из облачного хранилища в ответ.

Мы реализуем это решение в три этапа:

— Покупка номера Twilio с возможностями SMS и MMS на сайте Twilio.com

— Создание API для отправки фотографий из облачного хранилища с помощью Visual Studio 2017, C# и последней версии пакета Twilio NuGet

— Подключение нашего API к номеру Twilio с помощью ngrok, чтобы затем поделиться номером и продолжать делать фотографии

Давайте начнем.

Чтобы приобрести номер Twilio, способный отправлять MMS-сообщения, войдите на сайт twilio.com, прокрутите страницу до раздела *Super Network* в консоли и нажмите на значок *Phone Numbers* (или на символ «+», если у вас уже есть купленные номера). Затем введите желаемый код региона, выберите опции SMS и MMS и нажмите кнопку *Purchase a Number*. Когда появятся доступные номера, выберите один из них и нажмите кнопку *Search*. Эти шаги также показаны в анимированном GIF ниже.

Обратите внимание: это работает только с номерами, зарегистрированными в США. Если вы планируете отправлять сообщения на номера за пределами США или с них, ознакомьтесь с MMS Converter от Twilio. Этот инструмент позволяет Twilio отправлять URL вместо MMS в странах с ограниченной поддержкой MMS. После покупки номера Twilio первый этап завершен!

Теперь запустим Visual Studio и создадим веб-приложение ASP.NET, ориентированное на .NET Framework, как показано в анимированном GIF ниже. Затем создадим пустой проект Web API. Если вы не знакомы с Visual Studio и хотите более подробные инструкции, ознакомьтесь с руководством *Create a Web API Project* на docs.microsoft.com.

Далее добавим пакеты Twilio и JSON.Net в наш проект. Пакет Twilio содержит вспомогательную библиотеку, предоставляющую объекты для взаимодействия с API Twilio. Пакет JSON.Net позволяет работать с JSON в коде.

В окне *Solution Explorer* щелкните правой кнопкой мыши на папке *References* и выберите в контекстном меню пункт *Manage NuGet Packages*. В открывшемся окне менеджера пакетов найдите *Twilio* и установите последнюю стабильную версию. То же самое сделайте для *Newtonsoft.Json*.

Так как этот API создается для возврата фотографий, мы настроим его на ответ на HTTP GET-запросы по адресу *http://localhost:xxxxx/api/photos*, где xxxxx — это порт, на котором запускается приложение. Для этого нам понадобится класс Controller. В окне *Solution Explorer* щелкните правой кнопкой мыши на папке *Controllers* и выберите *Add* → *Controller*. В открывшемся диалоговом окне выберите *Web API 2 Controller – Empty* и назовите контроллер *PhotosController*. Теперь в вашем проекте появится файл PhotosController.cs. Добавьте в него строку:

«`csharp

using Twilio.TwiML;

«`

Это сделает объекты из SDK Twilio доступными для использования в коде. После этого ваш код должен выглядеть следующим образом.

Теперь создадим метод, который будет отвечать на входящие SMS-сообщения. Скопируйте приведенный ниже код в класс *PhotosController*, чтобы он выглядел так:

Этот метод создает объект Twilio-ответа и использует метод *MessagingResponse.Body* для того, чтобы Twilio отвечал на входящее текстовое сообщение стандартным сообщением. Затем он преобразует наш объект в XML-строку, которую Twilio может обработать, вызывая *response.ToString()*. Наконец, он возвращает XML в качестве содержимого HTTP-ответа.

Запустив проект, вы откроете веб-браузер с вашим приложением. Перейдя по адресу *http://localhost:xxxxx/api/photos* (замените xxxxx на порт, используемый на вашем компьютере), вы должны увидеть следующее:

Вы, вероятно, смотрите на результат и думаете: «А где моя фотография?» Twilio ищет URL в тексте элемента *Media*, который должен быть дочерним элементом *Message*. Здесь нам нужно предоставить URL фотографии, которую мы хотим включить. Поскольку фотографии моего сына хранятся в Dropbox, я покажу, как получить URL для элементов, хранящихся там. Вы можете использовать любое хранилище, если элемент доступен для скачивания по общедоступному URL.

Для доступа к элементам в Dropbox нам нужно:

— Зарегистрировать аккаунт Dropbox, если у вас его еще нет

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

— Сгенерировать токен доступа для авторизации

— Загрузить несколько фотографий в новую папку приложения вручную

— Выбрать фотографию из новой папки и сгенерировать для нее общедоступный URL

Шаги 1–4 довольно простые. Чтобы подключиться к Dropbox, нужно создать приложение на портале разработчиков Dropbox. Перейдя туда и нажав кнопку *Create app* в правом верхнем углу страницы, откроется новая страница, где можно настроить приложение Dropbox. Нам нужно использовать Dropbox API, создать папку приложения и дать приложению имя, как показано на скриншоте ниже.

Заполнив эти данные и нажав кнопку *Create app* внизу страницы, мы попадем на страницу конфигурации нашего приложения Dropbox. Чтобы создать токен доступа, нажмите кнопку *Generate* в разделе OAuth2, как показано на фотографии ниже.

Прежде чем делать что-то еще, давайте загрузим несколько фотографий в нашу новую папку приложения. Самый простой способ — перейти по ссылке: https://www.dropbox.com/home/Apps/UPDATE_YOUR_APP_NAME, где нужно заменить *UPDATE_YOUR_APP_NAME* на имя вашего приложения, и загрузить туда одну-две фотографии.

Теперь перейдем к шагу 5. Вернемся в наш проект API и создадим класс *DropboxHelper*, щелкнув правой кнопкой мыши на имени проекта в окне *Solution Explorer* → *Add* → *Class*. Назовем наш класс *DropboxHelper*. Заменим весь код в этом файле следующим кодом:

Этот код содержит два метода: *GetFilePaths* возвращает список элементов, к которым у нашего приложения есть доступ; *GetFileUri* возвращает общедоступную ссылку для любого из этих элементов. Поскольку в моей папке хранятся только фотографии, я буду получать URL только для них, но это решение может работать и с другими типами файлов.

Для правильной аутентификации запросов замените строку *UPDATE_YOUR_ACCESS_TOKEN_HERE* на токен доступа, сгенерированный на втором шаге. После этого наш вспомогательный класс должен успешно возвращать URL для элементов в папке приложения Dropbox.

Чтобы подключить наш API к *DropboxHelper*, скопируем приведенный ниже код в класс *PhotosController*. Разместим его под методом *Get*. Метод *GetPhotoUrl* подключается к Dropbox, получает все элементы и затем создает временный общедоступный URL для случайно выбранного элемента. В завершение обновим метод *Get*, заменив создание объекта *Message* следующим кодом:

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

Второй этап завершен!

Чтобы Twilio мог обращаться к нашему API, мы воспользуемся одним из моих любимых инструментов — ngrok, чтобы сделать наше локально работающее приложение доступным из интернета. Если он у вас еще не установлен, скачайте его здесь. После загрузки откройте командную строку и перейдите в директорию, куда вы сохранили ngrok. Затем выполните следующую команду:

«`

ngrok http -host-header=»localhost:xxxxx» xxxxx

«`

где xxxxx — это номер порта из предыдущего шага.

Запустив ngrok, перейдем на страницу twilio.com/console/phone-numbers, откроем недавно купленный номер телефона и изменим конфигурацию URL для входящих SMS-сообщений так, чтобы он использовал HTTP GET-запрос, направленный на *http://YOUR_NGROK_URL/api/photos*. Когда я внес эти изменения в свой код и отправил сообщение на номер Twilio, я получил:

**Достижение разблокировано!**

Подведем итоги. Мы создали API, который отвечает на входящие текстовые сообщения на номер Twilio фотографиями из Dropbox. Этот API можно улучшить: например, брать данные из другого источника, предотвращать отправку дублирующихся фотографий или даже создать веб-сайт для управления API. Если вы хотите скачать готовый код, возьмите его на GitHub. Есть вопросы по коду? Зарегистрируйте issue или оставьте комментарий ниже.

По любым другим вопросам пишите мне в Twitter @CoreyLWeathers или на почту corey@twilio.com. С нетерпением жду, что вы создадите. А пока пора присоединиться к расширившейся семье.