Содержит Contentful, PWA и несколько бессерверных функций
Universal Records обратились ко мне с просьбой помочь с годичной кампанией, которую они развернули в поддержку 60-летия Motown. Если вы не знакомы, «Мотаун» - легендарный дом многих мега-звезд соула и поп-музыки 1960-х годов, в том числе Дайаны Росс, Стиви Уандер, Марвина Гэя, The Supremes, Смоки Робинсона и многих других. Их первоначальная штаб-квартира в Детройте буквально называлась «Хитсвилль США». Как вы понимаете, лейбл с такой богатой историей имеет невероятное количество контента, который нужно обработать, но мне было поручено найти простой цифровой путь, который мы могли бы использовать и развивать. Изучая результаты, я зацепился за документ, наполненный повседневными фактами об истории Motown. Спустя 60 лет было достаточно интересных моментов, чтобы заполнить календарный год. Дважды. И кто-то из команды Universal проанализировал и резюмировал каждую историю в одно или два предложения для социальных сетей.
Когда мы думаем о создании действительно масштабируемой кампании в Интернете, которая должна длиться целый год, мы должны учитывать простой фундамент, на котором зиждется кампания. Невозможно удержать внимание Интернета дольше нескольких минут, не говоря уже о году. Однако эти ежедневные истории дают Motown возможность внедрить интересный факт в свои каналы связи и вернуть заинтересованных пользователей в экосистему. Опираясь на этот прочный фундамент, Motown может выбрать (и они уже / будут) проводить более целевые кампании, посвященные важным моментам из своего прошлого.
В этом тематическом исследовании я расскажу, как мы превратили документ, полный текстовых историй, в движок, который поддерживает некоторые из наших цифровых стратегий, включая motown.today и готовящееся к выпуску приложение Alexa.
Управление контентом
Документ, полный историй, вдохновляет, но не очень полезен. Наша первая задача заключалась в том, чтобы поместить истории в систему, которая позволила бы клиенту управлять контентом, а мне (разработчику) создавать вокруг них цифровой опыт. Я мало знал о революции Headless CMS из-за моей недавней работы над современными приложениями Javascript. В общем, Headless CMS - это система управления контентом, которая обычно размещается на стороннем сервере и создает репозиторий контента, к которому разработчик может получить доступ через API. Звучит многообещающе. Один из лучших примеров такого рода решений - Contentful. Теперь я не могу вспомнить, как я узнал о Contentful, но помню, что именно их тематическое исследование Британского музея убедило меня попробовать это здесь. Во многом наш проект Motown был похож на музейную коллекцию. Набор записей с обширными ассоциациями, которые помогают дать дополнительный контекст.
Вместо того, чтобы переписывать отличные документы Contentful Начало работы, я просто расскажу, как мы подошли к внедрению наших историй в систему. Для этого мы просто создали новую модель контента под названием Story и дали ей два поля: Headline и Date. В поле заголовка хранится сама история, а в поле даты указывается, когда именно она произошла в истории Motown. Вместо того, чтобы заставлять кого-то повторно вводить каждую из этих историй в Contentful, я написал базовый скрипт, который импортировал CSV историй прямо в нашу систему с помощью Contentful API. Всего за несколько мгновений все наши истории были в системе, которой клиент мог управлять и которую мог использовать любой разработчик через Contentful Delivery API.
Присмотревшись к историям, я решил, что создание ассоциаций для каждой модели данных позволит нам добавить более богатый контекст к тем историям, которыми мы делились. Например, если рассказ о песне, не было бы неплохо предоставить на эту песню ссылку на Spotify и Apple Music? Для этого мы создали новую модель контента под названием «Песня» и взяли ее из истории. Первоначально я думал, что просто добавлю два поля URL-адреса в модель песни для Spotify и Apple Music. Однако я беспокоился, что это потребует от клиента кропотливого поиска URL-адресов песен из обоих сервисов, и я догадывался, что Contentful может работать лучше. Как оказалось, мне удалось расширить пользовательский интерфейс Contentful, чтобы встроить поиск в Apple Music и Spotify прямо в интерфейс Contentful, что значительно повысило продуктивность клиента. Кроме того, вместо того, чтобы хранить эти песни в виде URL-адресов, мы создали стандартизированный пакет JSON, который расширил наши знания о каждой песне из каждой службы.
{
artist: "The Supremes"
artwork: ".../{w}x{h}bb.jpeg"
id: "5277758"
isrc: "USMO10300720"
name: "The Happening"
preview: ".../mzm.vjtspxnb.aac.p.m4a"
url: ".../5277794"
}
Когда мы начали разрабатывать решения для нашего контента, модель расширилась за счет включения артистов, плейлистов и даже изображений. Но мы добавляли то, что нам было нужно, только тогда, когда нам это было нужно. Contentful сделал эту динамическую эволюцию безболезненной. Довольный нашей инфраструктурой контента, пришло время заставить ее работать.
Создание веб-приложения
Мы с клиентом согласились, что основным началом использования этого контента будет создание простого веб-приложения, в котором всплывают истории из прошлого Motown, происшедшего в этот день. Приложение timehop , если хотите. В моем текущем веб-приложении используются Vue.js и Nuxt.js. Nuxt имеет отличный метод asyncData, который можно легко интегрировать с Contentful, чтобы использовать наши истории.
Когда у вас есть легкодоступные истории, все сводится к принятию решения о пользовательском опыте. Я большой сторонник использования известных компонентов интерфейса, чтобы пользователь чувствовал себя комфортно, когда они приходят. Несмотря на то, что его чрезмерное использование в приложениях презиралось, полноэкранный UX-интерфейс с автоматическим воспроизведением в Instagram казался надежной отправной точкой.
Каждой истории будет предоставлена собственная панель, а в верхней части экрана анимированная панель навигации будет отображать четкую продолжительность времени между историями. Пользователь может перемещаться между историями, просто касаясь экрана слева или справа. Если ей нужно больше времени, чтобы прочитать конкретную историю, ей просто нужно прикоснуться к экрану, чтобы приостановить автоматический прогресс. В итоге я использовал Anime.js и Hammer.js, чтобы осуществить это.
Благодаря всем ассоциациям, которые мы создали в нашей модели контента, каждая панель истории также включает ссылки для потоковой передачи песни и публикации истории в виде изображения (подробнее об этом позже). Я даже разработал функцию, которая автоматически воспроизводит клипы каждой песни, но это означало бы сломать главный грех Интернета, поэтому я выключил его.
Мы также хотели добавить возможность пользователям переходить в любой день календарного года, поэтому я разработал очень простой календарь на основе изображения, которое мне прислал клиент, а затем подключил его к приложению для фильтрации по датам.
Обожаю это приложение. Я потратил так много времени на настройку небольших элементов пользовательского интерфейса и анимации, чтобы он отлично смотрелся как на рабочем столе, так и на ладони. Я должен сказать, что есть что-то действительно интересное в полностью настраиваемых фирменных историях, и я, вероятно, вернусь к этому снова в будущем.
Создание изображений
Последнее, что мы добавили в возможности веб-приложения, - это генератор изображений в социальных сетях, чтобы истории можно было легко публиковать как фирменные изображения в Instagram, Twitter и Facebook. Изначально я создавал эти изображения с помощью приятной бессерверной функции, но затем решил просто использовать холст HTML5, чтобы сэкономить на затратах на AWS. В прошлом я уже несколько раз рассказывал о создании изображений, но мне очень нравится, как я справился с этим решением: создание динамически сгенерированного изображения в качестве компонента Vue.
Одна из основных проблем заключается в том, что холст HTML5 плохо справляется (вообще) с переносом текста, поэтому я опирался на библиотеку 2D-холста Konva, чтобы решить эту проблему. Компонент Vue включает в свой шаблон один тег изображения. Источник этого изображения работает с помощью динамического метода, который использует Konva для создания нового изображения с использованием истории и предоставленного набора размеров. Композиция состоит из фона, текста заголовка, текста нижнего колонтитула (и логотипа), а затем самой истории. Отличный метод Konva Текст упрощает работу с обернутым текстом и идеальными полями. Наконец, мы возвращаем изображение как URL-адрес данных, используя функцию Konva toDataURL. Сначала я разработал базовую версию решения на Codepen, так что не стесняйтесь проверить это, если вам интересно, как выглядит код.
Расширение до Alexa за считанные минуты
Довольный нашим решением для веб-приложений, клиент поинтересовался, сможем ли мы использовать Contentful для создания приложения для Alexa. А теперь давайте подумаем об этом на секунду. Ни клиент, ни я раньше не использовали контентную инфраструктуру. Ни один из нас не создавал приложение Alexa. Однако клиент сразу понял, что теперь, когда их контент находится в Contentful, создание чего-то вроде приложения Alexa станет возможным, верно? Мало того, что клиент уже доволен своей системой управления контентом, он воодушевлен ею.
Я быстро провел небольшое исследование по Alexa и был привлечен к Flash Briefing Skill API, который подключается к повседневной рутине пользователя - спрашивать Alexa о сегодняшних новостях. Насколько идеально было бы включать наши истории Motown в ежедневные брифинги для пользователей? После прочтения документации казалось, что все, что требовалось, - это просто перевести наши истории из Contentful в формат JSON, которого ожидала Алекса. Учитывая мое знакомство с Serverless, мне потребовалось несколько минут, чтобы создать новую конечную точку API, которая извлекала сегодняшние истории из Contentful и возвращала их в формате, необходимом Alexa для текстового элемента.
[
{
uid: "3etRbDembv3Hrb3Bi5A0wR",
updateDate: "2019–03–27T14:41:36.651Z",
titleText: "This Day In Motown, March 27th",
mainText: "Taking over from the Beatles' "Eight Days A Week,"…",
redirectionUrl: "https://www.motown.today"
}
]
Затем я последовал шагам Amazon по созданию навыков быстрого брифинга, скрестил пальцы, поговорил с Алекса и откинулся назад, пораженный тем, что она рассказала о том, что произошло в истории Motown сегодня. Скоро мы представим этот навык на торговой площадке Alexa, так что следите за обновлениями.
Спасибо
Еще раз спасибо команде Universal и Гарольду Гутьерресу за то, что привлек меня к этому проекту. Стоя перед лицом перегрузки контентом, я чувствую, что мы смогли сделать шаг назад и создать прочную основу для цифровых концепций, которые могут развиваться в течение года. Это стало возможным благодаря невероятным достижениям в технологиях контента от таких компаний, как Contentful, и легко интегрируется благодаря таким усилиям, как Vue, Nuxt и Serverless.
Наслаждайтесь хитами.
