반응형

MongoDB Realm으로 오프라인 Flutter 앱 구축하는 방법

 

모바일 애플리케이션용 데이터 저장소를 선택하는 것은 Flutter 개발자에게 어려운 경험이 될 수 있습니다.

Unsplash의 Caspar Camille Rubin 사진

Realm의 모바일 데이터베이스는 KeyValue 쌍, SQLite 및 Firestore에 대한 개발자 친화적인 오픈 소스 대안입니다. 몇 분 만에 시작하여 몇 주간의 작업 시간을 절약할 수 있습니다.

Realm은 오프라인 우선이고 객체 지향적이고 직관적이며 모바일용으로 제작되었습니다.

\이 기사에서는 Flutter와 Realm SDK를 사용하여 오프라인 모바일 앱을 빌드합니다.

무엇을 만들까요?

우리는 사용자가 항목 목록을 보고, 새 항목을 추가하고, 기존 항목을 토글 및 삭제할 수 있는 매우 간단한 쇼핑 목록 애플리케이션을 구축할 것입니다.

신청 화면

무엇이 필요할까요?

  • 플러터 설치 및 구성
  • 가장 좋아하는 IDE

시작하자

터미널에서 아래 명령을 사용하여 플러터 앱을 만드는 것부터 시작하세요.

flutter create shoppinglist

이렇게 하면 현재 작업 디렉토리에 shoppinglist라는 이름의 폴더가 생성되고 여기에는 Flutter 애플리케이션의 소스 코드가 포함되며 다음과 같이 보일 것입니다.

즐겨찾는 IDE에서 디렉토리를 프로젝트로 엽니다.

Realm을 종속성으로 설치

다음으로 영역을 종속성으로 추가합니다. pubspec.yaml. 이것은 아래 명령을 사용하여 수행할 수 있습니다

flutter pub add realm

또는 다음을 열 수 있습니다. pubspec.yaml 파일을 만들고 영역을 종속성으로 추가합니다.

dependencies:
# other dependecies here
realm: ^0.2.1+alpha

위의 내용을 추가한 후 아래 명령을 실행해야 합니다.

flutter pub get

그게 다야 이제 Realm을 시작하는 데 필요한 모든 것을 갖추었습니다.

스키마 생성

스키마는 모든 Realm 애플리케이션에서 가장 단순한 단위입니다. 스키마는 애플리케이션에서 사용할 데이터 구조를 정의합니다.

예를 들어, Item 쇼핑 목록에는 두 가지 속성이 있을 수 있습니다.

  • 텍스트: 문자열
  • 완료: 부울

애플리케이션에서 항목을 나타내기 위해 스키마를 생성합니다. 그렇게하려면 이라는 디렉토리를 만드십시오. schemas 에서 lib 예배 규칙서. 이 디렉토리에는 애플리케이션에서 사용되는 모든 스키마가 포함됩니다.

이제 다음과 같은 파일을 생성합니다. item.dart 아래 내용으로.

@RealmModel 이다 Annotation 정의하는 데 사용되는 클래스 Realm 데이터 모델 클래스 및 해당 속성

@PrimaryKey 기본 키 속성을 나타냅니다. 개체의 빠른 조회를 가능하게 하고 값의 고유성을 적용합니다. 그것은 될 수 있습니다

의 단일 속성에 적용 RealmModel 수업

어느 하나 String 또는 int

다음에서 스키마 생성 RealmModel 수업

이제 스키마 클래스가 정의되었으므로 Realm 스키마를 생성해야 합니다. Realm 스키마는 다음을 결합하여 생성됩니다. _Item 그리고 RealmObject 클래스. Realm은 이 작업을 더 간단하게 만들었습니다. 우리가해야 할 일은 아래 명령을 실행하는 것입니다.

flutter pub run realm generate

위의 명령은 새 파일을 생성합니다 item.g.dart 클래스를 포함하는 Item.

Realm으로 작업하기

영역 구성 및 열기

Realm을 사용하려면 먼저 다음을 정의해야 합니다. Configuration 물체. 생성자는 Realm에서 작업할 스키마 목록을 가져옵니다. 선택적으로 통과할 수 있습니다. readOnly 그리고 inMemory Realm을 읽기 전용 모드로 열거나 Realm을 메모리에 로드하려는 것을 나타내는 플래그입니다.

Configuration _config =
Configuration([Item.schema], readOnly: false, inMemory: false);
Realm _realm = Realm(_config);

모든 항목 읽기

RealmResults items = _realm.all();

쓰기/업데이트/삭제 작업은 transaction 차단하다. 트랜잭션 블록을 생성하려면 다음을 사용하십시오. write() 콜백을 매개변수로 제공합니다. 콜백 내에서 쓰기/업데이트/삭제 작업을 수행합니다.

항목 쓰기

_realm.write(() {
_realm.add(Item(text, false));
});

항목 업데이트

_realm.write(() {
item.done = true;
});

항목 삭제

_realm.write(() {
_realm.delete(item);
});

영역 닫기

if (!_realm.isClosed) {
_realm.close();
}

영역 작업을 위한 서비스 만들기

Realm을 관리하기 위해 Realm을 열고/닫고 쿼리/업데이트/삭제 작업을 수행하는 메서드를 노출하는 서비스 클래스를 만들 것입니다.

디렉토리 생성 services 아래에 lib 예배 규칙서. 새 파일 추가 item_service.dart 다음 코드로

이제 핵심 비즈니스 로직이 준비되었으므로 UI ​​구성 요소와 화면을 빌드하도록 이동합니다.

UI 구성 요소 만들기

디렉토리 생성 components 에서 lib 예배 규칙서. 이 디렉토리에는 ShoppingList 애플리케이션에서 사용되는 모든 UI 구성요소가 포함됩니다.

항목 목록 보기

ItemListView 본질적으로 쇼핑 목록의 항목 목록을 렌더링하는 ListView입니다. ItemListView 구성 요소는 세 가지 필수 매개변수를 취합니다.

  • items - 항목 개체 목록
  • onToggle - 항목이 토글될 때 호출되는 콜백 함수
  • onDelete - 아이템 삭제 시 호출되는 콜백 함수

이름이 새 파일 추가 item_list_view.dart 안에 components 아래 코드가 있는 디렉토리:

항목보기 추가

AddItemView 입력 필드와 버튼으로 구성됩니다. 사용자는 입력 필드에 항목을 입력할 수 있으며 버튼을 클릭하면 새 항목이 생성되어야 합니다.

AddItemView 구성 요소는 하나의 필수 매개변수를 사용합니다.

  • onAdd - 아이템 추가 시 호출되는 콜백 함수

이름이 새 파일 추가 add_item_view.dart 안에 components 아래 코드가 있는 디렉토리:

쇼핑목록보기

ShoppingListView 이전에 생성된 구성 요소로 구성됩니다. ItemListView 그리고 AddItemView 사용자가 항목을 추가하고 기존 항목 목록을 볼 수 있는 집계 보기를 제공합니다.

ShoppingListView 구성 요소는 4개의 필수 매개변수를 취합니다.

  • onAdd - 아이템 추가 시 호출되는 콜백 함수
  • onToggle - 항목이 토글될 때 호출되는 콜백 함수
  • onDelete - 아이템 삭제 시 호출되는 콜백 함수
  • items - 항목 개체 목록

이름이 새 파일 추가 shopping_list_view.dart 안에 components 아래 코드가 있는 디렉토리:

홈 화면 만들기

이제 UI 구성 요소와 Realm 서비스가 준비되었으므로 홈 화면에서 함께 연결할 수 있습니다. 홈 화면에서 ShoppingList가 있는 기본 앱을 자식으로 렌더링합니다. 우리는 또한 콜백 함수를 만들 것입니다 onAdd, onToggle 그리고 onDelete 이러한 기능에서 다양한 Realm 작업을 처리합니다.

열려 있는 main.dart 안에 lib 디렉토리를 만들고 기존 코드를 아래로 바꿉니다.

애플리케이션 실행

그게 다야 애플리케이션을 시작할 준비가 되었습니다. 모든 코드 파일을 저장합니다.

Flutter 애플리케이션을 시작하기 위해 먼저 에뮬레이터를 시작합니다. 사용 가능한 에뮬레이터 목록을 찾아보겠습니다.

flutter emulators

위의 출력에서 ​​에뮬레이터 ID 중 하나를 선택하고 아래 명령을 사용하여 하나를 시작합니다.

flutter emulators --launch Pixel4_API30

에뮬레이터가 시작된 후 아래 명령을 사용하여 장치 ID를 찾을 수 있습니다.

flutter devices

장치 ID 복사(emulator-5554), 아래 명령을 사용하여 flutter 앱을 실행합니다.

flutter run -d emulator-5554

명령에 대한 열렬한 팬이 아니라면 IDE를 사용하여 에뮬레이터를 시작하고 Flutter 애플리케이션을 실행할 수 있습니다.

팁 및 추가 리소스

이제 Realm 애플리케이션이 실행되고 있으므로 계속해서 스키마를 더 추가하거나 기존 스키마를 업데이트할 수 있습니다.

스키마를 변경할 때마다 아래 명령을 실행하여 스키마 정의를 기반으로 RealmObject를 생성해야 합니다.

flutter pub run realm generate

위의 명령을 watch 옵션과 함께 실행하여 스키마를 업데이트할 때 RealmObject를 생성/업데이트할 수 있습니다.

flutter pub run realm generate --watch

영역 스키마를 업데이트할 때 현재 영역을 삭제해야 합니다. 그렇게 하려면 영역을 열기 전에 아래 코드를 실행하기만 하면 됩니다.

Realm.deleteRealm(Configuration.defaultPath);

이 응용 프로그램의 소스 코드는 여기에서 사용할 수 있습니다.

Realm Flutter 현재 Alpha 단계. Realm은 매우 강력한 생태계이며 애플리케이션을 위한 단순한 오프라인 데이터 저장소 그 이상입니다. MongoDB의 Realm 팀은 다음과 같은 다양한 Realm 기능을 만들기 위해 열심히 노력하고 있습니다. Realm Sync, Realm Authentication, Realm Functions Flutter 개발자가 사용할 수 있습니다.

MongoDB Realm에 대해 더 자세히 알아보려면 여기에서 공식 문서를 방문하세요.

 

 

반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기