이봐, Jamstack과 함께 기능적 달력 앱을 만들자

이봐, jamstack으로 기능 캘린더 앱을 만들자

나는 항상 역동적 인 스케줄링이 어떻게 작동했는지 궁금해했기 때문에 광범위한 연구를하고 새로운 것을 배우고 여행의 기술적 인 부분에 대해 글을 쓰기로 결정했습니다. 내가 여기서 다루는 모든 것은 단일 기사에 3 주간의 연구가 반축되는 것입니다. 초보자 친화적이지만 건강한 독서입니다. 그러니, 의자를 잡아 당겨 앉아서 모험을하자.

내 계획은 Google 캘린더처럼 보이지만 세 가지 핵심 기능 만 보여주는 것을 구축하는 것이 었습니다.

1. 기존의 모든 이벤트를 캘린더에 나열하십시오
2. 새로운 이벤트를 만듭니다
3. 생성 중에 선택된 날짜를 기준으로 일정 및 이메일 알림. 시간이 맞을 때는 스케줄이 사용자에게 이메일을 보내도록 일부 코드를 실행해야합니다.

예쁘지? 기사가 끝날 때마다 우리가 만드는 것이기 때문입니다.

내 코드를 나중에 나오는 시간에 실행하도록 요청하는 것에 대한 유일한 지식은 Cron Jobs였습니다. Cron 작업을 사용하는 가장 쉬운 방법은 코드에서 작업을 정적으로 정의하는 것입니다. 이것은 임시입니다. 정적으로는 Google 캘린더와 같은 이벤트를 예약 할 수 없으며 CRON 코드를 쉽게 업데이트 할 수 없다는 것을 의미합니다. Cron Triggers 작성 경험이 있다면 내 고통을 느낍니다. 그렇지 않다면 운이 좋으면 Cron을 이런 식으로 사용할 필요가 없을 수도 있습니다.

좌절감에 대해 더 자세히 설명하기 위해 HTTP 요청의 페이로드를 기반으로 일정을 트리거해야했습니다. 이 일정에 대한 날짜와 정보는 HTTP 요청을 통해 전달됩니다. 이것은 예정된 날짜와 같은 것을 미리 알 수있는 방법이 없다는 것을 의미합니다.

우리 (저의 동료들과 I)는이 일을 할 수있는 방법을 알아 냈고 - 내구성있는 기능에 대한 Sarah Drasner의 기사를 통해, 나는 내가 배울 필요가있는 것을 이해했습니다 (그리고 그 문제에 대해 비어 있음). 이벤트 제작에서 이메일 스케줄링, 캘린더 목록에 이르기 까지이 기사에서 작업 한 모든 것에 대해 배웁니다. 다음은 앱의 비디오입니다.

https://www.youtube.com/watch?v=simam4fxpoo&

미묘한 지연을 알 수 있습니다. 이것은 일정의 실행시기 또는 코드 실행과 관련이 없습니다. 나는 어떤 형태의 대기 시간이 있다고 생각하는 무료 sendgrid 계정으로 테스트하고 있습니다. 이메일을 보내지 않고 책임있는 서버리스 기능을 테스트하여이를 확인할 수 있습니다. 코드는 정확히 예정된 시간에 실행된다는 것을 알 수 있습니다.

도구 및 아키텍처

이 프로젝트의 세 가지 기본 단위는 다음과 같습니다.

1. 반응 프론트 엔드 : 이벤트 생성, 업데이트 또는 삭제하려면 UI를 포함하여 Calendar UI.
2. 8Base GraphQL : 앱의 백엔드 데이터베이스 레이어. 이곳에서 날짜를 저장, 읽기 및 업데이트 할 곳입니다. 재미있는 부분은이 백엔드에 대한 코드를 쓰지 않는다는 것입니다.
3. 내구성 기능 : 내구성 기능은 이전 실행에서 상태를 기억할 수있는 일종의 서버리스 기능입니다. 이것이 Cron 작업을 대체하고 앞에서 설명한 임시 문제를 해결하는 것입니다.

이 게시물의 나머지 부분에는 위에서 본 3 개의 유닛을 기반으로 3 개의 주요 섹션이 있습니다. 우리는 그들을 따라 가고, 그들을 쌓고, 그들을 세우고, 테스트하고, 작업을 배치 할 것입니다. 우리가 그것을 시작하기 전에, 우리를 시작하기 위해 만든 스타터 프로젝트를 사용하여 설정합시다.

프로젝트 repo

시작하기

한 프로젝트의 세 단위가있는 풀 스택 프로젝트 또는 각 단위가 자체 루트에 살고있는 독립형 프로젝트 로이 프로젝트를 다른 방식으로 설정할 수 있습니다. 글쎄, 나는 하나의 프로젝트이기 때문에 더 간결하고 가르치기 쉽고 관리하기 쉽기 때문에 첫 번째와 함께 갔다.

이 앱은 Create-React-App 프로젝트가 될 것이며 설정 장벽을 낮추기 위해 스타터를 만들었습니다. 그것은 기사의 범위를 벗어나기 때문에 설명 할 필요가없는 보충 강령과 논리가 제공됩니다. 다음은 우리를 위해 설정됩니다.

1. 캘린더 구성 요소
2. 이벤트 양식을 제시하기위한 모달 및 팝 오버 구성 요소
3. 이벤트 양식 구성 요소
4. 데이터 쿼리 및 데이터를 돌연변이하는 일부 그래프 QL 로직
5. 스케줄러를 작성할 내구성있는 서버리스 기능 스캐 폴드

팁 : 우리가 관심있는 각 기존 파일에는 문서 상단에 주석 블록이 있습니다. 주석 블록은 코드 파일에서 현재 일어나고있는 일과 다음에해야 할 일을 설명하는 할 일 섹션을 알려줍니다.

스타터 양식 Github를 복제하여 시작하십시오.

 git 클론 -B 스타터 ---single-branch https://github.com/christiannwamba/calendar-app.git

Root Package.json 파일에 설명 된 NPM 종속성을 설치하고 Serverless Package.json :

 NPM 설치

스케줄링을위한 오케스트레이션 내구성 기능

이 용어가 무엇인지 이해하기 전에 먼저 벗어나야하는 두 단어가 있습니다 - 오케스트레이션 과 내구성 .

오케스트레이션은 원래 잘 조정 된 이벤트, 행동 등의 조립을 설명하는 데 사용되었습니다. 컴퓨터 시스템의 원활한 조정을 설명하기 위해 컴퓨팅에서 많이 빌려 있습니다. 핵심 단어는 좌표 입니다. 우리는 시스템의 두 개 이상의 단위를 조정 된 방식으로 함께 넣어야합니다.

내구성은 오래 지속되는 탁월한 특징을 가진 모든 것을 설명하는 데 사용됩니다.

시스템 조정과 오래 지속되면 내구성있는 기능을 얻습니다. Azure의 서버리스 기능이 기능하는 경우 가장 강력한 기능입니다. 우리가 지금 알고있는 내구성 기능은 다음과 같은 두 가지 기능을 가지고 있습니다.

1. 그들은 두 개 이상의 함수의 실행을 조립하고 경주 조건이 발생하지 않도록 조정하는 데 사용될 수 있습니다 (오케스트레이션).
2. 내구성있는 기능은 사물을 기억합니다. 이것이 그렇게 강력하게 만드는 것입니다. HTTP의 가장 큰 규칙 인 Sationeless를 깨뜨립니다. 내구성있는 기능은 얼마나 오래 기다려야하든 상태를 그대로 유지합니다. 미래에 1,000,000 년 동안 일정을 작성하면 방아쇠 날에 전달 된 매개 변수를 기억하면서 백만 년 후에 내구성이 뛰어난 기능이 실행됩니다. 이는 내구성있는 기능이 상태가 적합하다는 것을 의미합니다 .

이러한 내구성은 서버리스 기능에 대한 새로운 기회의 새로운 영역을 잠금 해제하므로 오늘날 이러한 기능 중 하나를 탐색하는 이유입니다. 내구성이 뛰어난 기능의 가능한 사용 사례의 시각화 된 버전을 위해 Sarah의 기사를 한 번 더 권장합니다.

또한 오늘 우리가 쓸 내구성있는 기능의 행동을 시각적으로 표현했습니다. 이것을 애니메이션 아키텍처 다이어그램으로 사용하십시오.

외부 시스템 (8Base)의 데이터 돌연변이는 HTTP 트리거를 호출하여 오케스트레이션을 트리거합니다. 그런 다음 방아쇠는 이벤트를 예약하는 오케스트레이션 기능을 호출합니다. 실행 시간이 마감되면 오케스트레이션 함수가 다시 호출되지만 이번에는 오케스트레이션을 건너 뛰고 활동 기능을 호출합니다. 활동 기능은 액션 수행자입니다. 이것은“이메일 보내기”에 대한 실제 일입니다.

오케스트레이션 된 내구성 기능을 만듭니다

VS 코드를 사용하여 기능 작성을 안내해 드리겠습니다. 두 가지가 필요합니다.

1. Azure 계정
2. 대 코드

두 설정이 두 설정이되면 함께 묶어야합니다. VS 코드 확장 및 노드 CLI 도구를 사용하여이를 수행 할 수 있습니다. CLI 도구 설치로 시작하십시오.

NPM 설치 -G Azure-Funtions-Core-Tools

# 또는

양조 탭 azure/functions
Brew 설치 Azure-Funtions-Core-Tools

다음으로 Azure 기능 확장자를 설치하여 Azure의 함수에 vs 코드가 연결되도록하십시오. 이전 기사에서 Azure 기능 설정에 대한 자세한 내용을 읽을 수 있습니다.

이제 모든 설정이 완료되었으므로 이러한 기능을 만들어 봅시다. 우리가 작성할 기능은 다음 폴더에 매핑됩니다.

접는 사람	기능
일정	내구성있는 HTTP 트리거
ScheduleOrChestrator	내구성있는 오케스트레이션
SendEmail	내구성있는 활동

방아쇠로 시작하십시오.

1. Azure Extension 아이콘을 클릭하고 아래 이미지를 따라 일정 기능을 작성하십시오.
   
2. 이것이 첫 번째 함수이므로 기능 프로젝트를 만들기 위해 폴더 아이콘을 선택했습니다. 그 후 아이콘은 단일 함수 (프로젝트가 아닌)를 만듭니다.
3. 프로젝트 내에서 찾아보기를 클릭하고 서버리스 폴더를 만듭니다. 새 서버리스 폴더를 선택하십시오.
4. JavaScript를 언어로 선택하십시오. TypeScript (또는 기타 언어)가 잼이라면 자유롭게 느끼십시오.
5. 내구성있는 기능 HTTP 스타터를 선택하십시오. 이것은 방아쇠입니다.
6. 첫 번째 함수를 일정으로 지정하십시오

다음으로 오케스트레이터를 만듭니다. 기능 프로젝트를 작성하는 대신 대신 함수를 만듭니다.

1. 기능 아이콘을 클릭하십시오.
   
2. 내구성있는 기능 오케스트레이터를 선택하십시오.
3. 이름, ScheduleOrChestrator 및 Enter를 누르십시오.
4. 스토리지 계정을 선택하라는 메시지가 표시됩니다. Orchestrator는 스토리지를 사용하여 프로세스 기능 상태를 보존합니다.
5. Azure 계정에서 구독을 선택하십시오. 제 경우에는 무료 평가판 구독을 선택했습니다.
6. 나머지 몇 가지 단계를 따라 스토리지 계정을 만듭니다.

마지막으로, 이전 단계를 반복하여 활동을 만듭니다. 이번에는 다음이 달라야합니다.

• 내구성있는 기능 활동을 선택하십시오.
• 이름을 보내십시오.
• 스토리지 계정이 필요하지 않습니다.

내구성있는 HTTP 트리거로 스케줄링

서버리스/스케줄/index.js의 코드를 터치 할 필요가 없습니다. VS 코드 또는 CLI 도구를 사용하여 함수가 발판 될 때 원래 보이는 것입니다.

 const df = 요구 사항 ( "내구성 결합");
module.exports = Async 함수 (컨텍스트, req) {
  const client = df.getClient (컨텍스트);
  const instanceid = await client.startnew (req.params.functionName, undefined, req.body);
  context.log (`id = '$ {instanceid}'로 오케스트레이션을 시작했습니다.`);
  return client.createCheckStatusResponse (context.bindingData.Req, instanceId);
};

여기서 무슨 일이 일어나고 있습니까?

1. 우리는 요청의 컨텍스트를 기반으로하는 클라이언트쪽에 내구성있는 기능을 만들고 있습니다.
2. 우리는 클라이언트의 startNew () 함수를 사용하여 오케스트레이터를 호출합니다. Orchestrator 함수 이름은 Params Object를 통해 StartNew ()의 첫 번째 인수로 전달됩니다. REQ. Body는 또한 Orchestrator에게 전달되는 세 번째 인수로 StartNew ()로 전달됩니다.
3. 마지막으로, 오케스트레이터 기능의 상태를 확인하는 데 사용할 수있는 데이터 세트를 반환하거나 완료되기 전에 프로세스를 취소합니다.

위의 함수를 호출하는 URL은 다음과 같습니다.

 http : // localhost : 7071/API/Orchestrators/{functionName}

여기서 functionName은 StartNew로 전달 된 이름입니다. 우리의 경우에는 다음과 같아야합니다.

 // LocalHost : 7071/API/Orchestrators/ScheduleOrchestrator

이 URL이 어떻게 보이는지 변경할 수 있다는 것을 아는 것도 좋습니다.

내구성있는 오케스트레이터와 오케스트레이션

HTTP 트리거 스타트너 호출은 우리가 전달한 이름에 따라 함수를 호출합니다. 이 이름은 오케스트레이션 논리를 보유한 함수 및 폴더의 이름에 해당합니다. Serverless/ScheduleorChestrator/Index.js 파일은 내구성있는 기능을 내 보냅니다. 내용을 다음으로 바꾸십시오.

 const df = 요구 사항 ( "내구성 결합");
module.exports = df.orchestrator (function* (context) {
  const input = context.df.getInput ()
  // TODO -1
  
  // TODO -2
});

Orchestrator 함수는 context.df.getInput ()을 사용하여 HTTP 트리거에서 요청 본문을 검색합니다.

TODO를 교체하십시오 -1이 전체 데모에서 가장 중요한 일이 될 수있는 다음 코드 줄로 대체하십시오.

 context.df.createTimer (새 날짜 (input.startat))

이 줄은 내구성있는 기능을 사용하여 HTTP 트리거를 통해 요청 본문에서 전달 된 날짜에 따라 타이머를 만듭니다.

이 기능이 실행되고 여기에 도착하면 타이머와 보석금이 일시적으로 트리거됩니다. 일정이 마감되면 돌아와서이 줄을 건너 뛰고 Todo 대신에 사용해야하는 다음 줄을 호출합니다.

 반환 수율 context.df.callactivity ( 'sendemail', 입력);

함수는 활동 함수를 호출하여 이메일을 보냅니다. 우리는 또한 두 번째 논쟁으로 페이로드를 전달하고 있습니다.

이것이 완성 된 기능의 모습입니다.

 const df = 요구 사항 ( "내구성 결합");

module.exports = df.orchestrator (function* (context) {
  const input = context.df.getInput ()
    
  context.df.createTimer (새 날짜 (input.startat))
    
  반환 수율 context.df.callactivity ( 'sendemail', 입력);
});

내구성있는 활동이있는 이메일 보내기

일정이 마감되면 오케스트레이터가 다시 활동을 호출하기 위해 돌아옵니다. 활동 파일은 Serverless/SendEmail/Index.js에 있습니다. 거기에있는 것을 다음으로 바꾸십시오.

 const sgmail = require ( '@sendgrid/mail');
sgmail.setapikey (process.env [ 'sendgrid_api_key']);

module.exports = Async 함수 (컨텍스트) {
  // TODO -1
  const msg = {}
  // TODO -2
  반환 메시지;
};

현재 SendGrid의 메일러를 가져 와서 API 키를 설정합니다. 이 지침에 따라 API 키를 얻을 수 있습니다.

자격 증명을 안전하게 유지하기 위해 키를 환경 변수로 설정하고 있습니다. serverless/local.settings.json에서 sendgrid_api_key 키를 만들어 SendGrid key를 값으로 만들어 SendGrid_api_key 키를 동일한 방식으로 안전하게 저장할 수 있습니다.

 {
  "isencencrypted": 거짓,
  "가치": {
    "AzureWebJobsStorage": "",
    "functions_worker_runtime": "노드",
    "sendgrid_api_key": ""
  }
}

todo -1을 다음 줄로 교체하십시오.

 const {이메일, 제목, startat, description} = context.bindings.payload;

이렇게하면 오케스트레이터 기능의 입력에서 이벤트 정보를 가져옵니다. 입력은 컨텍스트에 연결됩니다. 페이로드는 이름을 지정할 수 있으므로 Serverless/SendEmail/Function.json으로 이동하여 이름 값을 페이로드로 변경하십시오.

 {
  "바인딩": [
    {
      "이름": "페이로드",
      "유형": "ActivityTrigger",
      "방향": "in"
    }
  ]]
}

다음으로, 다음 블록이있는 TODO를 업데이트하여 이메일을 보내십시오.

 const msg = {
  to : 이메일,
  보낸 사람 : {이메일 : '[이메일 보호]', 이름 : 'Codebeast Calendar'},
  제목 :`event : $ {title}`,
  html :`<h4 id="title-startat"> $ {title} @ $ {startat} </h4> <p> $ {description} </p>`
};
sgmail.send (msg);

반환 메시지;

완전한 버전은 다음과 같습니다.

 const sgmail = require ( '@sendgrid/mail');
sgmail.setapikey (process.env [ 'sendgrid_api_key']);

module.exports = Async 함수 (컨텍스트) {
  const {이메일, 제목, startat, description} = context.bindings.payload;
  const msg = {
    to : 이메일,
    보낸 사람 : {이메일 : '[이메일 보호]', 이름 : 'Codebeast Calendar'},
    제목 :`event : $ {title}`,
    html :`<h4 id="title-startat"> $ {title} @ $ {startat} </h4> <p> $ {description} </p>`
  };
  sgmail.send (msg);

  반환 메시지;
};

기능을 Azure에 배포합니다

Azure에 기능을 배포하는 것은 쉽습니다. VS 코드 편집기에서 클릭 한 번만 클릭 할뿐입니다. 선원 아이콘을 클릭하여 배포하고 배포 URL을 가져옵니다.

아직도 지금까지 나와 함께? 당신은 큰 진전을하고 있습니다! 여기서 휴식을 취하거나 낮잠, 스트레칭 또는 휴식을 취해서는 완전히 괜찮습니다. 나는이 게시물을 작성하는 동안 확실히했다.

8Base를 갖는 데이터 및 그래프 QL 레이어

8base 에 대한 가장 쉬운 설명과 이해는 "Firebase for GraphQL"입니다. 8Base는 생각할 수있는 모든 종류의 앱에 대한 데이터베이스 계층이며 가장 흥미로운 측면은 GraphQL을 기반으로한다는 것입니다.

스택에서 8Base가 적합한 위치를 설명하는 가장 좋은 방법은 시나리오의 그림을 페인트하는 것입니다.

클라이언트를위한 전자 상거래 상점을 구축하기 위해 소규모에서 중소 규모 계약을 체결 한 프리랜서 개발자라고 상상해보십시오. 귀하의 핵심 기술은 웹에 있으므로 백엔드에서 편안하지 않습니다. 약간의 노드를 쓸 수는 있지만.

불행히도 전자 상거래는 인벤토리 관리, 주문 관리, 구매 관리, 인증 및 신원 관리 등이 필요합니다. 기본 수준에서 "관리"하면 데이터 크루드 및 데이터 액세스가 필요합니다.

백엔드 코드에서 엔티티의 액세스를 생성, 읽기, 업데이트, 삭제 및 관리하는 중복 및 지루한 프로세스 대신 UI에서 이러한 비즈니스 요구 사항을 설명 할 수 있다면 어떨까요? CRUD 작업, 인증 및 액세스를 구성 할 수있는 테이블을 만들 수 있다면 어떨까요? 우리가 그러한 도움을 받았고 프론트 엔드 코드를 구축하고 쿼리를 작성하는 데만 집중한다면 어떨까요? 우리가 방금 설명한 모든 것은 8Base에 의해 해결됩니다

다음은 데이터 계층으로 8Base에 의존하는 백엔드리스 앱의 아키텍처입니다.

이벤트 저장 및 검색을위한 8Base 테이블을 만듭니다

테이블을 만들기 전에 가장 먼저해야 할 일은 계정을 만드는 것입니다. 계정이 있으면 주어진 프로젝트의 모든 테이블과 논리를 보유하는 작업 공간을 만듭니다.

다음으로 테이블을 만들고 테이블 이벤트의 이름을 지정하고 테이블 필드를 작성하십시오.

액세스 레벨을 구성해야합니다. 지금은 각 사용자로부터 숨길 것이 없으므로 생성 한 이벤트 테이블에 대한 모든 액세스를 켜면 다음과 같습니다.

Auth0과 통합되기 때문에 Auth를 설정하는 것은 8Base에서 매우 간단합니다. 보호를 받아야하는 엔티티가 있거나 Auth를 사용하기 위해 예제를 확장하려는 경우 와일드하십시오.

마지막으로 React 앱에서 사용하기 위해 엔드 포인트 URL을 잡습니다.

놀이터의 그래프 QL 쿼리 및 돌연변이 테스트

URL을 와일드로 가져 가서 클라이언트 구축을 시작할 준비가되었는지 확인하기 위해 먼저 GraphQL 놀이터로 API를 테스트하고 설정이 정상인지 확인합시다. 탐색기를 클릭하십시오.

편집기에 다음 쿼리를 붙여 넣으십시오.

 쿼리 {
  eventslist {
    세다
    항목 {
      ID
      제목
      startat
      endat
      설명
      Allday
      이메일
    }
  }
}

8Base UI를 통해 일부 테스트 데이터를 만들었고 쿼리를 실행할 때 결과를 다시 얻습니다.

탐색 페이지의 오른쪽 끝에있는 스키마 문서를 사용하여 전체 데이터베이스를 탐색 할 수 있습니다.

캘린더 및 이벤트 양식 인터페이스

프로젝트의 세 번째 (및 마지막) 단위는 사용자 인터페이스를 구축하는 React 앱입니다. UI를 구성하는 4 가지 주요 구성 요소가 있으며 다음을 포함합니다.

1. 캘린더 : 모든 기존 이벤트를 나열하는 캘린더 UI
2. Event Modal : EventForm 구성 요소를 구성 요소를 작성하도록 렌더링하는 React Modal
3. Event Popover : Popover UI 단일 이벤트 읽기, EventForm 또는 Delete Event를 사용하여 이벤트 업데이트
4. 이벤트 양식 : 새 이벤트를 만들기위한 HTML 양식

캘린더 구성 요소로 바로 다이빙하기 전에 React Apollo 클라이언트를 설정해야합니다. React Apollo 제공 업체는 React 패턴을 사용하여 GraphQL 데이터 소스를 쿼리하는 도구를 제공합니다. 원래 제공 업체를 사용하면 고차 구성 요소를 사용하거나 소품을 쿼리하고 데이터를 돌출 할 수 있습니다. 우리는 원래 공급자에게 래퍼를 사용하여 React 후크를 사용하여 쿼리 및 돌연변이를 제공 할 것입니다.

src/index.js에서 Todo에서 React Apollo hooks와 8base 클라이언트를 가져옵니다 - 1 :

 'React-Apollo-Hooks'에서 {apolloprovider} 가져 오기;
'@8base/apollo-client'에서 {8baseapolloclient} import;

TODO -2에서는 8Base 설정 단계에서 얻은 엔드 포인트 URL로 클라이언트를 구성합니다.

 const uri = 'https://api.8base.com/cjvuk51i0000701s0hvvcbnxg';

const apolloclient = 새로운 8baseapolloclient ({{
  Uri : Uri,
  Withauth : 거짓
});

이 클라이언트를 사용하여 전체 앱 트리를 TODO의 제공자와 함께 포장합니다. 3 :

 REACTDOM.RENDER (
  <apolloprovider client="{apolloclient}">
    <app></app>
  </apolloprovider>,
  document.getElementById ( 'root')
);

달력에 이벤트 표시

캘린더 구성 요소는 앱 구성 요소 내부에 렌더링되고 NPM에서 BigCalendar 구성 요소를 가져옵니다. 그 다음에 :

1. 우리는 이벤트 목록과 함께 캘린더를 렌더링합니다.
2. 캘린더는 이벤트를 편집하는 데 사용될 맞춤형 팝 오버 (EventPopover) 구성 요소를 제공합니다.
3. 우리는 새로운 이벤트를 만드는 데 사용될 모달 (EventModal)을 렌더링합니다.

우리가 업데이트해야 할 유일한 것은 이벤트 목록입니다. 정적 이벤트 배열을 사용하는 대신 모든 매장 이벤트에 대해 8Base를 쿼리하려고합니다.

todo -1을 다음 줄로 교체하십시오.

 const {data, error, loading} = useQuery (events_query);

파일 시작시 NPM과 Events_Query에서 UseQuery 라이브러리를 가져옵니다.

 'React-Apollo-Hooks'에서 {useQuery} 가져 오기;
'../../queries'에서 {events_query} 가져 오기;

Events_Query는 8Base Explorer에서 테스트 한 것과 정확히 동일한 쿼리입니다. SRC/쿼리에 살고 있으며 다음과 같습니다.

 내보내기 const events_query = gql`
  쿼리 {
    eventslist {
      세다
      항목 {
        ID
        ...
      }
    }
  }
`;;

Todo에서 간단한 오류와로드 핸들러를 추가하겠습니다 -2 :

 if (error) return console.log (error);
  if (로드)
    반품 (
      <div classname="캘린더">
        <p> 로딩 ... </p>
      </div>
    );

캘린더 구성 요소는 EventPopover 구성 요소를 사용하여 사용자 정의 이벤트를 렌더링합니다. 캘린더 구성 요소 파일이 이벤트 모달도 렌더링하는 것을 볼 수도 있습니다. 두 구성 요소 모두 귀하를 위해 설정되었으며, 유일한 책임은 EventForm을 렌더링하는 것입니다.

이벤트 양식 구성 요소로 이벤트 작성, 업데이트 및 삭제

src/components/event/eventform.js의 구성 요소는 양식을 렌더링합니다. 양식은 이벤트를 작성, 편집 또는 삭제하는 데 사용됩니다. TODO -1에서 USECREATEUPDATEMATUM 및 중고 템플릿을 가져 오십시오.

 import {USECREATEUPDATEMATUMATUTATION, usedELETEMATUMATUMATIC}에서 './eventMatureHooks'

• USECREATEUPDATEMATION :이 돌연변이는 사건이 이미 존재했는지 여부에 따라 이벤트를 생성하거나 업데이트합니다.
• 중고 재개 :이 돌연변이는 기존 이벤트를 삭제합니다.

이러한 함수 중 하나에 대한 호출은 다른 기능을 반환합니다. 반환 된 기능은 짝수 처리기 역할을 할 수 있습니다.

이제 계속해서 TODO를 교체하십시오. 2는 두 기능을 모두 호출합니다.

 const createupdateevent = usecreateupdatemation (
  유효 탑재량,
  이벤트,
  EventExists,
  () => CloseModal ()
);
const deleteevent = usedeletemutation (event, () => closeModal ());

이들은 반응 아폴로 후크 (Apollo Hooks)에 의해 노출 된 usemutation을 포장하기 위해 쓴 커스텀 후크입니다. 각 후크는 돌연변이를 생성하고 돌연변이 변수를 usemutation 쿼리로 전달합니다. SRC/구성 요소/이벤트/EventMutationHooks.js에서 다음과 같은 블록이 가장 중요한 부분입니다.

 usemutation (mutationtype, {
  변수 : {
    데이터
  },
  업데이트 : (캐시, {data}) => {
    const {eventsList} = Cache.ReadQuery ({
      쿼리 : events_query
    });
    cache.writeQuery ({
      쿼리 : Events_Query,
      데이터 : {
        EventsList : TransformCacheUpDatedAta (EventsList, Data)
      }
    });
    // ..
  }
});

8Base에서 내구성있는 기능 HTTP 트리거를 호출하십시오

우리는 캘린더 앱의 서버리스 구조, 데이터 스토리지 및 UI 계층을 구축하는 데 꽤 많은 시간을 보냈습니다. 요약하기 위해 UI는 스토리지를 위해 8base로 데이터를 보내고, 8Base는 데이터를 저장하고 내구성 기능 HTTP 트리거, 오케스트레이션의 HTTP 트리거 차기를 트리거하며 나머지는 역사입니다. 현재 우리는 돌연변이로 데이터를 저장하고 있지만 8Base의 어느 곳에서나 서버리스 기능을 호출하지 않습니다.

8Base를 사용하면 매우 강력하고 확장 가능한 사용자 지정 로직을 작성할 수 있습니다. 사용자 정의 로직은 8Base 데이터베이스에서 수행 된 작업을 기반으로하는 간단한 기능입니다. 예를 들어, 우리는 테이블에서 돌연변이가 발생할 때마다 호출 할 논리를 설정할 수 있습니다. 이벤트가 만들어 질 때 호출되는 것을 만들어 봅시다.

8Base CLI를 설치하여 시작하십시오.

 NPM 설치 -G 8Base

캘린더 앱 프로젝트에서 다음 명령을 실행하여 스타터 로직을 만듭니다.

 8Base init 8base

8base init 명령은 새로운 8base 로직 프로젝트를 만듭니다. 이 경우 디렉토리 이름을 전달할 수있는 8base 로직 폴더 (8base)를 지명하지 마십시오.

트리거 스케줄링 로직

8base/src로 모든 것을 삭제하고 SRC 폴더에서 triggerschedule.js 파일을 만듭니다. 이 작업을 마치면 다음을 파일로 떨어 뜨립니다.

 const fetch = require ( 'node-fetch');

module.exports = async event => {
  const res = await fetch ( '<http trigger url>', {
    방법 : 'post',
    바디 : json.stringify (event.data),
    헤더 : { 'content-type': 'application/json'}
  })
  const json = await res.json ();
  Console.log (이벤트, JSON)
  json 리턴;
};</http>

GraphQL 돌연변이에 대한 정보는 이벤트 객체에서 데이터로 사용할 수 있습니다.

을 기능을 배포 한 후 얻은 URL로 교체하십시오. Azure URL의 함수로 이동하여 URL을 가져 와서 "Copy URL"을 클릭 할 수 있습니다.

또한 API에서 데이터를 가져 오는 노드 페치 모듈을 설치해야합니다.

 NPM 설치-사인 노드 페치

8Base 로직 구성

다음으로해야 할 일은 8Base 에게이 논리를 유발하는 데 필요한 정확한 돌연변이 또는 쿼리를 알려주는 것입니다. 우리의 경우, 이벤트 테이블에서 돌연변이를 만듭니다. 이 정보는 8base.yml 파일로 설명 할 수 있습니다.

 기능 :
  Triggerschedule :
    매니저:
      코드 : src/triggerschedule.js
    유형 : 트리거
    작동 : 이벤트

어떤 의미에서, 이것은 이벤트 테이블에서 생성 돌연변이가 발생하면 돌연변이가 발생한 후 SRC/Triggerschedule.js에 전화하십시오.

우리는 모든 것을 배포하고 싶습니다

무엇이든 배포되기 전에 8base 계정에 로그인해야하며 명령 줄을 통해 수행 할 수 있습니다.

 8베이스 로그인

그런 다음 배포 명령을 실행하여 작업 공간 인스턴스에서 앱 로직을 보내고 설정합시다.

 8 기반 배포

전체 흐름을 테스트합니다

모든 영광의 앱을 보려면 캘린더의 날 중 하나를 클릭하십시오. 양식을 포함하는 이벤트 모달을 가져와야합니다. 우리가 알림을 트리거하도록 미래의 시작 날짜를 입력하고 미래의 시작 날짜를 넣으십시오. 그보다 더 빨리 알림을 트리거 할 수 없었기 때문에 현재 시간에서 2-5 분 이상 날짜를 시도하십시오.

https://www.youtube.com/watch?v=simam4fxpoo&

예, 이메일 확인하세요! Sendgrid에게 감사의 말씀을 전합니다. 이제 우리는 이벤트를 만들고 이벤트 제출의 세부 사항을 알릴 수있는 앱이 있습니다.

위 내용은 이봐, Jamstack과 함께 기능적 달력 앱을 만들자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!