Создание трекера истории звезд GitHub за 10 минут с помощью low-code

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

Обзор

Если вы разработчик, который владеет/поддерживает проект на GitHub и хочет отслеживать рост количества звезд GitHub вашего репозитория, то это приложение будет очень полезным для вас. Вы можете либо создать это приложение, либо использовать живую демонстрацию, которую мы создали здесь — https://apps.tooljet.com/github-star-history.

Для создания этого приложения мы будем использовать ToolJet (https://github.com/tooljet/tooljet), который является бесплатной платформой с открытым исходным кодом, позволяющей быстро создавать инструменты, API GitHub для получения информации о репозитории, такой как количество звезд и дата, персональный токен доступа GitHub, только если количество звезд репозитория превышает 5000.

💡 ToolJet предоставляет возможность импорта и экспорта приложений. Вы можете загрузить экспортированный исходный код этого приложения отсюда и импортировать его в свой личный аккаунт ToolJet.

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

  1. Создание пользовательского интерфейса
  2. Создание запросов
  3. Добавление свойств к виджетам
  4. Запустить приложение

Создание пользовательского интерфейса

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

  • Контейнер, внутри которого находится текстовый виджет для создания заголовка, включающего название приложения.

  • Текстовый ввод и кнопка рядом с ним. Текстовый ввод будет использоваться для получения имени репозитория в таком формате: account/repo-name, а кнопка будет использоваться для выполнения действия по запуску запроса.

  • Виджет графика (линейный график) для отображения изменений количества звезд с течением времени.

  • Виджет ввода пароля и текстовый виджет под ним. Виджет ввода пароля для хранения маркера персонального доступа GitHub и текстовый виджет для добавления сообщения.

  • И, наконец, контейнер, включающий два текстовых виджета, один из которых отображает общее количество звезд в репозитории, а другой — время создания репозитория.

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


Создание запросов

Теперь мы создадим запросы, которые будут получать информацию о хранилище, например, количество звезд и дату.

Мы создадим два запроса — один с использованием источника данных REST API, а другой с помощью пользовательского кода JavaScript.

Первый запрос с использованием REST API

Этот запрос получит данные с GitHub, такие как stargazers_count и время, когда репозиторий был created_at . Давайте создадим запрос:

  • Перейдите в редактор запросов внизу и нажмите на кнопку +, чтобы создать новый запрос.
  • Выберите REST API из выпадающего списка источников данных
  • На вкладке General выберите метод GET и введите конечную точку API GitHub https://api.github.com/repos/{{components.textinput1.value}} — в конце URL мы использовали JavaScript внутри двойных фигурных скобок. Это будет использовать значение из виджета text-input.
  • Мы будем использовать трансформацию для преобразования данных, полученных из ответа API, в формат JSON. Введите return { starGazers: data.stargazers_count }; — это позволит получить stargazers_count из ответа, полученного с помощью API, и создать пару ключ-значение. (Вы можете посмотреть документацию, чтобы узнать больше о трансформации).
  • Теперь вы можете нажать на кнопку Preview, чтобы проверить результат запроса в секции предварительного просмотра, а затем нажмите на кнопку Save, чтобы создать запрос.

Отлично! Мы создали наш первый запрос, который получит данные хранилища, такие как общее количество звездочетов на данный момент и дату создания хранилища. Давайте перейдем к созданию другого запроса.


Второй запрос с использованием пользовательского кода JavaScript

Для построения этого запроса мы напишем код JavaScript, чтобы получить данные конкретно о звездочетах. Мы будем получать данные о количестве звездочетов на определенную дату, а затем использовать эти данные для создания пар key: value: date и number of stargazers на эту дату. Это будет использовано для построения линейной диаграммы для графического представления изменения количества звездочетов с течением времени. Давайте создадим запрос:

  • Перейдите в редактор запросов и нажмите на кнопку +, чтобы создать новый запрос.
  • Выберите Run JavaScript code из выпадающего списка datasource.
  • Напишите код JavaScript в редакторе:
    • Определим переменную starsgazerURL и присвоим ей API GitHub — const stargazersURL = https://api.github.com/repos/${components.textinput1.value}/stargazers?per_page=100&page={page}; .
    • переменная totalPages, которая будет хранить разобранное целочисленное значение общего количества страниц — const totalPages = parseInt(queries.restapi1.data.starGazers/100);
    • переменная pages, которая создаст массив из общего количества страниц — let pages = […Array(totalPages).keys()];
    • Создаем пустой объект dates — let dates = {};
    • Создадим пустой массив results — let results = [];
    • Для заголовков мы назначим тип медиа, поддерживаемый REST API GitHub — let headers = {‘Accept’: ‘application/vnd.github.v3.star+json’}.
    • Условие принятия токена доступа GitHub из текстового ввода — if(components.passwordinput1.value !== ») { headers[‘Authorization’] = token ${components.passwordinput1.value}}.
    • Цикл for, который будет заменять номер страницы в starGazersURL, а затем итеративно просматривать все звезды, чтобы получить список всех звезд и время, в которое они снялись:
for(const page of pages) {
  const url = stargazersURL.replace('{page}', page + 1);
  const data = (await axios.get(url, { headers })).data;

  for(star of data) {
    const starredAt = moment(star.starred_at).endOf('day').format('yyyy-MM-DD');
    dates[starredAt] = (dates[starredAt] || 0) + 1;
  }

}
Вход в полноэкранный режим Выход из полноэкранного режима
  • И, наконец, присвоение total 0 и итерация по каждой дате в объекте dates. Затем создаем массив объектов и переталкиваем в массив results:
let total = 0;
for (date of Object.keys(dates)) {
    total = total + dates[date];
    results.push({ x: date, y: total});
}

return results;
Вход в полноэкранный режим Выйти из полноэкранного режима
  • После завершения написания кода сохраните этот запрос. Вот полный код:
const stargazersURL = `https://api.github.com/repos/${components.textinput1.value}/stargazers?per_page=100&page={page}`;

const totalPages = parseInt(queries.restapi1.data.starGazers/100);

let pages = [...Array(totalPages).keys()];

let dates = {};
let results = [];

let headers = {
  'Accept': 'application/vnd.github.v3.star+json'
}

if(components.passwordinput1.value !== '') { 
  headers['Authorization'] = `token ${components.passwordinput1.value}`
}

for(const page of pages) {
  const url = stargazersURL.replace('{page}', page + 1);
  const data = (await axios.get(url, { headers })).data;

  for(star of data) {
    const starredAt = moment(star.starred_at).endOf('day').format('yyyy-MM-DD');
    dates[starredAt] = (dates[starredAt] || 0) + 1;
  }

}

let total = 0;
for (date of Object.keys(dates)) {
    total = total + dates[date];
    results.push({ x: date, y: total});
}

return results;
Войти в полноэкранный режим Выход из полноэкранного режима

Мы также добавим обработчик событий к нашему первому запросу, чтобы запускать второй запрос каждый раз, когда первый запрос будет успешным. Для этого нам нужно перейти на вкладку Advanced нашего первого запроса и создать новый обработчик. Выберите событие On Success Event и в выпадающем списке Action выберите Run Query, затем выберите второй запрос и сохраните его.


Добавление свойств к виджетам

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

Text-input

Нам не нужно настраивать ничего особенного в этом виджете. Он используется для получения ввода от пользователя. Как только пользователь введет имя хранилища в правильной форме, запросы автоматически получат значение из виджета. Мы можем добавить заполнитель, чтобы пользователи понимали, в каком формате вводить данные. Просто нажмите в любом месте виджета, чтобы открыть панель осмотра справа, и в поле Placeholder введите account-name/repo-name .

Кнопка

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

  • Первое, что мы можем сделать, это добавить текст к нашей кнопке, например Fetch data, и изменить цвет кнопки на вкладке Style. Это улучшит пользовательский интерфейс кнопки.
  • Давайте добавим функциональность, мы можем добавить состояние Loading к нашей кнопке, чтобы она показывала загрузчик до тех пор, пока запрос не получит результаты. Для этого просто добавьте {{queries.runjs2.isLoading || queries.restapi1.isLoading}} это отобразит состояние загрузки на кнопке, пока выполняется любой из запросов.
  • Теперь, наконец, добавьте обработчик событий для кнопки, чтобы при нажатии на кнопку выполнялось какое-либо действие. В данном случае мы создадим событие On Click, добавим к нему действие Run Query и выберем первый запрос. Когда кнопка будет нажата, она запустит первый запрос в бэкенде.

Ввод пароля

Как и в случае с виджетом ввода текста, все, что нам нужно сделать, это добавить в этот виджет Placeholder — GitHub token, чтобы пользователь знал, что нужно ввести токен GitHub. О том, как получить персональный токен доступа GitHub, читайте здесь.

Текстовый виджет под вводом пароля

Мы будем использовать этот текст для отображения в качестве сообщения для поля ввода пароля. Просто нажмите на виджет и добавьте текст — <small>Required if more than 5000 stars. Токен не хранится и не отправляется в бэкенд.</small> и на вкладке Style используйте выбор цвета, чтобы изменить цвет шрифта на красный.

💡 Вы можете использовать HTML для настройки текста.

Текстовые виджеты внутри контейнеров

Мы будем использовать два текстовых виджета внутри контейнера. Первый из них будет отображать количество всех звезд. Щелкните на виджете, чтобы отредактировать его свойство, и добавьте следующий текст: Это хранилище имеет {{queries.restapi1.data.starGazers}} звезд 🌟 здесь используется JavaScript внутри двойных фигурных скобок для получения количества starGazers из данных, полученных restapi1 .

А второй текст отображает время, когда хранилище было впервые создано. Щелкните на виджете, чтобы отредактировать его свойство и добавить следующий текст: Repository was created {{moment(queries.restapi1.rawData.created_at).fromNow()}} ago это будет использовать JS функции moment и fromNow для преобразования даты created_at полученной в data полученной restapi1 .

Chart

Мы отредактируем 4 свойства диаграммы:

  • Заголовок: Заголовок будет отображаться в верхней центральной части диаграммы Stars over time .
  • Тип диаграммы: ToolJet поддерживает различные типы диаграмм, включая линейную, столбчатую и круговую. Мы будем использовать линейную диаграмму.
  • Данные диаграммы: Мы будем использовать данные, полученные и преобразованные в массив объектов запросом runjs2{{queries.runjs2.data}}.
  • Состояние загрузки: График будет отображать состояние загрузки, пока запрос успешно не получит и не преобразует результаты — {{queries.runjs2.isLoading || queries.restapi1.isLoading}}.

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


Развернуть приложение

Для этого просто нажмите на кнопку Deploy в правом верхнем углу. В диалоговом окне:

  • Нажмите на кнопку +Version, чтобы создать версию приложения.
  • Нажмите на кнопку Save, чтобы сохранить прогресс, а затем нажмите на кнопку Deploy, чтобы развернуть приложение на сервере.

Сделать приложение доступным для общего доступа:

  • Нажмите на кнопку Share в правом верхнем углу.
  • В диалоговом окне нажмите на тумблер, чтобы сделать приложение публичным и доступным для общего доступа через ссылку в поле
  • Вы также можете отредактировать URL по своему усмотрению

Поздравляем 🎉 **** : Вы успешно создали приложение, которое позволяет отслеживать историю звезд на GitHub, просто введя имя репозитория, и получить такие детали, как общее количество звезд за все время и время, когда он был создан. Если у вас возникнут проблемы, всегда можно связаться с нами в нашем сообществе slack или написать нам по адресу hello@tooljet.com.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *