플러터 백엔드 통합을 위한 Parse 클라우드 코드 활용법

플러터 앱에서 클라우드 함수 사용하기 소개 복잡한 앱의 경우, 때때로 모바일 장치에서 실행되지 않는 약간의 로직이 필요합니다 클라우드 코드는 이를 가능하게 합니다 클라우드 코드는 수천 개의 앱을 지원하는 동일한 parse javascript sdk를 기반으로 구축되었기 때문에 사용하기 쉽습니다 유일한 차이점은 이 코드가 사용자의 모바일 장치에서 실행되는 것이 아니라 parse 서버에서 실행된다는 것입니다 클라우드 코드를 사용하여 처리 작업을 parse 서버로 오프로드하여 앱의 인식 성능을 높일 수 있습니다 객체가 저장되거나 삭제될 때마다 실행되는 후크를 생성할 수 있습니다 이는 데이터를 검증하거나 정리하고 싶을 때 유용합니다 또한 클라우드 코드를 사용하여 관련 객체를 수정하거나 푸시 알림 전송과 같은 다른 프로세스를 시작할 수 있습니다 클라우드 코드를 업데이트하면 모든 모바일 환경에서 즉시 사용할 수 있습니다 애플리케이션의 새로운 릴리스를 기다릴 필요가 없습니다 이를 통해 앱 동작을 즉시 변경하고 새로운 기능을 더 빠르게 추가할 수 있습니다 이 섹션에서는 클라우드 코드를 생성하고 배포하는 방법을 설명한 후, back4app을 통해 플러터 프로젝트에서 클라우드 함수를 호출하는 방법을 설명합니다 이 가이드에서는 플러터를 통해 클라우드 함수 사용을 시연하는 데 중점을 두고 있습니다 parse 공식 클라우드 코드 문서 에서 더 심층적인 정보를 찾을 수 있습니다 필수 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 flutter 버전 2 2 x 이상 https //flutter dev/docs/get started/install android studio https //developer android com/studio 또는 vs code 설치 (과 플러그인 dart 및 flutter) back4app에서 생성된 앱 참고 back4app에서 parse 앱을 만드는 방법을 배우려면 새 parse 앱 튜토리얼 을 따르세요 back4app에 연결된 flutter 앱 참고 back4app에 연결된 flutter 프로젝트를 만들려면 parse sdk를 flutter 프로젝트에 설치 를 따르세요 android 또는 ios를 실행하는 장치(또는 가상 장치) 목표 flutter 앱에서 back4app의 parse cloud code 실행하기 1 cloud code 파일 만들기 앱으로 가서 back4app 웹사이트 https //www back4app com/ 를 클릭하세요 서버 설정 서버 설정 cloud code cloud code 를 찾아서 함수 및 웹 호스팅 함수 및 웹 호스팅 을 클릭하세요 이렇게 생겼습니다 3\ 파일을 업로드하거나 새 파일을 생성합니다 (현재 main js main js 파일을 브라우저에서 직접 편집할 수 있습니다) 그런 다음, 여기에서처럼 배포 배포 를 클릭합니다 당신의 main js main js 파일은 다음과 같아야 합니다 1 parse cloud define("hello", async (request) => { 2 console log("hello from cloud code!"); 3 return "hello from cloud code!"; 4 }); 5 6 parse cloud define("sumnumbers", async (request) => { 7 return (request params number1 + request params number2); 8 }); 9 10 parse cloud define("createtodo", async (request) => { 11 const title = request params title; 12 const done = request params done; 13 14 const todo = parse object extend('todo'); 15 const todo = new todo(); 16 todo set('title', title); 17 todo set('done', done); 18 19 try { 20 await todo save(); 21 return todo; 22 } catch (error) { 23 console log('todo create error ' + error code + ' ' + error message); 24 } 25 }); 26 27 parse cloud define("getlisttodo", async (request) => { 28 let query = new parse query("todo"); 29 query descending("done"); 30 return await query find(); 31 }); flutter 앱에서 cloud 함수에 매개변수를 전달하고 request params request params 객체 내에서 접근합니다 2 parsecloudfunction 클래스 이해하기 이 parsecloudfunction parsecloudfunction 클래스는 parse cloud functions와 상호작용하기 위한 메서드를 정의합니다 cloud function은 다음과 같이 호출할 수 있습니다 parsecloudfunction execute({parameters params}) parsecloudfunction execute({parameters params}) 이 메서드는 맵 객체를 반환하거나 parsecloudfunction executeobjectfunction<>({parameters params}) parsecloudfunction executeobjectfunction<>({parameters params}) 이 메서드는 parseobject를 반환합니다 매개변수는 선택 사항이며 맵 객체가 예상됩니다 3 parse cloud 함수 호출하기 이제 cloud functions를 배포했으므로 flutter를 사용하여 함수를 호출할 수 있습니다 예제 1 cloud function 호출 및 반환값 받기 1 //executes a cloud function with no parameters that returns a map object 2 final parsecloudfunction function = parsecloudfunction('hello'); 3 final parseresponse parseresponse = await function execute(); 4 if (parseresponse success && parseresponse result != null) { 5 print(parseresponse result); 6 } 콘솔에 표시된 결과는 다음과 같습니다 예제 2 매개변수로 클라우드 함수를 호출하고 반환값을 받기 1 //executes a cloud function with parameters that returns a map object 2 final parsecloudfunction function = parsecloudfunction('sumnumbers'); 3 final map\<string, dynamic> params = \<string, dynamic>{ 4 'number1' 10, 5 'number2' 20 6 }; 7 final parseresponse parseresponse = 8 await function execute(parameters params); 9 if (parseresponse success) { 10 print(parseresponse result); 11 } 콘솔에 표시된 결과는 다음과 같습니다 예제 2 1 매개변수로 클라우드 함수를 호출하고 반환값을 받기 1 //executes a cloud function with parameters that returns a map object 2 final parsecloudfunction function = parsecloudfunction('sumnumbers'); 3 final map\<string, dynamic> params = \<string, dynamic>{ 4 'number1' 10, 5 'number2' 20 6 }; 7 final parseresponse parseresponse = 8 await function execute(parameters params); 9 if (parseresponse success) { 10 print(parseresponse result); 11 } 예제 3 매개변수를 사용하여 클라우드 함수를 호출하고 parseobject를 반환받기 1 //executes a cloud function that returns a parseobject type 2 final parsecloudfunction function = parsecloudfunction('createtodo'); 3 final map\<string, dynamic> params = \<string, dynamic>{ 4 'title' 'task 1', 5 'done' false 6 }; 7 final parseresponse parseresponse = 8 await function executeobjectfunction\<parseobject>(parameters params); 9 if (parseresponse success && parseresponse result != null) { 10 if (parseresponse result\['result'] is parseobject) { 11 //transforms the return into a parseobject 12 final parseobject parseobject = parseresponse result\['result']; 13 print(parseobject objectid); 14 } 15 } 콘솔에 표시된 결과는 다음과 같습니다 예제 4 parseobject로 변환할 수 있는 맵 목록을 반환하는 클라우드 함수를 호출하기 1 //executes a cloud function with parameters that returns a map object 2 final parsecloudfunction function = parsecloudfunction('getlisttodo'); 3 final parseresponse parseresponse = await function execute(); 4 if (parseresponse success) { 5 if (parseresponse result != null) { 6 for (final todo in parseresponse result) { 7 //use fromjson method to convert map in parseobject 8 print(parseobject('todo') fromjson(todo)); 9 } 10 } 11 } 콘솔에 표시된 결과는 다음과 같습니다 1 flutter {"classname" "todo","objectid" "cr3g4rcct1","createdat" "2021 06 23t03 20 34 933z","updatedat" "2021 06 23t03 20 34 933z","title" "task 1","done"\ false} 2 flutter {"classname" "todo","objectid" "6barcicpke","createdat" "2021 06 23t03 20 54 294z","updatedat" "2021 06 23t03 20 54 294z","title" "task 1","done"\ false} 3 flutter {"classname" "todo","objectid" "tyza74l89q","createdat" "2021 06 23t03 39 42 049z","updatedat" "2021 06 23t03 39 42 049z","title" "task 1","done"\ false} 4 flutter {"classname" "todo","objectid" "arjm8q7h8d","createdat" "2021 06 24t03 33 27 925z","updatedat" "2021 06 24t03 33 27 925z","title" "task 1","done"\ false} 5 flutter에서 클라우드 함수 호출하기 이제 flutter 앱에서 간단한 인터페이스로 클라우드 함수를 호출하는 예제를 사용해 보겠습니다 flutter 프로젝트를 열고, main dart main dart 파일로 가서, 모든 코드를 정리하고 다음으로 교체하세요 1 import 'package\ flutter/cupertino dart'; 2 import 'package\ flutter/material dart'; 3 import 'package\ parse server sdk flutter/parse server sdk dart'; 4 5 void main() async { 6 widgetsflutterbinding ensureinitialized(); 7 8 final keyapplicationid = 'your app id here'; 9 final keyclientkey = 'your client key here'; 10 11 final keyparseserverurl = 'https //parseapi back4app com'; 12 13 await parse() initialize(keyapplicationid, keyparseserverurl, 14 clientkey keyclientkey, debug true); 15 16 runapp(materialapp( 17 title 'flutter geopoint', 18 debugshowcheckedmodebanner false, 19 home homepage(), 20 )); 21 } 22 23 class homepage extends statefulwidget { 24 @override 25 homepagestate createstate() => homepagestate(); 26 } 27 28 class homepagestate extends state\<homepage> { 29 30 void docallcloudcodehello() async { 31 //executes a cloud function with no parameters that returns a map object 32 final parsecloudfunction function = parsecloudfunction('hello'); 33 final parseresponse parseresponse = await function execute(); 34 if (parseresponse success && parseresponse result != null) { 35 print(parseresponse result); 36 } 37 } 38 39 void docallcloudcodesumnumbers() async { 40 //executes a cloud function with parameters that returns a map object 41 final parsecloudfunction function = parsecloudfunction('sumnumbers'); 42 final map\<string, dynamic> params = \<string, dynamic>{ 43 'number1' 10, 44 'number2' 20 45 }; 46 final parseresponse parseresponse = 47 await function execute(parameters params); 48 if (parseresponse success) { 49 print(parseresponse result); 50 } 51 } 52 53 void docallcloudcodecreatetodo() async { 54 //executes a cloud function that returns a parseobject type 55 final parsecloudfunction function = parsecloudfunction('createtodo'); 56 final map\<string, dynamic> params = \<string, dynamic>{ 57 'title' 'task 1', 58 'done' false 59 }; 60 final parseresponse parseresponse = 61 await function executeobjectfunction\<parseobject>(parameters params); 62 if (parseresponse success && parseresponse result != null) { 63 if (parseresponse result\['result'] is parseobject) { 64 //transforms the return into a parseobject 65 final parseobject parseobject = parseresponse result\['result']; 66 print(parseobject tostring()); 67 } 68 } 69 } 70 71 void docallcloudcodegetlisttodo() async { 72 //executes a cloud function with parameters that returns a map object 73 final parsecloudfunction function = parsecloudfunction('getlisttodo'); 74 final parseresponse parseresponse = await function execute(); 75 if (parseresponse success) { 76 if (parseresponse result != null) { 77 for (final todo in parseresponse result) { 78 //use fromjson method to convert map in parseobject 79 print(parseobject('todo') fromjson(todo)); 80 } 81 } 82 } 83 } 84 85 @override 86 widget build(buildcontext context) { 87 return scaffold( 88 body padding( 89 padding const edgeinsets all(16 0), 90 child column( 91 crossaxisalignment crossaxisalignment stretch, 92 children \[ 93 container( 94 height 200, 95 child image network( 96 'https //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 97 ), 98 center( 99 child const text('flutter on back4app call clode code', 100 style textstyle(fontsize 18, fontweight fontweight bold)), 101 ), 102 sizedbox( 103 height 8, 104 ), 105 container( 106 height 50, 107 child elevatedbutton( 108 onpressed docallcloudcodehello, 109 child text('cloud code hello'), 110 style elevatedbutton stylefrom(primary colors blue)), 111 ), 112 sizedbox( 113 height 8, 114 ), 115 container( 116 height 50, 117 child elevatedbutton( 118 onpressed docallcloudcodesumnumbers, 119 child text('cloud code sumnumber'), 120 style elevatedbutton stylefrom(primary colors blue)), 121 ), 122 sizedbox( 123 height 8, 124 ), 125 container( 126 height 50, 127 child elevatedbutton( 128 onpressed docallcloudcodecreatetodo, 129 child text('cloud code createtodo'), 130 style elevatedbutton stylefrom(primary colors blue)), 131 ), 132 sizedbox( 133 height 8, 134 ), 135 container( 136 height 50, 137 child elevatedbutton( 138 onpressed docallcloudcodegetlisttodo, 139 child text('cloud code getlisttodo'), 140 style elevatedbutton stylefrom(primary colors blue)), 141 ), 142 ], 143 ), 144 )); 145 } 146 } 애플리케이션 id와 클라이언트 키 자격 증명을 찾으려면 back4app 웹사이트 https //www back4app com/ 로 이동하세요 코드를 main dart main dart 에서 back4app의 애플리케이션 id와 클라이언트 키 값으로 업데이트하세요 keyapplicationid = 앱 id 앱 id keyclientkey = 클라이언트 키 클라이언트 키 프로젝트를 실행하면 앱이 이미지와 같이 로드됩니다 결론 이 단계에서, back4app을 통해 parse server core 기능을 사용하여 flutter 앱에서 자신의 클라우드 코드를 코딩하고 호출할 수 있습니다!