Há algumas semanas, eu tinha escreveu um guia que demonstrou como salvar imagens capturadas no Couchbase Lite como dados de cadeia de caracteres codificados em base64 em um aplicativo móvel NativeScript com Angular. Embora o guia anterior funcionasse para Android e iOS, os dados eram localizados no dispositivo. E se você quisesse sincronizar as imagens entre dispositivos ou até mesmo armazená-las na nuvem?
Veremos como usar o Couchbase Mobile para sincronizar dados de imagem entre dispositivos e plataformas em um NativeScript com o aplicativo Angular.
Em seguida, você deve observar que esta é a segunda parte da série. Isso significa que, se você ainda não tiver seguido o tutorial anterior e obtido uma versão funcional do projeto, deverá deixar este tutorial de lado. Comece com o guia, Salvar imagens capturadas em um aplicativo Angular NativeScript no CouchbaseEm seguida, trabalhe para sincronizar as imagens.
A imagem animada acima lhe dará uma ideia aproximada do que estamos buscando. Queremos poder sincronizar as imagens salvas entre o Android e o iOS usando o Sync Gateway e, opcionalmente, o Couchbase Server.
Os requisitos
Os pré-requisitos para este guia são semelhantes aos encontrados no anterior. Você precisará do seguinte:
- CLI do NativeScript
- Android SDK para Android ou Xcode para iOS
- Gateway de sincronização do Couchbase
- Servidor Couchbase (opcional)
Você perceberá que o Sync Gateway e, opcionalmente, o Couchbase Server são os novos requisitos deste guia da série. Precisaremos deles para que a sincronização de fato ocorra. Se você não estiver familiarizado, o Sync Gateway é o middleware de sincronização e o Couchbase Server é o servidor de banco de dados remoto.
Configuração do Sync Gateway para replicação
Para usar o Sync Gateway, precisaremos definir uma configuração sobre como a sincronização ocorre e coisas do gênero.
Criar um sync-gateway-config.json em algum lugar de seu computador que contenha as seguintes informações:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "log":["CRUD+", "REST+", "Changes+", "Attach+"], "bancos de dados": { "image-database": { "servidor": "walrus:data", "sync":` function (doc) { channel (doc.channels); } `, "users": { "GUEST": { "disabled": falso, "admin_channels": ["*"] } } } } } |
No arquivo de configuração acima, estamos salvando tudo em morsa:dados que é uma solução na memória em vez de persistir no Couchbase Server. O banco de dados remoto é chamado de banco de dados de imagensmas não precisa corresponder ao que temos em nosso código de aplicativo móvel.
Para simplificar, todos poderão ler e gravar dados no mesmo canal que um convidado.
Para executar o Sync Gateway, execute o seguinte:
|
1 |
/path/to/sync_gateway /path/to/sync-gateway-config.json |
Você deve ser capaz de acessar o Sync Gateway pelo navegador da Web em http://localhost:4984/_admin/ e visualizar tudo o que está sendo sincronizado, geralmente chamado de replicado.
Adição da lógica para sincronizar dados de imagem
O código real envolvido para fazer a replicação funcionar em nosso aplicativo NativeScript com Angular é mínimo.
Abra o arquivo app/app.component.ts e inclua o seguinte código TypeScript:
|
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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import { Component, OnInit, NgZone } 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 privado: qualquer um; pushReplicator privado: any; pullReplicator privado: any; public images: Array; public constructor(private zone: NgZone) { 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.pushReplicator = this.database.createPushReplication("http://192.168.57.1:4984/image-database"); this.pullReplicator = this.database.createPullReplication("http://192.168.57.1:4984/image-database"); this.pushReplicator.setContinuous(true); this.pullReplicator.setContinuous(true); this.images = []; } público ngOnInit() { this.pushReplicator.start(); this.pullReplicator.start(); this.database.addDatabaseChangeListener(changes => { for(let i = 0; i < changes.length; i++) { this.zone.run(() => { let image = ImageSource.fromBase64(this.database.getDocument(changes[i].getDocumentId()).image); this.images.push(image); }); } }); 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() }); }, error => { console.dump(error); }); } } |
O código acima inclui tudo da primeira parte da série, bem como desta parte da série. Vamos detalhar apenas o que foi adicionado em relação à replicação.
No construtor definimos para onde vamos enviar os dados e de onde vamos extrair os dados.
|
1 2 3 4 |
this.pushReplicator = this.database.createPushReplication("http://192.168.57.1:4984/image-database"); this.pullReplicator = this.database.createPullReplication("http://192.168.57.1:4984/image-database"); this.pushReplicator.setContinuous(true); this.pullReplicator.setContinuous(true); |
Isso deve ser feito continuamente enquanto o aplicativo estiver aberto.
Certifique-se de usar o host ou o endereço IP correto para o Sync Gateway. Se você estiver usando o Genymotion, como eu, o localhost não funcionará. Você terá que descobrir os endereços IP corretos.
No ngOnInit iniciamos o processo de replicação e configuramos um ouvinte.
|
1 2 3 4 5 6 7 8 9 10 |
this.pushReplicator.start(); this.pullReplicator.start(); this.database.addDatabaseChangeListener(changes => { for(let i = 0; i < changes.length; i++) { this.zone.run(() => { let image = ImageSource.fromBase64(this.database.getDocument(changes[i].getDocumentId()).image); this.images.push(image); }); } }); |
Sempre que houver uma alteração no banco de dados, faremos um loop entre elas e carregaremos os dados base64. Este exemplo é simples, portanto não há atualizações ou exclusões de imagens. Se esse fosse o caso, nosso ouvinte seria um pouco mais complexo em termos de lógica.
O motivo pelo qual estamos usando um NgZone é porque o ouvinte opera em um thread diferente. Por zoneamento, podemos pegar os dados e garantir que a interface do usuário seja atualizada corretamente.
Isso foi tudo o que tivemos de fazer para sincronizar as imagens entre o dispositivo e o servidor. Fácil, não é?
Conclusão
Você acabou de ver como sincronizar dados de imagem entre dispositivos e plataformas usando NativeScriptAngular e Couchbase. Essa foi uma continuação do tutorial anterior que escrevi chamado, Salvar imagens capturadas em um aplicativo Angular NativeScript no Couchbaseonde colocamos o aplicativo inicial em funcionamento.
Caso prefira não armazenar suas imagens no banco de dados, considere a possibilidade de criar uma API que use um armazenamento de objetos como o Minio ou o Amazon S3. Escrevi um tutorial sobre criação de uma API que salva no Minio que pode ajudar.
Para obter mais informações sobre como usar o Couchbase com Android e iOS, consulte a Portal do desenvolvedor do Couchbase.
