Aprenda Node + MongoDB criando um projeto de encurtador de URL | Cibersistemas Portugal
Se você quer aprender sobre algo, que maneira melhor do que construir um projeto em torno do que você quer aprender?
Nesta postagem do blog, aprenderemos sobre MongoDB, Mongoose, Node e outras tecnologias criando um aplicativo simples de encurtamento de URL.
Os encurtadores de URL estão por toda parte, desde links que você compartilha no Twitter até serviços populares como bit.ly. Mas você já se perguntou como poderia criar um encurtador de URL rápido para si mesmo?
Então, passaremos pela prática de construir um encurtador de URL com MongoDB como nossa solução de back-end. Este projeto vai lhe dar confiança no seu conhecimento e solidificar cada conceito que você aprender. Vamos começar.
Estaremos usando isso gratuitamente URL shortener sala de aula de codedamn para praticar e avaliar nosso progresso à medida que prosseguimos.
Estaremos usando as seguintes tecnologias:
Mangusto como ORM
MongoDB como banco de dados de back-end
Node.js como back-end
Um arquivo JS incorporado simples como front-end
Concluiremos este projeto em 7 etapas, que o levarão do início ao fim. Vamos começar os laboratórios agora.
Parte 1: Configurando o servidor Express
Primeiro, vamos configurar nosso servidor Node. Usaremos Express como estrutura para esta parte, pois é fácil de trabalhar. Aqui está o link para esta parte.
Podemos ver que este é um exercício razoavelmente fácil. Os únicos dois desafios que temos que superar são os seguintes:
A solução pode ser assim:
Simples e fácil. Criamos outra rota GET usando app.get, e deve fazer o trabalho.
Parte 2: Configurando nosso mecanismo de visualização
Agora que estamos familiarizados com a instalação Express, vamos dar uma olhada no .ejs modelo que temos. Aqui está o link para esta parte.
O mecanismo EJS permite que você transmita variáveis ​​com o código Node.js para o seu HTML e repita ou exiba-as antes de enviar uma resposta real ao servidor.
Dê uma olhada rápida no views/index.ejs Arquivo. Será semelhante à aparência de um arquivo HTML normal, exceto que você pode usar variáveis.
Aqui está o nosso atual index.js Arquivo:
Agora, você pode ver isso no index.js arquivo temos a linha app.set('view engine', 'ejs') . Diz ao Express para usar ejs como seu mecanismo de modelagem padrão.
Finalmente, veja que estamos usando res.render e passando apenas o nome do arquivo, não o caminho completo. Isso ocorre porque o Express irá procurar automaticamente dentro da pasta de visualizações para ver se há .ejs modelos.
Passamos variáveis ​​como o segundo argumento, que podemos acessar no arquivo EJS. Usaremos esse arquivo mais tarde, mas por enquanto vamos passar por um desafio rápido.
Para completar este desafio, só precisamos mudar o nome de Mehul para qualquer outra coisa.
Para passar neste desafio, veja o index.ejs primeiro arquivo e depois atualize seu nome para qualquer outra coisa que você desejar. Esta é uma boa solução:
Parte 3: Configurando o MongoDB
Agora que temos um pouco de compreensão de front-end e back-end, vamos prosseguir e configurar o MongoDB. Aqui está o link para esta parte.
Usaremos o Mongoose para conectar ao MongoDB. Mongoose é um ORM para MongoDB.
Simplesmente falando, o MongoDB é muito solto banco de dados, e permite todos os tipos de operações em qualquer coisa.
Embora seja bom para dados não estruturados, na maioria das vezes estamos realmente cientes de quais serão os dados (como registros de usuário ou registros de pagamento). Assim, podemos definir um esquema para MongoDB usando Mongoose. Isso facilita muitas funções para nós.
Por exemplo, uma vez que temos um esquema, podemos ter certeza de que a validação de dados e todas as verificações necessárias serão tratadas pelo Mongoose automaticamente. O Mongoose também nos dá várias funções auxiliares para tornar nossas vidas mais fáceis. Agora vamos configurá-lo.
Para completar esta parte, temos que cuidar dos seguintes pontos:
O pacote Mongoose NPM já foi instalado para você. Você pode diretamente require isto.
Conecte-se ao mongodb://localhost:27017/codedamn URL usando o mongoose.connect método.
Aqui está nosso arquivo index.js atual:
Vamos preencher os marcadores de posição apropriados com o código relevante:
Observe como iniciamos nosso servidor HTTP apenas quando nossa conexão com o MongoDB está aberta. Isso é bom porque não queremos que os usuários atinjam nossas rotas antes que nosso banco de dados esteja pronto.
Finalmente usamos o db.collection método aqui para inserir um registro simples, mas teremos uma maneira melhor em breve de interagir com o banco de dados usando modelos Mongoose.
Parte 4: Configurando um esquema Mongoose
Agora que tivemos nossa experiência prática com a implementação do MongoDB na última seção, vamos desenhar o esquema para nosso encurtador de URL. Aqui está o link para esta parte.
Um esquema Mongoose nos permite interagir com as coleções Mongo de uma maneira abstrata. Os documentos ricos do Mongoose também expõem funções auxiliares como .save que são suficientes para realizar uma consulta de banco de dados completa para atualizar as alterações em seu documento.
Veja como ficará nosso esquema para o encurtador de URL:
Iremos armazenar este arquivo no models/url.js Arquivo. Assim que tivermos o esquema, podemos passar por esta parte do exercício. Temos que fazer as seguintes duas coisas:
Crie este modelo no models/url.js Arquivo. (Nós fizemos isso.)
Uma solicitação POST para /short deve adicionar algo ao banco de dados para este modelo.
Para fazer isso, podemos gerar um novo registro usando o seguinte código:
Você verá que podemos omitir o clicks e short campo porque eles já têm um valor padrão no esquema. Isso significa que o Mongoose os preencherá automaticamente quando a consulta for executada.
Nosso final index.js arquivo para passar neste desafio deve ser assim:
Parte 5: vinculando front-end, back-end, + MongoDB
Agora que temos uma alça na parte de backend, vamos voltar ao frontend e configurar nossa página da web. Lá podemos usar o Encolher botão para realmente adicionar alguns registros ao banco de dados. Aqui está o link para esta parte.
Se você olhar dentro do views/index.ejs arquivo, você verá que já passamos os dados do formulário no backend /short rota. Mas agora não estamos agarrando isso.
Você pode ver que há uma nova linha chamada app.use(express.urlencoded({ extended: false })) na linha 8, que nos permite ler a resposta do usuário no formulário.
No index.ejs arquivo, você pode ver que definimos name="fullURL" que é como podemos receber o URL no back-end.
Aqui está o nosso index.ejs Arquivo:
Este é um desafio simples, porque só precisamos inserir este código para completá-lo:
Primeiro de tudo, pegamos o URL enviado por HTML usando o req.body.fullUrl. Para habilitar isso, também temos app.use(express.urlencoded({ extended: false })) o que nos permite obter os dados do formulário.
Em seguida, criamos e salvamos nosso registro exatamente como fizemos da última vez. Por fim, redirecionamos o usuário de volta à página inicial para que ele possa ver os novos links.
Dica: Você pode tornar este aplicativo mais interessante executando uma solicitação Ajax para a API de back-end em vez do envio de formulário típico. Mas vamos deixá-lo aqui, pois ele se concentra mais na configuração do MongoDB + Node em vez do JavaScript.
Parte 6: Exibindo URLs curtos no front-end
Agora que estamos armazenando URLs encurtados no MongoDB, vamos prosseguir e mostrá-los no front-end também.
Lembre-se de nossas variáveis ​​passadas para o ejs modelo de antes? Agora vamos usá-los.
O loop de modelo para ejs foi feito para você no index.ejs arquivo (você pode ver aquele loop acima). No entanto, temos que escrever a consulta Mongoose para extrair os dados nesta seção.
Se virmos o modelo, veremos isso em index.js temos o seguinte código:
Já temos um modelo definido conosco para consultar dados do Mongoose. Vamos usá-lo para obter tudo o que precisamos.
Aqui está nosso arquivo de solução:
Você pode ver que foi tão fácil quanto fazer await ShortURL.find() no allData variável. A próxima parte é onde as coisas ficam um pouco complicadas.
Parte 7: Fazendo o redirecionamento funcionar
Estamos quase terminando! Temos o URL completo e o URL curto armazenados no banco de dados agora, e os mostramos no frontend também.
Mas você notará que o redirecionamento não funciona agora e obtemos um erro do Express.
Vamos consertar isso. Você pode ver no index.js arquivo, há uma nova rota dinâmica adicionada no final que lida com esses redirecionamentos:
Nossos desafios para esta parte são assim:
Tudo bem. Em primeiro lugar, temos que extrair o URL completo quando visitamos um URL curto. Veja como faremos isso:
Agora, se virmos que nosso resultado é nulo, enviaremos um status 404:
Isso supera nosso primeiro desafio. A seguir, se de fato temos um link, vamos redirecionar o usuário e incrementar a contagem de cliques também no banco de dados.
Dessa forma, podemos incrementar e armazenar o resultado no banco de dados novamente. E isso deve superar todos os nossos desafios.
Parabéns! Você acabou de construir um encurtador de URL totalmente funcional usando Express + Node + MongoDB. Dê um tapinha nas costas!
O código-fonte final é disponível no GitHub.
Se você tiver algum feedback sobre este artigo ou sobre as salas de aula codificadas, sinta-se à vontade para entrar em contato comigo no Twitter. Vamos discutir 🙂