Создайте семейную фоторамку с помощью Twilio, AWS и Electric Objects

Джед Шмидт — разработчик, отец, музыкант и просто крутой парень, работающий в Нью-Йорке. Он удостоил блог Twilio своим присутствием и представил замечательный туториал по созданию фоторамки на основе Twilio MMS с использованием Twilio, AWS и Electric Objects. Вы можете посмотреть, как он создаёт всё это в видеоуроке ниже, и следовать за ним по подробным пошаговым инструкциям. Вскоре у вас будет работающая фотоколлаж на основе кода, готовая в кратчайшие сроки.

Предоставляем слово Джеду.

#### Использование Twilio, AWS и Electric Objects для создания семейной фоторамки на основе MMS.

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

И, конечно же, мои родители активно требуют фотографии своего нового внука. Обычно я публиковал подобные снимки на Facebook, но, побывав на месте родителей, которые слишком много делятся, я захотел что-то менее публичное. Конечно, я мог бы разобраться с постоянно меняющимися настройками приватности Facebook, чтобы фотографии видели только мои родители, но так как мы уже общались через iMessage, я решил отправлять им фотографии туда.

Это был самый простой путь, но интерфейс iMessage не очень удобен для просмотра последних фотографий. Поэтому я решил проявить креативность и **превратить мой цифровой дисплей Electric Objects в совместную семейную фоторамку**, чтобы мои родители могли видеть новые фотографии в реальном времени прямо на кухне. Раньше я использовал цифровые фоторамки вроде Ceiva, и они были неплохи, но ничто не сравнится с элегантным дизайном дисплея Electric Objects и возможностью контролировать загрузку и отображение изображений. А если вам надоедят семейные фотографии, вы всегда можете использовать его для показа отличных пиксельных работ Дженн Шиффер или последовать примеру Тома МакРайта и создать собственное анимированное искусство.

— Я создал новый номер телефона в Twilio и добавил его в существующую группу iMessage, которую моя семья использует для общения.

— Twilio отправляет все сообщения, поступающие на этот номер, в функцию Lambda через API Gateway.

— Функция копирует все изображения из MMS в корзину S3, затем извлекает последние изображения из корзины для создания коллажа, который затем сохраняется обратно в корзину.

— После этого функция даёт команду Electric Objects обновить содержимое дисплея моих родителей, указав URL коллажа.

От моего телефона до их дисплея весь процесс занимает около 15 секунд, приятным побочным эффектом чего является резервное копирование всех фотографий в корзине S3.

#### Создание собственной совместной семейной фоторамки

В этом посте я покажу, как создать собственную совместную семейную фоторамку. Для этого вам понадобятся:

— Цифровой дисплей Electric Objects. Цена рамки на Amazon может сильно колебаться, но часто её можно найти около 250 долларов.

— Аккаунт Twilio с пополненным балансом.

— Аккаунт Amazon Web Services.

Как только всё это будет готово, вам нужно будет:

— ознакомиться с исходным кодом (по желанию, если интересно!), а затем

— следовать инструкциям по настройке AWS и Twilio.

Если у вас возникнут трудности с настройкой рамки, не стесняйтесь обращаться за помощью в комментариях или написать нам в Twitter!

Это пошаговое руководство по коду AWS Lambda, используемому для создания семейной фоторамки на основе MMS, описанной в этом посте. Вам не обязательно разбираться в этом коде для создания собственной рамки, но всегда полезно понимать код, который вы запускаете. Этот документ был создан на основе исходного кода с помощью docco.

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

Нам нужно будет парсить строки запросов, делать системные вызовы и вызовы процессов дружественными к промисам, получать изображения MMS из Twilio по HTTPS, сохранять и извлекать изображения из S3, изменять размер и составлять изображения с помощью ImageMagick, вырезать наиболее интересный квадрат из изображения и, наконец, обновлять нашу рамку.

AWS Lambda поставляется с ImageMagick, поэтому мы будем использовать его.

Мы будем использовать один и тот же клиент для всех вызовов S3.

Сохраним имя нашей рамки глобально для удобства доступа.

Теперь определим макет коллажа.

Так как соотношение сторон рамки EO1 составляет 9:16, мы определим макет как набор из 16 квадратов уменьшающегося размера от 6×6 до 1×1 и разместим их так, чтобы заполнить каждый пиксель, как показано на изображении ниже. Большое спасибо Никки Силянтенг за помощь в создании макета, который приятен для глаз!

Теперь экспортируем наш обработчик — функцию, которая вызывается при каждом запуске функции AWS Lambda. Мы получим имя рамки из имени функции, будем обрабатывать все отклонённые промисы глобально для упрощения кода, а затем передадим сообщение нашему слушателю onmessage.

Когда приходит сообщение, мы парсим его на изображения. Если изображений нет, мы завершаем выполнение раньше, в противном случае обрабатываем каждое изображение и создаём коллаж.

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

Для каждого входящего изображения нам нужно получить его из Twilio, обрезать до квадрата и загрузить в нашу корзину S3.

Получим изображение в виде буфера из URL Twilio.

Обрежем наиболее интересный квадрат из изображения, изменим его размер до 1080 пикселей (ширина дисплея) и обновим тело изображения.

Загрузим изображение в S3.

После обработки всех входящих изображений нам нужно будет получить список последних изображений, загрузить их, составить коллаж, опубликовать его в S3 и сообщить рамке, что коллаж обновлён.

Получим ключи 16 последних изображений в нашей корзине S3.

Теперь загрузим все необходимые изображения в /tmp/images, создав директорию, если она ещё не существует.

Создадим коллаж с помощью ImageMagick и сохраним его в /tmp. По умолчанию будем использовать чёрный фон для отсутствующих изображений и установим размеры 1080p в портретной ориентации, чтобы они соответствовали размерам рамки.

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

Для обновления рамки нам нужно будет получить учётные данные из S3 и использовать их для входа на сайт Electric Objects, а затем с помощью их страницы set_url указать рамке URL коллажа.

В целом настройка должна занять около десяти минут. Настройка разделена на четыре части:

— Загрузите код Lambda и информацию для входа в Electric Objects,

— настройте корзину S3, роль IAM, функцию Lambda и конечную точку API Gateway в AWS,

— настройте номер телефона Twilio и укажите его на вашу конечную точку API Gateway,

— отправьте MMS на ваш номер, чтобы проверить его работу.

Вы можете следовать этому видео для выполнения шагов или воспользоваться письменными инструкциями ниже:

#### Загрузка кода Lambda

Загрузите код Lambda с GitHub и сохраните его в любом месте на вашем компьютере, где вы сможете его найти.

#### Загрузка и редактирование JSON-файла для входа в Electric Objects

— Загрузите JSON-файл для входа в Electric Objects с GitHub и сохраните его в том же месте, что и выше.

— Откройте этот файл в вашем любимом текстовом редакторе, замените YOUR-ELECTRIC-OBJECTS-EMAIL-ADDRESS и YOUR-ELECTRIC-OBJECTS-PASSWORD на ваш адрес электронной почты и пароль от Electric Objects, затем сохраните изменения.

Здесь вы будете хранить настройки аккаунта EO1, изображения, поступающие из Twilio, и составной коллаж для отправки на дисплей Electric Objects.

— В верхней навигационной панели консоли AWS выберите **Services**, затем **All AWS Services**, затем **S3**.

— Нажмите кнопку **Create bucket**.

— Для **Bucket Name** укажите имя вашего проекта. У меня это jed-family-frame.

— Для **Region** выберите **US Standard**.

— Нажмите кнопку **Create**.

— Нажмите кнопку **Upload**.

— Нажмите кнопку **Add Files**.

— Выберите файл eo-config.json, загруженный на предыдущем шаге.

— Нажмите кнопку **Start Upload**.

— Ваша корзина готова.

Это даст вашей функции Lambda необходимые разрешения для чтения и записи в корзину S3.

— В верхней навигационной панели консоли AWS выберите **Services**, затем **All AWS Services**, затем **IAM**.

— В левой боковой панели нажмите кнопку **Roles**.

— Нажмите кнопку **Create New Role**.

— Для **Role Name** укажите то же имя вашего проекта, что и для корзины S3.

— Нажмите кнопку **Select** для **AWS Lambda** в разделе **AWS Service Roles**.

— Установите флажки рядом с **AmazonS3FullAccess** и **CloudWatchLogsFullAccess**.

— Нажмите кнопку **Next Step**.

— Нажмите кнопку **Create Role**.

— Ваша роль готова.

— В верхней навигационной панели консоли AWS выберите **Services**, затем **All AWS Services**, затем **Lambda**.

— Нажмите кнопку **Skip**.

— Нажмите кнопку **Next**.

— Для **Name** укажите то же имя вашего проекта, что и для корзины S3.

— Для **Runtime** выберите **Node.js 4.3**.

— Для **Code entry type** выберите **Upload a .ZIP file**.

— Нажмите кнопку **Upload** и выберите файл lambda.zip, загруженный ранее.

— Для **Handler** укажите index.handler.

— Для **Role** выберите **Choose an existing role**.

— Для **Existing role** выберите имя созданной вами роли.

— Для **Memory (MB)** укажите 1024.

— Для **Timeout** укажите 1 мин.

— Для **VPC** выберите **No VPC**.

— Нажмите кнопку **Next**.

— Нажмите кнопку **Create function**.

— Ваша функция Lambda готова.

— В верхней навигационной панели консоли AWS выберите **Services**, затем **All AWS Services**, затем **API Gateway**.

— Нажмите кнопку **Get Started**.

— Нажмите кнопку **OK**.

— Выберите переключатель **New API**.

— Для **API name** укажите то же имя вашего проекта, что и для корзины S3.

— Нажмите кнопку **Create API**.

— Нажмите кнопку **Actions…** и затем выберите **Create Method**.

— В выпадающем списке выберите **POST** и затем нажмите кнопку с галочкой.

— Для **Integration type** выберите переключатель **Lambda Function**.

— Для **Lambda Region** выберите регион вашей функции, это должен быть **us-east-1**.

— Для **Lambda Function** укажите первые символы имени вашей функции (то же имя, что и у вашего проекта), затем выберите соответствующее имя функции.

— Нажмите кнопку **Save**.

— Нажмите **OK**.

— Нажмите **Integration Request**.

— В разделе **Body Mapping Templates** нажмите кнопку **Add mapping template**.

— Для **Content-Type** укажите application/x-www-form-urlencoded.

— Нажмите кнопку с галочкой.

— Нажмите кнопку **Yes, secure this integration**.

— Для **application/x-www-form-urlencoded** укажите $input.json(‘$’).

— Нажмите кнопку **Save**.

— Нажмите кнопку **← Method Execution**, чтобы вернуться.

— Нажмите **Integration Response**.

— В разделе **Body Mapping Templates** нажмите кнопку **–** рядом с **application/json**.

— Нажмите кнопку **Delete**.

— Нажмите кнопку **Add mapping template**.

— Для **Content-Type** укажите application/xml.

— Нажмите кнопку с галочкой.

— Для **application/xml** укажите .

— Нажмите кнопку **Save**.

— Нажмите кнопку **← Method Execution**, чтобы вернуться.

— Нажмите **Method Response**.

— В разделе **Response Models for 200** нажмите кнопку **Add response model**.

— Для **Content-Type** укажите application/xml.

— Для **Model** выберите Empty.

— Нажмите кнопку с галочкой.

— Нажмите кнопку **X** рядом с **application/json**, чтобы удалить этот тип содержимого.

— Нажмите кнопку **Actions…** и выберите **Deploy API**.

— Для **Deployment stage** выберите **[New Stage]**.

— Для **Stage name** укажите prod.

— Нажмите кнопку **Deploy**.

— Запомните URL, указанный вверху в **Invoke URL**. Это URL, который вы будете использовать для вебхука Twilio.

— Ваша конечная точка готова.

— Откройте консоль Twilio для телефонных номеров.

— Нажмите кнопку **+**.

— Для **COUNTRY** выберите **United States**.

— Для **CAPABILITIES** выберите **MMS**.

— Нажмите кнопку **Search**.

— Выберите номер, который хотите, и нажмите кнопку **Buy**.

— Нажмите кнопку **Buy This Number**.

— Нажмите кнопку **Setup number**.

— В разделе **Messaging**, для **A MESSAGE COMES IN**,

— Выберите **Webhook**.

— Укажите invoke URL вашей конечной точки API Gateway. Он должен выглядеть как https://**********.execute-api.us-east-1.amazonaws.com/prod.

— Выберите **HTTP POST**.

— Нажмите кнопку **Save**.

— Ваш номер телефона готов.

После завершения настройки возьмите телефон и отправьте фотографию на ваш номер Twilio. Ваша рамка должна обновиться новой фотографией примерно через 15 секунд. Если этого не произошло:

— Проверьте логи программируемых SMS в консоли Twilio, чтобы убедиться, что от API Gateway был получен соответствующий ответ.

— Проверьте логи AWS CloudWatch для вашей функции Lambda, чтобы убедиться, что функция завершилась успешно.

Также, чтобы проверить, обновился ли ваш коллаж, не проверяя непосредственно дисплей Electric Objects, просто откройте изображение коллажа из вашей корзины S3 в консоли AWS S3.