Kamus Online di Blogger via Apps Script

Membuat kamus online menggunakan Google Sheets dan Blogger adalah solusi praktis dan gratis. Anda hanya perlu menyusun daftar kata di Google Sheets, mempublikasikannya sebagai JSON menggunakan Google Apps Script, lalu menampilkannya di Blogger melalui halaman statis atau postingan menggunakan kode HTML dan JavaScript.

Berikut adalah tahapan lengkap dan langkah demi langkah untuk membangunnya:

LANGKAH 1 :

• Mempersiapkan Database di Google Sheets
• Buat lembar kerja baru melalui Google Sheets untuk menyusun daftar kosakata Anda.
• Buat dua kolom utama di baris pertama: Kata pada sel A1 dan Arti pada sel B1.
• Isi daftar kosakata Anda di bawahnya (Kolom A untuk kata, Kolom B untuk artinya).

LANGKAH 2 :

• Mengubah Spreadsheet menjadi API dengan Google Apps Script Agar data di Sheets dapat dibaca oleh blog Anda, kita perlu mengubahnya menjadi format JSON menggunakan Apps Script.
• Pada menu di atas Google Sheets Anda, klik Ekstensi > Apps Script.Hapus semua kode yang ada, lalu salin (copy) kode di bawah ini:

function doGet(e) {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  var rows = sheet.getDataRange().getValues();

  var data = [];

  

  for (var i = 1; i < rows.length; i++) {

    var row = rows[i];

    var item = {

      "kata": row[0],

      "arti": row[1]

    };

    data.push(item);

  }

  

  var result = {"kamus": data};

  

  return ContentService

    .createTextOutput(JSON.stringify(result))

    .setMimeType(ContentService.MimeType.JSON);

}

• Klik ikon Simpan (gambar disket).Klik Terapkan/Deploy di pojok kanan atas > Deployment baru.Pilih jenis Web app.
• Pada opsi Yang memiliki akses, ubah menjadi Siapa saja (Anyone).Klik Deploy.
• Anda akan menerima sebuah URL Web App (simpan URL ini, ini adalah API database Anda).

LANGKAH 3 :

• Memasang Tampilan Kamus di Blogger
• Sekarang kita akan membuat halaman pencarian di Blogger yang akan mengambil data dari URL Google Sheets Anda.
• Masuk ke dasbor Blogger Anda dan pilih menu Laman (Pages).Buat Laman Baru dan beri judul misalnya "Kamus Online".
• Ubah mode editor dari Tampilan Menulis (Compose View) menjadi Tampilan HTML (HTML View).
• Salin dan tempel (paste) kode di bawah ini ke dalam kotak editor:

<div class="search-container">

    <input type="text" id="searchInput" placeholder="Cari kata di sini..." onkeyup="cariKata()" style="width: 100%; padding: 12px; margin-bottom: 20px; font-size: 16px;">

    <div id="hasilPencarian" style="font-size: 16px; line-height: 1.6;"></div>

</div>

<script>

const SCRIPT_URL = 'MASUKKAN_URL_WEB_APP_APPS_SCRIPT_ANDA_DI_SINI';

let kamusData = [];

// Ambil data kamus saat halaman dimuat

fetch(SCRIPT_URL)

    .then(response => response.json())

    .then(data => {

        kamusData = data.kamus;

    })

    .catch(error => console.error('Error:', error));

function cariKata() {

    let input = document.getElementById('searchInput').value.toLowerCase();

    let hasilDiv = document.getElementById('hasilPencarian');

    if (input.length < 2) {

        hasilDiv.innerHTML = '';

        return;

    }

    let filtered = kamusData.filter(item => {

        return item.kata.toLowerCase().includes(input);

    });

    if (filtered.length === 0) {

        hasilDiv.innerHTML = 'Kata tidak ditemukan.';

        return;

    }

    let output = '';

    filtered.forEach(item => {

        output += `<p><strong>${item.kata}</strong>: ${item.arti}</p>`;

    });

    hasilDiv.innerHTML = output;

}

</script>

• Ganti teks MASUKKAN_URL_WEB_APP_APPS_SCRIPT_ANDA_DI_SINI dengan URL Web App yang Anda dapatkan di langkah sebelumnya (pastikan URL berada di dalam tanda kutip).
• Publikasikan laman tersebut.Kini Anda memiliki kamus online yang berfungsi penuh. Jika Anda ingin menambah, mengubah, atau menghapus kosakata, Anda cukup mengeditnya langsung di file Google Sheets tanpa perlu mengubah kode di Blogger.

Islamic Program
Kamis, 25 April 2024

Artikel Terkait