React NativeでのParse SDK設定とBack4Appへの接続ガイド

15min
はじめに
このガイドでは、React Native CLIを使用して新しいプロジェクトまたは既存のプロジェクトでBack4Appを設定し、使用する方法を説明します。Parse SDKをインストールし、アプリキーで初期化し、Back4Appからデータを保存および取得するための最初のAPI呼び出しを作成します。
前提条件
このチュートリアルを完了するには、
Back4Appでの アプリ作成が必要です。
﻿Npm またはyarnがインストールされている必要があります。
﻿Npx パッケージランナーがインストールされている必要があります。
1 - React Nativeプロジェクトを作成する
React Nativeプロジェクトを作成する主な方法は2つあります: React Native CLI と Expo. 開発環境とターゲットプラットフォーム（iOSまたはAndroid）に基づいて選択してください。
指示は、あなたの開発オペレーティングシステムと、iOSまたはAndroidのどちらで開発を開始したいかによって異なります。詳細については、公式ドキュメントを確認してください こちら.
﻿
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/';

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が初期化されたら、次の「index.tsx」にデータを保存して取得するための2つの関数を作成します。
TypeScript
  // 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);
    }
  }
  // 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 - アプリをテストする
プロジェクトのターミナルを開きます。
プロジェクトを実行します。
次のコマンドを実行します: npx react-native run-android または npx react-native run-ios で、ターゲットプラットフォームでアプリケーションを開きます。
次のコマンドを実行します: expo start, そして、ブラウザまたはデバイスでアプリを表示するための指示に従います。
﻿
トラブルシューティング
一般的な問題と解決策:
Metroがエラーに遭遇しました: モジュール「idb-keyval」を解決しようとしています。
解決策: metro.conf.js ファイルに移動し、これに変更します:
JS
1   const { getDefaultConfig } = require("@expo/metro-config");
2   const defaultConfig = getDefaultConfig(__dirname);
3   defaultConfig.resolver.assetExts.push("cjs");
4   module.exports = defaultConfig;
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の機能を探ってください。
Parse GraphQLログアウトミューテーションの技術的ガイド
React NativeでのParse SDKをExpoテンプレートで設定