How to Create a CRUD Application with Elm?

개요 이 안내서에서는 elm을 사용하여 완전한 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 배웁니다 우리는 데이터를 손쉽게 관리하기 위해 back4app을 백엔드 서비스로 사용할 것입니다 이 가이드는 back4app 프로젝트를 구성하고, 유연한 데이터 스키마를 설계하며, rest api 호출을 사용하여 elm 애플리케이션에 crud 작업을 통합하는 방법을 설명합니다 basic crud app elm "라는 이름의 back4app 프로젝트를 설정합니다 이는 강력한 비관계형 데이터베이스를 제공합니다 데이터 모델을 수동으로 설계하거나 back4app의 지능형 ai 에이전트를 사용할 수 있습니다 다음으로, 데이터 조작을 위한 직관적인 드래그 앤 드롭 인터페이스를 제공하는 back4app 관리 앱으로 백엔드를 관리합니다 마지막으로, 안전한 데이터 작업을 보장하면서 restful api 요청을 통해 elm 앱을 back4app에 연결합니다 이 튜토리얼이 끝나면 핵심 crud 기능과 안전한 사용자 인증을 지원하는 프로덕션 준비 완료 elm 애플리케이션을 갖게 됩니다 필수 통찰 비관계형 백엔드와 함께 elm crud 애플리케이션을 구축하는 방법을 배우세요 확장 가능한 백엔드를 구조화하고 elm 프론트엔드와 연결하는 방법을 이해하세요 원활한 생성, 읽기, 업데이트 및 삭제 작업을 위해 back4app 관리 앱을 사용하세요 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\ 항목 수집 이 수집은 각 항목에 대한 세부 정보를 저장합니다 필드 유형 세부사항 id 객체 id 자동 생성된 고유 식별자 제목 문자열 항목의 이름 설명 문자열 항목에 대한 간략한 설명 생성일 날짜 생성 타임스탬프 업데이트됨 날짜 마지막 업데이트를 표시하는 타임스탬프 2\ 사용자 수집 이 컬렉션은 사용자 인증 및 자격 증명을 처리합니다 필드 유형 세부사항 id 객체 id 자동 생성된 고유 식별자 사용자 이름 문자열 사용자를 위한 고유한 사용자 이름 이메일 문자열 고유한 이메일 주소 비밀번호 해시 문자열 보안을 위한 암호화된 비밀번호 생성일 날짜 계정이 생성된 시간의 타임스탬프 업데이트됨 날짜 마지막 계정 업데이트의 타임스탬프 back4app 대시보드를 통해 이러한 컬렉션과 필드를 수동으로 추가할 수 있습니다 새 클래스 만들기 적절한 유형을 선택하고, 필드 이름을 지정하고, 필드가 필수인지 여부를 지정하여 필드를 추가할 수 있습니다 열 만들기 스키마 구성을 위한 back4app ai 에이전트 사용하기 back4app ai 에이전트는 설명에 기반하여 데이터 스키마 생성을 간소화합니다 이 자동화된 프로세스는 모든 필요한 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에 연결할 시간입니다 elm에서 rest api 호출 사용하기 elm은 전용 parse sdk를 지원하지 않으므로, back4app의 rest 엔드포인트와 상호작용하기 위해 내장된 http 기능을 사용할 것입니다 예제 항목 컬렉션에서 데이터 가져오기 아래는 http 패키지를 사용하여 항목 목록을 검색하는 elm 모듈 예제입니다 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" 예제 새 항목 만들기 새 레코드를 추가하기 위해 elm에서 post 요청을 구현할 수도 있습니다 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단계 – 백엔드 보호하기 액세스 제어 구성 (acls) 객체에 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 } 클래스 수준 권한 설정 (clps) 인증된 사용자만 특정 컬렉션에 접근할 수 있도록 back4app 대시보드에서 clp를 정의하십시오 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은 원활한 배포를 지원합니다 docker를 포함한 다양한 방법으로 elm 애플리케이션을 배포할 수 있습니다 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 back4app의 웹 배포 저장소 연결 github에 elm 프로젝트를 호스팅하세요 배포 설정 구성 back4app 대시보드에서 웹 배포 기능을 선택하고, 저장소(예 basic crud app elm )를 연결한 후 원하는 브랜치를 선택하세요 빌드 명령 설정 빌드 명령(예 elm make src/main elm output=dist/main js )와 아티팩트 위치를 지정하세요 앱 배포 배포 를 클릭하고 앱이 라이브될 때까지 로그를 모니터링하세요 8단계 – 최종 생각과 미래 방향 축하합니다! 당신은 back4app과 통합된 elm 기반 crud 애플리케이션을 구축했습니다 당신은 basic crud app elm 이라는 이름의 프로젝트를 설정하고, 아이템과 사용자에 대한 컬렉션을 설계했으며, back4app 관리 앱을 통해 데이터를 관리했습니다 또한, rest api 호출을 사용하여 elm 애플리케이션을 연결하고 보안 조치를 구현했습니다 미래의 향상 사항 기능 확장 고급 검색 기능, 상세 보기 또는 실시간 업데이트를 통합하세요 백엔드 기능 강화 클라우드 기능, 서드파티 통합 또는 역할 기반 접근을 실험하세요 지식 심화 back4app 문서 https //www back4app com/docs 및 기타 리소스를 방문하여 앱을 개선하세요 행복한 코딩을 하시고 elm과 back4app으로 구축하는 것을 즐기세요!