Vai al contenuto principale
Segui questa quickstart per aggiungere Base44 al tuo progetto React Native (Expo). Creerai un backend Base44, definirai entità e integrerai l’SDK nella tua app mobile.
La CLI richiede Node.js 20.19.0 o superiore.

​
Configurazione

1

Installa la CLI di Base44

Installa la CLI di Base44 a livello globale:
npm install -g base44@latest
2

Crea un backend Base44

Vai nella directory del tuo progetto React Native, quindi esegui:
base44 create
Se non hai già effettuato l’accesso, il comando ti chiederà di autenticarti.Seleziona Create a basic project quando richiesto. Questo crea i file backend all’interno della directory del tuo progetto React Native. Quindi segui le richieste per configurare il tuo progetto.Quando crei un progetto, le skill di Base44 sono incluse automaticamente, fornendo al tuo agente IA istruzioni e contesto per le attività Base44.
3

Definisci le entità

Crea schemi di entità per definire le tue strutture di dati. I file delle entità devono essere posizionati nella directory base44/entities/.Ad esempio, crea base44/entities/task.jsonc:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
4

Invia le entità a Base44

Invia i tuoi schemi di entità a Base44:
base44 entities push
Questo comando sincronizza le tue definizioni di entità locali con il tuo backend Base44, rendendole disponibili per l’uso nella tua applicazione. Consulta entities push per maggiori informazioni.
5

Installa l'SDK di Base44

Installa il JavaScript SDK di Base44:
npm install @base44/sdk
6

Crea un client Base44

Crea un client SDK di Base44 nel tuo progetto. L’appId si trova nel tuo file base44/.app.jsonc.Ad esempio, crea api/base44Client.js:
import { createClient } from '@base44/sdk';

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

Crea una schermata di elenco attività

Crea un semplice componente schermata per elencare e aggiungere attività. Ad esempio, crea 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,
  },
});
Usa il nome esatto dell’entità dal tuo schema quando chiami l’SDK, comprese le maiuscole. Per convenzione, i nomi delle entità iniziano con una lettera maiuscola. Ad esempio, se il tuo schema ha "name": "Task", vi accedi come base44.entities.Task.list().
8

Usa la schermata nella tua app

Aggiorna il tuo App.js per importare e renderizzare il componente 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

Esegui la tua app in locale

Avvia il tuo server di sviluppo Expo per testare l’integrazione. Dalla root del tuo progetto, esegui:
npx expo start
Segui le istruzioni della CLI di Expo per aprire la tua app su un simulatore, un dispositivo fisico o un browser web.La tua app React Native si connetterà al tuo backend Base44 tramite il client SDK, permettendoti di lavorare con le tue entità distribuite in tempo reale.

​
Passaggi successivi

Ora che il tuo backend Base44 è integrato con il tuo progetto, puoi:
  • Usare l’SDK per aggiungere più funzionalità alla tua app mobile.
  • Aggiungere entità, funzioni backend e agenti. Se stai lavorando in TypeScript, genera i tipi per ottenere autocompletamento e sicurezza dei tipi.
  • Testare in locale eseguendo base44 dev per il backend insieme al dev server della tua app. Consulta Sviluppo locale per le istruzioni di configurazione.

​
Vedi anche

Questa pagina è stata tradotta utilizzando l’IA. Per informazioni più accurate e aggiornate, consulta la versione inglese.