아론 울랄 는 사람과 삶을 사랑하는 FactoryMind의 프리랜서 개발자로, 영구 베타 버전에 살고 있습니다. He 는 이탈리아 트렌토의 아름다운 마을에 기반을 둔 풀 스택 개발사입니다.
더 많은 것을 추구하는 IT 열정 보다 7 년, 그는 현재 네이티브를 사용한 모바일 개발에 집중S복잡한 플랫폼을 위한 아키텍처 솔루션을 작성하고 설계합니다.
카우치베이스는 앱 내에서 데이터를 보존할 수 있는 훌륭한 도구입니다. 들어본 적이 없다면, 데이터를 저장할 수 있는 문서 개체 저장소입니다.
네이티브스크립트-앵귤러를 사용하는 경우 시작하는 방법과 고급 기능에 대한 훌륭한 튜토리얼이 이미 있습니다. 이 글에서는 타입스크립트가 포함된 네이티브스크립트에 초점을 맞추겠습니다.
다룰 내용
이 간단한 문서에서는 몇 가지 사용자 정보를 저장하고 검색하는 방법을 살펴봅니다:
- Couchbase 설치
- Couchbase 위에 추상화 계층을 제공하는 TypeScript 클래스를 생성하여 훨씬 더 쉽게 사용할 수 있습니다(데이터 삽입 및 검색을 위한 복잡한 지침이 필요 없음).
- 클래스에서 싱글톤 패턴 구현하기
튜토리얼이 끝나면 다음과 같은 지침을 사용할 수 있습니다.
|
1 2 3 |
사용자 설정.이름 = "Frank" //boom! DB에 기록 텍스트="{{ 사용자 설정.이름 }}" //붐! DB에서 읽기 |
읽고 쓰기 위해 광범위한 쿼리를 작성할 필요 없이!
또한 이 문서에 있는 모든 코드는 이 깃허브 리포지토리. 자유롭게 복제하여 사용해 보세요.
더 이상 고민하지 말고 시작해보자!
카우치베이스 플러그인 설치
타입스크립트 템플릿을 사용하여 새로운 네이티브스크립트 앱을 만들어 보겠습니다.
|
1 |
tns create ns-카우치베이스-데모 --tsc |
새로 만든 NativeScript 프로젝트의 루트 폴더에서 다음 명령을 실행하여 플러그인을 추가하고 종속성 목록에 저장해 보겠습니다:
|
1 |
tns 플러그인 추가 네이티브 스크립트-카우치베이스 |
플러그인이 성공적으로 설치되면 필요한 사용자 정보를 저장하고 검색하는 데 사용할 클래스를 만들어 보겠습니다.
추상화 레이어 클래스
선택 사항: 일반적으로 포함해야 하는 속성을 정의하는 인터페이스를 만드는 것이 좋습니다.
프로젝트의 앱 폴더로 이동하여 모델 폴더를 만듭니다. 여기에서 Models.ts 파일(app/models/Models.ts)을 정의합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
내보내기 모듈 모델{ 내보내기 인터페이스 사용자 설정 { 사용자 이름 :문자열; 전체 이름 :문자열; 이메일 :문자열; } } |
인터페이스를 정의했으면 이제 실제로 인터페이스를 구현하는 클래스를 만들어 보겠습니다. UserSettings 클래스라고 부르겠습니다.
이 클래스 내부에는 카우치베이스 데이터베이스와 관련된 정보도 저장해야 합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
let 카우치베이스모듈 = require("네이티브 스크립트-카우치베이스"); 가져오기 { 모델 } 에서 '../모델/모델'; 내보내기 클래스 사용자 설정 구현 모델.사용자 설정{ 비공개 데이터베이스_이름 = 'appname-db'; 비공개 user_settings_doc_ID = 'usersettings'; 비공개 _database; 비공개 _사용자 설정 문서: 모델.사용자 설정; 비공개 _사용자 설정 오브젝트: 모델.사용자 설정; 비공개 인스턴스 :사용자 설정; } |
자세히 살펴보겠습니다:
처음 두 줄에는 이전에 설치한 Couchbase 플러그인과 TypeScript의 강력한 타이핑을 활용하기 위해 사용할 Models 모듈이 필요합니다.
그런 다음 나중에 사용할 다른 개인 속성을 정의합니다:
DATABASE_NAME: 데이터베이스의 이름입니다. 대문자가 포함되지 않아야 하며 240자 미만이어야 합니다.
USER_SETTINGS_DOC_ID: 카우치베이스 문서의 이름입니다.
데이터베이스: 데이터베이스 커넥터의 인스턴스입니다.
사용자 설정 문서: 카우치베이스는 문서 지향 데이터베이스가 아닙니다. 테이블이 없는 대신 문서라는 기본 저장 엔티티를 사용합니다. 기본적으로 문서는 키-값 쌍의 모음으로, 값은 문자열, 숫자, 배열 등 거의 모든 것이 될 수 있습니다. 다양한 비관계형 데이터를 저장해야 하는 경우 Couchbase가 최고의 솔루션이 되는 이유, 즉 단순성과 유연성이 바로 여기에 있습니다.
_userSettingsObj: Couchbase 문서와 정보를 동기화하는 데 사용할 JavaScript 객체입니다.
인스턴스 변수를 선언한 이유는 나중에 싱글톤 패턴을 구현할 때 다루겠습니다.
이제 클래스 생성자가 어떻게 작동하는지 살펴보겠습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
생성자() { 이._database = new 카우치베이스모듈.카우치베이스(이.데이터베이스_이름); 이._사용자 설정 문서 = 이._database.getDocument(이.사용자_설정_문서_ID); 만약 (!이._사용자 설정 문서) { 콘솔.로그("문서가 아직 존재하지 않습니다 :)"); 이._사용자 설정 오브젝트 = { 사용자 이름: "", 이메일: "", 전체 이름: "", } 이._database.createDocument(이._사용자 설정 오브젝트, 이.사용자_설정_문서_ID); 이._사용자 설정 문서 = 이._database.getDocument(이.사용자_설정_문서_ID); } } |
다시 한 번 생성자에서 어떤 일이 일어나고 있는지 자세히 살펴보겠습니다.
this._database = 새 CouchBaseModule.Couchbase(this.DATABASE_NAME);
여기서는 Couchbase를 인스턴스화하고 어떤 데이터베이스에 연결할지 알려줍니다.
이._사용자설정문서 = 이._데이터베이스.get문서(이.USER_SETTINGS_DOC_ID);
이 줄은 카우치베이스에 문서(정보를 저장하는 데 사용하는 컬렉션)를 가져오라고 지시합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
만약 (!이._사용자 설정 문서) { 콘솔.로그("문서가 아직 존재하지 않습니다 :)"); 이._사용자 설정 오브젝트 = { 사용자 이름: "", 이메일: "", 전체 이름: "", } 이._database.createDocument(이._사용자 설정 오브젝트, 이.사용자_설정_문서_ID); 이._사용자 설정 문서 = 이._database.getDocument(이.사용자_설정_문서_ID); } |
문서가 아직 존재하지 않는 경우(예: 처음 작성하는 경우) UserSettings 유형의 빈 객체를 생성하고 새 문서도 생성합니다. createDocument 함수에 할당하는 두 번째 매개변수는 문서의 ID입니다. 이 매개 변수를 제공하지 않으면 Couchbase가 자동으로 문서에 UUID를 할당합니다.
멋지네요! 생성자가 완성되었으니 이제 사용자에 대한 정보를 설정하고 검색하는 방법을 살펴봅시다.
이를 위해 몇 가지 게터와 세터를 설정해 보겠습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*====== 사용자 이름 게터 및 세터 ======*/ get 사용자 이름(): 문자열 { 이._사용자 설정 오브젝트 = 이._database.getDocument(이.user_settings_doc_ID ); let 사용자 이름 = 이._사용자 설정 오브젝트.사용자 이름; 반환 사용자 이름; } set 사용자 이름(값: 문자열) { 이._사용자 설정 오브젝트 = 이._database.getDocument(이.user_settings_doc_ID ); 이._사용자 설정 오브젝트.사용자 이름 = 값; 이._database.업데이트 문서(이.user_settings_doc_ID , 이._사용자 설정 오브젝트); } |
평소처럼 코드를 세분화해 보겠습니다.
게터에서는 세 가지 작업을 수행합니다:
1) 문서에서 객체로 데이터를 읽습니다.
2) 원하는 값(이 경우 사용자 이름)을 가져옵니다.
3) 반환
간편함 :)
세터에서는 다음을 수행합니다:
1) 사용자 설정 오브젝트의 최신 버전을 DB에서 읽어옵니다.
2) 사용자 이름 속성을 함수에 전달된 값으로 설정합니다.
3) 데이터베이스에서 문서를 업데이트합니다. createDocument 함수와 달리 첫 번째 매개변수는 문서의 ID이고 두 번째 매개변수는 객체 자체입니다.
그런데... 왜 먼저 getDocument가 필요할까요? 그냥 객체로 문서를 업데이트하면 안 될까요?
물어봐 주셔서 감사합니다!
기본적으로 문서를 업데이트할 때마다 Couchbase는 변경 사항을 추적합니다. 각 문서에는 _rev 속성이 있으며, 이 값은 문서에 대한 쓰기 작업이 수행될 때마다 Couchbase에 의해 업데이트됩니다. 이전 _rev로 문서를 업데이트하려고 하면 Couchbase는 이를 거부합니다.
싱글톤 패턴
디자인 패턴을 좋아하지 않는 사람이 있을까요? 오늘은 매우 간단하지만 효과적인 싱글톤을 구현해 보겠습니다. 싱글톤 패턴을 올바르게 구현하면 "싱글톤 패턴은 인스턴스화 의 클래스 에 하나 객체. 이는 시스템 전체에서 작업을 조정하는 데 정확히 하나의 객체가 필요할 때 유용합니다." 바로 우리의 경우입니다.
기본적으로 클래스의 데이터베이스 읽기 및 쓰기 인스턴스는 한 개만 보유하도록 합니다.
어떻게 할 수 있을까요? 간단한 방법은 다음 두 단계를 따르는 것입니다:
1) 생성자를 비공개로 설정(TS 2.0에 도입)
2) 인스턴스가 존재하는 경우 현재 인스턴스를 반환하고, 첫 번째 호출인 경우 새 인스턴스를 반환하는 getInstance 메서드 구현하기
1단계:
|
1 |
비공개 생성자() {....} |
2단계:
이제 다음과 같이 getInstance() 메서드를 생성할 수 있습니다:
|
1 2 3 4 5 6 7 8 9 10 11 |
public 정적 getInstance() :사용자 설정{ 만약(!이.인스턴스){ 이.인스턴스 = new 사용자 설정(); } 반환 이.인스턴스; } |
훌륭합니다! 데이터를 추상화하고 싱글톤 패턴을 구현했으니 이제 멋진 새 UserSettings 클래스를 어떻게 사용할 수 있는지 살펴봅시다.
기존 main-page.xml 및 main-page.ts 파일을 편집할 것입니다.
먼저 몇 가지 기본 UI 레이아웃을 정의하겠습니다. 이 데모에서는 사용자 입력을 받는 텍스트 필드, 값을 데이터베이스에 저장하는 버튼, 데이터베이스의 현재 값을 표시하는 레이블을 사용하겠습니다. 보시다시피, 데이터베이스에 데이터가 저장되지 않은 경우 레이블은 단순히 "데이터베이스에 저장된 데이터 없음"을 표시합니다.
메인 페이지.xml 파일은 다음과 같은 모습이어야 합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<페이지 xmlns="http://schemas.nativescript.org/tns.xsd" 탐색="navigatingTo"> <페이지.actionBar> <액션바 title="내 앱" 아이콘="" 클래스="action-bar"> </액션바> </페이지.actionBar> <스택 레이아웃> <텍스트 필드 힌트="username" 텍스트="{{ 사용자 이름 }}" /> <버튼 텍스트="내 사용자 이름 저장" 탭="onTap" 클래스="btn btn-primary btn-active"/> <라벨 텍스트="{{ dbusername || 'DB에 저장된 데이터 없음' }}" textWrap="true"/> </스택 레이아웃> </페이지> |
완료! 이제 기본 레이아웃이 완성되었으니 UI에 몇 가지 로직을 추가하여 계속 진행할 수 있습니다.
메인 페이지.ts 파일의 모습은 다음과 같습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
가져오기 { 관찰 가능 } 에서 '데이터/관찰 가능'; //뷰에 데이터 바인딩 가져오기 { 사용자 설정 } 에서 './UserSettings'; //우후 우리의 놀라운 데이터베이스 상호작용 레이어 가져오기 { 이벤트 데이터 } 에서 '데이터/관찰 가능'; //인텔리센스용 타입스크립트와 함께 사용 가져오기 { 페이지 } 에서 'ui/page'; //인텔리센스용 타입스크립트와 함께 사용 let 사용자 설정 = 사용자 설정.getInstance(); let 메인 페이지 뷰 모델; 클래스 메인 페이지 보기 모델 확장 관찰 가능{ public 사용자 이름; public dbusername 생성자(){ super(); 이.dbusername = 사용자 설정.사용자 이름; } } 내보내기 함수 탐색(args: 이벤트 데이터) { let 페이지 = <페이지>args.객체; 메인 페이지 뷰 모델 = new 메인 페이지 보기 모델(); 페이지.바인딩 컨텍스트 = 메인 페이지 뷰 모델; } 내보내기 함수 onTap(){ 사용자 설정.사용자 이름 = 메인 페이지 뷰 모델.사용자 이름; 메인 페이지 뷰 모델.set("dbusername",사용자 설정.사용자 이름); } |
무슨 일을 했나요? 첫 번째 줄에서는 모듈의 기능을 확인하기 위해 주석을 확인하면서 여러 가지를 가져왔습니다. 다음은
|
1 |
let 사용자 설정 = 사용자 설정.getInstance(); |
이것이 UserSettings 클래스 인스턴스를 확보하는 방법입니다.
이어서 또 다른 소규모 수업을 선언했습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
클래스 메인 페이지 보기 모델 확장 관찰 가능{ public 사용자 이름; public dbusername 생성자(){ super(); 이.dbusername = 사용자 설정.사용자 이름; } } |
보시다시피 메인 페이지 뷰 모델은 옵저버블 클래스를 확장합니다. 옵저버블에 익숙하지 않다면 기본적으로 속성 중 하나가 변경되면 알림을 트리거하는 자바스크립트 객체라는 것을 알고 계실 것입니다. 자세한 내용은 다음을 참조하세요. 여기.
뷰 모델에는 텍스트 필드에 바인딩한 username과 레이블에 바인딩한 dbusername이라는 두 가지 프로퍼티가 있습니다. 클래스의 새 인스턴스를 생성할 때마다 사용자 설정 인스턴스에 있는 값을 dbusername에 할당하면 데이터베이스에서 데이터를 읽습니다(get username() 게터 메서드를 기억하시나요?).
|
1 2 3 4 5 6 7 8 9 |
내보내기 함수 탐색(args: 이벤트 데이터) { let 페이지 = <페이지>args.객체; 메인 페이지 뷰 모델 = new 메인 페이지 보기 모델(); 페이지.바인딩 컨텍스트 = 메인 페이지 뷰 모델; } |
이 함수는 페이지로 이동할 때마다 호출됩니다. 메인페이지뷰모델 클래스를 인스턴스화하여 메인페이지뷰모델 변수에 할당하고 이를 페이지에 바인딩합니다. 아주 간단합니다.
마지막으로 버튼 클릭에 대한 동작을 정의합니다:
|
1 2 3 4 5 6 7 |
내보내기 함수 onTap(){ 사용자 설정.사용자 이름 = 메인 페이지 뷰 모델.사용자 이름; 메인 페이지 뷰 모델.set("dbusername",사용자 설정.사용자 이름); } |
다시 한 번 아주 간단합니다: 텍스트 필드에 있는 값을 데이터베이스에 쓰고(mainPageViewModel.username은 텍스트 필드에 바인딩되어 있음), 라벨을 업데이트하기 위해 dbusername의 값을 업데이트하면 됩니다. 이미지가 천 마디 말보다 더 효과적이니, 여기 GIF가 있습니다!
이 게시물은 카우치베이스 커뮤니티 글쓰기 프로그램의 일부입니다.
자세한 블로그를 작성해 주신 Laura에게 감사드립니다.
데이터 지속 방법에 대한 Nativescript-vue 카우치베이스에 대한 유사한 블로그가 있을까요?