이 기사에서는 다양한 데이터 소스, 특히 에어 테이블을 Gatsby 응용 프로그램에 쉽게 통합하여 작업 관리를위한 대화식 간트 차트를 구축하는 방법을 보여줍니다. 우리는 최적의 성능을위한 프론트 엔드 및 하이브리드 렌더링 전략에 반응을 사용할 것입니다.
이 프로젝트는 다양한 스케줄링 응용 프로그램을위한 템플릿을 제공합니다. Gatsby Cloud 사이트에서 라이브 데모를 사용할 수 있으며 소스 코드는 Github에 있습니다. 주요 기능 :
단순화 된 데이터 통합 : 개츠비는 Airtable과 같은 데이터 소스에 연결하는 간소화됩니다.
대화식 간트 차트 :
Airtable Synchronization : Airtable과의 실시간 동기화는 서버 측 웹 후크 (자동 재건)와 클라이언트 측 폴링 (React의 )을 사용하여 달성됩니다. 효율적인 정적 사이트 생성 : Gatsby의 정적 사이트 생성은 빠른 로딩 시간을 보장합니다. GraphQL & Airtable 플러그인 :
는 GraphQL 쿼리를 활용하고 데이터 가져 오기를위한 플러그인을 활용합니다. 드래그 앤 드롭 기능 : 반응 구성 요소 드래그 앤 드롭을 관리하고 REST API를 통해 AirTable로 다시 푸시합니다. 프로젝트 설정 : Gatsby는 정적 사이트 생성기입니다. React Code는 서버에서 제공하는 정적 HTML 파일로 컴파일됩니다. 이는 HTML이 클라이언트 측에서 조립되는 기존 웹 앱과 대조됩니다. 이 사전 렌더링은 로딩 속도를 크게 향상시킵니다
node.js 및 npm을 설치하십시오 : Gatsby Cli를 설치하십시오 구성 요소는 개별 셀을 렌더링하여 작업 배치를 관리합니다
통합 에어 테이블 :
에어테이블베이스 생성 : ChartCell "작업"및 "리소스"테이블 (적절한 필드 포함 : ,
, , )가있는 기본을 만듭니다. , ). "작업"과 "자원"테이블 사이의 링크를 설정하십시오 에어테이블 플러그인을 설치하십시오 :
id 양방향 동기화 : start
end
Server-Side (WebHooks) : resource AirTable WebHooks는 Gatsby가 데이터 변경시 재 구축됩니다. (에어테이블 프로 필요). id
클라이언트 측 (폴링) : hook는 정기적으로 REST API를 사용하여 AirTable에서 업데이트 된 데이터를 가져옵니다. 이를 통해 Gantt 차트가 최신 변경 사항을 반영합니다
name
드래그 앤 드롭 및 데이터 업데이트 : 위 내용은 Airtable, Gatsby & React를 사용하여 대화식 간트 차트를 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
