Показывайте свои последние статьи в блоге или последних подписчиков, не платя ни копейки

Первое впечатление от того, что кто-то нажмет на ваш профиль в Twitter, будет вашим изображением в заголовке. Почему бы не отображать динамический контент? Для этого не требуется никакой ракетной науки, а возможности безграничны.

В этой статье я хочу показать вам, как легко создать это с помощью простого скрипта Node.js, Twitter и Medium API, а также AWS Lambda.

Обзор:

  • получение учетных данных, чтобы мы могли использовать Twitter API.
  • создание сценария Node.js для получения сведений о наших последних подписчиках.
  • получение нашей последней статьи в блоге через RSS-канал Medium.
  • обновление статического изображения заголовка изображениями наших подписчиков и заголовком нашей статьи в блоге.
  • помещая все в функцию Lambda на AWS, которая будет выполняться каждые 60 секунд.

💡 Несмотря на то, что мы будем создавать инфраструктуру в AWS, это решение не повлечет за собой никаких затрат из-за уровня бесплатного пользования AWS для Lambda.

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

Начиная

Давайте настроим новый проект через npm или yarn и добавим необходимые нам зависимости:

  • axios - простой, но мощный HTTP-клиент
  • jimp - манипуляции с изображениями
  • sharp - преобразование буферов ответов в изображения
  • twitter-api-client - общение с Twitter API
  • rss-to-json - для перевода XML (Medium Feeds) в JSON
  • serverless - предоставление нашей инфраструктуры AWS через Serverless Framework. Установите это глобально!

Мы создадим только один файл сценария в src/handler.js, содержащий все необходимые нам операции.

Доступ к Twitter API

Следующее, что нам понадобится, это доступ к Twitter API. Итак, нам нужно создать новое клиентское приложение на портале разработчиков Twitter.

После создания приложения обязательно скопируйте ключ API и секретный ключ API. Вернувшись к обзорному экрану, выберите новое приложение и нажмите «Изменить» в правом верхнем углу. Обязательно установите полные разрешения (Read and Write and Direct Messages), чтобы мы могли позже получить доступ ко всей необходимой информации и обновить наш баннер.

Последний шаг - создать токен доступа и секрет. Вы можете сделать это, выбрав свое приложение и переключившись на вкладку Keys and token прямо под заголовком.

Скорее всего, Twitter также снова отобразит ваш ключ API и секретный ключ API вместе с вашим новым токеном доступа и секретом токена доступа. Записывайте все. Вы не можете снова отобразить эти данные!

Инициализация нашего клиента Twitter

Теперь, когда у нас есть учетные данные, мы можем настроить наш клиент, чтобы мы могли взаимодействовать с API Twitter. Сначала давайте поместим все наши ключи и секреты, а также нашу учетную запись Twitter и Medium в creds.json на корневом уровне.

{
  "TWITTER_API_KEY": "5Hn9Z28...BW4lEzD",
  "TWITTER_API_SECRET_KEY": "yndh2s5sXLuh...33sbWsbbREZYp4",
  "TWITTER_API_ACCESS_TOKEN": "42399689...jQIBa3Ew4RDi5ed",
  "TWITTER_API_ACCESS_SECRET": "QgYTQoIueX5S...JHk44vVuty9ewwo",
  "TWITTER_HANDLE": "tpschmidt_",
  "MEDIUM_HANDLE": "tpschmidt"
}

Теперь мы можем создать клиента с помощью следующего кода:

Для локального тестирования мы будем напрямую обращаться к нашему creds.json файлу, а при развертывании в AWS мы будем использовать переменные среды, которые мы настроим позже.

Получение наших последних подписчиков

Давайте воспользуемся клиентом Twitter API, чтобы получить наших последних подписчиков. Ответ состоит из списка пользователей, каждый из которых содержит profile_image_url_https.

Мы можем загрузить аватары пользователей, а затем изменить размер изображения с помощью Sharp и сохранить его во временный файл.

Работа с личными RSS-потоками Medium

Затем мы хотим получить заголовок последней статьи блога из нашего собственного канала Medium. Если вы ведете блог на Medium, все метаданные хронологии доступны по адресу https://medium.com/feed/@username.

Поскольку мы работаем с JavaScript, мы хотим преобразовать ответ XML в JSON с помощью rss-to-json. После этого мы можем легко извлечь наш заголовок. Добавление небольшого отступа слева и справа в зависимости от размера заголовка гарантирует нам, что заголовок всегда выровнен по центру для определенной точки в нашем заголовке.

Конечно, вы не ограничены Medium. На этом этапе вы можете получить что угодно, даже простую HTML-страницу, и извлечь то, что хотите показать.

Обновление изображения нашего баннера

Сложная часть уже сделана. Мы получили наш динамический контент! Теперь нам нужно только добавить базовое изображение для нашего заголовка в наш проект в новую папку assets. Вот мой пример:

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

Кроме того, я использую другое изображение для маскировки изображений наших подписчиков, чтобы они имели округлые границы. Это просто белый кружок на черном фоне. Убедитесь, что оно того же размера, что и изображения наших подписчиков (в этом примере мы используем 90x90 пикселей). Если вы предпочитаете квадраты, просто удалите mask призывы.

Здесь не так уж много магии:

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

Результатом является новый файл по адресу 1500x500_final.png, файл по адресу /tmp.

Наконец, нам просто нужно обновить наш новый заголовок в Twitter!

Автоматизация всего с помощью правил Lambda и Eventbridge

Теперь у нас есть локальный скрипт для обновления нашего баннера. Но мы хотим запускать это постоянно и автоматически так часто, как это позволяет Twitter API.

Мы легко можем сделать это, используя AWS Lambda. Если вы еще не начали работать с AWS, просто зарегистрируйтесь (это бесплатно, и вы начнете с дополнительных бесплатных лимитов в первый год, даже если для некоторых сервисов, таких как Lambda, уже есть много бесплатных базовых контингентов).

После этого вам нужно сделать несколько вещей заранее:

  • посетите свои Учетные данные безопасности, чтобы сгенерировать новый ключ и соответствующий секрет.
  • установить AWS CLI (например, через homebrew).
  • запустите aws configure, чтобы установить свои учетные данные с первых шагов.

Вот и все! Тебе хорошо идти.

Мы уже установили Serverless Framework глобально, поэтому мы можем инициализировать новый файл шаблона, запустив sls или serverless. В итоге мы получим новый serverless.yml файл шаблона, который определяет всю нашу инфраструктуру.

Что мы хотим получить в итоге:

  • лямбда-функция, запускающая наш скрипт.
  • Лямбда-слой, содержащий наши зависимости.
  • правило EventBridge, которое запускает нашу функцию каждые 60 секунд.

С Serverless Framework это очень просто создать и всего несколько строк кода.

Давайте посмотрим на три основные части:

  • provider - определяет, что мы хотим использовать AWS, и устанавливает несколько основных параметров: мы хотим, чтобы срок действия наших журналов истекал через семь дней, чтобы мы не вносили никаких затрат в будущем.
  • layers - определяет наш слой, который содержит все наши зависимости node_modules.
  • functions - вот где мы создаем нашу лямбда-функцию.

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

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

Если вы посмотрите еще раз, то увидите, что мы упомянули src/handler.handler в serverless.yml. В нашем случае источник находится по адресу src/handler.js. Это сообщает Lambda, где начать выполнение нашего скрипта узла.

Заключительная часть: упаковка нашей функции и нашего слоя.

Вот и все! Теперь мы можем просто развернуть весь наш стек через sls deploy, и все готово. Если что-то не работает, просмотрите соответствующие потоки журнала CloudWatch, чтобы найти основную проблему. Если все работает нормально, вы увидите наши журналы отладки:

INFO   Retrieving followers...
INFO   Retrieving avatar...
INFO   Retrieving avatar...
INFO   Retrieving avatar...
INFO   Retrieving headline...
INFO   Retrieved headline: Distributed Tracing Matters
INFO   Adding followers...
INFO   Appending image 0 with x=600
INFO   Appending image 1 with x=700
INFO   Appending image 2 with x=800
INFO   Adding headline...
INFO   Uploading to twitter...

Если вы дожили до этого места, и все получилось: отличная работа! 🎉

💡 Не бойтесь, что ваш код будет запускаться каждые 60 секунд, потому что, как упоминалось ранее, на AWS есть бесплатный уровень для Lambda, который включает 1 миллион выполнения и секунды вычислений в месяц. Поскольку выполнение нашей функции занимает всего несколько секунд, мы ни в коем случае не превысим это значение.

Вы можете найти весь код на GitHub. Если возникнут какие-либо проблемы или вы застряли с описанием, не стесняйтесь написать мне по любому каналу связи по вашему выбору.

Заворачивать

Несмотря на то, что это уже не что-то уникальное, развлечение с динамическим контентом на вашей временной шкале в Твиттере может помочь в привлечении вашей аудитории. Кроме того, вы, возможно, узнали что-то новое и получили удовольствие от процесса создания этого.

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

Будьте изобретательны и покажите это миру.