Building a CRUD Application with Qwik: A Comprehensive Tutorial

обзор в этом руководстве вы научитесь создавать полностью функциональное crud (создание, чтение, обновление, удаление) приложение с использованием qwik мы продемонстрируем основные операции по управлению данными, подключая ваше приложение к back4app сначала вы создадите проект back4app под названием basic crud app qwik для использования в качестве бэкенда для управления данными затем вы настроите масштабируемую базу данных, определив коллекции и поля — вручную или с помощью ai агента back4app это обеспечит оптимизацию вашей модели данных для эффективного выполнения crud задач затем вы воспользуетесь приложением back4app admin app, удобным интерфейсом перетаскивания, чтобы без труда управлять вашими коллекциями этот инструмент упрощает операции с данными, предлагая интуитивно понятный способ создания, обновления и удаления записей наконец, вы интегрируете ваш фронтенд qwik с back4app, используя rest или graphql api, а также реализуете надежные меры безопасности к концу этого учебника ваше готовое к производству приложение будет не только выполнять операции crud, но и поддерживать аутентификацию пользователей и безопасный доступ к данным основные идеи освойте искусство разработки crud приложений, которые эффективно обрабатывают данные с использованием надежного бэкенда изучите методы проектирования адаптивного бэкенда и его интеграции с фронтендом qwik для повышения интерактивности пользователей изучите преимущества интерфейса администратора с функцией перетаскивания (back4app admin app) для упрощения функций crud узнайте о стратегиях развертывания, включая контейнеризацию docker, для быстрого запуска вашего веб приложения предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app с настроенным новым проектом посетите начало работы с back4app https //www back4app com/docs/get started/new parse app для получения помощи среда разработки qwik настройте ваш проект, используя документацию qwik https //qwik builder io/docs/getting started/ убедитесь, что у вас установлена node js (версия 14 или выше) базовое понимание javascript, qwik и rest api обратитесь к документации qwik https //qwik builder io/docs/ если вам нужно освежить знания шаг 1 – инициализация проекта создание нового проекта back4app войдите в свою учетную запись back4app нажмите на “новое приложение” в вашей панели управления введите имя проекта basic crud app qwik и следуйте инструкциям для создания вашего проекта создать новый проект ваш новый проект появится на вашей панели управления, образуя базу данных для вашего приложения шаг 2 – проектирование схемы вашей базы данных создание вашей модели данных для этого crud приложения вы определите несколько коллекций ниже приведены примеры, описывающие необходимые поля и типы, чтобы помочь вам создать эффективную схему базы данных для обработки операций crud 1\ сбор предметов эта коллекция содержит детали для каждого предмета поле тип данных описание ид идентификатор объекта автоматически сгенерированный первичный ключ название строка название предмета описание строка краткие сведения об элементе создано в дата время создания элемента обновлено дата время последнего обновления 2\ сбор пользователей эта коллекция хранит данные пользователя и информацию для аутентификации поле тип данных описание ид идентификатор объекта автоматически сгенерированный первичный ключ имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты пользователя хэш пароля строка зашифрованный пароль для входа создано в дата время создания аккаунта обновлено дата последнее время обновления для учетной записи пользователя вы можете вручную добавить эти коллекции через панель управления back4app, создав новые классы и настроив каждый столбец по мере необходимости создать новый класс легко добавляйте поля, выбирая тип, указывая имя и настраивая значения по умолчанию и ограничения создать колонку использование ai агента back4app для создания схемы ai агент back4app может автоматически генерировать вашу схему на основе описательного запроса эта функция ускоряет настройку проекта и обеспечивает согласованность как управлять ai агентом получите доступ к ai агенту найдите его на своей панели управления back4app или в настройках проекта опишите свою модель данных предоставьте запрос, который описывает коллекции и поля, которые вам нужны просмотрите и реализуйте оцените предложенные схемы и примените их к своему проекту пример запроса 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) этот подход экономит время и гарантирует хорошо структурированную схему, адаптированную для вашего приложения шаг 3 – активация админ приложения и управление crud операциями введение в админ приложение админ приложение back4app предоставляет интерфейс без кода для управления данными на сервере его интуитивно понятная функция перетаскивания позволяет легко выполнять crud операции как включить приложение администратора получите доступ к меню “еще” на вашей панели управления back4app выберите “приложение администратора” и затем нажмите “включить приложение администратора ” настройте свои учетные данные администратора создав администратора, что автоматически установит роли и системные коллекции включить приложение администратора после активации войдите в приложение администратора, чтобы управлять своими данными без усилий панель управления приложения администратора выполнение действий crud через приложение администратора добавить записи используйте кнопку “добавить запись” в любой коллекции (например, товары), чтобы создать новые записи просмотреть/изменить записи нажмите на любую запись, чтобы просмотреть ее детали или внести изменения удалить записи используйте функцию удаления, чтобы устранить устаревшие записи этот инструмент упрощает операции с данными, обеспечивая плавный пользовательский опыт шаг 4 – подключение qwik к back4app теперь, когда ваш бэкенд настроен, пришло время интегрировать ваш фронтенд qwik с back4app опция использование rest или graphql api мы будем использовать вызовы rest api для взаимодействия с back4app пример получение товаров через rest в qwik создайте компонент qwik (например, src/components/itemslist tsx ) который извлекает и отображает элементы // src/components/itemslist tsx import { component$, usetask$ } from '@builder io/qwik'; export const itemslist = component$(() => { const items = \[]; usetask$(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(); items push( data results); } catch (error) { console error('error retrieving items ', error); } }); return ( \<div> \<h2>items\</h2> \<ul> {items map((item any) => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> ); }); export default itemslist; этот компонент использует api fetch для вызова rest эндпоинта back4app, извлекая список элементов для других операций crud (создание, обновление, удаление) интегрируйте аналогичные rest вызовы в ваши компоненты qwik шаг 5 – защита вашего бэкенда реализация списков контроля доступа (acl) улучшите безопасность ваших данных, установив acl на ваши объекты например, чтобы ограничить доступ к конкретному элементу async function createprivateitem(itemdata { title string; description string }, ownerid string) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } catch (error) { console error('error creating private item ', error); } } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы обеспечить соблюдение стандартных политик доступа, гарантируя, что только авторизованные пользователи могут взаимодействовать с конфиденциальными данными шаг 6 – аутентификация пользователей создание учетных записей пользователей back4app использует класс user от parse для управления аутентификацией в вашем приложении qwik реализуйте регистрацию и вход пользователей, как показано ниже пример компонент регистрации в qwik // src/components/auth tsx import { component$, usestore } from '@builder io/qwik'; export const signup = component$(() => { const store = usestore({ username '', password '', email '' }); const handlesignup = async (e event) => { e preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username store username, password store password, email store email }) }); const data = await response json(); alert('user successfully registered!'); } catch (error any) { alert('registration error ' + error message); } }; return ( \<form onsubmit$={handlesignup}> \<input type="text" placeholder="username" value={store username} oninput$={(e) => (store username = (e target as htmlinputelement) value)} /> \<input type="password" placeholder="password" value={store password} oninput$={(e) => (store password = (e target as htmlinputelement) value)} /> \<input type="email" placeholder="email" value={store email} oninput$={(e) => (store email = (e target as htmlinputelement) value)} /> \<button type="submit">register\</button> \</form> ); }); аналогичный подход можно применить к управлению входом и сессиями дополнительные опции, такие как социальная аутентификация, проверка электронной почты и восстановление пароля, могут быть настроены через back4app шаг 7 – развертывание вашего qwik фронтенда через веб развертывание служба веб развертывания back4app позволяет безупречно хостить ваш qwik фронтенд, связывая его с вашим репозиторием github следуйте этим шагам, чтобы развернуть ваш сайт 7 1 создайте вашу производственную сборку откройте папку проекта в терминале запустите команду сборки npm run build это создаст build папку, содержащую оптимизированные статические ресурсы подтвердите сборку убедитесь, что в build папке есть файл index html вместе с соответствующими директориями ресурсов 7 2 организуйте и зафиксируйте ваш код в github ваш репозиторий должен включать полный исходный код вашего qwik фронтенда типичная структура может быть следующей basic crud app qwik frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── root tsx \| ├── entry tsx \| └── components/ \| ├── itemslist tsx \| └── auth tsx \| package json \| readme md пример src/root tsx // src/root tsx import { component$ } from '@builder io/qwik'; import itemslist from ' /components/itemslist'; export default component$(() => { return ( \<div style={{ padding '2rem' }}> \<h1>crud application\</h1> \<itemslist /> \</div> ); }); коммит вашего кода инициализируйте git (если еще не сделано) git init стадируйте ваши файлы git add закоммитьте ваши изменения git commit m "первый коммит кода qwik фронтенда" создайте репозиторий на github например, назовите его basic crud app qwik frontend запушьте ваш код на github git remote add origin https //github com/your username/basic crud app qwik frontend git git push u origin main 7 3 подключение вашего репозитория к веб развертыванию доступ к веб развертыванию войдите в свою панель управления back4app, выберите ваш проект (basic crud app qwik) и перейдите в раздел веб развертывание связь с github следуйте подсказкам на экране, чтобы подключить вашу учетную запись github выберите репозиторий и ветку выберите ваш репозиторий (например, basic crud app qwik frontend ) и соответствующую ветку (например, main ) 7 4 конфигурация развертывания укажите дополнительные настройки команда сборки если папка build не включена, установите команду (например, npm run build ) каталог вывода определите каталог вывода как build переменные окружения вставьте любые необходимые переменные, такие как ключи api 7 5 контейнеризация вашего приложения qwik с помощью docker (по желанию) если вы выберете docker, включите dockerfile аналогичный \# use node for building the app from node 16 alpine as build workdir /app copy package json / run npm install copy run npm run build \# serve the built app with nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] затем выберите опцию docker в настройках веб развертывания 7 6 развертывание вашего приложения нажмите кнопку развернуть после завершения конфигурации нажмите развернуть смотрите сборку back4app заберет ваш код, соберет его и развернет контейнер получите ваш url после развертывания будет предоставлен url, по которому размещено ваше приложение 7 7 проверка вашего развертывания посетите url откройте предоставленную ссылку в вашем браузере проверьте функциональность убедитесь, что все маршруты и ресурсы загружаются правильно отладьте при необходимости используйте инструменты разработчика браузера и логи back4app для устранения проблем шаг 8 – завершение и будущие улучшения отличная работа! вы успешно создали полноценное crud приложение с использованием qwik и back4app вы создали проект basic crud app qwik , разработали подробную схему базы данных для элементов и пользователей, и управляли данными с помощью admin app более того, вы подключили свой фронтенд qwik к бэкенду и применили строгие меры безопасности следующие шаги расширьте свой фронтенд улучшите свое приложение qwik с помощью таких функций, как детальные представления элементов, функции поиска или обновления в реальном времени добавьте больше функциональности рассмотрите возможность интеграции сложной логики бэкенда, сторонних api или контроля доступа на основе ролей изучите дополнительные ресурсы обратитесь к документации back4app https //www back4app com/docs и дополнительным учебным материалам по qwik для углубленного изучения улучшений производительности и пользовательских интеграций следуя этому руководству, вы теперь обладаете знаниями для создания