Appwrite(웹) 시작하기+Appwrite에서 실시간 데이터 업데이트

앱라이트란?

짧은 시간에 프런트엔드와 백엔드를 혼자 관리하는 것은 정말 어렵습니다. 여기 이 그림에 대한 서비스로서의 백엔드가 있습니다. 우리는 모두 Firebase에 대해 들었습니다. Appwrite는 오픈 소스인 Firebase(Backend as a Service) 대안입니다. 개발자에게 애플리케이션을 구축하는 데 필요한 모든 필수 API를 제공합니다. 웹, 모바일과 같은 모든 플랫폼에서 이 도구를 사용할 수 있습니다.

설치

Docker를 사용하여 설치해야 합니다.
이제 이것을 복사하여 터미널에 붙여넣으십시오.

유닉스에서

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:0.13.4

CMD에서

docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:0.13.4

PowerShell에서

docker run -it --rm ,
    --volume /var/run/docker.sock:/var/run/docker.sock ,
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw ,
    --entrypoint="install" ,
    appwrite/appwrite:0.13.4

이제 localhost:80에서 Appwrite 사용자 대시보드를 실행합니다.
그런 다음 프로젝트를 만듭니다.

그런 다음 프로젝트에 appwrite sdk를 설치해야 합니다.npm install appwrite
이제 패키지를 설정할 시간입니다.

import { Appwrite } from "appwrite";
export const appwrite = new Appwrite();

appwrite.setEndpoint("<your_project_emdpoint>").setProject("<your_project_id>");
export const db=appwrite.database;
export const account = appwrite.account;
export const CollectionID="<your_data_base_collection_id>";

첫 번째 요청하기

appwrite.account.create('unique()', '[email protected]', 'password', 'Jane Doe')
        .then(response => {
            console.log(response);
        }, error => {
            console.log(error);
        });

축하해요! 첫 번째 요청을 성공적으로 완료했습니다(사용자 등록).
이제 appwrite web sdk의 문서를 살펴보겠습니다.
documentation appwrite

appwrite를 사용한 RealTime

Realtime을 실행하려면 채널을 구독해야 합니다.

const sdk = new Appwrite();

sdk.subscribe(['collections.name_of_your_collection.documents'], response => {
    // Callback will be executed on changes for documents A and all files.
    console.log(response);
});

구독 기능의 첫 번째 매개변수는 'collections.name_of_your_collection.documents' 또는 'files' 또는 'account'가 될 수 있는 채널 배열을 포함합니다. 채널에 따라 특정 기능에서 실시간 업데이트를 수행할 수 있습니다.

이후 구독에서 업데이트를 받고 싶지 않으면 구독을 취소해야 합니다.

const sdk = new Appwrite();

const unsubscribe = sdk.subscribe('files', response => {
    // Callback will be executed on changes for all files.
    console.log(response);
});

// Closes the subscription.
unsubscribe();

React의 코드 예제

useEffect 후크에서 다음과 같이 구독/구독 취소 코드를 작성할 수 있습니다.

useEffect(() => {
    const unsubscribe= 
appwrite.subscribe(['collection.<put_your_collection_name>.documents'],(data)=>{
      if(data.event==='database.documents.update'){
        setmsg((msgs)=>[...msgs,data.payload]);
      }
    });

 return ()=>{
    unsubscribe();
  }

  }, [])

또한 내가 웹앱을 빌드하는 내 git repo를 확인할 수 있습니다. 이 웹앱은 로그인/가입 페이지와 함께 표시됩니다(사용자는 편의에 따라 둘 사이를 전환할 수 있음). 사용자가 로그인하면 각 사용자의 사용자 이름, 이메일 및 기여 횟수를 보여주는 사용자 대시보드가 ​​나타납니다. Appwrite SDK를 사용하여 구현되었습니다. 그런 다음 웹 앱에서 가장 흥미로운 부분인 '기여' 섹션을 통해 작성자가 질문한 문제에 사용자가 실시간으로 답변할 수 있습니다. 또한 사용자는 작성자가 되어 각각의 의심이나 코드에서 직면한 문제를 게시할 수 있습니다(사용자는 코드 스크린샷을 첨부할 수도 있음).

github 레포 링크 :- linkgithubrepo