Displaying a Sync Progress Indicator in an iOS app

NSProgress es un objeto en Foundation que representa la finalización de algún trabajo. Ese trabajo puede ser la descarga de un archivo, la instalación de una aplicación o algo que esté haciendo tu propia aplicación.

En NSProgress existe para permitirte informar fácilmente del progreso en tu aplicación a través de varios componentes tanto para la UI como para el sistema. Con Couchbase Mobile, los datos se intercambian iniciando réplicas y con ellas vienen los eventos de cambio que pueden informarte del progreso.

En este tutorial, importará datos de la API de Google Places a Sync Gateway y los replicará en una aplicación iOS.

> https://developers.google.com/places/

Por el camino, aprenderás a:

Utilice la API REST de Sync Gateway Admin para importar datos de una fuente externa.
Configurar una replicación pull con el SDK de iOS.
Utilice las notificaciones de cambios de replicación para mostrar una barra de progreso en la interfaz de usuario.

Empecemos.

Primeros pasos

Para utilizar la API de Google Places en este tutorial, primero crearás un nuevo proyecto en la Consola para desarrolladores de Google y, a continuación, generarás una Server API Key.

Abre Google Developer Console y accede a tu cuenta:

> https://console.developers.google.com

Cree un nuevo proyecto denominado Explorador de la ciudad:

Una vez que el nuevo proyecto aparezca en la lista, haga clic en él y navegue hasta API y autenticación > API en el cajón de navegación izquierdo. Habilite la opción Servicio web API de Google Places.

Una vez activada, vaya a Credenciales en el cajón de navegación izquierdo, cree una nueva Clave (Clave de servidor) y copie la clave API, ya que la necesitará a lo largo de este tutorial.

En la siguiente sección, utilizará un par de bibliotecas y la API REST de Admin para sincronizar los datos de Lugares con Sync Gateway.

Pasarela de sincronización

Descargue Sync Gateway y descomprima el archivo:

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

Puede encontrar el binario de Sync Gateway en la carpeta papelera y ejemplos de archivos de configuración en la carpeta ejemplos carpeta. Copie la carpeta basic-walrus-bucket.json en la raíz del proyecto:


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

$ cp /Descargas/couchbase-sincronizar-pasarela/ejemplos/básico-morsa-cubo.json /ruta/a/proj/sincronizar-pasarela-config.json

Inicie Sync Gateway:


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

$ ~/Descargas/couchbase-sincronizar-pasarela/papelera/sincronizar_pasarela

Abra el panel de administración para supervisar los documentos guardados en Sync Gateway.

> http://localhost:4985/_admin/

En la siguiente sección, escribirá una pequeña aplicación NodeJS con los módulos RxJS y Request para importar los datos de Places a Sync Gateway.

API de lugares → Pasarela de sincronización

Antes de empezar a programar el servidor de la aplicación, comprueba que tu API Key funciona correctamente, abre la siguiente url en tu navegador, deberías ver la respuesta JSON.

> https://maps.googleapis.com/maps/api/place/textsearch/json?query=restaurants+in+London&key=API_KEY

NOTA: No olvides añadir tu API Key en la URL.

Para crear el servidor de aplicaciones que importará los datos de la API de Places a Sync Gateway, utilizará RxJS y Solicitar. El código que maneja más de un evento o cálculo asíncrono se complica rápidamente. RxJS hace que estos cálculos ciudadanos de primera clase y proporciona un modelo que permite APIs legibles y componibles para hacer frente a estos cálculos asíncronos. El módulo Request es la librería de-facto para hacer las peticiones http en NodeJS más simples que nunca. Adelante, instala las dependencias:


$ npm install request rx --save

$ npm instale solicitar rx --guardar

Copia requestRx.js del Repo de GitHub en la carpeta del proyecto. Simplemente estamos envolviendo la api Request en construcciones RxJS (flatMap, filter, subscribe...). Por ejemplo, en lugar de utilizar solicitar.obtenerutilizarás requestRx.get.

Cree un nuevo archivo llamado sync.jsrequieren el requestRx y Rx módulos. Define un par de constantes:


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

const clave_api = 'AIzaSyBGRQzQ2Sy1zgIrMrbYUknd1L25idYOoII';

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

const pasarela = http://localhost:4985/db;

NOTA: Utilizará la sintaxis de JavaScript ES 6 (más concretamente la interpolación de cadenas y las funciones de flecha), lo que hará que su programa sea más corto y legible.

A continuación, utilice la función requestRx para seguir la cadena de peticiones descrita en el diagrama.

Si se pregunta cómo utilizar las extensiones reactivas, le recomiendo encarecidamente que siga los siguientes pasos este tutorial. Le llevará un par de horas completarlo pero saldrá de él con una comprensión muy clara de las Extensiones Reactivas.

Esto puede ser mucho para asimilar, pero lo mejor es experimentar con los diferentes operadores (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. Buscar lugares

requestRx.consiga(`${url}/búsqueda de texto/json?clave=${clave_api}&consulta=restaurantes+en+londres`)

.suscríbase a((res) => {

var lugares = JSON.analizar(res.cuerpo).resultados;

var lugaresStream = Rx.Observable.fromArray(lugares);

// 2. Enviar los Lugares en bloque a Sync Gateway

requestRx({uri: `${pasarela}/_bulk_docs`, método: POST, json: {docs: lugares}})

.flatMap((docsRes) => {

var docsStream = Rx.Observable.fromArray(docsRes.cuerpo);

// Fusionar la fotoreferencia del lugar con el doc id y rev

devolver Rx.Observable.zip(lugaresStream, docsStream, (lugar, doc) => {

devolver {

id: doc.id,

rev: doc.rev,

ref: lugar.fotos[0].foto_referencia

}

});

})

.flatMap((doc) => {

// 3. Obtener la foto jpg binaria utilizando la propiedad ref (es decir, fotorreferencia)

var opciones = {

uri: `${url}/foto?clave=${clave_api}&maxwidth=400&fotorreferencia=${doc.ref}`,

codificación: null

};

devolver requestRx.consiga(opciones)

.flatMap((foto) => {

// 4. Guardar la foto como archivo adjunto en el documento correspondiente

devolver requestRx({

uri: `${pasarela}/${doc.id}/foto?rev=${doc.rev}`,

método: PUT,

cabeceras: {Tipo de contenido: imagen/jpg},

cuerpo: foto.cuerpo

})

.suscríbase a((res) => {

});

Obtener los Lugares que coinciden con la consulta restaurantes en Londres. Utilice la función de interpolación de cadenas ES 6 en la url.
En _bulk_docs es muy práctico para importar grandes conjuntos de datos a una instancia de Sync Gateway. Encontrará más información al respecto en docs.
Después de guardar el documento, guardas la foto como un archivo adjunto, primero debes obtener la imagen de la API de Lugares. Fíjate en el icono codificación se establece en null. Esto es requerido por el módulo Request para cualquier cuerpo de respuesta que no sea una cadena. Más información en la sección Solicitar documentos.
Debe indicar a Sync Gateway en qué documento (especificando el identificador del documento) y revisión de ese documento (especificando el número de revisión) desea guardar este archivo adjunto.

Para ejecutar su aplicación NodeJS escrita con la sintaxis JavaScript ES 6, puede utilizar Babel. Instálelo y ejecútelo con la función sync.js file:


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

$ npm instale babel -g

$ babel-nodo sincronizar.js

Ahora que tiene los documentos, incluidas las imágenes, almacenados en el bucket en memoria de Sync Gateway, empezará a codificar la aplicación de iOS para incluir una barra de progreso gestionada por la notificación de cambio de replicación.

Aplicación iOS

En Xcode, cree un nuevo Aplicación de vista única llamado CityExplorer:

Cierra el proyecto e instala el SDK de Couchbase Lite para iOS a través de Cocoapods:


    $ pod init
    $ pod search couchbase

$ vaina init

$ vaina busque en couchbase

Añada la dependencia al Podfile en la raíz del proyecto, luego ejecute instalar:


    $ pod install

$ vaina instale

Abrir CityExplorer.workspace esta vez y crear una cabecera puente:

Vaya a la configuración de construcción para añadir la cabecera de puente:

Abrir ViewController.swift y añadir una propiedad tire de de tipo ¿CBLReplicación?. En el viewDidLoad añada lo siguiente:


    // 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

deje director = CBLManager.sharedInstance()

// 2

deje baseDeDatosExiste = director.base de datosExisteNombre("cityexplorer")

var base de datos = director.base de datosNamed("cityexplorer", error: nil)

si baseDeDatosExiste {

base de datos?.borrarBaseDeDatos(nil)

base de datos = director.base de datosNamed("cityexplorer", error: nil)

}

deje pasarela = NSURL(cadena: "http://localhost:4984/db")!

// 3

tire de = base de datos?.createPullReplication(pasarela)

deje nctr = NSNotificationCenter.defaultCenter()

nctr.addObserver(auto, selector: "replicationProgress:", nombre: kCBLReplicationChangeNotification, objeto: tire de)

// 4

tire de?.iniciar()

Arriba están pasando un par de cosas:

Obtienes la instancia compartida del gestor.
Con la instancia del gestor, eliminas el contenido de la base de datos. Esto garantizará que la replicación se inicie desde cero cada vez que ejecutes la aplicación.
Instancie una replicación pull y regístrese como oberserver en la notificación denominada kCBLReplicationChangeNotification.
Se inicia la replicación.

Y añade el replicationProgress para registrar simplemente las propiedades changesCount y completedChangesCount:


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

func replicationProgress(notificación: NSNotificación) {

println("Los cambios cuentan \(tire de?.cuentaCambios)")

println("Completado \(tire de?.completedChangesCount)")

}

En la siguiente sección, agregarás una vista de progreso en el Storyboard, luego la conectarás al View Controller.

Barra de progreso

En el Guión gráfico, añada una Vista de progreso en el centro de la Vista:

Conecta el manejador de la interfaz de usuario a la propiedad del controlador:

En el replicationProgress actualiza el método progreso propiedad en consecuencia:


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
}

deje activo = tire de?.estado == .Activo

deje completado = tire de?.estado == .Detenido

println(" Estado : \(tire de?.estado.rawValue)")

println("Los cambios cuentan: \(tire de?.cuentaCambios)")

println("Recuento completado: \(tire de?.completedChangesCount)")

println("======")

si tire de!.cuentaCambios > 0 {

deje número = Flotador(tire de!.completedChangesCount) / Flotador(tire de!.cuentaCambios)

auto.progressVer.progreso = número

}

Ejecute la aplicación y debería ver cómo se actualiza la barra de progreso a medida que se replican los documentos:

Puede ejecutar el sync.js un par de veces para obtener más documentos. La API de Places devuelve un máximo de 20 resultados en una respuesta.

Conclusión

En este tutorial, aprendió a configurar un proyecto para utilizar la API de Google Places y un programa NodeJS para importar datos como documentos y archivos adjuntos en Sync Gateway. También utilizó la NSNotificación api en iOS para registrarse en el kCBLReplicationChangeNotification y actualiza la vista de progreso en tu aplicación iOS.

James Nocentini, Redactor técnico, Móvil, Couchbase

Comparte este artículo

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

Visualización de un indicador de progreso de sincronización en una aplicación iOS

Primeros pasos

Pasarela de sincronización

API de lugares → Pasarela de sincronización

Aplicación iOS

Barra de progreso

Conclusión

Recibe actualizaciones del blog de Couchbase en tu bandeja de entrada

Autor

Publicado por James Nocentini, Redactor técnico, Móvil, Couchbase

Deja un comentario Cancelar respuesta

¿Listo para empezar con Couchbase Capella?

Empezar a construir

Utilizar Capella gratis

Póngase en contacto