How to Build a Basic CRUD App with Angular?

введение в этом руководстве мы проведем вас через процесс создания базового приложения crud (создание, чтение, обновление, удаление) с использованием angular вы научитесь разрабатывать приложение, которое эффективно управляет операциями с данными, используя мощный фреймворк angular для начала вы создадите и настроите новый проект back4app под названием basic crud app angular , который будет служить основой для управления вашими данными на сервере затем вы разработаете масштабируемую модель базы данных, описав детализированные коллекции и поля — либо вручную, либо с помощью ai агента back4app этот шаг гарантирует, что ваша система хорошо подготовлена для обработки всех функций crud после настройки вашей схемы вы исследуете приложение администратора back4app, интуитивно понятный интерфейс перетаскивания, чтобы легко управлять вашими коллекциями и записями наконец, вы интегрируете ваш фронтенд на angular с back4app, используя rest/graphql (или parse sdk, если предпочтительно), а также реализуете продвинутые меры безопасности для защиты вашего бэкенда к концу этого учебника вы создадите готовое к производству приложение на angular с функцией аутентификации пользователей и полными возможностями crud основные выводы освойте, как строить crud приложения, которые эффективно обрабатывают данные с надежным бэкендом получите практические знания о создании масштабируемой модели данных и связывании ее с фронтендом на angular научитесь использовать удобный интерфейс приложения back4app admin для простого управления данными поймите стратегии развертывания, включая контейнеризацию docker, для быстрого запуска вашего приложения на angular предварительные требования перед началом убедитесь, что у вас есть следующее аккаунт back4app с настроенным новым проектом нужна помощь? ознакомьтесь с началом работы с back4app https //www back4app com/docs/get started/new parse app среда разработки angular установите angular cli, выполнив npm install g @angular/cli и создайте новый проект с помощью ng new убедитесь, что установлен node js (версия 14 или выше) базовое понимание typescript, angular и rest api для освежения знаний посетите документацию angular https //angular io/docs шаг 1 – настройка вашего проекта запуск нового проекта back4app войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления введите имя проекта basic crud app angular и следуйте инструкциям по настройке создать новый проект после создания проекта он появится на вашей панели управления back4app, предоставляя надежную основу для вашей конфигурации бэкенда шаг 2 – создание схемы вашей базы данных конструирование вашей модели данных для этого crud приложения вы определите несколько коллекций ниже приведены примеры коллекций и их полей, которые будут основой вашей схемы базы данных эти коллекции позволяют приложению выполнять основные операции crud 1 сбор предметов эта коллекция хранит информацию о каждом предмете поле тип данных детали ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название элемента описание строка краткое резюме предмета создано в дата время, когда элемент был добавлен обновлено дата метка времени для последнего обновления 2 коллекция пользователей эта коллекция хранит учетные данные пользователей и данные аутентификации поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка отличный адрес электронной почты хэш пароля строка безопасно захешированный пароль для аутентификации создано в дата метка времени, указывающая, когда была создана учетная запись обновлено дата время последнего обновления вы можете настроить эти коллекции вручную в панели управления back4app, создав новый класс для каждой и добавив столбцы для определения полей создать новый класс добавьте столбцы, выбрав тип данных, назвав поле, установив значение по умолчанию и отметив, является ли оно обязательным создать столбец использование ai агента back4app для настройки схемы ai агент back4app — это универсальный инструмент, доступный на вашей панели управления, который позволяет вам автоматически генерировать схему вашей базы данных на основе описательного запроса эта функция экономит время и гарантирует, что ваш бэкенд идеально подходит для операций crud шаги для использования ai агента откройте ai агент войдите в свою панель управления back4app и найдите опцию ai агента опишите вашу схему введите подробный запрос, описывающий коллекции и поля, которые вам нужны просмотрите и подтвердите после отправки просмотрите сгенерированную схему и примените ее к вашему проекту пример запроса create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ 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 – подключение вашего angular фронтенда к back4app теперь, когда ваш сервер полностью настроен и управляется через приложение администратора, пришло время связать ваш angular фронтенд с back4app вариант a интеграция parse sdk с angular установите sdk parse npm install parse настройте parse в вашем проекте angular создайте файл конфигурации (например, src/app/parse config ts ) // src/app/parse config ts import parse from 'parse'; // замените на ваши фактические учетные данные back4app parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 3\ implement parse in an angular component for example, create a component to fetch and display items ```typescript // src/app/components/items list/items list component ts import { component, oninit } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app items list', templateurl ' /items list component html', styleurls \[' /items list component css'] }) export class itemslistcomponent implements oninit { items any\[] = \[]; async ngoninit() { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error retrieving items ', error); } } } а в html шаблоне ( items list component html ) items {{ item get('title') }} – {{ item get('description') }} вариант b использование rest или graphql если вы предпочитаете не использовать parse sdk, вы можете выполнять операции crud через rest или graphql например, чтобы получить элементы с помощью rest в angular, создайте метод сервиса, как этот // src/app/services/items service ts import { injectable } from '@angular/core'; import { httpclient, httpheaders } from '@angular/common/http'; import { observable } from 'rxjs'; @injectable({ providedin 'root' }) export class itemsservice { private apiurl = 'https //parseapi back4app com/classes/items'; constructor(private http httpclient) { } getitems() observable\<any> { const headers = new httpheaders({ 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }); return this http get(this apiurl, { headers }); } } вы можете интегрировать эти api вызовы в ваши angular компоненты по мере необходимости шаг 5 – защита вашего бэкенда реализация списков контроля доступа (acl) улучшите безопасность ваших данных, назначив acl вашим объектам например, чтобы создать элемент, доступный только его владельцу async function createsecureitem(itemdata any, owneruser any) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // assign acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы установить правила доступа по умолчанию, гарантируя, что только аутентифицированные или авторизованные пользователи могут получить доступ к конфиденциальным данным шаг 6 – управление аутентификацией пользователей создание и управление учетными записями пользователей back4app использует класс user от parse для управления аутентификацией в вашем проекте angular вы можете обрабатывать регистрацию и вход пользователей следующим образом // src/app/components/auth/auth component ts import { component } from '@angular/core'; import parse from ' / /parse config'; @component({ selector 'app auth', templateurl ' /auth component html', styleurls \[' /auth component css'] }) export class authcomponent { username string = ''; password string = ''; email string = ''; async signup(event event) { event preventdefault(); 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 registration successful!'); } catch (error any) { alert('registration error ' + error message); } } } а соответствующий html шаблон ( auth component html ) register register register аналогичный подход можно применить для входа пользователя и управления сессиями для таких функций, как социальный вход или сброс пароля, настройте параметры в панели управления back4app шаг 7 – развертывание вашего angular фронтенда функция веб развертывания back4app позволяет вам размещать ваше angular приложение, развертывая код непосредственно из репозитория github в этом разделе вы подготовите вашу производственную сборку, зафиксируете ваш исходный код и интегрируете ваш репозиторий для развертывания 7 1 создание вашей производственной версии откройте каталог вашего проекта в терминале запустите команду сборки для производства ng build prod эта команда компилирует ваше angular приложение в оптимизированную dist/ папку проверьте сборку убедитесь, что dist/ каталог содержит index html и все необходимые ресурсы 7 2 структурирование и загрузка вашего исходного кода ваш репозиторий должен содержать ваш весь проект angular типичная структура файлов может выглядеть так basic crud app angular/ ├── node modules/ ├── src/ │ ├── app/ │ │ ├── app component ts │ │ ├── app module ts │ │ └── components/ │ │ ├── auth/ │ │ │ ├── auth component ts │ │ │ └── auth component html │ │ └── items list/ │ │ ├── items list component ts │ │ └── items list component html ├── angular json ├── package json └── readme md пример src/app/parse config ts // src/app/parse config ts import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; пример src/app/app component ts import { component } from '@angular/core'; import parse from ' /parse config'; @component({ selector 'app root', template ` \<div style="padding 2rem;"> \<h1>items\</h1> \<app items list>\</app items list> \</div> `, styles \[] }) export class appcomponent { } коммит вашего кода в github инициализируйте репозиторий git в папке вашего проекта, если вы еще этого не сделали git init добавьте ваши файлы проекта git add закоммитьте ваши изменения git commit m "первый коммит для angular фронтенда" создайте репозиторий на github например, назовите его basic crud app angular запушьте ваш код в github git remote add origin https //github com/your username/basic crud app angular git git push u origin main 7 3 связывание вашего репозитория github с веб развертыванием получите доступ к функции веб развертывания войдите в свою панель управления back4app, выберите свой проект ( basic crud app angular ), и выберите веб развертывание подключите свою учетную запись github следуйте инструкциям для интеграции вашей учетной записи github, позволяя back4app получить доступ к вашему репозиторию выберите свой репозиторий и ветку выберите свой репозиторий (например, basic crud app angular ) и ветку (например, main ) которая содержит ваш код 7 4 настройка параметров развертывания укажите необходимые детали конфигурации команда сборки если в вашем репозитории отсутствует предварительно собранная dist/ папка, укажите команду сборки (например, ng build prod ) выходной каталог установите выходной каталог на dist/your project name чтобы back4app знал, где находятся ваши статические файлы переменные окружения добавьте любые необходимые переменные окружения (такие как ключи api) в конфигурацию развертывания 7 5 контейнеризация вашего angular приложения с помощью docker если вы предпочитаете развертывание на основе docker, включите dockerfile в ваш репозиторий например # use an official node image to build the angular app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application and build it copy run npm run build prod \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/dist/your project name /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] включите этот dockerfile в ваш репозиторий, затем выберите опцию развертывания docker в настройках веб развертывания back4app 7 6 запуск вашего приложения нажмите кнопку развертывания после настройки параметров развертывания нажмите развернуть мониторинг процесса развертывания back4app загрузит ваш код, выполнит команду сборки при необходимости и развернет ваше приложение angular получите ваш url после успешного развертывания back4app предоставит url, по которому ваше приложение доступно 7 7 тестирование вашего развернутого приложения посетите предоставленный url откройте url в вашем браузере проверьте функциональность убедитесь, что ваше приложение angular загружается правильно, все маршруты работают как ожидалось, а ресурсы обслуживаются корректно устраните неполадки при необходимости используйте инструменты разработчика браузера для выявления и устранения любых проблем проверьте журналы развертывания back4app и вашу конфигурацию, если возникнут проблемы шаг 8 – завершение и будущие направления поздравляем! вы успешно создали базовое crud приложение с использованием angular и back4app вы настроили проект под названием basic crud app angular , разработали обширные коллекции баз данных для элементов и пользователей и управляли своими данными с помощью интуитивно понятного приложения администратора кроме того, вы подключили свой фронтенд на angular к бэкенду и реализовали надежные меры безопасности следующие шаги улучшите свой фронтенд расширьте свое приложение на angular с помощью продвинутых функций, таких как детальные представления элементов, функциональность поиска и обновления в реальном времени расширьте функциональность рассмотрите возможность интеграции дополнительной логики бэкенда (например, облачные функции) или реализации контроля доступа на основе ролей изучите дополнительные ресурсы посмотрите документацию back4app https //www back4app com/docs и другие ресурсы по angular, чтобы углубить свои знания с этим руководством вы теперь готовы создавать надежные, масштабируемые crud бэкенды для ваших приложений на angular с использованием back4app удачного кодирования!