模板

Todo App 後端模板
React Native - 模式、API 與 AI 指南

可生產的 React Native Todo 後端模式和 Starter Kit on Back4app：ER 圖、資料辭典、JSON 模式、API Playground、JavaScript/React 原生程式碼範例、離線先釘選，以及可在幾分鐘內部署的單鍵 AI Agent 提示。

使用 AI Agent 建立

主要心得

在此頁面中，您將獲得一個生產就緒的模式、一鍵式 AI 提示，以及逐步的 React Native代碼 - 因此，您無需建立後端，就可以發佈 Todo 應用程式。

在幾分鐘內部署 — 貼上 AI Agent 提示，並取得包含前端、後端和資料庫的執行應用程式。
預設安全 — 行層級 ACL 可確保每個使用者只能看到自己的待辦事項。
React Native-native SDK — Parse React原生 SDK，具有 async/await、本地 pinning 和 Live Queries開箱即用功能。
rest + __brand0__ — 這兩個 API 都是自動產生的，不需要撰寫自訂端點。
兩個班級 — _User (內建認證) 和 Todo (具有標題、已完成、到期日、優先順序、所有者的任務)。

什麼是 React Native Todo App 後端模板？

React Native Todo 應用程式後端範本是一個預先建立、可立即投入生產的後端模式，並託管於 Back4app。它為您提供兩個資料庫類別（_User 和 Todo ）、基於所有權的 ACL、REST 和 GraphQL API，以及單鍵 AI Agent 提示 - 因此您可以連接一個 React Native 應用程式，並在幾分鐘而不是幾天之內提供一個支援離線的 Todo 應用程式。

最適合

React 本地開發人員世博會與裸工作流程離線優先的行動應用程式MVP 推出跨平台 iOS & Android

概述

Todo 應用程式是學習後端開發最常見的起點之一。它需要使用者註冊、任務 CRUD、基於所有權的存取控制，以及選購的即時同步和離線支援。

下面的模式定義了兩個類別 - _User（內建）和 Todo--由一個 Pointer 連接。使用 Parse React Native SDK (Back4app)，您可以直接從您的 JavaScript 或 TypeScript 程式碼與此後端互動 - 查詢、建立、更新及刪除物件，以及離線釘選 - 而不需要撰寫自訂的 API 層。

为什么使用 Back4app 构建您的 React Native Todo 后端？

Back4app 為您提供現成的後端和 Parse React 原生 SDK，因此您可以專注於使用者經驗和效能，而不是 REST 接線和認證。

•離線第一與同步: 將 Todo 物件釘選到本機資料庫，因此清單可以離線運作，並在應用程式重新上線時進行同步 - 非常適合行動裝置。
•組件與掛勾: 使用 SDK 與 React 鉤子和上下文；保持狀態與 Parse 查詢和 Live Queries 即時更新同步。
•跨平台、單一後端: 為 iOS和 Android提供相同的模式和 API；非常適合使用 Expo 或裸工作流程的 React原生團隊。

非常適合使用 Expo 或裸工作流程的 React原生開發人員 - 一個後端，兩個平台。

核心優勢

生產就緒的 Todo 後端，讓您可以更快出貨，並專注於您的應用程式。

出貨速度更快，無需後端程式碼

REST 和 GraphQL API 以及即用型模式 - 連接您的應用程式即可使用。

預設安全

ACL 和類別層級權限，讓使用者只能存取自己的資料。

即時更新

透過 WebSockets Live Queries 即時更新使用者介面。

內建認證

使用者註冊、登入及會話處理功能開箱即用 - 無須自訂 auth 層。

離線工作

本機釘選功能可保持資料離線可用，並在您重新連線時進行同步。

在幾分鐘內部署

使用 AI Agent 從此範本建立並部署您的 Todo 應用程式。

準備好試試了嗎？

讓 Back4app AI Agent 創建您的 Todo 應用程式後端，連接 React Native 前端，並進行部署 - 所有這一切只需單一提示即可完成。

使用 AI Agent 建立嘗試 API 遊樂場

免費開始 - 每月 50 個 AI 代理提示，無需信用卡

技術堆疊

此 Todo 應用程式範本的所有功能一目了然。

前端

React Native______________________。

後端

__品牌0__

資料庫

MongoDB

認證

認證與存取控制

API

休息 & __brand0__

部署

AI 代理/儀表板

ER 圖

React Native Todo 應用程式資料模型的實體關係圖。

ER 圖

檢視圖表來源

Mermaid

erDiagram
    _User {
        String objectId PK
        String username
        String email
        String password
        Date createdAt
        Date updatedAt
    }

    Todo {
        String objectId PK
        String title
        Boolean done
        Date dueDate
        Number priority
        Pointer owner FK
        Date createdAt
        Date updatedAt
    }

    _User ||--o{ Todo : "owns"

整合流程

Auth-to-CRUD 序列：您的 React Native 應用程式如何與 Back4app 對話 - 登入，然後查詢和建立待辦事項。

ER 圖

檢視圖表來源

Mermaid

sequenceDiagram
  participant User
  participant App as React Native App
  participant Back4app as Back4app Cloud

  User->>App: Login
  App->>Back4app: Parse.User.logIn(username, password)
  Back4app-->>App: Session token
  App-->>User: Logged in

  User->>App: Load todos
  App->>Back4app: new Parse.Query('Todo').find()
  Back4app-->>App: Array of Todo
  App-->>User: Show list

  User->>App: Create todo
  App->>Back4app: todo.save()
  Back4app-->>App: Todo (objectId)
  App-->>User: Updated list

資料詞典

模式中每個類別的完整欄位參考。

現場	類型	說明	必須
objectId	String	Auto-generated unique identifier	自動
title	String	Short description of the task
done	Boolean	Whether the task is completed	—
dueDate	Date	Optional deadline for the task	—
priority	Number	Priority level (1 = high, 3 = low)	—
owner	Pointer<_User>	User who owns this task	—
createdAt	Date	Auto-generated creation timestamp	自動
updatedAt	Date	Auto-generated last-update timestamp	自動

Todo中的8字段

安全性與權限

擁有權、ACL 及類別層級權限如何保護此模式中的資料。

行層級 ACL

每個 Todo 都有一個與擁有者綁定的 ACL。只有建立者可以讀取、更新或刪除自己的任務。

等級權限

CLP 限制哪些角色或使用者可以在類別層級建立、讀取、更新或刪除物件，這是您的第一道防線。

指針型所有權

所有者指標 (owner Pointer) 會將每個 Todo 連結至其 _使用者。雲端程式碼觸發器可自動設定所有權，並強制執行儲存的 ACL。

模式 (JSON)

原始 JSON 方案定義 - 複製並用於您的 Back4app 應用程式或透過 API 匯入。

JSON

{
  "classes": [
    {
      "className": "Todo",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "done": {
          "type": "Boolean",
          "required": false,
          "defaultValue": false
        },
        "dueDate": {
          "type": "Date",
          "required": false
        },
        "priority": {
          "type": "Number",
          "required": false,
          "defaultValue": 3
        },
        "owner": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "_User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

使用 AI Agent 建立

使用 Back4app AI Agent 從這個範本建立一個真正的 Todo 應用程式：它會建立前端、後端（此模式、認證和 API），並部署它 - 無須手動設定。下面的提示描述了這個 Todo 堆疊，因此 Agent 可以一次產生一個可供生產的應用程式。

AI 代理商

準備建造

Create a Todo app on Back4app with this exact schema and behavior.

Schema:
1. _User (use Back4app built-in): username (String, required), email (String, required), password (String, required); objectId, createdAt, updatedAt (system).
2. Todo: title (String, required), done (Boolean, default: false), dueDate (Date, optional), priority (Number, default: 3; 1=high, 2=medium, 3=low), owner (Pointer to _User; set to current user on create); objectId, createdAt, updatedAt (system).

Security:
- Set ACLs on every Todo so only the owner has read and write. No public read/write.
- On create, set Todo.owner to the current user (e.g. via Cloud Code beforeSave or client-side).
- Use Class-Level Permissions so only authenticated users can create/read/update/delete Todo.

Auth:
- Sign-up (username, email, password) and login; support logout/session.
- After login, the app should only show and allow CRUD for the current user's todos.

Behavior:
- Full CRUD for Todo: create, list (only owner's), get one, update (toggle done, edit title, dueDate, priority), delete.
- List todos with sort (e.g. by priority then dueDate or createdAt). Default priority for new todos: 3 (low).

Deliver:
- Create the Back4app app with the schema above, ACLs, and any Cloud Code needed (e.g. beforeSave on Todo to set owner).
- Generate the frontend and connect it to this backend; deploy so the app is runnable end-to-end.

按下下面的按鈕，即可開啟預先填入此範本提示的 Agent。

在幾分鐘內部署每月 50 個免費提示無需信用卡

API 遊樂場

請嘗試 Todo 方案的 REST 和 GraphQL 端點。來自上述範例資料的回應 - 不需要 Back4app 帳戶。

正在載入遊樂場...

使用與此模板相同的 Todo 模式。

分步式 React Native 整合

使用 Parse React Native SDK 從 React Native 應用程式連接至您的 Back4app 後端。

步驟 1: 安裝 Parse React 原生 SDK
使用 npm 或 yarn 將 Parse React Native SDK (或 React-native-Parse) 加入您的專案。
JavaScript
1
2
```
npm install parse --save
# or: yarn add parse
```
步驟 2：在應用程式中初始化 Parse
在您的應用程式項目 (例如 App.js 或 index.js) 中，以您的應用程式 ID、伺服器 URL 及 JavaScript 金鑰初始化 Parse SDK。
JavaScript
1
2
3
4
5
6
```
import Parse from 'parse/react-native';

Parse.setAsyncStorage(AsyncStorage);
Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
```
步驟 3：查詢所有待辦事項
為 Todo 類建立一個 Parse Query，加入按優先順序遞增的順序，並呼叫 find() (或 findWithCount())。
JavaScript
1
2
3
4
5
```
async function getTodos() {
  const query = new Parse.Query('Todo').ascending('priority');
  const results = await query.find();
  return results;
}
```

步驟 4：建立待辦事項

建立新的 Parse.Object('Todo')，設定 title、done 及 priority，然後呼 save()。

JavaScript

async function createTodo(title, priority = 3) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('done', false);
  todo.set('priority', priority);
  await todo.save();
  return todo;
}

步驟 5：更新和刪除待辦事項

按 objectId 擷取 Todo、設定欄位並呼叫 save() 來更新，或呼叫 destroy() 來刪除。

JavaScript

async function markDone(objectId) {
  const query = new Parse.Query('Todo');
  const todo = await query.get(objectId);
  todo.set('done', true);
  await todo.save();
}

async function deleteTodo(objectId) {
  const query = new Parse.Query('Todo');
  const todo = await query.get(objectId);
  await todo.destroy();
}

國家管理

使用 React 掛勾 (useState、useReducer、useContext) 或一個小存儲器來保存 Todo 清單的狀態，並呼叫 Parse SDK。

完整的 JavaScript/TypeScript 資料模型

使用 Parse SDK 複製一個完整的 Todo 類型和用於類型安全序列化的輔助程式。

JavaScript

/** @typedef {{ objectId?: string, title: string, done: boolean, dueDate?: string, priority: number, owner?: { objectId: string }, createdAt?: string, updatedAt?: string }} Todo */

/**
 * @param {Parse.Object} obj
 * @returns {Todo}
 */
function todoFromParse(obj) {
  return {
    objectId: obj.id,
    title: obj.get('title'),
    done: obj.get('done') ?? false,
    dueDate: obj.get('dueDate')?.toISOString?.() ?? undefined,
    priority: obj.get('priority') ?? 3,
    owner: obj.get('owner') ? { objectId: obj.get('owner').id } : undefined,
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

離線優先與本地資料庫

使用 pinAll() 和 unpin，使資料離線時可用，並在重新連線時同步。

Parse React 原生 SDK 支持本地数据存储。取得 Todo 物件後，將其釘選，使清單離線可用；當裝置離線時，使用 fromLocalDatastore() 執行相同的查詢。當應用程式重新上線時，儲存變更並同步。

如下所示：在取得結果後，將結果釘選，並在不再需要本機副本時取消釘選。

JavaScript

// Pin todos after fetch (offline-first)
async function fetchAndPinTodos() {
  const query = new Parse.Query('Todo').ascending('priority');
  const results = await query.find();
  await Parse.Object.pinAll(results);
  // When offline, read from local datastore:
  // const localQuery = new Parse.Query('Todo').fromLocalDatastore();
  // const localResults = await localQuery.find();
}

async function unpinAllTodos() {
  await Parse.Object.unpinAll('Todo');
}

常見問題

有關 Todo 應用程式後端模板的常見問題。

受到全球開發人員的信賴

加入打造應用程式未來的社群

準備好建立您的 Todo App 嗎？

在幾分鐘內開始您的 React Native 專案。無需信用卡。

使用 AI Agent 建立

Todo App 後端模板React Native - 模式、API 與 AI 指南

主要心得

什麼是 React Native Todo App 後端模板？

概述

为什么使用 Back4app 构建您的 React Native Todo 后端？

核心優勢

出貨速度更快，無需後端程式碼

預設安全

即時更新

內建認證

離線工作

在幾分鐘內部署

準備好試試了嗎？

技術堆疊

ER 圖

整合流程

資料詞典

安全性與權限

行層級 ACL

等級權限

指針型所有權

模式 (JSON)

使用 AI Agent 建立

API 遊樂場

分步式 React Native 整合

步驟 1: 安裝 Parse React 原生 SDK

步驟 2：在應用程式中初始化 Parse

步驟 3：查詢所有待辦事項

步驟 4：建立待辦事項

步驟 5：更新和刪除待辦事項

國家管理

完整的 JavaScript/TypeScript 資料模型

離線優先與本地資料庫

常見問題

受到全球開發人員的信賴

準備好建立您的 Todo App 嗎？

Todo App 後端模板
React Native - 模式、API 與 AI 指南