React Native (Expo) クイックスタート - Base44 Support Documentation

このクイックスタートに従って、React Native (Expo) プロジェクトに Base44 を追加してください。Base44 バックエンドを作成し、エンティティを定義して、SDK をモバイルアプリに統合します。

CLI には Node.js 20.19.0 以上が必要です。

セットアップ

Base44 CLI をインストール

Base44 CLI をグローバルにインストールします:

npm install -g base44@latest

Base44 バックエンドを作成

React Native プロジェクトディレクトリに移動して、次を実行します:

base44 create

まだログインしていない場合、コマンドは認証を促します。プロンプトが表示されたら Create a basic project を選択してください。これにより、React Native プロジェクトディレクトリ内にバックエンドファイルが作成されます。その後、プロジェクトを構成するためのプロンプトに従ってください。プロジェクトを作成する際、Base44 skills が自動的に含まれ、AI エージェントに Base44 タスクの指示とコンテキストを提供します。

エンティティを定義

データ構造を定義するエンティティスキーマを作成します。エンティティファイルは base44/entities/ ディレクトリに配置する必要があります。例えば、base44/entities/task.jsonc を作成します:

{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}

エンティティを Base44 にプッシュ

エンティティスキーマを Base44 にプッシュします:

base44 entities push

このコマンドは、ローカルのエンティティ定義を Base44 バックエンドと同期し、アプリケーションで使用できるようにします。詳細は entities push を参照してください。

Base44 SDK をインストール

Base44 JavaScript SDK をインストールします:

npm install @base44/sdk

Base44 クライアントを作成

プロジェクトで Base44 SDK クライアントを作成します。appId は base44/.app.jsonc ファイルで確認できます。例えば、api/base44Client.js を作成します:

import { createClient } from '@base44/sdk';

export const base44 = createClient({
  appId: 'your-app-id-from-app.jsonc'
});

タスクリストスクリーンを作成

タスクをリストして追加するシンプルなスクリーンコンポーネントを作成します。例えば、screens/TaskListScreen.js を作成します:

import { useState, useEffect } from 'react';
import { View, Text, FlatList, Button, TextInput, StyleSheet, ActivityIndicator } from 'react-native';
import { base44 } from '../api/base44Client';

export default function TaskListScreen() {
  const [tasks, setTasks] = useState([]);
  const [newTitle, setNewTitle] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    loadTasks();
  }, []);

  const loadTasks = async () => {
    setIsLoading(true);
    try {
      // Get records
      const taskList = await base44.entities.Task.list();
      setTasks(taskList);
    } catch (error) {
      console.error('Error loading tasks:', error);
    }
    setIsLoading(false);
  };

  const addTask = async () => {
    if (!newTitle.trim()) return;

    setIsLoading(true);
    try {
      // Create a record
      const newTask = await base44.entities.Task.create({
        title: newTitle,
        completed: false
      });
      setTasks([...tasks, newTask]);
      setNewTitle('');
    } catch (error) {
      console.error('Error creating task:', error);
    }
    setIsLoading(false);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tasks</Text>

  <FlatList
    data={tasks}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => <Text style={styles.task}>{item.title}</Text>}
    ListEmptyComponent={
      isLoading ? <ActivityIndicator /> : <Text style={styles.empty}>No tasks yet</Text>
    }
  />

      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          value={newTitle}
          onChangeText={setNewTitle}
          placeholder="New task"
          editable={!isLoading}
        />
        <Button title="Add" onPress={addTask} disabled={isLoading || !newTitle.trim()} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  task: {
    fontSize: 16,
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  empty: {
    textAlign: 'center',
    color: '#999',
    marginTop: 20,
  },
  inputRow: {
    flexDirection: 'row',
    gap: 10,
    marginTop: 20,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
  },
});

SDK を呼び出すときは、大文字小文字を含むスキーマの正確なエンティティ名を使用してください。慣例上、エンティティ名は大文字で始まります。例えば、スキーマに "name": "Task" がある場合、base44.entities.Task.list() としてアクセスします。

アプリでスクリーンを使用

App.js を更新して、TaskListScreen コンポーネントをインポートしてレンダリングします:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, SafeAreaView } from 'react-native';
import TaskListScreen from './screens/TaskListScreen';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <TaskListScreen />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

アプリをローカルで実行

Expo 開発サーバーを起動して、インテグレーションをテストします。プロジェクトルートから次を実行します:

npx expo start

シミュレータ、実機、または web ブラウザでアプリを開くには、Expo CLI の手順に従ってください。React Native アプリは SDK クライアントを介して Base44 バックエンドに接続し、デプロイされたエンティティをリアルタイムで操作できます。

次のステップ

これでプロジェクトに Base44 バックエンドが統合されたので、次のことができます:

SDK を使用してモバイルアプリにより多くの機能を追加します。
エンティティ、バックエンド関数、エージェントを追加します。TypeScript で作業している場合は、オートコンプリートと型安全性を得るために型を生成してください。
アプリの開発サーバーと並行してバックエンドの base44 dev を実行してローカルでテストします。セットアップ手順については、ローカル開発を参照してください。

​セットアップ

​次のステップ

​関連項目

セットアップ

次のステップ

関連項目