Как создать CRUD-приложение с Meteor? A Step-by-Step Guide

обзор в этом руководстве вы научитесь разрабатывать приложение crud (создание, чтение, обновление и удаление) с использованием meteor мы интегрируем ваше приложение meteor с back4app в качестве серверной службы, обеспечивая надежное и масштабируемое управление данными на протяжении всего учебника вы создадите проект под названием basic crud app meteor , определите схему вашей базы данных и настроите ваши коллекции — все это с использованием мощных функций back4app вы также увидите, как использовать админ приложение back4app для эффективного управления данными и как защитить вашу серверную часть с помощью продвинутых мер контроля доступа к концу вы получите готовое к производству приложение meteor, которое поддерживает операции crud вместе с аутентификацией пользователей основные выводы разработайте функции crud, которые эффективно обрабатывают операции с данными с использованием back4app разработайте и реализуйте масштабируемую серверную часть в паре с фронтендом meteor используйте админ приложение back4app с функцией перетаскивания для упрощения операций с данными изучите стратегии развертывания, включая контейнеризацию docker, для вашего приложения meteor предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app с новым проектом для инструкций по настройке ознакомьтесь с начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки meteor установите meteor с официального сайта meteor https //www meteor com/install и убедитесь, что node js (версии 14 или выше) доступен базовые знания javascript, meteor и rest api консультируйтесь с документацией meteor https //docs meteor com/ для получения дополнительной информации, если это необходимо шаг 1 – инициализация проекта настройка вашего проекта back4app войдите в свой аккаунт back4app нажмите на опцию “новое приложение” на вашей панели управления введите имя проекта basic crud app meteor и следуйте инструкциям для создания вашего проекта создать новый проект после создания ваш проект будет отображаться на вашей панели управления back4app, закладывая прочный фундамент для настройки вашего бэкенда шаг 2 – проектирование схемы базы данных создание вашей модели данных для базового crud приложения вам потребуется несколько коллекций ниже приведены примеры, описывающие коллекции и поля, необходимые для эффективного управления операциями с данными 1\ коллекция элементы эта коллекция содержит детали для каждого элемента поле тип детали ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название или заголовок элемента описание строка краткое резюме предмета создано в дата метка времени создания элемента обновлено дата метка времени для самого последнего обновления 2\ коллекция пользователи эта коллекция управляет информацией о пользователях и данными аутентификации поле тип детали ид идентификаторобъекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты хэш пароля строка безопасно захешированный пароль создано в дата время создания аккаунта обновлено дата время последнего обновления аккаунта вручную добавьте эти коллекции в панели управления back4app, создав новый класс для каждой и определив соответствующие поля создать новый класс создайте каждое поле, выбрав его тип, указав имя, добавив значения по умолчанию, если это необходимо, и указав, является ли оно обязательным создать колонку использование ai агента back4app для создания схемы ai агент back4app упрощает генерацию схемы непосредственно из вашей панели управления предоставив описательный запрос, в котором изложены ваши желаемые коллекции и поля, ai агент может автоматически создать схему вашей базы данных как использовать ai агента доступ к 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 – это интуитивно понятный инструмент без кода, который позволяет вам управлять данными на сервере без усилий с помощью операций перетаскивания он упрощает создание, чтение, обновление и удаление записей включение приложения администратора перейдите в меню “дополнительно” на вашей панели управления back4app выберите “приложение администратора” и нажмите на “включить приложение администратора ” настройте учетные данные администратора создайте начального администратора, который также настраивает стандартные роли, такие как b4aadminuser вместе с системными коллекциями включить приложение администратора после активации войдите в приложение администратора, чтобы начать управлять вашими данными панель управления приложением администратора использование приложения администратора для задач crud в приложении администратора вы можете добавить записи нажмите “добавить запись” в любой коллекции (например, товары), чтобы создать новые записи просмотреть/изменить записи выберите запись, чтобы просмотреть или изменить ее детали удалить записи удалите записи, которые больше не нужны этот интерфейс значительно улучшает пользовательский опыт, делая операции с данными простыми шаг 4 – интеграция meteor с back4app теперь, когда ваш бэкенд настроен и управляется через приложение администратора, пришло время подключить ваше приложение meteor к back4app использование rest api в meteor вы можете интегрироваться с back4app, выполняя вызовы rest api пример получение данных через rest ниже приведен пример кода для получения элементов из back4app в методе meteor // /imports/api/items js import { meteor } from 'meteor/meteor'; import { http } from 'meteor/http'; meteor methods({ 'items fetch'() { try { const response = http get('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response data results; } catch (error) { throw new meteor error('fetch failed', 'unable to fetch items '); } } }); интегрируйте аналогичные rest вызовы в ваши компоненты или методы meteor для создания, обновления и удаления записей шаг 5 – защита вашего бэкенда реализация списков контроля доступа (acl) защитите ваши данные, назначив acl для ваших объектов например, чтобы создать элемент, видимый только его владельцу async function createsecureitem(itemdata, owneruser) { const itempayload = { title itemdata title, description itemdata description, 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(itempayload) }); const data = await response json(); return data; } catch (error) { console error('error creating secure item ', error); } } настройка разрешений на уровне класса (clp) в вашей панели управления back4app настройте clp для каждой коллекции, чтобы контролировать правила доступа по умолчанию этот шаг гарантирует, что только авторизованные пользователи могут получить доступ к конфиденциальным данным шаг 6 – управление аутентификацией пользователей настройка учетных записей пользователей meteor back4app использует класс пользователей parse для аутентификации, но в meteor вы можете обрабатывать регистрацию и вход пользователей, используя стандартные rest вызовы пример регистрация пользователя через rest // /imports/api/auth js import { http } from 'meteor/http'; export const signupuser = async (username, password, email) => { try { const response = await http post('https //parseapi back4app com/users', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data { username, password, email } }); return response data; } catch (error) { throw new meteor error('signup failed', error message); } }; реализуйте аналогичные методы для входа пользователя и управления сессиями дополнительные функции, такие как проверка электронной почты и сброс пароля, могут управляться через панель управления back4app шаг 7 – развертывание вашего фронтенда meteor функция веб развертывания back4app упрощает хостинг вашего приложения meteor, связывая его с репозиторием github следуйте этим шагам, чтобы развернуть ваше приложение meteor 7 1 создайте вашу производственную сборку откройте терминал в каталоге вашего проекта соберите ваше приложение meteor meteor build /output directory эта команда создает каталог сборки, содержащий оптимизированные статические ресурсы подтвердите сборку убедитесь, что выходные данные сборки включают index html и необходимые каталоги ресурсов 7 2 организуйте и загрузите ваш код ваш репозиторий github должен содержать полный исходный код вашего приложения meteor типичная структура может быть следующей basic crud app meteor/ ├── meteor/ ├── client/ │ └── main html ├── server/ │ └── main js ├── imports/ │ ├── api/ │ │ ├── items js │ │ └── auth js │ └── startup/ │ └── index js ├── package json └── readme md пример файла /imports/api/items js // /imports/api/items js import { meteor } from 'meteor/meteor'; import { http } from 'meteor/http'; meteor methods({ 'items fetch'() { try { const response = http get('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response data results; } catch (error) { throw new meteor error('fetch failed', 'unable to retrieve items '); } } }); закоммитьте ваш код в github инициализируйте git в папке вашего проекта (если не сделано) git init добавьте все исходные файлы git add закоммитьте ваши изменения git commit m "первый коммит meteor crud приложения" создайте репозиторий на github (например, basic crud app meteor ) запушьте ваш код git remote add origin https //github com/your username/basic crud app meteor git git push u origin main 7 3 подключение github к веб развертыванию back4app доступ к веб развертыванию войдите в back4app, перейдите к вашему проекту basic crud app meteor и нажмите на опцию веб развертывание свяжите вашу учетную запись github следуйте инструкциям на экране, чтобы интегрировать вашу учетную запись github выберите репозиторий и ветку выберите ваш репозиторий (например, basic crud app meteor ) и ветку, содержащую ваш код (например, main ) 7 4 конфигурация развертывания настройте следующие параметры команда сборки если в вашем репозитории отсутствует папка с предварительно собранными файлами, укажите команду сборки (например, meteor build /output directory ) каталог вывода укажите каталог (например, папку вывода), который содержит ваши статические ресурсы переменные окружения добавьте любые необходимые ключи api или конфигурации 7 5 докеризация вашего приложения meteor (по желанию) если docker является вашим предпочтительным методом развертывания, включите dockerfile как ниже \# use the official node image as a base 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 app source code copy \# build the meteor app run meteor build /output directory \# serve with nginx from nginx\ stable alpine copy from=build /app/output/bundle/programs/web browser /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] выберите опцию развертывания docker в back4app, если вы выбрали контейнеризацию 7 6 завершение развертывания разверните приложение нажмите кнопку развернуть после завершения всех конфигураций мониторинг сборки back4app получит ваш код, выполнит команду сборки и развернет ваше приложение доступ к вашему url после развертывания back4app предоставит url, по которому ваше приложение meteor будет доступно 7 7 проверка развертывания посетите url откройте предоставленный url в вашем браузере проверьте функциональность убедитесь, что все маршруты, стили и скрипты работают правильно отладка по мере необходимости используйте инструменты разработчика браузера и логи back4app для решения любых проблем шаг 8 – заключительные мысли и будущие улучшения поздравляем! вы успешно создали полное crud приложение с использованием meteor и интегрировали его с back4app вы настроили проект под названием basic crud app meteor , разработали надежную схему базы данных для элементов и пользователей, а также управляли данными через админ приложение кроме того, вы интегрировали свой фронтенд на meteor с back4app, используя rest api, и применили меры безопасности для защиты данных следующие шаги расширьте свой фронтенд добавьте функции, такие как детализированные представления, функциональность поиска и обновления в реальном времени реализуйте сложную логику на бэкенде рассмотрите возможность использования методов meteor для более сложных операций или интеграции дополнительных сторонних api консультируйтесь с дополнительными ресурсами изучите документацию back4app https //www back4app com/docs и руководства meteor https //docs meteor com/ для более глубокого понимания производительности и настройки счастливого кодирования и наслаждайтесь разработкой с meteor и back4app!