Desenvolver um sistema de gerenciamento de estoque usando MongoDB Atlas
Avalie esse Tutorial
No cenário competitivo do varejo, ter o estoque certo no lugar certo na hora certa é crucial. Um estoque insuficiente quando e onde for necessário pode criar clientes insatisfeitos. No entanto, um grande estoque pode aumentar os custos e os riscos associados ao seu armazenamento. Empresas de todos os tamanhos têm dificuldades com o gerenciamento de estoque. Soluções como uma visão única do inventário, análises em tempo real e arquiteturas orientadas por eventos podem ajudar seus negócios a superar esses desafios e levar seu gerenciamento de inventário a um novo patamar. Ao final deste guia, você terá o gerenciamento de inventário instalado e funcionando, capaz de todas as soluções mencionadas acima.
Orientaremos você pelo processo de configuração e uso do MongoDB Atlas como backend para seu aplicativoNext.js, uma estrutura poderosa para criar aplicativos web modernos com o React.
A arquitetura que estamos prestes a configurar está representada no diagrama abaixo:
Isso resultará em uma solução de gerenciamento de estoque de várias lojas capaz de navegar com eficiência pelo catálogo de produtos, receber alertas e automatizar os fluxos de trabalho de reabastecimento, mantendo o controle do inventário por meio de análises em tempo real. Confira o resultado final aqui.
Vamos começar!
Antes de começar a trabalhar com este projeto, certifique-se de ter os seguintes pré-requisitos configurados em seu ambiente de desenvolvimento:
- Git (versão 2.39 ou superior): este projeto utiliza o Git para controle de versão. Certifique-se de ter o Git instalado em seu sistema. Você pode baixar e instalar a versão mais recente do Git no site oficial: Downloads do Git.
- Node.js (versão 20 ou superior) e npm (versão 9.6 ou superior): o projeto depende do ambiente de tempo de execução do Node.js e do npm (Node Package Manager) para gerenciar dependências e executar scripts. Você precisa ter os dois instalados em sua máquina. Você pode baixar o Node.js no site oficial: Downloads do Node.js. Após instalar o Node.js, o npm estará disponível por padrão.
- jq (versão 1.6 ou superior): jq é um processador JSON de linha de comando leve e flexível. Vamos usá-lo para filtrar e formatar algumas saídas de comando para melhor identificar os valores em que estamos interessados. Visite a página oficial Download jq para obter a versão mais recente.
- mongorestore (versão 100.9.4 ou superior): a ferramentamongorestore carrega dados de um despejo de banco de dados binário. O diretório dedespejo no Github inclui um MongoDB database de demonstração com collection, visualizações e índices pré-carregados para que você entre em operação rapidamente. Essa ferramenta faz parte do pacoteDatabase Tools . Siga o Guia de Instalação de Ferramentas de Banco de Dados para instalar o mongorestore. Quando terminar a instalação, execute mongorestore --version em seu terminal para verificar se a ferramenta está pronta para uso.
- App Services CLI (versão 1.3.1 ou superior): o App Services CLI (appservices) permite a você gerenciar seus aplicativos programaticamente. Nós o usaremos para acelerar a configuração do backend do aplicativo usando o modelo fornecido no diretórioapp_services no repositório do Github . App Services CLI está disponível em npm. Para instalar o CLI no seu sistema, verifique se o Node.jsestá instalado e execute o seguinte comando no shell: npm install -g atlas-app-services-cli.
- MongoDB Atlas cluster (M0 ou superior): este projeto utiliza um MongoDB Atlas cluster para gerenciar o banco de dados. Você deve ter uma conta MongoDB Atlas e um cluster mínimo de camada grátis configurado. Se você não tiver uma conta, poderá se inscrever gratuitamente em MongoDB Atlas. Depois de ter uma conta, siga estas etapas para configurar um cluster mínimo de camada grátis ou siga o guia de Introdução :
- Faça login na sua conta do MongoDB Atlas.
- Crie um novo projeto ou utilize um existente e clique em "Create a new database. "
- Escolha a opção de camada grátis (M0).
- Você pode escolher o provedor de nuvem de sua preferência, mas recomendamos usar o mesmo provedor e região para o cluster e a hospedagem do aplicativo para melhorar o desempenho.
- Configure as configurações do cluster de acordo com suas preferências e clique em "finish and close " no canto inferior direito.
Após configurar o MongoDB Atlas cluster, localize seu cluster recém-criado, clique no botão "Conectar" e selecione a seção "Compass". Copie a string de conexão fornecida. Deve se parecer com algo assim:
Observação: você precisará da connection string para configurar suas variáveis de ambiente posteriormente (
MONGODB_URI).Agora é hora de clonar o código-fonte do aplicativo de demonstração do GitHub para sua máquina local:
- Abra seu terminal ou prompt de comando.
- Navegue até o diretório de sua preferência onde você deseja armazenar o projeto usando o comando cd. Por exemplo:
- Quando estiver no diretório desejado, use o comando
git clonepara clonar o repositório. Copie a URL do repositório da página principal do repositório GitHub: - Depois de executar o comando
git clone, um novo diretório com o nome do repositório será criado no diretório escolhido. Para navegar até o repositório clonado, use o comando cd:
O banco de dados contém:
- Cinco coleções
- Produtos: O banco de dados de amostras contém produtos 17 correspondentes a camisetas de cores diferentes. Cada produto tem cinco variantes que representam cinco tamanhos diferentes, do XS ao XL. Essas variantes são armazenadas como uma matriz incorporada dentro do produto. Cada variante terá um SKU diferente e, portanto, seu próprio nível de estoque. O estoque é armazenado no item (
items.stock) e no nível do produto (total_stock_sum). - Transações: esta collection estará vazia inicialmente. As transações serão geradas usando o aplicativo e podem ser do tipo entrada ou saída. As transações de saída resultam em uma diminuição no estoque do produto, como uma venda. Por outro lado, as transações de entrada resultam em um aumento do estoque de produtos, como um pedido de estoque.
- Locais: Esta collection armazena detalhes de cada um dos locais onde queremos manter o controle do estoque de produtos. Para fins deste guia, teremos apenas duas lojas para demonstrar um cenário de várias lojas, mas isso pode ser ampliado para milhares de locais. Armazéns e outros locais intermediários também podem ser incluídos. Neste caso, assumimos um único depósito e, portanto, não precisamos incluir um registro de local para ele.
- Usuários: Nosso aplicativo terá três usuários: dois gerentes de loja e um gerente de área. Os gerentes de loja serão responsáveis pelo estoque de cada uma das lojas. Ambas as lojas fazem parte da mesma área, e o gerente de área terá uma visão geral do estoque em todas as lojas atribuídas à área.
- Contadores: essa support collection acompanhará o número de documentos na collection de transações para que um número de incremento automático possa ser atribuído a cada transação. Dessa forma, além do campo ID padrão, podemos ter um identificador de transação legível por humanos.
- Uma visão:
- Visualização da área do produto: essa visualização é usada pelo gerente de área para ter uma visão geral do estoque na área. Usando o aggregation pipeline, os níveis de estoque de produtos e itens são agrupados para todos os locais na mesma área.
- Um índice:
- O número de transações pode crescer rapidamente à medida que usamos o aplicativo. Para melhorar o desempenho, é uma boa prática definir índices que possam ser aproveitados por queries comuns. Nesse caso, as transações mais recentes geralmente são mais relevantes e, portanto, são exibidas primeiro. Também costumamos filtrá-los por tipo – entrada/saída – e produto. Esses três campos —
placement_timestamp, tipo eproduct.name— fazem parte de um índice composto que nos ajudarão a melhorar o tempo de recuperação da transação.
Para replicar o banco de dados de amostra em seu MongoDB Atlas cluster, execute o seguinte comando em seu terminal:
Certifique-se de substituir
<your-connection-string> por sua string de conexão do MongoDB Atlas. Se você já seguiu as etapas de configuração inicial, deve ter obtido essa string de conexão. Certifique-se de que o URI inclua o nome de usuário, a senha e os detalhes do cluster.Depois de executar esses comandos, você pode verificar a restauração bem-sucedida do banco de dados de demonstração verificando a última linha da saída do comando, que deve exibir os documentos "22 restaurados com êxito. " Eles correspondem aos produtos 17 , três usuários e dois locais mencionados anteriormente.
Observação: você precisará do nome do banco de dados para configurar suas variáveis de ambiente posteriormente (
MONGODB_DATABASE_NAME). Se o nome do banco de dados não tiver sido especificado, o nome padrão será inventory_management_demo.Atlas Application Services são serviços de backend totalmente gerenciados e APIs que o ajudam a criar aplicativos, integrar serviços e conectar-se aos dados do Atlas com mais rapidez.
O serviço integrado de Atlas Device Sync - Device Sync - permitirá alertas de estoque baixo em tempo real. Os gatilhos e funções podem executar lógica de aplicativo e banco de dados sem servidor em resposta a esses eventos para emitir automaticamente pedidos de substituição. E, usando a Atlas Data API e HTTPS endpoints, garantimos uma integração perfeita e segura com o restante dos componentes em nossa solução de gerenciamento de inventário.
Verifique como o estoque é reposto automaticamente quando ocorre um evento de estoque baixo.
Siga estas etapas para configurar o Atlas App Services:
- Primeiro, vamos verificar se a configuração do App Services está correta. Se você estiver criando esse aplicativo em um cluster existente que não seja chamado
Cluster0, navegue até o arquivo app_services/data_sources/mongodb-atlas/config.json em seu repositório clonado e edite o campo clusterName, como"clusterName": "<your-cluster-name>". - Em seguida, você precisará gerar seu par de chaves API para autenticar suas chamadas CLI. Navegue até o MongoDB Cloud Access Manager, clique no botão "Criar chave de API" e selecione o nível de permissão
Project Owner. Para uma camada adicional de segurança, você pode adicionar seu endereço IP atual à entrada da lista de acesso. - Autentique seu usuário CLI executando o comando abaixo em seu terminal. Certifique-se de substituir as chaves de API públicas e privadas pelas que acabamos de gerar na etapa anterior.
- Importe o aplicativo executando o seguinte comando. Lembre-se de substituir
<your-app-name>pelo seu nome preferido.Você será solicitado a configurar as opções do aplicativo. Configure-os de acordo com suas necessidades. Se você não tiver certeza de quais opções escolher, as opções padrão geralmente são uma boa maneira de começar! Por exemplo, esta é a configuração que usei.Depois que o aplicativo for criado com sucesso, você será solicitado a confirmar algumas alterações. Essas alterações carregarão as funções, triggers, pontos de conexão HTTP e outros parâmetros de configuração que nosso sistema de gerenciamento de inventário usará.Depois de alguns segundos, você verá uma mensagem de sucesso como “Successfully pushed app up:<your-app-id>”. Anote o ID do aplicativo obtido. - Além do ID do aplicativo, nosso front end também precisará do URL de base para enviar solicitações HTTP ao back end. Execute o comando abaixo em seu terminal para obtê-lo. Lembre-se de substituir
<your-app-id>por seu próprio valor. A ferramenta jq nos ajudará a obter o campo e o formato apropriados. Anote o URI obtido. - Finalmente, nossas chamadas para o backend precisarão ser autenticadas. Por esse motivo, criaremos uma chave de API que será usada pelo lado do servidor do nosso sistema de gerenciamento de inventário para gerar um token de acesso. É somente esse token de acesso que será passado para o lado do cliente do sistema para autenticar as chamadas para o back-end.
Importante: essa chave de API não é a mesma que a chave usada para fazer login na
appservices CLI.Novamente, antes de executar o comando, lembre-se de substituir o espaço reservado
<your-app-id>.Após alguns segundos, você deverá ver a mensagem "Successfully created API Key, " seguida por um objeto JSON. Copie o conteúdo do campo
key e armazene-o em um local seguro. Lembre-se de que, se você perder essa chave, precisará criar uma nova.Observação: você precisará do ID do aplicativo, do URI base do Atlas App Services e da chave de API para configurar suas variáveis de ambiente posteriormente (
REALM_APP_ID, APP_SERVICES_URI, API_KEY).Siga estas etapas para configurar índices de pesquisa para pesquisa de texto completo e facetas de filtro:
- Navegue até a seção "Data Services" no Atlas. Selecione seu cluster e clique em "Atlas Search", localizado ao lado de "collection".
- Se você estiver na camada M0, poderá criar dois índices de pesquisa para a collection de produtos. Isso permitirá que você simplesmente pesquise em toda a collection de produtos. No entanto, se você tiver um nível acima de M0, poderá criar índices de pesquisa adicionais. Isso será útil se você quiser pesquisar e filtrar não apenas em seu catálogo de produtos, mas também em seus registros de transações, como pedidos de vendas e reabastecimento.
- Vamos começar criando os índices para a pesquisa de texto completo:
- Clique em "Criar índice de pesquisa".
- Você pode optar por usar o editor visual ou JSON. Selecione "Editor JSON" e clique em "Avançar".
- Deixe o nome do índice como
default. - Selecione o banco de dados recém-criado e escolha a produtos collection. Deixaremos a definição de índice padrão, que deve ser parecida com a que está abaixo.5. Clique em "Next" e, na tela seguinte, confirme clicando em "Create Search Index." 6. Após alguns instantes, seu índice estará pronto para uso. Enquanto espera, você pode criar o outro índice de pesquisa para a collection detransações. Você precisa repetir o mesmo processo, mas altere a collection selecionada no menu "Database and Collection" ao lado do JSON Editor.
Importante: O nome do índice (padrão) deve ser o mesmo para que o aplicativo funcione corretamente.
- Agora, vamos criar os índices necessários para as facetas do filtro. Observe que esse processo é um pouco diferente da criação de índices de pesquisa padrão:
- Clique em "Criar índice" novamente, selecione o Editor JSON e clique em "Avançar".
- Dê um nome a este índice
facets. - Selecione seu banco de dados e a collection deprodutos. Para a definição do índice, cole o código abaixo.
Definição do índice de facetas para produtos
Clique em "Next" e confirme clicando em "Create Search Index." O processo de indexação levará algum tempo. Você pode criar o índice detransações enquanto aguarda a conclusão da indexação. Para fazer isso, basta repetir o processo, mas altere a coleção selecionada e a definição do índice pela definição abaixo:
Definição de índice de facets para transações
Importante: o nome do índice (
facets) deve ser o mesmo para que o aplicativo possa funcionar corretamente.Ao configurar esses índices de pesquisa e facetas de filtro, seu aplicativo ganhará recursos avançados de pesquisa e filtragem, tornando-o mais fácil de usar e eficiente no gerenciamento de dados de inventário.
Aprimore os recursos de visualização e análise do seu aplicativo com o Atlas Charts. Siga estas etapas para configurar dois painéis - um para informações sobre produtos e outro para análises gerais:
- Navegue até a seção "Atlas Charts" localizada ao lado de "Atlas App Services".
- Vamos começar criando o dashboard do produto:
- Se esta é a primeira vez que você usa o MongoDB Atlas Charts, clique em “Chart builder.” Em seguida, selecione o projeto relevante, o banco de dados e a collection.
- Se você já usou o Atlas Charts (ou seja, você não é um usuário iniciante), clique em "Adicionar painel" no canto superior direito. Nomeie o painel e adicione uma descrição opcional. Escolha um nome que reflita explicitamente a finalidade do dashboard. Você não precisa se preocupar com os gráficos no painel por enquanto. Você os configurará depois que o aplicativo estiver pronto para uso.
- Volte ao menu Dashboards (Painéis), clique nos três pontos no canto superior direito do painel recém-criado e selecione "Embed."
- Marque a opção "Habilitar acesso não autenticado". Na seção " Campos de filtro permitidos ", edite os campos e selecione " Permitir todos os campos nas fontes de dados usadas neste painel. " Escolha o método de incorporação por meio do SDK do JavaScript e copie o URL base " " e o ID do painel ". " Clique em “Close.”
- Repita o mesmo processo para o painel geral. Selecione os produtos novamente, pois atualizaremos isso assim que o aplicativo gerar dados. Observe que o URL base " " será o mesmo para os dois painéis, mas o “dashboard ID” será diferente, portanto, anote-o.
Observação: você precisará da URL base e dos IDs do painel para configurar suas variáveis de ambiente posteriormente (
CHARTS_EMBED_SDK_BASEURL, DASHBOARD_ID_PRODUCT, DASHBOARD_ID_GENERAL).A configuração do Atlas Charts fornecerá painéis visualmente chamativos e perspicazes para monitorar as informações e análises gerais do produto, aprimorando seu processo de tomada de decisão e melhorando a eficiência do seu sistema de gerenciamento de estoque.
Copie o arquivo
env.local.example neste diretório para .env.local (que será ignorado pelo Git), conforme mostrado abaixo:Agora, abra este arquivo no editor de texto de sua preferência e atualize cada variável em .env.local.
Lembra de todas as anotações que você fez anteriormente? Agarre-os porque você os usará agora! Além disso, lembre-se de remover todos os espaços após o sinal de igual.
MONGODB_URI— Esta é a sua connection string do MongoDB para o MongoDB Atlas. Você pode encontrar isso clicando no botão "Conectar" para seu cluster. Observe que você precisará inserir sua senha do Atlas na connection string.MONGODB_DATABASE_NAME— Este é o seu MongoDB database para gerenciamento de inventário.REALM_APP_ID- Essa variável deve conter o ID do aplicativo MongoDB Atlas App Services que você criou para o propósito deste projeto.APP_SERVICES_URI– esta é a URL base do MongoDB App Services. Normalmente, ele segue o formatohttps://<cloud-region>.<cloud-provider-code>.data.mongodb-api.com.API_KEY— Esta é a sua chave de API para autenticar chamadas usando a MongoDB Atlas Data API.CHARTS_EMBED_SDK_BASEURL— Essa variável deve conter a URL dos Atlas Charts que você deseja incorporar em seu aplicativo.DASHBOARD_ID_PRODUCT— Essa variável deve armazenar o ID do painel do Atlas Charts para informações sobre o produto.DASHBOARD_ID_GENERAL— Essa variável deve armazenar o ID do dashboard do Atlas Charts para a aba de análises gerais.
Nota: Você pode observar que algumas variáveis de ambiente no arquivo .env.local.example são comentadas. Não se preocupe com eles por enquanto. Essas variáveis serão usadas na segunda parte da série de tutoriais de gerenciamento de estoque.
Lembre-se de salvar o arquivo atualizado.
Execute os seguintes comandos para executar seu aplicativo localmente:
Seu aplicativo deve estar instalado e funcionando em http://localhost:3000! Se não funcionar, verifique se você forneceu as variáveis de ambiente corretas.
Além disso, certifique-se de que seu IP local esteja na lista de acesso do seu projeto. Caso contrário, clique no botão "Add IP address " no canto superior direito. Isso exibirá um menu pop-up. No menu, selecione "Add current IP address, " e clique em "Confirm. "
Parabéns! Agora, seu aplicativo está instalado e funcionando... mas você notou algo estranho? Seus gráficos estão vazios! Vamos consertar isso.
Go ao painel relacionado ao produto e selecione “Add Chart” para criar gráficos relacionados ao produto. Esses gráficos aparecerão abaixo do nível de estoque de cada produto na página do produto do aplicativo. É uma boa oportunidade de adicionar contexto ao nível de estoque de cada produto para que você possa tomar decisões informadas sobre ações de reabastecimento.
Considere a possibilidade de incluir um gráfico que mostre o número de pedidos do último dia, agrupados por hora. Para fazer isso, quando estiver no painel do produto, selecione "Add Chart" e selecione a coleção
transactionscomo a fonte de dados. Defina o tipo de gráfico como "Discrete Line." Adicioneplacement_timestamp no eixo X agrupado por hora e _id agregado usando o operador de contagem no eixo Y.
Na guia Filtro, arraste e solte
placement_timestamp e type. Em seguida, copie a configuração abaixo. Isso exibirá os pedidos de entrada feitos somente no dia atual.
Seu gráfico deve ficar assim:
Outra opção interessante é incluir um detalhamento por tamanho. Para fazer isso, adicione um novo gráfico com
transactions como fonte de dados e selecione "Stacked Column " como o tipo de gráfico. Defina placement_timestamp como o eixo X e amount dentro da arrayitems como o eixo Y. Os campos de array devem ser reduzidos para visualizar os dados. Selecione "Unwind array " como método de redução de array e "SUM " como operador agregado. O Unwind definirá a granularidade dos dados por variante do item (Camiseta branca XS, T-camiseta branca M,...) em vez do produto geral (Camiseta branca).Finalmente, para adicionar um detalhamento por tamanho, arraste e solte o campo
name localizado dentro da arrayitems na opção “Series. Mais uma vez, selecione "Unwind Array " como o método de redução de array.
Filtre pelo dia atual e tipo de transação de entrada como no gráfico anterior, e você obterá um gráfico semelhante a este:
Para saber mais sobre a personalização e os recursos de gráficos, acesse a documentação oficial de MongoDB Charts.
- Para criar um painel de análise geral com base nas vendas, precisaremos gerar dados de vendas. Navegue até o painel de controle em seu aplicativo clicando em http://localhost:3000/control.
- Em seguida, clique no botão “start selling”. Quando você começar a vender, lembre-se de não fechar esta janela, pois a venda só funcionará quando a janela estiver aberta. Isso simulará uma venda a cada cinco segundos, portanto, recomendamos deixá-la em execução por alguns minutos.
- Enquanto isso, navegue de volta aos Atlas Charts para criar um painel de análise geral. Por exemplo, você pode criar um gráfico de linha que exiba as vendas na última hora, minuto a minuto. Agora, você verá dados ao vivo chegarem, oferecendo insights em tempo real!Para isso, no painel geral, clique em "Add Chart" e selecione
transactionscomo a fonte de dados. Selecione "Discrete Line" no menu suspenso do tipo de gráfico. Em seguida, você precisará adicionartimestampno eixo X equantityno eixo Y.
Esses dados serão atualizados em tempo real, portanto, para melhor avaliar a variabilidade em tempo real, podemos limitar os resultados para mostrar apenas dados de vendas da hora anterior. Navegue até o menu "Filter " no menu suspenso "Chart Type ". Arraste e solte o campo
type e timestamp, e copie esta configuração, inserindo seu próprio fuso horário.
O gráfico resultante ficará assim:
Seu aplicativo está pronto para Go! Pela primeira vez, talvez seja necessário atualizar o site para ver os gráficos atualizados, mas depois disso, os gráficos serão atualizados automaticamente, sincronizando-se com as novas vendas. E este é apenas um exemplo — fique à vontade para adicionar os gráficos que você considerar mais úteis a este dashboard.
Parabéns! Seu aplicativo de gerenciamento de inventário está pronto para Go. Ao longo deste tutorial, abordamos vários tópicos do MongoDB. Aqui está uma rápida recapitulação dos principais aprendizados:
- Alertas em tempo real: implemente alertas de estoque baixo em tempo real em seu front-end usando Change Streams.
- Automação de fluxo de trabalho: aproveite os gatilhos de banco de dados para automatizar os fluxos de trabalho de substituição de estoque.
- Análise em tempo real: fique por dentro de seus dados, analise tendências e tome decisões informadas em tempo hábil graças aos Atlas Charts.
- Visão única do inventário: aproveite a flexibilidade do document model para criar uma visão única e abrangente do inventário.
Lembre-se de que isso é apenas o começo. Sinta-se à vontade para explorar, ajustar e aprimorar seu sistema de gerenciamento de inventário para atender às suas próprias necessidades.
Problemas de conectividade não devem impedir que as operações da sua loja funcionem sem problemas. Continue para a Parte 2 deste guia para saber como habilitar o gerenciamento de inventário offline com o Atlas Edge Server.
Curioso para saber mais? Saiba como o MongoDB está ajudando os varejistas a criar experiências modernas para o consumidor. Confira os recursos adicionais abaixo:
Principais comentários nos fóruns
Ainda não há comentários sobre este artigo.