SMS и MMS с фотофильтрами с помощью Twilio + Aviary

*Следующий материал — гостевой пост Ари Фукса, евангелиста разработчиков в Aviary.*

В мире более 1,1 миллиарда пользователей смартфонов, и 91% из них используют свои устройства для того, чтобы сделать хотя бы одну фотографию в месяц. В 2015 году более 50% всех сделанных фотографий будут сделаны на смартфоны.

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

Представляем Aviary.

Aviary — это простой, но мощный движок редактирования фотографий, которым ежемесячно пользуются 70 миллионов человек по всему миру. 20 миллионов используют приложение «Photo Editor by Aviary» для iOS или Android, а еще 50 миллионов используют его через 6000 мобильных приложений и веб-сайтов, которые он обеспечивает. Стандартное предложение Aviary — настраиваемый виджет с надежным набором инструментов, включающим все, от простой обрезки и поворота до мощных функций, таких как яркость, насыщенность, отбеливание зубов и удаление эффекта красных глаз, а также всегда популярные фильтры, стикеры и наложения рамок. Мобильные SDK Aviary полностью нативные, все правки выполняются локально на устройстве. Веб-виджет написан на Javascript, а рендеринг изображений размером до 1 мегапикселя происходит прямо в браузере. Для редактирования фотографий высокого разрешения в Интернете виджет взаимодействует с Aviary Render Farm для воспроизведения правок пользователя на фотографии полного разрешения.

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

Теперь вы, вероятно, задаетесь вопросом, как API связи, такой как Twilio, может взаимодействовать с SDK для редактирования фотографий, таким как Aviary. Для начала, вы, вероятно, слышали, что Twilio недавно добавил поддержку MMS. Это означает, что вы теперь можете отправлять фотографии по SMS прямо на конечную точку сервера. Как я уже упоминал, у Aviary есть серверная Render Farm для редактирования изображений полного разрешения в Интернете. До недавнего времени мы использовали эту службу исключительно для дополнения веб-виджета.

В этом руководстве я покажу вам, как полностью обойти веб-виджет Aviary и как напрямую взаимодействовать с нашей конечной точкой рендеринга на стороне сервера для программного редактирования фотографий. В рамках этого руководства мы создадим простую конечную точку сервера, которая принимает URL-адрес фотографии через SMS и отвечает URL-адресом отредактированной фотографии. Затем мы расширим это приложение для приема и ответа на сообщения MMS.

Для начала давайте взглянем на то, как веб-виджет Aviary взаимодействует с конечной точкой рендеринга.

По мере того, как пользователи редактируют свои фотографии в веб-виджете, каждый раз, когда они «применяют» операцию, она сохраняется в JSON «actionlist». Этот actionlist может быть экспортирован с помощью метода `getActionList()` объекта веб-виджета Aviary (см. полную веб-документацию для более подробной информации). Когда вызывается метод `saveHiRes()`, этот actionlist отправляется в конечную точку сервера (/render) вместе с URL-адресом, указывающим на фотографию высокого разрешения, предоставленную разработчиком при запуске редактора. Затем редактор опрашивает вторую конечную точку (/render/{jobId}), пока фотография не будет полностью отрисована. В этот момент вызывается обратный вызов `onSaveHiRes(id, url)`, и разработчик получает доступ к фотографии полного разрешения.

То, что вас действительно интересует здесь, — это `getActionList()`. Вы можете использовать его для создания готового списка операций для применения к фотографии.

Теперь давайте глубже рассмотрим эти две конечные точки и посмотрим, как мы можем взаимодействовать с ними напрямую, используя обертку Aviary для Node.js.

Для начала, каждый запрос к серверной части API Aviary должен сопровождаться подписью, которая генерируется с использованием вашего секретного ключа, метки времени и уникального соли. Генерация подписи довольно проста, и обертка Node.js полностью скрывает ее для вас. Вам по-прежнему потребуется предоставить свой apikey и секрет, которые вы можете получить, создав учетную запись на aviary.com/developers и создав новое веб-приложение. Ваш ключ должен быть в белом списке, поэтому, если вы хотите использовать эту функциональность в своем собственном приложении, вам нужно связаться с нами по адресу partners+twilio@aviary.com.

Теперь, когда у вас есть свой API-ключ в белом списке, давайте приступим к редактированию этой фотографии.

Как я упомянул выше в общем описании Aviary, каждая операция рендеринга требует actionlist, сгенерированного редактором. Вы можете генерировать свои собственные actionlists, запуская редактор, выполняя несколько операций в пользовательском интерфейсе и программно вызывая метод `editor.getActionList()`. Чтобы немного упростить задачу, я собрал список actionlists, которые вы можете использовать в своем приложении здесь.

Есть одно предостережение. Для любой операции с изображением, которая зависит от положения пикселя (то есть любые инструменты рисования, обрезка и т. д.), сервер выполнит простые расчеты для масштабирования этого положения для фотографии полного разрешения. Однако, если изображение, к которому применяется actionlist, имеет другое соотношение сторон, чем изображение, использованное для создания actionlist, положение пикселя будет либо некорректным, либо вообще не будет существовать. Чтобы избежать каких-либо проблем, рекомендуется создавать только actionlists, которые применяют операции ко всему фото. К ним относятся любые эффекты (или фильтры), автокоррекция или любые инструменты ползунков, такие как яркость, насыщенность, контрастность и теплота.

Теперь, когда у вас есть actionlist, давайте протестируем его с помощью простой интеграции Node.

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

Когда вы вызываете `aviaryClient.renderAndWait()`, обертка выполняет первоначальный вызов API `/render`, который возвращает `jobId. Затем метод опрашивает `/render/{jobid}` с интервалом в 1 секунду, пока не будет возвращен статус `JobComplete` вместе с URL-адресом, указывающим на окончательное отрисованное изображение — после чего ваш обратный вызов будет вызван с новым URL-адресом.

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

Тада! Когда вы запустите это, вы должны увидеть URL отрисованного изображения в своем терминале.

Теперь давайте расширим это с помощью простого сервера, который может принимать и отвечать на SMS от Twilio.

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

Когда вы покупаете номер телефона у Twilio, вы можете установить URL-адрес запроса на сообщение (Messaging Request URL). Любое SMS-сообщение на этот номер будет создавать POST-запрос на этот URL с сообщением в теле POST-запроса. Когда вы получаете этот запрос, вы можете ответить TwiML-форматированным ответом, чтобы отправить SMS-сообщение обратно отправителю. Давайте посмотрим, как это выглядит с простым сервером expressjs.

**Шаг 1: Создайте Express-сервер для ответа на SMS**

Приведенный выше пример кода довольно прост. Сначала мы создаем сервер express и используем промежуточное ПО `bodyParser()` для извлечения тела SMS из данных POST. Затем мы создаем обработчик POST для запросов к конечной точке `/incoming`. Прежде чем что-либо делать с запросом, мы проверяем, действительно ли POST-запрос пришел от Twilio, используя удобный метод `validateExpressRequest` из библиотеки Twilio для Node.js. Наконец, мы выводим тело запроса в консоль, чтобы убедиться, что все работает, и отвечаем SMS-сообщением «Спасибо за сообщение!». Вы можете узнать больше о TwiML здесь, но для простоты мы снова будем использовать библиотеку Twilio для Node.js для генерации соответствующего ответа.

Хорошо! Это было не так уж сложно, правда? Теперь давайте свяжем это с модулем Aviary для Node.js и добавим фильтры для фотографий.

Сначала давайте посмотрим на эти два включенных модуля.

Если вы посмотрите на `actionList.json`, вы найдете несколько готовых actionlists, сгенерированных методом, описанным в разделе ActionList выше. Мы также создали объект `aviaryClient`, который будем использовать для взаимодействия с API Aviary.

Теперь давайте посмотрим, что мы сделали в конечной точке `/incoming`.

Первое, что мы делаем, — это извлекаем любые URL-адреса из тела SMS. Затем, если URL найден, мы вызываем `aviaryClient.renderAndWait()`, передавая указанный URL, готовый actionlist из объекта `actionLists` и обратный вызов для завершения задания рендеринга. Когда вызывается обратный вызов рендеринга, мы отвечаем на исходное SMS-сообщение, содержащее URL отрисованного изображения.

И это все! У вас есть рабочий сервер Node, который может принимать входящие SMS-сообщения, содержащие URL изображения, и отвечать изображением, отрисованным Aviary.

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

Расширение этого приложения для поддержки MMS очень просто. Благодаря новой поддержке MMS от Twilio, определенные номера телефонов Twilio теперь могут принимать и отправлять изображения вместе с текстом. Twilio облегчает нам жизнь, размещая входящие изображения на своем собственном CDN. Если входящее сообщение POST содержит какие-либо изображения, параметр `NumMedia` в теле сообщения будет содержать значение > 0, и изображения можно будет получить с помощью параметра `MediaUrl#` (где # — индекс URL медиафайла). Когда вы хотите ответить изображением в исходящем MMS (опять же, только для поддерживаемых номеров), вы можете включить вложенный тег `` в тег `` следующим образом:

Как вы видите, вместо того, чтобы извлекать URL-адрес из текста сообщения, мы сначала проверяем параметр `NumMedia` и получаем URL-адрес из `MediaUrl1`, когда он доступен.

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

Поздравляем! Теперь у вас есть рабочее приложение Node, которое может прослушивать SMS и MMS сообщения и отвечать на них.

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

`export AVIARY_API_KEY=xxxx`

`export AVIARY_API_SECRET=yyyy`

`export TWILIO_AUTH_TOKEN=zzz`

Вы можете получить свой ключ и секрет Aviary, зарегистрировав учетную запись на http://www.aviary.com/developers и создав веб-приложение. Заполните эту форму, и кто-нибудь из Aviary добавит ваш ключ в белый список.

Полный рабочий пример этого приложения вы можете найти на Github.

Если у вас есть вопросы или комментарии, пожалуйста, напишите @arifuchs или отправьте электронное письмо на ari@aviary.com!

*Фото предоставлено The Next Web*