Aplicativos Web de última geração com Remix e MongoDB Atlas Data API
Pavel Duchovny, Stanimira Vlaeva10 min read • Published Jan 26, 2022 • Updated Aug 01, 2024
Avalie esse Tutorial
As pilhas de aplicativos baseadas em Javascript provaram ser a arquitetura predominante para aplicativos web que todos usamos. De MEAN a MERN e MEVN, a ideia é ter um cliente e servidor web baseado em JavaScript, comunicando-se por meio de uma API REST ou GraphQL alimentada pelo document model do MongoDB como seu armazenamento de dados flexível.
Remix é uma nova estrutura JS que vem para interromper a percepção de sites estáticos e definir os níveis de visualização e controlador. Essa framework tem como objetivo simplificar o aninhamento de componentes da web transformando nossos componentes da web em pequenos microsserviços que podem carregar, manipular e apresentar dados com base no caso de uso específico e no estado do aplicativo.
A ideia de combinar a lógica de visualização com a lógica de negócios do servidor e a carga de dados, deixando o gerenciamento de estado e vinculando à estrutura, torna o desenvolvimento rápido e flexível. Agora, adicionar uma camada de acesso a dados, como o MongoDB Atlas e sua nova MongoDB Atlas Data API, torna a criação de aplicativos web orientados por dados super simples. Nenhum driver é necessário e tudo acontece em uma função de carregador por meio de algumas chamadas https.
Para mostrar como é fácil, criamos um aplicativo de pesquisa de filmes de demonstração com base no banco de dados de amostra do MongoDB Atlas sample_mflix. Neste artigo, abordaremos as principais funcionalidades deste aplicativo e aprenderemos como usar as funcionalidades da Atlas Data API e do Atlas Search.
Não deixe de conferir o aplicativo de demonstração ao vivo do Remix e do MongoDB! Você pode encontrar seu código-fonte neste repositório dedicado do GitHub.
Primeiro, precisamos preparar a camada de dados que trabalharemos com nosso aplicativo Remix. Siga estas etapas:
- Carregue um conjunto de dados de amostra no cluster. (Este aplicativo está usando sample_mflix parasua demonstração.)
Como outras estruturas do Node, a maneira mais fácil de inicializar um aplicativo é implantando um aplicativo de modelo como base:
O comando solicitará várias configurações. Você pode usar os padrões com a opção padrão de auto-hospedagem.
Vamos também adicionar alguns pacotes de nó que usaremos em nosso aplicativo. Navegue até seu projeto recém-criado e execute o seguinte comando:
O aplicativo consiste em dois arquivos principais que hospedam o ponto de entrada do aplicativo de demonstração com os componentes html da página principal:
app/root.jsx e app/routes/index.jsx. No mundo real, esse provavelmente será o roteamento para uma página de login ou principal.Em
app/root.jsx, temos os principais blocos de construção da criação de nossa página principal e menu para nos direcionar para as diferentes demos.Se você optar por usar o TypeScript ao criar o aplicativo, adicione o menu de navegação ao
app/routes/index.tsx. Não se esquecer de importar Link de remix.As áreas principais são exportadas no
app/routes/index.jsx no diretório “routes”, que apresentaremos na seção a seguir.Esse arquivo usa a mesma lógica de uma representação da interface do usuário retornada como JSX enquanto o carregamento de dados está ocorrendo na função de carregador. Neste caso, o carregador fornece apenas alguns dados estáticos da variável "data ".
Agora, é aqui que o Remix apresenta o roteamento inteligente na forma de diretórios de rotas com nomes de nossas convenções de caminho de URL. Para a demonstração principal chamada "movies, ", criamos uma rota "movies ":
A ideia é que, sempre que nosso aplicativo estiver redirecionando para
<BASE_URL>/movies, o index.jsx em routes/movies seja chamado. Cada arquivo jsx produz um componente React e carrega seus dados por meio de uma função de carregador (operando como provedor de dados de backend do servidor).Antes de criarmos nossa página principal de filmes e buscar os filmes da Atlas Data API, vamos criar um arquivo
.env no diretório principal para fornecer as informações necessárias do Atlas para nosso aplicativo:Coloque as informações relevantes do seu Atlas localizando a API key, o URL base da MongoDB Atlas Data API e o nome do cluster. Eles serão usados em breve em nossas chamadas de MongoDB Atlas Data API.
⚠️Important:
.env é bom para fins de desenvolvimento. No entanto, para ambientes de produção, considere o repositório secreto apropriado para armazenar essas informações para sua implementação.Vamos carregar este arquivo .env quando o aplicativo iniciar ajustando os scripts npm "dev " no arquivo
package.json:Vamos começar a criar nossa lista de filmes renderizando-a a partir do nosso carregador de dados e da estrutura da coleção
sample_mflix.movies .Navegue até o diretório 'app/routes' e execute os seguintes comandos para criar novas rotas para nossa lista de filmes e páginas de detalhes do filme.
Em seguida, abra o arquivo
movies/index.jsxem seu editor de código favorito e adicione o seguinte:Como você pode ver na cláusula de retorno, temos um título chamado "Movies, ", uma entrada dentro de um formulário "get " para publicar uma entrada de pesquisa, se solicitada. Explicaremos em breve como os formulários são convenientes ao trabalhar com o Remix. Além disso, há uma lista de links dos documentos de filmes recuperados. Usar o componente
<Link> do Remix nos permite criar links para cada nome de filme individual. Isso nos permitirá passar o título como um parâmetro de caminho e trigger o componente$title.jsx, que criaremos em breve.Os dados são recuperados usando
useLoaderData(), que é uma função auxiliar fornecida pela estrutura para recuperar dados da função "loader " do lado do servidor.A parte interessante é a função
loader(). Vamos criar um para recuperar primeiro os primeiros documentos de filme 100 e deixar a pesquisa para mais tarde.Adicione o código a seguir ao arquivo
movies/index.jsx .Aqui começando com um pipeline de agregação para limitar apenas os primeiros 100 documentos para nossa visualização inicial
pipeline = [ {$limit : 100}]; . Esse REST API será passado para nossa chamada de REST API para o endpoint da API de dados:Colocamos a chave de API e a URL do arquivo de segredos que criamos anteriormente como variáveis de ambiente. A matriz de resultados será retornada para a função UI:
Para executar o aplicativo, podemos ir para a pasta principal e executar o seguinte comando:
O aplicativo deve começar na URL
http://localhost:3000 .Para utilizar os recursos de Full Text Search desta demonstração, é necessário criar um índice dinâmico doAtlas Search na 
sample_mflix moviescollection banco de dados (use mapeamentos dinâmicos padrão). Exigir a versão 4.4.11+ (camada grátis incluída) ou 5.0.4+ do Atlas cluster para os metadados de pesquisa e pesquisas de faceta que discutiremos mais tarde. Como temos um componente
<Form> Remix enviando a entrada do formulário, os dados digitados na caixa de entrada trigger um recarregamento de dados. O <Form> recarrega a função do carregador sem atualizar a página inteira. Isso naturalmente reenviará o URL como /movies?searchTerm=<TYPED_VALUE> e é por isso que é fácil usar a mesma função do carregador, extrair o parâmetro do URL e adicionar uma lógica de pesquisa apenas alterando o pipeline básico:Nesse caso, o envio de um formulário chamará a função de carregador novamente. Se houver um
searchTermenviado na URL, ele será extraído sob a variável searchTerme criado um pipeline$search para interagir com o índice de texto Atlas Search.Além disso, há um recurso muito interessante que nos permite obter os metadados de nossa pesquisa — por exemplo, quantas correspondências ocorreram para essa palavra-chave específica (já que não queremos mostrar mais do que 100 resultados).
Ao conectar tudo, obtemos uma funcionalidade de pesquisa funcional, incluindo informações de metadados em nossas pesquisas.
Agora, se você notou, cada título de filme é, na verdade, um link que redireciona para
./movies/<TITLE> url. Mas por que isso é bom, você pergunta? O Remix nos permite criar rotas parametrizadas com base em nossos parâmetros de caminho de URL.O arquivo
movies/$title.jsx mostrará os detalhes de cada filme quando carregado. A diferença é que a função do carregador obterá o nome do filme da URL. Então, caso cliquemos em "Home Alone, ", o caminho será http:/localhost:3000/movies/Home+Alone.Isso nos permitirá buscar as informações específicas para esse título.
Abra o arquivo
movies/$title.jsxque criamos anteriormente e adicione o seguinte:A consulta
findOne filtrará os resultados por título. O título é extraído dos parâmetros do URL fornecidos como argumento para a função de carregador.Os dados são retornados como um documento com as informações necessárias para serem apresentados como "full plot, " "poster, " "genres, " etc.
Vamos mostrar os dados com um layout html simples:
O MongoDB Atlas Search introduziu um novo recurso que complementa um caso de uso muito comum no mundo da pesquisa de texto: categorizar e permitir uma pesquisa facetada. A busca por faceta é uma técnica para apresentar aos usuários possíveis critérios de busca e permitir que eles especifiquem várias dimensões de busca. Em um exemplo mais simples, são os painéis de critérios de pesquisa que você vê em muitos sites comerciais ou de reservas para ajudá-lo a restringir sua pesquisa com base em diferentes categorias disponíveis.
Além disso, para os diferentes critérios que você pode ter em uma pesquisa de faceta, ele adiciona uma contagem melhor e muito mais rápida de diferentes categorias. Para demonstrar essa capacidade, criamos uma nova rota chamada
facets e adicionamos uma página adicional para mostrar as contagens por gênero em routes/facets/index.jsx. Vamos dar uma olhada em sua função de carregador:Ele usa um novo estágio chamado $searchMeta e dois estágios facetados: um para garantir que os filmes comecem a partir de uma data (1900) e que agregamos contagens com base no campo de gêneros:
Para usar a pesquisa de facet, precisamos alterar o índice e adicionar ambos os campos aos tipos de facet. É fácil editar o índice por meio do editor visual do Atlas Search. Basta clicar em 
[...] > “Edit with visual editor. " Um documento de saída da query de pesquisa será parecido com este:
Depois de rotearmos a página da interface do usuário na demonstração de facets, a tabela de gêneros na interface do usuário terá a seguinte aparência:
Para tornar o aplicativo ainda mais interativo, decidimos permitir o clique em qualquer um dos gêneros na página de facet e redirecionar para a página de pesquisa de filmes com
movies?filter={genres : <CLICKED-VALUE>}:Agora, cada gênero clicado na interface do usuário do facet será redirecionado de volta para
/movies?filter={generes: <VALUE-BUCKET._id>}- por exemplo, /movies?filter={genres : "Drama"}.Isso trigger a função de carregador
movies/index.jsx, onde adicionaremos a seguinte condição:Veja como é fácil com os pipelines de agregação alternar entre uma correspondência regular e um Full Text Search.
Com a mesma abordagem, podemos adicionar qualquer um dos campos apresentados como critério de pesquisa - por exemplo, clicar em diretores em uma página de detalhes de um filme específico que passa por
/movies?filter={directors: [ <values> ]}.| Clique em um campo filtrado (por exemplo. "Diretores" | Redirecionar para lista de filmes filtrados |
|---|---|
 |  |
O Remix tem alguns conceitos inteligentes e renovados para a construção de aplicativos da web baseados em React. Ter o código do servidor e do cliente acoplados dentro de arquivos JS de URL modulados e parametrizados torna o desenvolvimento divertido e produtivo.
A MongoDB Atlas Data API é uma ótima opção para acessar facilmente o Atlas Search e dividir seus dados com uma sintaxe simples de semelhante ao API REST. No geral, a pilha apresentada reduz a quantidade de código e arquivos a serem mantidos, ao mesmo tempo em que oferece os melhores recursos de interface do usuário.
Confira o código completo no seguinte repositório doGitHub e comece a usar seu novo aplicativo usando o MongoDB Atlas hoje mesmo!
Se tiver dúvidas, acesse o site da nossa comunidade de desenvolvedores, no qual os engenheiros e a comunidade do MongoDB ajudarão você a desenvolver sua próxima grande ideia com o MongoDB.