Статья изначально была опубликована на веб-сайте PortalJS. Посмотреть здесь.

Пример с поддержкой github, добавленный в PortalJS, предназначен для предоставления пользователям простого способа настройки каталога данных, который можно использовать для отображения и обмена данными, хранящимися в репозиториях GitHub. В этом примере пользователи могут быстро настроить веб-портал, который позволяет им демонстрировать свои данные и делать их доступными для других, и все это делается с помощью конфигурации простого файла datasets.json.

Демо

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

Ниже приведены некоторые скриншоты:

Титульная страница

Индивидуальная страница набора данных

Как использовать этот пример в качестве шаблона

Совет

Вы также можете создать новый проект, нажав кнопку «Развернуть» ниже. Vercel клонирует пример в новый репозиторий под вашим пользователем или организацией на GitHub и настроит для него развертывание. Затем вы можете клонировать новый репозиторий на свой компьютер и начать его редактирование.

Создайте новое приложение с помощью create-next-app

Выполните следующие команды:

npx create-next-app <app-name> --example https://github.com/datopian/portaljs/tree/main/examples/github-backed-catalog
cd <app-name>

Настройте токен GitHub

Этот проект использует GitHub API, который для анонимных пользователей ограничивается 50 запросами в час, поэтому вы можете получить Personal Access Token и добавить его в файл .env внутри папки, например так:

GITHUB_PAT=<github token>

Настройка списка наборов данных

Файл datasets.json служит списком наборов данных, которые должны быть на вашем портале данных. Отредактируйте этот файл по своему вкусу. Некоторые примеры можно найти внутри этого репозитория:

Запустите приложение

Запустите приложение, выполнив следующую команду:

npm run dev

Поздравляем, ваше новое приложение теперь работает по адресу https://localhost:3000.

Развертывание

Нажав на эту кнопку, вы будете перенаправлены на страницу, которая позволит вам клонировать пример в свою учетную запись GitHub/GitLab/BitBucket и автоматически развернуть его.

Токен GitHub

Вы должны установить GITHUB_PATH в качестве переменной среды в Vercel. Для этого перейдите на страницу проекта в Vercel, затем нажмите Настройки, найдите Переменные среды и создайте новую переменную среды. Вернитесь к предыдущему разделу, если вы не знаете, как создать токен GitHub.

Редактирование нового развертывания

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

Совет

Обратите внимание, что всякий раз, когда вы отправляете изменения в новый репозиторий, они будут автоматически развернуты Vercel.

Структура datasets.json

Файл datasets.json — это просто список наборов данных, ниже вы можете увидеть минимальный пример набора данных.

{
  "owner": "fivethirtyeight",
  "repo": "data",
  "branch": "master",
  "files": ["nba-raptor/historical_RAPTOR_by_player.csv", "nba-raptor/historical_RAPTOR_by_team.csv"],
  "readme": "nba-raptor/README.md"
}

В нем есть

  • owner, который будет владельцем репозитория github.
  • repo, которое будет именем репозитория github.
  • branch, которая будет веткой, в которую нам нужно получить файлы и файл readme.
  • Список files, который будет списком путей с файлами, которые вы хотите показать миру.
  • readme, который будет путем к вашему описанию данных, также может быть подпутем, например: example/README.md

Вы также можете добавить

  • description, который полезен, если у вас есть более одного набора данных для каждого репо, если он не указан, мы просто будем использовать описание репо.
  • Name, который полезен, если вы хотите дать вашему набору данных красивое имя, если оно не указано, мы собираемся использовать соединение owner и repo + путь README, в приведенном выше примере это будет fivethirtyeight/data/nba-raptor

Дополнительные команды

Вы также можете создать проект для производства с помощью

npm run build

И запустите с использованием производственной сборки следующим образом:

npm run start

Ссылки

PortalJS — это среда JavaScript для порталов данных, разработанная Datopian, ведущими экспертами в области открытого исходного кода, стоящими за CKAN, Frictionless Data, DataHub.io, Flowershow и другими. PortalJS построен на JavaScript и React поверх популярного фреймворка Next.js, предполагая развязанный подход, при котором фронтенд является отдельной службой от бэкенда и взаимодействует с бэкендом через API. Он может использоваться с любым бэкендом и имеет встроенную поддержку CKAN.

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