개인적으로 저는 Telerik의 열렬한 팬입니다. 네이티브 스크립트. 빌드를 위한 크로스 플랫폼 개발 프레임워크입니다. 네이티브 단일 코드셋을 사용하는 Android 및 iOS 애플리케이션, 그 코드셋은 자바스크립트입니다. 콘텐츠를 표시하는 데 웹 뷰를 사용하지 않는 유일한 크로스 플랫폼 프레임워크 중 하나이기 때문에 네이티브 부분에 중점을 두어야 했습니다. 그 결과 놀라운 성능을 갖춘 애플리케이션이 탄생했습니다.
지금까지는 네이티브스크립트 앱에 데이터를 저장할 수 있는 좋은 솔루션이 없었습니다. 지금까지는 그랬죠!
Telerik과 NativeScript 팀의 도움으로 저는 네이티브 스크립트용 Couchbase Lite 플러그인 를 사용하면 모바일 애플리케이션에서 NoSQL의 강력한 기능을 활용할 수 있습니다. 카우치베이스 동기화 게이트웨이와 함께 사용하면 디바이스와 플랫폼 간에 데이터를 동기화할 수 있습니다.
시작하려면 무엇이 필요한지 알아보겠습니다. 카우치베이스 모바일 를 클릭합니다.
요구 사항
이를 가능하게 하기 위한 몇 가지 요구 사항이 있습니다.
- 네이티브스크립트 1.7+
- Android SDK(Android 앱을 빌드하는 경우)
- Xcode 및 Mac(iOS 앱을 빌드하는 경우)
- 카우치베이스 동기화 게이트웨이(동기화용)
Android와 iOS 모두에 대해 빌드할 필요는 없지만 확실히 편리합니다.
새 네이티브스크립트 프로젝트 만들기
디바이스 간에 동기화되는 간단한 이름 목록 애플리케이션을 만들어 보겠습니다. 이렇게 하려면 명령 프롬프트(Windows) 또는 터미널(Mac 및 Linux)에서 다음을 실행합니다:
1 2 3 4 5 6 |
tns create 카우치베이스 프로젝트 cd 카우치베이스 프로젝트 tns 플랫폼 추가 ios tns 플랫폼 추가 안드로이드 |
Mac을 사용하지 않는 경우 iOS 플랫폼용으로 추가 및 빌드할 수 없다는 점을 기억하세요. 앞으로 명령 프롬프트 또는 터미널에서 다음을 사용해야 합니다. 카우치베이스 프로젝트 를 작업 디렉터리로 지정합니다.
카우치베이스 라이트 SDK 포함
프로젝트가 생성되었으면 이제 사용할 Couchbase Lite 플러그인을 포함할 차례입니다. 터미널 또는 명령 프롬프트에서 다음을 실행합니다:
1 2 3 |
tns 플러그인 추가 네이티브 스크립트-카우치베이스 |
여기에는 프로젝트에 추가된 모든 플랫폼에 대한 플러그인이 포함됩니다.
애플리케이션 개발
프로젝트가 생성되었으면 몇 가지 파일과 디렉터리를 만들어야 합니다. 계속해서 다음을 추가합니다:
1 2 3 4 5 6 7 8 9 |
mkdir 앱/조회수 mkdir 앱/조회수/목록 mkdir 앱/조회수/create 터치 앱/조회수/목록/목록.js 터치 앱/조회수/목록/목록.xml 터치 앱/조회수/create/create.js 터치 앱/조회수/create/create.xml |
위의 파일은 우리가 대부분의 시간을 할애할 곳이지만, 시작하기 전에 프로젝트의 앱/앱.js 파일을 열고 해당 줄을 다음과 같이 바꿉니다:
1 2 3 |
애플리케이션.시작({ 모듈 이름: "조회/목록/목록" }); |
이렇게 하면 네이티브스크립트 애플리케이션에 목록 보기가 첫 번째 보기가 됩니다.
애플리케이션 로직 만들기
애플리케이션 로직 파일은 자바스크립트 파일입니다. 한 파일은 목록 보기의 로직을 구동하고 다른 파일은 이름 생성 양식의 로직을 구동합니다. 목록 로직부터 시작하여 프로젝트의 app/views/list/list.js 파일을 열고 다음 코드를 포함하세요:
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 |
var 카우치베이스 모듈 = require("네이티브 스크립트-카우치베이스"); var 관찰 가능 배열 모듈 = require("데이터/옵저버블-어레이"); var 프레임 모듈 = require("UI/프레임"); var 데이터베이스; var 사람 목록; 함수 페이지 로딩(args) { var 페이지 = args.객체; 사람 목록 = new 관찰 가능 배열 모듈.옵저버블 배열([]); 데이터베이스 = new 카우치베이스 모듈.카우치베이스("test-database"); 데이터베이스.createView("사람들", "1", 함수(문서, emitter) { emitter.emit(JSON.parse(문서)._id, 문서); }); 새로 고침(); 페이지.바인딩 컨텍스트 = {사람 목록: 사람 목록}; } 함수 새로 고침() { 사람 목록.스플라이스(0); var 행 = 데이터베이스.실행 쿼리("사람들"); 에 대한(var i in 행) { 만약(행.hasOwnProperty(i)) { 사람 목록.push(JSON.parse(행[i])); } } } 함수 create() { 프레임 모듈.최상위().탐색({모듈 이름: "조회/생성/만들기"}); } 수출.페이지 로딩 = 페이지 로딩; 수출.새로 고침 = 새로 고침; 수출.create = create; |
위의 로직 파일에는 많은 일이 일어나고 있으므로 이를 분석해 보겠습니다. 먼저 몇 가지 자바스크립트 라이브러리를 포함하겠습니다:
1 2 3 4 5 |
var 카우치베이스 모듈 = require("네이티브 스크립트-카우치베이스"); var 관찰 가능 배열 모듈 = require("데이터/옵저버블-어레이"); var 프레임 모듈 = require("UI/프레임"); |
먼저 설치된 플러그인을 가져와야 합니다. 데이터베이스에서 읽은 모든 데이터는 관찰 가능한 배열에 저장됩니다. 이를 통해 데이터 변경 사항을 구독하고 데이터를 UI에 바인딩할 수 있습니다. 마지막으로 프레임을 가져와서 다른 페이지로 이동할 수 있습니다.
특정 Couchbase NoSQL 데이터베이스를 열려면 다음 명령을 실행합니다:
1 2 3 |
데이터베이스 = new 카우치베이스 모듈.카우치베이스("test-database"); |
위 명령은 데이터베이스가 있는 경우 데이터베이스를 열거나 데이터베이스가 없는 경우 데이터베이스를 생성하고 엽니다.
1 2 3 4 5 |
데이터베이스.createView("사람들", "1", 함수(문서, emitter) { emitter.emit(JSON.parse(문서)._id, 문서); }); |
NoSQL을 처음 사용하는 경우 위의 코드 조각이 매우 낯설게 보일 수 있습니다. 이것은 MapReduce 뷰를 생성하는 것입니다. SQLite에서 볼 수 있는 SQL 문을 작성하는 대신 데이터를 쿼리할 수 있는 MapReduce 보기를 만들고 있습니다. 위의 보기는 모든 문서의 키-값 쌍을 반환하며, 여기서 키는 문서 ID이고 값은 문서 자체입니다. 이 뷰는 사람들.
뷰가 준비되면 쿼리해야 합니다. 이 작업은 새로 고침 함수입니다. 새로 고침 기능으로 이동하기 전에 마지막 줄에 있는 페이지 로딩 함수를 추가합니다. 이것은 우리가 바인딩할 함수가 사람 목록 데이터를 UI에 추가합니다. 이를 살펴보겠습니다. 새로 고침 함수입니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
함수 새로 고침() { 사람 목록.스플라이스(0); var 행 = 데이터베이스.실행 쿼리("사람들"); 에 대한(var i in 행) { 만약(행.hasOwnProperty(i)) { 사람 목록.push(JSON.parse(행[i])); } } } |
쿼리할 때마다 목록이 초기화되고 다시 채워집니다. 뷰는 페이지가 로드될 때만 쿼리됩니다. 이 자습서에서 그 이유를 자세히 살펴보겠습니다.
와 함께 app/views/list/list.js 파일을 제거하면 생성 양식 뒤에 있는 로직 파일에 집중할 수 있습니다. 프로젝트의 app/views/create/create.js 파일을 열고 다음 코드를 포함하세요:
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 |
var 카우치베이스 모듈 = require("네이티브 스크립트-카우치베이스"); var 관찰 가능 배열 모듈 = require("데이터/옵저버블-어레이"); var 프레임 모듈 = require("UI/프레임"); var 데이터베이스; var tfFirstName; var tf성명; 함수 페이지 로딩(args) { var 페이지 = args.객체; 사람 목록 = new 관찰 가능 배열 모듈.옵저버블 배열([]); 데이터베이스 = new 카우치베이스 모듈.카우치베이스("test-database"); tfFirstName = 페이지.getViewById("이름"); tf성명 = 페이지.getViewById("성"); 페이지.바인딩 컨텍스트 = {}; } 함수 저장() { 데이터베이스.createDocument({ "이름": tfFirstName.텍스트, "성": tf성명.텍스트 }); 프레임 모듈.goBack(); } 수출.페이지 로딩 = 페이지 로딩; 수출.저장 = 저장; |
이 파일은 이전 파일에 비해 훨씬 더 가볍습니다. 기본적으로 아직 만들지 않은 양식 요소를 캡처하고 있습니다. 우리가 저장 함수를 호출하면 양식 필드에 있는 값을 가져와 Couchbase에서 문서를 생성합니다. SQL 스키마나 개발 속도를 늦추는 불필요한 요소가 없습니다. NoSQL 사용의 주요 이점 중 하나입니다.
이제 로직이 완성되었으니 이제 UI로 넘어가도 됩니다.
크로스 플랫폼 UI 디자인
UI 코드는 짧고 간단합니다. 목록에는 추가하는 사용자에 대한 정보만 포함된다는 점을 기억하세요. 프로젝트의 app/views/list/list.xml 파일을 열고 다음 코드를 포함하세요:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<레이블></레이블> |
페이지가 로드되면 페이지 로딩 기능을 사용할 수 있습니다. 작업 표시줄에는 버튼 하나만 있으면 create 페이지로 이동합니다. 마지막으로 목록 보기는 사람 목록 로직 파일에 생성된 관찰 가능한 배열입니다.
생성 양식의 경우에도 마찬가지로 소량의 XML 코드가 포함되어 있습니다. 프로젝트의 app/views/create/create.xml 파일을 열고 다음 코드를 포함하세요:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<레이블></레이블> <레이블></레이블> |
다시 한 번 페이지 로딩 페이지 로드 시 호출됩니다. 작업 표시줄에는 카우치베이스 데이터를 저장하는 버튼이 하나 있으며, 양식에는 이전에 만든 로직 파일을 통해 읽은 데이터가 포함되어 있습니다.
데이터 저장을 위해 Couchbase를 사용하는 모든 기능을 갖춘 앱이 있어야 합니다. 하지만 현재 이 애플리케이션은 오프라인 전용입니다. 데이터가 동기화되지 않습니다.
데이터 복제를 위한 Couchbase 동기화 게이트웨이 포함
카우치베이스 서버와 다른 장치 간에 애플리케이션 데이터를 동기화하려면 카우치베이스 동기화 게이트웨이 를 특수 구성 파일과 함께 포함해야 합니다. 여기서는 간단하게 설명하기 위해 동기화 게이트웨이 구성 파일에 대해서는 자세히 설명하지 않겠습니다. 이 정도면 충분합니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "log":["CRUD+", "REST+", "변경 사항+", "Attach+"], "데이터베이스": { "test-database": { "서버":"월러스:", "동기화":` 함수 (doc) { 채널 (doc.채널); } `, "users": { "GUEST": { "disabled": false, "admin_channels": ["*"] } } } } } |
이 튜토리얼에서 중요한 것은 애플리케이션을 통해 동기화 게이트웨이와 통신하는 코드입니다. 이제 애플리케이션을 통해 동기화 게이트웨이와 통신하는 app/views/list/list.js 파일에 몇 가지 코드를 포함하고 페이지 로딩 함수를 추가합니다. 파일을 열고 다음을 포함합니다:
1 2 3 4 5 6 7 8 9 10 |
var push = 데이터베이스.createPushReplication("http://localhost:4984/test-database"); var pull = 데이터베이스.createPullReplication("http://localhost:4984/test-database"); push.setContinuous(true); pull.setContinuous(true); push.시작(); pull.시작(); |
위에서는 애플리케이션에 로컬에서 실행 중인 동일한 동기화 게이트웨이에서 푸시 및 풀을 하도록 지시하고 있습니다. 복제는 양방향으로 지속적으로 이루어질 것입니다. 그런 다음 마침내 프로세스를 시작합니다.
데이터가 업로드되고 다운로드될 때 필요할 때 UI를 업데이트할 수 있는 방법이 필요합니다. 앞서 페이지가 로드될 때 한 번만 쿼리한다고 말씀드렸습니다. 이는 실제로 리스너를 사용하여 변경 사항을 수신할 것이기 때문입니다. 잠재적으로 방대한 양의 데이터를 계속 쿼리하는 것보다 더 효율적입니다. 내부 app/views/list/list.js 파일 내의 페이지 로딩 함수에 다음 코드를 포함하세요:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
데이터베이스.데이터베이스 변경 리스너 추가(함수(변경 사항) { var 변경 인덱스; 에 대한(var i = 0; i < 변경 사항.길이; i++) { var documentId; documentId = 변경 사항[i].getDocumentId(); 변경 인덱스 = 인덱스 오브 오브젝트 아이디(documentId, 사람 목록); var 문서 = 데이터베이스.getDocument(documentId); 만약(변경 인덱스 == -1) { 사람 목록.push(문서); } else { 사람 목록.setItem(변경 인덱스, 문서); } } }); |
여기서 목표는 변경 사항을 찾아 목록에 해당 문서가 이미 있는지 확인하고, 없는 경우 추가하고, 그렇지 않은 경우 변경하는 것입니다. 목록에서 문서가 있는 위치를 찾는 기능은 아래에서 확인할 수 있습니다:
1 2 3 4 5 6 7 8 9 10 11 12 |
함수 인덱스 오브 오브젝트 아이디(바늘, haystack) { 에 대한(var i = 0; i < haystack.길이; i++) { 만약(haystack.getItem(i) != 정의되지 않음 && haystack.getItem(i).hasOwnProperty("_id")) { 만약(haystack.getItem(i)._id == 바늘) { 반환 i; } } } 반환 -1; } |
목록 보기를 업데이트하는 가장 효율적인 방법은 아닐 수도 있지만 이 예제에서는 효과가 있습니다.
이 시점에서 동기화 게이트웨이와 애플리케이션을 실행하면 데이터가 동기화됩니다.
결론
방금 간단한 크로스 플랫폼을 만드는 방법을 살펴보셨습니다, 네이티브NativeScript와 Couchbase Lite 플러그인을 사용하여 동기화되는 Android 및 iOS 애플리케이션입니다. 플러그인에 대한 자세한 내용은 프로젝트의 GitHub 페이지를 참조하세요. 카우치베이스 모바일에 대한 자세한 내용은 카우치베이스 개발자 포털.
한 가지 질문: 데이터베이스는 정확히 어디에 저장되나요? NativeScript 앱을 설치하고 실행할 때 파일 관리자를 통해 데이터베이스 파일에 액세스할 수 있나요(백업 등을 하려는 경우)? 동기화 게이트웨이를 사용하지 않기로 결정했다고 가정합니다.
Android와 iOS는 유형에 관계없이 모든 데이터베이스를 기기의 보호된 부분에 저장합니다. 이에 액세스하는 유일한 방법은 기기를 루팅하거나 탈옥하는 것입니다.
아, 알겠습니다. 파일이 어디로 갔는지 궁금했는데 다행이네요! 정보 감사합니다 :)