&> /Ibad

Emoji DB Search Scraper

Emoji telah menjadi bagian penting dalam komunikasi digital, memberikan ekspresi tambahan pada pesan teks.

Scrape

Muhamad Nur Ibad

11 Januari 2025•1 menit baca

Membuat Fitur Emoji Search dengan JavaScript: Panduan Lengkap

Emoji telah menjadi bagian penting dalam komunikasi digital, memberikan ekspresi tambahan pada pesan teks. Tetapi, bagaimana jika Anda ingin mencari dan mendapatkan daftar emoji berdasarkan kategori tertentu secara otomatis? Artikel ini membahas sebuah script JavaScript sederhana yang dapat digunakan untuk melakukan pencarian emoji menggunakan scraping dari situs emoji database.

Fitur emoji search adalah alat untuk mencari kumpulan emoji berdasarkan kata kunci tertentu, seperti "aesthetic name symbols" atau "happy emojis". Dengan fitur ini, Anda dapat mengakses berbagai emoji yang relevan dan menggunakannya untuk keperluan desain, komunikasi, atau pembuatan konten.

Kode berikut menggunakan Axios dan Cheerio untuk melakukan scraping data emoji dari situs emojidb.org. Mari kita bahas langkah-langkahnya.

Kode Emoji Search

import axios from "axios";
import * as cheerio from "cheerio";

/**
 * Scraped By Kaviaann
 * Protected By MIT LICENSE
 * @description Any Request? Send Form : https://docs.google.com/forms/d/1pjcUwKnQJ92gcxGMj3ZnbHcWGOj7INIglYnM0LMmspI
 */
export async function symbols(query = "aesthetic name symbols") {
    return new Promise(async (resolve, reject) => {
        try {
            const r = await axios
                .get(`https://emojidb.org/${query
                .toLowerCase()
                .trim()
                .split(" ")
                .join("-")}-emojis`, {
                headers: {
                    "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
                },
            })
                .then((v) => v.data)
                .catch((e) => {
                throw new Error(`Failed to fetch website ${e}`);
            });

            const $ = cheerio.load(r);
            const d = $("div.emoji-list > div.emoji-ctn")
                .map((i, el) => $(el).find("div.emoji").text().trim())
                .get();
            if (!d.length)
                throw new Error(`Symbols is empty!`);
            return resolve({
                query,
                total: d.length,
                symbols: d,
            });
        }
        catch (e) {
            return reject(`Error in getSymbolList : ${e}`);
        }
    });
}

Penjelasan Fungsi

1. Dependencies:

Axios: Digunakan untuk melakukan HTTP GET request ke situs web target.

Cheerio: Digunakan untuk memparsing dan memilih elemen HTML dari respons situs web.

2. Input Query: Fungsi symbols menerima parameter query yang secara default bernilai "aesthetic name symbols". Query ini diubah menjadi format URL-friendly dengan mengganti spasi menjadi tanda strip -.

3. Scraping Data:

  • Data diambil dari elemen HTML dengan selektor .emoji-list > .emoji-ctn.

  • Hasilnya adalah daftar emoji yang diekstrak dari teks dalam elemen tersebut.

4. Hasil Akhir: Fungsi mengembalikan objek dengan format berikut:

{
    "query": "aesthetic name symbols",
    "total": 50,
    "symbols": ["✨", "🌟", "💫", "..."]
}

Error Handling

Fungsi ini juga menangani berbagai kesalahan, seperti:

  • Gagal mengakses situs (Failed to fetch website).

  • Tidak ditemukan data emoji (Symbols is empty!).

Cara Menggunakan

Berikut adalah contoh penggunaan fungsi ini dalam aplikasi JavaScript Anda:

import { symbols } from './emojiSearch.js';

(async () => {
    try {
        const result = await symbols("happy emojis");
        console.log(result);
    } catch (e) {
        console.error(e);
    }
})();

Hasilnya adalah daftar emoji berdasarkan kata kunci pencarian.

Kelebihan dan Kekurangan

Kelebihan:

  • Sederhana: Mudah digunakan dengan satu fungsi.

  • Relevan: Hasil pencarian spesifik sesuai kata kunci.

  • Dapat Disesuaikan: Anda bisa mengubah logika scraping untuk situs web lain.

Kekurangan:

  • Ketergantungan pada Situs Web: Jika struktur situs berubah, kode ini mungkin tidak berfungsi.

  • Memerlukan Koneksi Internet: Proses scraping memerlukan akses ke situs web.

Kesimpulan

Dengan kombinasi Axios dan Cheerio, Anda dapat membuat alat pencarian emoji yang kuat dan efisien. Kode ini cocok untuk berbagai proyek, seperti aplikasi chatting, generator konten estetis, atau alat desain grafis.

Jika Anda ingin memperluas fitur ini, pertimbangkan untuk menambahkan dukungan untuk berbagai situs emoji atau menyimpan hasil pencarian secara lokal untuk penggunaan offline. Selamat mencoba!

Sumber: https://whatsapp.com/channel/0029Vac0YNgAjPXNKPXCvE2e