GraphQL 및 AWS AppSync를 사용한 실시간 협업 드로잉

To see the code for this & to launch this project, click here to go to the GitHub repo.

React Day Norway & React India에서 예정된 강연을 위해 몇 가지 데모를 준비하고 있습니다.

이 강연에서는 GraphQL 및 GraphQL 구독의 흥미로운 사용 사례를 시연하고 있습니다. 실시간 기능을 매우 쉽게 구축할 수 있기 때문에 GraphQL 구독의 실시간 측면에 초점을 맞춘 많은 아이디어가 있습니다.

꽤 멋져 보이는 react-canvas-draw이라는 라이브러리를 우연히 발견했습니다. 내가 좋아하는 점은 그리기를 허용하는 라이브러리일 뿐만 아니라 스트로크를 배열에 저장한 다음 생성된 것과 동일한 순서로 다시 칠할 수 있다는 것입니다!

이것은 내 응용 프로그램의 완벽한 사용 사례처럼 보였습니다. 캔버스에 그리기 위해 저장된 선의 데이터 구조는 다음과 같습니다.

{
  lines: [
    { points: [{ x: 132, y: 144 }, { x: 133, y: 145 }], "brushColor":"#FF6D00","brushRadius": 4 },
    { points: [{ x: 132, y: 144 }, { x: 133, y: 145 }], "brushColor":"#000","brushRadius": 4 }
  ],
  width: "400px",
  height: "400px"
}

내가 가진 기본적인 생각은 이 데이터를 추출하고 GraphQL API에서 업데이트하는 방법을 찾은 다음 업데이트되면 구독을 트리거하는 것이었습니다. React Canvas Draw에는 이것을 매우 쉽게 만드는 몇 가지 방법이 있습니다. 실제로 캔버스 페인팅을 완전히 제어할 수 있는 몇 가지 메서드를 제공합니다. 내가 사용한 몇 가지를 살펴 보겠습니다.

getSaveData - 이 메소드는 현재 캔버스 상태를 제공합니다

.

loadSaveData - 이 방법을 사용하면 전체 데이터 세트를 캔버스에 쓸 수 있습니다

.

simulationDrawingLines - 이 방법은 캔버스에 한 줄을 씁니다

.

캔버스와 상호 작용하는 방법을 알았으니 이제 GraphQL API와 상호 작용하는 방법은 무엇입니까?

먼저 기본 스키마를 만들었습니다.

type Canvas {
  id: ID!
  clientId: String!
  data: String!
}

우리가 따라잡아야 할 주요 사항은 캔버스의 고유id와 data라는 필드에 저장하는 캔버스 데이터입니다.

AWS AppSync를 사용하면 Amplify CLI 및 GraphQL Transform library과 함께 사용할 때 @model 지시문을 추가하여 나머지 스키마와 데이터 소스 및 확인자를 스캐폴딩할 수 있습니다.

type Canvas @model {
  id: ID!
  clientId: String!
  data: String!
}

처음부터 빌드하는 단계

그래서 이를 시작하고 실행하기 위해 새로운 React 애플리케이션을 만들었습니다.

npx create-react-app canvas-app

다음으로 새 증폭 프로젝트를 초기화하고 API 및 스키마를 추가했습니다.

amplify init

amplify add api

# When prompted, I use the schema I referenced above

amplify push

마지막으로 Canvas.js을 생성하여 내 애플리케이션의 모든 기본 코드를 보관하고 이 파일을 내 애플리케이션의 기본 파일로 사용했습니다.

그런 다음 react-canvas-draw 라이브러리를 포함하는 RCD.js이라는 새 파일을 만들었습니다. 업데이트가 필요한 경우를 대비하여 로컬에서 참조했지만 사용 가능한 다양한 방법을 쉽게 실험할 수 있도록 로컬에서 사용했습니다.

그게 다야! GraphQL 구독을 사용하면 실시간 애플리케이션을 정말 쉽게 시작하고 실행할 수 있습니다. 이것에 대해 질문이 있으시면 언제든지 .

My Name is . I am a Developer Advocate at Amazon Web Services working with projects like AWS AppSync and AWS Amplify. I specialize in cross-platform & cloud-enabled application development.