최근에 우리는 React Native 애플리케이션에서 Couchbase Lite를 사용하는 주제에 대한 일련의 기사를 게시했습니다. 이 튜토리얼에서는 한 단계 더 나아가 권장되는 카우치베이스 라이트 모듈 리액트 네이티브용( npm 모듈). 간단한 Todo 애플리케이션의 로그인 및 목록 화면을 완성하는 데 필요한 Couchbase Lite 코드를 추가합니다. 튜토리얼이 끝나면 다음과 같은 핵심 개념을 다루게 될 것입니다:
- 데이터베이스 및 그 안의 문서를 만들고 삭제합니다.
- 카우치베이스 보기를 사용하여 날짜별로 문서 목록을 표시합니다.
- 기본 인증을 사용한 복제.
- 동기화 게이트웨이 사용자 만들기 및 동기화 기능 사용.
요구 사항
- Node.js 4.0 +
- Xcode 7 이상
- iOS 9 이상을 실행하는 iOS 시뮬레이터 또는 기기
시작하기
시간을 절약하기 위해 모든 UI 코드가 포함된 스타터 프로젝트를 이미 작성해 두었습니다. 계속해서 다운로드 를 원하는 디렉터리에 압축을 풀고 콘텐츠를 압축 해제합니다. 그런 다음 프로젝트 디렉터리에서 종속 요소를 설치합니다:
|
1 |
$ npm install |
아직 설치되어 있지 않다면 React Native CLI도 전역적으로 설치되어 있는지 확인하세요:
|
1 |
$ npm install react-native -g |
다음으로 React Native 데몬을 시작합니다:
|
1 |
$ react-native start |
다음에서 Xcode 프로젝트를 엽니다. ios/UntitledTodoApp.xcodeproj 를 클릭하고 시뮬레이터 또는 Xcode의 기기에서 실행합니다. 두 화면이 모두 표시되어야 합니다:
로그아웃 버튼을 눌러도 로그인 화면으로 돌아가지 않고 목록 보기에 아무것도 표시되지 않는 것을 확인할 수 있습니다. 다음 섹션에서 이 문제를 해결할 테니 걱정하지 마세요.) 라이브 로드를 활성화하려면 Cmd+D 바로가기를 클릭하세요(Chrome 디버깅이 유용할 때도 있습니다).
Couchbase Lite를 사용한 로컬 지속성
스타터 프로젝트에는 이미 React Native Couchbase Lite 모듈이 포함되어 있습니다( 리포지토리 지침 를 사용하여 다른 React Native 프로젝트에서 사용할 수 있습니다.) 이 섹션에서는 새 매니저와 데이터베이스를 인스턴스화하고 로컬에서 문서를 지속하는 방법을 배웁니다.
에 새 파일을 만듭니다. src/database.js 를 클릭하고 다음을 붙여넣습니다:
|
1 2 3 4 5 6 7 8 9 10 11 |
// 1 import {manager, ReactCBLite} from 'react-native-couchbase-lite'; // 2 ReactCBLite.init(5984, 'admin', 'pass'); // 3 var database = new manager('https://admin:pass@localhost:5984/', 'myapp'); // 4 module.exports = database; |
이 코드는 다음을 수행합니다:
- 가져오기
관리자그리고ReactCBLite객체를 사용하여 모듈에서 구조화 해제 할당 구문 를 사용할 수 있습니다. - 나중에 사용할 HTTP REST API를 제공하는 Couchbase Lite 리스너를 시작합니다.
- 임베디드 서버의 URL과 원하는 데이터베이스 이름을 전달하여 관리자 인스턴스를 인스턴스화합니다.
- 애플리케이션 수명 주기 내내 사용할 수 있도록 개체를 내보냅니다.
이제 다음 항목에 집중할 수 있습니다. components/Login.js. 이전 단계의 데이터베이스 개체를 사용하기 위해 require 문을 추가합니다:
|
1 |
var database = require('./../database'); |
이 구성 요소에는 두 개의 입력 필드와 버튼이 있는데, 지금은 동기화 게이트웨이가 아직 실행되지 않았으므로 사용자가 존재하는지 확인하지 않습니다. 그러나 목록 보기를 열기 전에 로컬 데이터베이스를 부트스트랩해야 합니다. 목록 보기를 열기 전에 로컬 데이터베이스를 부트스트랩해야 합니다. _온로그인 버튼 누름 를 다음과 같이 설정합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var remote = `https://${this.state.username}:${this.state.password}@localhost:4984/todos`; var credentials = this.state; database.createDatabase() .then((res) => { database.replicate('myapp', remote, true); database.replicate(remote, 'myapp', true); var todoViews = { lists: { "map": function (doc) { emit(doc.created_at, doc); }.toString() } }; database.createDesignDocument("_design/todo", todoViews); }).catch((err) => { throw err }); var data = {username: credentials.username}; this.props.navigator.push({id: 2, data: data}); |
여기서는 데이터베이스를 생성한 다음 디자인 문서를 등록하여 문서를 쿼리할 수 있도록 created_at 속성입니다.
다음으로 다음을 엽니다. Lists.js 를 클릭하고 데이터베이스 개체를 한 번 더 요구합니다:
|
1 |
var database = require('./../database'); |
에서 렌더링 메서드에서 두 개의 변수에 주목하십시오. 왼쪽 버튼 구성 그리고 오른쪽 버튼 구성 반환 문에서 NavigationBar 컴포넌트에 사용됩니다. 이들은 로그아웃 그리고 신규 버튼을 클릭합니다. 클릭 핸들러는 아무 작업도 수행하지 않으므로 바로 변경할 수 있습니다. 버튼의 핸들러 객체 리터럴의 필드 왼쪽 버튼 구성 추가합니다:
|
1 2 3 4 5 6 |
database.deleteDatabase() .then((res) => { if (res.ok) { this.props.navigator.pop(); } }); |
데이터베이스(및 진행 중인 모든 문서와 잠재적인 복제본)를 삭제한 다음 로그인 보기로 돌아가면 됩니다.
다음으로 핸들러 에 대한 오른쪽 버튼 구성 추가합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
AlertIOS.alert( 'New List Title', null, [ { text: 'Save', onPress: (text) => { database.createDocument({ type: 'list', title: text, owner: that.props.data.username, created_at: new Date().getTime() }); } }, { text: 'Cancel', style: 'cancel' } ], 'plain-text' ); |
이 경우 새 목록 제목을 입력하라는 경고 대화 상자를 표시한 다음 데이터베이스에 유지합니다( 소유자 필드를 로그인한 사용자로 설정하고 created_at 필드를 현재 타임스탬프로 설정합니다).
다음으로, 아래의 getInitialState 메서드에 다음을 추가하여 영구 문서를 쿼리합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
_redrawListView: function() { // 1 database.queryView('_design/todo', 'lists') .then((res) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(res.rows) }); }); }, componentWillMount: function() { // 2 var that = this; that._redrawListView(); this.interval = setInterval(function () { that._redrawListView(); }, 100); }, // 3 componentWillUnmount: function() { clearInterval(this.interval); }, |
현재 상황을 자세히 설명합니다:
_redrawListView는 비공개 메서드로목록보기를 클릭하고 데이터 원본을 업데이트하여 화면에 새 행(있는 경우)을 표시합니다.- In
componentWillMount를 사용하는 경우setInterval를 클릭해 주기적으로 새 문서를 확인하고 UI를 업데이트하세요. - 컴포넌트가 마운트 해제될 때(즉, 로그인 보기로 돌아갈 때) 간격 메서드를 중지합니다.
새 목록을 만들고 https://localhost:5984/myapp/_design/todo/_view/lists 를 클릭합니다. 다음을 제공해야 합니다. 관리자 사용자 이름과 통과 를 비밀번호로 입력합니다. JSON 응답은 다음과 같이 표시되어야 합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "offset":0, "rows":[ { "key":1452038776654, "value":{ "owner":"james", "_id":"-_XbsYkL8LNqVDSMuZceW71", "_rev":"1-e62876578d58bcdef321bb50470debf4", "created_at":1452038776654, "title":"Groceries", "type":"list", "_local_seq":2 }, "id":"-_XbsYkL8LNqVDSMuZceW71" }, ... ], "total_rows":2 } |
화면에 표시하려면 다음을 사용합니다. ListView 컴포넌트입니다. 두 가지 필수 속성이 있습니다:
데이터 소스를 전달하여 데이터를 제공할 수 있습니다.this.state.dataSource.렌더링 행는 반환하는 함수를 취합니다.보기객체에 목록 항목이 주어집니다.
아래 행을 그리는 방법이 누락되었습니다. 렌더링를 추가하고 렌더링 행 메서드에 다음과 같이 추가합니다:
|
1 2 3 4 5 6 7 8 9 |
renderRow: function(list) { var list = list.value; return ( {list.title} {list.owner} ); } |
원하는 데이터는 값 필드에 제목 및 소유자 필드를 표시하고 있습니다. 텍스트 요소를 추가합니다. 반환 문으로 돌아가서 렌더링 메서드에 ListView 아래의 내비게이션 바 컴포넌트처럼요:
|
1 2 3 4 |
문서를 유지하면 화면이 자동으로 업데이트되는 것을 확인할 수 있습니다:
동기화 게이트웨이 구성
이 섹션에서는 동기화 게이트웨이를 사용하여 여러 사용자가 로그인할 수 있도록 양방향 동기화 및 서버 측 사용자 인증을 도입하는 방법을 설명합니다. 먼저 다음에서 동기화 게이트웨이를 다운로드합니다. 여기 를 열고 프로젝트의 루트 디렉토리에 다음과 같은 이름의 새 파일을 만듭니다. 동기화 게이트웨이-config.json 를 다음 JSON으로 대체합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "log": ["*"], "databases": { "todos": { "users": { "moderator": {"password": "pass", "admin_channels": ["*"]}, "laura": {"password": "pass"}, "james": {"password": "pass"}, "adam": {"password": "pass"} }, "sync": `function(doc, oldDoc) { var channelname = "chan_" + doc.owner channel(channelname); access(doc.owner, channelname); }` } } } |
여기서 주의해야 할 몇 가지 중요한 사항은 다음과 같습니다:
- 그리고
게스트모드가 비활성화되어 있으므로(실제로는 기본적으로 비활성화되어 있습니다) 인증되지 않은 요청은 모두 승인되지 않은 것으로 간주되어 401 상태 코드를 반환합니다. 이를 위해 4명의 다른 사용자가 생성되었습니다(이름은 moderator, laura, james, adam). 사용자 이름은 moderator 모든 채널에 액세스할 수 있습니다. - 동기화 함수는 문서를 다음과 같은 이름의 채널로 라우팅합니다.
소유자필드에소유자해당 채널에 액세스할 수 있습니다.
따라서 이론적으로는 moderator 에 모든 목록 문서가 표시되어야 하며 다른 사용자 는 자신의 목록 문서만 볼 수 있습니다.
명령줄에서 동기화 게이트웨이를 시작합니다:
|
1 |
$ ~/Downloads/couchbase-sync-gateway/bin/sync_gateway ./sync-gateway-config.json |
In Login.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 43 44 45 46 47 |
// 1 - Request configuration var remote = `https://${this.state.username}:${this.state.password}@localhost:4984/todos`; var credentials = this.state; var settings = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: credentials.username, password: credentials.password }) }; var that = this; // 2 - Check that the name/password are valid fetch(remote + '/_session', settings) .then((res) => { switch (res.status) { case 200: // 3 - Bootstrap application database.createDatabase() .then((res) => { database.replicate('myapp', remote, true); database.replicate(remote, 'myapp', true); var todoViews = { lists: { "map": function (doc) { emit(doc.created_at, doc); }.toString() } }; database.createDesignDocument("_design/todo", todoViews); }).catch((err) => { throw err }); var data = {username: credentials.username}; that.props.navigator.push({id: 2, data: data}); break; case 401: // 4 - Wrong credentials alert('User not found or password incorrect'); break; default: break; } }); |
현재 상황은 다음과 같습니다:
- 원격 데이터베이스의 URL(이 경우 동기화 게이트웨이 데이터베이스)을 구성하고 요청 본문에서 이름/비밀번호 JSON 필드를 설정합니다.
- 사용 POST /_session 엔드포인트를 사용하여 동기화 게이트웨이로 이름/비밀번호를 확인합니다.
- 자격 증명이 유효하면 데이터베이스를 생성하고 완료되면 지속적인 푸시/풀 복제를 시작하고 디자인 문서를 등록하여 문서를 쿼리할 수 있는 보기를 등록합니다.
created_at속성입니다. - 자격 증명이 유효하지 않은 경우 경고 창을 표시합니다.
애플리케이션을 실행하고 다른 사용자로 로그인합니다. 가능하면 두 대의 디바이스에서 앱을 실행하여 지속적인 복제와 진행자에 대한 다른 읽기 권한을 관찰하세요:
결론
이 튜토리얼에서는 여러 사용자가 로그인할 수 있는 간단한 Todo 애플리케이션을 구축하기 위해 React Native Couchbase Lite 모듈을 사용하는 방법을 배웠습니다.
최종 프로젝트는 다음에서 확인할 수 있습니다. GitHub.
아래 댓글이나 포럼에서 여러분의 의견과 결과를 공유하거나 궁금한 점이 있으면 언제든지 질문해 주세요. 곧 연락드리겠습니다!
안녕하세요 제임스,
이 튜토리얼은 지금쯤이면 더 이상 사용되지 않는 것 같습니다.
'react-native-couchbase-lite'에서 {manager, ReactCBLite}를 가져옵니다.
는 ReactCBLite에 대해 정의되지 않은 값을 반환합니다.
이 게시물에서와 같이 JS 관점에서의 CBL 작업이 이렇게 깔끔하고 포괄적으로 설명되어 있는 실제 자습서를 업데이트하거나 가리켜 주시겠습니까?