Sou um grande fã do desenvolvimento de aplicativos móveis para Android e iOS e um fã ainda maior do uso do Angular para desenvolver esses aplicativos. Há algum tempo, escrevi sobre Usando o Couchbase em um aplicativo NativeScript bem como Usando o Couchbase em um aplicativo Angular NativeScript. Ambos eram cenários de lista de tarefas muito simples.
Vamos dar um passo atrás e analisar o que Couchbase pode fazer em seu aplicativo móvel, peça por peça. Por exemplo, o Couchbase é um banco de dados de documentos que pode ser gerenciado como chave-valor ou pelas propriedades do documento. Neste exemplo, trabalharemos com chaves e valores para salvar e carregar dados de perfil imaginários.
No exemplo acima, podemos adicionar um nome e um sobrenome e escolher em uma lista de avatares de perfil disponíveis. Ao salvar, os dados são armazenados no Couchbase e a tela é redefinida. Ao carregar, os dados são carregados por meio da chave salva anteriormente.
Os requisitos
Esse projeto tem alguns requisitos básicos para funcionar:
- NativeScript CLI 2.0+
- Android SDK e/ou Xcode
A CLI do NativeScript, que pode ser obtida por meio do Node Package Manager (NPM), é necessária para criar e desenvolver projetos. Para concluir o processo de desenvolvimento, é necessário o Android SDK ou o Xcode, dependendo da plataforma para a qual você deseja desenvolver.
Iniciando um novo projeto NativeScript com Angular
Para facilitar a compreensão, vamos criar um novo projeto NativeScript com Angular para Android e iOS. Na linha de comando, execute o seguinte:
|
1 2 3 4 |
tns create ProfileProject --ng cd ProfileProject tns platform add ios tns platform add android |
Se você não estiver usando um Mac com o Xcode instalado, só poderá criar para a plataforma Android. O iOS é exclusivo para Mac.
Este projeto usará o Couchbase, portanto, devemos instalar o pacote nativescript-couchbase plug-in. Na CLI, execute:
|
1 |
tns plugin add nativescript-couchbase |
O comando acima instalará o plug-in do Couchbase para todas as plataformas disponíveis no projeto. Neste ponto, estamos prontos para o desenvolvimento do nosso aplicativo.
Definição da lógica central do aplicativo
O projeto, embora seja de página única, terá duas partes principais da lógica do aplicativo. Haverá a lógica que aparece na página padrão e a lógica que aparece na caixa de diálogo modal. Vamos começar com a lógica que aparece na página padrão.
Abra o arquivo app/app.component.ts e inclua o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component, ViewContainerRef } from "@angular/core"; import { ModalDialogService } from "nativescript-angular/directives/dialogs"; import { Couchbase } from "nativescript-couchbase"; import { ModalComponent } from "./app.modal"; @Component({ selector: "my-app", templateUrl: "app.component.html", }) export class AppComponent { public profile: any; private database: any; public constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) { } public showModal(fullscreen: boolean) { } public save() { } public load() { } } |
No código acima, estamos importando vários componentes do Angular, o serviço modal do NativeScript, o Couchbase e a caixa de diálogo modal que será criada em breve.
Dentro do Componente de aplicativo há uma variável pública e uma privada. A variável privada banco de dados manterá a instância aberta do Couchbase e a variável pública perfil A variável conterá informações como o nome da pessoa e a foto do perfil.
O construtor injetará tanto o método ModalDialogService e ViewContainerRef a ser usado em toda a página.
|
1 2 3 4 5 6 7 8 |
public constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) { this.profile = { photo: "~/kitten1.jpg", firstname: "", lastname: "" } this.database = new Couchbase("data"); } |
Além disso, estaremos inicializando o perfil e abrindo um banco de dados chamado dados. Você pode notar ~/kitten1.jpg e ficar se perguntando o que é isso.
Nesse aplicativo, temos alguns avatares disponíveis chamados gatinho1.jpg, gatinho2.jpge gatinho3.jpg todos encontrados na seção aplicativo diretório.
Eu não tirei essas fotos, mas as encontrei na Internet. Sinta-se à vontade para usar as imagens que desejar para este exemplo.
O perfil.foto manterá o caminho para a foto que desejamos usar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public save() { let document = this.database.getDocument("mydockey"); if(document) { this.database.updateDocument("mydockey", this.profile); } else { this.database.createDocument(this.profile, 'mydockey'); } this.profile = { photo: "~/kitten1.jpg", firstname: "", lastname: "" } } |
Quando desejamos salvar no Couchbase, primeiro queremos ver se o documento já existe no Couchbase. Lembre-se de que este é um aplicativo de página única e perfil único. Se o documento existir, precisaremos atualizá-lo com o que estiver no arquivo perfil caso contrário, crie-a. Depois de salvo, podemos redefinir o formulário.
|
1 2 3 |
public load() { this.profile = this.database.getDocument("mydockey"); } |
Como sabemos o nome da chave do documento, podemos recuperar o documento quando quisermos recarregar o formulário. Os dados armazenados e os dados recuperados estão no formato JSON, o que é ótimo para aplicativos NativeScript.
Por fim, temos o showModal método:
|
1 2 3 4 5 6 7 8 9 10 |
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"; }); } |
O texto acima é uma variação de algo que encontrei no Documentação do NativeScript. Quando chamado, ele iniciará o aplicativo a ser criado em breve Componente Modal com várias opções. Quando o modal for fechado, o valor retornado será carregado na variável perfil.foto porque o valor retornado deve ser um caminho de imagem.
Agora, como criamos essa caixa de diálogo modal?
Criação de uma caixa de diálogo modal para seleção de imagens
Criar um modal é praticamente o mesmo que criar uma página NativeScript. No entanto, é necessário fazer outra inicialização para provar que se trata de um modal e não de uma página.
Criar um arquivo app/app.modal.ts e inclua o seguinte 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 |
import { Component, Input } from "@angular/core"; import { ModalDialogParams } from "nativescript-angular/directives/dialogs"; @Component({ selector: "my-modal", template: ` <StackLayout margin="24" horizontalAlignment="center" verticalAlignment="center"> <Label [text]="prompt"></Label> <StackLayout orientation="horizontal" marginTop="12"> <Image src="~/kitten1.jpg" width="75" height="75" (tap)="close('~/kitten1.jpg')"></Image> <Image src="~/kitten2.jpg" width="75" height="75" (tap)="close('~/kitten2.jpg')"></Image> <Image src="~/kitten3.jpg" width="75" height="75" (tap)="close('~/kitten3.jpg')"></Image> </StackLayout> </StackLayout> `, }) export class ModalComponent { @Input() public prompt: string; constructor(private params: ModalDialogParams) { this.prompt = params.context.promptMsg; } public close(res: string) { this.params.closeCallback(res); } } |
Você notará que estou usando modelo em vez de templateUrl aqui. Isso se deve ao fato de eu ter ficado com preguiça e não querer criar outro arquivo HTML. O modelo tem três imagens e um evento de toque para cada imagem. Quando tocada, a imagem próximo será chamado, passando o valor para a página anterior.
Antes que o modal possa ser usado, ele deve ser inicializado na seção app/app.module.ts file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptModule } from "nativescript-angular/platform"; import { NativeScriptFormsModule } from "nativescript-angular/forms"; import { ModalDialogService } from "nativescript-angular/modal-dialog"; import { AppComponent } from "./app.component"; import { ModalComponent } from "./app.modal"; @NgModule({ declarations: [AppComponent, ModalComponent], entryComponents: [ModalComponent], bootstrap: [AppComponent], imports: [NativeScriptModule, NativeScriptFormsModule], providers: [ModalDialogService], schemas: [NO_ERRORS_SCHEMA] }) export class AppModule { } |
Observe que, no exemplo acima, estamos importando o ModalDialogService bem como o Componente Modal? Estamos injetando ambos no @NgModule bloco.
Agora o modal pode ser iniciado dentro do aplicativo.
Desenvolvimento da interface do usuário do aplicativo principal
Então, que tal a interface do usuário para a página padrão do aplicativo NativeScript? Abra a página app/app.component.html e inclua a seguinte marcação XML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ActionBar title="{N} Profile"> <ActionItem text="Load" ios.position="right" (tap)="load()"></ActionItem> </ActionBar> <GridLayout rows="*, *" cols="*"> <Image [src]="profile.photo" (tap)="showModal(true)" width="150" height="150" class="img-rounded" row="0" col="0"></Image> <StackLayout class="form" row="1" col="0"> <StackLayout class="input-field"> <Label text="First Name" class="label"></Label> <TextField [(ngModel)]="profile.firstname" class="input input-border"></TextField> </StackLayout> <StackLayout class="input-field"> <Label text="Last Name" class="label"></Label> <TextField [(ngModel)]="profile.lastname" class="input input-border"></TextField> </StackLayout> <StackLayout class="input-field"> <Button text="Save" (tap)="save()" class="btn btn-primary w-full"></Button> </StackLayout> </StackLayout> </GridLayout> |
No layout acima, temos uma barra de ação e o conteúdo dividido em duas linhas. A barra de ação tem um botão que, quando pressionado, chamará a função carregar em nosso código TypeScript.
O Imagem carregará a foto armazenada no caminho da tag perfil.foto variável. Quando tocada, a janela modal será aberta para que possamos escolher um novo avatar.
A segunda linha da interface do usuário tem dois campos de entrada e um botão. Os campos de entrada são vinculados usando o Angular [(ngModel)] que permitem que os dados sejam compartilhados entre o XML e o TypeScript. Quando o botão é pressionado, o salvar será acionado, salvando os dados no Couchbase.
Conclusão
Você acabou de ver como usar Couchbase como armazenamento de valores-chave em um NativeScript Aplicativo para Android e iOS criado com o Angular. Na próxima vez, veremos como salvar mais de um documento no Couchbase e consultar esses documentos, tornando-o muito mais avançado do que apenas o armazenamento de valores-chave.
[...] Enquanto isso, dê uma olhada neste outro tutorial sobre o uso do NativeScript com o Couchbase, intitulado Key-Value Operations in Couchbase Mobile via NativeScript and Angular. [...]