ReactでのParse Server SDK統合とAPIコールガイド

クイックスタート イントロダクション このセクションでは、reactを使用して既存のプロジェクトまたは新しいプロジェクトでback4appを始める方法を学びます。 parse sdk parse sdk をインストールし、あなたの アプリキー アプリキー を使用してparseを初期化し、back4appからデータオブジェクトを保存および読み取る最初のapiコールを行います。 前提条件 このチュートリアルを完了するには、以下が必要です： back4appでの アプリを作成すること ； 最近の node js のバージョン、 yarn yarn と npx npx 1 reactプロジェクトの作成 すでに動作しているreactプロジェクトがある場合は、次のステップに進むことができます。 プロジェクトを保存したいディレクトリで次のコマンドを実行し、その名前も指定します。この場合、 back4app guide react back4app guide react です。 npx create react app back4app guide react もし node js node js が正しく設定されていれば、ターミナルプロンプトにプロジェクトが作成されるのが表示されるはずです。完了後、プロセスが成功したことを知らせるメッセージが表示されます。 お気に入りのコードエディタでプロジェクトを開き、parseの統合を始めましょう。 2 依存関係をインストールする 必要な依存関係である parse javascript sdk parse javascript sdk をインストールして、アプリをback4appサーバーと統合しましょう。プロジェクトのルートディレクトリで次のコマンドを実行します yarn add parse 3 アプリキーを取得する back4appでアプリを作成した後、アプリのダッシュボードに移動し、 アプリ設定 >セキュリティとキー アプリ設定 >セキュリティとキー の下にあるアプリキーを取得します（下の画像を確認してください）。back4appと接続するには、常に2つのキーが必要です。 アプリケーションid アプリケーションid と javascriptキー javascriptキー が必要です。 4 parseを初期化し、back4appに接続する あなたの app js app js に移動し、 parse sdk parse sdk を次の アプリケーションid アプリケーションid と javascript key javascript key を使用して初期化します（前のステップを確認してください）。 1 // import parse minified version 2 import parse from 'parse/dist/parse min js'; 3 4 // your parse initialization configuration goes here 5 const parse application id = 'your application id here'; 6 const parse host url = 'https //parseapi back4app com/'; 7 const parse javascript key = 'your javascript key here'; 8 parse initialize(parse application id, parse javascript key); 9 parse serverurl = parse host url; 5 簡単なデータオブジェクトの保存と読み取り あなたのアプリは初期化され、back4appクラウドサービスに安全に接続できます。次に、back4appデータベースからデータを保存および取得するために、内部に2つの簡単な関数を含むコンポーネントを作成しましょう。新しいファイルを作成します。 personcomponent js personcomponent js をあなたの src src ディレクトリに追加し、次のコードを追加します 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 4 export const personcomponent = () => { 5 // state variables 6 const \[person, setperson] = usestate(null); 7 8 async function addperson() { 9 try { 10 // create a new parse object instance 11 const person = new parse object('person'); 12 // define the attributes you want for your object 13 person set('name', 'john'); 14 person set('email', 'john\@back4app com'); 15 // save it on back4app data store 16 await person save(); 17 alert('person saved!'); 18 } catch (error) { 19 console log('error saving new person ', error); 20 } 21 } 22 23 async function fetchperson() { 24 // create your parse query using the person class you've created 25 const query = new parse query('person'); 26 // use the equalto filter to look for user which the name is john this filter can be used in any data type 27 query equalto('name', 'john'); 28 // run the query 29 const person = await query first(); 30 // access the parse object attributes 31 console log('person name ', person get('name')); 32 console log('person email ', person get('email')); 33 console log('person id ', person id); 34 setperson(person); 35 } 36 37 return ( 38 \<div> 39 \<button onclick={addperson}>add person\</button> 40 \<button onclick={fetchperson}>fetch person\</button> 41 {person !== null && ( 42 \<div> 43 \<p>{`name ${person get('name')}`}\</p> 44 \<p>{`email ${person get('email')}`}\</p> 45 \</div> 46 )} 47 \</div> 48 ); 49 }; この addperson addperson メソッドは新しい parse object parse object を作成し、プロパティを設定してからback4appクラウドデータストアに保存します。メソッド fetchperson fetchperson は parse object parse object を取得し、その属性 name name が john john に等しいものを取得します。クエリが解決されると、 get get メソッドを使用して人物の属性にアクセスできます。 このコンポーネントのインターフェース要素にも注意してください。これらは、メソッドを呼び出す2つのボタンと、取得した person person を取得する2つの段落で構成されています。 このコンポーネントをインポートして、あなたのメイン app js app js ファイルで使用する必要があります。あなたの app js app js ファイルは、ほとんどのプレースホルダーコードを削除した後、次のようになります。 1 import ' /app css'; 2 import parse from 'parse/dist/parse min js'; 3 import { personcomponent } from ' /personcomponent'; 4 5 // your parse initialization configuration goes here 6 const parse application id = 'your parse application id'; 7 const parse host url = 'https //parseapi back4app com/'; 8 const parse javascript key = 'your parse javascript key'; 9 parse initialize(parse application id, parse javascript key); 10 parse serverurl = parse host url; 11 12 function app() { 13 return ( 14 \<div classname="app"> 15 \<header classname="app header"> 16 \<personcomponent /> 17 \</header> 18 \</div> 19 ); 20 } 21 22 export default app; 6 アプリをテストする プロジェクトのターミナルを開きます。 実行します yarn start yarn start アプリが実行されてビルドされた後、ブラウザが開くはずです。最初に新しい person person を追加するボタンをクリックし、その後同じ person person を取得するためにクリックします。 back4appからデータオブジェクトを保存して取得しました。アプリの アプリダッシュボード を確認し、personクラスをクリックすることもできます。 次に何をすべきか ご覧の通り、back4appをreactプロジェクトに統合する最も簡単な方法は、 parse javascript sdk https //www npmjs com/package/parse を通じてです。parse sdkは、最小限の設定とコードの再利用性を提供する軽量で使いやすいレイヤーを通じて、優れた開発体験を提供します。