Останнє оновлення: 04 April, 2023
Індекс Української Культури – це проєкт, який я розробив для того, щоб покращити видимість українських митців серед українців і за кордоном, допомогти мистецтвознавцям і людям, які вивчають українську культуру. Його мета: зібрати всі провалідовані дані про українських митців всіх напрямків в структурованому вигляді.
Я вирішив зробити невеликий цикл статтєй на тему того, як технічно реалізован проєкт, щоб можна було легко підключитись і допомогти, якщо в вас буде таке бажання.
Я вирішив збирати дані в с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
}
}
Переглянути повністю весь коміт.
Наразі, це все, що можна сказати про дані в проєкті. Я буду оновлювати статтю в разі додавання змін в дані і їх схему.
Якщо вам сподобалась ідея і ви бажаєте допомогти проєкту, я опублікував лист необхідної допомоги.
Трой Кёлер - програміст, який живе в Берліні, Німеччина. У нього більше 6 років досвіду роботи в IT. Раніше він працював в одному з найбільших інтернет-магазинів України, а зараз працює в Zalando. Він спеціалізується на мові програмування Rust, складних бекенд системах, розробці продуктів і інженерних платформах.