How to Build a Basic CRUD App with Ractive.js: A Step-by-Step Guide

개요 이 가이드에서는 ractive js를 사용하여 완전한 기능을 갖춘 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 배웁니다 이 튜토리얼은 back4app 프로젝트 설정에서 데이터베이스 스키마 설계, 마지막으로 ractive js 프론트엔드를 백엔드와 통합하는 전체 워크플로우를 다룹니다 이 프로젝트는 basic crud app ractive , 웹 애플리케이션을 위한 강력한 데이터 관리 솔루션으로 사용될 것입니다 back4app 프로젝트를 초기화하고, 컬렉션과 필드를 수동으로 또는 back4app ai 에이전트의 도움을 받아 구성하는 것으로 시작합니다 다음으로, 직관적인 back4app 관리 앱을 사용하여 간단한 데이터 처리를 수행하고, rest api 호출을 통해 ractive js 인터페이스를 back4app과 통합합니다 이 가이드는 또한 고급 접근 제어 방법을 사용하여 백엔드를 보호하는 방법을 설명합니다 마지막에는 필수 작업을 수행할 뿐만 아니라 사용자 인증 및 안전한 데이터 관리를 지원하는 프로덕션 등급의 crud 앱을 갖게 됩니다 필수 사항 신뢰할 수 있는 백엔드로 데이터를 능숙하게 관리하는 crud 애플리케이션을 마스터하세요 확장 가능한 데이터 스키마를 설계하고 이를 ractive js 프론트엔드와 연결하는 방법을 이해하세요 수월한 crud 작업을 위해 드래그 앤 드롭 관리 인터페이스(back4app admin app)를 활용하세요 신속한 웹 앱 출시를 위한 docker 컨테이너화 등 배포 전략을 배우세요 전제 조건 시작하기 전에 다음을 확인하세요 새 프로젝트가 생성된 활성 back4app 계정입니다 back4app 시작하기 https //www back4app com/docs/get started/new parse app 를 참조하세요 ractive js 개발 환경입니다 보일러플레이트 또는 선호하는 구성으로 프로젝트를 설정하고 node js(v14 이상)가 설치되어 있는지 확인하세요 javascript, ractive js 및 rest api에 대한 기본 지식입니다 필요에 따라 ractive js 문서 https //ractive js org/ 를 검토하세요 1단계 – 프로젝트 초기화 새 back4app 프로젝트 시작하기 back4app 계정에 로그인하세요 대시보드에서 “새 앱” 옵션을 선택하세요 프로젝트 이름을 basic crud app ractive 로 지정하고 화면의 지침에 따라 생성하세요 새 프로젝트 만들기 설정 후, 프로젝트가 대시보드에 표시되며 추가 백엔드 구성을 위해 준비됩니다 2단계 – 데이터베이스 스키마 설계 데이터 모델 만들기 이 crud 애플리케이션을 위해, 데이터를 관리하기 위해 여러 컬렉션을 정의할 것입니다 아래는 crud 기능을 최적화하기 위해 제안된 필드와 데이터 유형이 포함된 컬렉션의 예입니다 1\ 수집 항목들 이 수집은 각 항목에 대한 세부 정보를 포함합니다 필드 유형 목적 id 객체 id 자동 생성된 기본 식별자 제목 문자열 항목 제목 설명 문자열 항목에 대한 간략한 요약 생성일 날짜 레코드 생성 타임스탬프 업데이트됨 날짜 마지막 업데이트 타임스탬프 2\ 수집 사용자 이 컬렉션은 사용자 데이터 및 인증을 관리합니다 필드 유형 목적 id 객체 id 자동 생성된 기본 식별자 사용자 이름 문자열 사용자를 위한 고유 식별자 이메일 문자열 사용자의 고유 이메일 주소 비밀번호 해시 문자열 안전한 인증을 위한 해시된 비밀번호 생성일 날짜 계정 생성의 타임스탬프 업데이트됨 날짜 마지막 계정 업데이트의 타임스탬프 back4app 대시보드를 통해 새로운 클래스를 생성하고 필요한 열을 추가하여 이러한 컬렉션을 수동으로 설정할 수 있습니다 새 클래스 만들기 적절한 데이터 유형을 선택하고, 열 이름을 지정하고, 기본값 또는 필수 값을 설정하여 필드를 정의합니다 열 만들기 스키마 자동화를 위한 back4app ai 에이전트 활용하기 back4app ai 에이전트는 귀하의 프롬프트에 따라 스키마를 자동으로 생성할 수 있습니다 이 효율적인 도구는 귀하의 컬렉션과 필드를 신속하게 설정하여 프로젝트 관리를 간소화합니다 ai 에이전트 작동 방법 프로젝트 대시보드에서 ai 에이전트에 접근합니다 원하는 컬렉션과 필드를 설명하는 자세한 프롬프트를 입력합니다 자동 생성된 스키마를 검토하고 프로젝트에 적용합니다 샘플 프롬프트 create these collections for 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 대시보드에서 “더보기” 메뉴로 이동합니다 “관리 앱”을 선택하고 클릭합니다 “관리 앱 활성화 ” 첫 번째 관리 사용자를 설정하고, 역할(예 b4aadminuser ) 및 시스템 컬렉션을 구성합니다 관리 앱 활성화 활성화되면 관리 앱에 로그인하여 컬렉션을 관리합니다 관리 앱 대시보드 관리 앱을 통한 데이터 관리 항목 추가 컬렉션(예 항목)에서 “레코드 추가” 옵션을 사용하여 새 데이터를 입력합니다 레코드 보기/편집 세부 정보를 확인하거나 필드를 업데이트하려면 레코드를 선택합니다 항목 제거 삭제 기능을 사용하여 오래된 레코드를 제거합니다 이 사용자 친화적인 인터페이스는 모든 crud 기능을 간소화합니다 4단계 – ractive js와 back4app 연결하기 이제 백엔드가 준비되었으므로 ractive js 프론트엔드를 back4app에 연결할 시간입니다 ractive js와 함께 rest api 호출 사용하기 ractive js는 전용 parse sdk가 없기 때문에 crud 작업을 수행하기 위해 rest api 호출을 사용합니다 예시 항목 가져오기 back4app items 컬렉션에서 데이터를 검색하고 표시하는 ractive 구성 요소를 만듭니다 items html items list {{#each items}} {{title}} {{description}} edit delete {{/each}} add new item add items js import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); items js 이 api 상호작용을 ractive js 구성 요소에 통합하여 모든 crud 작업을 처리할 수 있습니다 단계 5 – 백엔드 보안 강화 접근 제어 구현 객체에 대한 접근 제어 목록(acl)을 설정하여 보안을 강화하십시오 예를 들어, 항목을 비공개로 만들려면 async function createprivateitem(itemdata, owneruserid) { const data = { title itemdata title, description itemdata description, acl { \[owneruserid] { read true, write true }, " " { read false, write false } } }; try { const response = await fetch(api url, { method "post", headers headers, body json stringify(data) }); const result = await response json(); console log("private item created ", result); } catch (error) { console error("error creating private item ", error); } } 클래스 수준 권한 구성 back4app 대시보드 내에서 각 컬렉션에 대한 클래스 수준 권한(clps)을 조정하여 기본 액세스 정책을 정의합니다 이 단계는 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 보장합니다 6단계 – 사용자 인증 관리 사용자 계정 구성 back4app은 인증을 처리하기 위해 parse의 사용자 클래스를 사용합니다 ractive js 애플리케이션에서 rest api 호출을 통해 사용자 등록 및 로그인을 구현합니다 예 사용자 가입 async function signupuser(username, email, password) { const response = await fetch("https //parseapi back4app com/users", { method "post", headers headers, body json stringify({ username, email, password }) }); const result = await response json(); if (result objectid) { alert("user registered successfully!"); } else { alert("error during sign up " + result error); } } 로그인 및 세션 처리를 위한 유사한 루틴을 구현합니다 비밀번호 복구 및 이메일 확인과 같은 추가 기능은 back4app 대시보드를 통해 설정할 수 있습니다 7단계 – ractive js 프론트엔드 배포 back4app의 웹 배포 기능을 사용하면 github 리포지토리에 연결하여 ractive js 애플리케이션을 호스팅할 수 있습니다 7 1 프로덕션 버전 빌드하기 터미널에서 프로젝트 폴더를 엽니다 빌드 프로세스를 실행합니다(이는 설정에 따라 사용자 정의 명령일 수 있습니다 예 rollup 또는 webpack 사용) 프로덕션 폴더(일반적으로 dist 또는 build )에 정적 파일이 포함되어 있는지 확인합니다 7 2 코드 정리 및 커밋하기 프로젝트 저장소는 명확한 구조를 가져야 합니다 예를 들어 basic crud app ractive/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── main js \| ├── ractiveconfig js \| └── components/ \| ├── items html \| └── auth html \| package json \| readme md 샘플 파일 ractiveconfig js // ractiveconfig js // this file can include global configuration for your ractive app export const api url = "https //parseapi back4app com"; export const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; 코드 커밋하기 git 저장소 초기화 git init 파일 추가하기 git add 변경 사항 커밋하기 git commit m "ractive js 프론트엔드 초기 커밋" github 저장소 생성하기 (예 basic crud app ractive ) 및 코드 푸시하기 git remote add origin https //github com/your username/basic crud app ractive git git push u origin main 7 3 리포지토리를 back4app 웹 배포에 연결하기 back4app 대시보드에 로그인하고, 프로젝트 ( basic crud app ractive )를 선택한 후 웹 배포 옵션을 선택하세요 프롬프트에 따라 github 계정을 연결하세요 리포지토리와 브랜치를 선택하세요 (일반적으로 main ) ractive js 코드가 포함된 7 4 배포 매개변수 설정하기 다음과 같이 구성하세요 빌드 명령어 빌드 명령어를 지정하세요 (예 npm run build ) 출력 디렉토리 프로덕션 폴더로 설정하세요 (예 build 또는 dist ) 환경 변수 필요한 api 키나 구성 변수를 포함하세요 7 5 도커로 컨테이너화하기 (선택 사항) 도커를 통해 배포하려면 프로젝트에 dockerfile 을 포함하세요 \# base build stage using node js 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 entire app and build it copy run npm run build \# production stage using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 애플리케이션 시작하기 back4app에서 배포 버튼을 클릭하세요 back4app이 리포지토리를 가져오고 빌드하는 동안 배포 프로세스를 모니터링하세요 완료되면 back4app이 호스팅된 ractive js 앱의 url을 제공합니다 7 7 배포 확인하기 제공된 url을 브라우저에서 엽니다 모든 경로를 테스트하여 모든 자산(css, js, 이미지)이 올바르게 로드되는지 확인합니다 문제가 발생하면 배포 로그를 참조하고 빌드 설정을 확인하세요 8단계 – 마무리 및 향후 방향 훌륭한 작업입니다! ractive js와 back4app을 사용하여 완전한 crud 애플리케이션을 성공적으로 구축했습니다 " basic crud app ractive "라는 이름의 프로젝트를 설정하고, 항목 및 사용자에 대한 정확한 컬렉션을 정의했으며, 직관적인 관리 앱을 사용하여 백엔드 관리를 수행했습니다 또한, ractive js 프론트엔드를 백엔드와 통합하고 데이터 보안을 강화했습니다 다음 단계 ui 개선하기 상세 보기, 검색 기능 또는 실시간 업데이트와 같은 기능을 추가하세요 백엔드 확장하기 클라우드 기능이나 서드파티 api 서비스와 같은 고급 백엔드 로직을 통합하세요 학습 심화하기 더 많은 고급 구성 및 최적화를 위해 back4app 문서 https //www back4app com/docs 를 탐색하세요 이 튜토리얼을 통해 이제 back4app을 사용하여 ractive js 애플리케이션을 위한 확장 가능한 crud 백엔드를 만들 수 있는 전문 지식을 갖추게 되었습니다 즐거운 코딩 되세요!