Zum Hauptinhalt springen
Folge diesem Quickstart, um Base44 zu deinem React-Native- (Expo-) Projekt hinzuzufügen. Du erstellst ein Base44-Backend, definierst Entitäten und integrierst das SDK in deine mobile App.
Die CLI erfordert Node.js 20.19.0 oder höher.

​
Einrichtung

1

Base44 CLI installieren

Installiere die Base44 CLI global:
npm install -g base44@latest
2

Ein Base44-Backend erstellen

Navigiere in dein React-Native-Projektverzeichnis und führe aus:
base44 create
Wenn du noch nicht eingeloggt bist, fordert dich der Befehl auf, dich zu authentifizieren.Wähle Create a basic project, wenn du dazu aufgefordert wirst. Dies erstellt die Backend-Dateien in deinem React-Native-Projektverzeichnis. Folge dann den Eingabeaufforderungen, um dein Projekt zu konfigurieren.Wenn du ein Projekt erstellst, werden Base44 skills automatisch eingebunden und liefern deinem KI-Agenten Anweisungen und Kontext für Base44-Aufgaben.
3

Entitäten definieren

Erstelle Entity-Schemas, um deine Datenstrukturen zu definieren. Entity-Dateien müssen im Verzeichnis base44/entities/ abgelegt werden.Erstelle zum Beispiel base44/entities/task.jsonc:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
4

Entitäten zu Base44 pushen

Pushe deine Entity-Schemas zu Base44:
base44 entities push
Dieser Befehl synchronisiert deine lokalen Entity-Definitionen mit deinem Base44-Backend, sodass sie in deiner Anwendung verfügbar werden. Siehe entities push für weitere Informationen.
5

Base44 SDK installieren

Installiere das Base44 JavaScript-SDK:
npm install @base44/sdk
6

Einen Base44-Client erstellen

Erstelle einen Base44-SDK-Client in deinem Projekt. Die appId findest du in deiner Datei base44/.app.jsonc.Erstelle zum Beispiel api/base44Client.js:
import { createClient } from '@base44/sdk';

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

Einen Task-List-Screen erstellen

Erstelle eine einfache Screen-Komponente, um Aufgaben aufzulisten und hinzuzufügen. Erstelle zum Beispiel 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,
  },
});
Verwende beim Aufruf des SDK den exakten Entity-Namen aus deinem Schema, einschließlich Groß- und Kleinschreibung. Konventionell beginnen Entity-Namen mit einem Großbuchstaben. Wenn dein Schema z. B. "name": "Task" hat, greifst du als base44.entities.Task.list() darauf zu.
8

Den Screen in deiner App verwenden

Aktualisiere deine App.js, um die Komponente TaskListScreen zu importieren und zu rendern:
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',
  },
});
9

Deine App lokal ausführen

Starte deinen Expo-Entwicklungsserver, um deine Integration zu testen. Führe aus dem Projekt-Stammverzeichnis aus:
npx expo start
Folge den Expo-CLI-Anweisungen, um deine App auf einem Simulator, einem physischen Gerät oder im Web-Browser zu öffnen.Deine React-Native-App verbindet sich über den SDK-Client mit deinem Base44-Backend, sodass du in Echtzeit mit deinen veröffentlichten Entitäten arbeiten kannst.

​
Nächste Schritte

Nun, da dein Base44-Backend in dein Projekt integriert ist, kannst du:

​
Siehe auch

Diese Seite wurde mit KI übersetzt. Für die genauesten und aktuellsten Informationen siehe die englische Version.