To view the live demo, click here.
To view the repo, click here.

나는 최근에 GraphQL 구독을 꽤 많이 가지고 놀았고, 응용 프로그램에 실시간 기능을 추가하여 대화형으로 만들었습니다. 지난 주에 react-canvas-draw을 사용하여 실시간 드로잉 앱을 출시했습니다.

















네이더 다빗










AWS AppSync에 구축된 GraphQL 구독을 사용하여 협업 실시간 그리기 앱을 구축했습니다! 코드는 github.com/dabit3/appsync…에 있습니다. 또한 구축 방법에 대한 게시물을 dev.to/dabit3/real-ti…에 작성했습니다.


오후 12:54 - 2019년 3월 11일





97

374



몇 주 전에 저는 React NYC에서 React Hooks를 사용하여 비트박스를 구축하는 것에 대한 이 강연을 보았습니다.



보고 나서 꽤 흥이 났어요. 그런 다음 저장소를 찾아 복제하고 더 흥미롭게 만들기 위해 무엇을 할 수 있는지 생각하기 시작했습니다.

켄휠러 / 후크 드럼 머신

리액트 데이 베를린 데모

후크 드럼 머신

React Hooks로 구축된 간단한 스텝 시퀀서

skrrt하는 방법

달리다 npm start

멋져

View on GitHub



드럼 머신에는 기본적으로 스텝 시퀀서를 통해 실행되는 다양한 비트(베이스, 클랩, 스네어 등)가 있습니다.



스텝 시퀀서를 사용하면 시퀀스의 각 항목을 단계별로 왼쪽에서 오른쪽으로 순서대로 이동합니다. 항목이 강조 표시되면 관련 사운드가 재생됩니다.



드럼 머신은 시퀀서의 각 비트에 대한 배열 세트로 비트의 초기 상태를 제공합니다.



비트가 0으로 설정되면 재생되지 않고(강조 표시되지 않음), 1로 설정되면(강조 표시됨) 재생되고, 2로 설정되면(깜박임) 세 번 재생됩니다.

To learn more about how the drum machine works under the hood, check out the video .

GraphQL 구독을 통해 협업 및 실시간으로 만들기

내가 가진 아이디어는이 협업을 만드는 것입니다. 그러기 위해서는 고유한 드럼 머신을 만들고 공유할 수 있는 기능을 추가해야 했습니다. 사용자는 실시간으로 기계를 업데이트/변경할 수 있으며 변경 사항이 있을 때 모든 기계에서 음악이 업데이트됩니다.

이를 위해 저는 세 가지 주요 작업을 수행해야 했습니다.

드럼 머신을 동적으로 만들기

라우팅 추가

실시간 기능 추가, 이상적으로는 GraphQL 구독

드럼 머신을 동적으로 만들고 구독을 추가하기 위해 AWS AppSync를 사용하여 배포한 드럼 머신을 보관할 기본 GraphQL 스키마를 생성했습니다.

type Beatbox @model {
  id: ID!
  clientId: ID!
  beats: String!
  name: String!
}

드럼 머신의 상태는 기본 JSON 객체이기 때문에 데이터를 매우 쉽게 데이터베이스에 저장stringify할 수 있다고 생각했습니다.

내가 생각해야 할 다른 것은 라우팅이었습니다. 이를 위해 React Router을 사용했고 다음과 같은 라우팅 체계를 고안했습니다.

/machine/:id/:name

비트 데이터 외에도 각 드럼 머신에는 식별 및 쿼리에 사용할 고유한id 및 속성name이 있습니다.

구독 데이터를 처리하기 위한 clientId도 있어 클라이언트에서 중복 항목을 필터링하는 방법을 제공합니다.

예를 들어 사용자가 경로에 도착하면 다음과 같습니다.

/machine/d562581d-2a2d-4597-a6bb-2580deaf0254/BassLord

URL을 구문 분석하고 컴퓨터 이름과 ID를 검색합니다.

우리는 UI에서 머신 이름을 사용하고 머신을 생성하거나 쿼리하기 위해 ID를 사용합니다.

사용자가 변경하면 API에서 업데이트를 트리거합니다.

// DrumMachine.js
async function updateBeatbox(beats, machineId) {
  const beatbox = {
    id: machineId, clientId, beats: JSON.stringify(beats)
  }
  try {
    await API.graphql(graphqlOperation(UpdateBeatbox, { input: beatbox }))
    console.log('successfully updated beatbox...')
  } catch (err) {
    console.log('error updating beatbox...:', err)
  }
  return () => {}
}

updateBeatBox 메서드는 Step.js 에서 호출됩니다.

또한 GraphQL API에서 업데이트를 수신하기 위해 구독을 생성합니다.

// DrumMachine.js
useEffect(() => {
  const subscriber = API.graphql(graphqlOperation(onUpdateBeatbox)).subscribe({
    next: data => {
      const { value: { data: { onUpdateBeatbox: { clientId: ClientId, beats }}}} = data
      if (ClientId === clientId) return
      setSteps(JSON.parse(beats))
    }
  });
  return () => subscriber.unsubscribe()
}, []);

그 외에는 드럼 머신의 기능을 그대로 사용했습니다!

To view the live demo, click here.
To view the repo, click here.

기여 / 다음 단계

다음으로 하고 싶은 것은 더 많은 비트를 추가하는 것입니다! 나는 또한 더 많은 소리를 추가하고 싶습니다. 이것에 기여하고 싶다면 자유롭게 & 또는 submit a pull request 로 연락주세요!
이 애플리케이션을 직접 배포하려면 리포지토리의 설명서를 확인하여 시작하고 실행하세요.

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.