GoogleスプレッドシートAPIをDBとして使用してハッシュタグを作成するサイトを作成

アクセスサイト:https://taghaebwa.netlify.app/
ダウンジャケット登録:https://github.com/Hwangsee/tag-project-test

緒論

勉强したいときは「勉强したい…」このような考えがあれば、いつも失敗するようだ.どんなに好きなことでも、明確な目標がなければ、漠然としているので、体が動かない.だから私が開発を学ぶことを決心したとき、私は個人プロジェクトを行います.やりたいことをするために、どうすればいいかを学び、コードで挿入する過程はとても楽しかったです.完成した時に達成感を感じることができるのは、私にもっと適した学習方法です.
今回用意した個人プロジェクトは、プラットフォームで働く友人の考えから始まった.友人がラベルを作るとき、キーワードを探して一つ一つ入力する仕事が繰り返されて苦労していると言っていたので、ちょうどjavascriptを勉強しているので、繰り返しの仕事を減らすという確固たる抱負を持って、ウェブサイトを作ることにしました.

n/a.ターゲット

ユーザーの要求に従ってウェブサイトを作成します.

ユーザーのアクセスを容易にするために、Googleスプレッドシートをデータベースとして使用し、ユーザーがデータを追加/変更できるようにします.

ユーザー・スキーマ

ユーザーがサイトに登録すると、カテゴリ別に整理されたラベルが表示されます.

タグをクリックして「#タグ」テキストを生成します.

入力ウィンドウで直接ラベルを入力できます.

コピーボタンを押すと、入力したラベルをコピーできます.

使用するテクノロジー

HTML

CSS

JavaScript

JQuery

しゅろんり

GoogleスプレッドシートAPIを使用したデータのインポート

var query = function (sql, callback) {
    var url = 'https://spreadsheets.google.com/a/google.com/tq?',
        params = {
            key: '스프레드 시트 키 값',
            tq: encodeURIComponent(sql),
            tqx: 'responseHandler:' + callback
        },
        qs = [];
    for (var key in params) {
        qs.push(key + '=' + params[key]);
    }
    url += qs.join('&');
    return jsonp(url); // JSONP 도우미 호출
}

var my_callback = function (data) {
    data = parse(data); // 데이터 parse
    //불러온 데이터 조작
    for (var i = 0; i < datas.length; i++) {
        if (JSON.stringify(datas[i]) == JSON.stringify(data)) {
            return false;
        }
    }
    datas.push(data);

    // HTML 헤더의 값을 추출
    var col = [];
    for (var i = 0; i < data.length; i++) {
        for (var key in data[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }
    // 받아 온 데이터 커스텀 
    var table = document.querySelector("#tagTable table");
    if (table === null || table == undefined) {
        // 동적 테이블 생성
        table = document.createElement("table");

        // HTML 테이블 헤더 생성
        var tr = table.insertRow(-1);
        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");
            th.innerHTML = col[i];
            tr.appendChild(th);
        }
        // HTML 테이블 ROW 생성
        for (var i = 1; i < data.length; i++) {
            tr = table.insertRow(-1);
            for (var j = 0; j < col.length; j++) {
                var text = data[i][col[j]];
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = data[i][col[j]];
                var text = data[i][col[j]];
                //tabCell.click
                tabCell.innerHTML = '<span class="select-data input-tag" data-tag="' + text + '">' + text + '</span>';
                tabCell.setAttribute("onclick","setDataToTag('" + text + "');");
                //tabCell.innerHTML = '<span class="select-data input-tag" data-tag="' + text + '" onclick="setDataToTag(\'' + text +'\')">' + text + '</span>';
            }
        }
        // 마지막으로 JSON 데이터로 새로 만든 테이블을 컨테이너에 추가
        var divContainer = document.getElementById("tagTable");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        $("#tagTable tr td").each(function(i, elem) {
            if($(this).find(".select-data").text() != "") {
                $(this).addClass("select-tag");
            }
        });
    } else {
        // 테이블 행 동적 추가
        for (var i = 1; i < data.length; i++) {
            var tr = table.insertRow();
            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = data[i][col[j]];
            }
        }
    }

}
query('select *', 'my_callback');

GoogleスプレッドシートAPIを呼び出して受信したデータをJSONに変換し、テーブルを動的に生成して画面に送信するコードです.
この項目では使用されていないが、クエリーを使用してデータをフィルタするを使用することもできる.
Googleスプレッドシートに入力したデータ

データを受信し、ダイナミックテーブルのページを作成します.

CSSで高さをheight: 380px属性に固定し、overflow-y: auto属性を追加し、対応する寸法を超えてスクロールを生成します.

ラベルの論理の追加/削除

				
		var // 태그 변수
        wrapperTags = $('.tags .wrapper-tags'),
        viewTags = $('.tags .wrapper-tags .view-tags'),
        inputTag = $('.tags .wrapper-tags .input-tag'),
        btnAddTags = $('.tags .add-tags'),
        alertErrorInAdd = $('.show-all-tags .alert-danger'),
        showTagsWhenResult = $('.show-all-tags .show-tags'),
        showCountCharactersTag = $('.tags .show-count-all .count-character-tag'),
        maxCharactersLengthTag = 20,
				tags = []; //추가한 태그 배열

        clickAddTag = (textTag) => {
            tags.push(textTag);
            var newTag = '<span class="tag" data-tag="' + textTag + '">' + textTag + '<i class="fa fa-close"></i></span>';
            inputTag.before(newTag);
        },
        addTag = (textTag) => {
            var newTag = '<span class="tag" data-tag="' + textTag + '">' + textTag + '<i class="fa fa-close"></i></span>';
            inputTag.before(newTag);
        },
        removeTag = function (textTag, animateRemove = 'hard') {
            var indexTag = tags.indexOf(textTag);
            tags.splice(indexTag, 1);
            if (animateRemove === 'hard') {
                viewTags.find('.tag[data-tag="' + textTag + '"]').remove();
                inputTag.focus();
            } else if ('slideLeft') {
                viewTags.find('.tag[data-tag="' + textTag + '"]').animate({
                    'width': 0,
                    'padding': 0,
                    'margin': 0
                }, 300, function () {
                    $(this).remove();
                    inputTag.focus();
                });
            }
        };

ラベルをクリックするとき、またはユーザー入力画面にラベルを追加するときに、ラベル配列にラベルの値を追加し、spanラベルを動的に生成して画面に送信します.
タグを削除する場合、xキーを押してタグを削除すると、SlideLeftがパラメータに渡され、jqueryのアニメーション関数が呼び出され、0.3秒後にタグが削除されるように見えます.

viewTags.on('click', '.tag i', function (e) {
        var textTag = $(this).parent().attr('data-tag');
        removeTag(textTag, 'slideLeft');
    });

backspaceを使用してタグをクリアする場合はパラメータは指定されません.

			else if (key === 8 || key === 46) {
            if (numRepaierRemoveTag === 0) {
                var lastTag = tags[tags.length - 1];
                removeTag(lastTag);
                inputTag.val(lastTag);
            }
        }

「≪ラベルの作成｜Create Label｜Hfm≫」ボタン

各ボタンにdata-layerプロパティを追加して、ボタンを区別します.

btnAddTags.on('click', function () {
        //선택된 태그가 없을 때
        if (!tags.length) {
            // 에러 메세지 보여줌
            alertErrorInAdd.slideDown(200);
            showTagsWhenResult.fadeOut(10);
        } else {
            var AllTagsInArray = '';
            tags.forEach((val, i) => {
                var dataLayer = $(this).data('layer');
                AllTagsInArray += showAllTags(val, i, dataLayer);
            });
            //마지막 쉼표를 제거하는 정규식 사용
            showTagsWhenResult.find('.tags').html("<span class='value'>" + AllTagsInArray.replace(/,\s*$/, "") + "</span>");
            showTagsWhenResult.fadeIn(500);
        }
    });

// 태그 생성
var showAllTags = (val, i, dataLayer) => {
    if(dataLayer == 'layer1') {
        return "#" + val + " ";
    }
    else if (dataLayer == 'layer2') {
        return  val + ", " ;
    }
    else if (dataLayer == 'layer3') 
    {
        return "#" + val + ", ";
    }
};

タグが選択されていない場合は、slideDownメソッドを使用してエラーメッセージを表示します.
ラベルが正常に追加されている場合は、配列内のラベルにラベルまたはカンマを追加してテキストにします.

/* 클립보드 복사 이벤트 */
$(document).ready(function() {
    $("#tagTitle").click(function() {
        var copyTxt = document.getElementById('tagsBox').innerText;
        //input 태그에서만 작동하는 select 메소드를 이용하기 위해 teaxarea 엘리먼트 생성
        const textarea = document.createElement('textarea');
        textarea.textContent = copyTxt;
        document.body.append(textarea);
        textarea.select();
        document.execCommand('copy');
        textarea.remove();
        alert('클립보드에 복사 되었습니다.');
    });
});

Javascriptからクリップボードにコピーするには、select()関数を使用して全文を選択する必要があります.
select()関数を使用するために、コピーするテキストはtextboxまたはinputラベルにある必要があるため、textbox別名が一時的に生成されます.

の最後の部分

導入後、私の製品が使いやすいと友人から通知を受け、喜んでいます.
ラベルが多くなると、スクロール時間が長くなる問題や重複ラベルを入力できます.これは開発時には考えられませんが、導入後にフィードバックで変更できます.
修正過程も楽しかったです.
このプロジェクトでは、JavaScriptとJクエリーをよりよく理解できます.
プロジェクトの進行中にバニラJavaScriptを使って個人プロジェクトを行うという新しい目標がありました.
しばらくはJavaScriptの勉強に夢中になると思います.
面白い挑戦ができることを望みます!😆

リファレンスサイト

Googleスプレッドシートからデータをインポート

ラベルの追加