membangun toko online menggunakan Mini Apps di Telegram dengan Cloudflare Workers

membangun toko online profesional bernama Tokokos menggunakan Mini Apps di Telegram dengan Cloudflare Workers, langkah demi langkah, super detail, dan tanpa asumsi kamu sudah mengerti pemrograman. Aku akan menjelaskan semua dengan sederhana dan mudah diikuti. 🚀

---

Langkah 1: Pahami Alur Proses

Kita akan membuat bot Telegram dengan fitur:

1. Katalog Produk: Menampilkan produk, gambar, harga, dan deskripsi.
2. Keranjang Belanja: User bisa memilih dan menyimpan produk untuk dibeli.
3. Pembayaran: Integrasi dengan payment gateway.
4. Pelacakan Pesanan: Status pesanan seperti "Sedang Diproses" atau "Selesai".
5. Notifikasi: Mengirimkan notifikasi otomatis.

Semua fitur ini dikelola melalui Cloudflare Workers.

---

Langkah 2: Siapkan Akun dan Tools

1. Buat Akun Telegram dan Cloudflare

   • Telegram: Login ke Telegram dan buka @BotFather.
   • Cloudflare: Daftar di Cloudflare.

2. Instalasi Wrangler Wrangler adalah alat untuk mengelola Cloudflare Workers.

   • Pastikan kamu punya Node.js (Download di sini).
   • Buka terminal/command prompt, jalankan:

     npm install -g wrangler
     

---

Langkah 3: Buat Telegram Bot

1. Buka @BotFather.
2. Kirim /newbot.
3. Beri nama bot: Misalnya, TokokosBot.
4. Beri username bot (harus diakhiri Bot): Contoh, TokokosBot.
5. Simpan API Token yang diberikan oleh BotFather, contoh:

   123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11
   

---

Langkah 4: Buat Proyek Cloudflare Workers

1. Inisialisasi Proyek Baru
   • Buka terminal/command prompt.
   • Buat folder untuk proyek:

     mkdir tokokos; cd tokokos
     

   • Inisialisasi proyek:

     wrangler init
     

2. Edit File Konfigurasi
   • Buka file wrangler.toml yang ada di folder tokokos.
   • Ubah seperti ini:

     name = "tokokos"
     type = "javascript"
     account_id = "YOUR_CLOUDFLARE_ACCOUNT_ID"
     workers_dev = true
     

   • Ganti YOUR_CLOUDFLARE_ACCOUNT_ID dengan ID akun Cloudflare kamu.

---

Langkah 5: Tulis Kode Bot

1. Buka file src/index.js di folder proyek kamu.

2. Tulis kode berikut:

   export default {
       async fetch(request) {
           if (request.method === "POST") {
               const data = await request.json();
               const { message } = data;
   
               if (message) {
                   const chatId = message.chat.id;
                   const text = message.text;
   
                   // Katalog Produk
                   const products = [
                       { id: 1, name: "Kopi", price: 15000, desc: "Kopi premium", img: "URL_GAMBAR_KOPI" },
                       { id: 2, name: "Susu", price: 10000, desc: "Susu murni", img: "URL_GAMBAR_SUSU" },
                   ];
   
                   let responseText = "Halo! Selamat datang di Tokokos 🛒.\n";
                   if (text.toLowerCase() === "lihat produk") {
                       responseText = "Katalog Produk:\n";
                       products.forEach((p) => {
                           responseText += `\n${p.id}. ${p.name} - Rp${p.price}\n${p.desc}\nGambar: ${p.img}\n`;
                       });
                       responseText += "\nKetik 'beli <ID Produk>' untuk memesan.";
                   } else if (text.startsWith("beli")) {
                       const id = parseInt(text.split(" ")[1]);
                       const product = products.find((p) => p.id === id);
                       if (product) {
                           responseText = `Produk ${product.name} berhasil ditambahkan ke keranjang!`;
                       } else {
                           responseText = "Produk tidak ditemukan. Ketik 'Lihat Produk' untuk melihat katalog.";
                       }
                   } else {
                       responseText += "Ketik 'Lihat Produk' untuk melihat katalog atau 'Beli <ID Produk>' untuk memesan.";
                   }
   
                   // Kirim Balasan
                   await fetch(
                       `https://api.telegram.org/bot<YOUR_API_TOKEN>/sendMessage`,
                       {
                           method: "POST",
                           headers: { "Content-Type": "application/json" },
                           body: JSON.stringify({ chat_id: chatId, text: responseText }),
                       }
                   );
               }
   
               return new Response("OK");
           }
   
           return new Response("Invalid request", { status: 400 });
       },
   };
   

3. Ganti <YOUR_API_TOKEN> dengan token bot dari BotFather.

---

Langkah 6: Deploy ke Cloudflare Workers

1. Jalankan perintah:

   wrangler publish
   

2. Kamu akan mendapatkan URL seperti:

   https://tokokos.workers.dev
   

---

Langkah 7: Hubungkan Telegram ke Cloudflare Workers

1. Set webhook Telegram ke Workers:

   curl -F "url=https://tokokos.workers.dev" https://api.telegram.org/bot<YOUR_API_TOKEN>/setWebhook
   

---

Langkah 8: Uji Coba

1. Buka bot di Telegram.
2. Kirim pesan seperti:
   • Lihat Produk
   • Beli 1
3. Pastikan bot merespons dengan benar.

---

Langkah 9: Tambahkan Fitur Lain

1. Keranjang Belanja

Simpan data keranjang di database seperti Cloudflare KV Storage.

2. Pembayaran

Gunakan payment gateway seperti Midtrans untuk pembayaran.

3. Pelacakan Pesanan

Buat fitur untuk menampilkan status pesanan.

4. Notifikasi

Kirim pesan otomatis untuk status pesanan, promo, dll.

---