I escreveu recentemente sobre usando o Couchbase como um armazenamento de valor-chave em um aplicativo NativeScript para iOS e Android criado com o Angular. Neste exemplo, vimos como coletar informações de perfil de usuário para serem salvas ou carregadas a partir de Couchbase nos dispositivos móveis. No entanto, estávamos salvando e carregando com base em uma chave específica, e não consultando com base nas propriedades do documento.
E se você tiver documentos NoSQL em que não conhece a chave e precisa fazer consultas com base nas propriedades do documento? Neste exemplo, vamos usar o Artigo anterior para o próximo nível.
Vamos trazer nossa página única NativeScript para várias páginas, sendo que a primeira página é uma lista de perfis salvos anteriormente e a segunda página permite que você crie novos perfis. A navegação entre as páginas será feita com o Angular Router.
Os requisitos
Os requisitos entre este guia e o anterior permanecem os mesmos. Você precisará do seguinte:
- CLI do NativeScript 2.0+
- Android SDK e/ou Xcode para Mac
A CLI do NativeScript, obtida por meio do Node Package Manager (NPM), nos permitirá criar e desenvolver projetos móveis. Para criar e implantar aplicativos Android e iOS reais, você precisará do Android SDK ou do Xcode, ou de ambos.
Começando de onde paramos
Não criaremos nosso projeto do zero, mas, em vez disso, faremos referência ao tutorial anterior NativeScript com Couchbase. No entanto, muito do que você verá aqui será uma revisão.
O projeto anterior deve ser um aplicativo básico de uma página com o nativescript-couchbase plugin instalado. Precisamos transformar nossa página única em várias páginas.
Preparação de várias páginas de aplicativos para navegação
Usaremos duas páginas além do modal que criamos anteriormente. Em seu projeto, crie os seguintes arquivos e diretórios:
|
1 2 3 4 5 6 |
aplicativo/componentes/perfil-lista/ aplicativo/componentes/perfil-lista/perfil-lista.ts aplicativo/componentes/perfil-lista/perfil-lista.html aplicativo/componentes/perfil/ aplicativo/componentes/perfil/perfil.ts aplicativo/componentes/perfil/perfil.html |
Os arquivos acima representarão nossas duas páginas. Para ter sucesso com o Angular Router, precisamos criar um arquivo de roteamento que vincule esses arquivos.
Crie o seguinte em seu projeto:
|
1 |
aplicativo/aplicativo.roteamento.ts |
Embora ainda não tenhamos criado nossas classes de página, vamos nos concentrar em vinculá-las. Abra o diretório app/app.routing.ts e inclua o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
importação { Componente ProfileList } de "./components/profile-list/profile-list"; importação { ProfileComponent } de "./components/profile/profile"; exportação const Rotas de aplicativos: qualquer = [ { caminho: "", componente: Componente ProfileList }, { caminho: "profile" (perfil), componente: ProfileComponent } ]; exportação const Componentes do aplicativo: qualquer = [ Componente ProfileList, ProfileComponent ]; |
Como você pode imaginar, vamos ter um Componente ProfileList e um ProfileComponent. Quando se trata de Rotas de aplicativosA página padrão é aquela com um caminho de rota vazio. A segunda página poderá ser navegada por meio do perfil caminho.
Adicionar cada um dos componentes a uma matriz é uma conveniência para a próxima etapa.
Abra o arquivo app/app.module.ts porque precisamos configurar o roteador para usar o arquivo de roteamento que acabamos de criar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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 { NativeScriptRouterModule } de "nativescript-angular/router"; importação { ModalDialogService } de "nativescript-angular/modal-dialog"; importação { Componentes do aplicativo, Rotas de aplicativos } de "./app.routing"; importação { Componente de aplicativo } de "./app.component"; importação { Componente Modal } de "./app.modal"; @NgModule({ declarações: [Componente de aplicativo, Componente Modal, ...Componentes do aplicativo], entryComponents: [Componente Modal], bootstrap: [Componente de aplicativo], importações: [ NativeScriptModule, NativeScriptFormsModule, NativeScriptRouterModule, NativeScriptRouterModule.forRoot(Rotas de aplicativos) ], provedores: [ModalDialogService], esquemas: [NO_ERRORS_SCHEMA] }) exportação classe AppModule { } |
Observe na imagem acima que ainda temos todos os itens relacionados ao modal do tutorial anterior. Desta vez, importamos do diretório app/app.routing.ts e injetado no arquivo importações e declarações matriz do @NgModule bloco.
A página principal de nosso sistema de roteamento é a Componente de aplicativo que estávamos usando no exemplo anterior. Precisamos eliminá-la.
Abra o arquivo app/app.component.html e inclua a seguinte marcação XML:
|
1 |
Para combinar com isso, podemos remover a maior parte do código dentro do app/app.component.ts arquivo. No final, esse arquivo deve ser semelhante ao seguinte:
|
1 2 3 4 5 6 7 |
importação { Componente } de "@angular/core"; @Componente({ seletor: "my-app", templateUrl: "app.component.html", }) exportação classe Componente de aplicativo { } |
Neste ponto, podemos começar a desenvolver cada uma das páginas do nosso aplicativo. Para obter mais informações sobre roteamento usando o Angular Router, visite Artigo anterior Escrevi sobre o assunto.
Movendo o código do exemplo anterior do Couchbase NativeScript
Lembra-se de todo o código que acabei de dizer para você apagar? Eu provavelmente não deveria ter dito isso, mas, para nossa sorte, você pode copiá-lo e colá-lo no exemplo anterior ou, melhor ainda, abaixo.
Precisamos pegar o código que estava anteriormente no app/app.component.ts e app/app.component.html e movê-lo para o novo arquivo app/components/profile/profile.ts e app/components/profile/profile.html arquivos.
Abra o app/components/profile/profile.html e faça com que ele se pareça com o seguinte:
|
1 2 3 4 5 |
<rótulo classe="label" (rótulo)></rótulo> <rótulo classe="label" (rótulo)></rótulo> <botão classe="btn btn-primary w-full"></botão> |
A única coisa que mudou no exemplo acima foi que removi o botão na barra de ação que era usado para carregar dados. Agora, abra a seção app/components/profile/profile.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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
importação { Componente, ViewContainerRef } de "@angular/core"; importação { Localização } de "@angular/common"; importação { ModalDialogService } de "nativescript-angular/directives/dialogs"; importação { Couchbase } de "nativescript-couchbase"; importação { Componente Modal } de "../../app.modal"; @Componente({ seletor: "profile" (perfil), templateUrl: "./components/profile/profile.html", }) exportação classe ProfileComponent { público perfil: qualquer; privado banco de dados: qualquer; público construtor(privado modal: ModalDialogService, privado vcRef: ViewContainerRef, privado localização: Localização) { este.perfil = { foto: "~/kitten1.jpg", primeiro nome: "", sobrenome: "" } este.banco de dados = novo Couchbase("dados"); } 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"; }); } público salvar() { este.banco de dados.createDocument(este.perfil); este.localização.voltar(); } } |
Para ser justo, removi o carregar que tínhamos e incluímos o serviço Angular Location para navegar para trás na pilha de navegação. Tudo, com exceção dos caminhos, deve ser o mesmo.
Lembre-se, meu aplicativo tem imagens de avatar de gatinhos que encontrei na Internet.
Você provavelmente deveria encontrar suas próprias imagens de avatar e usá-las conforme apropriado. O ~/ representa que as imagens devem ser encontradas na seção aplicativo diretório.
Agora precisamos dar uma olhada na página a ser criada para listar os dados na tela.
Consultando perfis e adicionando-os a uma lista na interface do usuário
Nossa nova página deve, em teoria, ser mais simples do que tudo o que fizemos até agora e no guia anterior. Abra a seção app/components/profile-list/profile-list.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, OnInit } de "@angular/core"; importação { Localização } de "@angular/common"; importação { Roteador } de "@angular/router"; importação { Couchbase } de "nativescript-couchbase"; @Componente({ seletor: "profile-list" (lista de perfis), templateUrl: "./components/profile-list/profile-list.html", }) exportação classe Componente ProfileList implementa OnInit { público perfis: Matriz; privado banco de dados: qualquer; público construtor(privado roteador: Roteador, privado localização: Localização) { } público ngOnInit() { } público atualizar() { } público criar() { } } |
No exemplo acima, temos um Componente ProfileList com uma variável pública para manter todos os nossos dados vinculados à interface do usuário e uma instância privada para o nosso banco de dados Couchbase.
Precisamos ser capazes de navegar para frente na pilha de navegação e detectar a navegação para trás na pilha, portanto, injetamos o Roteador e Localização serviços no construtor método. O construtor também faz o seguinte:
|
1 2 3 4 5 6 7 |
público construtor(privado roteador: Roteador, privado localização: Localização) { este.banco de dados = novo Couchbase("dados"); este.banco de dados.createView("perfis", "1", função(documento, emissor) { emissor.emitir(documento._id, documento); }); este.perfis = []; } |
No exemplo acima construtor abrimos nosso banco de dados e criamos uma nova visualização do MapReduce. Essa visualização é muito simplista no sentido de que retornará um par de valores-chave de todos os documentos no banco de dados. Não há lógica condicional em torno do que ela retorna nesse cenário. A visualização perfis A visualização do MapReduce é a base de nossas consultas.
Para consultar essa exibição, temos o comando atualizar método:
|
1 2 3 4 5 6 7 |
público atualizar() { este.perfis = []; deixar linhas = este.banco de dados.executeQuery("perfis"); para(deixar i = 0; i < linhas.comprimento; i++) { este.perfis.empurrar(linhas[i]); } } |
Após a consulta, enviamos cada um dos resultados para nossa página pública perfis variável. Não se confunda, a variável perfis não é a mesma que a variável perfis vista.
|
1 2 3 4 5 6 |
público ngOnInit() { este.localização.assinar(() => { este.atualizar(); }); este.atualizar(); } |
O ngOnInit aciona após o construtor método. Não apenas executamos nossa consulta, mas precisamos assinar os eventos de navegação para que possamos executar a consulta ao retornar à página. Isso ocorre porque o método construtor e o ngOnInit são acionados somente no carregamento, não em eventos de navegação anteriores.
Nosso último método é o criar método:
|
1 2 3 |
público criar() { este.roteador.navegar(["profile" (perfil)]); } |
Isso será acionado quando o botão for pressionado e nos levará à segunda tela.
A interface do usuário para essa página, encontrada na seção app/components/profile-list/profile-list.htmlO resultado será parecido com o seguinte:
|
1 2 3 |
<rótulo classe="label" (rótulo)></rótulo> |
O iterará sobre cada item em nossa matriz pública e os converterá em linhas. Cada linha terá duas colunas, sendo que a primeira coluna de imagem tem uma largura de 50 e a segunda coluna é esticada para se ajustar.
Conclusão
Você acabou de ver como pegar seu valor-chave NativeScript com o aplicativo Couchbase para o próximo nível, adicionando consultas de visualização MapReduce para consultar dados com base nas propriedades do documento. Embora os dados de perfil não sejam muito úteis, e se você quisesse sincronizar o que está armazenado em Couchbase no dispositivo para outros dispositivos? Daremos uma olhada nisso na próxima vez.
