How to Build a CRUD App with Ionic?

введение в этом руководстве вы создадите комплексное crud (создание, чтение, обновление, удаление) приложение с использованием ionic этот учебник демонстрирует, как настроить приложение, которое эффективно управляет данными, интегрируясь с back4app в качестве вашего серверного решения вы начнете с настройки проекта back4app под названием basic crud app ionic для использования в качестве надежного хранилища данных после этого вы разработаете масштабируемую схему данных, определив коллекции и поля — либо вручную, либо с помощью ai агента back4app это обеспечит готовность вашего серверного решения к выполнению основных операций с данными затем вы воспользуетесь интуитивно понятным приложением администратора back4app, которое предлагает интерфейс перетаскивания для бесшовного управления данными, позволяя легко выполнять операции crud наконец, вы интегрируете свой фронтенд ionic с back4app, используя вызовы rest/graphql, и защитите свой сервер с помощью расширенных средств управления доступом к концу этого учебника вы создадите готовое к производству приложение ionic, которое не только поддерживает базовую функциональность crud, но и включает аутентификацию пользователей и надежное управление данными основные выводы поймите, как построить приложение crud, которое эффективно управляет данными с использованием надежного серверного решения узнайте, как разработать масштабируемую серверную схему и интегрировать ее с фронтендом ionic для улучшенного пользовательского опыта изучите, как управлять данными через удобный интерфейс перетаскивания, предоставленный приложением администратора back4app получите представление о том, как защитить свой сервер с помощью мер контроля доступа предварительные требования перед тем как начать, убедитесь, что у вас есть аккаунт back4app и активный проект для получения инструкций посетите начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки ionic установите ionic cli, следуя инструкциям на документация ionic framework https //ionicframework com/docs/intro/cli убедитесь, что у вас установлена node js (версии 14 или выше) знание typescript, angular (или вашего предпочтительного фреймворка для ionic) и rest api смотрите документацию ionic https //ionicframework com/docs для получения дополнительных сведений шаг 1 – настройка проекта создание нового проекта back4app войдите в свой аккаунт back4app выберите “новое приложение” на вашей панели управления назначьте вашему проекту имя basic crud app ionic и следуйте инструкциям для завершения настройки создать новый проект после создания вашего проекта он будет отображаться на вашей панели управления back4app, служа основой для вашей конфигурации бэкенда шаг 2 – проектирование схемы вашей базы данных создание вашей модели данных для вашего crud приложения вам нужно будет определить несколько коллекций ниже приведены примеры коллекций и соответствующих полей для эффективной структуры вашей базы данных 1\ коллекция предметов эта коллекция содержит информацию о каждом элементе поле тип данных описание ид идентификатор объекта автоматически сгенерированный первичный ключ название строка название или заголовок элемента описание строка краткое резюме предмета создано в дата время, когда элемент был создан обновлено дата метка времени для последнего обновления 2\ коллекция пользователей эта коллекция хранит учетные данные пользователей и связанные с ними детали поле тип данных описание ид идентификатор объекта автоматически сгенерированный первичный ключ имя пользователя строка уникальное имя пользователя для пользователя электронная почта строка уникальный адрес электронной почты хэш пароля строка зашифрованный пароль для аутентификации создано в дата время создания пользователя обновлено дата время, когда были изменены данные пользователя вы можете настроить эти коллекции непосредственно в панели управления back4app, создав новый класс для каждой и добавив соответствующие столбцы создать новый класс легко настраивайте каждое поле, выбирая его тип данных, присваивая имя и устанавливая значения по умолчанию или требования создать колонку использование ai агента back4app для генерации схемы ai агент back4app упрощает процесс создания схемы описывая вашу модель данных в подсказке, агент автоматически генерирует необходимые коллекции и поля как использовать ai агента получите доступ к ai агенту перейдите к ai агенту через вашу панель управления back4app определите вашу модель данных введите подробную подсказку, которая описывает необходимые коллекции и их поля просмотрите и реализуйте оцените предложенную схему и примените ее к вашему проекту пример подсказки 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 // 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 к объектам например, чтобы создать приватный элемент 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 реализуйте регистрацию и вход пользователей следующим образом // 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 https //www back4app com/docs и ресурсы ionic https //ionicframework com/docs для продвинутой оптимизации и настройки следуя этому руководству, вы теперь обладаете навыками для создания и защиты динамического приложения crud, готового к производству, с использованием ionic и back4app удачного кодирования и дальнейших экспериментов!