Belajar Croot.js, API.js, dan Webhook.cool: Panduan Basic HTTP Request untuk Pemula

PENDAHULUAN

Sebelum Mulai, Pahami Dulu 3 Konsep Ini:

1. Apa itu API?

    API adalah "pelayan restoran". Kamu minta menu (request), pelayan ambil ke dapur (server), lalu kasih ke kamu (response).

2. Apa itu Webhook?

    Webhook adalah "kotak surat". Kamu kirim data ke suatu URL, dan data itu akan tersimpan di sana. Berbeda dengan API yang harus kamu minta dulu, webhook langsung menerima data.

3. Kenapa kita pakai GitHub Organisasi?

    GitHub Organisasi memudahkan kolaborasi tim dalam satu repository. Semua anggota tim bisa mengakses dan mengelola kode bersama, serta tetap bisa menggunakan GitHub Pages untuk hosting gratis.

Tujuan : Belajar menggunakan library api.js dari croot.js.org untuk HTTP request dan mempublikasikannya di GitHub Pages (via Organisasi)

Hasil: Bisa GET data dari API dan POST ke webhook, serta diakses online via organisasi GitHub

Apa yang akan kamu pelajari:

  1. Memahami api.js sebagai ES6 module
  2. Cara melakukan GET request ke API publik
  3. Cara melakukan POST request ke webhook.cool
  4. Cara membuat repository di GitHub Organisasi
  5. Cara deploy file HTML ke GitHub Pages dari Organisasi
  6. Cara melihat hasil request di console dan halaman web

Tools yang dibutuhkan:

  • Browser (Chrome/Firefox/Edge)
  • Text editor (VS Code/Notepad++)
  • Akun GitHub (sudah punya organisasi)
  • Koneksi internet

STEP 1: Buka Website Croot.js

  1. Buka browser
  2. Ketik https://croot.js.org/ di address bar
Screenshot croot.js homepage

Klik menu "Explore CDN Library"

STEP 2: Buka Menu FilesImage

Screenshot FilesImage menu

STEP 3: Buka Dokumentasi API.js

Buka http://croot.js.org/docs/api

Screenshot dokumentasi api.js

Dokumentasi ini menjelaskan semua fungsi yang tersedia di api.js beserta cara penggunaannya.

Fungsi utama yang akan kita pakai:

  1. getJSON() → mengambil data dari server
  2. postJSON() → mengirim data ke server

STEP 4: Buka Webhook.cool

Buka tab baru di browser

Ketik https://webhook.cool/

Screenshot webhook.cool

Webhook.cool adalah layanan gratis untuk membuat webhook endpoint sementara. Berguna untuk testing POST request tanpa harus membuat server sendiri.

Webhook = URL yang bisa menerima data (biasanya dari aplikasi lain)

Webhook.cool akan menampilkan semua data yang masuk ke endpoint kita.

STEP 5: Buat Webhook Endpoint

Klik tombol "Create Webhook" atau "Get Endpoint". Kamu akan mendapatkan URL unik. Simpan URL ini. Contoh: https://webhook.cool/abc123xyz

STEP 6: Buat File HTML

Buka text editor (VS Code, Notepad++, atau Sublime Text). Buat file baru bernama index.html. Tulis kode berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Belajar API.js</title>
</head>
<body>
    <h1>Belajar Croot.js + API.js + Webhook</h1>
    
    <button id="btnGet">GET Data</button>
    <button id="btnPost">POST ke Webhook</button>
    
    <hr>
    <h3>Hasil:</h3>
    <pre id="hasil">Klik tombol...</pre>

    <script type="module">
        import { getJSON, postJSON } from 'https://cdn.jsdelivr.net/gh/crootjs/lib@0.0.3/api.js';

        // Ganti dengan URL webhook.cool punyamu!
        const WEBHOOK_URL = 'https://webhook.cool/url-kamu';

        function tampilkanHasil(response) {
            console.log('Status:', response.status);
            console.log('Data:', response.data);
            document.getElementById('hasil').textContent = JSON.stringify(response, null, 2);
        }

        document.getElementById('btnGet').onclick = () => {
            getJSON('https://jsonplaceholder.typicode.com/posts/1', tampilkanHasil);
        };

        document.getElementById('btnPost').onclick = () => {
            const data = {
                pesan: 'Halo dari API.js',
                waktu: new Date().toISOString()
            };
            postJSON(WEBHOOK_URL, data, tampilkanHasil);
        };

        console.log('Siap!');
    </script>
</body>
</html>

Catatan:

  • type="module" wajib ada
  • Ganti WEBHOOK_URL dengan URL dari Step 5
  • Simpan file sebagai index.html (huruf kecil semua)

STEP 7: Upload ke GitHub Organisasi

  1. Buka github.com dan login
  2. Pilih organisasi yang akan digunakan
  3. Klik tab Repositories → New
  4. Isi nama repository: belajar-api-js
  5. Pilih Public → Create repository
  6. Klik Add file → Upload files
  7. Upload file index.html → Commit changes

STEP 8: Aktifkan GitHub Pages

  1. Di repository, klik tab Settings
  2. Menu kiri, klik Pages
  3. Di bagian Branch, pilih main / master
  4. Klik Save

STEP 9 - Web Online

Link GitHub :

https://retask-todo.github.io/



STEP 10: Testing Tombol GET

Klik tombol "GET Data". Akan muncul data dari JSONPlaceholder.

Hasil GET request

STEP 11: Testing Tombol POST

Klik tombol "POST ke Webhook". Data akan dikirim ke webhook.cool.

STEP 12: Cek Webhook.cool Dashboard

  1. Kembali ke tab webhook.cool
  2. Refresh halaman
  3. Lihat "Incoming Requests"
Webhook.cool dashboard

TROUBLESHOOTING

Masalah yang Sering Terjadi:

Masalah Penyebab Solusi
CORS Error Browser memblokir request karena beda domain Gunakan API yang sudah support CORS (JSONPlaceholder). Atau tambah proxy https://corsproxy.io/? di depan URL.
Webhook tidak terpicu URL webhook salah atau typo Cek lagi URL di webhook.cool. Copy-paste, jangan diketik manual.
Tombol tidak bekerja Ada error JavaScript Tekan F12 → buka tab Console → lihat error merahnya.
Data tidak muncul di halaman Lupa type="module" Pastikan tag script ada type="module".
GitHub Pages tidak muncul Belum aktif atau salah branch Pastikan di Settings → Pages → Branch pilih main, tunggu 2 menit, refresh.

Penjelasan Baris Kode

Baris Kode Penjelasan
14 import { getJSON, postJSON } from '...' Mengambil dua fungsi dari file api.js. Supaya kita bisa pakai getJSON dan postJSON tanpa nulis fetch manual.
16 const WEBHOOK_URL = '...' Menyimpan URL webhook ke variabel. Biar mudah dipakai ulang dan ganti jika perlu.
18-22 function tampilkanHasil(response) Fungsi yang dipanggil otomatis setelah data datang. Karena getJSON dan postJSON itu ASYNC (butuh waktu).
24-26 document.getElementById('btnGet').onclick Event listener tombol GET. Agar saat tombol diklik, getJSON dijalankan.
28-35 document.getElementById('btnPost').onclick Event listener tombol POST. Agar saat tombol diklik, data dikirim ke webhook.

KESIMPULAN

Ringkasan:

  • API adalah "pelayan restoran" yang memberikan data saat diminta (GET)
  • Webhook adalah "kotak surat" yang menerima data tanpa diminta (POST)
  • api.js dari croot.js.org memudahkan kita melakukan GET dan POST
  • Webhook.cool membantu testing POST request tanpa bikin server sendiri
  • GitHub Organisasi memungkinkan kolaborasi tim dalam satu repository
  • GitHub Pages membuat file HTML bisa diakses online dari mana saja

Referensi:

Selamat mencoba!

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Web API Jadi Gampang: Contoh POST Sederhana pakai JScroot & webhook.cool

Gambar
💻 Belajar Web API Sederhana: Kirim Data dari Website dengan POST (JScroot + webhook.cool) Dalam dunia web development modern, hampir semua website yang kita gunakan tidak berdiri sendiri. Di balik tampilan yang kita lihat, ada proses komunikasi antara website (frontend) dan server (backend) yang terjadi terus-menerus. Komunikasi inilah yang disebut API. API (Application Programming Interface) bisa dipahami sebagai jembatan yang menghubungkan website dengan server. Ketika sebuah website ingin mengambil data atau mengirim data, dia tidak bisa melakukannya langsung ke database. Website harus “berbicara” melalui API. Cara berbicara ini biasanya menggunakan HTTP request, seperti GET untuk mengambil data dan POST untuk mengirim data. Kalau kita sederhanakan, GET itu seperti kita membaca informasi dari server, sedangkan POST adalah ketika kita mengirimkan sesuatu ke server, misalnya form, pesan, atau input dari user. Di tutorial ini kita akan fokus pada POST karena kita akan membuat website ...
Baca selengkapnya

TUTORIAL MENGGUNAKAN CROOTJS untuk LOGIN PAGE

Gambar
Di zaman yang serba canggih ini teknologi semakin berkembang, hampir semua orang fokus terhadap perkembangan teknologi hingga hari ini, hampir seluruh manusia pasti pernah merasakan kebermanfaatan perkembangan teknologi yang serba canggih pada zaman ini. Semua orang berlomba-lomba untuk menciptakan platform-platform digital demi bisa mempermudah pekerjaan manusia, salah satu platform nya yaitu C rootJS . CrootJS adalah library JavaScript ringan yang dirancang untuk memudahkan pembuatan website interaktif tanpa kerumitan framework besar seperti React atau Vue. Dengan konsep yang ringan dan berbasis Vanilla JavaScript, CrootJS memungkinkan developer mengelola event, manipulasi DOM, serta logika aplikasi. Kali ini kita akan bahas contoh penggunaan CrootJS untuk Login page. Ikuti langkah-langkah ini ya: 1. Pertama kamu bisa akses CrootJS di browser kesayangan kalian, cari pada menu search lalu ketik "croot js" atau kamu bisa klik link croot.js.org 2. Setelah itu kamu pilih websit...
Baca selengkapnya

membuat organisasi di github untuk projek ATsGengg

Gambar
 1. buka github.com dan login, jika belum mempunyai akun pilih create an account, jika sudah maka tampilan homepage awal nya akan muncul 2. tekan logo profile di ujung atas kanan dan pilih menu organizations 3. pilih new organizations, lalu pilih yang free dan  isi nama organisasi dengan nama yang kalian inginkan, dan ubah privasinya menjadi publik agar bisa diakses oleh siapapun 4. jika sudah pilih menu repositories dan pilih new repository, isi dengan nama yang diinginkan, contoh ATsAPI karena saya ingin membuat api untuk organisasi tersebut 5. klik logo + dan pilih create new file lalu isi nama filenya dengan index.html, untuk contoh seperti di dalam gambar 6. lalu buat file style.css untuk gaya tampilan dari index tersebut 7. setelah membuat file css nya, berikutnya buat file main.js untuk menghubungkan ke api yang kita pilih 8. pilih settings pada repository tersebut dan pilih menu pages lalu ubah branch menjadi main, agar kita mendapatkan link dari repository tersebut 9....
Baca selengkapnya