Quickstart

15 分

はじめにこのガイドでは、 react native cli を使用して新しいプロジェクトまたは既存のプロジェクトでback4appを設定し、使用する方法を説明します。 parse sdk をインストールし、アプリキーで初期化し、back4appからデータを保存および取得するための最初のapi呼び出しを作成します。前提条件このチュートリアルを完了するには、 back4appでのアプリを作成 https //www back4app com/docs/get started/new parse app すること。 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のどちらで開発を開始したいかによって異なります。詳細については、公式ドキュメントを確認してくださいこちら https //reactnative dev/docs/environment setup expo expo cliをグローバルにインストール npm install g expo cli 新しいreact nativeプロジェクトを作成 expo init b4aproject cd b4aproject expo start 2 依存関係をインストールあなたのreact nativeプロジェクトで、 parse javascript sdk と asyncstorage をインストールします npm install parse @react native async storage/async storage save parse javascript sdk back4appサーバーとアプリを統合するため。 react native async storage parse sdkを使用するには、asyncstorageハンドラーが必要です。 iosの場合、ネイティブのasyncstorageサポートも追加します cd ios & pod install 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 ios\ で、ターゲットプラットフォームでアプリケーションを開きます。 expo 次のコマンドを実行します \expo start\ , そして、ブラウザまたはデバイスでアプリを表示するための指示に従います。トラブルシューティング一般的な問題と解決策 metroがエラーに遭遇しましたモジュール「idb keyval」を解決しようとしています。解決策 \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\ そして、この行を変更します var eventemitter = require(' / / /react native/libraries/vendor/emitter/eventemitter'); これに変更します 'react native/libraries/vendor/emitter/eventemitter' から eventemitter をインポートします。同じファイル \eventemitter js\ , 次の行を変更します module exports = eventemitter; これに変更します export default eventemitter; babelの問題 babelに関して問題が発生した場合は、次のように babel config js を更新することを検討してください module exports = function (api) { api cache(true); return { presets \['babel preset expo'], plugins \[ '@babel/plugin proposal export namespace from', 'react native reanimated/plugin', ], }; }; 次のステップこのガイドでは、back4appを使用した基本的なセットアップとデータストレージについて説明します。データストレージ、リアルタイム機能、ローカルデータストレージ、クラウド機能、認証、ファイルストレージなど、parseの機能を探ってください。