NSProgress 는 Foundation에서 어떤 작업의 완료를 나타내는 객체입니다. 이러한 작업은 파일 다운로드, 앱 설치 또는 자체 애플리케이션이 수행하는 작업일 수 있습니다.
그리고 NSProgress 는 UI와 시스템 모두에서 애플리케이션의 다양한 구성 요소에 대한 진행 상황을 쉽게 보고할 수 있도록 존재합니다. Couchbase Mobile을 사용하면 복제를 시작하여 데이터를 교환하고 진행 상황을 알려주는 변경 이벤트를 통해 데이터를 교환할 수 있습니다.
이 튜토리얼에서는 Google Places API에서 동기화 게이트웨이로 데이터를 가져와서 iOS 앱에 복제하는 방법을 알아봅니다.
> https://developers.google.com/places/
그 과정에서 방법을 배우게 됩니다:
- 동기화 게이트웨이 관리자 REST API를 사용하여 외부 소스에서 데이터를 가져올 수 있습니다.
- iOS SDK로 풀 복제를 설정합니다.
- 복제 변경 알림을 사용하여 UI에 진행률 표시줄을 표시합니다.
시작해보자!
시작하기
이 튜토리얼에서 Google Places API를 사용하려면 먼저 Google 개발자 콘솔에서 새 프로젝트를 만든 다음 서버 API 키를 생성합니다.
Google 개발자 콘솔을 열고 계정에 로그인합니다:
> https://console.developers.google.com
라는 새 프로젝트를 만듭니다. 도시 탐색기:
새 프로젝트가 목록에 나타나면 해당 프로젝트를 클릭하고 다음으로 이동합니다. API 및 인증 > API 을 클릭합니다. 왼쪽 탐색 메뉴에서 Google Places API 웹 서비스.
활성화되면 자격 증명 탭에서 새 키(서버 키)를 생성하고 이 튜토리얼을 진행하는 동안 필요한 API 키를 복사합니다.
다음 섹션에서는 몇 가지 라이브러리와 관리자 REST API를 사용하여 장소 데이터를 동기화 게이트웨이에 동기화합니다.
동기화 게이트웨이
동기화 게이트웨이를 다운로드하고 파일의 압축을 풉니다:
> https://www.couchbase.com/nosql-databases/downloads#Couchbase\_Mobile
동기화 게이트웨이 바이너리는 다음에서 찾을 수 있습니다. bin 폴더에 있는 구성 파일의 예와 예제 폴더로 이동합니다. 폴더를 복사합니다. basic-walrus-bucket.json 파일을 프로젝트의 루트에 추가합니다:
|
1 2 3 |
$ cp /Downloads/couchbase-sync-gateway/examples/basic-walrus-bucket.json /path/to/proj/sync-gateway-config.json |
동기화 게이트웨이를 시작합니다:
관리 대시보드를 열어 동기화 게이트웨이에 저장된 문서를 모니터링합니다.
> https://localhost:4985/_admin/
다음 섹션에서는 장소 데이터를 동기화 게이트웨이로 가져오기 위해 RxJS 및 요청 모듈을 사용하여 작은 NodeJS 앱을 작성합니다.
장소 API → 동기화 게이트웨이
앱 서버 스크립팅을 시작하기 전에 API 키가 올바르게 작동하는지 확인하고 브라우저에서 다음 URL을 열면 JSON 응답이 표시되어야 합니다.
> https://maps.googleapis.com/maps/api/place/textsearch/json?query=restaurants+in+London&key=API_KEY
참고: URL에 API 키를 추가하는 것을 잊지 마세요.
Places API에서 동기화 게이트웨이로 데이터를 가져올 앱 서버를 구축하려면 다음을 사용합니다. RxJS 그리고 요청. 둘 이상의 이벤트 또는 비동기 연산을 처리하는 코드는 빠르게 복잡해집니다. RxJS는 다음과 같은 계산을 수행합니다. 일등석 시민 이러한 비동기 연산을 처리할 수 있는 읽기 및 컴포저블 API를 허용하는 모델을 제공합니다. Request 모듈은 NodeJS에서 http 요청을 그 어느 때보다 간단하게 만드는 사실상의 라이브러리입니다. 계속해서 종속 요소를 설치하세요:
복사 requestRx.js 에서 GitHub 리포지토리 를 프로젝트 폴더에 추가합니다. 요청 API를 RxJS 구조체(flatMap, filter, subscribe...)로 래핑하기만 하면 됩니다. 예를 들어 request.get를 사용할 것입니다. requestRx.get.
라는 새 파일을 만듭니다. sync.js를 사용하려면 요청Rx 그리고 Rx 모듈을 사용합니다. 몇 가지 상수를 정의합니다:
참고: 프로그램을 더 짧고 가독성 있게 만드는 JavaScript ES 6 구문(보다 구체적으로 문자열 보간 및 화살표 함수)을 사용하게 됩니다.
그런 다음 요청Rx 메서드를 사용하여 다이어그램에 설명된 요청 체인을 따르도록 합니다.
반응형 확장 기능을 사용하는 방법이 궁금하다면 다음을 따르는 것이 좋습니다. 이 튜토리얼. 완료하는 데 몇 시간이 걸리지만 반응형 확장에 대해 매우 명확하게 이해하게 될 것입니다.
받아들이는 것이 많을 수 있지만 다양한 연산자(flatMap, zip, subscribe, fromArray)를 실험해 보는 것이 가장 좋습니다:
|
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 |
// 1. Search for Places requestRx.get(`${url}/textsearch/json?key=${api_key}&query=restaurants+in+london`) .subscribe((res) => { var places = JSON.parse(res.body).results; var placesStream = Rx.Observable.fromArray(places); // 2. Send the Places in bulk to Sync Gateway requestRx({uri: `${gateway}/_bulk_docs`, method: 'POST', json: {docs: places}}) .flatMap((docsRes) => { var docsStream = Rx.Observable.fromArray(docsRes.body); // Merge the place's photoreference with the doc id and rev return Rx.Observable.zip(placesStream, docsStream, (place, doc) => { return { id: doc.id, rev: doc.rev, ref: place.photos[0].photo_reference } }); }) .flatMap((doc) => { // 3. Get the binary jpg photo using the ref property (i.e. photoreference) var options = { uri: `${url}/photo?key=${api_key}&maxwidth=400&photoreference=${doc.ref}`, encoding: null }; return requestRx.get(options) .flatMap((photo) => { // 4. Save the photo as an attachment on the corresponding document return requestRx({ uri: `${gateway}/${doc.id}/photo?rev=${doc.rev}`, method: 'PUT', headers: {'Content-Type': 'image/jpg'}, body: photo.body }) }) }) .subscribe((res) => { }); }); |
- 검색어와 일치하는 장소 가져오기
런던의 레스토랑. URL에서 ES 6 문자열 보간 기능을 사용합니다. - 그리고
_bulk_docs엔드포인트는 대용량 데이터 세트를 동기화 게이트웨이 인스턴스로 가져오는 데 매우 편리합니다. 이에 대한 자세한 내용은 문서. - 문서를 저장한 후 사진을 첨부파일로 저장하려면 먼저 Places API에서 이미지를 가져와야 합니다. 그리고
인코딩속성이null. 문자열이 아닌 모든 응답 본문에 대해 요청 모듈에 필요합니다. 이에 대한 자세한 내용은 문서 요청. - 동기화 게이트웨이에 이 첨부파일을 저장할 문서(문서 ID를 지정하여)와 해당 문서의 수정본(수정본 번호를 지정하여)을 알려야 합니다.
JavaScript ES 6 구문으로 작성된 NodeJS 앱을 실행하려면 다음을 사용할 수 있습니다. 바벨. 설치한 후 sync.js file:
이제 동기화 게이트웨이의 인메모리 버킷에 이미지를 포함한 문서가 저장되었으므로 복제 변경 알림으로 관리되는 진행률 표시줄을 포함하도록 iOS 앱 코딩을 시작해야 합니다.
iOS 애플리케이션
Xcode에서 새 단일 보기 애플리케이션 호출 시티 익스플로러:
프로젝트를 닫고 Cocoapods를 통해 Couchbase Lite iOS SDK를 설치합니다:
에 종속성을 추가합니다. 포드파일 를 프로젝트 루트에 설치한 다음 설치를 실행합니다:
열기 CityExplorer.workspace 를 클릭하고 브리징 헤더를 만듭니다:
빌드 설정으로 이동하여 브리징 헤더를 추가합니다:
열기 ViewController.swift 를 클릭하고 속성을 추가합니다. pull 유형 CBLReplication?. 에서 viewDidLoad 메서드에 다음을 추가합니다:
위에서 몇 가지 일이 일어나고 있습니다:
- 관리자의 공유 인스턴스를 얻게 됩니다.
- 관리자 인스턴스를 사용하면 데이터베이스의 콘텐츠를 삭제합니다. 이렇게 하면 앱을 실행할 때마다 복제가 처음부터 시작됩니다.
- 풀 복제를 인스턴스화하고 다음과 같은 알림에 옵저버로 등록합니다.
kCBL복제변경알림. - 복제를 시작합니다.
그리고 복제 진행 메서드를 사용하여 변경 횟수 및 완료 횟수 속성을 간단히 기록할 수 있습니다:
다음 섹션에서는 스토리보드에 진행률 보기를 추가한 다음 뷰 컨트롤러에 연결합니다.
진행률 표시줄
스토리보드에서 뷰 중앙에 진행률 뷰를 추가합니다:
UI 핸들을 컨트롤러 프로퍼티에 연결합니다:
에서 복제 진행 메서드를 사용하여 진행률 뷰의 진행 상황 속성을 적절히 사용합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let active = pull?.status == .Active let completed = pull?.status == .Stopped println("Status : \(pull?.status.rawValue)") println("Changes Count: \(pull?.changesCount)") println("Completed Count: \(pull?.completedChangesCount)") println("======") if pull!.changesCount > 0 { let number = Float(pull!.completedChangesCount) / Float(pull!.changesCount) self.progressView.progress = number } |
앱을 실행하면 문서가 복제되면서 진행률 표시줄이 업데이트되는 것을 볼 수 있습니다:
실행할 수 있습니다. sync.js 스크립트를 몇 번 반복하여 더 많은 문서를 가져올 수 있습니다. Places API는 하나의 응답으로 최대 20개의 결과를 반환합니다.
결론
이 튜토리얼에서는 동기화 게이트웨이에서 데이터를 문서 및 첨부 파일로 가져오기 위해 Google Places API와 NodeJS 프로그램을 사용하도록 프로젝트를 설정하는 방법을 배웠습니다. 또한 NS알림 API에 등록하려면 iOS에서 kCBL복제변경알림 알림을 클릭하고 iOS 애플리케이션에서 진행률 보기를 업데이트합니다.
