Привет и добро пожаловать! Сегодня мы собираемся создать страницу состояния, чтобы отслеживать время работы страницы с помощью нового инструмента Build on Standard Library. Build позволяет вам поставлять мощную логику приложения с помощью визуального редактора рабочих процессов, а затем автоматически генерирует и размещает код Node.js. Мы будем хранить наши данные в Airtable - удобно, стандартная библиотека автоматически выполняет аутентификацию и для ваших любимых приложений SaaS! Давайте начнем.

Наша цель здесь - создать страницу состояния на базе Airtable в качестве центральной базы данных, чтобы отслеживать эффективность вашего веб-сайта в течение дня и в течение скользящего периода в одну неделю. Это включает в себя визуально приятную веб-страницу, на которой отображаются результаты.

(Примечание: для опытных пользователей, которые хотят сразу перейти к развертыванию внешнего интерфейса, перейдите к последнему разделу руководства, щелкнув здесь)

Что вам понадобится заранее

Шаг 1. Настройте базу Airtable

Первое, что нам нужно сделать, это настроить нашу базу Airtable для хранения URL-адресов, которые мы хотим отслеживать, и отформатировать наши таблицы так, чтобы мы собирали правильную информацию. Мы пошли дальше и создали шаблон, который будет отслеживать всю необходимую информацию. Вы можете добавить нужную базу в свое рабочее пространство, щелкнув здесь. Полученная база должна выглядеть так:

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

Шаг 2. Постройте рабочий процесс

Когда ваша база будет готова к работе, перейдите на https://build.stdlib.com, чтобы начать настройку рабочего процесса. Нажмите кнопку Создать новый проект в меню слева и выберите следующее:

Когда это событие происходит

  • Выберите Планировщик → Выбрать Раз в минуту.

Этот рабочий процесс будет запущен

  • Выберите Airtable → Выберите Выбрать строки, запросив базу.
  • Выберите HTTP → выберите Сделать HTTP-запрос.
  • Выберите Airtable → Выберите Вставить строку в базу.

Ваша установка должна выглядеть так:

Итак, что здесь происходит? Во-первых, мы используем планировщик стандартной библиотеки, чтобы определить событие, которое мы хотим запустить в нашем рабочем процессе. В этом проекте мы хотим выполнять наши задачи раз в минуту, поэтому выберите этот вариант в раскрывающемся меню. Мы хотим выполнить следующие действия:

  • Запросите нашу базу Airtable и вытащите все наши URL-адреса из таблицы URI. Потом:
  • Выполните HTTP-вызов для каждого из этих URL-адресов и запишите определенную информацию о теле ответа, такую ​​как код состояния и продолжительность запроса. Наконец-то:
  • Зарегистрируйте эту информацию в нашей базе Airtable в таблице журнала.

Это все, что нам нужно сделать на данный момент! Нажмите кнопку Создать рабочий процесс и переходите к шагу 3.

Шаг 3. Свяжите ресурсы с вашей личностью

После того, как вы настроите свое мероприятие и задачи, вам будет представлен экран с просьбой связать учетные записи с идентификатором. Вы можете рассматривать свои Identity или Identity Token как связку ключей, которая надежно отслеживает все ваши ключи API и позволяет вам аутентифицироваться с помощью API-интерфейсов Connector в стандартной библиотеке. Вам нужно будет выполнить шаг 1, описанный выше, прежде чем вы сможете выполнить этот шаг.

Теперь мы можем нажать кнопку Связать учетную запись внутри поля Airtable. Это вызовет дополнительное диалоговое окно:

Если вы ранее связали учетную запись и базу Airtable со своей учетной записью в стандартной библиотеке, это будет отображаться здесь. Однако, если вы этого не сделали, не беспокойтесь! Мы можем добавлять новые учетные записи на лету. Нажмите Добавить новую учетную запись, и вы увидите следующий экран:

Здесь вам нужно будет ввести адрес электронной почты, связанный с вашей учетной записью Airtable, а также ключ API. Просто посетите airtable.com/account и следуйте предоставленным инструкциям, чтобы получить свой ключ API. Когда все будет готово, не стесняйтесь нажимать кнопку Готово, чтобы продолжить. На следующем экране вам будет представлено меню со списком всех доступных баз, которое должно выглядеть примерно так:

Выберите базу, которую мы создали из шаблона ранее, Страница состояния, и нажмите Готово. На следующем экране вы должны увидеть свою базу Airtable, указанную в разделе Связанные учетные записи. к этой личности. Поздравляю! Теперь мы готовы перейти к последнему шагу этого урока.

Шаг 4. Настройте API рабочего процесса

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

Замените все в текстовом поле (серые области не будут перезаписаны) следующим фрагментом.

Этот код будет управлять всеми тремя задачами, которые мы запланировали в начале нашего проекта. Сначала мы запрашиваем таблицу URI, чтобы собрать URL-адреса, которые мы хотим отслеживать. Затем мы выполняем HTTP-запрос к каждому из них и записываем ответ в таблицу Logs. После того, как вы нажмете Запуск в тестовой среде, синяя кнопка Далее станет активной. Нажмите на нее, чтобы перейти к нашему последнему шагу - названию вашего проекта и его отправке. Если все пойдет хорошо, вы должны увидеть следующее:

Поздравляем, теперь вы можете отслеживать эффективность своего веб-сайта на одной удобной базе на Airtable. Не стесняйтесь добавлять столько URL-адресов, сколько хотите отслеживать.

Бонус - запустите свой собственный интерфейс!

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

Когда ваша база соберет достаточно данных, перейдите на эту страницу или посетите репозиторий на GitHub и нажмите кнопку Развернуть. Вы попадете на эту страницу:

У вас есть возможность предоставить логотип для вашего URL-адреса, а также поле для ссылки на вашу домашнюю страницу. Вы также можете установить порог задержки (в миллисекундах), который будет использоваться для измерения производительности вашего сайта. После того, как вы заполнили эти переменные, нажмите кнопку Связать ресурс и выберите базу Airtable, которую вы использовали для регистрации своих данных (при использовании нашего шаблона это будет называться Страница состояния ). Нажмите Развернуть, и теперь у вас появится страница текущего статуса, подобная показанной ниже!

Вы можете посетить свою страницу статуса в любое время, перейдя по следующему URL-адресу:

https://<Your-StdLib-Username>.api.stdlib.com/<Project-Name>@dev/

Надеюсь, это был информативный и интересный проект! Чтобы узнать больше о том, над чем работает команда, или быть в курсе новых проектов и продуктов, загляните в наш блог на https://stdlib.com/blog или подпишитесь на нас в Twitter @StdLibHQ.

Кевин Бриммерман (Kevin Brimmerman) - инженер-программист в стандартной библиотеке. Вне работы он заядлый бегун и стойкий фанат спорта из Чикаго. Вперед, детеныши!