How to Build a Backend for Elm?

введение в этом учебном пособии вы узнаете, как создать полный бэкенд для приложения elm с использованием back4app мы пройдем через интеграцию основных функций back4app – таких как управление базами данных, функции cloud code, rest и graphql api, аутентификация пользователей и запросы в реальном времени (live queries) – чтобы создать безопасный, масштабируемый и надежный бэкенд, который бесшовно взаимодействует с вашим фронтендом на elm вы также увидите, как быстрая настройка и интуитивно понятная среда back4app могут значительно сократить время и усилия по сравнению с ручной настройкой серверов и баз данных в процессе вы получите практический опыт работы с ключевыми функциями, включая расширенные функции безопасности, планирование задач с помощью cloud jobs и настройку вебхуков для внешних интеграций к концу этого учебника вы будете хорошо подготовлены, чтобы улучшить эту базовую настройку до готового к производству приложения или легко интегрировать пользовательскую логику и сторонние api по мере необходимости предварительные условия чтобы завершить этот учебник, вам потребуется учетная запись back4app и новый проект back4app начало работы с back4app https //www back4app com/docs/get started/new parse app если у вас нет учетной записи, вы можете создать ее бесплатно следуйте приведенному выше руководству, чтобы подготовить ваш проект базовая среда разработки elm вы можете настроить это, установив elm https //guide elm lang org/install/ убедитесь, что у вас установлена elm (0 19 или выше) на вашем компьютере знание elm официальная документация elm https //guide elm lang org/ если вы новичок в elm, ознакомьтесь с официальной документацией или учебником для начинающих перед началом библиотека http запросов или подход graphql для elm мы будем использовать rest и graphql вызовы из elm, так как нет официального sdk parse для elm убедитесь, что у вас настроены elm/http https //package elm lang org/packages/elm/http/latest/ и, если необходимо, библиотека graphql убедитесь, что у вас есть все эти предварительные условия перед началом наличие вашего проекта back4app и готовой локальной среды elm поможет вам легче следовать за процессом шаг 1 – настройка проекта back4app создать новый проект первый шаг в создании вашего elm бэкенда на back4app — это создание нового проекта если вы еще не создали его, выполните следующие шаги войдите в свою учетную запись back4app нажмите кнопку “новое приложение” в вашей панели управления back4app дайте вашему приложению имя (например, “elm backend tutorial”) после создания проекта вы увидите его в списке на вашей панели управления back4app этот проект станет основой для всех конфигураций бэкенда, обсуждаемых в этом руководстве подключение к back4app из elm back4app использует платформу parse для управления вашими данными, предоставления функций в реальном времени, обработки аутентификации пользователей и многого другого поскольку нет официального sdk parse для elm, мы будем использовать rest или graphql вызовы из нашего elm приложения для связи с бэкендом back4app получите ваши ключи parse в вашей панели управления back4app перейдите в раздел “настройки приложения” или “безопасность и ключи”, чтобы найти ваш id приложения , rest api ключ , и graphql конечную точку вы также найдете url сервера parse (часто https //parseapi back4app com ) из elm вы можете сохранить эти учетные данные в конфигурационном файле или модуле например src/config elm module config exposing (applicationid, restapikey, serverurl, graphqlendpoint) applicationid string applicationid = "your application id" restapikey string restapikey = "your rest api key" serverurl string serverurl = "https //parseapi back4app com" graphqlendpoint string graphqlendpoint = "https //parseapi back4app com/graphql" вы будете использовать эти значения всякий раз, когда будете делать http запросы к back4app из elm завершив этот шаг, вы установили безопасное соединение между вашим фронтендом на elm и бэкендом back4app шаг 2 – настройка базы данных сохранение и запрос данных с вашим проектом back4app настроенным, вы теперь можете начинать сохранять и извлекать данные через rest или graphql из elm для простого примера мы продемонстрируем, как создать и получить todo элемент использование rest из elm мы будем использовать elm/http https //package elm lang org/packages/elm/http/latest/ для выполнения rest запросов вот упрощенный пример, как создать элемент todo src/todoapi elm module todoapi exposing (createtodo, fetchtodos) import config exposing (applicationid, restapikey, serverurl) import http import json decode as decode import json encode as encode \ a simplified representation of a todo type alias todo = { objectid string , title string , iscompleted bool } \ encoder for creating a todo createtodoencoder string > bool > encode value createtodoencoder title iscompleted = encode object \[ ( "title", encode string title ) , ( "iscompleted", encode bool iscompleted ) ] \ decoder for todo tododecoder decode decoder todo tododecoder = decode map3 todo (decode field "objectid" decode string) (decode field "title" decode string) (decode field "iscompleted" decode bool) createtodo string > bool > http request todo createtodo title iscompleted = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "application/json" ] , url = serverurl ++ "/classes/todo" , body = http jsonbody (createtodoencoder title iscompleted) , expect = http expectjson tododecoder , timeout = nothing , tracker = nothing } fetchtodos http request (list todo) fetchtodos = http request { method = "get" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey ] , url = serverurl ++ "/classes/todo" , body = http emptybody , expect = http expectjson (decode field "results" (decode list tododecoder)) , timeout = nothing , tracker = nothing } затем вы можете вызвать createtodo или fetchtodos в вашей функции обновления elm, обработать http ответы и интегрировать данные в модель вашего приложения использование rest напрямую (пример на curl) если вы предпочитаете тестировать или хотите делать быстрые вызовы вне elm, вы можете использовать curl curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo использование graphql back4app также предоставляет интерфейс graphql ниже приведен пример мутации graphql для создания todo mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } в elm вы можете использовать библиотеку graphql или вручную составлять ваши http запросы для отправки этих мутаций и запросов, очень похоже на то, как мы использовали elm/http выше проектирование схемы и типы данных по умолчанию parse позволяет создание схемы на лету , но вы также можете определить свои классы и типы данных в панели управления back4app для большего контроля перейдите в раздел “база данных” на вашей панели управления back4app создайте новый класс (например, “todo”) и добавьте соответствующие столбцы, такие как заголовок (string) и iscompleted (boolean) back4app также поддерживает различные типы данных string , number , boolean , object , date , file , pointer , array , relation , geopoint , и polygon вы можете выбрать подходящий тип для каждого поля или позволить parse автоматически создать эти столбцы, когда вы впервые сохраняете объект из вашего приложения elm, используя подход rest или graphql back4app предлагает ai агента, который может помочь вам разработать вашу модель данных откройте ai агента из вашей панели управления приложением или в меню опишите вашу модель данных простым языком (например, “пожалуйста, создайте новое приложение todo на back4app с полной схемой класса ”) позвольте ai агенту создать схему для вас использование ai агента может сэкономить ваше время при настройке архитектуры данных и обеспечить согласованность в вашем приложении реляционные данные если у вас есть реляционные данные – скажем, объект категория который указывает на несколько задач – вы можете использовать указатели или связи в parse из elm вы можете управлять этими отношениями, включая поля указателя или связи в ваших rest или graphql вызовах например, чтобы добавить указатель через rest { "title" "task with category", "category" { " type" "pointer", "classname" "category", "objectid" "your category object id" } } когда вы выполняете запрос, вы также можете включить данные указателя, используя параметр ?include=category в rest или используя include в запросах graphql живые запросы для обновлений в реальном времени back4app предоставляет живые запросы хотя в данный момент нет нативного пакета elm для живых запросов parse, вы все равно можете включить его в своей панели управления back4app включите живые запросы в настройках вашего приложения server settings используйте конечную точку websocket для живых запросов в специализированном клиенте если вы хотите интегрировать живые запросы с elm, вы можете использовать elm websocket (или другой индивидуальный подход) для подписки на изменения однако это требует более сложной настройки, так как в данный момент не существует официального клиента elm для живых запросов шаг 3 – применение безопасности с помощью acl и clp механизм безопасности back4app back4app серьезно относится к безопасности, предоставляя списки управления доступом (acl) и разрешения на уровне класса (clp) эти функции позволяют ограничить, кто может читать или записывать данные на уровне отдельного объекта или класса, обеспечивая, что только авторизованные пользователи могут изменять ваши данные списки управления доступом (acl) acl применяется к отдельным объектам, чтобы определить, какие пользователи, роли или общественность могут выполнять операции чтения/записи вы можете настроить acl из elm, включив acl свойство в ваш json при создании или обновлении объектов через rest или graphql например, чтобы создать приватную задачу, вы можете установить { "title" "private task", "acl" { "user object id" { "read" true, "write" true } } } это предотвращает чтение или изменение объекта кем либо, кроме этого пользователя разрешения на уровне класса (clp) clps управляют стандартными разрешениями для всего класса, такими как возможность чтения или записи класса публично, или если только определенные роли могут получить к нему доступ перейдите в свою панель управления back4app , выберите свое приложение и откройте раздел база данных выберите класс (например, “todo”) откройте вкладку разрешения на уровне класса настройте свои стандартные параметры, такие как “требуется аутентификация” для чтения или записи, или “нет доступа” для публичного эти разрешения устанавливают базовые параметры, в то время как acl уточняют разрешения для отдельных объектов надежная модель безопасности обычно сочетает как clp (широкие ограничения), так и acl (точные ограничения для каждого объекта) для получения дополнительной информации перейдите к руководству по безопасности приложений шаг 4 – написание и развертывание облачных функций облачный код – это функция среды parse server, которая позволяет вам запускать пользовательский javascript код на стороне сервера – без необходимости управлять серверами или инфраструктурой написав облачный код, вы можете расширить свой бэкенд back4app дополнительной бизнес логикой, валидациями, триггерами и интеграциями, которые работают безопасно и эффективно на сервере parse как это работает когда вы пишете облачный код, вы обычно помещаете свои функции javascript, триггеры и любые необходимые модули npm в файл main js (или app js ) этот файл затем развертывается в вашем проекте back4app, который выполняется в среде parse server весь облачный код для вашего приложения back4app выполняется внутри сервера parse, который управляется back4app, поэтому вам не нужно беспокоиться о техническом обслуживании сервера, масштабировании или предоставлении ресурсов каждый раз, когда вы обновляете и развертываете свой файл main js , работающий сервер parse обновляется с вашим последним кодом // main js // import an npm module (e g , axios) const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); вы можете вызывать эти функции cloud code из elm, сделав rest запрос к https //parseapi back4app com/functions/fetchexternaldata типичные случаи использования бизнес логика агрегация данных, обработка платежей и т д валидация данных обеспечение соответствия определенных полей критериям перед сохранением триггеры запуск кода до или после действий сохранения/обновления/удаления интеграции подключение к внешним api или сервисам обеспечение безопасности проверка ролей или разрешений пользователей перед выполнением критических операций разверните вашу функцию развертывание через back4app cli установите cli (пример для linux/macos) curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash настройте ваш ключ аккаунта b4a configure accountkey разверните ваш облачный код b4a deploy развертывание через панель управления в панели управления вашего приложения перейдите в облачный код > функции скопируйте/вставьте функцию в редактор main js нажмите развернуть вызов вашей функции из elm вы можете вызвать облачную функцию, сделав post запрос import config exposing (applicationid, restapikey, serverurl) import http import json decode as decode import json encode as encode cloudfunction string > encode value > http request decode value cloudfunction functionname body = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "application/json" ] , url = serverurl ++ "/functions/" ++ functionname , body = http jsonbody body , expect = http expectjson decode value , timeout = nothing , tracker = nothing } calculatetextlength string > http request decode value calculatetextlength text = let requestbody = encode object \[ ( "text", encode string text ) ] in cloudfunction "calculatetextlength" requestbody вы также можете вызывать облачные функции через graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } шаг 5 – настройка аутентификации пользователей аутентификация пользователей в back4app back4app использует класс parse user в качестве основы для аутентификации по умолчанию parse обрабатывает хеширование паролей, токены сессий и безопасное хранение вы можете создавать и входить в систему пользователями через rest или graphql из вашего приложения elm настройка аутентификации пользователей регистрация нового пользователя (rest) signupuser string > string > string > http request decode value signupuser username password email = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "application/json" ] , url = serverurl ++ "/users" , body = http jsonbody (encode object \[ ( "username", encode string username ) , ( "password", encode string password ) , ( "email", encode string email ) ] ) , expect = http expectjson decode value , timeout = nothing , tracker = nothing } вход в систему (rest) loginuser string > string > http request decode value loginuser username password = http request { method = "get" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey ] , url = serverurl ++ "/login?username=" ++ username ++ "\&password=" ++ password , body = http emptybody , expect = http expectjson decode value , timeout = nothing , tracker = nothing } интеграция социального входа back4app и parse могут интегрироваться с популярными провайдерами oauth, такими как google , facebook , или apple обычно вы настраиваете этих провайдеров в панели управления back4app, а затем делаете необходимые запросы из elm обратитесь к документации по социальному входу https //www back4app com/docs/platform/sign in with apple для подробных шагов настройки подтверждение электронной почты и сброс пароля перейдите в настройки электронной почты в вашей панели управления back4app включите подтверждение электронной почты для обеспечения проверки новых пользователей на владение их адресами электронной почты настройте адрес отправителя , шаблоны электронной почты и ваш собственный домен, если это необходимо шаг 6 – обработка хранения файлов загрузка и получение файлов parse включает класс parse file для обработки загрузки файлов, которые back4app хранит безопасно поскольку мы используем rest из elm, мы можем выполнить загрузку файла с несколькими частями или прикрепить файл в кодировке base64 загрузка файлов через rest uploadfile string > string > http request decode value uploadfile filename base64content = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "text/plain" ] , url = serverurl ++ "/files/" ++ filename , body = http stringbody "text/plain" base64content , expect = http expectjson decode value , timeout = nothing , tracker = nothing } после загрузки вы получите url файла в ответе вы можете сохранить этот url в поле класса parse или отобразить его в вашем приложении elm по мере необходимости безопасность файлов parse server предоставляет конфигурации для управления безопасностью загрузки файлов например { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } шаг 7 – планирование задач с помощью облачных заданий облачные задания облачные задания в back4app позволяют вам планировать и выполнять рутинные задачи на вашем сервере, такие как очистка старых данных или отправка периодических электронных писем например, задание для удаления задач, старше 30 дней, может выглядеть так // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); разверните ваш облачный код с новым заданием (через cli или панель управления) перейдите в панель управления back4app > настройки приложения > настройки сервера > фоновые задания запланируйте выполнение задания ежедневно или по мере необходимости шаг 8 – интеграция вебхуков вебхуки позволяют вашему приложению back4app отправлять http запросы на внешний сервис, когда происходят определенные события это мощный инструмент для интеграции с системами третьих сторон, такими как платежные шлюзы (например, stripe), инструменты email маркетинга или аналитические платформы перейдите к настройкам вебхуков в вашей панели управления back4app > еще > вебхуки и затем нажмите на добавить вебхук настройте конечную точку (например, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) настройте триггеры для указания, какие события в ваших классах back4app или функциях cloud code будут вызывать вебхук например, если вы хотите уведомлять канал slack каждый раз, когда создается новая задача создайте приложение slack, которое принимает входящие вебхуки скопируйте url вебхука slack в вашей панели управления back4app установите конечную точку на этот url slack для события “новая запись в классе todo ” добавьте пользовательские http заголовки или полезные нагрузки, если это необходимо шаг 9 – изучение панели администратора back4app административное приложение back4app admin app — это веб интерфейс управления, предназначенный для нетехнических пользователей, чтобы выполнять операции crud и обрабатывать рутинные задачи с данными без написания кода он предоставляет ориентированный на модель , дружественный к пользователю интерфейс, который упрощает администрирование баз данных, управление пользовательскими данными и операции на уровне предприятия включение административного приложения включите его, перейдя в app dashboard > more > admin app и нажав кнопку “включить административное приложение” создайте первого администратора (имя пользователя/пароль), что автоматически создаст новую роль (b4aadminuser) и классы (b4asetting, b4amenuitem и b4acustomfield) в схеме вашего приложения выберите поддомен для доступа к административному интерфейсу и завершите настройку войдите с использованием учетных данных администратора, которые вы создали, чтобы получить доступ к новой панели управления административным приложением после активации приложение back4app admin упрощает просмотр, редактирование или удаление записей из вашей базы данных – без необходимости прямого использования панели управления parse или серверного кода с настраиваемыми контролями доступа вы можете безопасно делиться этим интерфейсом с членами команды или клиентами, которым нужен понятный способ управления данными заключение следуя этому подробному руководству, вы создали безопасный бэкенд для приложения elm на back4app настроили базу данных с классами схем, типами данных и отношениями интегрировали возможности запросов в реальном времени (live queries) для немедленных обновлений данных применили меры безопасности с использованием acl и clp для защиты и управления доступом к данным реализовали функции cloud code для выполнения пользовательской бизнес логики на стороне сервера настроили аутентификацию пользователей с поддержкой проверки электронной почты и сброса паролей управляли загрузкой файлов и их извлечением, с дополнительными контролями безопасности файлов запланировали cloud jobs для автоматизированных фоновых задач использовали webhooks для интеграции с внешними сервисами изучили панель администратора back4app для управления данными с надежным фронтендом на elm и мощным бэкендом back4app вы теперь хорошо подготовлены для разработки функциональных, масштабируемых и безопасных приложений продолжайте исследовать более продвинутые функции, интегрируйте свою бизнес логику и используйте возможности back4app, чтобы сэкономить вам бесчисленные часы на администрировании серверов и баз данных удачного кодирования! следующие шаги создайте готовое к производству приложение на elm путем расширения этого бэкенда для обработки более сложных моделей данных, стратегий кэширования и оптимизации производительности интегрируйте продвинутые функции такие как специализированные потоки аутентификации, контроль доступа на основе ролей или внешние api (например, платежные шлюзы) посмотрите официальную документацию back4app для более глубокого изучения вопросов безопасности, настройки производительности и анализа логов изучите другие учебные пособия по приложениям для чата в реальном времени, iot панелям или сервисам на основе местоположения вы можете комбинировать техники, изученные здесь, с api третьих сторон для создания сложных, реальных приложений