Artigo original: How to build a simple URL shortener with just HTML and JavaScript

Escrito por: Palash Bauri

Você já pode ter usado um redutor de URL antes, como o bit.ly ou o goo.gl. Eles são úteis para reduzir URLs longos para facilitar seu compartilhamento com amigos, familiares ou colegas de trabalho.

Você pode estar se perguntando como funcionam essas coisas. Para entender como, precisamos examinar um redutor de URL mais de perto — para isso, criaremos um redutor simples! Com isso, aprenderemos coisas novas e entenderemos o funcionamento de um redutor de URL.

Hoje, criaremos um redutor de URL simples, o qual não necessita de um sistema de banco de dados para hospedá-lo. Em vez disso, usaremos o jsonstore.io. Assumirei, para fins deste artigo, que você já conhece o básico sobre HTML e JavaScript.

O que estamos esperando? Vamos começar!

Primeiro, o HTML

Precisaremos apenas de uma caixa de input de texto, de um botão e de uma tag script para criar nosso redutor de URL.

Primeiro, criamos um arquivo HTML chamado index.html, pois precisamos apenas desses dois elementos (do botão e da caixa de input).

Vamos começar adicionando nossos três elementos principais:

<html>
  <body>
    <input type="url" id="urlinput">
    <button onclick="shorturl()">Reduzir o URL</button>
    <script src="main.js"></script>
  </body>
</html>

Como vemos na marcação acima, criamos um arquivo simples de HTML. Dentro das tags body, temos apenas três elementos: input, button e script.

O primeiro elemento, input, é onde digitaremos/colaremos nosso URL longo. Dei ao input o id urlinput para facilitar o acesso a ele pelo JavaScript.

O próximo elemento é um button (em português, botão). Quando clicamos nesse botão, nosso URL será reduzido, pois o botão tem uma função onclick que será executada quando clicarmos no botão. Dentro da função shorturl(), termos os comandos necessários para reduzir o URL.

Ao final, temos um script chamado main.js, onde nosso código em JavaScript estará. A função mencionada acima, shorturl(), também estará lá.

Neste momento, o HTML está completo. É hora de começar a escrever o JavaScript.

Em seguida, o JavaScript

Como mostramos acima, precisaremos de um pouco de JavaScript para criar nosso redutor de URL.

Nota da tradução: o site jsonstore.io não está mais disponível. Assim, se quiser utilizar algum site para armazenamento em JSON, será preciso buscar alguma alternativa para fazer o código funcionar.

Passo 0: como mencionei anteriormente, usaremos jsonstore.io para armazenar informações sobre nosso URL longo. Precisaremos de um URL de endpoint do jsonstore.io para armazenar os dados. Assim, você pode visitar o site jsonstore.io, onde verá algo semelhante a isto:

Z7nKP7sEB4Lu2PGz64A9-WkBvLlitPw3z64e

Abaixo do texto This Is Your Endpoint (em português, este é o seu endpoint), você verá uma caixa de texto com um URL longo, algo como:

https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1

Clique no botão roxo que diz COPY (Copiar).

Vamos começar a escrever o JavaScript.

Crie um arquivo JavaScript chamado main.js e comece seguindo os passos abaixo.

Primeiro, colocamos o link copiado como uma variável:

var endpoint = "https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1";

Em seguida, precisamos gerar uma string aleatória para podermos criar um link entre o URL curto e o URL longo.

Considere que temos um URL abcd aleatório, que nosso redutor de URL simples está hospedado em https://redutor_de_url.com e que reduzimos o URL https://google.com com esse URL aleatório. Assim, sempre que formos para https://redutor_de_url.com/#abcd, seremos redirecionados para https://google.com.

Bem, vamos criar uma função chamada getrandom():

function getrandom(){
  var random_string = Math.random().toString(32).substring(2, 5) + Math.random().toString(32).substring(2, 5);    
  return random_string()
}

Não se preocupe! Ajudarei você a entender o código acima.

Primeiro, iniciamos uma função chamada getrandom. Em seguida, inicializamos uma variável chamada random_string e demos a ela um valor.

Math é um objeto integrado do Javascript, que permite que realizemos tarefas matemáticas com números. Primeiro, chamamos a função random de Math. Math.random() retorna um número aleatório entre 0 (incluindo o 0) e 1 (não incluindo o 1 – ex: 0.9999999...).

Saiba mais sobre o objeto Math aqui (texto em inglês).

Em seguida, transformamos o número retornado em uma string usando toString() e damos à string um argumento de 32 para que tenhamos uma string de fato, não um número binário, hexadecimal ou octal.

Depois, usamos substring(2,5) para "fatiar" a string e manter seu tamanho. Logo após, seguimos o mesmo procedimento para obter outro trecho aleatório da string e, por fim, "somamos" os dois trechos de string usando +.

Não se esqueça de adicionar uma instrução return para podermos retornar a string aleatória.

Lembre-se de que essa não é a única maneira de gerar strings aleatórias. Você também pode usar o método mencionado abaixo para alcançar a mesma meta:
function getrandom() {
  var text = "";    
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  for (var i = 0; i < 5; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

De volta a index.html, adicionamos o JQuery, pois será mais fácil atingir nossos objetivos se o utilizarmos. Colocamos o JQuery no final da tag body, mas antes da tag script que chama o arquivo main.js.

Voltemos ao main.js.

Vamos criar uma função chamada geturl, que receberá o valor da caixa do input, verificará esse valor e o retornará:

function geturl(){
  var url = document.getElementById("urlinput").value;
  var protocol_ok = url.startsWith("http://") || url.startsWith("https://") || url.startsWith("ftp://");
  if(!protocol_ok) {
    newurl = "http://"+url;
    return newurl;
  } 
  return url;
 }

Na função geturl, primeiro, armazenamos o valor da caixa input na variável url. Em seguida, verificamos se os protocolos do URL estão de acordo ou não. Se o protocolo não começar com http://, https:// ou ftp://, adicionamos http:// ao início do URL e, em seguida, o retornamos.

De fato, esse não é um método seguro. Deveríamos usar uma expressão regular para validar os URLs! No entanto, eu quis deixar este artigo fácil de entender.

Precisaremos, agora, de uma outra função para alterar o hash na barra de endereço. Vamos criá-la:

function genhash(){
  if (window.location.hash == ""){
    window.location.hash = getrandom();
  }
}

Primeiro, conferimos se o local do hash está vazio. Se estiver, adicionamos um hash aleatório à barra de endereço.

Por exemplo: se o seu URL for https://exemplo.com/#abcd, o valor de window.location.hash será #abcd.

Em seguida, trabalharemos na nossa função principal, shorturl(). Vamos lá!

function shorturl(){
  var longurl = geturl();
  genhash();
  send_request(longurl);
}

Primeiro, armazenamos o URL longo na variável longurl. Depois, adicionamos um hash aleatório à barra de endereços para que possamos usar o URL como URL curto. Em seguida, chamamos send_request() com o argumento longurl. Nessa função, enviamos uma solicitação em JSON para que jsonstore armazene o URL longo com um link para o URL curto. Vamos, então, criar a função send_request().

function send_request(url) {
  this.url = url;
  $.ajax({
    'url': endpoint + "/" + window.location.hash.substr(1),
    'type': 'POST',
    'data': JSON.stringify(this.url),
    'dataType': 'json',
    'contentType': 'application/json; charset=utf-8'
  });
 }

Aqui, usamos o JQuery para enviar a solicitação do JSON para o endpoint+"/" + nosso hash de string aleatório a partir da barra de endereços. Exemplo:

https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1/abcd

Assim, sempre que enviarmos uma solicitação de get para o URL acima, teremos o URL longo como data.

Importante: adicione a função send_request() antes da função shorturl(). Do contrário, isso não funcionará.

Para saber mais sobre a função Ajax do JQuery, visite este link (em inglês), Para saber mais sobre JSON, vá aqui (em português).

Agora, usaremos o código para obter por GET o URL longo associado ao URL curto inserido na barra de endereços:

var hashh = window.location.hash.substr(1);
if (window.location.hash != "") {
  $.getJSON(endpoint + "/" + hashh, function (data) {
    data = data["result"];
    if (data != null) {
      window.location.href = data;
    }
  });
}

O código acima será executado sempre que colocarmos um URL curto na barra de endereços (por exemplo, https://url_curto.com/#abcd).

Primeiro, armazenamos o valor do hash do URL na variável hashh.

Exemplo: se nosso URL curto for https://reduzido.com/#abcd, o valor do hash será #abcd.

Em seguida, verificamos se o local do hash está vazio ou não. Se não estiver vazio, enviamos uma solicitação de get para o endereço, endpoint + hashh.

Exemplo:https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1/abcd

Como de costume, se tudo estiver certo, obteremos o URL longo a partir de data (o array data em JSON), e, a partir daí, extraímos o resultado com data["result"].

O valor de data será semelhante a {"result":longurl,"ok":true}, onde o URL longo é o URL que você reduziu.

Nosso redutor de URL está quase completo! Copie e cole um URL longo na caixa de input. Em seguida, clique no botão Reduzir o URL! Copie o link na barra de endereços — é o seu URL reduzido!

KdWpDkClj9ekuuHM47166AbVxkxAT0GlFXvN

Alguns truques úteis

  • Podemos adicionar uma função para copiar automaticamente o URL curto quando o usuário clicar em Reduzir o URL usando bibliotecas como SimpleCopy ou ClipboardJS — elas copiarão o URL curto que, neste momento, estará na barra de endereços.
  • Se usarmos o SimpleCopy, podemos adicionar simplecopy(window.location.href); ao final da função shorturl() para copiar o URL curto sempre que um URL for reduzido.
  • Este redutor de URL simples depende de bibliotecas de terceiros, como a jsonstore. Assim, pode não ser uma boa ideia reduzir algum URL longo confidencial com ele.
  • É possível hospedar um projeto inteiro usando o Github/Gitlab e definir um CNAME simples. Pronto — seu redutor de URL pessoal e novo está pronto! Você pode usar qualquer serviço de hospedagem de sites estáticos para hospedar seu redutor de URL.
  • Você pode encontrar o código fonte inteiro do projeto no GitHub

Por hoje é só! Este é meu primeiro guia técnico. Peço desculpas, portanto, por qualquer erro que eu possa ter cometido.

Se encontrar algum problema, fique à vontade para comentar com o autor em seus perfis do Facebook ou do Twitter!

Obrigado pela leitura!