Quando se trata de aplicativos móveis, recebo um conjunto específico de perguntas: a primeira é como salvar as imagens capturadas e a segunda é como sincronizá-las entre dispositivos ou um banco de dados remoto. Como sou um grande fã de NativeScript para desenvolvimento Android e iOS, achei que seria ótimo compartilhar um dos muitos exemplos possíveis para resolver esse problema.
Veremos como capturar imagens em um aplicativo NativeScript usando Angular e salvar essas imagens capturadas no Couchbase Lite, um banco de dados incorporado no nível do dispositivo.
Em seguida, é importante observar que há muitas maneiras de salvar imagens ou qualquer outro arquivo de dados em um aplicativo móvel. Por exemplo, você pode salvá-los em um banco de dados ou no sistema de arquivos. Neste exemplo, vamos salvá-los diretamente no banco de dados, mas pesquise qual estratégia funcionará melhor para você.
Na imagem animada acima, é apresentada a capacidade de capturar imagens. As coisas são um pouco diferentes em um simulador, mas em um dispositivo a câmera será aberta. Depois de capturar uma imagem, ela será apresentada na tela e salva no Couchbase Lite como uma string formatada em base64.
Os requisitos
Não há muitos requisitos para ter sucesso com este guia. No mínimo, você precisará do seguinte:
- CLI do NativeScript
- Android SDK para Android e Xcode para iOS
Para poder criar para Android, você precisará do Android SDK e, para criar para iOS, precisará do Xcode, que está disponível apenas em computadores macOS. Para este guia específico, não é necessária nenhuma instância remota do Couchbase Server.
Criação de um novo projeto NativeScript com Angular
Com os pré-requisitos instalados e prontos para uso, precisamos criar um novo projeto em algum lugar do nosso computador.
Na CLI do NativeScript, execute o seguinte:
|
1 |
tns create photo-project --ng |
O comando acima criará um novo projeto do Angular, portanto, o --ng bandeira.
Antes de começarmos a desenvolver, precisaremos instalar o plug-in do Couchbase para o NativeScript. Isso pode ser feito executando o seguinte:
|
1 |
plugin tns add nativescript-couchbase |
Embora tecnicamente possamos começar a desenvolver o aplicativo, há mais uma questão a ser resolvida. No iOS, é necessário explicar cada uma das permissões que estão sendo usadas. Poder tirar fotos ou usar a galeria é uma solicitação de permissão, portanto, temos que explicar.
Abra o arquivo app/App_Resources/iOS/Info.plist e inclua o seguinte:
|
1 2 |
NSPhotoLibraryUsageDescription Aviso de acesso à biblioteca de fotos |
O procedimento acima evitará erros durante o tempo de compilação ou de execução. Agora podemos começar a desenvolver com segurança nosso aplicativo móvel para Android e iOS.
Desenvolvimento da lógica principal do aplicativo e da interface do usuário
Antes de começarmos a adicionar nosso próprio código, vamos eliminar vários códigos de modelo padrão que são enviados ao criar um novo projeto NativeScript com Angular.
Este será um aplicativo de página única, portanto, precisamos remover todas as rotas de navegação pré-existentes. Comece abrindo o diretório app/app.routing.ts e faça com que ele se pareça com o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 |
importar { NgModule } de "@angular/core"; importar { NativeScriptRouterModule } de "nativescript-angular/router"; importar { Routes } de "@angular/router"; const routes: Routes = []; @NgModule({ importações: [NativeScriptRouterModule.forRoot(routes)], exportações: [NativeScriptRouterModule] }) export class AppRoutingModule { } |
A única coisa que fizemos foi remover as rotas do rotas array. Tecnicamente, podemos remover esse arquivo, mas é mais fácil simplesmente remover o que não vamos usar.
Agora, abra o arquivo app/app.module.ts e faça com que o TypeScript se pareça com 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 |
importar { NgModule, NO_ERRORS_SCHEMA } de "@angular/core"; importar { NativeScriptModule } de "nativescript-angular/nativescript.module"; importar { AppRoutingModule } de "./app.routing"; importar { AppComponent } de "./app.component"; @NgModule({ bootstrap: [ Componente de aplicativo ], importações: [ NativeScriptModule, AppRoutingModule ], Declarações: [ Componente de aplicativo ], provedores: [], schemas: [ NO_ERRORS_SCHEMA ] }) export class AppModule { } |
Observe que, no exemplo acima, removemos qualquer referência aos arquivos MVC que eram rotas anteriores. Isso inclui HTML, TypeScript e o serviço Angular que foi fornecido.
Quando se trata de adicionar novo conteúdo, vamos nos concentrar primeiro na lógica do TypeScript e, em seguida, passar para a interface do usuário em HTML. Abra a seção 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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
importar { Component, OnInit } de "@angular/core"; importar { Couchbase } de "nativescript-couchbase"; import * as Camera from "camera"; importar * como ImageSource de "image-source"; @Component({ seletor: "ns-app", templateUrl: "app.component.html", }) export class AppComponent implements OnInit { banco de dados público: qualquer um; public images: Array; public constructor() { this.database = new Couchbase("image-database"); this.database.createView("images", "1", function(document, emitter) { Se (document.type && document.type == "image") { emitter.emit(document._id, document); } }); this.images = []; } público ngOnInit() { let rows = this.database.executeQuery("images"); for(let i = 0; i < rows.length; i++) { this.images.push(ImageSource.fromBase64(rows[i].image)); } } public capture() { Camera.takePicture({ width: 300, height: 300, keepAspectRatio: true, saveToGallery: false }).then(picture => { let base64 = picture.toBase64String("png", 70); this.database.createDocument({ "type" (tipo): "image", "image": base64, "timestamp": (new Date()).getTime() }); this.images.push(picture); }, error => { console.dump(error); }); } } |
Há muita coisa acontecendo no código acima, portanto, vamos detalhá-lo.
Já havíamos baixado o plug-in do Couchbase para o NativeScript, mas agora precisamos importá-lo junto com outras coisas:
|
1 2 3 |
importar { Couchbase } de "nativescript-couchbase"; import * as Camera from "camera"; importar * como ImageSource de "image-source"; |
A funcionalidade da câmera já está incluída no NativeScript, só precisamos importá-la. Quando se trata de manipular os dados da câmera, a função Fonte de imagem é o que usaremos.
Dentro do Componente de aplicativo temos duas variáveis:
|
1 2 |
banco de dados privado: qualquer um; public images: Array; |
O banco de dados manterá nossa instância aberta do Couchbase Lite e o imagens manterá todas as imagens salvas que serão apresentadas na tela.
Dentro do construtor abrimos nosso banco de dados, criamos uma visualização que poderemos consultar posteriormente e inicializamos a matriz que armazenará nossas imagens.
|
1 2 3 4 5 6 7 8 9 |
public constructor() { this.database = new Couchbase("image-database"); this.database.createView("images", "1", function(document, emitter) { Se (document.type && document.type == "image") { emitter.emit(document._id, document); } }); this.images = []; } |
A exibição que estamos criando retornará todos os documentos NoSQL que têm uma propriedade chamada tipo que é definido como imagem o que representa para nós que essa é uma das possíveis imagens a serem exibidas na tela.
Como os dados nunca devem ser carregados no construtor levamos as coisas para o método ngOnInit método:
|
1 2 3 4 5 6 |
público ngOnInit() { let rows = this.database.executeQuery("images"); for(let i = 0; i < rows.length; i++) { this.images.push(ImageSource.fromBase64(rows[i].image)); } } |
O ngOnInit é acionado após o método construtor e ele consultará a exibição que foi criada anteriormente. Cada documento salvo terá uma propriedade chamada imagem que contém dados de imagem base64. Esse modelo é baseado em nosso design.
Depois de obter os dados base64, eles são convertidos em um arquivo Fonte de imagem e adicionados à nossa matriz para serem exibidos na tela.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public capture() { Camera.takePicture({ width: 300, height: 300, keepAspectRatio: true, saveToGallery: false }).then(picture => { let base64 = picture.toBase64String("png", 70); this.database.createDocument({ "type" (tipo): "image", "image": base64, "timestamp": (new Date()).getTime() }); this.images.push(picture); }, error => { console.dump(error); }); } |
O acima captura é chamado por meio de um botão pressionado em nosso HTML. Ele iniciará a câmera com algumas configurações definidas.
Após uma captura bem-sucedida, a imagem será convertida em base64 e um documento NoSQL será criado com várias informações ao lado dos dados base64.
Não é tão ruim, certo?
Agora, queremos dar uma olhada na marcação HTML que acompanha essa lógica. Abra o arquivo app/app.component.html e inclua o seguinte:
|
1 2 3 4 5 6 |
<ActionBar title="{N} Couchbase Photos"> <ActionItem text="Capture" ios.position="right" (tap)="capture()"></ActionItem> </ActionBar> <StackLayout> <Image *ngFor="let image of images" [src]="image"></Image> </StackLayout> |
No HTML acima, temos uma barra de ação com um botão que acionará a câmera. No conteúdo principal da página, temos um loop que percorrerá cada imagem da matriz e a exibirá na tela.
Conclusão
Você acabou de ver como criar um aplicativo básico de captura de imagens com o NativeScript e Angular que salva dados de imagem diretamente em documentos NoSQL do Couchbase Lite como strings codificadas em base64. Na próxima vez, veremos como sincronizar esses dados de imagem entre dispositivos e uma instância de banco de dados remoto.
Enquanto isso, confira este outro tutorial sobre o uso do NativeScript com o Couchbase intitulado, Operações de valor-chave no Couchbase Mobile via NativeScript e Angular.
Deseja mais ajuda com o Couchbase para Android e iOS? Dê uma olhada na seção Portal do desenvolvedor do Couchbase para obter documentação e exemplos.
Obrigado pelo tutorial. Descobri que, para o NS3.0, a importação da câmera deve ser feita a partir de "nativescript-camera".
Sim, mas o lado bom é que é apenas uma pequena mudança :-)
Olá, acabei de experimentar esse código (estou tentando salvar imagens no Couchbase como Base64 e depois recuperá-las) e estou tendo o mesmo problema com esse aplicativo de amostra que estou tendo com o aplicativo que estou criando:
Na função capture(), não posso usar let base64=picture.toBase64String("png", 70) porque "A propriedade 'toBase64String' não existe no tipo 'ImageAsset'". Se eu executar a imagem por meio de ImageSource.fromAsset(picture).then(...), posso aplicar .toBase64String, mas não consigo restaurar com êxito usando .fromBase64.
Estou totalmente perdido e espero que você possa me ajudar!