Encurtadores de URL são ferramentas úteis para tornar URLs longas e complexas mais curtas e fáceis de compartilhar. Neste tutorial, estaremos criando um encurtador de URL usando JavaScript.
Para criar um encurtador de URL, estaremos utilizando o Node.js e o framework Express. O Node.js é uma plataforma JavaScript do lado do servidor que nos permite executar código JavaScript fora do navegador da web. O Express é um framework web rápido e minimalista para o Node.js que fornece um conjunto de recursos para construir aplicações web.
Vamos começar!
Passo 1: Configuração
Antes de começarmos, precisamos configurar nosso projeto. Para fazer isso, crie um novo diretório para o seu projeto e execute o seguinte comando no terminal:
npm init -y
Este comando inicializará um novo projeto Node.js e criará um arquivo package.json no diretório do seu projeto.
Em seguida, precisamos instalar as dependências necessárias. Execute o seguinte comando no terminal:
npm install express shortid Este comando instalará o express e o shortid, que é uma biblioteca para gerar IDs únicos.
Passo 2: Criando o servidor
Nesta etapa, iremos criar o servidor usando o Express. Crie um novo arquivo chamado server.js no diretório do seu projeto e adicione o seguinte código:
const express = require('express');
const shortId = require('shortid');
const app = express();
app.listen(3000, () => {
console.log('Servidor iniciado na porta 3000');
});O código importa o express e o shortid, define o app e, em seguida, inicia o servidor na porta 3000, registrando uma mensagem no console para confirmar que o servidor foi iniciado.
Passo 3: Criando o Encurtador de URL
Agora que configuramos o servidor, podemos criar o encurtador de URL. Adicione o seguinte código ao server.js:
...
const urls = {};
app.get('/shorten', (req, res) => {
const url = req.query.url;
const id = shortId.generate();
urls[id] = url;
res.send(http://localhost:3000/${id});
});
app.get('/:id', (req, res) => {
const id = req.params.id;
const url = urls[id];
if (url) {
res.redirect(url);
} else {
res.sendStatus(404);
}
});
...Este código importa a biblioteca shortid e cria um objeto vazio chamado urls para armazenar as URLs originais e suas URLs encurtadas correspondentes.
A primeira rota que definimos lida com o encurtamento da URL.
Quando uma solicitação GET é feita para /shorten com um parâmetro de consulta url, o código gera um ID único usando a biblioteca shortid e armazena a URL original no objeto urls com o ID como chave. Em seguida, envia a URL encurtada de volta para o cliente como resposta.
A segunda rota lida com o redirecionamento da URL encurtada para a URL original. Quando uma solicitação GET é feita para /:id, o código recupera a URL original do objeto urls usando o ID do parâmetro da URL. Se a URL original existir, o código redireciona o cliente para a URL, caso contrário envia 404 como resposta.
Passo 4: Testando o encurtador de URL
Para testar o encurtador de URL, inicie o servidor executando o seguinte comando no terminal:
node server.js
Abra o seu navegador da web e vá para http://localhost:3000/shorten?url=https://adevindev.xyz. Isso irá gerar uma URL encurtada e exibi-la no seu navegador.
Em seguida, você pode copiar a URL encurtada e colá-la no seu navegador para testar o redirecionamento. Isso deve redirecioná-lo para a URL original.
Implementação Completa
const express = require('express');
const shortId = require('shortid');
const app = express();
const urls = {};
app.get('/shorten', (req, res) => {
const url = req.query.url; const id = shortId.generate();
urls[id] = url;
res.send(http://localhost:3000/${id});
});
app.get('/:id', (req, res) => {
const id = req.params.id;
const url = urls[id];
if (url) {
res.redirect(url);
} else {
res.sendStatus(404);
}
});
app.listen(3000, () => {
console.log('Servidor iniciado na porta 3000');
});Conclusão
Neste tutorial, aprendemos como criar um encurtador de URL simples usando JavaScript e Node.js. Cobrimos o básico de roteamento e geração de IDs únicos.
Existem muitas maneiras de melhorar este encurtador de URL, das quais abordaremos nos próximos artigos, onde adicionaremos tratamento de erros, uma interface gráfica e, por fim, implantaremos a aplicação.
Sugestões de cursos
Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.
Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.
As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.
Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.
Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.
O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.