Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough

обзор в этом руководстве вы узнаете, как разработать полностью функциональное crud (создание, чтение, обновление, удаление) приложение с использованием polymer этот пошаговый процесс демонстрирует, как выполнять основные операции для управления и изменения данных вы начнете с настройки проекта back4app под названием basic crud app polymer , который будет служить бэкендом для вашего приложения после этого вы создадите масштабируемую модель данных, определив точные коллекции и поля — либо вручную, либо с помощью ai агента back4app — чтобы обеспечить оптимизацию вашей базы данных для операций crud затем вы воспользуетесь приложением back4app admin app, удобным интерфейсом управления с функцией перетаскивания, чтобы упростить ваши операции с данными наконец, вы интегрируете свой фронтенд на polymer с back4app, используя rest/graphql api, одновременно усиливая безопасность бэкенда с помощью сложных средств управления доступом к концу этого учебника вы создадите веб приложение, готовое к производству, которое поддерживает основные операции crud и включает аутентификацию пользователей и надежные функции управления данными что вы узнаете разработайте приложение crud, которое эффективно управляет данными с надежным бэкендом создайте масштабируемый бэкенд и подключите его к фронтенду на основе polymer используйте интерфейс администратора с функцией перетаскивания (back4app admin app) для упрощения операций с данными разверните ваше приложение, используя современные технологии, включая контейнеризацию с docker предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app с активным проектом для получения помощи ознакомьтесь с начало работы с back4app https //www back4app com/docs/get started/new parse app настройка разработки polymer используйте polymer cli или аналогичные инструменты и убедитесь, что установлен node js (версии 14 или выше) базовые знания javascript, polymer и rest api вы можете обратиться к документации polymer https //www polymer library polymer project org/3 0/docs/devguide/feature overview для получения дополнительной информации шаг 1 – настройка вашего проекта инициация нового проекта back4app получите доступ к вашей учетной записи back4app выберите опцию “новое приложение” на вашей панели управления назначьте имя проекта basic crud app polymer и следуйте инструкциям для завершения создания проекта создать новый проект после выполнения этих шагов ваш проект будет виден на панели управления 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) \ 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) использование ai агента гарантирует, что ваша схема будет как последовательной, так и оптимизированной для требований вашего приложения шаг 3 – активация админ приложения и выполнение операций crud обзор админ приложения админ приложение back4app предлагает интерфейс без кода для управления бэкендом его интуитивно понятный дизайн с перетаскиванием упрощает операции crud, позволяя вам легко создавать, просматривать, обновлять и удалять записи активация админ приложения перейдите в меню “дополнительно” на вашей панели управления back4app выберите “admin app” и затем нажмите на “включить admin app ” настройте свои учетные данные администратора создав первоначального администратора, который также установит роли (например, b4aadminuser ) и системные коллекции включить admin app после активации войдите в admin app, чтобы управлять данными вашего бэкенда панель управления admin app управление данными с помощью admin app внутри admin app вы можете добавить записи используйте кнопку “добавить запись” в любой коллекции (например, элементы), чтобы создать новые записи просмотреть/изменить записи нажмите на запись, чтобы просмотреть ее детали или изменить ее поля удалить записи используйте функцию удаления, чтобы устранить данные, которые больше не нужны этот интерфейс значительно улучшает удобство использования, упрощая все функции crud шаг 4 – подключение polymer к back4app с вашим бэкендом, настроенным через admin app, пришло время связать ваш фронтенд polymer с back4app вариант a использование rest/graphql api мы будем использовать rest или graphql api для выполнения операций crud например, чтобы получить элементы с помощью rest // example rest call to get items const fetchitems = async () => { 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('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); интегрируйте аналогичные api вызовы в ваши элементы polymer по мере необходимости шаг 5 – укрепление безопасности бэкенда реализация списков контроля доступа (acl) защитите ваши данные, применяя acl к объектам например, чтобы создать ограниченный элемент async function createrestricteditem(data, owner) { const itemdata = { title data title, description data description }; // configure acl to permit only the owner access const acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ itemdata, acl acl }) }); const result = await response json(); console log('restricted item created ', result); } catch (error) { console error('error creating item ', error); } } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы определить правила доступа по умолчанию эта конфигурация гарантирует, что только авторизованные пользователи могут получить доступ к конфиденциальным данным шаг 6 – аутентификация пользователей в polymer создание учетных записей пользователей back4app использует класс user от parse для управления аутентификацией в вашем проекте polymer реализуйте регистрацию и вход пользователей, как показано ниже // example function for user registration using rest api async function signupuser(username, password, email) { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('user registered successfully!'); console log(result); } catch (error) { alert('registration error ' + error message); } } аналогичный подход можно использовать для управления входом и сессиями, с дополнительными функциями, такими как проверка электронной почты и сброс пароля, настроенными через панель управления back4app шаг 7 – развертывание вашего фронтенда polymer с помощью веб развертывания функция веб развертывания back4app позволяет вам без проблем размещать ваше приложение polymer, связывая его с вашим репозиторием github следуйте этим шагам, чтобы развернуть ваше приложение 7 1 создание вашей производственной версии откройте директорию вашего проекта в терминале выполните команду сборки polymer build эта команда генерирует папку build со всеми оптимизированными статическими файлами проверьте сборку убедитесь, что папка build содержит файл index html вместе с необходимыми директориями активов 7 2 организация и загрузка вашего исходного кода ваш репозиторий должен содержать полный исходный код вашего фронтенда на polymer пример структуры каталогов может выглядеть так basic crud app polymer frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── my app js │ ├── api config js │ └── components/ │ ├── items list js │ └── auth form js ├── polymer json └── readme md пример src/api config js // src/api config js export const app id = 'your application id'; export const rest api key = 'your rest api key'; export const api url = 'https //parseapi back4app com'; пример src/my app js import { polymerelement, html } from '@polymer/polymer/polymer element js'; class myapp extends polymerelement { static get template() { return html` \<style> / your css styles here / \</style> \<h1>item manager\</h1> \<items list>\</items list> \<auth form>\</auth form> `; } } customelements define('my app', myapp); пример src/my app js коммит вашего кода в github инициализируйте репозиторий git (если еще не сделано) git init стадируйте ваши файлы git add закоммитьте ваши изменения git commit m "первый коммит для фронтенда polymer" создайте репозиторий на github назовите его basic crud app polymer frontend запушьте ваш код в github git remote add origin https //github com/your username/basic crud app polymer frontend git git push u origin main 7 3 подключение вашего репозитория github к веб развертыванию доступ к веб развертыванию войдите в back4app, перейдите к вашему проекту ( basic crud app polymer ), и выберите функцию веб развертывание интеграция с github следуйте инструкциям, чтобы подключить вашу учетную запись github, позволяя back4app получить доступ к вашему репозиторию выберите ваш репозиторий и ветку выберите репозиторий (например, basic crud app polymer frontend ) и соответствующую ветку (например, main ) 7 4 настройка параметров развертывания укажите следующие детали команда сборки если папка build не была предварительно собрана, установите команду (например, polymer build ) back4app выполнит это во время развертывания каталог вывода установите его на build так, чтобы back4app мог идентифицировать ваши статические файлы сайта переменные окружения включите все необходимые переменные (такие как ключи api) в конфигурацию развертывания 7 5 контейнеризация вашего polymer приложения с помощью docker если docker является вашим выбором для развертывания, включите dockerfile в ваш репозиторий, аналогичный следующему # use an official node image for building from node 16 alpine as builder \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy the project files copy \# build the polymer app run polymer build \# use nginx to serve the built files from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] интегрируйте этот dockerfile в ваш проект и выберите docker в качестве варианта развертывания в back4app 7 6 развертывание вашего приложения нажмите кнопку развертывания после подтверждения ваших настроек нажмите развернуть следите за процессом сборки back4app получит ваш код, выполнит команду сборки и развернет ваше контейнеризированное приложение получите ваш url после развертывания вы получите url, по которому доступно ваше приложение polymer 7 7 тестирование вашего развертывания посетите url откройте предоставленную ссылку в вашем браузере проверьте функциональность убедитесь, что все маршруты загружаются правильно и что такие ресурсы, как css, javascript и изображения, отображаются как ожидалось устранение неполадок если возникнут какие либо проблемы, просмотрите журналы развертывания и настройки интеграции github на back4app шаг 8 – завершение и будущие направления отличная работа! вы успешно создали полное crud приложение с использованием polymer и back4app ваш проект, basic crud app polymer , теперь имеет четко определенные коллекции для элементов и пользователей, которые управляются без проблем через админ приложение, с безопасным и интегрированным фронтендом на polymer следующие шаги улучшите фронтенд добавьте функции, такие как детальные представления элементов, функциональность поиска или обновления в реальном времени расширьте функциональность интегрируйте дополнительную логику на стороне сервера с помощью облачных функций или сторонних api изучите больше посмотрите документацию back4app https //www back4app com/docs для более сложных конфигураций и оптимизаций производительности с этими навыками вы хорошо подготовлены для создания масштабируемых crud бэкендов и развертывания надежных веб приложений с polymer и back4app удачного кодирования!