Panduan Troubleshooting YouTube API Dashboard: WhatsApp OTP Login

🐛 Troubleshooting

Login Issues

Error: Gagal mengirim OTP

• Pastikan WhatsApp Gateway running di 10.122.25.172:5000
• Test gateway: curl http://10.122.25.172:5000/api/status
• Cek koneksi network ke server gateway

Error: Kode OTP tidak valid

• OTP expired (lebih dari 5 menit)
• Request OTP baru
• Pastikan input 6 digit benar

Error: Akun Anda telah dinonaktifkan

• Hubungi admin untuk aktivasi kembali
• Admin dapat mengaktifkan di Admin Panel

API Issues

Error: API Key Invalid

• Pastikan API Key YouTube sudah benar
• Pastikan YouTube Data API v3 sudah di-enable
• Cek restrictions di API Key settings

Error: Quota Exceeded

• Tunggu hingga quota reset (00:00 PST)
• Atau request quota tambahan di Google Cloud Console

Database Issues

Error: Database locked

• Restart aplikasi
• Hapus file youtube_app.db dan restart (akan reset semua data)

Admin tidak bisa login

• Cek nomor admin di app.py (ADMIN_PHONE)
• Pastikan sesuai dengan nomor WhatsApp yang digunakan

📱 Fitur UI

✅ Mobile Responsive - Tampilan optimal di semua device

✅ WhatsApp OTP Login - Aman dan mudah

✅ Multi-level Access - Admin & User

✅ Activity Logging - Track semua aktivitas

✅ Tailwind CSS - Design modern dan clean

✅ Font Awesome Icons - Icon profesional

✅ Loading States - Feedback visual

✅ Error Handling - User friendly messages

🔧 Customization

Menambah Admin Baru

Via database atau Admin Panel:

# Di Admin Panel: Ubah role user menjadi "admin"

Mengubah Session Duration

Edit di app.py:

app.permanent_session_lifetime = timedelta(days=7)  # Ubah angka 7

Mengubah O# YouTube API Dashboard with WhatsApp OTP Authentication

Dashboard web untuk mengakses YouTube Data API v3 dengan sistem authentication menggunakan WhatsApp OTP. Dibangun dengan Flask, Tailwind CSS, dan Font Awesome.

🚀 Fitur Utama

🔐 Authentication & Security

• ✅ Login tanpa password menggunakan OTP via WhatsApp
• ✅ Closed registration: Hanya nomor terdaftar yang bisa login
• ✅ OTP 6 digit dengan expiry 5 menit
• ✅ No auto-registration: User harus didaftarkan oleh admin dulu
• ✅ Session persistent (7 hari)
• ✅ 2 Level akses: Admin & User Regular
• ✅ Status check: Inactive user tidak bisa login

🎯 Multiple API Keys & Rotation

• ✅ Support multiple YouTube API Keys
• ✅ Auto rotation untuk mencegah quota limit
• ✅ Failover otomatis ke API key lain jika ada error

📊 Quota Management System

• ✅ Limit quota per user (customizable)
• ✅ Tracking real-time penggunaan quota
• ✅ Display quota di dashboard
• ✅ Auto reset quota harian
• ✅ Admin unlimited quota
• ✅ Notifikasi saat quota habis

📋 Fitur-fitur YouTube API v3

1. Search Videos (100 units/request)

• Mencari video berdasarkan keyword
• Filter jumlah hasil (5, 10, 20, 50)
• Menampilkan thumbnail, judul, channel, tanggal publish

2. Trending Videos (1 unit/request)

• Video trending berdasarkan region (Indonesia, US, UK, Japan, Korea)
• Menampilkan statistik views dan likes
• Refresh untuk update data terbaru

3. Channel Information (1 unit/request)

• Cari channel berdasarkan nama
• Atau langsung akses dengan Channel ID
• Menampilkan:
• Jumlah subscribers
• Total video
• Total views
• Deskripsi channel
• Banner dan profile picture

4. Video Details (1 unit/request)

• Input Video ID atau URL YouTube
• Menampilkan:
• Embed player video
• Statistik lengkap (views, likes, comments, duration)
• Informasi publikasi
• Tags dan kategori
• Deskripsi lengkap
• Komentar terpopuler (1 unit tambahan)

5. Channel Videos (100 units/request)

• Melihat video terbaru dari suatu channel
• Diurutkan berdasarkan tanggal upload

6. Search Channels (100 units/request)

• Mencari channel berdasarkan nama
• Hasil multiple channels dengan preview

🚀 Cara Install dan Menjalankan

1. Struktur Folder

youtube/
├── app.py
├── requirements.txt
├── youtube_app.db (auto-created)
└── templates/
    ├── login.html
    ├── index.html
    └── admin.html

2. Install Dependencies

pip install -r requirements.txt

3. Setup API Keys dan Konfigurasi

A. YouTube API Key

1. Buka https://console.cloud.google.com/
2. Buat project baru
3. Enable "YouTube Data API v3"
4. Buat credentials → API Key
5. Copy API Key

B. WhatsApp Gateway

Server: 10.122.25.172:5000

Dokumentasi: WhatsApp Gateway API Documentation

Pastikan WhatsApp Gateway sudah running dan dapat diakses.

C. Edit app.py

Ganti konfigurasi di baris berikut:

# Line ~17-21
YOUTUBE_API_KEY = "YOUR_YOUTUBE_API_KEY_HERE"  # Ganti dengan API Key YouTube

# Line ~24-25
WA_GATEWAY_URL = "http://10.122.25.172:5000"  # Sudah benar
ADMIN_PHONE = "6281241314446"  # Nomor admin (sudah benar)

4. Jalankan Aplikasi

python3 app.py

Database SQLite akan otomatis dibuat dengan user admin default.

5. Akses Aplikasi

Login

• URL: http://localhost:5000
• Akun Admin: +6281241314446 (gunakan nomor ini untuk login pertama)
• Masukkan nomor WhatsApp → Terima OTP di WA → Verifikasi → Login

Dashboard User

• URL: http://localhost:5000/dashboard
• Akses setelah login berhasil

Admin Panel

• URL: http://localhost:5000/admin/panel
• Hanya bisa diakses oleh user dengan role Admin

🔐 Sistem Authentication

Flow Login

1. User masukkan nomor WhatsApp
2. Sistem kirim OTP 6 digit via WhatsApp Gateway
3. User input OTP
4. Sistem verifikasi OTP
5. Jika valid → Login success → Session created
6. Jika user baru → Auto-register sebagai "user"

Database Schema

Table: users

- id (PRIMARY KEY)
- phone (UNIQUE, NOT NULL)
- name
- role (user/admin)
- status (active/inactive)
- created_at
- last_login

Table: otp_codes

- id (PRIMARY KEY)
- phone
- otp_code
- expires_at
- used (0/1)
- created_at

Table: activity_logs

- id (PRIMARY KEY)
- user_id (FOREIGN KEY)
- phone
- action
- details
- ip_address
- created_at

👨‍💼 Admin Features

Kelola User

• ✅ Tambah user baru - Manual register user tanpa OTP
• ✅ Lihat semua user terdaftar
• ✅ Aktifkan/Nonaktifkan user
• ✅ Ubah role (user ↔ admin)
• ✅ Set limit quota per user - Custom daily limit untuk setiap user
• ✅ Hapus user - Permanent delete dengan double confirmation
• ✅ Lihat detail user & aktivitasnya

Log Aktivitas

• ✅ Monitor semua aktivitas user
• ✅ Filter berdasarkan jenis aktivitas
• ✅ Pagination support
• ✅ Info lengkap (user, waktu, IP address)
• ✅ Track user management actions (add, delete, update limit)

Statistik

• ✅ Total user
• ✅ User aktif
• ✅ Total admin
• ✅ Total aktivitas

📊 Quota Management

Sistem Quota

• Default limit: 100 request/hari per user
• Admin: Unlimited quota (9999)
• Custom limit: Admin dapat set limit berbeda untuk setiap user
• Auto reset: Quota reset setiap hari jam 00:00

Quota Display

• Real-time quota di dashboard header
• Color indicator:
• 🟢 Green: >30% tersisa
• 🟡 Yellow: 10-30% tersisa
• 🔴 Red: <10% tersisa
• Notifikasi saat quota habis

Penggunaan Quota

Setiap fitur YouTube API menggunakan 1 quota:

• ✅ Search video: 1 quota
• ✅ Trending: 1 quota
• ✅ Channel info: 1 quota
• ✅ Video details: 1 quota
• ✅ Comments: 1 quota
• ✅ Search channels: 1 quota

🔄 Multiple API Keys System

Cara Kerja

1. Konfigurasi multiple API keys di app.py
2. System otomatis rotate keys setiap request
3. Jika 1 key error/limit → auto switch ke key lain
4. Load balancing otomatis

Keuntungan

• Increase capacity: 3 keys = 3x quota (30,000 units/day)
• Failover: Jika 1 key down, masih ada backup
• Load distribution: Request tersebar merata
• No downtime: Service tetap jalan walau ada key bermasalah

Example Configuration

# Single key (10,000 units/day)
YOUTUBE_API_KEYS = ["AIzaSyC..."]

# Multiple keys (30,000 units/day total)
YOUTUBE_API_KEYS = [
    "AIzaSyC...key1",  # Project 1
    "AIzaSyD...key2",  # Project 2
    "AIzaSyE...key3",  # Project 3
]
```✅ Pagination support
- ✅ Info lengkap (user, waktu, IP address)

### Statistik
- ✅ Total user
- ✅ User aktif
- ✅ Total admin
- ✅ Total aktivitas

## 🔒 Keamanan

### Closed Registration System
- ❌ **Tidak ada auto-registration**
- ✅ User harus didaftarkan admin terlebih dahulu
- ✅ Hanya nomor terdaftar yang bisa request OTP
- ✅ Nomor tidak terdaftar langsung ditolak
- ✅ Activity log untuk semua percobaan login

### Login Flow
1. User input nomor WA
2. System cek di database
3. **Jika tidak terdaftar** → Error: "Nomor tidak terdaftar. Hubungi admin"
4. **Jika terdaftar** → Kirim OTP via WhatsApp
5. User input OTP
6. Verify & Login

### Session Management
- Session expires setelah 7 hari
- Auto-logout saat session invalid
- Secure session key (random hex 32 bytes)

### OTP Security
- OTP valid 5 menit
- One-time use (tidak bisa digunakan 2x)
- Auto-mark sebagai "used" setelah verifikasi

### Access Control
- Route protection dengan decorator
- `@login_required` - Butuh login
- `@admin_required` - Butuh role admin
- Redirect ke login jika unauthorized

### Activity Logging
- Semua aktivitas tercatat
- IP address tracking
- Timestamp setiap action

## 📊 Monitoring Quota

**Quota Harian: 10,000 units**

| Operasi | Cost | Contoh Usage |
|---------|------|--------------|
| Search Videos | 100 | 100 pencarian/hari |
| Video Details | 1 | 10,000 requests/hari |
| Channel Info | 1 | 10,000 requests/hari |
| Comments | 1 | 10,000 requests/hari |
| Trending | 1 | 10,000 requests/hari |

**Cara Hemat Quota:**
- Gunakan video details (1 unit) daripada search (100 units) jika sudah tahu video ID
- Cache hasil di database untuk data yang jarang berubah
- Batasi max_results sesuai kebutuhan
- Monitor penggunaan di Google Cloud Console

## 🔧 Customization

### Menambah Region Trending
Edit `index.html`, tambahkan option di:
```html
<select id="trending-region">
    <option value="SG">Singapore</option>
    <option value="MY">Malaysia</option>
    <!-- dst -->
</select>

Mengubah Warna Tema

Edit bagian class di HTML, ganti:

• red-600 → warna pilihan (blue, green, purple, dll)
• Tailwind support semua warna: https://tailwindcss.com/docs/customizing-colors

📊 Monitoring Quota

Cek penggunaan quota di: https://console.cloud.google.com/apis/api/youtube.googleapis.com/quotas

🐛 Troubleshooting

Error: API Key Invalid

• Pastikan API Key sudah benar
• Pastikan YouTube Data API v3 sudah di-enable
• Cek restrictions di API Key settings

Error: Quota Exceeded

• Tunggu hingga quota reset (00:00 PST)
• Atau request quota tambahan di Google Cloud Console

Video/Channel Not Found

• Pastikan ID yang dimasukkan valid
• Beberapa video/channel private atau terhapus

📝 License

Free to use for educational purposes.

👨‍💻 Developer

Made with ❤️ using Flask, Tailwind CSS, Font Awesome & YouTube Data API v3