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 criar PerfilProjeto --ng cd PerfilProjeto tns plataforma adicionar ios tns plataforma adicionar androide |
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 plug-in adicionar 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 |
importação { Componente, ViewContainerRef } de "@angular/core"; importação { ModalDialogService } de "nativescript-angular/directives/dialogs"; importação { Couchbase } de "nativescript-couchbase"; importação { Componente Modal } de "./app.modal"; @Componente({ seletor: "my-app", templateUrl: "app.component.html", }) exportação classe Componente de aplicativo { público perfil: qualquer; privado banco de dados: qualquer; público construtor(privado modal: ModalDialogService, privado vcRef: ViewContainerRef) { } público showModal(tela cheia: booleano) { } público salvar() { } público carregar() { } } |
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 |
público construtor(privado modal: ModalDialogService, privado vcRef: ViewContainerRef) { este.perfil = { foto: "~/kitten1.jpg", primeiro nome: "", sobrenome: "" } este.banco de dados = novo Couchbase("dados"); } |
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 |
público salvar() { deixar documento = este.banco de dados.getDocument("mydockey"); se(documento) { este.banco de dados.updateDocument("mydockey", este.perfil); } mais { este.banco de dados.createDocument(este.perfil, 'mydockey'); } este.perfil = { foto: "~/kitten1.jpg", primeiro nome: "", sobrenome: "" } } |
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 |
público carregar() { este.perfil = este.banco de dados.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 |
público showModal(tela cheia: booleano) { deixar opções = { contexto: { promptMsg: "Escolha seu avatar!" }, tela cheia: tela cheia, viewContainerRef: este.vcRef }; este.modal.showModal(Componente Modal, opções).então((res: string) => { este.perfil.foto = 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 |
importação { Componente, Entrada } de "@angular/core"; importação { ModalDialogParams } de "nativescript-angular/directives/dialogs"; @Componente({ seletor: "my-modal", modelo: ` <Layout de pilha margem="24" horizontalAlignment="center" (centro) verticalAlignment="center" (centro)> <Rótulo [texto]="prompt"></Rótulo> <Layout de pilha orientação="horizontal" marginTop="12"> <Imagem src="~/kitten1.jpg" largura="75" altura="75" (toque)="close('~/kitten1.jpg')"></Imagem> <Imagem src="~/kitten2.jpg" largura="75" altura="75" (toque)="close('~/kitten2.jpg')"></Imagem> <Imagem src="~/kitten3.jpg" largura="75" altura="75" (toque)="close('~/kitten3.jpg')"></Imagem> </Layout de pilha> </Layout de pilha> `, }) exportação classe Componente Modal { @Entrada() público imediato: string; construtor(privado parâmetros: ModalDialogParams) { este.imediato = parâmetros.contexto.promptMsg; } público próximo(res: string) { este.parâmetros.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 |
importação { NgModule, NÃO_ERROS_ESQUEMA } de "@angular/core"; importação { NativeScriptModule } de "nativescript-angular/platform"; importação { NativeScriptFormsModule } de "nativescript-angular/forms"; importação { ModalDialogService } de "nativescript-angular/modal-dialog"; importação { Componente de aplicativo } de "./app.component"; importação { Componente Modal } de "./app.modal"; @NgModule({ declarações: [Componente de aplicativo, Componente Modal], entryComponents: [Componente Modal], bootstrap: [Componente de aplicativo], importações: [NativeScriptModule, NativeScriptFormsModule], provedores: [ModalDialogService], esquemas: [NO_ERRORS_SCHEMA] }) exportação classe 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 |
<Barra de ação título="{N} Profile"> <ActionItem texto="Carregar" ios.posição="direito" (toque)="load()"></ActionItem> </Barra de ação> <GridLayout linhas="*, *" cols="*"> <Imagem [src]="profile.photo" (toque)="showModal(true)" largura="150" altura="150" classe="img-rounded" fila="0" col="0"></Imagem> <Layout de pilha classe="formulário" fila="1" col="0"> <Layout de pilha classe="input-field" (campo de entrada)> <Rótulo texto="Primeiro nome" classe="label" (rótulo)></Rótulo> <TextField [(ngModel)]="profile.firstname" classe="input input-border"></TextField> </Layout de pilha> <Layout de pilha classe="input-field" (campo de entrada)> <Rótulo texto="Sobrenome" classe="label" (rótulo)></Rótulo> <TextField [(ngModel)]="profile.lastname" classe="input input-border"></TextField> </Layout de pilha> <Layout de pilha classe="input-field" (campo de entrada)> <Botão texto="Salvar" (toque)="save()" classe="btn btn-primary w-full"></Botão> </Layout de pilha> </Layout de pilha> </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. [...]