How to Build a Backend for jQuery?

소개 이 튜토리얼에서는 jquery를 위한 백엔드를 구축하는 방법 을 배웁니다 우리는 back4app의 필수 기능인 데이터베이스 관리, 클라우드 코드, rest 및 graphql api, 사용자 인증 및 실시간 쿼리를 통합하여 안전하고 확장 가능한 백엔드를 만들 것입니다 이 백엔드는 ajax 호출 및 기타 일반적인 jquery 메서드를 통해 jquery 기반 프론트엔드와 통신합니다 back4app의 직관적인 환경은 서버나 데이터베이스를 설정하는 데 필요한 시간을 줄여줍니다 몇 가지 간단한 단계를 따르면 acl, 클래스 수준 권한, 데이터 모델링, 파일 업로드 등을 직접 경험할 수 있습니다 이 튜토리얼이 끝나면 back4app 백엔드에 연결된 완전한 기능의 jquery 기반 앱을 위한 탄탄한 기초를 갖추게 될 것입니다 사용자 정의 논리를 추가하고, 외부 api를 통합하며, 세밀한 제어로 데이터를 보호할 준비가 될 것입니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정과 새로운 back4app 프로젝트 back4app 시작하기 https //www back4app com/docs/get started/new parse app 계정이 없으시면 무료로 생성할 수 있습니다 위 가이드를 따라 프로젝트를 준비하세요 기본 jquery 환경 jquery는 공식 웹사이트 https //jquery com/download/ 에서 다운로드할 수 있습니다 node js (버전 14 이상) 설치 (선택 사항) node js는 브라우저에서 jquery에 엄격히 필요하지 않지만, 로컬 테스트 서버를 실행하거나 로컬 테스트를 원할 경우 npm 패키지를 설치하는 데 필요할 수 있습니다 node js 설치하기 https //nodejs org/en/download/ javascript 및 jquery 기본 사항에 대한 이해 jquery 공식 문서 https //api jquery com/ 시작하기 전에 모든 필수 조건이 준비되어 있는지 확인하세요 그래야 jquery 기반의 프론트 엔드를 구축하고 back4app에 연결할 때 원활하게 따라갈 수 있습니다 1단계 – back4app 프로젝트 설정 새 프로젝트 만들기 jquery 백엔드 프로젝트를 시작하려면 새로운 back4app 프로젝트를 만드세요 back4app 계정에 로그인하세요 “새 앱” 버튼을 클릭하세요 back4app 대시보드에서 앱에 이름을 지정하세요 (예 “jquery backend tutorial”) 프로젝트가 생성되면 back4app 대시보드에서 확인할 수 있습니다 이것이 jquery의 백엔드 구성의 기초가 될 것입니다 parse sdk 연결하기 back4app은 데이터 및 실시간 기능을 위해 parse 플랫폼을 사용합니다 jquery와 함께 parse sdk를 직접 사용하려면 html에서 스크립트로 로드할 수 있습니다 parse 키 가져오기 back4app 대시보드에서 앱의 “앱 설정” 또는 “보안 및 키”를 열어 다음을 찾으세요 애플리케이션 id javascript 키 parse 서버 url (보통 https //parseapi back4app com ) parse sdk 포함하기 html 파일에 jquery 환경에서 jquery를 먼저 로드한 다음 parse를 로드하고 스크립트에서 parse 객체와 상호작용할 수 있습니다 이 연결은 모든 데이터 호출이 back4app 백엔드에서 parse 플랫폼을 통해 이루어지도록 보장합니다 2단계 – 데이터베이스 설정 데이터 저장 및 쿼리 parse sdk를 통합한 후, back4app 데이터베이스에서 데이터를 저장하고 가져올 수 있습니다 다음은 jquery와 parse를 사용하여 “todo” 객체를 생성하고 검색하는 간단한 예입니다 curl을 사용하여 rest api를 호출할 수도 있습니다 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을 사용할 수 있습니다 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 스키마 설계 및 데이터 유형 back4app 대시보드에서 “데이터베이스”로 이동하십시오 새 클래스를 생성하십시오 (예 “할 일”) 및 제목(string)과 완료 여부(boolean)와 같은 열을 추가하십시오 객체를 처음 저장할 때 parse가 자동으로 열을 생성하도록 할 수도 있습니다 ai 에이전트 사용하기 back4app에는 데이터 모델링을 위한 ai 에이전트가 있습니다 ai 에이전트를 엽니다 앱의 대시보드나 메뉴에서 데이터 모델을 설명하십시오 (예 “클래스 스키마로 할 일 앱 만들기”) ai 에이전트가 스키마를 생성하도록 하십시오 관계형 데이터 여러 todo 항목에 연결된 category 클래스가 있는 경우, 포인터 또는 관계를 사용할 수 있습니다 실시간 쿼리 jquery 앱에서 실시간 업데이트를 위해 실시간 쿼리 활성화 는 서버 설정 에서 back4app 대시보드에서 실시간 쿼리 구독 초기화 이 구독은 “todo” 객체가 생성, 업데이트 또는 삭제될 때마다 실시간으로 알림을 보냅니다 3단계 – acl 및 clp를 통한 보안 적용 back4app 보안 메커니즘 acl(액세스 제어 목록) 및 clp(클래스 수준 권한) 를 사용하면 객체 또는 클래스 수준에서 데이터를 읽고 쓸 수 있는 사람을 제어할 수 있습니다 액세스 제어 목록(acl) acl은 개별 객체에 설정되어 접근을 제한합니다 클래스 수준 권한 (clps) clps는 전체 클래스에 대한 기본 권한을 제어합니다 back4app 대시보드에서 , 데이터베이스 섹션을 엽니다 클래스를 선택합니다 (예 “todo”) 클래스 수준 권한 탭으로 이동하여 공개, 인증된 또는 역할 기반 액세스를 구성합니다 객체 수준 보안을 위한 acl과 더 넓은 제한을 위한 clps를 결합합니다 자세한 내용은 앱 보안 가이드라인 https //www back4app com/docs/security/parse security 을 참조하세요 4단계 – 클라우드 함수 작성 및 배포 클라우드 코드 는 서버 측에서 사용자 정의 javascript를 실행하여 비즈니스 로직, 데이터 검증 또는 외부 api 호출을 추가할 수 있게 해줍니다 작동 방식 코드를 main js (또는 유사한 파일)에 배치하고, back4app에 배포한 후 parse server가 실행을 처리하도록 합니다 더 복잡한 로직을 위해 npm 모듈을 사용할 수도 있습니다 // main js 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; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); 함수 배포하기 다음 경로를 통해 back4app cli b4a deploy 대시보드를 통해 앱의 대시보드에서 cloud code > functions 로 이동합니다 함수를 main js 에 복사/붙여넣기 합니다 클릭 배포 합니다 함수 호출하기 jquery를 사용하여 cloud function을 다음과 같이 호출할 수 있습니다 5단계 – 사용자 인증 구성 back4app에서의 사용자 인증 back4app은 parse user 클래스를 사용하여 인증을 처리합니다 비밀번호 해싱, 세션 토큰 및 보안 저장소는 자동으로 처리됩니다 사용자 인증 설정 세션 관리 현재 사용자를 가져올 수 있습니다 const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } 로그아웃 parse user logout(); 소셜 로그인 통합 back4app은 google, facebook, apple 및 기타 oauth 제공자를 지원합니다 자세한 내용은 소셜 로그인 문서 https //www back4app com/docs/platform/sign in with apple 를 참조하세요 6단계 – 파일 저장 처리 파일 업로드 및 검색 업로드를 처리하려면 parse file 을 사용하세요 파일을 필드에 할당하여 클래스에 저장할 수 있습니다 const photo = parse object extend('photo'); const photo = new photo(); photo set('imagefile', parsefile); photo save(); 파일 url 검색 const imagefile = photo get('imagefile'); const imageurl = imagefile url(); 파일 보안 parse server에서 파일 업로드 설정을 수정하여 파일을 업로드할 수 있는 사람을 관리할 수 있습니다 { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } 7단계 – 클라우드 작업으로 작업 예약하기 클라우드 작업 오래된 데이터를 삭제하는 것과 같은 정기 작업을 실행할 수 있습니다 // 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); } }); 대시보드에서 앱 설정 > 서버 설정 > 백그라운드 작업 으로 이동하여 예약합니다 8단계 – 웹훅 통합하기 웹훅 은 특정 이벤트가 발생할 때마다 앱이 외부 서비스에 http 요청을 보낼 수 있게 해줍니다 더보기 > 웹훅 에서 back4app 대시보드로 이동합니다 새 웹훅 추가 을 외부 엔드포인트와 함께 설정합니다 트리거 를 “todo 클래스에 새 레코드”와 같은 이벤트에 대해 구성합니다 슬랙이나 stripe와 같은 결제 게이트웨이를 웹훅을 통해 이벤트 데이터를 전송하여 통합할 수 있습니다 9단계 – back4app 관리 패널 탐색하기 back4app 관리 앱 은 crud 작업을 위한 비기술적인 웹 기반 인터페이스를 제공합니다 관리 앱 활성화하기 이동하십시오 앱 대시보드 > 더보기 > 관리자 앱 을 클릭하고 “관리자 앱 활성화”를 클릭하십시오 첫 번째 관리자 사용자 생성 , 이는 자동으로 새로운 역할(b4aadminuser)과 스키마의 클래스를 생성합니다 서브도메인 선택 관리 앱에 접근하기 위해 로그인 새 관리자 자격 증명을 사용하여 활성화되면 이 관리 앱을 통해 코딩 없이 데이터 관리 또는 팀원에게 액세스 권한을 부여할 수 있습니다 결론 이 가이드에서는 back4app을 사용하여 jquery의 백엔드를 구축하는 방법을 배웠습니다 당신은 백엔드 기초로서 새로운 back4app 프로젝트를 생성했습니다 스키마 설계 및 데이터 관계를 포함한 데이터베이스를 설정했습니다 세밀한 보안을 위해 acl 및 clp를 사용했습니다 사용자 정의 서버 측 논리를 위해 클라우드 코드를 배포했습니다 사용자 인증, 파일 저장 및 실시간 업데이트를 구성했습니다 백그라운드 작업을 예약하고 외부 서비스에 대한 웹훅을 통합했습니다 더 간단한 데이터 관리를 위해 back4app 관리 패널을 탐색했습니다 이제 이 기본 jquery + back4app 설정을 전체 프로덕션 솔루션으로 확장할 수 있는 준비가 되었습니다 소셜 로그인이나 더 자세한 보안 규칙과 같은 고급 기능을 계속 통합하세요 확장 가능하고 데이터 기반의 애플리케이션을 구축하는 것을 즐기세요! 다음 단계 프로덕션 준비 완료 고급 역할 기반 권한, 캐싱 전략 및 성능 조정을 추가하세요 타사 api 통합 결제, 메시징 또는 분석을 위해 back4app 문서 탐색 고급 보안, 로그 또는 분석에 대해 더 깊이 파고드세요 실제 앱 만들기 jquery의 단순성과 back4app의 강력한 백엔드 서비스를 결합하여 사용하세요