Tutorial TMS Gemini Canvas #bagian 2

Daftar Isi

PoinTru.com - Pernah nggak sih Anda bikin tool keren di Gemini Canvas, tapi bingung gimana caranya supaya tool itu bisa dijual dengan sistem lisensi yang rapi? Saya juga pernah ada di posisi itu. Nyari-nyari cara, coba ini itu, sampai akhirnya nemu sistem yang sekarang saya pakai dan cukup memuaskan hasilnya.

Ini adalah lanjutan dari sesi pertama tutorial Tools Management System, atau yang biasa disingkat TMS, untuk Gemini Canvas. Kalau Anda belum nonton yang sesi pertama, saya sarankan tonton dulu ya karena sesi ini langsung nyambung ke pembahasan teknis yang lebih dalam. Di sini kita akan bahas fitur-fitur baru yang belum sempat dibahas di sesi sebelumnya, termasuk manajemen kuota otomatis, integrasi Cloudflare Worker yang diperbarui, dan cara minify JS biar tool Anda tetap ringan.

Apa Saja yang Baru di TMS Gemini Canvas Sesi Ini

Sebagai Agen BRILink yang sehari-hari duduk di depan komputer dan harus ngelola banyak hal sekaligus, saya tahu banget betapa pentingnya punya sistem yang bekerja otomatis. Nah, update terbaru di TMS Gemini Canvas ini benar-benar bikin saya semangat. Ada beberapa penambahan fitur yang cukup signifikan dibanding versi sebelumnya.

Fitur-fitur baru yang masuk di sesi ini antara lain yaitu sistem kuota otomatis per user, fitur redirect untuk keamanan lisensi, tombol order otomatis khusus lisensi demo, anti-inspect untuk mencegah hacker, dan penambahan kode di Cloudflare Worker. Satu hal yang perlu diingat, kalau Anda sudah pakai versi lama Cloudflare-nya, nanti harus ganti ke kode yang baru ya supaya semua fitur ini bisa berjalan.

Artikel ini adalah lanjutan dari Tutorial TMS Gemini Canvas Sesi 1. Pastikan Anda sudah menyimak sesi pertama sebelum mengikuti panduan ini agar tidak kebingungan di tengah jalan.

Yang Perlu Anda Siapkan Sebelum Mulai

Sebelum kita masuk ke langkah-langkahnya, ada beberapa hal yang harus sudah ada dulu di tangan Anda. Ini bukan hal yang rumit, tapi kalau salah satu belum ada, prosesnya nanti bisa terhambat.

• Akun Cloudflare aktif, sudah login dan siap digunakan
• Google Sheet yang sudah tersambung sebagai database TMS
• Akses ke Gemini Canvas dengan tool yang sudah dibuat sebelumnya
• Kode Cloudflare Worker versi terbaru (minta langsung ke pembuat TMS-nya)
• Tool berbasis HTML, CSS, dan JavaScript murni, bukan modul atau React

Pastikan tool Gemini Canvas Anda menggunakan HTML, CSS, dan JS murni. Kalau Canvas menghasilkan kode React atau modul, tambahkan prompt di Canvas seperti ini, "Ganti tanpa modul, gunakan HTML CSS JS" supaya kodenya dikonversi ke format yang kompatibel.

Langkah 1, Update Kode Cloudflare Worker ke Versi Terbaru

Ini langkah pertama yang wajib dilakukan. Kode Cloudflare Worker lama tidak mendukung fitur redirect, anti-inspect, dan pengurangan kuota yang sudah disempurnakan. Jadi sebelum apapun, ganti dulu kode-nya.

1. Buka dashboard Cloudflare Anda, lalu masuk ke menu Workers.
2. Pilih Worker yang sudah Anda buat sebelumnya untuk TMS ini.
3. Hapus seluruh kode lama yang ada di editor.
4. Tempelkan kode Worker versi terbaru yang sudah Anda terima.
5. Klik Save and Deploy untuk menyimpan perubahan.

Penambahan di kode baru ini mencakup fitur redirect otomatis ketika ada orang tanpa lisensi yang mencoba mengakses tool, anti-developer console supaya susah di-inspect, dan logika pengurangan kuota yang sudah diperbaiki dan lebih akurat dari sebelumnya.

Langkah 2, Setting Config di Google Sheet

Google Sheet berfungsi sebagai pusat kendali alias "otak"-nya TMS ini. Di sinilah semua pengaturan lisensi, kontak WhatsApp, dan pesan order dikelola. Wah, ini bagian yang menurut Saya paling elegan dari seluruh sistem ini karena kita bisa ngelola segalanya tanpa perlu coding ulang.

1. Buka Google Sheet yang sudah terhubung dengan TMS Anda.
2. Cari tab atau kolom config tempat pengaturan sistem tersimpan.
3. Isi kolom redirect dengan URL tujuan, bisa website Anda atau link WhatsApp. Jangan biarkan kolom ini kosong. Kalau belum punya website, isi dengan link apapun dulu, misalnya link WhatsApp bisnis Anda.
4. Isi nomor WhatsApp beserta kode negaranya, misalnya 628xxxxxxxxxx.
5. Isi pesan default untuk tombol order, contohnya "Halo admin, saya tertarik mau beli lisensi premium".
6. Pastikan kolom cek kuota dalam kondisi aktif atau ON.

JANGAN biarkan kolom redirect kosong. Sistem ini sudah dikonfigurasi dan membutuhkan nilai di kolom tersebut. Kalau kosong, redirect tidak akan berjalan dan bisa mengganggu keamanan tool Anda.

Langkah 3, Buat dan Kelola Lisensi di Google Sheet

Nah, ini bagian yang paling sering ditanyakan. Cara bikin lisensinya gimana, dan bedanya lisensi demo sama yang premium apa? Saya jelasin satu per satu ya.

Ada dua jenis lisensi dalam sistem TMS ini, yaitu lisensi demo dan lisensi premium. Perbedaannya cukup penting untuk dipahami sebelum Anda mulai distribusikan ke calon pembeli.

Jenis Lisensi	Format Kode	Tombol Order Muncul	Akses Tool
Demo	Dimulai kata "free", contoh "free-PRJ1"	Ya, otomatis muncul	Terbatas sesuai kuota
Premium	Bebas, contoh "Premi-0812xxx"	Tidak muncul	Penuh sesuai kuota yang ditetapkan

Untuk membuat lisensi baru, ikuti langkah berikut ini.

1. Di Google Sheet, masukkan kode lisensi baru di kolom yang sesuai.
2. Untuk lisensi demo, pastikan kode diawali dengan kata "free". Ini wajib supaya tombol order otomatis muncul ketika user mengakses tool dengan lisensi tersebut.
3. Tentukan jumlah kuota, misalnya 10 untuk demo atau 500 untuk yang premium.
4. Tentukan tanggal kedaluwarsa. Untuk yang lifetime, isi saja dengan tahun yang jauh ke depan, misalnya 2100-01-01.
5. Di kolom akses tool, arahkan ke nama atau kode tool yang sesuai. Kalau beli Video Reels, arahkan ke sana. Kalau beli Narrator AI, arahkan ke tool Narrator-nya.
6. Kalau mau tracking pendapatan, tambahkan kolom harga dan gunakan fungsi SUM untuk total otomatis.

Langkah 4, Hubungkan Tombol Generate ke Sistem Cek Kuota

Ini langkah yang paling sering bikin bingung dan kuota tidak berkurang. Saya sempat kebingungan juga waktu pertama kali, sampai akhirnya paham bahwa sistem kuota hanya bekerja kalau kita menghubungkannya ke tombol generate di kode tool.

Caranya begini. Buka kode HTML tool Anda di Gemini Canvas, lalu cari elemen tombol generate. Bisa berupa tag button atau span yang berfungsi sebagai tombol. Tambahkan class khusus yang sudah Anda definisikan di config Google Sheet sebagai selector. Contohnya, kalau di config Anda isi selector dengan "cek-lisensi", maka di tombol generate tambahkan class tersebut seperti ini.

Sebelum tambah class, tombol mungkin terlihat seperti ini, <button class="btn-generate">Generate</button>. Setelah ditambah class selector, jadinya <button class="btn-generate cek-lisensi">Generate</button>. Nama selector-nya bebas, bisa "cek-lisensi", "robibulepatel", atau apapun. Yang penting konsisten antara di config dan di kode tool.

Class selector boleh diletakkan di elemen button langsung maupun di span di dalamnya. Yang penting class tersebut ada pada elemen yang diklik user saat generate. Coba dulu, kalau kuota tidak berkurang, coba pindahkan class ke elemen yang berbeda.

Memahami Cara Kerja Status Lisensi Otomatis

Salah satu hal yang membuat TMS ini menurut Saya jauh lebih praktis dibanding sistem lisensi manual seperti Firebase adalah status yang berubah sendiri. Tidak perlu cek manual, tidak perlu update database secara manual, semuanya otomatis.

Begini cara kerjanya. Setiap kali user menekan tombol generate, kuota berkurang satu. Ketika kuota menyentuh nol, status lisensi otomatis berubah menjadi "limit" dan tool tidak bisa digunakan lagi. Kalau tanggal kedaluwarsa sudah lewat, status berubah menjadi "expired". Dua kondisi ini sama-sama memblokir akses ke tool.

Kalau user ingin aktifkan lagi, solusinya mudah. Tambah saja kuota dari Google Sheet, lalu status akan kembali aktif. Sederhana, tapi sangat fungsional.

Tips dan Troubleshooting Masalah Umum

Dari pengalaman Saya yang juga mengelola usaha percetakan rumahan dan sering bikin tools untuk membantu operasional, ada beberapa masalah yang paling sering muncul ketika setting sistem seperti ini. Saya rangkumkan supaya Anda tidak perlu keliru di jalan yang sama.

Pertama, masalah tool menghasilkan kode React atau modul. Ini sangat umum terjadi karena Gemini kadang default ke React kalau tidak diberi instruksi spesifik. Solusinya, tambahkan prompt di Canvas yaitu "Ganti tanpa modul, gunakan HTML CSS JS". Tool akan dikonversi otomatis.

Kedua, kode tool terlalu besar dan melebihi batas 50.000 karakter di Google Sheet. Ini solusinya ada dua alternatif. Cara pertama adalah minify JS dulu sebelum dimasukkan. Gunakan tools minify JS yang tersedia gratis di Google, tempelkan kode ori, klik Minify, dan kode bisa berkurang sampai 40 persen. Cara kedua, kalau setelah diminify masih terlalu besar, pecah kode menjadi dua bagian atau lebih di kolom script yang berbeda, lalu sesuaikan pemanggilan di Cloudflare Worker-nya.

Ketiga, kuota tidak berkurang saat tombol generate diklik. Pastikan class selector sudah ditambahkan dengan benar di elemen yang tepat. Coba juga aktifkan dulu opsi cek kuota di config Google Sheet.

Cara Minify JS Supaya Tool Tidak Kegedean

Ini sering dilewatkan padahal penting banget. Tool yang ukurannya gede itu bukan cuma masalah teknis, tapi juga pengalaman user jadi buruk karena loading lama. Bayangkan kalau setiap kali user buka tool-nya harus download 1 MB data, itu boros banget kuota internet mereka.

1. Ketik "minify JS" di Google, pilih salah satu tool yang muncul.
2. Tempelkan seluruh kode JavaScript tool Anda ke kotak input yang tersedia.
3. Klik tombol Minify atau Compress.
4. Salin kode hasil minify yang sudah jauh lebih kecil.
5. Gunakan kode hasil minify ini sebagai pengganti kode ori di Google Sheet.

Biasanya setelah diminify, ukuran kode bisa berkurang 30 sampai 40 persen. Kalau tool Anda awalnya 150 kilobyte, setelah diminify bisa jadi sekitar 90 sampai 100 kilobyte. Cukup signifikan.

Kalau setelah diminify kode masih over limit, berarti tool Anda memang sudah sangat kompleks. Solusinya, bagi kode menjadi beberapa bagian dan simpan di kolom script terpisah. Jangan biarkan kolom script manapun kosong, isi dengan kode placeholder seperti console.log("ok") kalau memang tidak ada konten.

Keamanan Tool dari Tangan Hacker

Satu topik yang cukup menarik dibahas di sesi ini adalah soal keamanan. Sebagai orang yang selalu penasaran dengan perkembangan teknologi dan AI, Saya cukup terkesan dengan pendekatan keamanan berlapis yang diterapkan di TMS ini.

Sistem ini punya beberapa lapisan perlindungan. Anti-inspect di browser mempersulit siapa pun yang mencoba buka developer console. Kode tool diobfuscate oleh Cloudflare sehingga sulit dibaca walaupun berhasil dicopy. Akses tool membutuhkan kode lisensi yang unik dan tidak bisa ditebak. Redirect otomatis memblokir akses tanpa lisensi valid.

Tapi ada catatan penting. Walaupun seseorang berhasil meng-copy kode Canvas, yang mereka dapatkan hanyalah kode login lisensi, bukan kode tool-nya. Kode tool baru muncul setelah lisensi diverifikasi. Dan untuk keamanan ekstra, Saya sarankan gunakan kode akses tool yang tidak jelas atau tidak deskriptif, misalnya bukan "video-reels" tapi sesuatu seperti kode acak yang hanya Anda tahu. Ini supaya hacker tidak bisa menebak pola aksesnya.

Apa itu Tools Management System (TMS) untuk Gemini Canvas?

TMS adalah sistem manajemen lisensi berbasis Google Sheet dan Cloudflare Worker yang memungkinkan pembuat tool Gemini Canvas untuk menjual akses tool dengan sistem kuota, tanggal kedaluwarsa, dan lisensi otomatis tanpa perlu coding database yang rumit.

Kenapa kode Cloudflare Worker harus diganti ke versi baru?

Versi baru Cloudflare Worker mencakup fitur redirect otomatis, anti-inspect browser, dan logika pengurangan kuota yang sudah diperbaiki. Versi lama tidak memiliki fitur-fitur ini sehingga sistem kuota tidak berjalan dengan sempurna.

Bagaimana cara membedakan lisensi demo dan lisensi premium?

Lisensi demo harus diawali kata "free" di kodenya, misalnya "free-PRJ1". Dengan kode ini, tombol order otomatis akan muncul di tampilan tool. Lisensi premium tidak perlu awalan khusus dan tombol order tidak akan muncul selama lisensi masih aktif.

Apa yang harus dilakukan kalau tool Canvas menghasilkan kode React?

Tambahkan prompt di Gemini Canvas yaitu "Ganti tanpa modul, gunakan HTML CSS JS". Canvas akan mengkonversi kode React atau modul menjadi HTML, CSS, dan JavaScript murni yang kompatibel dengan sistem TMS. Kalau masih tetap React, ulangi prompt tersebut.

Bagaimana cara mengatasi kode tool yang terlalu besar melebihi batas Google Sheet?

Ada dua cara. Pertama, minify kode JS menggunakan tools gratis di internet, kode bisa berkurang sampai 40 persen. Kedua, kalau masih terlalu besar setelah diminify, pecah kode menjadi beberapa bagian dan simpan di kolom script terpisah di Google Sheet, lalu sesuaikan pemanggilan di Cloudflare Worker.

Akhir Kata

Jadi, intinya Tools Management System untuk Gemini Canvas ini adalah solusi yang cukup elegan bagi siapa pun yang ingin memonetisasi tool buatannya tanpa ribet setup database atau sistem lisensi yang kompleks. Dari pengalaman Saya, ini jauh lebih praktis dibanding solusi-solusi lain yang pernah Saya coba sebelumnya. Semua tersentralisasi di Google Sheet dan pengaturan kontak otomatis lewat config, jadi kita bisa fokus ke hal lain termasuk ngelola usaha sampingan sekalipun.

Artikel tentang Tutorial TMS Gemini Canvas Sesi 2 ini hopefully bisa ngasih Anda gambaran yang lebih jelas tentang cara setting sistem ini dari awal sampai berjalan. Kalau ada pertanyaan atau pengalaman serupa, feel free buat komen di bawah ya!

Baca artikel lainnya, cek aja di Sitemap.