Quickstart

はじめに このガイドでは、 react native cli を使用して新しいプロジェクトまたは既存のプロジェクトでback4appを設定し、使用する方法を説明します。 parse sdk をインストールし、アプリキーで初期化し、back4appからデータを保存および取得するための最初のapi呼び出しを作成します。 前提条件 このチュートリアルを完了するには、 back4appでの アプリを作成 すること。 npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm またはyarnがインストールされていること。 npx https //www npmjs com/package/npx パッケージランナーがインストールされていること。 1 react nativeプロジェクトを作成する react nativeプロジェクトを作成する主な方法は2つあります react native cli と expo です。開発環境とターゲットプラットフォーム（iosまたはandroid）に基づいて選択してください。 react native cli 指示は、あなたの開発オペレーティングシステムと、iosまたはandroidのどちらで開発を開始したいかによって異なります。詳細については、公式ドキュメントを確認してください こちら expo expo cliをグローバルにインストール 新しいreact nativeプロジェクトを作成 2 依存関係をインストール あなたのreact nativeプロジェクトで、 parse javascript sdk と asyncstorage をインストールします parse javascript sdk back4appサーバーとアプリを統合するため。 react native async storage parse sdkを使用するには、asyncstorageハンドラーが必要です。 iosの場合、ネイティブのasyncstorageサポートも追加します 3 アプリキーを取得する back4appでアプリを作成した後、次の場所でアプリキーを見つけます アプリ設定 > セキュリティとキー 。接続するには、次の両方が必要です。 アプリケーションid と javascriptキー 。 4 parseを初期化し、back4appに接続する 次のファイルを開きます index tsx そして、次の情報でparseを初期化します アプリケーションid と javascriptキー 。 index tsx import parse from 'parse/react native'; import asyncstorage from '@react native async storage/async storage'; // initialize parse only once parse setasyncstorage(asyncstorage); parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com/'; 5 データを保存して取得する parseが初期化されたら、次のファイルに2つの関数を作成します index tsx で、back4appからデータを保存して取得します。 // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } 6 アプリをテストする プロジェクトのターミナルを開きます。 プロジェクトを実行します。 react native cli 次のコマンドを実行します npx react native run android npx react native run android または npx react native run ios npx react native run ios で、ターゲットプラットフォームでアプリケーションを開きます。 expo 次のコマンドを実行します expo start expo start , そして、ブラウザまたはデバイスでアプリを表示するための指示に従います。 トラブルシューティング 一般的な問題と解決策 metroがエラーに遭遇しました モジュール「idb keyval」を解決しようとしています。 解決策 metro conf js metro conf js ファイルに移動し、次のように変更します 1 const { getdefaultconfig } = require("@expo/metro config"); 2 const defaultconfig = getdefaultconfig( dirname); 3 defaultconfig resolver assetexts push("cjs"); 4 module exports = defaultconfig; モジュール「eventemitter」を解決できません。 解決策 次のファイルに移動します node modules\parse\lib\react native\eventemitter js node modules\parse\lib\react native\eventemitter js そして、この行を変更します これに変更します 同じファイル eventemitter js eventemitter js , 次の行を変更します これに変更します babelの問題 babelに関して問題が発生した場合は、次のように babel config js を更新することを検討してください 次のステップ このガイドでは、back4appを使用した基本的なセットアップとデータストレージについて説明します。データストレージ、リアルタイム機能、ローカルデータストレージ、クラウド機能、認証、ファイルストレージなど、parseの機能を探ってください。