を使用してURL短縮ウェブサイトを作る

この記事では、私がどのようにして、また、URL短縮ウェブサイトを作ることができますを教えてくれます.私たちが作るつもりの結果をチェックしてください.here .

概要

最初に、このプロジェクトの要件と依存関係について話します.
このプロジェクトではAxios HTTPリクエストを作成するには、(同じようにするためにフェッチAPIのXML要求を使用することができます)とHint.css ヒント(必要ではない).
基本的に上記のような図書館は必要ありませんでした.彼らはここで私たちの仕事をより簡単にし、多くの時間を節約します.
ロジック/ワーキング
我々は、ユーザーが彼のリンクを貼り付けることができる入力タグを追加し、'短縮ボタンをクリックします.そのボタンをクリックすると、Axiosリクエストが解凍されます.しかし、これは簡単です、そして、それはそうです!APIの応答を処理する方法を知っている人、JSONデータと複数のケースのエラーを管理する場合.
初心者として、私はそれぞれのすべてのステップは良い例で上記のカバーしている心配する必要はありません.

始める

まず第一に、我々が必要とするものは、それがよく見えるように良いデザインです.私はすでにこのプロジェクトのウェブサイトを設計しています.

(しかし、デザインが悪いならば、私はデザイナーでなくて残念です)
このデザインでは見出し、サブ見出し、リンクを貼るための入力タグ、変換ボタンと結果を表示するための3つのボックスがあります.
私は出力を表示するためのボタンタグを使用しました(入力タグを使用することもできます).
あなたが欲しいならば、あなたは始めから、または、あなたが沿って続くか、これで若干の時間スタートを保存したいならば、ウェブサイトを作ることができますcodepen (基本的なHTMLとCSS用).

onclickイベントの追加

まず最初に、「変換」ボタンをオンにします.

// function name is 'shorten'
<button type="submit" class="shorten-button font-2" onclick="shorten()">
    Convert
</button>

次に、この関数をjsで定義します:

const shorten = () => {
    console.log('button clicked')
}

あなたがCodepenの外で編集しているならば、JSファイルをリンクするのを忘れないでください.
それから、ボタンがクリックされるとき、メッセージはコンソールに現れなければなりません.

Axiosでのリクエスト

ここで、ボタンがクリックされたときにAxiosリクエストを処理します.
ここでaxosを知っていないでください.

Axiosは、使いやすいAPIをスポーツして、ブラウザーとノードの両方で使われることができる人気の、約束ベースのHTTPクライアントです.

それは構文は超簡単で初心者フレンドリーです.

基本的なaxos構文

axios.get('API url')
.then((response) => {
    // if the request was Sucessful and no errors were caught
    console.log(response)
})
.catch((error) => {
    // if errors were there.
    console.log(error)
})

Axiosを使用する前に、AxiosパッケージをHTMLファイルにリンクしないでください

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

API呼び出しの作成

URL短縮のために、我々は無料のURL短縮APIプロバイダーを使用しますSHRTCODE . あなたはウェブサイトを訪問し、より多くの情報のためのドキュメントを読むことができます.
APIを呼び出すための主なリンクです.

https://api.shrtco.de/v2/shorten?url=YOUR_URL

ここで' get 'メソッドのaxiosリクエストへのリンクを追加します.

let longUrl = 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals'

axios
.get(`https://api.shrtco.de/v2/shorten?url=${longUrl}`)
.then((responseData) => {
    console.log(responseData);
})
.catch((err)=> {
    alert('Error check your connectivity or link')
})

ここでは、get stringメソッドにURLを追加するためにテンプレート文字列を使用しています.
このAPIは無料(5 - 10秒)の応答を与えるためにいくつかの時間がかかりますので、ちょうどそれまで待つ.こちらがCodepen Example を呼び出します.
いくつかの時間後に我々はJSONデータの形式で応答を持って、私たちは後で使用するための変数に格納されますか、エラーがキャッチされた場合、我々は単に警告'接続エラーやリンクを確認します.
しかし、私たちは毎回同じリンクを与えたり、新しいリンクを持っているたびにJSを変更することはありません.したがって、入力タグからValue属性でリンクを取得します.

let  longUrl  =  document.querySelector("#url-box").value;
// we will also declare a variable for later storage of processed url
let shortUrl; 

今までのところ、完全なURL、JSONリクエスト、および処理されたデータを扱う.
JSONデータの主な情報を取得します.

処理されたURLはfull_short_link 内部はresult どれがdata .
さて、どのようにこのURLを取得するには?
簡単に行うresdata.data.result.full_short_link のリンクを取得するにはthen . ヒアresdata APIからの応答データです.
Ex :

axios .get(`https://api.shrtco.de/v2/shorten?url=${longUrl}`)
    .then((resdata) => {
        //storing Processed URL in already declared variable
        shortUrl  =  resdata.data.result.full_short_link;
        console.log(shortUrl)
        //check console for Processed URL or errors
    })
    .catch((err) => {
        alert("Error check your connectivity or link");
    });

現在、仕事の半分はされます!おめでとう.

HTMLへのURL表示ボックスの追加

何が残っている私たちは大きなではない画面に表示する必要があります.
まず第一に
私たちは、要素(DIVタグ)をつくって、それからそれから変数にそれを格納する機能を作ります.innerHtml プロパティは、このマークアップ(文字列)を渡し、変数を渡しますlongUrl , shortUrl ) テンプレート文字列の使用

` <div class="item">
    <div class="long-url">
        <div class="title font-1">
            Long URL
        </div>
        <button id="long-url" class="font-2">
            ${longUrl} 
         </button>
    </div>
    <div class="short-url">
        <div class="title font-1">
            Short URL
        </div> 

        // providing shortUrl variable in value attribute for the copy function⏬
        <button id="short-url" class="font-2" value='${shortUrl}' onclick='copyLink(this)'>
            ${shortUrl}
        </button>
    </div>
</div> `

// compressed version (spaces and tabs removed) because JS will
// give errors on 'tab' and 'enter'

<div class="item"><div class="long-url"><div class="title font-1">Long URL</div> <button id="long-url" class="font-2"> ${longUrl} </button></div><div class="short-url"><div class="title font-1">Short URL</div> <button id="short-url" class="font-2 hint--bottom" aria-label="Click link to Copy" onclick='copy(this)' value='${shortUrl}' onclick='copyLink(this)'>${shortUrl}</button></div></div>

そして最後に、このタグは親リンクコンテナに追加されます.私は、これがちょっと複雑であるということを知っています、しかし、これはあなたが明確になるのを援助します:

//Final working:
function  addResult(longUrl, shortUrl) {
    let parentEle = document.querySelector("#shortened-links");
    let data = `<div class="item"><div class="long-url"><div class="title font-1">Long URL</div> <button id="long-url" class="font-2"> ${longUrl} </button></div><div class="short-url"><div class="title font-1">Short URL</div> <button id="short-url" class="font-2" value='${shortUrl}' onclick='copyLink(this)'>${shortUrl}</button></div></div>`;

    let  newEle  =  document.createElement("div");
    newEle.innerHTML  =  data;
    parentEle.appendChild(newEle);
}

パスしますlongUrl and shortUrl パラメータとして.
では、この関数をthen APIからデータを取得するときに実行されるメソッドです.

.then((resdata) => {
    shortUrl  =  resdata.data.result.full_short_link;
    addResult(longUrl, shortUrl);
})

そして、何が起こるかは、このマークアップがHTMLに加えられるとき、データが取り出されて、私たちがすでにCSSで彼らの' Class '属性を整えたので、マークアップが実行されて、処理されますitem 画面上に表示されます.

コピーリンク機能

短いリンクボックスをクリックすると、CopyLink関数が実行されます.

この関数は次のようになります.

function  copyLink(tag){
    let  text  =  tag.value;
    // copy link to clipboard
    navigator.clipboard.writeText(text);
}

この関数のパラメータはタグで、引数はthis キーワード.Ex :

// usage of this function:
onclick='copyLink(this)'

this キーワードは引数を通して完全なボタンタグを通過するので、後でCopylink funcでValueプロパティを使用できるようになります.
なぜ私は出力を表示するためのボタンタグを使用して、付加価値属性をshortUrl タグ.
(入力タグも使えます).
今では基本的な作業が行われています.here
私はヒントを使用して追加Hint.css (ドキュメントを読んでください.

エラー処理とアニメーションについて

今それはあなたにこのサイトで追加するにはどのくらいのアニメーションuptoです.
エラー処理については、エラーが発生するような状況を想定することができます
'入力タグが空で、ボタンがクリックされている場合、

// we can do something like this:
if (longUrl){
    //if their is value in input tag then only Axios request is sent 
    axios.get()....
}else{
    alert('Enter some data first!!')
}

今、あなたが完全にあなたにアップされるこのプロジェクトでより多くのカスタマイズをしたいならば.
あなたが質問をするならば、コメント部で彼らに尋ねてください、そして、このポストがあなたを助けたならば、同じように去るのを忘れないでください.😊
デボンによるポスト.それが助ける望み!