Внутренний шаблон приложения Todo App
React Native - схема, API и руководство по искусственному интеллекту

Основные выводы

Обзор

Приложение Todo - одна из самых распространенных отправных точек для изучения бэкенд-разработки. Под капотом у него должны быть регистрация пользователей, CRUD задач, контроль доступа на основе прав собственности, а также синхронизация в реальном времени и поддержка офлайн.

В приведенной ниже схеме определены два класса - _User (встроенный) и Todo, - связанные указателем. С помощью Parse React Native SDK (Back4app) вы можете взаимодействовать с этим бэкендом непосредственно из вашего JavaScript или TypeScript кода - запрашивать, создавать, обновлять и удалять объекты, а также сохранять их для автономной работы - без написания собственного уровня API.

Почему стоит создать свой бэкэнд React Native Todo с помощью Back4app?

Back4app предоставляет вам готовый бэкэнд и Parse React Native SDK, чтобы вы могли сосредоточиться на UX и производительности, а не на REST-проводке и аутентификации.

• •Сначала оффлайн и синхронизация: Закрепите объекты Todo в локальном хранилище данных, чтобы список работал в автономном режиме и синхронизировался, когда приложение вернется в сеть - идеальный вариант для мобильных устройств.
• •Компоненты и крючки: Используйте SDK с React крючками и контекстом; поддерживайте состояние в синхронизации с Parse запросами и Live Queries для обновлений в реальном времени.
• •Кроссплатформенность, один бэкэнд: Одна и та же схема и API для iOS и Android; идеально подходит для команд React Native, использующих Expo или пустой рабочий процесс.

Идеально подходит для React нативных разработчиков, использующих Expo или голый рабочий процесс - один бэкенд, обе платформы.

Основные преимущества

Бэкенд Todo, готовый к производству, позволит вам ускорить процесс поставки и сосредоточиться на своем приложении.

Технический стек

Все, что работает с этим шаблоном приложения Todo, можно увидеть с первого взгляда.

Диаграмма ER

Диаграмма "сущность-связь" для модели данных приложения React Native Todo.

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 - логин, затем запрос и создание тодо.

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

Словарь данных

Полный справочник по полям для каждого класса в схеме.

Безопасность и разрешения

Как права собственности, ACL и разрешения на уровне классов защищают данные в этой схеме.

Схема (JSON)

Необработанное определение схемы в формате JSON - скопируйте и используйте в своем приложении Back4app или импортируйте через API.

{
  "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
        }
      }
    }
  ]
}

API Playground

Попробуйте конечные точки REST и GraphQL для схемы Todo. Ответы из примера данных выше - учетная запись Back4app не требуется.

Использует ту же схему Todo, что и этот шаблон.

Пошаговая интеграция React Native

Подключитесь к своему Back4app бэкенду из React Native приложения, используя Parse React Native SDK.

1. Шаг 1: Установите Parse React Native SDK

   Добавьте Parse React Native SDK (или React-native-Parse) в свой проект с помощью npm или yarn.

   JavaScript

   Копировать

   1

   2

   npm install parse --save
   # or: yarn add parse

2. Шаг 2: Инициализируйте Parse в вашем приложении

   Инициализируйте Parse SDK в записи вашего приложения (например, App.js или index.js) с идентификатором приложения, URL-адресом сервера и ключом JavaScript.

   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. Шаг 3: Запросить все тодо

   Создайте Parse Query для класса Todo, добавьте порядок возрастания по приоритету и вызовите 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. Шаг 4: Создайте тодо

   Создайте новый Parse.Object('Todo'), установите название, выполненное и приоритет, затем вызовите save().

   JavaScript

   Копировать

   1

   2

   3

   4

   5

   6

   7

   8

   9

   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. Шаг 5: Обновление и удаление тодо

   Получите Todo по объектуId, установите поля и вызовите save() для обновления или destroy() для удаления.

   JavaScript

   Копировать

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   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();
   }

Полная модель данных JavaScript/TypeScript

Скопируйте полный тип Todo и помощники для безопасной для типов сериализации с помощью Parse SDK.

/** @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,
  };
}

Часто задаваемые вопросы

Общие вопросы о шаблоне бэкенда приложения Todo.