Pular para o conteúdo principal
Siga este quickstart para adicionar a Base44 ao seu projeto React Native (Expo). Você criará um backend Base44, definirá entidades e integrará o SDK no seu app mobile.
A CLI requer Node.js 20.19.0 ou superior.

​
Configuração

1

Instale a CLI da Base44

Instale a CLI da Base44 globalmente:
npm install -g base44@latest
2

Crie um backend Base44

Navegue até o diretório do seu projeto React Native e execute:
base44 create
Se você ainda não estiver logado, o comando vai solicitar que você autentique.Selecione Create a basic project quando solicitado. Isso cria os arquivos do backend dentro do diretório do seu projeto React Native. Em seguida, siga as instruções para configurar seu projeto.Quando você cria um projeto, as Base44 skills são incluídas automaticamente, fornecendo ao seu agente de IA instruções e contexto para tarefas da Base44.
3

Defina entidades

Crie schemas de entidade para definir suas estruturas de dados. Arquivos de entidade devem estar no diretório base44/entities/.Por exemplo, crie base44/entities/task.jsonc:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
4

Envie entidades para a Base44

Envie seus schemas de entidade para a Base44:
base44 entities push
Este comando sincroniza suas definições locais de entidade com seu backend Base44, tornando-as disponíveis para uso na sua aplicação. Veja entities push para mais informações.
5

Instale o SDK da Base44

Instale o SDK JavaScript da Base44:
npm install @base44/sdk
6

Crie um cliente Base44

Crie um cliente SDK da Base44 no seu projeto. O appId pode ser encontrado no seu arquivo base44/.app.jsonc.Por exemplo, crie api/base44Client.js:
import { createClient } from '@base44/sdk';

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

Crie uma tela de lista de tarefas

Crie um componente de tela simples para listar e adicionar tarefas. Por exemplo, crie 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,
  },
});
Use o nome exato da entidade do seu schema ao chamar o SDK, incluindo capitalização. Por convenção, os nomes de entidade começam com letra maiúscula. Por exemplo, se seu schema tem "name": "Task", você acessa como base44.entities.Task.list().
8

Use a tela no seu app

Atualize seu App.js para importar e renderizar o 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

Execute seu app localmente

Inicie seu servidor de desenvolvimento Expo para testar sua integração. A partir da raiz do projeto, execute:
npx expo start
Siga as instruções da Expo CLI para abrir seu app em um simulador, dispositivo físico ou navegador web.Seu app React Native se conectará ao seu backend Base44 através do cliente SDK, permitindo trabalhar com suas entidades implantadas em tempo real.

​
Próximos passos

Agora que o backend Base44 está integrado ao seu projeto, você pode:

​
Veja também

Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a versão em inglês.