ReactJSのリアルタイムアプリケーションの通知を処理する

ReactJSのリアルタイムアプリケーションの通知を処理する
通知は、特定の情報の一部にユーザーの注意を引くために使用されます.通知としては、さまざまなブランドのメッセージのような通知媒体を採用して、ウェブサイトやアプリケーション上の電子メールのアイコンを使用して来ている.彼らは通常、ユーザーを従事し、ウェブサイトの訪問者を保持するために採用されます.他の回、通知は内部的にアプリケーションのメトリクスと状態を監視するために使用されます.

我々は何を構築する

このポストは、反応でリアルタイムのアプリ通知を管理する方法について説明します.js私たちはトリガし、我々のデータベースのイベントが発生したときに通知を購読する.これはカスタムサーバを必要としません.
ギタブURL
https://github.com/Iheanacho-ai/appwrite--notifications-app
必要条件
この記事を最大限に活用するには、次の手順が必要です.

CSS、JavaScript、および反応の基本的な理解.js

Dockerデスクトップコンピュータにインストールされます.を実行するdocker -v Dockerデスクトップがインストールされているか確認するコマンド.そうでない場合は、here .

安Appwrite コンピュータ上で実行中のインスタンス.チェックアウトdocumentation ローカルのAppWriteインスタンスを作成するには私たちはAppWriteの強力なリアルタイムサービスアプリケーションの通知を処理します.

反応の設定アプリケーション

我々は反応を作成するために我々の優先ディレクトリに移動します.このコマンドを使用したJSアプリケーション

    npx create-react-app <name of our app>

我々のアプリを作成した後、我々のプロジェクトにディレクトリを変更し、ローカル開発サーバーを起動します.

    cd <name of our project>
    npm run start

アプリを表示するには、我々はhttps://localhost:3000

依存関係のインストール

appwriteのインストール
Appwrite 開発者がアプリケーションをより速く構築することができるオープンソース、エンドツーエンド、バックエンドサーバーソリューションです.AppWriteは、既製のツールとシステムを生産準備アプリケーションを構築するために提供します.
appwrite反応をインストールします.このターミナルコマンドを実行することによって、クライアント側SDK.

    npm install appwrite

反応のインストール
React-Toastify は、スーパーカスタマイズ可能な通知コンポーネントを作成することができます反応フレームワークです.
これらのコマンドを実行して、totritifyをインストールします.

    npm install --save react-toastify
    #or
    yarn add react-toastify

新規appwriteプロジェクトの作成
ローカルのAppWriteインスタンスを実行すると、コンソールにアクセスできます.アカウントを作成するために開始されたポートに対して、ローカルのAppWriteインスタンスに行きます.通常、これはlocalhost:80 またはAppWriteのインストール中に指定します.
コンソールで、「プロジェクトを作成」ボタンがあります.我々はそれをクリックして新しいプロジェクトを開始します.
プロジェクトを作成したら、プロジェクトダッシュボードが表示されます.ページの上部には、設定バーがあります.プロジェクトIDとAPIエンドポイントへのアクセスとコピーをクリックします.次はこれらを使います.
にApp.jsx プロジェクトIDと終了点を使用して新しいAppWriteインスタンスを作成します.

    import {Appwrite} from "appwrite";
    import {useEffect, useState } from "react";
    import './App.css';

    const App = () => {

        // Init our Web SDK
        const sdk = new Appwrite();
        sdk
        .setEndpoint('http://localhost/v1') // our API Endpoint
        .setProject(projectID) // our project ID
        ;

        return(
          <div>Hello World!</div>
        )
    }

    export default Home;

データベースコレクションと属性の作成
我々のところへConsole . ダッシュボードの左側にあるデータベースをクリックします.データベースメニューをクリックすると、コレクションページにリダイレクトされます.
コレクションの追加ボタンをクリックしてデータベースタブにコレクションを作成します.このアクションはパーミッションページにリダイレクトされます.
コレクションレベルでは、ロールと書き込みアクセスをロールで指定します.

許可ページの右側にあるコレクションIDをコピーします.このコレクションでドキュメントを操作する必要があります.
次に、属性タブを使用して、ドキュメントが必要なプロパティを作成します.
メッセージの単一の文字列属性が必要です.

当社の通知アプリケーションを作成します。

私たちの通知アプリケーションのUIは、ドキュメントを作成し、ドキュメントを更新し、最後に、ドキュメントを削除するには、3つのボタンで構成されています.
我々は、我々に行きますApp.jsx ボタンを作成します.

    import {Appwrite} from "appwrite";
    import './App.css';

    const App = () => {
      // Init our Web SDK
        const sdk = new Appwrite();
        sdk
        .setEndpoint('http://localhost/v1') // our API Endpoint
        .setProject(projectID) // our project ID
        ;
      return (
        <div className="App">
          <button type='button'>Create Document</button>
          <button type='button'>Update Document</button>
          <button type='button'>Delete Document</button>
        </div> 
      )
    }

データベース相互作用の取り扱い

AppWriteは、ユーザーが署名し、安全ポリシーとしてデータベースに読み書きすることができます.ただし、AppWriteでは、このポリシーをバイパスする匿名セッションを作成できます.
我々の中でindex.js を使用して匿名のユーザーセッションを作成しますcreateAnonymousSession メソッド.そして、useEffect 我々が電話したいフックcreateAnonymousSession 一度我々のアプリがマウントされます.

    //creating an anonymous Session
    const createAnonymousSession = async() => {
      try{
        await sdk.account.createAnonymousSession();
      }catch(err){
        console.log(err)
      }

    }
    useEffect(()=> {
      createAnonymousSession()
    }, [])

次に、反応を使用するuseState フック、2つの状態変数を作成します.theArray , and response .

The theArray 状態変数は、データベースに作成するすべてのドキュメントのドキュメントID番号を保持します.

The response 状態変数にはAppWriteから受信したリアルタイム通知ペイロードが含まれます.

    const [theArray, setTheArray] = useState([]);
    const [response, setResponse] = useState('Welcome!');

コレクションを購読する
当社のアプリケーションの通知を表示するたびに作成、更新、または当社のコレクション内のドキュメントを削除します.我々は、データベースのアクションが発生するたびにペイロードを得るために我々のコレクションを購読することによってこれを達成する.

    const sdk = new Appwrite();
      sdk
        .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
        .setProject(projectsID) // Your project ID
      ;
      async function createAnonymousSession(){
        try{
            await sdk.account.createAnonymousSession();
        }catch(err){
            console.log(err)
        }

      }
      useEffect(()=> {
        createAnonymousSession();
        if(sdk.account.get !== null){
          try {
            sdk.subscribe('collections.[collectionID].documents', response => {
              setResponse(`The Appwrite ${response.event} event was called`)


            });

          } catch (error) {
            console.log(error, 'error')
          }
        }

      }, [])

上のコードブロックで次のようにします.

チェックするsdk.account.get がNULLでない.このチェックは、我々のコレクションチャンネルを購読する前にアクティブなユーザーセッションを実行していることを保証します.

appwriteの使用subscribe メソッドを購読したいチャネルと、パラメータとしてコールバック関数を受け取ります.私たちが購読できる様々なチャンネルについてもっと理解するために、appwriteのdocsをチェックしてください.

更新response コールバック関数の応答による状態変数.

リストの一覧
我々の中でApp.jsx ファイルを作成するlistDocuments データベースからデータを取得し、theArray 配列.

    const listDocuments = async() => {
      try { 
        let response = await sdk.database.listDocuments(collectionID);
        response.documents.map(document => setTheArray(prevArray => [...prevArray, document.$id]) )

    } catch (error) {
        console.log(error);
      }
    }

私たちはappwriteのlistDocuments データを取得する関数.このコレクションIDは、AppWriteコンソールのパーミッションページから取得したIDと同じです.
The listDocuments 関数は、新しく作成したドキュメントのIDをtheArray 配列.
新しいドキュメントの作成
我々の中でApp.jsx ファイルを書くcreateDocument 関数は、デフォルトのドキュメントを作成するデータベースです.これを使用してイベントトリガーをシミュレートします.

    const createDocument = async () => {
      try{
        await sdk.database.createDocument(collectionID, "unique()", {
          "message": "Hello World!",
        });

        listDocuments()

      }catch(error){
        console.log(error)
      }

      }

The createDocument 上記の関数は以下のようになります.

appwriteを使用するcreateDocument() メソッド、コレクションID、および新しいドキュメントを作成するドキュメントペイロード.

呼び出しlistDocuments 関数.

ドキュメントを作成すると失敗します.

コレクション内のドキュメントの削除。

我々の中でApp.jsx ファイルを作成するdeleteDocument コレクション内のドキュメントを削除する方法.

    const deleteDocument = async () => {
      if (theArray.length > 0) {
        try {
          let documentID = theArray[theArray.length - 1]
          await sdk.database.deleteDocument(collectionID, documentID);
          listDocuments();
        } catch (error) {
          console.log(error)
          }  
        } else {
          alert('database is empty')
        }
    }

The deleteDocument 関数は以下のようにします.

チェックするtheArray lengthは0より大きい.それがそうであるならば、我々はAで我々の配列で最後の文書IDを保存したいですdocumentID 変数.ただし、theArray lengthが0より小さい場合、データベースが空であることを警告します.

appwriteを使用してドキュメントを削除するdeleteDocument() メソッド.このdeleteDocument メソッドは、コレクションIDとドキュメントIDパラメーターを受け取ります.

はlistDocuments 関数.

ドキュメントを作成すると失敗します.

ここで我々のApp.js ファイルのようです.
https://gist.github.com/Iheanacho-ai/c3d5edf96cb59b045f4d53376cc5b7fe
次に、これらの関数をonClick ボタンのイベントリスナー.

    <div className="App">
      <button type='button' onClick={createDocument}>Create Document</button>
      <button type='button' onClick={deleteDocument}>Delete Document</button>
    </div>

我々の反応toastify通知をつくること

このセクションでは、応答tototifyライブラリを使用してアプリケーションで通知を作成することについて説明します.
我々のアプリでの応答toastify通知を使用するには、我々はインポートする必要がありますToastContainer コンポーネントtoast インスタンス、およびApp.jsx ファイル.

    import { ToastContainer, toast } from 'react-toastify';
    import 'react-toastify/dist/ReactToastify.css';

次に、このコードの下で私たちの通知を表示する情報を指定します.

    const notify = (response) => {
      toast(response)
    };

    useEffect(() => {
      notify(response);
    }, [response]);

私たちはnotify を呼び出すコードブロックの関数toast 関数.このtoast 関数はレスポンス変数をパラメータとして受け取ります.The response データはトーストで渡されます.
では、useEffect フックを実行するnotify 関数が応答パラメータを変更したときに使用します.
最後に、我々はToastContainer プロジェクトへのコンポーネント.

    return (
      <div className="App">
        <button type='button' onClick={createDocument}>Create Document</button>
        <button type='button' onClick={deleteDocument}>Delete Document</button>
        <ToastContainer/>
      </div>
    );

ここで我々のApp.jsx ファイルは次のようになります.
https://gist.github.com/Iheanacho-ai/656f05b6e98ca1422633b112f85b37f8
ここに我々の通知アプリです.

各ボタンをクリックして、我々はアクションの通知を受け取る.このプロジェクトは単一のページでこれをシミュレートします、より複雑なアプリケーションはページ、装置または独立したインターフェースを通してこのインタラクションを利用するでしょう.

結論

この記事では、AppWriteのリアルタイム機能を使用して、アプリケーションイベントを購読する方法について説明します.

資源

役に立つかもしれないリソースがいくつかあります.

Getting started with Appwrite for web

react-toastify

What is Appwrite and How to use it Efficiently.