I escribió recientemente sobre utilizando Couchbase como almacén de valores clave en una aplicación NativeScript iOS y Android construida con Angular. En este ejemplo vimos cómo recopilar información de perfil de usuario para guardarla o cargarla desde Couchbase en los dispositivos móviles. Sin embargo, estábamos guardando y cargando en función de una clave concreta, no consultando en función de las propiedades del documento.
¿Qué pasa si tienes documentos NoSQL de los que no conoces la clave y necesitas hacer una consulta basada en las propiedades del documento? En este ejemplo vamos a tomar el archivo artículo anterior al siguiente nivel.
Vamos a traer nuestra página única NativeScript a múltiples páginas donde la primera página es una lista de perfiles previamente guardados y la segunda página permite crear nuevos perfiles. La navegación entre las páginas se realizará con el router Angular.
Requisitos
Los requisitos entre esta guía y la anterior siguen siendo los mismos. Necesitarás lo siguiente:
- NativeScript CLI 2.0+
- Android SDK y/o Xcode para Mac
El CLI NativeScript que se obtiene a través del Node Package Manager (NPM) nos permitirá crear y construir proyectos móviles. Para construir y desplegar aplicaciones Android e iOS reales necesitarás el SDK de Android o Xcode o ambos.
Empezar desde donde lo dejamos
No vamos a construir nuestro proyecto desde cero, sino que haremos referencia al archivo tutorial anterior NativeScript con Couchbase. Sin embargo, mucho de lo que vea aquí será una revisión.
El proyecto anterior debe ser una aplicación básica de una página con el nativescript-couchbase plugin instalado. Tenemos que llevar nuestra única página en varias páginas.
Preparación de varias páginas de la aplicación para la navegación
Utilizaremos dos páginas además del modal que habíamos creado anteriormente. Dentro de su proyecto, cree los siguientes archivos y directorios:
|
1 2 3 4 5 6 |
aplicación/componentes/perfil-lista/ aplicación/componentes/perfil-lista/perfil-lista.ts aplicación/componentes/perfil-lista/perfil-lista.html aplicación/componentes/perfil/ aplicación/componentes/perfil/perfil.ts aplicación/componentes/perfil/perfil.html |
Los archivos anteriores representarán nuestras dos páginas. Para tener éxito con el Angular Router necesitamos crear un archivo de enrutamiento que vincule estos archivos.
Cree lo siguiente dentro de su proyecto:
|
1 |
aplicación/aplicación.enrutamiento.ts |
Aunque todavía no hemos creado nuestras clases de página, vamos a centrarnos en vincularlas entre sí. Abra el proyecto app/app.routing.ts e incluya lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
importar { ProfileListComponent } de "./componentes/lista-de-perfiles/lista-de-perfiles"; importar { Componente de perfil } de "./componentes/perfil/perfil"; exportar const appRoutes: cualquier = [ { ruta: "", componente: ProfileListComponent }, { ruta: "perfil", componente: Componente de perfil } ]; exportar const appComponents: cualquier = [ ProfileListComponent, Componente de perfil ]; |
Como puedes adivinar vamos a tener un ProfileListComponent y un Componente de perfil. Cuando se trata de appRoutesla página por defecto es la que tiene una ruta vacía. La segunda página será navegable a través de la ruta perfil camino.
Añadir cada uno de los componentes a un array es conveniente para el siguiente paso.
Abra el archivo app/app.module.ts porque necesitamos configurar el enrutador para que utilice el archivo de enrutamiento que acabamos de crear.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
importar { NgModule, NO_ERRORES_ESQUEMA } de "@angular/core"; importar { Módulo NativeScript } de "nativescript-angular/platform"; importar { Módulo NativeScriptForms } de "nativescript-angular/forms"; importar { NativeScriptRouterModule } de "nativescript-angular/router"; importar { ModalDialogService } de "nativescript-angular/modal-dialog"; importar { appComponents, appRoutes } de "./app.routing"; importar { AppComponent } de "./app.component"; importar { Componente modal } de "./app.modal"; @NgModule({ declaraciones: [AppComponent, Componente modal, ...appComponents], entryComponents: [Componente modal], arranque: [AppComponent], importaciones: [ Módulo NativeScript, Módulo NativeScriptForms, NativeScriptRouterModule, NativeScriptRouterModule.forRoot(appRoutes) ], proveedores: [ModalDialogService], esquemas: [NO_ERRORS_SCHEMA] }) exportar clase AppModule { } |
Observa en la imagen anterior que todavía tenemos todos los elementos relacionados con el modal del tutorial anterior. Esta vez hemos importado desde el app/app.routing.ts e inyectado en el archivo importaciones y declaraciones de la @NgModule bloque.
La página principal de nuestro sistema de enrutamiento es la página AppComponent que estábamos utilizando en el ejemplo anterior. Tenemos que borrarlo.
Abra el archivo app/app.component.html e incluya el siguiente marcado XML:
|
1 |
Para ello, podemos eliminar la mayor parte del código de la sección app/app.component.ts archivo. Al final, este archivo debería tener un aspecto similar al siguiente:
|
1 2 3 4 5 6 7 |
importar { Componente } de "@angular/core"; @Componente({ selector: "mi-app", templateUrl: "app.component.html", }) exportar clase AppComponent { } |
En este punto podemos empezar a desarrollar cada una de las páginas de nuestra aplicación. Para obtener más información sobre el enrutamiento utilizando el Angular Router, visite un artículo anterior Escribí sobre el tema.
Trasladar el código del ejemplo anterior de Couchbase NativeScript
¿Recuerdas todo el código que acabo de decirte que elimines? Probablemente no debería haberlo dicho, pero por suerte para nosotros puedes copiarlo y pegarlo desde el ejemplo anterior, o mejor aún, a continuación.
Tenemos que tomar el código que estaba previamente en el app/app.component.ts y app/app.component.html y moverlo al nuevo app/components/profile/profile.ts y app/components/perfil/profile.html archivos.
Abra el app/components/perfil/profile.html y que tenga el siguiente aspecto:
|
1 2 3 4 5 |
<etiqueta clase="etiqueta"></etiqueta> <etiqueta clase="etiqueta"></etiqueta> <botón clase="btn btn-primary w-full"></botón> |
Lo único que ha cambiado en lo anterior es que he eliminado el botón de la barra de acciones que se utilizaba para cargar los datos. Ahora abra el proyecto app/components/profile/profile.ts e incluya lo siguiente:
|
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 |
importar { Componente, ViewContainerRef } de "@angular/core"; importar { Ubicación } de "@angular/common"; importar { ModalDialogService } de "nativescript-angular/directives/dialogs"; importar { Couchbase } de "nativescript-couchbase"; importar { Componente modal } de "../../app.modal"; @Componente({ selector: "perfil", templateUrl: "./componentes/perfil/perfil.html", }) exportar clase Componente de perfil { público perfil: cualquier; privado base de datos: cualquier; público constructor(privado modal: ModalDialogService, privado vcRef: ViewContainerRef, privado ubicación: Ubicación) { este.perfil = { foto: "~/kitten1.jpg", nombre: "", apellido: "" } este.base de datos = nuevo Couchbase("datos"); } público showModal(pantalla completa: booleano) { deje opciones = { contexto: { promptMsg: "¡Elige tu avatar!" }, pantalla completa: pantalla completa, viewContainerRef: este.vcRef }; este.modal.showModal(Componente modal, opciones).entonces((res: cadena) => { este.perfil.foto = res || "~/kitten1.jpg"; }); } público guardar() { este.base de datos.crearDocumento(este.perfil); este.ubicación.volver(); } } |
Para ser justos, quité el carga que teníamos e incluimos el servicio Angular Location para navegar hacia atrás en la pila de navegación. Todo, a excepción de las rutas, debería ser igual.
Recuerda que mi aplicación tiene imágenes de avatares de gatitos que encontré en Internet.
Probablemente deberías encontrar tus propias imágenes de avatar y utilizarlas según convenga. El ~/ representa que las imágenes deben encontrarse en el proyecto de aplicación directorio.
Ahora tenemos que echar un vistazo a la página aún por crear para listar los datos en la pantalla.
Buscar perfiles y añadirlos a una lista en la interfaz de usuario
Nuestra nueva página debería ser, en teoría, 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 e incluya lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
importar { Componente, OnInit } de "@angular/core"; importar { Ubicación } de "@angular/common"; importar { Router } de "@angular/router"; importar { Couchbase } de "nativescript-couchbase"; @Componente({ selector: "lista de perfiles", templateUrl: "./components/profile-list/profile-list.html", }) exportar clase ProfileListComponent implementa OnInit { público perfiles: Matriz; privado base de datos: cualquier; público constructor(privado enrutador: Router, privado ubicación: Ubicación) { } público ngOnInit() { } público actualizar() { } público crear() { } } |
En lo anterior tenemos un ProfileListComponent con una variable pública para contener todos nuestros datos vinculados a la interfaz de usuario y una instancia privada para nuestra base de datos Couchbase.
Necesitamos ser capaces de navegar hacia delante en la pila de navegación y detectar la navegación hacia atrás en la pila, así que inyectamos el comando Router y Ubicación servicios en el constructor método. En constructor también hace lo siguiente:
|
1 2 3 4 5 6 7 |
público constructor(privado enrutador: Router, privado ubicación: Ubicación) { este.base de datos = nuevo Couchbase("datos"); este.base de datos.crearVista("perfiles", "1", función(documento, emisor) { emisor.emite(documento._id, documento); }); este.perfiles = []; } |
En el constructor abrimos nuestra base de datos y creamos una nueva vista MapReduce. Esta vista es muy simplista en el sentido de que devolverá un par clave-valor de todos los documentos de la base de datos. No hay lógica condicional en torno a lo que devuelve en este escenario. El perfiles La vista MapReduce es la base de nuestras consultas.
Para consultar esa vista, tenemos la función actualizar método:
|
1 2 3 4 5 6 7 |
público actualizar() { este.perfiles = []; deje filas = este.base de datos.executeQuery("perfiles"); para(deje i = 0; i < filas.longitud; i++) { este.perfiles.pulse(filas[i]); } } |
Tras la consulta, introducimos cada uno de los resultados en nuestra base de datos pública perfiles variable. No se confunda, la perfiles no es la misma que la variable perfiles vista.
|
1 2 3 4 5 6 |
público ngOnInit() { este.ubicación.suscríbase a(() => { este.actualizar(); }); este.actualizar(); } |
En ngOnInit se activa después del constructor método. No sólo ejecutamos nuestra consulta, sino que necesitamos suscribirnos a los eventos de navegación para poder ejecutar la consulta al volver a la página. Esto se debe a que el método constructor y el ngOnInit sólo se activan en la carga, no en los eventos de navegación hacia atrás.
Nuestro último método es el crear método:
|
1 2 3 |
público crear() { este.enrutador.navegue por(["perfil"]); } |
Esto se activará finalmente pulsando un botón y nos llevará a la segunda pantalla.
La interfaz de usuario de esta página, que se encuentra en la sección app/components/lista-de-perfiles/lista-de-perfiles.htmltendrá el siguiente aspecto:
|
1 2 3 |
<etiqueta clase="etiqueta"></etiqueta> |
En iterará sobre cada elemento de nuestro array 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 encajar.
Conclusión
Usted acaba de ver cómo tomar su clave-valor NativeScript con la aplicación Couchbase al siguiente nivel añadiendo consultas de vista MapReduce para consultar datos basados en las propiedades del documento. Mientras que los datos de perfil no hace mucho, ¿qué pasa si desea sincronizar lo que se almacena en Couchbase en el dispositivo a otros dispositivos? Lo veremos la próxima vez.
