Back4app으로 Flutter DevTools 확장 만들기 및 사용하기

소개 flutter devtools는 flutter 앱을 디버깅하고 검사하며 프로파일링하기 위한 강력한 도구 모음입니다 dart 및 flutter devtools 확장 프레임워크를 사용하여 개발자는 디버깅 및 개발 워크플로를 향상시키기 위해 사용자 정의 확장을 만들 수 있습니다 이러한 확장은 flutter 웹 앱으로 구축할 수 있으며 devtools 모음에 원활하게 통합될 수 있습니다 이 튜토리얼에서는 flutter devtools 확장을 만드는 방법, 백엔드 서비스에 back4app을 사용하는 flutter 앱과 통합하는 방법, 그리고 사용자 정의 확장을 사용하여 애플리케이션을 디버깅하는 방법을 탐구할 것입니다 이를 통해 개발 프로세스를 간소화하고 앱의 동작에 대한 더 깊은 통찰력을 제공할 수 있는 맞춤형 개발 도구를 구축하는 데 도움이 될 것입니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정 back4app com https //www back4app com 에서 무료 계정에 가입하세요 로컬 머신에 flutter 개발 환경이 설정되어 있어야 합니다 아직 설정하지 않았다면 flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따르세요 dart, flutter 위젯 및 flutter devtools 사용에 대한 기본 지식 1단계 – back4app 백엔드 설정하기 back4app 프로젝트 생성하기 back4app 계정 https //www back4app com/ 에 로그인하고 새 프로젝트를 생성합니다 parse 클래스 생성하기 이 튜토리얼을 위해 themesettings 라는 parse 클래스를 생성하여 flutter 앱의 테마 구성 데이터를 저장합니다 themename (문자열) 테마의 이름 primarycolor (문자열) 테마의 기본 색상 accentcolor (문자열) 테마의 강조 색상 샘플 데이터로 클래스 채우기 flutter 앱이 사용할 테마 구성을 시뮬레이션하기 위해 themesettings 클래스에 여러 레코드를 추가합니다 back4app 자격 증명 가져오기 프로젝트 설정으로 이동하여 flutter 앱을 back4app에 연결하는 데 필요한 애플리케이션 id와 클라이언트 키를 검색합니다 2단계 – flutter devtools 확장 만들기 새 flutter 프로젝트 생성하기 터미널 또는 명령 프롬프트를 열고 다음을 실행합니다 flutter create theme builder extension 확장 디렉토리 설정 프로젝트 루트 디렉토리로 이동하여 devtools 확장을 위한 새 디렉토리를 만듭니다 mkdir devtools extension 이 디렉토리 안에 config yaml 파일을 만들어 devtools에 필요한 메타데이터를 저장합니다 package name theme builder extension version 1 0 0 issue tracker https //github com/yourusername/theme builder extension/issues material icon assets/icon png 종속성 추가 pubspec yaml 을 열고 다음 종속성을 추가합니다 dependencies flutter sdk flutter devtools extensions latest version devtools app shared latest version 실행 flutter pub get 이 종속성을 설치합니다 devtools 확장 만들기 lib/main dart , 기본 내용을 다음 코드로 교체하여 flutter 웹 앱을 devtoolsextension 위젯으로 감쌉니다 import 'package\ flutter/material dart'; import 'package\ devtools extensions/devtools extensions dart'; import 'package\ devtools app shared/devtools app shared dart'; void main() { runapp(devtoolsextension(child themebuilderapp())); } class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child elevatedbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } 이것은 앱을 devtoolsextension 위젯으로 감싸며, 이는 테마 설정 및 devtools 스위트와의 통합을 처리합니다 devtools 통합 추가 앱을 수정하여 devtoolsbutton 을 사용하여 일반 elevatedbutton , 대신 devtools 전용 기능을 통합합니다 class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body center( child devtoolsbutton( onpressed () { // your extension logic here }, child text('generate theme'), ), ), ); } } 이 변경 사항은 귀하의 확장 ui가 devtools 스위트의 나머지 부분과 원활하게 통합되도록 보장합니다 3단계 – back4app과 통합하기 귀하의 확장에서 parse 초기화하기 이 확장은 back4app과 상호작용하므로, 귀하의 확장에서 parse를 초기화하세요 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(devtoolsextension(child themebuilderapp())); } 테마 데이터 가져오기 및 사용하기 귀하의 확장에서 back4app의 데이터를 사용하여 테마를 생성하고 적용하세요 class themebuilderapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('theme builder')), body futurebuilder\<list\<parseobject>>( future fetchthemes(), builder (context, snapshot) { if (!snapshot hasdata) { return circularprogressindicator(); } final themes = snapshot data!; return listview\ builder( itemcount themes length, itembuilder (context, index) { final theme = themes\[index]; return listtile( title text(theme get\<string>('themename') ?? 'no name'), subtitle text('primary color ${theme get\<string>('primarycolor')}'), ontap () { // apply theme logic }, ); }, ); }, ), ); } future\<list\<parseobject>> fetchthemes() async { final query = querybuilder\<parseobject>(parseobject('themesettings')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { throw exception('failed to load themes'); } } } 이 코드는 back4app에서 테마 설정을 가져와 목록에 표시합니다 테마를 선택하면 이를 적용하기 위한 추가 로직이 트리거될 수 있습니다 4단계 – 시뮬레이션 환경에서 확장 프로그램 테스트하기 시뮬레이션 환경에서 확장 프로그램 실행하기 매번 컴파일하지 않고 확장 프로그램을 테스트하려면, 시뮬레이션 devtools 환경을 사용하세요 flutter run d chrome dart define=use simulated environment=true 연결된 앱 시뮬레이션 확장 프로그램이 연결할 또 다른 flutter 앱을 시작합니다 연결된 앱의 vm 서비스 uri와 dtd 서비스 uri를 시뮬레이션 환경에 복사하여 붙여넣습니다 5단계 – 확장 프로그램 빌드 및 게시 확장 프로그램 빌드 확장 프로그램에 만족하면, 프로덕션을 위해 빌드합니다 flutter pub get flutter build web output=devtools extension/build 확장 프로그램 검증 devtools 검증 명령을 사용하여 확장 프로그램이 올바르게 구성되었는지 확인합니다 dart run devtools extensions validate 확장 프로그램 게시 다른 개발자들이 사용할 수 있도록 확장 프로그램을 pub dev 에 게시합니다 flutter pub publish 결론 이 튜토리얼에서는 flutter devtools 확장 프로그램을 생성하고, 백엔드 서비스에 back4app과 통합하며, 시뮬레이션 환경에서 테스트하는 방법을 배웠습니다 devtools를 확장함으로써 생산성을 높이고 앱의 동작에 대한 새로운 통찰력을 제공하는 맞춤형 도구를 만들 수 있습니다 확장 프로그램이 준비되면, pub dev 에 게시하여 다른 개발자들이 귀하의 작업을 활용할 수 있도록 합니다 back4app과 함께 flutter를 사용하는 방법에 대한 자세한 정보는 back4app 문서 https //www back4app com/docs 와 flutter devtools 문서 https //flutter dev/docs/development/tools/devtools/overview 를 확인하세요 행복한 코딩 되세요!