de Palash Bauri

Cum să construiți un dispozitiv de scurtare a adresei URL doar cu HTML și JavaScript

Cum sa construiti un dispozitiv de scurtare a adresei URL

Este posibil să fi folosit anterior un dispozitiv de scurtare a adreselor URL, cum ar fi bit.ly, goo.gl. Acestea sunt utile pentru scurtarea adreselor URL lungi, astfel încât să le puteți partaja cu ușurință prietenilor, familiei sau colegilor de muncă.

S-ar putea să vă întrebați cum funcționează aceste lucruri. Pentru a înțelege cum, trebuie să aruncăm o privire mai atentă asupra unui dispozitiv de scurtare a adreselor URL – așa că vom construi unul simplu! Cu această sarcină, vom învăța câteva lucruri noi, precum și vom înțelege modul în care funcționează un dispozitiv de scurtare a adreselor URL.

Astăzi, vom construi un scurtător simplu de adrese URL care nu are nevoie de un sistem de baze de date pentru a-l găzdui. În schimb, vom folosi jsonstore.io. Presupun că știi deja câteva elemente HTML și JavaScript de bază.

Deci, fără alte întrebări, să începem să construim. . .

Începeți cu HTML

Vom avea nevoie doar de o casetă de introducere a textului, de un buton și de o etichetă de script pentru a crea scurtatorul nostru de adrese URL.

Mai întâi creați un fișier HTML numit index.html, deoarece este nevoie doar de aceste două elemente (o casetă de introducere a textului și un buton).

Deci, să începem să adăugăm cele trei elemente principale:

<html> <body> <input type=”url” id=”urlinput”> <button onclick=”shorturl()”>Short The URL</button> <script src=”main.js”></script> </body></html>

După cum v-am arătat în codul de mai sus, am creat un fișier HTML simplu. În interiorul etichetelor corpului, există doar trei elemente: un input, A button și a script.

Primul element este input unde vom tasta / lipi URL-ul nostru lung. I-am dat un nume de identificare urlinput deci ar fi ușor de accesat în JavaScript.

Următorul element este un button. Când facem clic pe acest buton, adresa URL lungă va fi scurtată pe măsură ce are un onclick funcție care va fi executată atunci când facem clic pe buton. Și în interiorul shorturl() funcția va exista comenzi necesare pentru a scurta adresa URL.

La final avem un script numit main.js unde va fi tot codul nostru JavaScript principal. Cele menționate mai sus shorturl() funcția va fi, de asemenea, acolo.

Deci, deocamdată, partea noastră HTML este completă. Să începem să scriem ceva JavaScript

Începeți să scrieți ceva JavaScript

Așa cum am arătat mai sus, vom avea nevoie de ceva JavaScript pentru a crea scurtatorul de adrese URL.

Pasul 0: după cum am menționat, vom folosi jsonstore.io pentru a stoca informații despre adresa URL lungă. Vom avea nevoie de un jsonstore.io punctul final URL pentru a stoca date, astfel încât să puteți vizita jsonstore.io unde veți vedea ceva de mai jos:

Cum sa construiti un dispozitiv de scurtare a adresei URL

Sub text Acesta este obiectivul tău final, puteți vedea o casetă de text cu o adresă URL lungă, cum ar fi aceasta:

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

Faceți clic pe violet COPIE buton.

Deci, acum, să începem să scriem ceva JavaScript. . .

Creați un fișier JavaScript numit main.js și începeți să urmați pașii de mai jos.

Mai întâi, trebuie să păstrăm linkul copiat ca o variabilă:

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

Apoi, trebuie să generăm niște șiruri aleatorii, astfel încât să putem crea o legătură între adresa URL scurtă și adresa URL lungă.

Să presupunem că avem o adresă URL aleatorie abcd, scurtatorul nostru simplu de adrese URL este găzduit pe https://shortner.com și am scurtat adresa URL https://google.com cu acel URL aleatoriu. Deci ori de câte ori mergem la https://shortner.com/#abcd vom fi redirecționați către https://google.com

Deci, acum creați bine o funcție numită getrandom():

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

Nu vă faceți griji, vă voi ajuta să înțelegeți codul de mai sus.

În primul rând, am inițiat o funcție numită getrandom. Apoi am inițializat o variabilă numită random_string și i-a dat o valoare.

Math este un obiect Javascript încorporat care ne permite să efectuăm sarcini matematice pe numere. Mai întâi am sunat la random funcție din Math , Math.random() returnează un număr aleatoriu între 0 (inclusiv) și 1 (exclusiv).

Puteți afla mai multe despre Math obiect din aici.

Apoi transformăm numărul returnat într-un șir folosind toString() și îi oferim un argument de 32, astfel încât să obținem un șir adecvat, nu binar, hexazecimal sau octal.

Apoi folosim substring(2,5) precum și pentru a felia șirul și a menține dimensiunea șirului. Apoi, din nou, urmăm aceeași procedură pentru a obține o altă bucată dintr-un șir aleatoriu și, în cele din urmă, adăugăm ambele bucăți ale șirului folosind +.

Și nu uitați să adăugați un return declarație returnând șirul nostru aleator.

Amintiți-vă, aceasta nu este singura modalitate de a genera șiruri aleatorii. De asemenea, puteți utiliza metoda menționată mai jos pentru a atinge obiectivul:

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;}

Acum reveniți la index.html și adăugați JQuery pentru că va fi mai ușor să ne atingem obiectivele dacă folosim JQuery. Adăugați-l la sfârșitul etichetei corpului, dar înainte de main.js etichetă script.

Acum reveniți din nou la main.js.

Să creăm o funcție numită geturl care va lua valoarea din caseta de intrare, o va verifica și va returna valoarea:

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;     }

În geturl funcția, stocăm mai întâi valoarea casetei de intrare în url variabil. Apoi verificăm dacă protocoalele URL sunt OK sau nu. Dacă protocolul nu începe cu http:// , https:// sau ftp:// adaugam http:// la începutul adresei URL, apoi returnați adresa URL.

De fapt, aceasta nu este o metodă sigură. Ar trebui să utilizați un regex pentru a vă valida adresele URL! Dar vreau să păstrez acest articol ușor de înțeles.

Acum vom avea nevoie de o altă funcție pentru a schimba hash-ul din bara de locație, așa că hai să-l creăm:

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

La început, verificăm dacă locația hash este goală. Dacă este gol, adăugăm un hash aleator la bara de locație.

Exemplu: dacă URL-ul nostru este https://example.com/#abcd apoi valoarea lui window.location.hash va fi #abcd.

În continuare, vom lucra la funcția noastră principală shorturl() , deci să mergem…

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

Mai întâi stocăm adresa URL lungă în longurl variabil. Apoi adăugăm un hash aleatoriu în bara de locație, astfel încât să putem utiliza adresa URL ca adresă URL scurtă. Apoi numim send_request() cu o ceartă longurl. În această funcție trimitem o solicitare JSON către jsonstore pentru a stoca adresa URL lungă cu un link către adresa URL scurtă. Deci, acum să creăm send_request() funcţie.

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’    })}

Aici folosim JQuery pentru a trimite solicitarea JSON către punctul final + ”/” + hash-ul nostru șir aleatoriu din bara de locație. Ca exemplu:

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

Deci, de fiecare dată când trimitem o solicitare de primire la adresa URL menționată mai sus, vom primi adresa URL lungă ca data.

Important: adaugă send_request() funcție înainte de shorturl() funcție, altfel nu va funcționa.

Pentru a afla mai multe despre funcția Ajax a JQuery, accesați AICI. Pentru a afla mai multe despre JSON, mergeți AICI.

Acum vom folosi codul pentru a obține URL-ul lung legat de URL-ul scurt introdus în bara de adrese:

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;        }
});

Apoi, codul menționat mai sus va fi executat ori de câte ori introducem adresa URL scurtă în bara de adrese (de ex. https://shorturl.com/#abcd ).

Mai întâi, stocăm valoarea hash din adresa URL în hashh variabil.

Exemplu: dacă URL-ul nostru scurt este https://shorted.com/#abcd , valoarea hashului va fi #abcd.

Apoi verificăm dacă locația hash este goală sau nu. Dacă nu este gol, trimitem o cerere de primire la adresă, endpoint + hashh.

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

Și, ca de obicei, dacă totul este în regulă, vom obține adresa URL lungă din datele care sunt datele matricei JSON și din aceasta extragem rezultatul cu data["result"].

Valoarea datelor va fi similară cu aceasta {"result":longurl,"ok":true} , unde adresa URL lungă este adresa URL pe care ați scurtat-o.

Scurtătorul nostru de adrese URL este aproape complet! Copiați-lipiți un URL lung în caseta de introducere, apoi faceți clic pe Scurtați adresa URL buton! Copiați linkul din bara de adrese – este adresa URL scurtă!

Cum sa construiti un dispozitiv de scurtare a adresei URL

Câteva trucuri utile

  • Putem adăuga o funcție pentru a copia automat adresa URL scurtă atunci când un utilizator face clic pe Scurtați adresa URL buton folosind biblioteci ca SimpleCopy, sau ClipboardJS – vor copia URL-ul scurt care se află în prezent în bara de locație.
  • Dacă folosim SimpleCopy, putem adăuga simplecopy(window.location.href); la sfârșitul shorturl() funcție pentru a copia adresa URL scurtă ori de câte ori scurtează o adresă URL.
  • Acest scurtător de adrese URL simplu se bazează pe lib-uri de la terți, cum ar fi jsonstore deci nu ar fi o idee bună să scurtați o adresă URL lungă confidențială.
  • Puteți găzdui întregul proiect în paginile Github / Gitlab și puteți configura un CNAME simplu. Gata – noul dvs. dispozitiv de scurtare a adresei URL personale este gata! Puteți utiliza orice serviciu static de găzduire a site-ului pentru a găzdui scurtatorul de adrese URL.
  • Puteți găsi codul sursă complet al proiectului pe GITHUB

Gata pentru astăzi! Acesta este primul meu ghid tehnic, așa că îmi cer scuze pentru orice greșeli.

Dacă găsiți probleme sau greșeli, anunțați-mă în comentariile de mai jos?

Sau ping ee on Facebook sau Stare de nervozitate!

Pace!