어떻게 30분 안에 개츠비와 에어테이블을 이용하여 사이트를 구축합니까

여러 가지 원인과 용례로 우리는 모두 Airtable를 좋아한다.코로나 시대에 우리는 많은 사이트들이 에어테이블을 사용하여 서로 다른 문제를 해결하는 것을 보았다.유행은 candor.co 등이다.
Airtable에는 킬러급 기능"share view"이 있습니다. 그곳에서 시계의 보기를 공유하고 간단한 iframe를 사용하여 사이트에 삽입할 수 있습니다.저는 같은 기능을 사용하여 Startups vs COVID의 첫 번째 버전을 구축했습니다. 이것은 2019 관상바이러스 질병에 대응하는 창업 회사에 자금, 지원과 자원을 제공하는 실시간 저장소입니다.
다음과 같이 Airtable iframes가 포함된 간단한 HTML 웹 사이트입니다.

하지만 이 버전의 단점은 다음과 같습니다.

개인 기록을 공유/강조 표시할 수 없음

검색 엔진 최적화 부족

각 기록을 추적할 수 없는 분석

소셜네트워크서비스(SNS)에서 개인 기록을 공유할 수 없음

이 문제를 해결하기 위해 Gatsby와 Airtable를 이용하여 플랫폼의 두 번째 버전을 구축했는데 어떤 iframe도 없습니다.
이것은 두 번째/현재 버전입니다.

왜 개츠비야?

반응하는 사랑

이전에 React 구축Leapcode, Gatsby 구축nextjs과 mypersonal website를 사용했습니다.

자동 정적 페이지 생성기

Blazing fast 웹 사이트

Netlify를 사용하여 구축 시간 단축

PWA 및 더 빠른 페이지 로드

플러그인 라이브러리

GatsbyJs와 Airtable를 사용하여 웹 사이트를 구축하려면 어떻게 해야 합니까?

In this article, we'll focus only on connecting airtable & displaying data on your gatsby web page. We are not going deeper into the design of the website here.

먼저 GatsbyJS를 설치하고 프로젝트를 시작합니다.Here 네가 할 수 있다.또한 starter packs 중 하나를 사용하여 시작할 수 있습니다.
게이츠비는 여러 개의 플러그인을 가지고 있어 다른 응용 프로그램을 통합하는 데 도움을 줄 수 있다.여기서 우리는 게이츠비원airtable 플러그인을 이용할 것이다.Airtable 데이터베이스에서 웹 사이트에 데이터를 제공합니다.이것은 미리 작성된 모듈로 airtable API를 사용하여Gatsby GraphQL로 변환합니다.
게이츠비 사이트와 Airtable 받침대가 준비되면 폴더에 gatsby-source-airtable 플러그인을 설치합니다.

# using npm
npm install --save gatsby-source-airtable

# using yarn
yarn add gatsby-source-airtable

시작하다

다음은 구축이 완료된 폴더의 모양입니다.

코드에 Airtable 통합gatsby-source-airtable 플러그인을 설치한 후 gatsby-config.js 파일에 다음과 같이 Airtable 테이블을 구성합니다.

{
    resolve: "gatsby-source-airtable",
      options: {
        apiKey: process.env.AIRTABLE_API_KEY,
        tables: [
          {
            baseId: "YOUR_AIRTABLE_BASE_ID",
            tableName: "YOUR_TABLE_NAME",
          },
                ]
            }
}

Airtable API 키 - 도움말의 Airtable에서 찾을 수 있습니다.→API 문서.파일에서 직접 사용하지 않고 환경 변수를 사용하여 API 키를 주입해야 합니다.

API 문서에서 base의 base ID를 찾을 수 있습니다.

본문에서 우리는 단지 하나의 표만 사용한다.임의의 수량의 표를 추가할 수 있으며, gatsby-config.js 의 표에서 지정해야 합니다

Airtable에서 Google 개츠비 프로젝트로 데이터 가져오기

개츠비는 GraphQL을 사용하여 데이터를 다른 페이지로 보냅니다.이 플러그인gatsby-source-airtable은 Airtable의 restapi를 GraphQL 모드로 변환합니다.
우선 Gatsby의 GraphQL 인터페이스를 사용하여 Airtable API에서 데이터를 가져오는지 확인하겠습니다.
개츠비 서버 시작:

gatsby develop

다음으로 이동: http://localhost:5000/_graphql이제 Airtable의 데이터를 확인하기 위한 간단한 조회를 실행합시다.gatsby-source-airtable는 allAirtable라는 조회를 제공합니다. 이 조회는 모든 데이터를 가져옵니다.

query {
    allAirtable {
        edges {
            node {
                column_name_1
                column_name_2
            }
        }
    }
}

이 때, 우리는 이미 airtable에 연결되었고, 데이터는 GraphQL에 도착해야 한다.다음 단계는 이 데이터를 저희 홈페이지로 가져오는 것입니다pages/index.js

import React from "react"
import { graphql } from "gatsby"

export default ({data}) => {

    const allAirtableData = data.allAirtable.nodes;
    return (
        <div>
            {
                allAirtableData.map((node) => (
                    <div>
                        <img src={node.data.column_name_1} />
                        <h1>{node.data.column_name_2}</h1>
                        <a href={`/${node.recordId}`}>Click Here</a>
                    </div>
                ))
            }
        </div>
    )
}

export const query = graphql`
    query {
        allAirtable {
            node {
           recordId
            data {
                    column_name_1
                    column_name_2
            }
            }
        }
    }
`

이것은 매우 간단하다!목록을 allAirtable 조회에서react 구성 요소의 data 변수에 비추겠습니다.그리고 우리는 map()를 사용하여 이 목록을 교체하고airtable 라이브러리의 모든 데이터를 열거했습니다.

각 레코드에 대한 독립 페이지 만들기

검색엔진의 최적화를 높이기 위해 모든 줄에 페이지를 만드는 것은 좋은 생각이지만, 우리는 모든 줄을 수동으로 만들고 싶지 않다.반대로, Airtable이 업데이트될 때 자동으로 이 페이지를 생성하기를 희망합니다.가장 좋은 방법은 백엔드 서버에서 전체 항목을 실행하고 서버 쪽 렌더링을 사용하여 루트를 만드는 것이다.그러나 게이츠비는 내장 함수를 제공하여 게이츠비로 페이지를 만들 수 있다.이것은 우리를 위해 많은 시간을 절약했다.우리는 웹 사이트를 실행하기 위해 백엔드 서버를 유지할 필요가 없다.
시작하기 전에 이 페이지의 표준 템플릿을 만듭니다.
새 폴더 "template"를 만들고 post.js 라는 파일을 만듭니다.

import React from 'react'
import { graphql } from 'gatsby'

export default ({ data }) => {

    return (
    <div>
        <h1>{data.airtable.column_name_1}</h1>
        <img src={data.airtable.column_name_2} />
    </div>
    )
}

export const query = graphql`
query GetRecord($recordId: String!){
    airtable(recordId: { eq: $recordId}) {
        id
        table
        recordId
        data {
            column_name_1
            column_name_2
        }
    }
}`

빠르게 살펴보면, GraphQL 조회는 좀 복잡해졌지만, 상대적으로 간단해졌다.새로운 변수$recordId가 있습니다. 이것은 기본적으로airtable의 모든 줄/기록된 id입니다.recordId의 값은 스크립트에서 전달되고 (다음 단계에서 진행할 것입니다) airtable에서 해당하는 기록을 가져오는 데 사용됩니다.

createPage 함수 소개

createPage()는gatsby의 내장 함수로 프로그래밍 방식으로 구축에 페이지를 만드는 데 사용됩니다.현재, 우리가 해야 할 일은 airtable에서 모든 기록을 가져오고, 모든 기록을 훑어보고, 모든 기록을 위한 페이지를 만드는 것이다.
우선 루트 폴더에 다음 내용을 포함하는 새 파일 gatsby-node.js 을 만들어야 합니다.

const path = require(`path`);
exports.createPages = ({ graphql, actions }) => {

  const { createPage } = actions
  return new Promise(async resolve => {

    const result = await graphql(`
        {
        allAirtable {
          edges {
            node {
              table
              recordId
              data {
                column_name_1
                column_name_1
              }
            }
          }
        }
      }
    `)
    // For each path, create page and choose a template.
    // values in context Object are available in that page's query
    result.data.allAirtable.edges.forEach(({ node }) => {
      createPage({
        path: `/${node.recordId}`,
        component: path.resolve(`./src/template/post.js`),
        context: {
            recordId: node.recordId,
        },
      })
    });
    resolve()
  })
}

본 페이지에서 발생한 일을 점차적으로 이해하다

를 사용하여 graphQL 질의를 실행합니다.이것은airtable기에서 모든 줄을 가져와 allAirtable라는 상수에 저장합니다.

역력result의 모든 수조는 기본적으로airtable base

의 모든 기록이다

result.data.allAirtable.edges 경로가 createPage() 페이지로 생성됩니다.

이 구성 요소는 각 페이지의 템플릿으로 사용됩니다.여기에서 우리는 그것을 /:recordId 로 지정합니다. 이것은 우리가 이전에 만든 것입니다.

post.jscontext을(를) graphQL 질의에 사용된 템플릿으로 전송

봐라!새 페이지에서 단일 기록을 보기 위해gatsby 배치를 다시 진행합니다.원하는 대로 URL을 입력할 수 있습니다 recordId.→ 예: post.js축하합니다!이제 프런트엔드의 Airtable base에서 필요한 모든 데이터를 얻을 수 있습니다.여러 개의 시계, Airtable의 웹hook, 앞부분의 구성 요소, PWA 등 더 많은 일을 할 수 있습니다. 다음 글에 관심을 가지고 이 기능을 어떻게 실현하는지 알아보십시오.
읽어주셔서 감사합니다.질문이나 건의가 있으면 메시지를 남겨주세요!