を使用してWebアプリケーションを構築する

このポストでは、私はどのように我々はreactjsとappwriteでWebアプリケーションを構築することが表示されます.まず最初に何を正確に構築するつもりですかを説明しましょう.

Webアプリケーションの説明
我々は、1つの場所ですべてのご旅行体験を格納できるようになります旅行ジャーナルを構築する予定です、我々はまた、我々のWebアプリでGoogle認証を実装することになりますので、我々のストアのすべてのコンテンツが確実であることを確認します.

appwriteで始まる

AppWriteは、使いやすいセットを開発者に提供する自己ホストソリューションであり、コアバックエンドのニーズを管理するために、残りのAPIを統合します.AppWriteの詳細についてはhttps://appwrite.io/をご覧ください.

は、ローカルマシンでAppWriteをセットアップするためにinstallation guideに従います.

AppWriteをインストールしたら、appwriteコンソールに新しいプロジェクトを開始します.

一度新しいプロジェクトを作成し、ユーザーのオプションに移動し、設定でGoogle Authオプションを有効にします.

Google Authを有効にするために、AppIDとAppScreenKeyを設定するドキュメントがあります.

新しい反応プロジェクトの作成

npx create-react-app appname新しい反応アプリを作成します.

npm install appwriteプロジェクトにappwriteを追加するには

我々のアプリの認証を設定します.

新しいファイルappwriteを作成します.これは、下記のようにappwrite SDKを初期化するところです.プロジェクトのUIDと終了点を取得するには、AppWriteコンソールのプロジェクト設定に移動できます.

現在、前方に移動する前に、Google AUTHをAppWriteコンソールで有効にし、プロジェクトでAppWrite SDKを初期化したことを確認してください.

では、appwriteで関数loginwithgoogleを定義します.このようなJSファイル

import { Appwrite } from "appwrite";

var appwrite = new Appwrite();
appwrite
    .setEndpoint('') // Set your endpoint
    .setProject('') // Your Appwrite Project UID
    ;
export const api = {
    loginWithGoogle: async () => {
        try {
            await appwrite.account.createOAuth2Session('google', 'http://localhost:3000/dashboard/', 'http://localhost:3000/');
        } catch (error) {
            throw error;
        }
    },
}

ここで、2つの終点は、ユーザーが最初の成功と第2の失敗の場合にリダイレクトされるサイト終点を参照します.
一度定義された

では、この関数をこのようにしてホームページに呼び出します

import { api } from '../api/appwrite'
function Home() {
    const loginwithGoogle = async () => {
        try {
            await api.loginWithGoogle();
        } catch (error) {
            console.log(error.message);
        }
    }
}

 <button onClick={loginwithGoogle}>Login with Google</button>                       

現在、ユーザーが首尾よくログインするならば、彼らはダッシュボードページにすべての彼らのポストが見えるようにリダイレクトされます.

前方に移動する前に、24579172に進む前に、ログ出力機能を追加しましょう.このようなJS

userLogout: async () => {
        let promise = appwrite.account.deleteSession('current');
        promise.then(function (response) {
            console.log(response); // Success
        }, function (error) {
            console.log(error); // Failure
        });
    },

そして、ダッシュボードにこの関数を呼び出します.このようなJS

import { api } from '../api/appwrite'

function Dashboard(){
const logoutUser = async () => {
        try {
            await api.userLogout();
        } catch (error) {
            console.log(error.message);
        }
    }
}

<button onClick={logoutUser}>Logout</button>

AppWriteデータベースからのデータの保存と取得

今、我々は正常に我々のアプリでGoogle認証を設定している.AppWriteデータベースにデータを格納する方法を見てみましょう.

私たちは、AppWriteコンソールで投稿と呼ばれる新しいコレクションを作成し、次の規則とパーミッションを設定します.

コレクション規則
我々は、3つのフィールドの日付、場所と経験を日付、場所、さまざまな旅行の経験を格納する定義している.すべての3つのフィールドが必要です.
ラベル
キー
ルール
日付
日付
テキスト
必要
ロケーション
ロケーション
テキスト
必要
経験
経験
テキスト
必要

パーミッション
パーミッションについてもっと知るために、https://appwrite.io/docs/permissionsを参照してください.ここでrole:memberは、ログインしている誰でも、コレクションへのアクセスを読み書きしたことを暗示します.

読み込みアクセス- role:member

書き込みアクセス- role:member

ドキュメントの作成

私たちのコレクションのセットアップを完了したら、appwriteでこの関数を定義することで、最初のドキュメントを作成しましょう.jsここでは、既定ではcreateDocument関数のパーミッションを定義していませんので、ドキュメントを作成するには読み取り権限と書き込み権限があります.

postData: async (date, location, content) => {
let promise = appwrite.database.createDocument('CollectionId', { "date": date, "location": location, "experience": content });

promise.then(function (response) {
            console.log(response); // Success
        }, function (error) {
            console.log(error); // Failure
        });
    },

現在、ダッシュボードにこの関数を呼び出します.このようにデータを追加するための入力フィールドを定義しています.

 const [date, setdate] = useState('2021/10/20')
 const [location, setlocation] = useState('')
 const [content, setcontent] = useState('')

 const handleSubmit = async () => {
        try {
            user = await api.getCurrentUser()
            await api.postData(date, location, content);
            alert("Added successfully")
        } catch (error) {
            console.log(error.message);
        }
    }

<input placeholder="Enter date" type="date" value={date} onChange={(e) => setdate(e.target.value)}></input>

<input placeholder="Enter location" type="text" value={location} onChange={(e) => setlocation(e.target.value)}></input>

<textarea placeholder="Enter experience" type="text" value={content} onChange={(e) => setcontent(e.target.value)}></textarea>

<button onClick={handleSubmit}>Add</button>                                                        

ドキュメント取得
今ではデータを正常に保存することができますので、どのようにデータを取得し、ダッシュボードページに表示するかを見てみましょう.

このため、AppWriteでこの関数を定義します.js

 getData: async () => {
 let promise = appwrite.database.listDocuments('collectionId');

        return promise.then(function (response) {
            //response.documents is a array
            return response.documents
        }, function (error) {
            console.log(error); // Failure
        });
    },

でこの関数をダッシュボードに呼び出しましょう.JS inorderデータを表示します.

const [postItems, setPostItems] = useState([])

useEffect(() => {
        const getPostData = async () => {
            try {
                await api.getData().then((res) => {
                    console.log(res)
                    const stateData = []; // make a temporary const to store your state to be set
                    res.forEach((doc) => {
                        stateData.push({
                            "location": doc.location,
                            "date": doc.date,
                            "text": doc.experience
                        });
                    });
                    // finally set your state here
                    setPostItems([...stateData]);
                })
            } catch (error) {
                console.log(error.message);
            }
        }
        getPostData();
        console.log(postItems)
    }, [])

 {postItems.map((element) => {
      return (
           <p>{element.date}</p>
           <p>{element.location}</p>
           <p>{element.text}</p>
            )
  })}

そして、我々は我々のアプリで行われます🎉🎉. 我々は正常にGoogleの認証を実装しており、AppWriteデータベースを使用してアプリケーションを接続し、我々のデータを簡単に取得します.

Github Repo -このアプリのソースコードのこのGithubレポを参照してください.