Displaying a Sync Progress Indicator in an iOS app

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를 사용하여 장소 데이터를 동기화 게이트웨이에 동기화합니다.

동기화 게이트웨이

동기화 게이트웨이를 다운로드하고 파일의 압축을 풉니다:

> http://www.couchbase.com/nosql-databases/downloads#Couchbase\_Mobile

동기화 게이트웨이 바이너리는 다음에서 찾을 수 있습니다. bin 폴더에 있는 구성 파일의 예와 예제 폴더로 이동합니다. 폴더를 복사합니다. basic-walrus-bucket.json 파일을 프로젝트의 루트에 추가합니다:


$ cp /Downloads/couchbase-sync-gateway/examples/basic-walrus-bucket.json /path/to/proj/sync-gateway-config.json

$ cp /다운로드/카우치베이스-동기화-게이트웨이/예제/기본-바다코끼리-버킷.json /경로/에/프로젝트/동기화-게이트웨이-구성.json

동기화 게이트웨이를 시작합니다:


$ ~/Downloads/couchbase-sync-gateway/bin/sync_gateway

$ ~/다운로드/카우치베이스-동기화-게이트웨이/bin/동기화_게이트웨이

관리 대시보드를 열어 동기화 게이트웨이에 저장된 문서를 모니터링합니다.

> http://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 요청을 그 어느 때보다 간단하게 만드는 사실상의 라이브러리입니다. 계속해서 종속 요소를 설치하세요:


$ npm install request rx --save

$ npm 설치 요청 rx --저장

복사 requestRx.js 에서 GitHub 리포지토리 를 프로젝트 폴더에 추가합니다. 요청 API를 RxJS 구조체(flatMap, filter, subscribe...)로 래핑하기만 하면 됩니다. 예를 들어 request.get를 사용할 것입니다. requestRx.get.

라는 새 파일을 만듭니다. sync.js를 사용하려면 요청Rx 그리고 Rx 모듈을 사용합니다. 몇 가지 상수를 정의합니다:


    const api_key = 'AIzaSyBGRQzQ2Sy1zgIrMrbYUknd1L25idYOoII';
    const url = 'https://maps.googleapis.com/maps/api/place';
    const gateway = 'http://localhost:4985/db';

const api_key = 'AIzaSyBGRQzQ2Sy1zgIrMrbYUknd1L25idYOoII';

const URL = 'https://maps.googleapis.com/maps/api/place';

const 게이트웨이 = 'http://localhost:4985/db';

참고: 프로그램을 더 짧고 가독성 있게 만드는 JavaScript ES 6 구문(보다 구체적으로 문자열 보간 및 화살표 함수)을 사용하게 됩니다.

그런 다음 요청Rx 메서드를 사용하여 다이어그램에 설명된 요청 체인을 따르도록 합니다.

반응형 확장 기능을 사용하는 방법이 궁금하다면 다음을 따르는 것이 좋습니다. 이 튜토리얼. 완료하는 데 몇 시간이 걸리지만 반응형 확장에 대해 매우 명확하게 이해하게 될 것입니다.

받아들이는 것이 많을 수 있지만 다양한 연산자(flatMap, zip, subscribe, fromArray)를 실험해 보는 것이 가장 좋습니다:

// 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) => {
        });
  });

// 1. 장소 검색

요청Rx.get(`${URL}/텍스트 검색/json?키=${api_key}&쿼리=레스토랑+in+런던`)

.구독((res) => {

var 장소 = JSON.parse(res.body).결과;

var 장소스트림 = Rx.관찰 가능.fromArray(장소);

// 동기화 게이트웨이로 장소를 일괄 전송합니다.

요청Rx({uri: `${게이트웨이}/_bulk_docs`, 메서드: 'POST', json: {문서: 장소}})

.플랫맵((docsRes) => {

var 문서 스트림 = Rx.관찰 가능.fromArray(docsRes.body);

// 장소의 사진 참조를 문서 ID 및 rev와 병합합니다.

반환 Rx.관찰 가능.zip(장소스트림, 문서 스트림, (장소, doc) => {

반환 {

id: doc.id,

rev: doc.rev,

ref: 장소.사진[0].사진_참조

}

});

})

.플랫맵((doc) => {

// 3. 참조 속성(즉, 사진 참조)을 사용하여 바이너리 jpg 사진을 가져옵니다.

var 옵션 = {

uri: `${URL}/사진?키=${api_key}&최대 너비=400&사진 참조=${doc.ref}`,

인코딩: null

};

반환 요청Rx.get(옵션)

.플랫맵((사진) => {

// 4. 해당 문서에 사진을 첨부파일로 저장합니다.

반환 요청Rx({

uri: `${게이트웨이}/${doc.id}/사진?rev=${doc.rev}`,

메서드: 'PUT',

헤더: {'콘텐츠 유형': 'image/jpg'},

body: 사진.body

})

.구독((res) => {

});

검색어와 일치하는 장소 가져오기 런던의 레스토랑. URL에서 ES 6 문자열 보간 기능을 사용합니다.
그리고 _bulk_docs 엔드포인트는 대용량 데이터 세트를 동기화 게이트웨이 인스턴스로 가져오는 데 매우 편리합니다. 이에 대한 자세한 내용은 문서.
문서를 저장한 후 사진을 첨부파일로 저장하려면 먼저 Places API에서 이미지를 가져와야 합니다. 그리고 인코딩 속성이 null. 문자열이 아닌 모든 응답 본문에 대해 요청 모듈에 필요합니다. 이에 대한 자세한 내용은 문서 요청.
동기화 게이트웨이에 이 첨부파일을 저장할 문서(문서 ID를 지정하여)와 해당 문서의 수정본(수정본 번호를 지정하여)을 알려야 합니다.

JavaScript ES 6 구문으로 작성된 NodeJS 앱을 실행하려면 다음을 사용할 수 있습니다. 바벨. 설치한 후 sync.js file:


    $ npm install babel -g
    $ babel-node sync.js

$ npm 설치 babel -g

$ babel-노드 동기화.js

이제 동기화 게이트웨이의 인메모리 버킷에 이미지를 포함한 문서가 저장되었으므로 복제 변경 알림으로 관리되는 진행률 표시줄을 포함하도록 iOS 앱 코딩을 시작해야 합니다.

iOS 애플리케이션

Xcode에서 새 단일 보기 애플리케이션 호출 시티 익스플로러:

프로젝트를 닫고 Cocoapods를 통해 Couchbase Lite iOS SDK를 설치합니다:


    $ pod init
    $ pod search couchbase

$ pod init

$ pod 검색 카우치베이스

에 종속성을 추가합니다. 포드파일 를 프로젝트 루트에 설치한 다음 설치를 실행합니다:


    $ pod install

$ pod 설치

열기 CityExplorer.workspace 를 클릭하고 브리징 헤더를 만듭니다:

빌드 설정으로 이동하여 브리징 헤더를 추가합니다:

열기 ViewController.swift 를 클릭하고 속성을 추가합니다. pull 유형 CBLReplication?. 에서 viewDidLoad 메서드에 다음을 추가합니다:


    // 1
    let manager = CBLManager.sharedInstance()
    // 2
    let databaseExists = manager.databaseExistsNamed("cityexplorer")
    var database = manager.databaseNamed("cityexplorer", error: nil)
    if databaseExists {
        database?.deleteDatabase(nil)
        database = manager.databaseNamed("cityexplorer", error: nil)
    }
    
    let gateway = NSURL(string: "http://localhost:4984/db")!
    
    // 3
    pull = database?.createPullReplication(gateway)
    
    let nctr = NSNotificationCenter.defaultCenter()
    nctr.addObserver(self, selector: "replicationProgress:", name: kCBLReplicationChangeNotification, object: pull)
    
    // 4
    pull?.start()

// 1

let 관리자 = CBLManager.공유 인스턴스()

// 2

let 데이터베이스 존재 = 관리자.데이터베이스 존재 이름("cityexplorer")

var 데이터베이스 = 관리자.데이터베이스 이름("cityexplorer", 오류: nil)

만약 데이터베이스 존재 {

데이터베이스?.데이터베이스 삭제(nil)

데이터베이스 = 관리자.데이터베이스 이름("cityexplorer", 오류: nil)

}

let 게이트웨이 = NSURL(문자열: "http://localhost:4984/db")!

// 3

pull = 데이터베이스?.createPullReplication(게이트웨이)

let nctr = NS알림센터.defaultCenter()

nctr.추가옵저버(self, 선택기: "replicationProgress:", 이름: kCBL복제변경알림, 객체: pull)

// 4

pull?.시작()

위에서 몇 가지 일이 일어나고 있습니다:

관리자의 공유 인스턴스를 얻게 됩니다.
관리자 인스턴스를 사용하면 데이터베이스의 콘텐츠를 삭제합니다. 이렇게 하면 앱을 실행할 때마다 복제가 처음부터 시작됩니다.
풀 복제를 인스턴스화하고 다음과 같은 알림에 옵저버로 등록합니다. kCBL복제변경알림.
복제를 시작합니다.

그리고 복제 진행 메서드를 사용하여 변경 횟수 및 완료 횟수 속성을 간단히 기록할 수 있습니다:


    func replicationProgress(notification: NSNotification) {
        println("Changes count \(pull?.changesCount)")
        println("Completed \(pull?.completedChangesCount)")
    }

func 복제 진행(알림: NS알림) {

println("변경 사항이 중요합니다. \(pull?.변경 횟수)")

println("완료 \(pull?.완료된 변경 횟수)")

}

다음 섹션에서는 스토리보드에 진행률 보기를 추가한 다음 뷰 컨트롤러에 연결합니다.

진행률 표시줄

스토리보드에서 뷰 중앙에 진행률 뷰를 추가합니다:

UI 핸들을 컨트롤러 프로퍼티에 연결합니다:

에서 복제 진행 메서드를 사용하여 진행률 뷰의 진행 상황 속성을 적절히 사용합니다:


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
}

let 활성 = pull?.상태 == .활성

let 완료 = pull?.상태 == .중지됨

println("상태 : \(pull?.상태.rawValue)")

println("변경 사항이 중요합니다: \(pull?.변경 횟수)")

println("완료 횟수: \(pull?.완료된 변경 횟수)")

println("======")

만약 pull!.변경 횟수 > 0 {

let 숫자 = Float(pull!.완료된 변경 횟수) / Float(pull!.변경 횟수)

self.진행 상황 보기.진행 상황 = 숫자

}

앱을 실행하면 문서가 복제되면서 진행률 표시줄이 업데이트되는 것을 볼 수 있습니다:

실행할 수 있습니다. sync.js 스크립트를 몇 번 반복하여 더 많은 문서를 가져올 수 있습니다. Places API는 하나의 응답으로 최대 20개의 결과를 반환합니다.

결론

이 튜토리얼에서는 동기화 게이트웨이에서 데이터를 문서 및 첨부 파일로 가져오기 위해 Google Places API와 NodeJS 프로그램을 사용하도록 프로젝트를 설정하는 방법을 배웠습니다. 또한 NS알림 API에 등록하려면 iOS에서 kCBL복제변경알림 알림을 클릭하고 iOS 애플리케이션에서 진행률 보기를 업데이트합니다.

제임스 노센티니, 모바일 테크니컬 라이터, Couchbase

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

모든 게시물

iOS 앱에서 동기화 진행률 표시기 표시하기

시작하기

동기화 게이트웨이

장소 API → 동기화 게이트웨이

iOS 애플리케이션

진행률 표시줄

결론

작성자

게시자 제임스 노센티니, 모바일 테크니컬 라이터, Couchbase

댓글 남기기 응답 취소