How to Build a Backend for NativeScript?

소개 이 튜토리얼에서는 nativescript의 백엔드를 구축하는 방법 을 배우게 됩니다 back4app은 모바일 앱을 위한 백엔드 개발을 간소화하는 오픈 소스 플랫폼입니다 우리는 데이터베이스 관리, 클라우드 코드 함수, rest 및 graphql api 엔드포인트, 사용자 인증, 실시간 쿼리(라이브 쿼리)와 같은 필수 back4app 기능을 통합하여 nativescript 앱을 위한 안전하고 확장 가능한 백엔드를 만드는 방법을 살펴볼 것입니다 또한 back4app이 수동 서버 및 데이터베이스 구성에 비해 설정 시간을 얼마나 크게 단축하는지 알게 될 것입니다 우리는 고급 보안 메커니즘, 클라우드 작업을 통한 작업 예약, 그리고 웹훅을 사용하여 타사 서비스와 연결하는 방법을 탐구할 것입니다 이 가이드를 끝내면 nativescript의 크로스 플랫폼 모바일 솔루션을 지원하는 nativescript core를 활용하는 유연한 백엔드를 갖게 됩니다 이 기반을 통해 필요에 따라 자신만의 사용자 정의 논리 또는 외부 api를 통합할 준비가 될 것입니다 이는 프로덕션 준비가 완료된 nativescript 앱을 개발하는 데 중요한 단계가 될 것입니다 전제 조건 back4app 계정 및 새로운 back4app 프로젝트 back4app 시작하기 https //www back4app com/docs/get started/new parse app 계정이 없으신 경우 무료로 생성할 수 있습니다 위 가이드를 따라 프로젝트를 준비하세요 기본 nativescript 개발 환경 nativescript cli 또는 다른 선호하는 워크플로를 사용하여 설정할 수 있습니다 nativescript 시작 가이드 https //docs nativescript org/environment setup node js (버전 14 이상) 설치 npm 패키지를 설치하고 nativescript cli를 실행하려면 node js가 필요합니다 node js 설치하기 https //nodejs org/en/download/ javascript 및 nativescript core에 대한 친숙함 nativescript 공식 문서 https //docs nativescript org/ nativescript가 처음이라면 시작하기 전에 공식 문서나 초보자 튜토리얼을 검토하세요 시작하기 전에 모든 전제 조건이 준비되어 있는지 확인하세요 back4app 프로젝트가 설정되고 로컬 nativescript 환경이 준비되어 있으면 더 쉽게 따라갈 수 있습니다 1단계 – back4app 프로젝트 설정 새 프로젝트 만들기 nativescript 백엔드를 back4app에서 구축하는 첫 번째 단계는 새 프로젝트를 만드는 것입니다 아직 하지 않았다면, 다음 단계를 따르세요 back4app 계정에 로그인하세요 “새 앱” 버튼을 클릭하세요 back4app 대시보드에서 앱에 이름을 지정하세요 (예 “nativescript backend tutorial”) 프로젝트를 만든 후, back4app 대시보드에서 프로젝트가 나열된 것을 볼 수 있습니다 이 프로젝트는 이 튜토리얼에서 다룰 모든 백엔드 구성의 기초가 될 것입니다 parse sdk 연결하기 back4app은 데이터 처리, 실시간 기능, 사용자 인증 등을 위해 parse 플랫폼을 사용합니다 nativescript 앱을 back4app에 연결하려면 parse npm 패키지를 설치하고 back4app 대시보드에서 받은 자격 증명으로 초기화하세요 parse 키 가져오기 back4app 대시보드에서 앱의 “앱 설정” 또는 “보안 및 키” 섹션으로 이동하세요 애플리케이션 id , javascript 키 , 및 parse 서버 url 를 찾으세요 (형식 https //parseapi back4app com ) parse sdk 설치 npm install parse 그 다음, parse 초기화 를 구성 파일이나 주요 진입 파일(예 app js )에서 수행합니다 예를 들어, parseconfig js 라는 파일을 nativescript 기반 프로젝트에 생성할 수 있습니다 src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; nativescript 앱에서 parse에 접근할 필요가 있을 때마다 이 파일을 가져오기만 하면 됩니다 이 단계를 완료함으로써 nativescript 프론트엔드와 back4app 백엔드 간의 안전한 연결이 설정되어 데이터 작업이 간소화되었습니다 2단계 – 데이터베이스 설정 데이터 저장 및 쿼리 back4app 프로젝트가 준비되고 parse sdk가 통합되면 nativescript 앱에서 데이터를 저장하고 쿼리할 수 있습니다 아래는 parse object 클래스를 사용하여 항목 목록을 저장하고 가져오는 예입니다 // example create a task item import parse from ' /parseconfig'; async function createtaskitem(title, iscompleted) { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('iscompleted', iscompleted); try { const savedtask = await task save(); console log('task saved successfully ', savedtask); return savedtask; } catch (error) { console error('error saving task ', error); } } // example query all task items async function fetchtasks() { const task = parse object extend('task'); const query = new parse query(task); try { const results = await query find(); console log('fetched task items ', results); return results; } catch (error) { console error('error fetching tasks ', error); } } 직접 http 호출을 선호하는 경우 back4app의 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 supplies", "iscompleted" false}' \\ https //parseapi back4app com/classes/task 또는 graphql을 사용하세요 mutation { createtask(input { fields { title "clean the house" iscompleted false } }) { task { objectid title iscompleted } } } 이 유연성 덕분에 parse sdk, rest 또는 graphql api 엔드포인트를 통해 nativescript 앱의 백엔드 기능을 편리하게 구축할 수 있습니다 스키마 설계 및 데이터 유형 기본적으로 parse는 자동으로 스키마를 생성할 수 있으며, back4app 대시보드에서 클래스와 데이터 유형을 정의할 수 있습니다 back4app 대시보드의 “데이터베이스” 섹션으로 이동하세요 새 클래스를 생성하세요 (예 “task”) 및 제목(string)과 완료 여부(boolean)와 같은 열을 추가하세요 back4app은 다음과 같은 데이터 유형을 지원합니다 문자열 , 숫자 , 부울 , 객체 , 날짜 , 파일 , 포인터 , 배열 , 관계 , 지리적 포인트 , 및 다각형 객체를 처음 저장할 때 parse가 이러한 열을 생성하도록 하거나 더 많은 제어를 위해 정의할 수 있습니다 back4app의 ai 에이전트 사용하기 는 스키마를 자동 생성하는 데 도움이 될 수 있습니다 ai 에이전트 열기 앱 대시보드에서 원하는 데이터 모델 설명하기 (예 “모바일 앱을 위한 새로운 task 클래스를 생성해 주세요 iscompleted 및 duedate 필드가 포함되어야 합니다 ”) 에이전트가 스키마를 생성하도록 하세요 자동으로 관계형 데이터 관계형 데이터가 필요하다면—여러 category 객체가 여러 task 항목을 가리키는 경우— pointers 또는 relations 를 parse에서 사용하세요 // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const task = new parse object('task'); const categorypointer = new parse object('category'); categorypointer id = categoryobjectid; task set('title', title); task set('category', categorypointer); try { return await task save(); } catch (err) { console error('error creating task with category relationship ', err); } } // including the pointer data in a query const query = new parse query('task'); query include('category'); const taskswithcategory = await query find(); 이 접근 방식은 task 와 관련된 category 에 대한 전체 데이터를 단일 쿼리로 가져오는 데 도움이 됩니다 실시간 쿼리 실시간 업데이트를 위해 live queries 를 활성화하세요 server settings 에서 back4app 대시보드 nativescript 개발자는 특정 클래스의 변경 사항을 구독할 수 있습니다 live query 서버 url을 포함하도록 parse 설정을 업데이트하세요 src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; 그리고 실시간 이벤트에 구독하세요 import parse from ' /parseconfig'; async function subscribetotasks(callback) { const query = new parse query('task'); const subscription = await query subscribe(); subscription on('create', (newtask) => { console log('new task created ', newtask); callback('create', newtask); }); subscription on('update', (updatedtask) => { console log('task updated ', updatedtask); callback('update', updatedtask); }); subscription on('delete', (deletedtask) => { console log('task deleted ', deletedtask); callback('delete', deletedtask); }); return subscription; } 이 구독은 task 가 추가, 수정 또는 삭제될 때마다 ui를 자동으로 업데이트합니다—실시간 협업 nativescript 앱에 완벽합니다 3단계 – acl 및 clp로 보안 적용하기 back4app 보안 메커니즘 back4app은 액세스 제어 목록 (acls) 및 클래스 수준 권한 (clps) 을 통합하여 데이터를 보호합니다 이러한 보안 모델은 클래스 및 객체 수준에서 읽기/쓰기 액세스를 제어할 수 있게 해줍니다 액세스 제어 목록 (acls) acl은 각 객체에 대한 권한을 설정합니다 예를 들어, 소유자에게만 읽기 및 쓰기 권한을 부여하려면 async function createprivatetask(title, owneruser) { const task = parse object extend('task'); const task = new task(); task set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); task setacl(acl); try { return await task save(); } catch (err) { console error('error saving private task ', err); } } 이것은 지정된 사용자만 객체를 수정하거나 읽을 수 있도록 보장합니다 클래스 수준 권한 (clps) clps는 전체 클래스에 대한 기본 권한을 설정합니다 데이터베이스 열기 back4app에서 관련 클래스를 선택합니다 클래스 수준 권한 탭에 접근합니다 필요에 따라 공개, 인증된 사용자 또는 특정 역할에 대한 권한을 조정합니다 acl과 clp를 결합하면 nativescript 앱에 강력한 보안 모델을 제공합니다 자세한 내용은 앱 보안 가이드라인 https //www back4app com/docs/security/parse security 을 참조하세요 4단계 – 클라우드 함수 작성 및 배포 클라우드 코드는 서버 측에서 사용자 정의 javascript 코드를 실행할 수 있게 해주므로, 인프라를 직접 유지 관리할 필요가 없습니다 이는 nativescript 백엔드에 고급 논리 또는 서버 전용 통합을 추가하는 데 이상적입니다 작동 방식 일반적으로 cloud code(자바스크립트 함수, 트리거 및 필요한 npm 모듈)를 main js 파일에 배치합니다 그런 다음 back4app에 배포하면 추가 서버 구성 없이 parse server 환경에서 실행됩니다 예제 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('task', (request) => { const task = request object; if (!task get('title')) { throw new error('task must have a title'); } }); http 요청을 위해 axios 와 같은 npm 패키지를 설치하고 사용할 수 있습니다 이 접근 방식은 결제 게이트웨이에서 외부 api에 이르기까지 다양한 통합을 가능하게 하며, 모두 back4app 앱의 보안 뒤에 있습니다 일반적인 사용 사례 비즈니스 로직 자동 계산, 데이터 변환 또는 상태 업데이트 데이터 검증 저장하기 전에 필수 필드가 있는지 확인합니다 트리거 데이터가 생성, 업데이트 또는 삭제될 때 코드를 실행합니다 통합 결제, 분석 또는 메시징을 위한 외부 서비스와 연결합니다 보안 집행 진행하기 전에 수신 데이터 또는 사용자 역할을 검증합니다 함수 배포 텍스트 길이를 계산하는 간단한 함수입니다 main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); 배포하기 https //www back4app com/docs/local development/parse cli cli 설치하기 curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash windows의 경우, b4a exe https //github com/back4app/parse cli/releases/download/release 3 3 1/b4a exe 파일을 릴리스 페이지 https //github com/back4app/parse cli/releases 에서 다운로드하세요 계정 키 구성하기 b4a configure accountkey 클라우드 코드 배포하기 b4a deploy 대시보드를 통한 배포 대시보드에서 cloud code > functions 로 이동합니다 함수 코드를 main js 에 붙여넣습니다 클릭 배포 함수 호출하기 nativescript 앱에서 parse sdk를 사용하여 import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } rest 또는 graphql을 사용하여 호출할 수도 있습니다 curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength mutation { calculatetextlength(input { text "hello graphql" }) { result } } 이것은 nativescript 기반 모바일 앱에 서버 측 논리를 통합하는 유연한 방법을 제공합니다 5단계 – 사용자 인증 구성하기 back4app에서 사용자 인증 back4app은 parse user 클래스를 사용하여 인증을 처리하며, 여기에는 비밀번호 해싱, 세션 토큰 등이 포함됩니다 이는 사용자 계정을 관리하는 데 관련된 많은 복잡성을 제거합니다 사용자 인증 설정 nativescript 앱에서 새 사용자를 생성할 수 있습니다 import parse from ' /parseconfig'; async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } rest 예시는 다음과 같을 수 있습니다 curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login 세션 관리 로그인 후, parse는 사용자에게 세션 토큰 을 할당합니다 현재 로그인한 사용자를 확인하려면 const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } 로그아웃은 간단합니다 await parse user logout(); 소셜 로그인 통합 parse는 google 또는 facebook 과 같은 oauth 제공자와 통합됩니다 설정은 제공자마다 다르므로 apple 및 기타로 로그인 https //www back4app com/docs/platform/sign in with apple 에서 자세한 내용을 확인하세요 예를 들어, facebook의 경우 const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; 이메일 인증 및 비밀번호 재설정 back4app 대시보드에서 이러한 기능을 활성화하세요 이메일 설정으로 이동 하세요 이메일 인증 및 비밀번호 재설정 을 활성화하세요 이메일 템플릿과 '보낸 사람' 주소를 구성하세요 6단계 – 파일 저장 처리 파일 업로드 및 검색 back4app은 parse file 클래스를 통해 파일 관리를 지원합니다 nativescript에서는 이미지나 문서를 유사하게 업로드할 수 있습니다 import parse from ' /parseconfig'; async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } 저장된 객체에서 파일의 url을 검색할 수 있습니다 const imagefile = photo get('imagefile'); const imageurl = imagefile url(); // use imageurl in your nativescript ui components 파일 보안 parse server를 사용하면 파일 업로드 보안을 구성할 수 있습니다 { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } 이를 통해 보안 설정에 따라 파일 업로드를 제한하거나 허용할 수 있습니다 7단계 – 클라우드 작업으로 작업 예약하기 클라우드 작업 클라우드 작업 은 오래된 기록을 제거하거나 알림을 보내는 것과 같은 일상적인 작업을 자동화하는 데 도움을 줍니다 예를 들어 // main js parse cloud job('cleanupoldtasks', async (request) => { const task = parse object extend('task'); const query = new parse query(task); 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 oldtasks = await query find({ usemasterkey true }); await parse object destroyall(oldtasks, { usemasterkey true }); return `deleted ${oldtasks length} old tasks `; } catch (err) { throw new error('cleanup error ' + err message); } }); 이 작업을 cli 또는 대시보드를 통해 배포하십시오 back4app 대시보드에서 서버 설정 > 백그라운드 작업 , 매일 또는 원하는 간격으로 실행되도록 예약하십시오 8단계 – 웹훅 통합 웹훅 은 앱에서 특정 이벤트가 발생할 때 외부 서비스에 http 요청을 보낼 수 있게 해줍니다—예를 들어 새로운 기록이나 사용자 가입과 같은 경우입니다 이를 통해 slack, 결제 게이트웨이 또는 분석 플랫폼과 통합할 수 있습니다 back4app 대시보드에서 웹훅 구성으로 이동하여 웹훅 추가 를 선택하십시오 당신의 엔드포인트 url을 추가하십시오 (예 https //your service com/webhook ) 특정 클래스나 이벤트에 대한 트리거를 구성하십시오 또한 클라우드 코드에서 웹훅을 정의하거나 beforesave 또는 aftersave 와 같은 트리거에서 외부 api를 직접 호출할 수 있습니다 9단계 – back4app 관리 패널 탐색 “ back4app admin app ”은 데이터 관리를 위한 모델 중심의 사용자 친화적인 인터페이스입니다 이 앱은 팀이나 비기술 사용자가 crud 작업을 수행하고, 맞춤형 대시보드를 생성하며, 코드를 작성하지 않고도 기업 수준의 작업을 관리하는 데 도움을 줍니다 관리 앱 활성화 “ 앱 대시보드 ”를 클릭한 후 더보기 > 관리 앱 을 클릭합니다 관리 앱 활성화 첫 번째 관리자 사용자(사용자 이름/비밀번호)를 생성합니다 이 설정은 “ b4aadminuser b4asetting b4amenuitem , 등)를 스키마에 추가합니다 서브 도메인을 선택한 후 새 관리자 자격 증명으로 로그인합니다 이 포털은 그래픽 인터페이스를 떠나지 않고도 빠른 데이터 조작을 가능하게 합니다 이는 코딩에 익숙하지 않은 팀원들과 협업하기 위한 훌륭한 솔루션입니다 결론 이 가이드를 따르면 nativescript의 백엔드를 구축하는 방법 을 배웠습니다 안전한 백엔드 생성 을 위한 nativescript 앱 클래스, 스키마 및 관계로 구성된 데이터베이스 을 설정했습니다 실시간 쿼리 구현 을 통한 라이브 업데이트 acl 및 clp로 데이터 보호 했습니다 cloud code로 기능 확장 했습니다 사용자 가입, 로그인 및 세션 토큰을 위한 인증 설정 했습니다 parse file을 통한 파일 업로드 및 검색 관리 했습니다 자동화된 주기적 작업을 위한 cloud jobs 예약 했습니다 타사 통합을 위한 webhooks 생성 했습니다 코드 없는 데이터 관리를 위한 back4app 관리 패널 사용 했습니다 이 단계는 nativescript core로 오픈 소스 크로스 플랫폼 모바일 앱을 구축하기 위한 강력한 기반을 형성합니다 고급 기능을 계속 탐색하고, 더 많은 api 엔드포인트를 통합하거나, 앱의 정확한 요구에 맞게 백엔드를 조정하기 위해 자체 사용자 정의 논리를 통합하세요 다음 단계 nativescript 앱을 확장하세요 성능, 캐싱 및 보안 규칙을 최적화하여 역할 기반 권한과 같은 고급 사용자 관리 탐색하기 공식 back4app 문서 확인하기 보안, 로그 및 성능에 대한 심층 가이드 결제 또는 분석 도구와 같은 실제 통합 실험하기 행복한 코딩을 하시고, back4app이 제공하는 간소화된 개발 워크플로를 즐기세요!