Panduan Setup & Penggunaan ZippBiz Cloud Manager

Berbeda dengan sistem penyimpanan tradisional yang memerlukan database terpisah untuk mencatat nama dan direktori berkas, ZippBiz Cloud Manager mengadopsi arsitektur 100% Zero-D1. Seluruh metadata direktori, struktur folder virtual, dan atribut media dibaca langsung secara native dari bucket Penyimpanan Cloud.

• 1
  Masuk ke akun Cloudflare Anda melalui https://dash.cloudflare.com.
• 2
  Pada menu samping sebelah kiri, pilih dan klik menu Storage & Databases → R2 (atau R2 Object Storage).

  📸 Tangkapan Layar: Menu R2 Object Storage

  
• 3
  Klik tombol biru Create Bucket di pojok kanan atas.

  📸 Tangkapan Layar: Tombol Create Bucket

  
• 4
  Beri nama bucket penyimpanan Anda (contoh: r2zippbiz atau media-tokosaya).

  ⚠️

  Gunakan huruf kecil tanpa spasi. Anda boleh menggunakan tanda strip (kebab-case) jika diperlukan.
• 5
  Biarkan lokasi bucket default (Automatic), lalu klik Create Bucket di bagian bawah. Selesai!

  📸 Tangkapan Layar: Form Nama Bucket & Klik Create Bucket

  

• 1
  Di menu samping kiri Cloudflare Dashboard, klik Compute (Workers & Pages) → Pages.
• 2
  Klik tombol Create application, lalu pilih tab Direct Upload.
• 3
  Beri nama proyek aplikasi Anda (contoh: cloud-media-studio atau media-vault), lalu klik Create project.
• 4
  Ekstrak berkas ZippBiz-CloudManager-Starter-Package.zip di komputer Anda. Anda akan melihat berkas:

  index.html, app.js, style.css, _worker.js, _headers, wrangler.toml

  Seret dan lepaskan seluruh berkas tersebut ke area upload Cloudflare Pages.
• 5
  Klik tombol hijau Deploy site. Tunggu sekitar 5-10 detik hingga proses deployment selesai 100%.

• 1
  Masuk ke Project Pages: Di dashboard Cloudflare, buka menu Compute (Workers & Pages) → Pages, lalu klik nama project Pages toko Anda (misal: tokosaya).

  📸 Tangkapan Layar: Pilih Nama Project Pages

  
• 2
  Pilih tab Settings di menu navigasi atas → pilih sub-menu Functions di kolom sebelah kiri.

  📸 Tangkapan Layar: Tab Settings -> Functions

  
• 3
  Gulir halaman ke bawah hingga menemukan bagian R2 Bucket Bindings, lalu klik tombol + Add (atau Add binding).

  📸 Tangkapan Layar: Seksi Bindings -> Klik + Add

  
• 4
  Pilih tipe R2 bucket binding, lalu isi kolom konfigurasi dengan teliti:

  Variable name: R2 (Wajib Huruf Besar Semua!) 📋 Salin "R2"

  • R2 bucket: Pilih nama bucket yang Anda buat di Langkah 1 (contoh: media-tokosaya).

  📸 Tangkapan Layar: Scroll ke R2 Bucket -> Klik R2

  
• 5
  Klik tombol biru Save. Cloudflare kini telah mengikat bucket R2 ke project Pages Anda.
• ⚡
  AKTIVASI SAMBUNGAN INSTAN (UNTUK PEMILIK TOKO ZIPPBIZ):

  Pada Cloudflare Pages tipe Direct Upload, tombol Retry deployment tidak tersedia (yang ada hanya opsi Rollback yang membingungkan). Agar binding R2 langsung aktif 100%:

  ➔ Buka Admin Toko (/admin.html) → Masuk menu Pengaturan ➔ Update ZippBiz → Klik Update Otomatis (Stable).

  Cloudflare akan otomatis memicu deployment baru dan menyuntikkan sambungan R2 seketika. Buka menu Media atau akses /cloud-manager, status langsung: 🟢 CDN Penyimpanan Cloud Terhubung!

• 1
  Buka alamat URL Pages yang diberikan Cloudflare (contoh: https://cloud-media-studio.pages.dev).
• 2
  Saat pertama kali dibuka, sistem otomatis mendeteksi bahwa studio belum memiliki master key dan menampilkan layar:

  "Setup ZippBiz Cloud Manager — Buat Password Master"
• 3
  Masukkan password master yang Anda kehendaki (minimal 6 karakter, kombinasi huruf dan angka disarankan).
• 4
  Klik tombol Aktifkan & Masuk Studio.
• 5
  Selamat! Studio Cloud Manager pribadi Anda kini aktif, aman, dan siap digunakan untuk mengelola ribuan aset digital bisnis Anda.

Cloud Manager dilengkapi panel pohon direktori di sebelah kiri yang memungkinkan Anda mengorganisasi file berdasarkan kategori toko, kampanye promo, modul produk, atau arsip klien.

Setiap gambar JPEG atau PNG berukuran besar yang Anda unggah dapat otomatis dikonversi menjadi format generasi terbaru WebP secara langsung di browser Anda sebelum dikirim ke R2:

• •
  Drag & Drop Multi-Berkas: Seret puluhan file sekaligus dari file explorer komputer langsung ke bidang tengah Cloud Manager.
• •
  Client-Side Engine: Kompresi terjadi di browser pengguna dengan memanfaatkan HTML5 Canvas & WebAssembly sehingga tidak membebani server dan tidak memakan kuota CPU worker.
• •
  Filter Kategori Cepat: Gunakan tombol pill di bagian atas (Semua, Gambar, Video, PDF) untuk menyaring aset media dengan 1 klik.

Setiap kali Anda mengklik salah satu berkas di daftar media, panel inspektor di sisi kanan akan menampilkan rincian teknis berkas serta tombol salin instan: