của Palash Bauri
Bạn có thể đã sử dụng công cụ rút ngắn URL trước đây, chẳng hạn như bit.ly, goo.gl. Chúng rất hữu ích để rút ngắn các URL dài để bạn có thể dễ dàng chia sẻ chúng với bạn bè, gia đình hoặc đồng nghiệp của mình.
Bạn có thể tự hỏi làm thế nào những thứ này hoạt động. Để hiểu cách thực hiện, chúng ta cần xem xét kỹ hơn về công cụ rút ngắn URL — vì vậy chúng ta sẽ xây dựng một công cụ đơn giản! Với nhiệm vụ đó, chúng ta sẽ học một số điều mới cũng như hiểu cách hoạt động của trình rút ngắn URL.
Hôm nay, chúng ta sẽ xây dựng một công cụ rút ngắn URL đơn giản không cần hệ thống cơ sở dữ liệu để lưu trữ nó. Thay vào đó, chúng tôi sẽ sử dụng jsonstore.io. Tôi sẽ giả định rằng bạn đã biết một số HTML & JavaScript cơ bản.
Vì vậy, không có gì khó chịu, hãy bắt đầu xây dựng. . .
Bắt đầu với HTML
Chúng ta sẽ chỉ cần một hộp nhập văn bản, một nút và một thẻ tập lệnh để tạo trình rút ngắn URL của mình.
Đầu tiên tạo một tệp HTML có tên index.htmlvì chỉ cần có hai yếu tố đó (hộp nhập văn bản và nút).
Vì vậy, hãy bắt đầu thêm ba yếu tố chính của chúng tôi:
<html> <body> <input type=”url” id=”urlinput”> <button onclick=”shorturl()”>Short The URL</button> <script src=”main.js”></script> </body></html>Như tôi đã chỉ cho bạn đoạn mã trên, tôi đã tạo một tệp HTML đơn giản. Bên trong các thẻ body, chỉ có ba yếu tố: một inputmột button và một script.
Yếu tố đầu tiên là input nơi chúng tôi sẽ nhập/dán URL dài của mình. Tôi đã cho nó một tên id urlinput vì vậy sẽ dễ dàng truy cập trong JavaScript.
Phần tử tiếp theo là một button. Khi chúng tôi nhấp vào nút này, URL dài của chúng tôi sẽ được rút ngắn vì nó có một onclick chức năng sẽ được thực thi khi chúng ta nhấp vào nút. Và bên trong shorturl() sẽ có các lệnh cần thiết để rút ngắn URL.
Cuối cùng, chúng ta có một script gọi điện main.js tất cả mã JavaScript chính của chúng tôi sẽ ở đâu. đã đề cập ở trên shorturl() chức năng cũng sẽ ở đó.
Vì vậy, hiện tại, phần HTML của chúng ta đã hoàn tất. Hãy bắt đầu viết một số JavaScript
Bắt đầu viết một số JavaScript
Như chúng tôi đã trình bày ở trên, chúng tôi sẽ cần một số JavaScript để tạo công cụ rút ngắn URL của mình.
Bước 0: như tôi đã đề cập, chúng tôi sẽ sử dụng jsonstore.io để lưu trữ thông tin về URL dài của chúng tôi. Chúng tôi sẽ cần một jsonstore.io điểm cuối URL để lưu trữ dữ liệu, vì vậy bạn có thể truy cập jsonstore.io nơi bạn sẽ thấy nội dung như bên dưới:
dưới văn bản Đây là điểm cuối của bạnbạn có thể thấy một hộp văn bản có URL dài như sau:
https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1
bấm vào màu tím SAO CHÉP cái nút.
Vì vậy, bây giờ, hãy bắt đầu viết một số JavaScript. . .
Tạo một tệp JavaScript có tên main.js và bắt đầu làm theo các bước dưới đây.
Trước tiên, chúng ta phải giữ liên kết được sao chép dưới dạng một biến:
var endpoint = "https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1";Sau đó, chúng tôi cần tạo một số chuỗi ngẫu nhiên để có thể tạo liên kết giữa URL ngắn và URL dài.
Giả sử rằng chúng tôi có một URL ngẫu nhiên
abcd, công cụ rút ngắn URL đơn giản của chúng tôi được lưu trữ trên https://shortner.com và chúng tôi đã rút ngắn URL https://google.com bằng URL ngẫu nhiên đó. Vì vậy, bất cứ khi nào chúng tôi truy cập https://shortner.com/#abcd, chúng tôi sẽ được chuyển hướng đến https://google.com
Vì vậy, bây giờ hãy tạo một hàm gọi là getrandom():
function getrandom(){ var random_string = Math.random().toString(32).substring(2, 5) + Math.random().toString(32).substring(2, 5); return random_string()}Đừng lo lắng, tôi sẽ giúp bạn hiểu đoạn mã trên.
Đầu tiên, chúng tôi bắt đầu một chức năng gọi là getrandom. Sau đó, chúng tôi khởi tạo một biến gọi là random_string và cho nó một giá trị.
Math là một đối tượng Javascript tích hợp cho phép chúng ta thực hiện các tác vụ toán học trên các con số. Đầu tiên chúng tôi gọi là random chức năng từ Math , Math.random() trả về một số ngẫu nhiên trong khoảng từ 0 (bao gồm) đến 1 (không bao gồm).
Bạn có thể tìm hiểu thêm về
Mathđối tượng từ đây.
Sau đó, chúng tôi chuyển đổi số được trả về thành một chuỗi bằng cách sử dụng toString() và chúng tôi cung cấp cho nó một đối số là 32 để chúng tôi nhận được một chuỗi thích hợp không phải là nhị phân, thập lục phân hoặc bát phân.
Sau đó, chúng tôi sử dụng substring(2,5) cũng như để cắt chuỗi và duy trì kích thước của chuỗi. Sau đó, một lần nữa, chúng tôi làm theo quy trình tương tự để lấy một đoạn khác của chuỗi ngẫu nhiên và cuối cùng, chúng tôi thêm cả hai đoạn của chuỗi bằng cách sử dụng +.
Và đừng quên thêm một return câu lệnh trả về chuỗi ngẫu nhiên của chúng tôi.
Hãy nhớ rằng, đây không phải là cách duy nhất để tạo chuỗi ngẫu nhiên. Bạn cũng có thể sử dụng phương pháp được đề cập dưới đây để đạt được mục tiêu:
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;}Bây giờ trở lại index.html và thêm JQuery vì sẽ dễ dàng đạt được mục tiêu hơn nếu chúng ta sử dụng JQuery. Thêm nó vào cuối thẻ body nhưng trước main.js thẻ tập lệnh.
Bây giờ một lần nữa trở lại main.js.
Hãy tạo một chức năng gọi là geturl sẽ lấy giá trị từ hộp đầu vào, xác minh giá trị đó và trả về giá trị:
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; }else{ return url; }bên trong geturl chức năng, trước tiên chúng tôi lưu trữ giá trị của hộp đầu vào trong url Biến đổi. Sau đó, chúng tôi kiểm tra xem các giao thức URL có ổn hay không. Nếu giao thức không bắt đầu với http:// , https:// hoặc ftp:// chúng tôi thêm http:// ở đầu URL sau đó trả lại URL.
Trên thực tế đây không phải là một phương pháp an toàn. Bạn nên sử dụng biểu thức chính quy để xác thực URL của mình! Nhưng tôi muốn giữ cho bài viết này dễ hiểu.
Bây giờ chúng ta sẽ cần một chức năng khác để thay đổi hàm băm trong thanh vị trí, vì vậy hãy tạo nó:
function genhash(){ if (window.location.hash == “”){ window.location.hash = getrandom(); }}Lúc đầu, chúng tôi kiểm tra xem vị trí băm có trống không. Nếu nó trống, chúng tôi sẽ thêm một hàm băm ngẫu nhiên vào thanh vị trí.
Ví dụ: nếu URL của chúng tôi là https://example.com/#abcd thì giá trị của
window.location.hashsẽ là#abcd.
Tiếp theo, chúng tôi sẽ làm việc trên chức năng chính của chúng tôi shorturl() vậy đi thôi…
function shorturl(){ var longurl = geturl(); genhash(); send_request(longurl);}Trước tiên, chúng tôi lưu trữ URL dài trong longurl Biến đổi. Sau đó, chúng tôi thêm một hàm băm ngẫu nhiên vào thanh vị trí để chúng tôi có thể sử dụng URL làm URL ngắn. Tiếp theo chúng ta gọi send_request() với một đối số longurl. Trong chức năng này, chúng tôi gửi một yêu cầu JSON tới cửa hàng json để lưu trữ URL dài có liên kết đến URL ngắn. Vì vậy, bây giờ hãy tạo send_request() chức năng.
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’ })}Ở đây chúng tôi sử dụng JQuery để gửi yêu cầu JSON tới điểm cuối+”/” + hàm băm chuỗi ngẫu nhiên của chúng tôi từ thanh vị trí. Như một ví dụ:
https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1/abcd
Vì vậy, bất cứ khi nào chúng tôi gửi yêu cầu nhận tới URL được đề cập ở trên, chúng tôi sẽ nhận được URL dài như data.
Quan trọng: thêm send_request() chức năng trước khi shorturl() chức năng, nếu không nó sẽ không hoạt động.
Để biết thêm về chức năng Ajax của JQuery, hãy vào ĐÂY. Để biết thêm về JSON, hãy vào ĐÂY.
Bây giờ chúng tôi sẽ sử dụng mã để NHẬN URL dài được liên kết với URL ngắn được nhập vào thanh địa chỉ:
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; }});Sau đó, mã được đề cập ở trên sẽ được thực thi bất cứ khi nào chúng tôi đặt URL ngắn vào thanh địa chỉ (ví dụ: https://shorturl.com/#abcd ).
Đầu tiên, chúng tôi lưu trữ giá trị băm từ URL trong hashh Biến đổi.
Ví dụ: nếu URL ngắn của chúng tôi là https://shorted.com/#abcd , giá trị của hàm băm sẽ là #A B C D.
Sau đó, chúng tôi kiểm tra xem vị trí băm có trống hay không. Nếu nó không trống, chúng tôi sẽ gửi yêu cầu nhận đến địa chỉ, endpoint + hashh.
Ví dụ :
https://www.jsonstore.io/8ba4fd855086288421f770482e372ccb5a05d906269a34da5884f39eed0418a1/abcd
Và như thường lệ, nếu mọi thứ đều ổn, chúng tôi sẽ lấy URL dài từ dữ liệu là dữ liệu mảng JSON và từ đó chúng tôi trích xuất kết quả bằng data["result"].
Giá trị của dữ liệu sẽ tương tự như thế này
{"result":longurl,"ok":true}trong đó URL dài là URL bạn đã rút ngắn.
Công cụ rút ngắn URL của chúng tôi gần như đã hoàn tất! Sao chép-dán một URL dài vào hộp nhập, sau đó nhấp vào Rút ngắn URL cái nút! Sao chép liên kết từ thanh địa chỉ — đó là URL ngắn của bạn!
Một số thủ thuật hữu ích
- Chúng ta có thể thêm chức năng tự động sao chép URL ngắn khi người dùng nhấp vào Rút ngắn URL bằng cách sử dụng các thư viện như SimpleCopy hoặc ClipboardJS — chúng sẽ sao chép URL ngắn hiện có trong thanh vị trí.
- Nếu sử dụng SimpleCopy, chúng ta có thể thêm
simplecopy(window.location.href);ở cuối củashorturl()chức năng sao chép URL ngắn bất cứ khi nào nó rút ngắn URL. - Trình rút ngắn URL đơn giản này dựa trên lib của bên thứ ba, chẳng hạn như cửa hàng json vì vậy không nên rút ngắn một số URL dài bí mật với nó.
- Bạn có thể lưu trữ toàn bộ dự án trong các trang Github/Gitlab và thiết lập một CNAME đơn giản. Vậy là xong — công cụ rút ngắn URL cá nhân hoàn toàn mới của bạn đã sẵn sàng! Bạn có thể sử dụng bất kỳ dịch vụ lưu trữ trang web tĩnh nào để lưu trữ công cụ rút ngắn URL của mình.
- Bạn có thể tìm thấy mã nguồn đầy đủ của dự án trên GITHUB
Điều này là dành cho hôm nay! Đây là hướng dẫn kỹ thuật đầu tiên của tôi, vì vậy tôi xin lỗi nếu có sai sót.
Nếu bạn tìm thấy bất kỳ vấn đề hoặc sai lầm nào, hãy cho tôi biết trong phần bình luận bên dưới?.
Hoặc ping ee trên Facebook hoặc Twitter!
Hòa bình!
