NỘI DUNG BÀI VIẾT
Trong bài viết này, mình sẽ chỉ cho bạn cách tạo trình rút gọn URL bằng Fetch API. Trước khi bắt đầu, bạn cần hiểu một số kiến thức cơ bản sau.
Rút gọn URL là gì?
Công cụ rút gọn URL là một dịch vụ được cung cấp bởi một trang web. Dịch vụ này biến các URL dài và xấu của bạn thành các URL ngắn và dễ nhớ. Bạn có thể đã gặp một số trình rút gọn URL như Bitly, Cuttly và một số công cụ khác. Tất cả chúng đều có cùng một mục đích đó là rút gọn một URL.
Tổng quan trình rút gọn URL
Đây là những gì chúng ta sẽ làm, đừng chú trọng quá về giao diện nhé. Mình đang tập trung nhiều hơn vào chức năng và những điều cơ bản để bạn hiểu khái niệm thực sự về việc tạo trình rút gọn URL.
Bạn có thể thấy rằng nó đang chuyển đổi liên kết ban đầu từ https://www.youtube.com/watch?v=dQw4w9WgXcQ thành một liên kết ngắn: (https://shrtco.de/uRfG3I).
Các bước tạo trình rút gọn URL
Hãy thử trải nghiệm trình rút gọn URL chúng ta chuẩn bị làm nhé!
Bạn phải tuân theo các bước sau để tạo 1 trình rút gọn URL:
- HTML: tạo cấu trúc giao diện
- CSS: tạo kiểu giao diện
- JavaScript: làm cho trình rút ngắn URL của chúng ta hoạt động bằng cách gọi API và lắng nghe các sự kiện
Bây giờ, hãy bắt đầu thêm 1 trang HTML gồm 1 form có 1 button và 1 input nơi người dùng có thể dán URL ban đầu.
Bước 1: 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>Code language: HTML, XML (xml)Bước 2: CSS
Bây giờ chúng ta phải nhúng 1 tệp CSS vào tệp HTML bằng cách sử dụng thẻ link:
<head>
<link rel=”stylesheet” href=”style.css”>
</head>Code language: HTML, XML (xml)Chúng ta hãy bắt đầu viết CSS. Điều đầu tiên mình làm trong tệp CSS của mình là loại bỏ margin và padding.
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap');
*{margin:0;
padding:0;
box-sizing:border-box;
}Code language: CSS (css)Tiếp theo là căn giữa màn hình:
.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;
}Code language: CSS (css)Và CSS cho một số phần tử khác:
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;
}Code language: CSS (css)Bước 3: JavaScript
Với sự trợ giúp của JavaScript, chúng ta sẽ có thể lấy thông tin đầu vào của người dùng và xử lý nó. Mình sử dụng fetch để gửi request đến API Service. API Service mà mình đang sử dụng là “shortcode”. Trước hết, hãy lấy thông tin đầu vào của người dùng từ form.
const form = document.getElementById("form");
const linkInput = document.getElementById("link");
const parent = document.getElementById("parent");Code language: JavaScript (javascript)Tiếp theo là hàm xử lý sự kiện khi submit:
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);
}
});Code language: JavaScript (javascript)Có rất nhiều thứ đang xảy ra trong đoạn mã này. Trước hết, chúng ta gửi 1 GET request. Sau đó, chuyển đổi response từ JSON sang Object trong JavaScript để có thể sử dụng nó bình thường. Đây là đối tượng của chúng ta sau khi chuyển đổi từ JSON.
Bạn cũng có thể kiểm tra nó trong Console của mình bằng cách sử dụng console.log().
Bây giờ để hiển thị liên kết ngắn một cách độc đáo, chúng ta sẽ tạo một phần tử khác bằng cách sử dụng document.create(), điều này sẽ tạo một phần tử động bất cứ khi nào người dùng yêu cầu một liên kết ngắn và sau đó chúng ta sẽ cấp cho nó 1 class bằng cách sử dụng (link.className = “output”;).
Sau đó, chúng ta phải thêm văn bản bằng cách sử dụng phương thức link.innerHTML và đặt nó bằng liên kết ngắn từ đối tượng.
Và thế là chúng ta đã hoàn thành 1 trình rút gọn URL bằng Fetch API cực kỳ đơn giản.
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
