Building a Basic CRUD Application with Cycle.js: A Comprehensive Guide

обзор этот гид проведет вас через создание полнофункционального crud (создание, чтение, обновление и удаление) приложения с использованием cycle js в этом учебном пособии вы настроите проект back4app под названием basic crud app cyclejs который будет служить надежным бэкендом для вашего приложения вы научитесь разрабатывать масштабируемую модель данных, управлять своими данными через интуитивно понятное приложение администратора back4app и интегрировать свой фронтенд на cycle js с back4app, используя вызовы rest/graphql к концу вы получите веб приложение, готовое к производству, способное выполнять операции crud вместе с аутентификацией пользователей и безопасной обработкой данных ключевые идеи создайте функциональную систему crud с надежным бэкендом получите практический опыт в проектировании масштабируемой модели данных используйте инструмент администрирования с функцией перетаскивания для удобного управления данными интегрируйте фронтенд на cycle js с back4app через rest/graphql изучите стратегии развертывания, включая контейнеризацию docker предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app с активным проектом если вам нужна помощь, ознакомьтесь с началом работы с back4app https //www back4app com/docs/get started/new parse app настройка разработки cycle js используйте такие инструменты, как create cycle app https //github com/cyclejs community/create cycle app и убедитесь, что установлен node js (версия 14 или выше) знание javascript, cycle js и rest api для освежения знаний обратитесь к документации cycle js https //cycle js org/ шаг 1 – инициализация проекта создание нового проекта back4app войдите в свой аккаунт back4app нажмите кнопку “новое приложение” на вашей панели управления назначьте имя проекта basic crud app cyclejs и следуйте инструкциям по настройке создать новый проект после создания ваш проект будет виден на панели управления, готовый к конфигурации и управлению на стороне сервера шаг 2 – определение схемы вашей базы данных структурирование вашей модели данных для этого crud приложения вы создадите несколько коллекций для управления вашими данными ниже приведены примеры коллекций с основными полями и типами данных 1\ коллекция предметов эта коллекция будет хранить детали каждого элемента поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название элемента описание строка краткое резюме предмета создано в дата метка времени, когда элемент был добавлен обновлено дата метка времени для последнего обновления 2\ сбор пользователей эта коллекция обрабатывает данные пользователей и аутентификацию поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор пользователя электронная почта строка адрес электронной почты пользователя хэш пароля строка зашифрованный пароль для безопасной аутентификации создано в дата время создания аккаунта обновлено дата метка времени для самого последнего обновления вы можете определить эти коллекции вручную через панель управления back4app, создавая новые классы и настраивая соответствующие поля создать новый класс чтобы добавить поля, выберите тип данных, укажите имя поля, при желании установите значение по умолчанию и отметьте поле как обязательное, если это необходимо создать колонку автоматизация создания схемы с помощью ai агента back4app ai агент back4app упрощает создание схемы, автоматически генерируя вашу модель данных на основе предоставленного запроса это обеспечивает последовательный и эффективный дизайн базы данных шаги для использования ai агента получите доступ к ai агенту войдите в свою панель управления back4app и выберите ai агента из меню или настроек проекта опишите свои требования к данным введите подробный запрос, в котором перечислены необходимые коллекции и их поля просмотрите и примените изучите автоматически сгенерированную схему и примените ее к вашему проекту пример запроса create these 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) эта функция не только экономит время, но и обеспечивает хорошо структурированную и оптимизированную схему шаг 3 – активация админ приложения и управление crud операциями изучение админ приложения админ приложение back4app предоставляет интерфейс без кода с возможностью перетаскивания для простого управления данными на сервере оно упрощает операции crud для ваших коллекций включение приложения администратора откройте меню “дополнительно” в вашей панели управления back4app выберите “приложение администратора” и затем нажмите на “включить приложение администратора ” настройте свои учетные данные администратора создав своего первого администратора это действие также инициализирует системные роли (например, b4aadminuser ) включить приложение администратора после активации войдите в приложение администратора, чтобы начать управлять вашими коллекциями панель управления приложения администратора выполнение операций crud через приложение администратора в приложении администратора вы можете добавить записи нажмите кнопку “добавить запись” в любой коллекции (например, элементы), чтобы вставить новые записи просмотреть/изменить записи выберите существующую запись, чтобы просмотреть детали или изменить поля удалить записи используйте опцию удаления, чтобы избавиться от ненужных записей этот удобный интерфейс значительно улучшает управление и администрирование ваших данных шаг 4 – интеграция cycle js с back4app теперь, когда ваш бэкенд работает через back4app, пришло время интегрировать ваш фронтенд на cycle js опция использование rest/graphql api мы сосредоточимся на вызовах rest api для взаимодействия с вашим бэкендом ниже приведен пример компонента cycle js, который извлекает и отображает элементы из вашей базы данных back4app с использованием http драйвера cycle пример извлечение и отображение элементов с помощью cycle js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, ul, li, input, button, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; function main(sources) { // intent capture add item interactions const addclick$ = sources dom select(' add') events('click'); // model make an http request to fetch items const request$ = xs of({ url 'https //parseapi back4app com/classes/items', category 'items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); // intent handle http responses const items$ = sources http select('items') flatten() map(res => res body results); // view render the items list const vdom$ = items$ startwith(\[]) map(items => div(\[ h1('items'), button(' add', 'add item'), ul( items map(item => li(`${item title} — ${item description}`) ) ) ]) ); return { dom vdom$, http request$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); этот пример кода демонстрирует, как использовать cycle js для выполнения http get запроса для получения элементов и их динамического отображения шаг 5 – защита вашего бэкенда применение списков контроля доступа (acl) обеспечьте безопасность ваших объектов, определив acl например, при создании приватного элемента async function createprivateitem(data, owneruser) { const newitem = { title data title, description data description }; // define acl restrict access to the owner only newitem acl = { \[owneruser id] { read true, write true }, ' ' { read false, write false } }; 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(newitem) }); const result = await response json(); console log('created item ', result); } catch (error) { console error('error creating item ', error); } } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы гарантировать, что только аутентифицированные пользователи могут получить доступ к конфиденциальной информации шаг 6 – реализация аутентификации пользователей настройка регистрации аккаунта и входа в систему back4app использует класс user для аутентификации используйте вызовы rest api для управления регистрацией и входом пользователей в вашем приложении cycle js ниже приведен пример обработки регистрации пользователя async function signupuser(userdata) { 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 userdata username, password userdata password, email userdata email }) }); const result = await response json(); alert('registration successful!'); return result; } catch (error) { alert('registration error ' + error message); } } вы можете воспроизвести аналогичные шаблоны для входа пользователя и управления сессиями шаг 7 – развертывание вашего фронтенда cycle js с помощью веб развертывания функция веб развертывания back4app позволяет вам без труда размещать ваше приложение cycle js через интеграцию с вашим репозиторием github 7 1 подготовка вашего производственного сборки откройте каталог вашего проекта в терминале запустите команду сборки npm run build это создаст build каталог с оптимизированными статическими файлами подтвердите сборку убедитесь, что в папке build содержится index html и связанные каталоги активов 7 2 организация и загрузка вашего исходного кода ваш репозиторий git должен включать весь исходный код приложения cycle js пример структуры файлов basic crud app cyclejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ ├── httpdrivers js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md пример файла src/main js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; import itemslist from ' /components/itemslist'; function main(sources) { const itemsvtree$ = itemslist(sources); const vdom$ = itemsvtree$ map(tree => div(\[ h1('cycle js crud application'), tree ]) ); return { dom vdom$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); коммит в github инициализируйте репозиторий git (если еще не сделано) git init добавьте ваши файлы в индекс git add закоммитьте вашу работу git commit m "первый коммит для фронтенда cycle js" создайте репозиторий на github (например, basic crud app cyclejs frontend ) запушьте ваш репозиторий git remote add origin https //github com/your username/basic crud app cyclejs frontend git git push u origin main 7 3 связывание вашего репозитория с веб развертыванием доступ к веб развертыванию войдите в back4app, перейдите к вашему проекту ( basic crud app cyclejs ), и выберите функцию веб развертывание подключение к github следуйте инструкциям, чтобы связать вашу учетную запись github, чтобы back4app мог получить доступ к вашему репозиторию выберите репозиторий и ветку выберите ваш репозиторий (например, basic crud app cyclejs frontend ) и ветку (обычно main ) 7 4 настройки развертывания команда сборки если в вашем репозитории отсутствует предварительно собранная build папка, укажите команду сборки (например, npm run build ) каталог вывода установите это значение на build так, чтобы back4app знал, где найти статические файлы переменные окружения включите любые необходимые ключи api или детали конфигурации 7 5 докеризация вашего приложения cycle js если вы выбрали развертывание с помощью docker, добавьте dockerfile в ваш репозиторий \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run npm install \# copy the remaining files copy \# build the cycle js application run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] выберите опцию развертывания docker в вашей конфигурации веб развертывания, если вы решите контейнеризировать ваше приложение 7 6 запуск вашего приложения разверните ваше приложение нажмите кнопку развернуть после настройки ваших параметров мониторинг развертывания back4app извлечет ваш код из github, соберет приложение (если настроено) и развернет его доступ к вашему приложению после завершения развертывания back4app предоставит url для вашего живого приложения cycle js 7 7 тестирование вашего развертывания посетите развернутый url откройте предоставленный url в вашем браузере подтвердите функциональность убедитесь, что все маршруты и ресурсы загружаются правильно отладка при необходимости используйте инструменты разработчика браузера и просмотрите журналы развертывания back4app для устранения любых проблем шаг 8 – завершение и будущие улучшения поздравляем! вы успешно создали crud приложение с использованием cycle js и back4app вы настроили проект под названием basic crud app cyclejs , определили схему базы данных для элементов и пользователей, и управляли своими данными через интуитивно понятное приложение администратора кроме того, вы интегрировали свой фронтенд на cycle js с бэкендом, используя rest/graphql, и защитили свои данные с помощью надлежащих средств управления доступом следующие шаги расширьте свой фронтенд добавьте более сложные представления, фильтрацию или обновления в реальном времени интегрируйте дополнительные функции бэкенда рассмотрите возможность добавления облачных функций, сторонних api или контроля доступа на основе ролей дальнейшее обучение изучите документацию back4app https //www back4app com/docs для получения дополнительных сведений о настройке производительности и пользовательских интеграциях с этим руководством вы теперь обладаете навыками для создания масштабируемого crud бэкенда для вашего приложения на cycle js с использованием back4app удачного кодирования!