How to Build a Backend for Ionic?

소개 이 튜토리얼에서는 back4app을 사용하여 ionic 앱의 완전한 백엔드를 구축하는 방법을 배웁니다 데이터베이스 관리, 클라우드 코드 함수, rest 및 graphql api, 사용자 인증, 파일 처리 등을 다룰 것입니다 우리의 목표는 ionic을 위한 백엔드 구축 방법 을 보여주는 것입니다 그것은 안전하고, 확장 가능하며, 유지 관리가 용이합니다 서버 측 설정을 단순화하기 위해 back4app의 직관적인 환경을 사용할 것이며, 수동으로 서버나 데이터베이스를 구성하는 번거로움에서 벗어날 수 있습니다 클라우드 작업으로 작업 예약, 고급 보안 규칙 적용, 다른 서비스와의 웹훅 통합과 같은 필수 도구를 배울 것입니다 마지막에는 이 기본 백엔드를 ionic 앱을 위한 프로덕션 준비 시스템으로 확장할 준비가 될 것입니다 전제 조건 back4app 계정과 새로운 back4app 프로젝트 back4app 시작하기 https //www back4app com/docs/get started/new parse app 계정이 없으시면 무료로 생성하고 위의 가이드를 따라 프로젝트를 설정하세요 기본 ionic 개발 환경 ionic 앱을 생성하고 실행할 수 있도록 ionic cli https //ionicframework com/docs/intro/cli 가 설치되어 있는지 확인하세요 node js (버전 14 이상) 설치 node js 다운로드 https //nodejs org/en/download/ 하여 종속성을 관리하고 프로젝트를 빌드하세요 javascript/typescript 및 ionic 개념에 대한 친숙함 ionic 공식 문서 https //ionicframework com/docs ionic 구조, 구성 요소 및 생명 주기 훅에 대한 좋은 이해가 도움이 될 것입니다 1단계 – back4app에서 새 프로젝트 만들기 및 연결하기 back4app 계정에 로그인하세요 새 앱 만들기 back4app 대시보드의 “새 앱” 버튼을 사용하여 앱 이름 지정하기 (예 “ionic backend tutorial”) 이 back4app 프로젝트는 백엔드의 기초입니다 클라이언트 측 parse sdk를 사용하는 것과 달리, 이 튜토리얼은 ionic 앱에서 rest 및 graphql을 통해 호출하는 방법을 보여줍니다 자격 증명 가져오기 back4app 대시보드에서 앱 설정 또는 보안 및 키 로 이동합니다 다음의 애플리케이션 id , rest api 키 , 및 graphql 엔드포인트 ionic 앱에서 요청을 보내려면 이들이 필요합니다 2단계 – 데이터베이스 설정 잘 구조화된 데이터베이스는 모든 앱의 중추입니다 back4app의 대시보드는 데이터 모델을 설계하고 관계를 처리하는 것을 쉽게 만들어 줍니다 1\ 데이터 모델 만들기 back4app 대시보드의 데이터베이스 섹션으로 이동합니다 새 클래스를 생성합니다(예 “todo”) 및 열 추가(예 title 을 문자열로, iscompleted 을 불리언으로) 2\ ai 에이전트를 사용하여 데이터 모델 만들기 back4app 대시보드에서 ai agent 를 엽니다 원하는 스키마를 설명합니다 예 “제목(string)과 완료 여부(boolean) 필드가 있는 todo 클래스를 생성합니다 ” ai agent가 스키마를 자동으로 생성합니다 3\ rest api를 사용한 데이터 읽기 및 쓰기 ionic 코드에서 http 요청을 실행할 수 있습니다 예를 들어, todo를 생성하려면 다음과 같이 합니다 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 모든 todos를 가져오려면 다음과 같이 합니다 curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo 이 호출을 사용하여 통합할 수 있습니다 fetch , axios , 또는 ionic 앱의 서비스 또는 구성 요소 파일 내의 모든 http 클라이언트 라이브러리 4\ graphql api를 사용한 데이터 읽기 및 쓰기 유사하게, ionic 앱에서 graphql 변형 및 쿼리를 보낼 수 있습니다 예를 들어, create 새로운 todo를 만들기 위해 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 예시 rest 또는 graphql 호출은 ionic 구조의 제공자/서비스 파일에 배치할 수 있으며, 그런 다음 페이지에서 호출할 수 있습니다 5\ 실시간 쿼리 작업하기 (선택 사항) 실시간 쿼리는 앱의 데이터에 대한 실시간 업데이트를 제공하지만, parse sdk 또는 전문 구독 접근 방식이 필요합니다 실시간 데이터가 필요하면 back4app 서버 설정에서 live queries 를 활성화할 수 있습니다 일반적으로 클래스의 변경 사항을 감지하기 위해 websocket 연결을 사용합니다 그러나 표준 http 기반 호출의 경우 rest 또는 graphql 엔드포인트를 주기적으로 쿼리할 수 있습니다 3단계 – acl 및 clp로 보안 적용하기 간략한 개요 acls (액세스 제어 목록) 를 사용하면 개별 객체에 대한 읽기/쓰기 권한을 설정할 수 있습니다 clps (클래스 수준 권한) 는 클래스 수준에서 더 넓은 액세스를 관리할 수 있게 해줍니다 이러한 기능은 개인 데이터를 보호하고 권한이 있는 사용자만 정보를 수정할 수 있도록 보장하는 데 중요합니다 클래스 수준 권한 설정하기 back4app 대시보드에서 데이터베이스 > 클래스 수준 권한 로 이동합니다 클래스 기본값을 구성합니다 (예 인증된 사용자만 새로운 todos를 생성할 수 있습니다) acl 구성하기 레코드를 생성하거나 업데이트할 때, acl 필드를 rest를 통해 전달할 수 있습니다 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 '{ "title" "private task", "acl" { "user object id here" { "read" true, "write" true } } }' \\ https //parseapi back4app com/classes/todo 자세한 정보는 앱 보안 가이드라인 https //www back4app com/docs/security/parse security 을 참조하세요 4단계 – 클라우드 코드 함수 작성 클라우드 코드의 이유 클라우드 코드는 데이터 검증, 트리거 또는 통합과 같은 작업을 위해 서버 측 javascript를 실행할 수 있게 해줍니다 로직을 중앙 집중화하기 위해 사용자 정의 엔드포인트를 생성할 수 있으며, 이는 클라이언트에서 코드를 분리하고 싶을 때 특히 유용합니다 예제 함수 및 트리거 서버 측의 main js 에서 다음과 같이 작성할 수 있습니다 // main js parse cloud define('validatetodo', (request) => { const { title } = request params; if (!title) { throw 'a title is required '; } return `title "${title}" looks good `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); 이를 back4app cli https //www back4app com/docs/local development/parse cli 를 통해 배포하거나 대시보드의 클라우드 코드 섹션에서 배포할 수 있습니다 아이오닉에서 클라우드 코드 호출하기 post 요청을 보낼 수 있습니다 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 '{"title" "check this out"}' \\ https //parseapi back4app com/functions/validatetodo json 응답을 받아서 반환된 데이터나 오류 메시지를 포함합니다 npm 모듈 cloud code 환경에서 axios 와 같은 패키지를 설치하여 서드파티 서비스를 통합할 수 있습니다 main js 에 포함하세요 const axios = require('axios'); parse cloud define('fetchdata', async (request) => { const url = request params url; const response = await axios get(url); return response data; }); 배포하고 다른 cloud code 함수와 동일한 방식으로 호출하세요 5단계 – 인증 구성 사용자 인증 활성화 사용자 가입 및 로그인은 user 클래스에 대한 rest 호출로 수행할 수 있습니다 예를 들어, 가입 하려면 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 '{ "username" "jon", "password" "somepassword", "email" "jon\@example com" }' \\ https //parseapi back4app com/users 로그인 curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ \ data urlencode 'username=jon' \\ \ data urlencode 'password=somepassword' \\ https //parseapi back4app com/login 성공하면 sessiontoken 을(를) 받게 됩니다 안전하게 저장하고 인증된 작업을 위해 향후 요청의 헤더에 포함하세요 소셜 로그인 back4app을 통해 oauth 흐름을 설정하거나 외부 제공자를 사용하여 소셜 로그인을 구성할 수 있습니다 자세한 단계는 소셜 로그인 문서 https //www back4app com/docs/platform/sign in with apple 를 참조하세요 6단계 – 파일 저장 처리 파일 저장 설정 back4app는 안전한 파일 저장을 제공합니다 객체에 파일을 첨부하거나 독립적으로 저장할 수 있습니다 예를 들어 curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary "@path/to/your/image png" \\ https //parseapi back4app com/files/myimage png 응답에는 클래스에 저장할 수 있는 파일 url이 포함됩니다 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 '{ "imagefile" { " type" "file", "name" "myimage png", "url" "response url here" } }' \\ https //parseapi back4app com/classes/photo 보안 고려사항 back4app의 서버 설정 에서 파일 보안 규칙을 활성화하여 인증을 요구하거나 특정 역할에 파일 업로드를 제한할 수 있습니다 7단계 – 이메일 인증 및 비밀번호 재설정 인증이 중요한 이유 이메일 인증은 사용자 이메일의 정당성을 보장합니다 비밀번호 재설정은 잃어버린 자격 증명을 복구하는 안전한 방법을 제공합니다 이는 ionic 앱에서 신뢰와 적절한 사용자 관리를 유지하는 데 도움이 됩니다 back4app 대시보드 구성 이동하여 앱 설정 > 이메일 설정 이메일 인증 을 활성화합니다 인증 및 비밀번호 재설정 이메일 템플릿을 사용자 정의합니다 8단계 – 클라우드 작업으로 작업 예약하기 클라우드 작업의 기능 클라우드 작업을 사용하면 데이터 정리 또는 요약 이메일 전송과 같은 반복 작업을 예약할 수 있습니다 이를 main js 에 작성합니다 parse cloud job('cleanupoldtodos', async (request) => { 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); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); 배포 후 앱 설정 > 서버 설정 > 백그라운드 작업 cleanupoldtodos 를 매일 실행되도록 예약합니다 9단계 – 웹훅 통합 웹훅을 사용하면 back4app 프로젝트에서 특정 이벤트가 발생할 때 외부 서비스로 데이터를 보낼 수 있습니다 ionic 앱이 새 레코드를 생성한 후 stripe 또는 slack에서 작업을 트리거해야 하는 경우, 웹훅을 사용하여 이를 자동화할 수 있습니다 back4app 대시보드에서 더보기 > 웹훅 으로 이동합니다 새 웹훅 추가 및 엔드포인트 설정 (예 https //your service com/webhook endpoint ) “ 이벤트 ” 선택 (예 저장 후 클래스에서) 표준 http 라이브러리를 사용하여 main js 에서 클라우드 코드 트리거로부터 아웃고잉 요청을 시작할 수도 있습니다 10단계 – back4app 관리 패널 탐색 이 back4app admin app 은 비기술적 이해관계자를 위한 더 간단한 인터페이스입니다 주요 parse 대시보드에 들어가지 않고도 클래스에 대한 crud 작업을 쉽게 수행할 수 있는 방법을 제공합니다 관리 앱 활성화 대시보드에서 더보기 > 관리 앱 으로 이동합니다 “관리 앱 활성화”를 클릭하고 관리 사용자를 생성합니다 관리 인터페이스에 접근할 서브도메인을 선택합니다 이 패널은 쿼리를 작성하지 않고 데이터를 관리하는 데 도움을 주며, 그래픽 인터페이스를 선호하는 클라이언트나 팀원에게 이상적입니다 결론 이 가이드를 완료함으로써 ionic의 백엔드 구축 방법 에 대해 안전한 백엔드를 생성했습니다 back4app에서 강력한 데이터 모델과 관계를 사용하여 rest 및 graphql api와 통합했습니다 ionic 앱에서 데이터를 읽고 쓰기 위해 보안을 구현했습니다 acl 및 clp를 사용하여 클라우드 코드를 배포했습니다 사용자 정의 논리 및 트리거를 위해 사용자 인증을 구성했습니다 및 파일 저장소 클라우드 작업을 설정했습니다 작업 예약을 위해 웹훅을 활용했습니다 외부 통합을 위해 관리 패널을 탐색했습니다 데이터 관리를 단순화하기 위해 이 기반을 통해, 당신의 ionic 앱 은 프로덕션 준비가 완료된 플랫폼으로 발전할 수 있습니다 더 많은 논리를 추가하고, 서드파티 api를 연결하거나, 사용 사례에 맞게 보안 규칙을 조정하세요 다음 단계 프로덕션 빌드를 향상시키세요 캐싱, 역할 기반 접근 및 성능 모니터링을 구현하여 고급 기능을 통합하세요 실시간 라이브 쿼리 또는 다중 인증과 같은 back4app의 공식 문서를 참조하세요 분석, 로그 및 성능 조정을 심층적으로 탐색하기 위해 다른 튜토리얼을 탐색하세요 채팅 애플리케이션, iot 통합 또는 back4app의 강력한 백엔드 서비스와 결합된 위치 기반 기능을 보여주는