Как создать CRUD-приложение на Flutter?

обзор в этом руководстве вы разработаете приложение flutter, которое выполняет основные операции crud — создание, чтение, обновление и удаление — используя back4app в качестве вашего серверного решения мы проведем вас через процесс настройки проекта back4app, проектирования гибкой схемы данных и интеграции вашего приложения flutter с сервером, используя parse sdk для flutter сначала вы создадите новый проект back4app с именем basic crud app flutter этот проект предоставляет надежное решение для хранения данных для вашего мобильного приложения затем вы определите свою модель данных, создавая коллекции и поля вручную или с помощью ai агента back4app затем вы будете использовать интуитивно понятное приложение back4app admin для управления вашими данными без усилий наконец, вы подключите ваше приложение flutter к back4app, используя пакет parse server sdk flutter , что позволит выполнять безопасные и эффективные операции crud к концу этого учебника у вас будет готовое к производству приложение flutter, способное выполнять основные функции crud вместе с безопасной аутентификацией пользователей и управлением данными ключевые идеи создайте приложение flutter, которое взаимодействует с мощным бэкендом научитесь проектировать масштабируемую схему бэкенда на back4app используйте приложение администратора back4app для простого управления данными реализуйте надежные меры безопасности, включая acl и аутентификацию пользователей предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app с активным проектом нужна помощь? посетите начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки flutter установите flutter и выберите ide, такую как visual studio code или android studio базовое понимание flutter, dart и rest api посмотрите документацию flutter https //flutter dev/docs при необходимости шаг 1 – инициализация проекта создание нового проекта back4app войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления назовите ваш проект basic crud app flutter и следуйте инструкциям для завершения настройки создать новый проект после создания вашего проекта он появится на вашей панели управления, готовый к конфигурации бэкенда шаг 2 – создание модели данных настройка ваших структур данных для этого приложения flutter вы создадите несколько коллекций в вашем проекте back4app ниже приведены примеры ключевых коллекций и полей, необходимых для поддержки функциональности crud 1\ коллекция продуктов эта коллекция хранит информацию о отдельных продуктах поле тип описание ид идентификатор объекта автоматически назначенный уникальный идентификатор имя строка название продукта детали строка краткое описание продукта создано дата время, когда продукт был добавлен обновлено дата время, когда продукт был последний раз обновлен 2\ сбор пользователей эта коллекция управляет учетными данными пользователей и деталями аутентификации поле тип описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальное имя пользователя для пользователя электронная почта строка уникальный адрес электронной почты пользователя хешпароля строка зашифрованный пароль для безопасной аутентификации создано дата время, когда была создана учетная запись обновлено дата время, когда аккаунт был в последний раз обновлён вы можете создать эти коллекции вручную в панели управления back4app создать новый класс чтобы добавить поля, просто выберите тип данных, укажите имя поля, установите значение по умолчанию, если это необходимо, и отметьте его как обязательное создать колонку использование ai агента back4app для создания схемы интегрированный ai агент в back4app может автоматически генерировать вашу схему данных на основе вашего описания, упрощая процесс настройки как использовать ai агента получите доступ к ai агенту откройте панель управления back4app и найдите ai агента в настройках вашего проекта опишите вашу схему предоставьте подробный запрос, описывающий коллекции и поля, которые вам нужны просмотрите и подтвердите после того как ai агент обработает ваш ввод, просмотрите предложенную схему и подтвердите, чтобы применить её пример запроса create the following collections in my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) этот подход экономит время и гарантирует, что ваша схема данных будет как последовательной, так и оптимизированной шаг 3 – активация админ приложения и управление crud операциями введение в админ приложение админ приложение back4app предлагает интерфейс без кода для управления вашими данными на сервере его функция перетаскивания позволяет вам без усилий выполнять crud операции, такие как создание, чтение, обновление и удаление записей включение админ приложения перейдите в меню “больше” в вашей панели управления back4app выберите “admin app” и затем нажмите “включить admin app ” настройте свои учетные данные администратора создав начальную учетную запись администратора, которая также настроит роли, такие как b4aadminuser включить admin app после включения войдите в admin app, чтобы управлять данными вашего приложения панель управления admin app управление crud операциями внутри admin app вы можете создавать записи используйте опцию “добавить запись” в коллекции (например, продукты), чтобы вставить новые данные просматривать и редактировать записи нажмите на запись, чтобы просмотреть детали или обновить поля удалять записи удаляйте записи, которые больше не нужны этот удобный интерфейс упрощает процесс управления вашими данными на сервере шаг 4 – подключение вашего flutter приложения к back4app с настроенным сервером пришло время интегрировать ваше flutter приложение с back4app использование parse sdk для flutter добавьте зависимость откройте ваш pubspec yaml и включите пакет parse server sdk flutter dependencies flutter sdk flutter parse server sdk flutter ^3 1 0 инициализируйте parse в вашем приложении в вашем main dart , инициализируйте parse с вашими учетными данными back4app import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; future\<void> main() async { widgetsflutterbinding ensureinitialized(); await parse() initialize( 'your application id', 'https //parseapi back4app com', clientkey 'your flutter key', debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'basic crud app', home homepage(), ); } } реализация операций crud создайте файл dart (например, product service dart ) для обработки ваших действий crud import 'package\ parse server sdk flutter/parse server sdk dart'; class productservice { future\<list\<parseobject>> fetchproducts() async { final query = querybuilder\<parseobject>(parseobject('products')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } return \[]; } future\<void> addproduct(string name, string details) async { final product = parseobject('products') set('name', name) set('details', details); final response = await product save(); if (response success) { print('product added successfully '); } else { print('error adding product ${response error? message}'); } } future\<void> updateproduct(string objectid, string newname, string newdetails) async { final query = querybuilder\<parseobject>(parseobject('products')); query whereequalto('objectid', objectid); final response = await query first(); if (response != null && response success) { final product = response results! first as parseobject; product set('name', newname) set('details', newdetails); final saveresponse = await product save(); if (saveresponse success) { print('product updated '); } } } future\<void> deleteproduct(string objectid) async { final query = querybuilder\<parseobject>(parseobject('products')); query whereequalto('objectid', objectid); final response = await query first(); if (response != null && response success) { final product = response results! first as parseobject; final deleteresponse = await product delete(); if (deleteresponse success) { print('product deleted '); } } } } этот файл сервиса позволяет вашему flutter ui плавно взаимодействовать с вашим бэкендом back4app альтернатива использование rest/graphql в flutter если вы решите не использовать parse sdk, вы можете выполнять rest запросы, используя такие пакеты, как http однако рекомендуется использовать parse sdk для более интегрированного опыта шаг 5 – защита вашего бэкенда списки контроля доступа (acl) чтобы защитить ваши данные, настройте acl для ваших объектов например, создайте продукт, который виден только его создателю import 'package\ parse server sdk flutter/parse server sdk dart'; future\<void> addprivateproduct(string name, string details, parseuser owner) async { final product = parseobject('products') set('name', name) set('details', details); final acl = parseacl(owner) setpublicreadaccess(false) setpublicwriteaccess(false); product setacl(acl); final response = await product save(); if (response success) { print('private product created '); } else { print('error ${response error? message}'); } } разрешения на уровне класса (clp) в вашей панели управления back4app настройте clp для применения стандартных правил безопасности, обеспечивая доступ или возможность изменения конкретных коллекций только для аутентифицированных пользователей шаг 6 – реализация аутентификации пользователей настройка регистрации и входа пользователей back4app использует класс parse user для обработки аутентификации в вашем приложении flutter реализуйте регистрацию и вход пользователей следующим образом import 'package\ parse server sdk flutter/parse server sdk dart'; class authservice { future\<void> registeruser(string username, string password, string email) async { final user = parseuser createuser(username, password, email); final response = await user signup(); if (response success) { print('user registered successfully!'); } else { print('registration failed ${response error? message}'); } } future\<void> loginuser(string username, string password) async { final user = await parseuser login(username, password); if (user success) { print('logged in as ${user result? username}'); } else { print('login error ${user error? message}'); } } } эта настройка охватывает регистрацию пользователей, вход в систему и дополнительное управление аутентификацией для вашего приложения flutter шаг 7 – заключение и будущие улучшения поздравляем! вы успешно создали приложение crud на основе flutter, интегрированное с back4app в этом учебнике вы создали проект под названием basic crud app flutter , определили коллекции для продуктов и пользователей и управляли своим бэкендом с помощью admin app кроме того, вы подключили свое приложение flutter к back4app, используя пакет parse server sdk flutter и реализовали надежную безопасность и аутентификацию пользователей следующие шаги расширьте свое приложение добавьте функции, такие как расширенный поиск, детализированные представления или обновления в реальном времени улучшите функциональность бэкенда изучите облачные функции, интеграции с api третьих сторон или более детализированные контролы доступа на основе ролей продолжайте учиться просмотрите документацию back4app https //www back4app com/docs и дополнительные учебники, чтобы еще больше оптимизировать ваше приложение счастливого кодирования и удачи в вашем пути разработки на flutter!