How to Create a CRUD Application with Elm?

обзор в этом руководстве вы научитесь создавать полное crud (создание, чтение, обновление, удаление) приложение с использованием elm мы будем использовать back4app в качестве нашего серверного сервиса для легкого управления данными этот гид объясняет, как настроить проект back4app, разработать гибкую схему данных и интегрировать операции crud в приложение elm с использованием вызовов rest api сначала вы создадите проект back4app, здесь названный basic crud app elm , который предоставляет надежную, нереляционную базу данных вы разработаете свою модель данных — либо вручную, либо с помощью интеллектуального ai агента back4app затем вы будете управлять своим сервером с помощью приложения back4app admin app, которое предлагает интуитивно понятный интерфейс перетаскивания для манипуляции данными наконец, вы подключите свое приложение elm к back4app, делая restful api запросы, обеспечивая при этом безопасные операции с данными к концу этого учебника у вас будет готовое к производству приложение elm, которое поддерживает основные функции crud и безопасную аутентификацию пользователей основные идеи узнайте, как создать приложение elm crud в паре с нереляционной базой данных поймите, как структурировать масштабируемую серверную часть и соединить её с фронтендом на elm используйте приложение back4app admin для бесшовных операций создания, чтения, обновления и удаления изучите варианты развертывания, включая docker, чтобы легко запустить ваше приложение elm предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app с настроенным проектом нужна помощь? посетите начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки elm установите elm и используйте ваш любимый редактор знание основ elm, функционального программирования и http запросов проверьте руководство по elm https //guide elm lang org/ при необходимости шаг 1 – инициализация вашего проекта создание нового проекта back4app войдите в свою учетную запись back4app нажмите на кнопку “новое приложение” на вашей панели управления назовите ваш проект basic crud app elm и следуйте инструкциям для завершения настройки создать новый проект как только ваш проект будет готов, он появится на вашей панели управления, подготавливая почву для конфигурации вашего бэкенда шаг 2 – создание схемы данных настройка ваших структур данных для этого crud приложения вы создадите несколько коллекций (или классов) в back4app ниже приведены примеры основных коллекций и их полей для поддержки операций 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 \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) этот умный подход экономит время и обеспечивает надежную, последовательную схему данных шаг 3 – активация интерфейса администратора и работа с crud операциями введение в интерфейс администратора приложение администратора back4app предоставляет вам интерфейс без кода для управления вашими данными на сервере его удобный дизайн позволяет выполнять действия crud, такие как добавление, просмотр, редактирование и удаление записей включение приложения администратора перейдите в меню “дополнительно” на вашей панели управления back4app выберите “приложение администратора” и нажмите “включить приложение администратора ” создайте свою учетную запись администратора, которая также настроит роли, такие как b4aadminuser и системные коллекции включить приложение администратора после активации войдите в приложение администратора, чтобы управлять вашими данными панель управления приложением администратора выполнение действий crud в приложении администратора в приложении администратора вы можете вставить записи выберите «добавить запись» в коллекции (например, элементы), чтобы создать новые записи просмотр/редактирование записей нажмите на любую запись, чтобы просмотреть детали или изменить данные удалить записи удалите записи, которые больше не нужны этот простой в использовании интерфейс упрощает управление данными шаг 4 – подключение вашего приложения elm к back4app с настроенным бэкендом пришло время связать ваше приложение elm с back4app использование rest api вызовов в elm поскольку elm не поддерживает специализированный parse sdk, мы будем использовать его встроенные http возможности для взаимодействия с rest конечными точками back4app пример получение данных из коллекции элементов ниже приведен пример модуля elm, использующего пакет http для получения списка элементов module items exposing (item, fetchitems, itemdecoder) import http import json decode as decode exposing (decoder) type alias item = { id string , title string , description string } itemdecoder decoder item itemdecoder = decode map3 item (decode field "objectid" decode string) (decode field "title" decode string) (decode field "description" decode string) fetchitems cmd msg fetchitems = http get { url = "https //parseapi back4app com/classes/items" , expect = http expectjson handleresponse (decode field "results" (decode list itemdecoder)) } handleresponse result http error (list item) > msg handleresponse result = \ map the http result to your application's message type debug todo "handle the response appropriately" пример создание нового элемента вы также можете реализовать post запросы в elm для добавления новых записей createitem string > string > cmd msg createitem title description = let body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } handlepostresponse result http error decode value > msg handlepostresponse result = debug todo "process the post response" createitem string > string > cmd msg createitem title description = let body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } handlepostresponse result http error decode value > msg handlepostresponse result = debug todo "process the post response" createitem string > string > cmd msg createitem title description = let body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } handlepostresponse result http error decode value > msg handlepostresponse result = debug todo "process the post response" повторите аналогичные шаблоны для операций обновления и удаления с использованием методов put и delete шаг 5 – защита вашего бэкенда настройка контроля доступа (acl) защитите свои данные, настроив acl на ваших объектах например, чтобы ограничить доступ к элементу только его создателю, вы можете использовать \ in elm, you can add acl details to your json payload createprivateitem string > string > string > cmd msg createprivateitem title description ownerid = let acl = encode object \[ ( ownerid, encode object \[ ("read", encode bool true), ("write", encode bool true) ] ) , ( " ", encode object \[ ("read", encode bool false), ("write", encode bool false) ] ) ] body = http jsonbody <| encode object \[ ( "title", encode string title ) , ( "description", encode string description ) , ( "acl", acl ) ] in http post { url = "https //parseapi back4app com/classes/items" , body = body , expect = http expectjson handlepostresponse decode value } настройка разрешений на уровне класса (clp) определите clp в панели управления back4app, чтобы только аутентифицированные пользователи могли получить доступ к определенным коллекциям шаг 6 – реализация аутентификации пользователей управление учетными записями пользователей back4app использует встроенную коллекцию пользователей для обработки аутентификации в вашем приложении elm вы будете управлять регистрацией и входом через вызовы rest api пример запрос на регистрацию пользователя signupuser string > string > string > cmd msg signupuser username password email = let body = http jsonbody <| encode object \[ ( "username", encode string username ) , ( "password", encode string password ) , ( "email", encode string email ) ] in http post { url = "https //parseapi back4app com/users" , body = body , expect = http expectjson handleauthresponse decode value } handleauthresponse result http error decode value > msg handleauthresponse result = debug todo "process the authentication response" следуйте аналогичному подходу для входа в систему и управления сессиями шаг 7 – развертывание вашего приложения на elm back4app поддерживает бесшовное развертывание вы можете развернуть ваше приложение на elm, используя различные методы, включая docker 7 1 сборка вашего приложения на elm скомпилируйте ваш код на elm запустите компилятор elm для генерации javascript elm make src/main elm output=dist/main js подготовьте ваши ресурсы убедитесь, что ваши сгенерированные файлы javascript и html готовы к развертыванию 7 2 организация структуры вашего проекта типичная структура проекта на elm может выглядеть так basic crud app elm/ \| src/ \| | main elm \| | api elm \| dist/ \| | index html \| | main js \| elm json \| package json \| dockerfile 7 3 докеризация вашего приложения на elm если вы используете контейнеризацию, добавьте dockerfile \# use a lightweight node image for serving static files from node 16 alpine \# set the working directory workdir /app \# copy compiled files copy dist/ /app/dist/ \# expose the desired port expose 8080 \# serve the static files using a simple server cmd \["npx", "http server", "dist", " p", "8080"] 7 4 развертывание с помощью web deployment от back4app свяжите ваш репозиторий разместите ваш проект elm на github настройте параметры развертывания в панели управления back4app выберите функцию web deployment , подключите ваш репозиторий (например, basic crud app elm ), и выберите желаемую ветку установите команды сборки укажите команду сборки (например, elm make src/main elm output=dist/main js ) и местоположение артефакта разверните ваше приложение нажмите deploy и следите за логами, пока ваше приложение не станет доступным шаг 8 – заключительные мысли и будущие направления поздравляем! вы создали приложение crud на основе elm, интегрированное с back4app вы настроили проект под названием basic crud app elm , разработали коллекции для элементов и пользователей, и управляли данными через приложение администратора back4app кроме того, вы подключили ваше приложение elm, используя вызовы rest api, и реализовали меры безопасности будущие улучшения расширить функции интегрировать расширенные возможности поиска, детализированные представления или обновления в реальном времени улучшить функции бэкенда экспериментировать с облачными функциями, интеграциями сторонних разработчиков или доступом на основе ролей углубить свои знания посетите документацию back4app https //www back4app com/docs и другие ресурсы, чтобы улучшить ваше приложение счастливого кодирования и наслаждайтесь разработкой с elm и back4app!