Atualizações de localização em tempo real com MongoDB Stitch, Change Streams e Mapbox
Avalie esse Artigo
Observação: este artigo discute o Stitch. Stitch agora é MongoDB Realm. Todas as mesmas funcionalidades e funcionalidades, agora com um novo nome. Saiba mais aqui. Atualizaremos este artigo no devido tempo.
Quando se trata de aplicativos web modernos, as interações geralmente precisam ser feitas em tempo real. Isso significa que, em vez de verificar periodicamente as alterações, assistir ou ouvir as mudanças geralmente faz mais sentido.
Veja o exemplo de rastrear algo em um mapa. Quando se trata de remessas de pacotes, rastreamento de dispositivos ou qualquer outra coisa em que você precise saber a localização em tempo real, é ótimo observar essas mudanças na localização. Imagine precisar saber onde está sua frota para poder despachá-la para um incidente próximo?
Quando se trata do MongoDB, a observação de alterações pode ser feita por meio de change stream. Esses change stream podem ser usados em qualquer um dos drivers, incluindo aplicativos de front-end com o MongoDB Stitch.
Neste tutorial, vamos aproveitar os change streams doMongoDB Stitch . Quando os dados de localização em nossos documentos NoSQL mudarem, atualizaremos as informações em um mapa interativo desenvolvido pela Mapbox.
Veja a seguinte imagem animada como exemplo:
Em vez de criar um dispositivo de IoT para rastrear e enviar dados de GPS, vamos simular a experiência alterando diretamente nossos documentos no MongoDB. Quando as operações de atualização são concluídas, o aplicativo front-end com o mapa interativo está observando essas mudanças e respondendo adequadamente.
Para ter sucesso com este exemplo, você precisará ter algumas coisas prontas para Go antes:
- Um cluster do MongoDB Atlas
- Um aplicativo MongoDB Stitch
- Uma conta Mapbox.
Para este exemplo, os dados existirão no MongoDB Atlas. Como estamos planejando interagir com nossos dados usando um aplicativo front-end, usaremos o MongoDB Stitch. Um aplicativo Stitch deve ser criado dentro do MongoDB Cloud e conectado ao MongoDB Atlas cluster antes de explorar este tutorial.
Mapbox será usado como nosso mapa interativo. Como o Mapbox é um serviço, você precisará ter criado uma conta e ter acesso ao seu token de acesso.
Na imagem dinâmica, estou usando o plug-in Code do MongoDB Visual Studio para interagir com os documentos na minha collection. Você pode fazer o mesmo ou usar outra ferramenta, como o MongoDB Compass, a MongoDB CLI ou o explorador de dados do Atlas para fazer o trabalho.
Como estamos planejando apenas mover um marcador em um mapa, o modelo de dados que usamos não precisa ser extravagante. Para este exemplo, o seguinte é mais do que aceitável:
No exemplo acima, a array de coordenadas tem o primeiro item representando a longitude e o segundo item representando a latitude. Estamos incluindo um nome de usuário para mostrar que vamos observar alterações com base em um campo de documento específico. Em um aplicativo polido, todos os usuários provavelmente não estariam atentos às alterações em todos os documentos. Em vez disso, eles provavelmente estariam atentos a alterações de documentos que pertencem a eles.
Embora pudéssemos estabelecer regras de autorização para que os usuários acessem determinados documentos, isso está fora do escopo deste exemplo. Em vez disso, vamos zombar disso.
Agora vamos construir nosso aplicativo voltado para o cliente que consiste em Mapbox, algum HTML e JavaScript básicos e MongoDB Stitch.
Vamos começar adicionando o seguinte código boilerplate:
O código acima nos configura incluindo os SDKs Mapbox e MongoDB Stitch. Quando se trata de consultar o MongoDB e interagir com o mapa, vamos fazer isso a partir das marcações
<script> .Dentro das tags
<script>, vamos começar adicionando o seguinte:As linhas de código acima são úteis para a inicialização de nossos serviços. Você vai querer trocar a ID do aplicativo pela ID real do aplicativo do Stitch e o token de acesso do Mapbox pelo token de acesso real do Mapbox. Ambos podem ser encontrados dentro de cada um dos painéis de serviços.
Para este exemplo, presumirei que você esteja usando um banco de dados delocalização_services no MongoDB Atlas e uma collection derastreamento nesse banco de dados.
A variável
currentLocationMarkerrepresentará nosso marcador em constante mudança que se move pelo mapa à medida que novos dados chegam do change stream do MongoDB.Dentro das mesmas marcações
<script>, podemos inicializar o mapa para exibição:Como os blocos de mapa que compõem o mapa vêm de um serviço, precisamos esperar até que o mapa esteja pronto para começar a interagir com ele. Podemos usar o eventoMapbox
loadpara nos informar que o mapa está pronto:Dentro do evento
load, estamos fazendo a autenticação anônima com o MongoDB Stitch. Lembre-se de que poderíamos facilmente usar um método de autenticação mais forte e ter regras de autorização, mas para este exemplo isso está fora do escopo.Depois de autenticados no Stitch, executamos uma operação
findOne com base no campo simulado username em nosso documento. Os únicos dados que nos importam são as coordenadas, mas queremos garantir que elas venham do campousernamecorreto.Com as informações das coordenadas de latitude e longitude em mãos, podemos atualizar a posição do marcador.
Até agora, estamos apenas definindo o marcador para a última posição conhecida. Isso se deve ao fato de que, quando começarmos a assistir com um fluxo de alterações, não receberemos um documento inicial. É por isso que estamos fazendo o
findOne primeiro.Isso nos leva ao fluxo de mudança:
Para esse change stream específico, estamos observando apenas documentos em que o campo
username corresponda. Em um exemplo mais polido e realista, você pode usar isso para observar apenas seus próprios documentos. Estamos simulando isso codificando o valor.Quando os documentos com o campo
username passam por algum tipo de alteração no Atlas, o local do marcador é atualizado. Isso é feito sem que tenhamos que consultar constantemente atualizações com base em um cronômetro.Você acabou de ver como usar change streams em um aplicativo voltado para o cliente usando o MongoDB Stitch SDK. Para tornar nosso exemplo mais chamativo, optamos por um cenário de rastreamento de localização, enquanto que, quando as localizações de latitude e longitude mudam no banco de dados, as posições são atualizadas em tempo real em um mapa desenvolvido pela Mapbox.
Se você quiser experimentar o MongoDB Atlas e o MongoDB Stitch, há uma camada totalmente GRÁTIS disponível por meio do MongoDB Cloud.
Quando se trata de dados de localização e MongoDB, há muito mais que você pode fazer. Se você quiser aprender a criar e gerenciar geofencing, confira meu tutorial anterior intituladoGeofencing de localização com MongoDB, Stitch e Mapbox.