Soy un gran fan del desarrollo de aplicaciones móviles para Android e iOS y un fan aún mayor del uso de Angular para desarrollar esas aplicaciones. Hace un tiempo escribí sobre Uso de Couchbase en una aplicación NativeScript así como Uso de Couchbase en una aplicación NativeScript Angular. Ambos eran escenarios muy sencillos de la lista de cosas por hacer.
Vamos a dar un paso atrás y desglosar lo que Couchbase puede hacer en su aplicación móvil pieza por pieza. Por ejemplo, Couchbase es una base de datos de documentos que puede ser gestionada como clave-valor o por las propiedades del documento. En este ejemplo vamos a trabajar con claves y valores para guardar y cargar datos de un perfil imaginario.
En el ejemplo anterior podemos añadir un nombre y un apellido y elegir entre una lista de avatares de perfil disponibles. Al guardar, los datos se almacenan en Couchbase, y la pantalla se reinicia. Al cargar, los datos se cargan a través de la clave previamente guardada.
Requisitos
Este proyecto tiene unos requisitos básicos para funcionar:
- NativeScript CLI 2.0+
- Android SDK y/o Xcode
La CLI NativeScript, obtenible a través del Node Package Manager (NPM) es necesaria para crear y construir proyectos. Para completar el proceso de construcción, se requiere el SDK de Android o Xcode, dependiendo de la plataforma para la que desea construir.
Iniciar un nuevo proyecto NativeScript con Angular
Para mantener las cosas fáciles de entender, vamos a crear un nuevo proyecto NativeScript con Angular para Android y iOS. Desde la línea de comandos, ejecuta lo siguiente:
|
1 2 3 4 |
tns crear PerfilProyecto --ng cd PerfilProyecto tns plataforma añada ios tns plataforma añada android |
Si no usas un Mac con Xcode instalado, sólo podrás crear para la plataforma Android. iOS es cosa sólo de Mac.
Este proyecto utilizará Couchbase, por lo que debemos instalar el módulo nativescript-couchbase plugin. Desde la CLI, ejecute:
|
1 |
tns plugin añada nativescript-couchbase |
El comando anterior instalará el plugin de Couchbase para cualquier plataforma disponible en el proyecto. En este punto estamos listos para el desarrollo de nuestra aplicación.
Definición de la lógica central de la aplicación
El proyecto, aunque de una sola página, tendrá dos piezas centrales de lógica de aplicación. Estará la lógica que aparece en la página por defecto y la lógica que aparece en el diálogo modal. Vamos a empezar con la lógica que aparece en la página por defecto.
Abra el archivo app/app.component.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, ViewContainerRef } de "@angular/core"; importar { ModalDialogService } de "nativescript-angular/directives/dialogs"; importar { Couchbase } de "nativescript-couchbase"; importar { Componente modal } de "./app.modal"; @Componente({ selector: "mi-app", templateUrl: "app.component.html", }) exportar clase AppComponent { público perfil: cualquier; privado base de datos: cualquier; público constructor(privado modal: ModalDialogService, privado vcRef: ViewContainerRef) { } público showModal(pantalla completa: booleano) { } público guardar() { } público carga() { } } |
En el código anterior estamos importando varios componentes Angular, el servicio modal NativeScript, Couchbase, y el diálogo modal que pronto será creado.
Dentro del AppComponent hay una variable pública y una privada. La variable privada base de datos contendrá la instancia abierta de Couchbase y la variable pública perfil variable contendrá información como el nombre de la persona y su foto de perfil.
En constructor inyectará tanto el método ModalDialogService y ViewContainerRef que se utilizarán en toda la página.
|
1 2 3 4 5 6 7 8 |
público constructor(privado modal: ModalDialogService, privado vcRef: ViewContainerRef) { este.perfil = { foto: "~/kitten1.jpg", nombre: "", apellido: "" } este.base de datos = nuevo Couchbase("datos"); } |
Además, inicializaremos el perfil y abriendo una base de datos llamada datos. Usted puede notar ~/gatito1.jpg y preguntarse qué es.
En esta aplicación tenemos a nuestra disposición unos avatares llamados gatito1.jpg, gatito2.jpgy gatito3.jpg todo ello dentro del proyecto aplicación directorio.
Yo no hice estas fotos, sino que las encontré en Internet. Siéntete libre de usar las imágenes que quieras para este ejemplo.
En foto.perfil contendrá la ruta a la foto que deseamos utilizar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
público guardar() { deje documento = este.base de datos.getDocument("mydockey"); si(documento) { este.base de datos.actualizarDocumento("mydockey", este.perfil); } si no { este.base de datos.crearDocumento(este.perfil, 'mydockey); } este.perfil = { foto: "~/kitten1.jpg", nombre: "", apellido: "" } } |
Cuando queremos guardar en Couchbase, primero queremos ver si el documento ya existe en Couchbase. Recuerda que esta es una aplicación de una sola página y un solo perfil. Si el documento existe necesitamos actualizar el documento con lo que haya en el archivo perfil de lo contrario lo crearemos. Una vez guardado podemos reiniciar el formulario.
|
1 2 3 |
público carga() { este.perfil = este.base de datos.getDocument("mydockey"); } |
Como conocemos el nombre de la clave del documento, podemos recuperar el documento cuando queramos recargar el formulario. Tanto los datos almacenados como los recuperados están en formato JSON, lo que es genial para las aplicaciones NativeScript.
Por último, tenemos el showModal método:
|
1 2 3 4 5 6 7 8 9 10 |
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"; }); } |
Lo anterior es una variación de algo que encontré en el Documentación de NativeScript. Cuando se llame, lanzará la aplicación que pronto se creará Componente modal con varias opciones. Cuando se cierre el modal, el valor devuelto se cargará en el archivo foto.perfil porque el valor devuelto debería ser una ruta de imagen.
Ahora, ¿cómo creamos ese diálogo modal?
Creación de un cuadro de diálogo modal para la selección de imágenes
Crear un modal es prácticamente lo mismo que crear una página NativeScript. Sin embargo, hay que hacer otros bootstrapping para demostrar que se trata de un modal y no de una página.
Crear un archivo app/app.modal.ts e incluya el siguiente código:
|
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 |
importar { Componente, Entrada } de "@angular/core"; importar { ModalDialogParams } de "nativescript-angular/directives/dialogs"; @Componente({ selector: "mi-modal", plantilla: ` <StackLayout margen="24" horizontalAlignment="centro" verticalAlignment="centro"> <Etiqueta [texto]="prompt"></Etiqueta> <StackLayout orientación="horizontal" marginTop="12"> <Imagen src="~/kitten1.jpg" anchura="75" altura="75" (pulse)="close('~/gatito1.jpg')"></Imagen> <Imagen src="~/kitten2.jpg" anchura="75" altura="75" (pulse)="close('~/gatito2.jpg')"></Imagen> <Imagen src="~/kitten3.jpg" anchura="75" altura="75" (pulse)="close('~/gatito3.jpg')"></Imagen> </StackLayout> </StackLayout> `, }) exportar clase Componente modal { @Entrada() público consulte: cadena; constructor(privado parámetros: ModalDialogParams) { este.consulte = parámetros.contexto.promptMsg; } público cerrar(res: cadena) { este.parámetros.closeCallback(res); } } |
Notarás que estoy usando plantilla en lugar de templateUrl aquí. Es porque me dio pereza y no quise crear otro archivo HTML. La plantilla tiene tres imágenes y un evento tap para cada imagen. Cuando se toca, el cerrar pasando el valor a la página anterior.
Antes de poder utilizar el modal, es necesario arrancarlo en el directorio del proyecto app/app.module.ts file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 { ModalDialogService } de "nativescript-angular/modal-dialog"; importar { AppComponent } de "./app.component"; importar { Componente modal } de "./app.modal"; @NgModule({ declaraciones: [AppComponent, Componente modal], entryComponents: [Componente modal], arranque: [AppComponent], importaciones: [Módulo NativeScript, Módulo NativeScriptForms], proveedores: [ModalDialogService], esquemas: [NO_ERRORS_SCHEMA] }) exportar clase AppModule { } |
Obsérvese que estamos importando el archivo ModalDialogService así como el Componente modal? Estamos inyectando ambos en el @NgModule bloque.
Ahora el modal puede ser lanzado dentro de la aplicación.
Desarrollo de la interfaz de usuario de la aplicación principal
¿Qué tal la interfaz de usuario para la página de la aplicación NativeScript por defecto? Abra el proyecto app/app.component.html e incluya el siguiente marcado XML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ActionBar título="{N} Perfil"> <Elemento de acción texto="Cargar" ios.posición="derecha" (pulse)="load()"></Elemento de acción> </ActionBar> <GridLayout filas="*, *" cols="*"> <Imagen [src]="foto.perfil" (pulse)="showModal(true)" anchura="150" altura="150" clase="img-rounded" fila="0" col="0"></Imagen> <StackLayout clase="formulario" fila="1" col="0"> <StackLayout clase="campo de entrada"> <Etiqueta texto="Nombre" clase="etiqueta"></Etiqueta> <Campo de texto [(ngModel)]="perfil.nombre" clase="entrada entrada-borde"></Campo de texto> </StackLayout> <StackLayout clase="campo de entrada"> <Etiqueta texto="Apellido" clase="etiqueta"></Etiqueta> <Campo de texto [(ngModel)]="perfil.apellido" clase="entrada entrada-borde"></Campo de texto> </StackLayout> <StackLayout clase="campo de entrada"> <Botón texto="Guardar" (pulse)="save()" clase="btn btn-primary w-full"></Botón> </StackLayout> </StackLayout> </GridLayout> |
En el diseño anterior tenemos una barra de acciones y el contenido dividido en dos filas. La barra de acciones tiene un botón que, al pulsarlo, llamará al comando carga en nuestro código TypeScript.
En Imagen cargará la foto almacenada en la ruta de la etiqueta foto.perfil variable. Al pulsarla, se abrirá un modal que nos permitirá elegir un nuevo avatar.
La segunda fila de la interfaz de usuario tiene dos campos de entrada y un botón. Los campos de entrada se vinculan mediante el método Angular [(ngModel)] que permiten compartir datos entre el XML y TypeScript. Cuando se pulsa el botón, la etiqueta guardar guardará los datos en Couchbase.
Conclusión
Acaba de ver cómo utilizar Couchbase como almacenamiento clave-valor dentro de un NativeScript Aplicación para Android e iOS construida con Angular. La próxima vez veremos cómo guardar más de un documento en Couchbase y consultar por esos documentos haciéndolo mucho más potente que un simple almacenamiento clave-valor.
[...] Mientras tanto, echa un vistazo a este otro tutorial sobre el uso de NativeScript con Couchbase titulado, Key-Value Operations in Couchbase Mobile via NativeScript and Angular. [...]