Індекс Української Культури – це проєкт, який я розробив для того, щоб покращити видимість українських митців серед українців і за кордоном, допомогти мистецтвознавцям і людям, які вивчають українську культуру. Його мета: зібрати всі провалідовані дані про українських митців всіх напрямків в структурованому вигляді.

Я вирішив зробити невеликий цикл статтєй на тему того, як технічно реалізован проєкт, щоб можна було легко підключитись і допомогти, якщо в вас буде таке бажання.

Датасети зберігаються в csv форматі

Я вирішив збирати дані в сsv тому що мені потрібно було працювати з контракторами і я не знав наскільки технічно освіченою буде людина, з якою мені доведеться працювати. Я не хотів покладатися на цей фактор, тому обрав інструмент, який, як мені тоді казалось, знають всі – прості excel sheets.

Моїм першим контрактором опинилась дівчина, студентка, тому я одразу ж перейшов в Google Sheets. Це перевірений інструмент для роботи з контракторами, тому я був досить впевнений що це буде удобно і надійно.

Google Sheets неперевершений тим, що там можна робити коментарі, ставити задачі, дивитися історію документа, налаштовувати приватність. І він безкоштовний.

Я давав моїй контракторці дедлайн зазвичай в 3-5 днів. Після цього була перша ітерація перевірки.

Якість зібраних даних була низька, але я і платив за роботу мало, то й отримував те, за що заплатив (навіть краще, тому що моя контракторка була дуже старанна). Перший лист з письменниками я прийняв майже як він був, не знаючи як пояснити що мені треба, і сидів виправляв сам те, що мені не подобалось.

Я зміг зрозуміти насправді що саме мені не подобалось тільки, коли вже почав програмувати. Коли я побачив дані в graphQL панелі – стало сразу ясно, як їх треба міняти і крутити. Я знав, що так буде, тому мій перший датасет був доволі маленький і без картинок.

Порядок роботи

Письменники

спочату я почав робити профайл сторінку, тому що я хотів побачити як буде виглядати мої дані (хочаб приблизно, бо не було ніякої ясності)

щоб сорсити дані з csv файлів, я використав gatsby-source-filesystem & gatsby-transformer-csv.

ось так, приблизно, виглядав мій перший запрос на профайл для письменників  

query MyQuery {
  allUkranianWritersCsv {
    edges {
      node {
        birthplace
        citations
        communities_contributed
        education
        first_name_and_last_name
        id
        most_famous_pieces
        sources_of_data
        travels
      }
    }
  }
}

Всі дані, що я зібрав, находяться у відкритому доступі. Наприклад, ось комміт з даними письменників.

Базових можливостей gatsby-transformer-csv мені, звичайно, не вистачило. Мені потрібні були нові, сгенеровані поля. Наприклад, строкове поле з коректною строкою латинецею для формування посилання на профіль письменника (англійською це називається слаг, slug).

Це можна було вирішити доволі просто.

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/
 */

let slug = require('slug')
import { Actions, Node } from "gatsby"



exports.onCreateNode = ({
  node,
  actions,
}: {
  node: Node
  actions: Actions
}) => {
  const { createNodeField } = actions
  // console.log(node)
  if (node.internal.type === `UkranianWritersCsv`) {
    createNodeField({
      node,
      name: "slug",
      value: slug(node["first-name-and-last-name"]),
    })

    console.log(node)
  }
}

Новий запрос для лістингу став виглядати так.

query listing {
    writers: allUkranianWritersCsv {
      edges {
        node {
          id
          first_name_and_last_name
          education
          birthplace_tag
          fields {
            slug
          }
        }
      }
    }

Файл профіля потрібно було переіменувати, щоб використовувалось нове поле для генерації посилання.

було: src/pages/profile/{UkranianWritersCsv.id}.tsx
стало: src/pages/profile/{UkranianWritersCsv.fields__slug}.tsx

Художники

Згодом, я додав художників, а художники додали мені головних болей. Вони були зовсім не такі, як письменники.

В них були їх картини. Мені дуже хотілося якось їх показати, бо без картин сайт виглядав ще більш угрюмо, ніж я його собі уявляв.

В якості рішення я об'єднав їх у тип Creator (митець) і посадив два csv листи в одну папку.

Дані художників теж у відкритому доступі, їх можна скачати.

Новий реліз вийшов трохи негарним з точки зору коду, але швидким. Я просто скопіював шаблони і відрегував їх.

Всі порядні стартапери так роблять, я сам бачив.

...
{
      resolve: `gatsby-transformer-csv`,
      options: {
        typeName: typeNameFromDir,
      },
    },
...

Налаштування плагіна потрібно було трохи змінити. Новий запрос став таким:

query listing($type: String!) {
    creators: allCreatorsCsv(filter: { type: { eq: $type } }) {
      edges {
        node {
          first_name_and_last_name
          fields {
            slug
          }
  }
`

а для профайла таким:

query createProfile($id: String!) {
    profile: creatorsCsv(id: { eq: $id }) {
      first_name_and_last_name
      communities_contributed
      education
      sources_of_data
      travels
      gender
      example_art
    }
  }

Переглянути повністю весь коміт.

Наразі, це все, що можна сказати про дані в проєкті. Я буду оновлювати статтю в разі додавання змін в дані і їх схему.

Якщо вам сподобалась ідея і ви бажаєте допомогти проєкту, я опублікував лист необхідної допомоги.