Web開発者向けのAppWriteのリアルタイムでの入門

AppWriteのリアルタイムサービスを待っているすべての人々のために、我々は良いニュースがあります.Appwriteの最新バージョンは、リアルタイムサービスでリリースされており、それを使用してappwriteの残りのAPIとして簡単です.以来、いくつかの更新プログラムは、リアルタイムのアルファとのチュートリアルを開始しました.このチュートリアルでは、AppWriteの更新されたリアルタイムサービスを使用してKanban board project .


📝 必要条件
このチュートリアルで続行するには、プロジェクトでAppWriteコンソールにアクセスする必要があります.既にAppWriteをインストールしていない場合は、どうぞ.AppWriteのインストールは、Appwriteの公式の次は本当に簡単ですinstallation docs . インストールはわずか2分かかる必要があります.インストールしたら、コンソールにログインし、新しいプロジェクトを作成します.

💾 セットアップデータベース
したら、コンソールにログインしてプロジェクトを選択したら、データベースのページに取得するには、データベースのオプションのダッシュボードのクリックの左側サイドバーから.
データベースページに一度、[コレクションの追加]ボタンをクリックします.

ポップアップ表示されるダイアログで、コレクション名をタスクに設定し、「Create」ボタンをクリックしてコレクションを作成し、その規則を定義できる新しいコレクションのページにリダイレクトされます.次の規則を定義し、[更新]ボタンをクリックします.また、設定ページの右側からコレクションIDをメモします.

タイトル

ラベル:タイトル

キータイトル

ルールタイプ:テキスト

必須: true

偽の配列

コラム

ラベル:列

キーコラム

ルールタイプ:テキスト

必須: true

偽の配列

ユーザID

ユーザ名

ユーザID

ルールタイプ:テキスト

必須: true

偽の配列

アクセス許可の場合、role:member ログインしているユーザーがコレクションに読み書きできます.
今コレクションが我々のプロジェクトで作業を開始することができます.

➕️ プラットフォーム
AppWrite SDKを初期化し、AppWriteサービスとの対話を開始するには、まず新しいWebプラットフォームをプロジェクトに追加する必要があります.新しいプラットフォームを追加するには、AppWriteコンソールに行き、プロジェクトを選択し、プロジェクトのダッシュボードの「プラットフォームを追加」ボタンをクリックします.新しいWebアプリを選択します.
名前とホスト名を入力するダイアログボックスで.あなたのホスト名はlocalhost(またはローカルではないドメイン)です.
新しいプラットフォームを登録することにより、あなたのアプリはAppWrite APIと通信することができます.

⚙️ セットアッププロジェクトと依存関係
我々は、Svelteとシンプルなかんばんボードのスタータープロジェクトがあります.スタータープロジェクトをダウンロードできますGitHub Repository .
したら、ローカルのプロジェクトをダウンロードして、お気に入りのテキストエディタで開きます.src/services/appwriteを開きます.このファイルを見ると、ログインとログアウトの方法と同様に、タスクの追加、削除、更新のすべてのメソッドがあります.これらの関数をsrc/appにインポートして使用します.スベルト.
このプロジェクトを実行するには、まず最初にnpm install 依存関係をインストールして実行するにはnpm run dev プロジェクトをローカル開発モードで実行するには.これで、ブラウザからアプリケーションにアクセスすることができますhttp://localhost:3000 .

To avoid cookie issues, please ensure the endpoint URL is using the same protocal (http or https) as your client.

今すぐあなたがタスクを追加する場合は、あなたのページを更新した後、それを表示することができます.また、更新またはタスクを削除する場合は、ページをリフレッシュ後に変更を表示することができます.我々は、AppWriteのリアルタイムサービスを使用して、これを解決します.

👩‍🔧 リアルタイム
まず、src/service/appwriteに購読メソッドを追加します.は、AppWriteリアルタイムサーバーに接続し、我々が耳を傾ける任意の変更に耳を傾ける.私たちのユースケースのために、我々は我々が上で作成した我々の仕事コレクションの文書への変更を聞いています.以下のwrite - after関数を実行します.

subscribe = (callback) => {
  return this.appwrite.subscribe(`collections.${this.tasksCollection}.documents`, callback);
}

このメソッドはコールバックを受け取り、コレクションを購読します.[ id ]我々は我々のタスクコレクションのドキュメントに行われた変更を更新を取得するドキュメント.コールバックはサーバがアップデートを送るたびに呼び出されます.
今、我々はsrc/appに行く場合.svelteには、すでに関数名subscribe , 変更を購読し、タスク配列を更新するには、関数本体を更新する必要があります.次のように購読機能を更新します.

function subscribe() {
  appwrite.subscribe((payload) => {
    switch (payload.event) {
      case 'database.documents.create':
        tasks.push(payload.payload)
        tasks = tasks
        break
      case 'database.documents.update':
        tasks = tasks.map((task) => {
          if (task.$id === payload.payload.$id) {
            return payload.payload
          } else {
            return task
          }
        })
        break
      case 'database.documents.delete':
        tasks = tasks.filter((task) => task.$id !== payload.payload.$id)
        break
    }
  })
}

ここでは、src/services/appwriteで以前に追加した購読メソッドを呼び出します.JSとサーバが送信するリアルタイムペイロードを受け取るコールバック関数を渡す.
受信するペイロードにはevent , そして、我々はコレクションを購読している.[ id ]ドキュメント、イベントは1つのdatabase.documents.create , database.documents.update or database.documents.delete . それで、我々は各々のイベントを扱っています、そして、そのイベントで受け取られたペイロードは関連文書です.
イベントに基づいて、我々は追加、削除、または変更を反映するように我々のタスクの配列を更新します.タスクの配列を更新すると、Svelteは自動的にUIの更新を処理します.簡単に.

🥂 結論
このチュートリアルを構築して、プロジェクトを構築するのを楽しんだので、あなたはこのチュートリアルをリアルタイムカンバン板を構築することを楽しみにしていてください.あなたは、アプリケーションのライブプレビューを表示することができますhere そして、このアプリケーションのための完全なソースコードが利用可能ですGitHub repository . 任意のクエリやコメントがあれば私たちに戻って取得してください.コミュニティがフラッタとAppWriteリアルタイムで構築するものを参照してくださいに興奮.

🎓 もっと学ぶ

Getting Started With Web

Web Playground

Appwrite Docs