O que é um encurtador de URL?
Um encurtador de URL é uma ferramenta que converte URLs longos em links mais curtos e gerenciáveis. Depois que o URL for encurtado, ele redirecionará os usuários para o URL original.
URLs curtos são mais fáceis de compartilhar em mídias sociais, e-mails ou qualquer outra plataforma digital. Além disso, muitos encurtadores de URL oferecem recursos avançados, como rastreamento e análise, que podem ser úteis para fornecer insights sobre o envolvimento do usuário.
Neste tutorial, abordaremos como criar sua própria ferramenta de encurtador de URL usando JavaScript!
Ao final deste tutorial, teremos algo assim:
Vamos começar!
Crie UI com HTML e CSS
Usaremos HTML e CSS para construir uma interface de usuário simples, apresentando os seguintes elementos:
Um elemento de formulário com um
UM
elemento para exibir os resultados e uma tag para copiar o URL abreviado.
UM
elemento para exibir quaisquer mensagens de erro
UM
Adicione este código no corpo do arquivo HTML.
1
class= "container" >
2
URL Shortener
3
id= "form" >
4
type= "url" id= "url" placeholder= "Enter your long URL" required >
5
type= "submit" id= "submit-btn" > Shorten URL
6
7
id= "result" >
8
target= "_blank" id= "shortened-url" >
9
id= "icon" class= "fa-solid fa-copy" >
10
11
12
id= "copy" > Copied!
13
id= "error" >
14
Estilizando com CSS
Vamos examinar alguns estilos para que as coisas tenham a aparência que desejamos.
Para estilizar a página, vamos começar definindo o corpo a ser usado display: flex; isso garantirá que tudo esteja centralizado horizontal e verticalmente.
Também adicionaremos uma cor de fundo.
1
body {
2
display : flex ;
3
justify-content : center ;
4
align-items : center ;
5
height : 100vh ;
6
background-color : #f1f1f1 ;
7
font-family : Arial , sans-serif ;
8
}
Agora vamos adicionar esses estilos ao elemento contêiner.
1
.container {
2
width : 400px ;
3
background-color : #fff ;
4
border-radius : 5px ;
5
box-shadow : 0 0 10px rgba ( 0 , 0 , 0 , 0.1 );
6
padding : 20px ;
7
text-align : center ;
8
}
Para garantir os elementos no formulário () estão empilhados verticalmente, aplicaremos display: flex e flex-direction: column estilos para o formulário.
1
form {
2
display : flex ;
3
flex-direction : column ;
4
}
A seguir adicionaremos alguns margin, paddinge border-radius aos elementos do formulário para uma aparência mais refinada.
1
input , button {
2
padding : 10px ;
3
margin : 10px 0 ;
4
border : none ;
5
border-radius : 5px ;
6
box-shadow : 0 0 5px rgba ( 0 , 0 , 0 , 0.1 );
7
}
Em seguida, esses estilos para nosso botão de envio.
1
button {
2
cursor : pointer ;
3
background-color : #007bff ;
4
color : #fff ;
5
}
6
button :hover {
7
background-color : #0069d9 ;
8
}
9
button :disabled {
10
background-color : #cccccc ;
11
cursor : not-allowed ;
12
}
Estamos chegando lá! Agora defina o resultado , erro e cópia elementos a serem ocultados por padrão.
1
#result , #error , #copy {
2
display : none ;
3
}
Aplique uma cor vermelha no erro elemento.
1
#error {
2
color : #dc3545 ;
3
margin-top : 10px ;
4
}
Quando um URL é encurtado, precisamos fornecer uma opção para copiar o link encurtado. Portanto, estilize o ícone de cópia para aparecer ao lado do resultado e posicione a mensagem “copiada” abaixo do URL abreviado.
1
#icon {
2
cursor : pointer ;
3
margin-left : 10px ;
4
vertical-align : middle ;
5
color : #0069d9 ;
6
}
7
#copy {
8
position : absolute ;
9
left : 60% ;
10
}
Feito isso, nosso styling está finalizado!
Testando a API
Usaremos a API TinyURL para gerar URLs encurtados, então acesse TinyURL e obtenha um token de API gratuito.
A API fornece vários endpoints conforme mostrado abaixo.
No nosso caso, usaremos o /create ponto final. Para fazer uma solicitação POST simples, envie uma solicitação à API com seu token nos cabeçalhos e inclua a URL e o domínio (tinyurl.com) no corpo da solicitação.
Obtenha elementos DOM
Vamos agora obter todos os elementos DOM necessários para manipulação
1
const form = document . getElementById ( " form " );
2
const urlInput = document . getElementById ( " url " );
3
const submitBtn = document . getElementById ( " submit-btn " );
4
const result = document . getElementById ( " result " );
5
const shortenedUrlLink = document . getElementById ( " shortened-url " );
6
const errorMessage = document . getElementById ( " error " );
7
const copyIcon = document . getElementById ( " icon " );
8
const copyUrl = document . getElementById ( " copy " );
Em seguida, crie uma função assíncrona chamada shortenUrl que terá o URL como parâmetro.
1
async function shortenUrl ( url ) {
2
3
}
Dentro desta função, defina o TinyUrl API e o segredo ficha .
1
async function shortenUrl ( url ) {
2
const apiUrl = " https://api.tinyurl.com/create " ;
3
const token = " your_tinuyurl_token " ;
4
5
}
A seguir, faça um POST solicitar e especificar os dados necessários.
1
async function shortenUrl ( url ) {
2
const apiUrl = " https://api.tinyurl.com/create " ;
3
const token = " your_tinuyurl_token " ;
4
const response = await fetch ( apiUrl , {
5
method : " POST " ,
6
headers : {
7
" Content-Type " : " application/json " ,
8
Authorization : `Bearer ${ token } `
9
},
10
body : JSON . stringify ({
11
domain : " tinyurl.com " ,
12
url : url
13
})
14
});
15
16
if ( ! response . ok ) {
17
throw new Error ( " An error occurred. Please try again. " );
18
}
19
const result = await response . json ();
20
21
}
No shortenUrl função, usamos fetch para enviar uma solicitação ao apiUrl endpoint e aguarde a resposta. Como vimos anteriormente, a API TinyURL espera um token no cabeçalho, e o corpo deve conter o domínio e a URL a ser encurtada.
Se ocorrer um erro, a mensagem Ocorreu um erro. Por favor, tente novamente será exibido.
Um exemplo de resposta é assim:
1
{
2
"data": {
3
"domain": "tinyurl.com",
4
"alias": "example-alias",
5
"deleted": false,
6
"archived": false,
7
"etiquetas": [
8
"tag1",
9
"tag2"
10
],
11
"análise": [
12
{
13
"enabled": true,
14
"public": false
15
}
16
],
17
"tiny_url": "https://tinyurl.com/example-alias",
18
"created_at": "2022-11-24T19:41:23+00:00",
19
"expires_at": null,
20
"url": "https://google.com"
21
},
22
"code": 0,
23
"errors": []
24
}
Desta resposta, precisamos extrair o tiny_url valor, então atualize a função da seguinte forma:
1
async function shortenUrl ( url ) {
2
const apiUrl = " https://api.tinyurl.com/create " ;
3
const token = " your_token " ;
4
const response = await fetch ( apiUrl , {
5
method : " POST " ,
6
headers : {
7
" Content-Type " : " application/json " ,
8
Authorization : `Bearer ${ token } `
9
},
10
body : JSON . stringify ({
11
domain : " tinyurl.com " ,
12
url : url
13
})
14
});
15
16
if ( ! response . ok ) {
17
throw new Error ( " An error occurred. Please try again. " );
18
}
19
const result = await response . json ();
20
return result . data . tiny_url ;
21
}
Tudo bem. Temos uma função que gera uma URL abreviada, então agora precisamos adicionar um ouvinte de evento ao formulário para capturar a URL do usuário. Adicione um onSubmit evento para o formulário.
1
form . addEventListener ( " submit " , async ( e ) => {
2
3
}
Dentro do ouvinte de evento, queremos obter a URL do usuário, invocar o shortenUrl funcionar com o valor do usuário fornecido e, em seguida, exibir o URL abreviado para o usuário.
Atualize o ouvinte de eventos da seguinte maneira:
1
form . addEventListener ( " submit " , async ( e ) => {
2
e . preventDefault ();
3
const url = urlInput . value ;
4
submitBtn . disabled = true ;
5
submitBtn . textContent = " Shortening... " ;
6
errorMessage . style . display = " none " ;
7
result . style . display = " none " ;
8
copyUrl . style . display = " none " ;
9
10
const shortUrl = await shortenUrl ( url );
11
shortenedUrlLink . href = shortUrl ;
12
shortenedUrlLink . textContent = shortUrl ;
13
14
result . style . display = " block " ;
15
16
});
As coisas estão ficando um pouco complexas, então vamos detalhar o código acima:
const url = urlInput.value; obtém o URL inserido pelo usuário no campo de entrada.
submitBtn.disabled = true; desativa o botão de envio durante o processo de geração de URL para evitar que o usuário inicie uma nova solicitação.
submitBtn.textContent = "Shortening..."; exibe a mensagem Encurtamento… para informar ao usuário que o processo está em andamento.
const shortUrl = await shortenUrl(url); invoca a função ShortUrl e retorna o URL abreviado.
shortenedUrlLink.href = shortUrl; adiciona um atributo href ao elemento shortedUrlLink.
shortenedUrlLink.textContent = shortUrl; define o URL abreviado como o texto do elemento shortedUrlLink.
result.style.display = "block"; torna o elemento shortedUrlLink visível.
Tratamento de erros
Vamos atualizar nosso código para lidar com erros. Primeiro, precisamos verificar se um usuário inseriu uma URL válida no campo de entrada. Caso contrário, exibiremos uma mensagem permitindo que eles forneçam um URL válido.
Atualize o ouvinte de eventos da seguinte maneira.
1
form . addEventListener ( " submit " , async ( e ) => {
2
e . preventDefault ();
3
const url = urlInput . value ;
4
5
if ( ! url ) {
6
displayMessage ( " Please enter a URL " );
7
return ;
8
}
9
10
// the rest of the code
11
});
Em seguida, envolva a lógica em um try-block para lidar com quaisquer erros que possam ocorrer durante o processo de geração.
1
try {
2
submitBtn . disabled = true ;
3
submitBtn . disabled = true ;
4
submitBtn . textContent = " Shortening... " ;
5
errorMessage . style . display = " none " ;
6
result . style . display = " none " ;
7
copyUrl . style . display = " none " ;
8
9
const shortUrl = await shortenUrl ( url );
10
shortenedUrlLink . href = shortUrl ;
11
shortenedUrlLink . textContent = shortUrl ;
12
13
result . style . display = " block " ;
14
} catch ( error ) {
15
displayMessage ( " An error occurred while shortening the URL. Please try again. " );
16
} finally {
17
submitBtn . disabled = false ;
18
submitBtn . textContent = " Shorten URL " ;
19
}
Caso ocorra algum erro, exibiremos uma mensagem ao usuário. No finally bloco, faremos a limpeza redefinindo o botão enviar.
O displayMessage função fica assim:
1
function displayMessage ( message ) {
2
errorMessage . textContent = message ;
3
errorMessage . style . display = " block " ;
4
}
Agora, quando um URL é encurtado, a saída deve ser semelhante a esta:
Copiar URL para a área de transferência
A última etapa é habilitar a funcionalidade de copiar para a área de transferência. Vamos adicionar um evento para escutar um evento de clique no botão enviar.
1
copyIcon . addEventListener ( " click " , async () => {
2
try {
3
await navigator . clipboard . writeText ( shortenedUrlLink . textContent );
4
copyUrl . style . display = " block " ;
5
setTimeout (() => {
6
copyUrl . style . display = " none " ;
7
}, 2000 );
8
} catch ( err ) {
9
displayMessage ( " Failed to copy to clipboard. Please try again. " );
10
}
11
});
A API da área de transferência (navigator.clipboard.writeText) é uma função assíncrona que retorna uma promessa que é resolvida quando o texto é copiado com sucesso.
Se ocorrer algum erro durante a cópia, uma mensagem de erro será exibida.
E terminamos!
Ótimo trabalho. Aqui está a demonstração que você acabou de criar:
Chegamos ao final deste tutorial e agora você tem um encurtador de URL totalmente funcional. Uma das maneiras de melhorar essa ferramenta é transformá-la em uma extensão do Chrome. Isso garantirá que o encurtamento de um URL seja instantâneo e conveniente – por que não tentar?!
Guile VS Hugo Ultra Street Fighter IV (Hardest AI)