How to Build a CRUD App with Ionic?

27min
Введение
В этом руководстве вы создадите комплексное CRUD (Создание, Чтение, Обновление, Удаление) приложение с использованием Ionic.
Этот учебник демонстрирует, как настроить приложение, которое эффективно управляет данными, интегрируясь с Back4app в качестве вашего серверного решения. Вы начнете с настройки проекта Back4app под названием Basic-CRUD-App-Ionic для использования в качестве надежного хранилища данных.
После этого вы разработаете масштабируемую схему данных, определив коллекции и поля — либо вручную, либо с помощью AI-агента Back4app. Это обеспечит готовность вашего серверного решения к выполнению основных операций с данными.
Затем вы воспользуетесь интуитивно понятным приложением администратора Back4app, которое предлагает интерфейс перетаскивания для бесшовного управления данными, позволяя легко выполнять операции CRUD.
Наконец, вы интегрируете свой фронтенд Ionic с Back4app, используя вызовы REST/GraphQL, и защитите свой сервер с помощью расширенных средств управления доступом.
К концу этого учебника вы создадите готовое к производству приложение Ionic, которое не только поддерживает базовую функциональность CRUD, но и включает аутентификацию пользователей и надежное управление данными.
Основные выводы
Поймите, как построить приложение CRUD, которое эффективно управляет данными с использованием надежного серверного решения.
Узнайте, как разработать масштабируемую серверную схему и интегрировать ее с фронтендом Ionic для улучшенного пользовательского опыта.
Изучите, как управлять данными через удобный интерфейс перетаскивания, предоставленный приложением администратора Back4app.
Получите представление о том, как защитить свой сервер с помощью мер контроля доступа.
﻿
Предварительные требования
Перед тем как начать, убедитесь, что у вас есть:
Аккаунт Back4app и активный проект.
Для получения инструкций посетите Начало работы с Back4app.
Среда разработки Ionic.
Установите Ionic CLI, следуя инструкциям на Документация Ionic Framework. Убедитесь, что у вас установлена Node.js (версии 14 или выше).
Знание TypeScript, Angular (или вашего предпочтительного фреймворка для Ionic) и REST API.
Смотрите документацию Ionic для получения дополнительных сведений.
﻿
Шаг 1 – Настройка проекта
Создание нового проекта Back4app
Войдите в свой аккаунт Back4app.
Выберите “Новое приложение” на вашей панели управления.
Назначьте вашему проекту имя: Basic-CRUD-App-Ionic и следуйте инструкциям для завершения настройки.
Создать новый проект
﻿
После создания вашего проекта он будет отображаться на вашей панели управления Back4app, служа основой для вашей конфигурации бэкенда.
﻿
Шаг 2 – Проектирование схемы вашей базы данных
Создание вашей модели данных
Для вашего CRUD-приложения вам нужно будет определить несколько коллекций. Ниже приведены примеры коллекций и соответствующих полей для эффективной структуры вашей базы данных.
1. Коллекция предметов
Эта коллекция содержит информацию о каждом элементе.
Поле
Тип данных
Описание
_ид
Идентификатор объекта
Автоматически сгенерированный первичный ключ.
название
Строка
Название или заголовок элемента.
описание
Строка
Краткое резюме предмета.
создано_в
Дата
Время, когда элемент был создан.
обновлено
Дата
Метка времени для последнего обновления.
2. Коллекция пользователей
Эта коллекция хранит учетные данные пользователей и связанные с ними детали.
Поле
Тип данных
Описание
_ид
Идентификатор объекта
Автоматически сгенерированный первичный ключ.
имя пользователя
Строка
Уникальное имя пользователя для пользователя.
электронная почта
Строка
Уникальный адрес электронной почты.
хэш_пароля
Строка
Зашифрованный пароль для аутентификации.
создано_в
Дата
Время создания пользователя.
обновлено
Дата
Время, когда были изменены данные пользователя.
Вы можете настроить эти коллекции непосредственно в панели управления Back4app, создав новый класс для каждой и добавив соответствующие столбцы.
Создать новый класс
﻿
Легко настраивайте каждое поле, выбирая его тип данных, присваивая имя и устанавливая значения по умолчанию или требования.
Создать колонку
﻿
Использование AI-агента Back4app для генерации схемы
AI-агент Back4app упрощает процесс создания схемы. Описывая вашу модель данных в подсказке, агент автоматически генерирует необходимые коллекции и поля.
Как использовать AI-агента:
Получите доступ к AI-агенту:
Перейдите к AI-агенту через вашу панель управления Back4app.
Определите вашу модель данных:
Введите подробную подсказку, которая описывает необходимые коллекции и их поля.
Просмотрите и реализуйте:
Оцените предложенную схему и примените ее к вашему проекту.
Пример подсказки
Text
Create the following collections for my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections for my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Этот подход не только экономит время, но и обеспечивает согласованность и оптимальную настройку для вашего бэкенда.
﻿
Шаг 3 – Активация приложения администратора и управление CRUD операциями
Обзор приложения администратора
Приложение администратора Back4app – это инструмент без кода, который позволяет вам легко управлять вашими данными на сервере через интерфейс перетаскивания. Этот интуитивно понятный инструмент позволяет вам без усилий выполнять CRUD операции.
Активация приложения администратора
Перейдите в меню “Дополнительно” на вашей панели управления Back4app.
Выберите “Приложение администратора” и нажмите “Включить приложение администратора.”
Настройте свои учетные данные администратора создав свою первую учетную запись администратора. Этот шаг также настраивает роли (например, B4aAdminUser) и системные коллекции.
Включить приложение администратора
﻿
После активации войдите в приложение администратора, чтобы начать управлять вашими данными.
Панель управления приложения администратора
﻿
Управление CRUD операциями через приложение администратора
В приложении администратора вы можете:
Добавить записи: Нажмите кнопку “Добавить запись” в коллекции (например, Товары), чтобы вставить новые записи.
Просмотреть/Изменить записи: Выберите запись, чтобы просмотреть или изменить ее детали.
Удалить записи: Используйте функцию удаления, чтобы устранить ненужные записи.
Этот упрощенный интерфейс улучшает общий пользовательский опыт, упрощая задачи управления данными.
﻿
Шаг 4 – Интеграция Ionic с Back4app
С настроенным бэкендом пришло время подключить ваш фронтенд Ionic к Back4app.
Использование REST или GraphQL
Вы можете выполнять операции CRUD, используя REST или GraphQL. Например, чтобы получить товары с помощью REST:
TypeScript
// Example REST call within an Ionic service
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}

fetchItems();
// Example REST call within an Ionic service
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}

fetchItems();
﻿
Интегрируйте эти API вызовы в ваши компоненты Ionic в зависимости от потребностей вашего приложения.
﻿
Шаг 5 – Обеспечение безопасности вашего бэкенда
Настройка списков контроля доступа (ACL)
Улучшите безопасность ваших данных, применяя ACL к объектам. Например, чтобы создать приватный элемент:
TypeScript
async function createPrivateItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL so that only the owner can access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL so that only the owner can access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
Настройка разрешений на уровне класса (CLP)
В панели управления Back4app настройте CLP для каждой коллекции, чтобы определить правила доступа по умолчанию. Эта конфигурация ограничивает доступ к конфиденциальным данным только для аутентифицированных или авторизованных пользователей.
﻿
Шаг 6 – Аутентификация пользователей
Управление учетными записями пользователей
Back4app использует класс пользователя Parse для управления аутентификацией. В вашем приложении Ionic реализуйте регистрацию и вход пользователей следующим образом:
TypeScript
// src/app/auth/auth.page.ts
import { Component } from '@angular/core';
import Parse from '../parseConfig';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.page.html',
  styleUrls: ['./auth.page.scss'],
})
export class AuthPage {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp() {
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
// src/app/auth/auth.page.ts
import { Component } from '@angular/core';
import Parse from '../parseConfig';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.page.html',
  styleUrls: ['./auth.page.scss'],
})
export class AuthPage {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp() {
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
﻿
Аналогичный подход можно использовать для реализации входа в систему и управления сессиями. Дополнительные функции, такие как социальный вход, проверка электронной почты и восстановление пароля, также могут быть настроены через панель управления Back4app.
﻿
Шаг 7 – Заключение и будущие направления
Поздравляем! Вы успешно разработали базовое CRUD-приложение с использованием Ionic, интегрированное с Back4app. В этом руководстве вы:
Настроен проект с именем Basic-CRUD-App-Ionic на Back4app.
Разработаны подробные коллекции базы данных для элементов и пользователей.
Управляли вашими данными с помощью эффективного приложения администратора Back4app.
Соединили ваш Ionic фронтенд с бэкендом, используя REST/GraphQL API.
Обеспечили безопасность вашего бэкенда с помощью надежных ACL и CLP.
Реализовали аутентификацию пользователей для управления учетными записями пользователей.
Следующие шаги:
Расширьте ваш фронтенд:
Обогатите ваше Ionic приложение дополнительными представлениями, навигацией и обновлениями в реальном времени.
Интегрируйте расширенные функции:
Рассмотрите возможность добавления облачных функций, интеграции сторонних API или улучшенных контролей доступа на основе ролей.
Консультируйтесь с дополнительными ресурсами:
Изучите документацию Back4app и ресурсы Ionic для продвинутой оптимизации и настройки.
Следуя этому руководству, вы теперь обладаете навыками для создания и защиты динамического приложения CRUD, готового к производству, с использованием Ionic и Back4app. Удачного кодирования и дальнейших экспериментов!
Поле	Тип данных	Описание
_ид	Идентификатор объекта	Автоматически сгенерированный первичный ключ.
название	Строка	Название или заголовок элемента.
описание	Строка	Краткое резюме предмета.
создано_в	Дата	Время, когда элемент был создан.
обновлено	Дата	Метка времени для последнего обновления.
Поле	Тип данных	Описание
_ид	Идентификатор объекта	Автоматически сгенерированный первичный ключ.
имя пользователя	Строка	Уникальное имя пользователя для пользователя.
электронная почта	Строка	Уникальный адрес электронной почты.
хэш_пароля	Строка	Зашифрованный пароль для аутентификации.
создано_в	Дата	Время создания пользователя.
обновлено	Дата	Время, когда были изменены данные пользователя.
Как создать CRUD-приложение с Preact?
Строительство CRUD-приложения с Jetpack Compose?