Passer au contenu principal
Suivez ce quickstart pour ajouter Base44 à votre projet React Native (Expo). Vous allez créer un backend Base44, définir des entités et intégrer le SDK dans votre application mobile.
La CLI nécessite Node.js 20.19.0 ou supérieur.

​
Configuration

1

Installer la CLI Base44

Installez la CLI Base44 globalement :
npm install -g base44@latest
2

Créer un backend Base44

Naviguez vers le répertoire de votre projet React Native, puis exécutez :
base44 create
Si vous n’êtes pas déjà connecté, la commande vous demandera de vous authentifier.Sélectionnez Create a basic project lorsque demandé. Cela crée les fichiers backend dans le répertoire de votre projet React Native. Suivez ensuite les invites pour configurer votre projet.Lorsque vous créez un projet, les skills Base44 sont incluses automatiquement, fournissant à votre agent IA des instructions et du contexte pour les tâches Base44.
3

Définir des entités

Créez des schémas d’entités pour définir vos structures de données. Les fichiers d’entités doivent être placés dans le répertoire base44/entities/.Par exemple, créez base44/entities/task.jsonc :
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
4

Pousser les entités vers Base44

Poussez vos schémas d’entités vers Base44 :
base44 entities push
Cette commande synchronise vos définitions d’entités locales avec votre backend Base44, les rendant disponibles pour une utilisation dans votre application. Consultez entities push pour plus d’informations.
5

Installer le SDK Base44

Installez le SDK JavaScript Base44 :
npm install @base44/sdk
6

Créer un client Base44

Créez un client SDK Base44 dans votre projet. L’appId peut être trouvé dans votre fichier base44/.app.jsonc.Par exemple, créez api/base44Client.js :
import { createClient } from '@base44/sdk';

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

Créer un écran de liste de tâches

Créez un composant d’écran simple pour lister et ajouter des tâches. Par exemple, créez 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,
  },
});
Utilisez le nom exact de l’entité de votre schéma lors de l’appel du SDK, y compris la capitalisation. Par convention, les noms d’entités commencent par une majuscule. Par exemple, si votre schéma a "name": "Task", vous y accédez avec base44.entities.Task.list().
8

Utiliser l'écran dans votre application

Mettez à jour votre App.js pour importer et rendre le composant 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',
  },
});
9

Exécuter votre application localement

Démarrez votre serveur de développement Expo pour tester votre intégration. Depuis la racine de votre projet, exécutez :
npx expo start
Suivez les instructions de la CLI Expo pour ouvrir votre application sur un simulateur, un appareil physique ou un navigateur web.Votre application React Native se connectera à votre backend Base44 via le client SDK, vous permettant de travailler avec vos entités déployées en temps réel.

​
Étapes suivantes

Maintenant que votre backend Base44 est intégré à votre projet, vous pouvez :
  • Utiliser le SDK pour ajouter plus de fonctionnalités à votre application mobile.
  • Ajouter des entités, des fonctions backend et des agents. Si vous travaillez en TypeScript, générez des types pour obtenir l’autocomplétion et la sécurité des types.
  • Tester localement en exécutant base44 dev pour le backend aux côtés du serveur de développement de votre application. Consultez Développement local pour les instructions de configuration.

​
Voir aussi

Cette page a été traduite à l’aide de l’IA. Pour les informations les plus précises et à jour, consultez la version anglaise.