Quickstarters
Feature Overview
Xamarin을 위한 백엔드 구축 방법?
29 분
소개 이 튜토리얼에서는 back4app의 강력한 기능을 사용하여 xamarin 모바일 앱의 백엔드를 구축하는 방법을 배웁니다 우리는 전용 sdk를 사용하는 대신 back4app rest api , graphql , 및 기타 웹 api 옵션에 의존할 것입니다 이 접근 방식은 모바일 클라이언트 를 가볍고 유연하게 유지하여 간단한 http 호출을 통해 데이터에 연결할 수 있게 합니다 데이터베이스 모델 생성, 보안 적용, 인증 처리 및 파일 작업 수행에 대해 다룰 것입니다 이 단계를 따르면 xamarin의 백엔드를 빠르고 안전하게 구축하는 방법을 알 수 있습니다 또한 자동화된 작업 예약 및 webhooks 통합을 탐색하여 xamarin 앱의 기능을 확장할 수 있으므로 서버 구성에 신경 쓰지 않고 ui 코딩에 집중할 수 있습니다 이 가이드를 완료하면 mobile apps 를 위한 재사용 가능한 템플릿을 갖게 됩니다 또한 access control lists (acls)을 적용하고, cloud code 를 작성하는 방법(필요한 경우)과 live queries 또는 cloud jobs 와 같은 고급 워크플로를 최종 솔루션에 통합하는 방법을 이해하게 될 것입니다 전제 조건 이 튜토리얼을 최대한 활용하려면 다음을 준비하세요 back4app 계정 여기에서 무료로 가입하세요 https //www back4app com/ 새로운 back4app 프로젝트 back4app 시작하기 https //www back4app com/docs/get started/new parse app xamarin 개발 환경 (visual studio 또는 visual studio for mac) xamarin 설치 문서 https //docs microsoft com/en us/xamarin/get started/installation/ c# 및 xamarin에 대한 기본 지식 (c#의 public class 에서 웹 api 요청을 만드는 방법 포함) 이러한 전제 조건이 준비되면, xamarin 프로젝트를 back4app에 연결하고 따라 할 준비가 됩니다 1단계 – back4app에서 새 프로젝트 만들기 및 연결하기 back4app 프로젝트 만들기 back4app 대시보드에서 이것이 백엔드의 기초입니다 프로젝트 이름 지정하기 (예 “xamarin backend tutorial”) 앱 키 찾기 앱의 “보안 및 키” 섹션으로 이동하여 rest, graphql 또는 모바일 클라이언트에서 요청할 때 사용할 수 있는 다른 키를 볼 수 있습니다 xamarin 프로젝트 구성하기 http 요청을 만들기 위해 parse sdk 대신 httpclient , 또는 선호하는 네트워크 라이브러리를 사용하여 back4app 앱의 rest 또는 graphql 엔드포인트를 호출합니다 예를 들어, 애플리케이션 id 와 rest api 키 를 안전한 장소나 상수 파일에 저장할 수 있습니다 public class back4appconstants { public const string appid = "your application id"; public const string restapikey = "your rest api key"; public const string serverurl = "https //parseapi back4app com"; } 웹 api를 호출할 때는 항상 요청 헤더에 이러한 자격 증명을 포함해야 합니다 이렇게 하면 요청이 필요한 권한으로 올바른 앱으로 라우팅됩니다 2단계 – 데이터베이스 설정하기 1\ 데이터 모델 만들기 back4app 대시보드를 사용하여 클래스를 정의하거나 첫 요청 시 동적으로 생성되도록 할 수 있습니다 예를 들어, todo 클래스를 원하시면 database 섹션에서 만들거나 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 2\ ai 에이전트를 사용한 데이터 모델 만들기 back4app는 완전한 클래스 구조를 생성할 수 있는 ai 에이전트 를 제공합니다 ai 에이전트 를 back4app 프로젝트에서 엽니다 모델을 설명합니다 (예 “제목과 iscompleted 필드가 있는 ‘todo’라는 새 클래스를 만들어 주세요 ”) 스키마를 자동으로 생성하도록 확인합니다 3\ 데이터 읽기 및 쓰기 (rest) 당신의 xamarin 프로젝트 내에서, public class (예 restclient )를 작성하여 back4app에 대한 모든 요청을 처리할 수 있습니다 using system net http; using system text; using newtonsoft json; public class restclient { private readonly httpclient client; public restclient() { client = new httpclient(); client defaultrequestheaders add("x parse application id", back4appconstants appid); client defaultrequestheaders add("x parse rest api key", back4appconstants restapikey); } public async task createtodoasync(string title, bool iscompleted) { var newtodo = new { title = title, iscompleted = iscompleted }; var content = new stringcontent(jsonconvert serializeobject(newtodo), encoding utf8, "application/json"); var response = await client postasync($"{back4appconstants serverurl}/classes/todo", content); // handle the response } public async task\<list\<todo>> gettodosasync() { var response = await client getasync($"{back4appconstants serverurl}/classes/todo"); var jsonstring = await response content readasstringasync(); // parse json into a c# model (todo) // return the result // return new list\<todo>(); // placeholder } } public class todo { public string objectid { get; set; } public string title { get; set; } public bool iscompleted { get; set; } } 4\ 데이터 읽기 및 쓰기 (graphql) graphql 쿼리의 경우, back4app graphql 엔드포인트에 요청을 보낼 수 있습니다 curl x post \\ h "content type application/json" \\ h "x parse application id your application id" \\ h "x parse master key your master key" \\ \ data '{"query" "mutation { createtodo(input {fields {title \\"wash the car\\" iscompleted\ false}}){ todo{ objectid title }}}"}' \\ https //parseapi back4app com/graphql 유사하게, xamarin에서 graphql 문자열과 함께 json 본문을 post할 수 있습니다 https //parseapi back4app com/graphql 5\ 실시간 쿼리 작업하기 (선택 사항) parse sdk 대신 웹 api 호출을 사용하고 있지만, 실시간 데이터 업데이트를 원한다면 여전히 실시간 쿼리를 활성화할 수 있습니다 클래스 변경 사항에 구독하기 위해 전문화된 연결(websockets)을 사용해야 합니다 앱의 서버 설정 에서 실시간 쿼리를 활성화한 다음, 가능하다면 xamarin에서 호환되는 클라이언트 라이브러리를 사용하세요 또는, 실시간 지원이 앱에 선택 사항인 경우 자체 websocket 솔루션을 구축하거나 폴링에 의존할 수 있습니다 3단계 – acl 및 clp로 보안 적용하기 1\ acl 및 clp 개요 back4app 보안에는 클래스 수준 권한 (clps) 및 액세스 제어 목록 (acls) clps는 어떤 사용자 또는 역할이 전체 클래스에 대해 읽기/쓰기를 할 수 있는지를 정의합니다 acls는 객체별 보안을 추가합니다 이를 결합하여 권한이 있는 사용자만 데이터에 접근할 수 있도록 합니다 2\ 클래스 수준 권한 설정하기 데이터베이스 섹션을 back4app에서 엽니다 클래스를 선택합니다 (예 todo) 클래스 수준 권한으로 이동합니다 읽기/쓰기 규칙을 설정합니다 인증된 사용자만 읽거나 쓸 수 있도록 허용할 수 있습니다 이는 모바일 클라이언트가 데이터를 읽기 전에 로그인해야 함을 보장합니다 4단계 – 클라우드 코드 함수 작성하기 1\ 클라우드 코드의 필요성 클라우드 코드는 사용자 정의 서버 측 로직을 실행할 수 있게 해줍니다 비즈니스 규칙, 유효성 검사 또는 데이터가 변경될 때 실행되는 트리거를 생성할 수 있습니다 이는 로직이 모바일 클라이언트 외부에서 실행되므로 변조 위험을 줄입니다 2\ 예제 함수 및 트리거 아래는 main js 파일의 클라우드 함수의 간단한 샘플입니다 parse cloud define('helloxamarin', async (request) => { return 'hello from xamarin cloud code!'; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'title is required'; } }); 3\ 배포 배포하려면 back4app cli 또는 대시보드의 클라우드 코드 섹션을 사용할 수 있습니다 배포가 완료되면 xamarin을 통해 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 '{}' \\ https //parseapi back4app com/functions/helloxamarin 4\ npm 모듈 추가 라이브러리가 필요하면 npm 을 사용하여 cloud code 프로젝트 폴더에 설치하세요 그 후, require 를 사용하여 main js 이 방법은 서버 측에서 서드파티 api를 호출하는 데 유용합니다 5단계 – 인증 구성 1\ 사용자 인증 활성화 back4app에서 user 클래스는 사용자 자격 증명을 관리합니다 앱 설정 ,에서 사용자 인증, 이메일 확인 및 비밀번호 재설정 설정을 활성화할 수 있습니다 2\ 사용자 가입 / 로그인 (rest) xamarin 프로젝트에서 가입 및 로그인을 처리하는 c# 메서드를 작성할 수 있습니다 public async task signupuserasync(string username, string password, string email) { var user = new { username = username, password = password, email = email }; var content = new stringcontent(jsonconvert serializeobject(user), encoding utf8, "application/json"); var response = await client postasync($"{back4appconstants serverurl}/users", content); // parse response } public async task loginuserasync(string username, string password) { var loginendpoint = $"{back4appconstants serverurl}/login?username={username}\&password={password}"; var response = await client getasync(loginendpoint); // parse response } 그런 다음 클라이언트 측에서 세션 토큰을 저장하여 향후 요청에 사용할 수 있습니다 3\ 소셜 로그인 소셜 로그인을 통합하려면 (예 google, facebook), back4app 소셜 로그인 문서 https //www back4app com/docs/platform/sign in with apple 각 제공자는 고유한 oauth 흐름을 가지고 있으며, 이를 모바일 클라이언트 ,에서 처리할 수 있습니다 그런 다음 반환된 토큰을 back4app에 전달하세요 6단계 – 파일 저장 처리 1\ 파일 저장 설정 파일은 본문에 파일 데이터를 포함한 post 요청을 보내어 업로드할 수 있습니다 예를 들어, xamarin 앱에서 이미지를 저장하려면 이미지를 바이트 배열로 읽은 다음 전송합니다 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 "@local image png" \\ https //parseapi back4app com/files/myimage png 2\ c#를 사용한 예제 업로드 public async task\<string> uploadfileasync(byte\[] filedata, string filename) { var filecontent = new bytearraycontent(filedata); filecontent headers contenttype = new system net http headers mediatypeheadervalue("image/png"); var response = await client postasync($"{back4appconstants serverurl}/files/{filename}", filecontent); var jsonresponse = await response content readasstringasync(); // parse the response to get file url return "file url from response"; } 3\ 보안 고려사항 파일 업로드를 안전하게 하려면 back4app 서버 설정 으로 가서 파일 권한 을 조정하십시오 예를 들어, 인증된 사용자만 업로드를 허용할 수 있습니다 7단계 – 이메일 인증 및 비밀번호 재설정 1\ 개요 이메일 인증은 사용자가 등록한 이메일을 소유하고 있음을 보장합니다 비밀번호 재설정 링크는 사용자가 비밀번호를 잊어버린 경우 다시 접근할 수 있도록 합니다 2\ back4app 대시보드 구성 “ 이메일 인증 을 이메일 설정 에서 활성화하십시오 “ 비밀번호 재설정 템플릿 을 편집하고 “보낸 사람” 주소를 설정하십시오 브랜딩에 맞게 이메일 내용을 사용자 정의할 수도 있습니다 3\ 구현 활성화되면 사용자가 이메일로 가입하면 인증 링크를 받게 됩니다 비밀번호 재설정 요청은 사용자의 이메일을 사용하여 동일한 기본 api에 호출되어 재설정 이메일을 트리거합니다 8단계 – 클라우드 작업으로 작업 예약하기 1\ 클라우드 작업의 기능 클라우드 작업을 사용하면 back4app 플랫폼에서 오래된 데이터 정리 또는 매일 요약 이메일 전송과 같은 정기적인 작업을 예약할 수 있습니다 2\ 예시 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 ago = new date(now 30 24 60 60 1000); query lessthan('createdat', thirty days ago); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old items `; }); 클라우드 코드를 배포한 후 앱 설정 > 서버 설정 > 백그라운드 작업 에서 작업을 예약하십시오 9단계 – 웹훅 통합하기 웹훅을 정의하십시오 back4app에서 더보기 > 웹훅 로 이동하여 “웹훅 추가”를 클릭하십시오 엔드포인트를 제공하십시오 예를 들어 https //your service com/webhook endpoint 트리거를 선택하십시오 예를 들어 “todo 클래스의 새 객체 ” 웹후크는 제3자 서비스에 알림을 보낼 수 있으므로, 외부 시스템이 추가 로직이나 알림을 처리하는 동안 xamarin 앱은 가벼운 상태를 유지할 수 있습니다 10단계 – back4app 관리 패널 탐색 “ back4app 관리 앱 ”은 쿼리를 작성하지 않고 crud 작업을 처리할 수 있는 사용자 친화적인 방법입니다 앱 대시보드 > 더보기 > 관리 앱 에서 활성화하세요 관리 사용자를 생성하고, 하위 도메인을 선택한 후 로그인하세요 이 관리 앱은 데이터 관리를 필요로 하지만 데이터베이스에 직접 접근해서는 안 되는 비기술 팀원에게 이상적입니다 결론 이제 back4app api를 사용하여 xamarin의 백엔드를 구축하는 방법을 보았습니다 안전한 클래스를 생성하고, clp 와 acl , 인증을 처리하고, 파일 업로드, 작업 예약 및 외부 서비스와의 통합을 탐색했습니다 이 접근 방식은 모바일 앱 이 호스팅된 데이터베이스와 클라우드 환경의 힘을 활용하면서 빠르고 유연하게 유지되도록 보장합니다 다음 단계 xamarin 애플리케이션을 확장하여 더 복잡한 로직, 캐싱 또는 고급 역할 및 권한을 처리하세요 고급 기능에 대해 깊이 파고들기 , 푸시 알림과 같은 기능이나 협업 업데이트가 필요한 경우 실시간 데이터와 live queries를 통합하세요 공식 back4app 문서 방문하기 보안, 성능 및 디버깅에 대한 심층 가이드를 위해 실제 솔루션 만들기 제3자 api(결제 게이트웨이, 분석, 소셜 미디어)와 back4app 백엔드를 혼합하여 이 조합은 모바일 클라이언트의 기능을 향상시키고 코드를 정리하는 데 도움이 될 수 있습니다