Criando aplicativos de remix com a pilha MongoDB
Avalie esse Artigo
O ecossistema JavaScript se estabilizou ao longo dos anos. Não existe uma nova estrutura todos os dias, mas alguns projetos interessantes ainda estão surgindo. Remix é um desses projetos mais recentes que está recebendo muita força nas comunidades de desenvolvedores. O Remix é baseado no React e permite que você use a mesma base de código entre o backend e o frontend. As páginas são geradas no lado do servidor, mas também atualizadas dinamicamente sem recargas de página inteira. Isso torna seu aplicativo da web muito mais rápido e até mesmo permite que ele seja executado sem o JavaScript ativado. Neste tutorial, você aprenderá como usá-lo com o MongoDB usando a nova pilha MongoDB-Remix.
Para este tutorial, você precisará de:
- Node.js.
O Remix usa pilhas de tecnologia para ajudar você a começar seus projetos. Essa pilha, semelhante a outras fornecidas pela equipe Remix, inclui React, TypeScript e Tailwind. Quanto à camada de persistência de dados, ela usa o MongoDB com o driver JavaScript nativo.
Comece inicializando um novo projeto. Isso pode ser feito com a ferramenta
create-remix, que pode ser iniciada com npx. Responda às perguntas e você terá a estrutura básica para o seu projeto. Observe como usamos o parâmetro--template para carregar a pilha MongoDB Remix (mongodb-developer/remix) do Github. O segundo parâmetro especifica a pasta na qual você deseja criar este projeto.1 npx create-remix --template mongodb-developer/remix remix-blog
Isso iniciará o download dos pacotes necessários para seu aplicativo. Depois que tudo for baixado, você poderá
cd entrar nesse diretório e fazer uma primeira compilação.1 cd remix-blog 2 npm run build
Você está quase pronto para iniciar seu aplicativo. Go para seu MongoDB Atlas (carregado com os dados de exemplo) e obtenha sua connection string.
Na raiz do seu projeto, crie um arquivo
.env com a variávelCONNECTION_STRINGe cole sua connection string. Seu arquivo deve ficar assim.1 CONNECTION_STRING=mongodb+srv://user:pass@cluster0.abcde.mongodb.net
Neste ponto, você deve conseguir apontar seu navegador para http://localhost:3000 e ver o aplicativo em execução.
Pronto! Você tem um aplicativo Remix que se conecta ao seu MongoDB database. Você pode ver a lista de filmes, que obtém dados do MongoDB database
sample_mflix. Ao clicar no título de um filme, você será levado à página de detalhes do filme, que mostra o enredo. Você pode até mesmo adicionar novos filmes à coleção, se desejar.Agora você tem um aplicativo em execução, mas provavelmente desejará se conectar a um banco de dados que mostre algo diferente de dados de exemplo. Nesta seção, descrevemos as várias partes móveis do aplicativo de exemplo e como você pode editá-las para suas finalidades.
A conexão com o banco de dados é tratada para você no arquivo
/app/utils/db.server.ts. Se você já usou outras pilhas Remix no passado, achará esse código muito familiar. O driver MongoDB usado aqui gerenciará o pool de conexões. A string de conexão é lida de uma variável de ambiente, portanto, não há muito o que fazer aqui.No código de exemplo, nos conectamos ao banco de dados
sample_mflixe obtemos os primeiros 10 resultados da coleção. Se você estiver familiarizado com o Remix, talvez já saiba que o código dessa página está localizado no arquivo/app/routes/movies/index.tsx. O aplicativo de exemplo usa a convenção de nomenclatura padrão do sistemade rotas aninhadas Remix.Nesse arquivo, você verá um carregador no topo. Este carregador é usado para a lista de filmes e a barra de pesquisa dessa página.
1 export async function loader({ request }: LoaderArgs) { 2 const url = new URL(request.url); 3 4 let db = await mongodb.db("sample_mflix"); 5 let collection = await db.collection("movies"); 6 let movies = await collection.find({}).limit(10).toArray(); 7 8 // … 9 10 return json({movies, searchedMovies}); 11 }
Você pode ver que o aplicativo se conecta ao banco de dados do
sample_mflixe à collection domovies. A partir daí, ele usa o métodofind para recuperar alguns registros. Ele faz a query da collection com um objeto de solicitação vazio/não filtrado com um limite de 10 para buscar os primeiros documentos 10 do banco de dados. A MongoDB Query API oferece várias maneiras de pesquisar e recuperar dados.Você pode alterá-los para se conectar ao seu próprio banco de dados e ver o resultado. Você também precisará alterar o
MovieComponent (/app/components/movie.tsx) para acomodar os documentos que você obtém do seu banco de dados.A página de detalhes do filme pode ser encontrada em
/app/routes/movies/$movieId.tsx. Você encontrará um código semelhante, mas, desta vez, ele usa o método findOne para recuperar apenas um filme específico.1 export async function loader({ params }: LoaderArgs) { 2 const movieId = params.movieId; 3 4 let db = await mongodb.db("sample_mflix"); 5 let collection = await db.collection("movies"); 6 let movie = await collection.findOne({_id: new ObjectId(movieId)}); 7 8 return json(movie); 9 }
Novamente, esse código usa os padrões de roteamento Remix para passar o
movieId para a função loader.Você deve ter notado o linkAdicionarno menu esquerdo. Isso permite que você crie um novo documento em sua coleção. O código para adicionar o documento pode ser encontrado no arquivo
/app/routes/movies/add.tsx. Ali, você verá uma função deação. Esta função será executada quando o formulário for enviado. Isso se deve ao componente Remix Formulário que usamos aqui.1 export async function action({ request }: ActionArgs) { 2 const formData = await request.formData(); 3 const movie = { 4 title: formData.get("title"), 5 year: formData.get("year") 6 } 7 const db = await mongodb.db("sample_mflix"); 8 const collection = await db.collection("movies"); 9 const result = await collection.insertOne(movie); 10 return redirect(`/movies/${result.insertedId}`); 11 }
O código recupera os dados do formulário para criar o novo documento e usa o métodoinsertOne do driver para adicionar esse filme à collection. Você notará a utilidade deredirecionamento no final. Isso enviará os usuários para a página de filme recém-criada após a criação da entrada com sucesso.
É isso! Você tem um aplicativo em execução e sabe como personalizá-lo para se conectar ao seu banco de dados. Se você quiser saber mais sobre como usar o driver nativo, use o link na barra de navegação à esquerda do aplicativo de exemplo ou vá direto para a documentação. Tente adicionar páginas para atualizar e excluir uma entrada de sua collection. Ele deve estar usando os mesmos padrões que você vê no modelo. Se precisar de ajuda com o modelo, pergunte em nossos fóruns da comunidade; teremos prazer em ajudar.