Руководство о том, как сделать свой собственный сокращатель URL.

В этой статье я покажу вам, как вы можете сделать свой собственный сокращатель URL. Перед тем, как начать делать сокращатель URL. Давайте сначала разберемся с некоторыми основами

Что такое сокращатель URL?

Сокращение URL-адресов на самом деле является услугой, предоставляемой веб-сайтом. Этот сервис превращает ваши длинные и некрасивые URL-адреса в короткие и легко запоминающиеся URL-адреса. Возможно, вы сталкивались с несколькими сокращателями URL-адресов, такими как Bitly, Cuttly и некоторыми другими. Все они имеют одну и ту же цель — сократить URL-адрес.

Что вы будете делать?

Это то, что мы делаем, стиль не выдающийся, я это знаю. Я сосредоточусь больше на функциональности и основах, чтобы вы поняли истинную концепцию создания сокращателя URL. Итак, вы видите, что он преобразует мою исходную ссылку: https://www.youtube.com/watch?v=dQw4w9WgXcQ в короткую ссылку: ( https://shrtco.de/uRfG3I).

Шаги, необходимые для создания нашего сокращателя URL

Мы должны выполнить следующие шаги, чтобы сделать наш сокращатель URL

  • HTML — для разметки
  • CSS — для стилизации
  • JavaScript — чтобы сделать наш сокращатель URL-адресов функциональным, вызывая API и прослушивая события.

Шаг 1: HTML

Теперь давайте начнем добавлять HTML. Теперь я собираюсь создать простую страницу с формой, в которой есть кнопка и поле ввода, куда пользователь может вставить исходный URL-адрес. Это все, что нам нужно, а затем я включу форму в родительский элемент div, просто чтобы добавить фон и идеально выровнять форму по центру.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>URL Shortener</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <h1>URL Shortener</h1>
      <form id="form">
          <input id="link" type="text" placeholder="Enter your link">
        <input type="submit" value="shorten it!">
      </form>
    <ul id="parent" class="shortLinks">
    </ul>
  </div>
  <script src="script.js"></script>
  
</body>
</html>

Шаг 2: CSS

Теперь, когда мы написали HTML, нам нужно добавить файл CSS в файл HTML. И вы можете сделать это, используя тег ссылки внутри ваших тегов заголовка в HTML, как описано во фрагменте ниже.

<head>
 <link rel=”stylesheet” href=”style.css”>
</head>

Теперь приступим к написанию CSS. Первое, что я делаю в своем файле CSS, — удаляю поля и отступы всех элементов. И я делаю это, используя "*", который представляет все элементы в HTML, и я устанавливаю поля и отступы равными нулю.

стиль.css

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap');
*{margin:0;
  padding:0;
  box-sizing:border-box;
}

Теперь я стилизую родителя, задав ему ширину и высоту, а также отображение гибкости. Я устанавливаю гибкий дисплей, чтобы я мог выровнять форму по центру, установив justify-content в центр.

.wrapper{width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    flex-direction:column;
    background-image:linear-gradient(135deg, rgb(30, 110, 162), salmon);
    padding:50px 0;
  }

Я решил добавить градиент, потому что он выглядит круче.

Теперь давайте стилизуем другие элементы, для которых я написал код, вот он:

ul {list-style-type:none;
    
  }
  li{margin:30px 0;
    font-size:2em;
    font-family: 'Source Sans Pro', sans-serif;
    color:lightblue;
  }
  a {color:inherit;}
  form{margin:50px 0;
    width:100%;
    max-width:500px;
  }
  input{
      margin:0 15px;
    font-size:20px;
    padding:10px;
    border:5px solid lightgrey;
    outline:none;
  }
  
  input[type=submit]{padding-left:30px;
    padding-right:30px;
  }
  input:focus{outline:none;}
  
  h1{font-size:50px;
    font-family: 'Source Sans Pro', sans-serif;
    color:white;
    font-weight:900;
    font-size:5em;
    text-transform:uppercase;
    
  }

Шаг 3: JavaScript

Итак, теперь мы добавили HTML и CSS, чтобы все выглядело хорошо. Теперь нам также нужно добавить JavaScript, чтобы он работал. С помощью JavaScript мы сможем получать пользовательский ввод и обрабатывать его. Мы будем использовать fetch для отправки запроса на получение в службу API. Служба API, которую я использую, называется shortcode. Прежде всего, давайте получим пользовательский ввод из формы. И мы также должны выбрать контейнер, в котором мы хотим вывести короткую ссылку.

script.js

const form = document.getElementById("form");
const linkInput = document.getElementById("link");
const parent = document.getElementById("parent");

Теперь нам нужно добавить прослушиватель событий на форму.

form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const originalLink = linkInput.value;
    const apiUrl = `https://api.shrtco.de/v2/shorten?url=${originalLink}`;
  
    try{
      const response = await fetch(apiUrl);
      const data = await response.json();
      console.log(data);
      let link = document.createElement("li");
      link.className = "output"
      link.innerHTML = `<a href="${data.result.full_short_link}" target="_blank">${data.result.full_short_link} </a>`;
      parent.prepend (link);
  
    }catch(e){
      
      console.error(e);
    }
  
  });

В этом коде происходит много вещей. Позвольте мне объяснить вам, что это такое. Прежде всего, мы отправляем запрос GET с помощью. Затем мы конвертируем ответ из JSON в объект JavaScript. Мы делаем это, потому что изначально наш ответ находится в формате JSON, и мы должны преобразовать его в объект JavaScript, чтобы иметь возможность его использовать. Итак, мы делаем это, используя метод. Вот так выглядит наш объект после преобразования из JSON.

Вы также можете проверить это в своей консоли с помощью console.log().

Теперь, чтобы красиво отобразить короткую ссылку, мы создаем еще один элемент, используя document.create(). Это создаст элемент динамически всякий раз, когда пользователь запрашивает короткую ссылку, а затем мы дадим это класс с помощью ( link.className = “output”; )После этого мы должны добавить текст, и мы можем сделать это с помощью link.innerHTMLметод и установите его равным короткой ссылке из объекта.

И в конце мы добавим его в родительский контейнер, чтобы новые короткие ссылки появлялись первыми, используя .prepend(link). Вместо использования prepend вы также можете использовать метод .appendChild(link);, который добавит новый элемент в конец.

Ресурсы для создания бесплатного сокращателя URL

Теперь, если вы выполнили все шаги, которые я упомянул, ваш окончательный результат будет выглядеть так. Я поделился своим результатом с помощью CodePen, чтобы вы могли увидеть все, что я сделал. И если вы что-то пропустили, вы можете проверить мой код и исправить проблемы.

Шрифт: https://fonts.google.com/specimen/Source+Sans+Pro?query=Source+Sans+Pro

Не стесняйтесь использовать код и проводить некоторые эксперименты. Или вы можете сделать свою собственную версию бесплатного сокращателя URL-адресов, внеся изменения в макет или дизайн и, возможно, добавив в него дополнительные функции.

Если вы заинтересованы в размещении бесплатного сокращателя URL-адресов, вы можете прочитать эту статью, в которой показано, как вы можете бесплатно разместить свой веб-сайт на трех разных платформах.

Первоначально опубликовано на https://uprightcodes.com 4 января 2022 г.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.