Consulta de documentos de Couchbase en una aplicación móvil de NativeScript Angular

I escribió recientemente sobre usando Couchbase como un almacén de clave-valor en una aplicación de NativeScript para iOS y Android construida con Angular. En este ejemplo vimos cómo recopilar información de perfil de usuario para ser guardada o cargada desde Couchbase en los dispositivos móviles. Sin embargo, estábamos guardando y cargando basándonos en una clave en particular, no consultando según las propiedades del documento.

¿Qué pasa si tienes documentos NoSQL en los que no conoces la clave y necesitas hacer consultas basadas en las propiedades del documento? En este ejemplo vamos a tomar el artículo anterior al siguiente nivel.

Vamos a traer nuestra página única NativeScript aplicación de múltiples páginas donde la primera página es una lista de perfiles guardados anteriormente y la segunda página permite crear nuevos perfiles. La navegación entre las páginas se realizará con el enrutador de Angular.

Los Requisitos

Los requisitos entre esta guía y la anterior siguen siendo los mismos. Necesitará lo siguiente:

• CLI de NativeScript 2.0+
• SDK de Android y / o Xcode para Mac

La CLI de NativeScript, que se obtiene a través del Administrador de Paquetes de Node (NPM), nos permitirá crear y compilar proyectos móviles. Para compilar y desplegar aplicaciones reales de Android e iOS, necesitará el SDK de Android, Xcode o ambos.

Continuando desde donde lo dejamos

No construiremos nuestro proyecto desde cero, sino que haremos referencia al tutorial anterior de NativeScript con Couchbase. Sin embargo, mucho de lo que ves aquí será un repaso.

El proyecto anterior debería ser una aplicación básica de una sola página con el nativescript-couchbase complemento instalado. Necesitamos convertir nuestra página única en múltiples páginas.

Preparación de múltiples páginas de aplicaciones para la navegación

Usaremos dos páginas además del modal que habíamos creado anteriormente. Dentro de su proyecto, cree los siguientes archivos y directorios:

app/components/profile-list/
app/components/profile-list/profile-list.ts
app/components/profile-list/profile-list.html
app/components/profile/
app/components/profile/profile.ts
app/components/profile/profile.html

Los archivos anteriores representarán nuestras dos páginas. Para tener éxito con el enrutador de Angular, necesitamos crear un archivo de enrutamiento que vincule estos archivos.

Crea lo siguiente dentro de tu proyecto:

app/app.routing.ts

Aunque todavía no hemos creado nuestras clases de página, nos centraremos en enlazarlas. Abra el app/app.routing.ts archivo e incluir lo siguiente:

import { ProfileListComponent } from "./components/profile-list/profile-list";
import { ProfileComponent } from "./components/profile/profile";

export const appRoutes: any = [
    { path: "", component: ProfileListComponent },
    { path: "profile", component: ProfileComponent }
];

export const appComponents: any = [
    ProfileListComponent,
    ProfileComponent
];

Como te podrás imaginar, vamos a tener un ListaDePerfiles y un ComponenteDePerfil. Cuando se trata de rutasDeAplicación, la página predeterminada es la que tiene una ruta vacía. La segunda página será navegable a través de la perfil ruta.

Agregar cada uno de los componentes a una matriz es una conveniencia para el siguiente paso.

Abrir el del proyecto app/app.module.ts archivo porque necesitamos configurar el enrutador para que use el archivo de enrutamiento que acabamos de crear.

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { ModalDialogService } from "nativescript-angular/modal-dialog";

import { appComponents, appRoutes } from "./app.routing";
import { AppComponent } from "./app.component";
import { ModalComponent } from "./app.modal";

@NgModule({
    declarations: [AppComponent, ModalComponent, ...appComponents],
    entryComponents: [ModalComponent],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
    providers: [ModalDialogService],
    schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

Observe arriba que todavía tenemos todos los elementos relacionados con el modal del tutorial anterior. Esta vez hemos importado desde el app/app.routing.ts archivo e inyectado en el importaciones y declaraciones matriz de la @NgModule bloquear.

La página principal de nuestro sistema de enrutamiento es la AppComponent clase que estábamos usando en el ejemplo anterior. Necesitamos borrarla.

Abrir el del proyecto app/app.component.html archivar e incluir el siguiente marcado XML:

Para acompañar esto, podemos eliminar la mayor parte del código dentro del app/app.component.ts archivo. Este archivo debe verse similar al siguiente al final:

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent { }

En este punto podemos comenzar a desarrollar cada una de nuestras páginas de aplicación. Para obtener más información sobre el enrutamiento utilizando Angular Router, visite a artículo anterior Escribí sobre el tema.

Moviendo el código del ejemplo anterior de Couchbase NativeScript

¿Recuerdas todo el código que acabo de decirte que borraras? Probablemente no debí decir eso, pero por suerte para nosotros puedes copiarlo y pegarlo del ejemplo anterior, o mejor aún, de abajo.

Necesitamos tomar el código que estaba previamente en el app/app.component.ts y app/app.component.html archivos y muévelo al nuevo app/components/profile/profile.ts y app/components/profile/profile.html archivos.

Abrir app/components/profile/profile.html archivar y hacer que se vea de la siguiente manera:

Lo único que ha cambiado en lo anterior es que eliminé el botón de la barra de acciones que se usaba para cargar datos. Ahora abra el app/components/profile/profile.ts archivo e incluir lo siguiente:

import { Component, ViewContainerRef } from "@angular/core";
import { Location } from "@angular/common";
import { ModalDialogService } from "nativescript-angular/directives/dialogs";
import { Couchbase } from "nativescript-couchbase";
import { ModalComponent } from "../../app.modal";

@Component({
    selector: "profile",
    templateUrl: "./components/profile/profile.html",
})
export class ProfileComponent {

    public profile: any;
    private database: any;

    public constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef, private location: Location) {
        this.profile = {
            photo: "~/kitten1.jpg",
            firstname: "",
            lastname: ""
        }
        this.database = new Couchbase("data");
    }

    public showModal(fullscreen: boolean) {
        let options = {
            context: { promptMsg: "Pick your avatar!" },
            fullscreen: fullscreen,
            viewContainerRef: this.vcRef
        };
        this.modal.showModal(ModalComponent, options).then((res: string) => {
            this.profile.photo = res || "~/kitten1.jpg";
        });
    }

    public save() {
        this.database.createDocument(this.profile);
        this.location.back();
    }

}

Para ser justos, quité el cargar método que teníamos e incluía el servicio Location de Angular para navegar hacia atrás en la pila de navegación. Todo, con la excepción de las rutas, debería ser igual.

Recuerda, mi aplicación tiene imágenes de avatar de gatitos que encontré en internet.

Probablemente deberías buscar tus propias imágenes de avatar y usarlas según corresponda. ~/ representa que las imágenes deben encontrarse en el proyecto aplicación directorio.

Ahora necesitamos echar un vistazo a la página aún no creada para listar datos en la pantalla.

Consultar perfiles y agregarlos a una lista en la interfaz de usuario

Nuestra nueva página debería, en teoría, ser más sencilla que todo lo que hemos hecho hasta ahora y en la guía anterior. Abra el proyecto app/components/profile-list/profile-list.ts archivo e incluir lo siguiente:

import { Component, OnInit } from "@angular/core";
import { Location } from "@angular/common";
import { Router } from "@angular/router";
import { Couchbase } from "nativescript-couchbase";

@Component({
    selector: "profile-list",
    templateUrl: "./components/profile-list/profile-list.html",
})
export class ProfileListComponent implements OnInit {

    public profiles: Array;
    private database: any;

    public constructor(private router: Router, private location: Location) { }

    public ngOnInit() { }

    public refresh() { }

    public create() { }

}

En lo anterior tenemos un ListaDePerfiles clase con una variable pública para contener todos nuestros datos vinculados a la interfaz de usuario y una instancia privada a nuestra base de datos Couchbase.

Necesitamos poder navegar hacia adelante en la pila de navegación y detectar la navegación hacia atrás en la pila, por lo que inyectamos el Enrutador y Ubicación servicios en el constructor método. El constructor el método también hace lo siguiente:

public constructor(private router: Router, private location: Location) {
    this.database = new Couchbase("data");
    this.database.createView("profiles", "1", function(document, emitter) {
        emitter.emit(document._id, document);
    });
    this.profiles = [];
}

En el anterior constructor método abrimos nuestra base de datos y creamos una nueva vista de MapReduce. Esta vista es muy simplista en el sentido de que devolverá un par clave-valor de todos los documentos en la base de datos. No hay lógica condicional sobre lo que devuelve en este escenario. El perfiles La vista MapReduce es la base de nuestras consultas.

Para consultar esa vista, tenemos el Actualizar método:

public refresh() {
    this.profiles = [];
    let rows = this.database.executeQuery("profiles");
    for(let i = 0; i < rows.length; i++) {
        this.profiles.push(rows[i]);
    }
}

Después de consultar, enviamos cada uno de los resultados a nuestro público perfiles variable. No te confundas, el perfiles la variable no es la misma que la perfiles Ver.

public ngOnInit() {
    this.location.subscribe(() => {
        this.refresh();
    });
    this.refresh();
}

El ngOnInit se activa después del constructor método. No solo ejecutamos nuestra consulta, sino que necesitamos suscribirnos a los eventos de navegación para poder ejecutar la consulta al regresar a la página. Esto se debe a que constructor y el ngOnInit los métodos solo se activan al cargar, no en los eventos de navegación hacia atrás.

Nuestro último método es el crear método:

public create() {
    this.router.navigate(["profile"]);
}

Eventualmente, esto se activará al presionar un botón y nos llevará a la segunda pantalla.

La interfaz de usuario de esta página, que se encuentra en el app/components/profile-list/profile-list.html, se verá de la siguiente manera:

El iterará sobre cada elemento de nuestro arreglo público y los convertirá en filas. Cada fila será de dos columnas donde la primera columna de imagen tiene un ancho de 50 y la segunda columna se estira para ajustarse.

Conclusión

Acabas de ver cómo tomar tu clave-valor NativeScript con Couchbase aplicación al siguiente nivel agregando consultas de vista MapReduce para consultar datos basados en las propiedades del documento. Si bien los datos del perfil no hacen mucho, ¿qué pasaría si quisiera sincronizar lo que está almacenado en Couchbase ¿en el dispositivo a otros dispositivos? Lo veremos la próxima vez.