Topologi Jaringan Interaktif: Visualisasi Infrastruktur IT dengan OpenClaw

Bagaimana saya membangun aplikasi visualisasi topologi jaringan interaktif — 75 perangkat, monitoring real-time, dan manajemen device, semuanya dengan bantuan OpenClaw AI.

Apa Itu Project Ini?

Project ini adalah aplikasi web visualisasi topologi jaringan yang saya bangun untuk memetakan seluruh infrastruktur jaringan — dari server, switch, PC, printer, access point, hingga UPS — dalam satu tampilan interaktif yang bisa diakses dari browser.

Data saat ini:

• 75 perangkat (server, switch, PC, printer, access point, router, UPS, dll)
• 29 koneksi antar perangkat
• Monitoring status real-time (online/offline)
• Drag & drop untuk布局jaringan
• Manajemen device — tambah, edit, hapus, clone

Coba lihat langsung: Topologi Jaringan

Masalah yang Dipecahkan

Sebagai staf IT, saya sering menghadapi pertanyaan seperti:

"PC di ruang EDP2 IP-nya berapa?" "Switch mana yang nyambung ke server MySQL?" "Printer di ruang APWhatau fibratuh apa?" "Kenapa jaringan di lantai 2 putus?"

Sebelum project ini, jawabannya ada di kepala saya atau di file Excel yang sudah usang. Sekarang, semua orang bisa lihat langsung dari browser — lengkap dengan status hidup/mati setiap perangkat.

Arsitektur Project

┌─────────────────────────────────────────────────┐
│              Browser (Frontend)                  │
│  ┌───────────┐  ┌──────────┐  ┌──────────────┐ │
│  │  Sidebar   │  │  Canvas  │  │  Device Info │ │
│  │  - Form    │  │  - SVG   │  │  - Detail    │ │
│  │  - List    │  │  - Drag  │  │  - Status    │ │
│  │  - Filter  │  │  - Zoom  │  │  - Edit      │ │
│  └───────────┘  └──────────┘  └──────────────┘ │
└────────────────────┬────────────────────────────┘
                     │ API (JSON)
┌────────────────────▼────────────────────────────┐
│              API Server (PHP)                    │
│  ┌──────────┐  ┌──────────┐  ┌──────────────┐  │
│  │  GET     │  │  POST    │  │  Deploy      │  │
│  │  (Read)  │  │  (Save)  │  │  (Write)     │  │
│  └──────────┘  └──────────┘  └──────────────┘  │
└────────────────────┬────────────────────────────┘
                     │
┌────────────────────▼────────────────────────────┐
│              Data Storage                        │
│  ┌──────────────────────────────────────────┐   │
│  │  data.json (75 devices, 29 links)        │   │
│  └──────────────────────────────────────────┘   │
└─────────────────────────────────────────────────┘

Fitur Utama

1. Visualisasi Interaktif

Setiap perangkat digambarkan sebagai node dengan ikon dan warna yang sesuai:

2. Monitoring Real-Time

Aplikasi bisa melakukan ping ke setiap perangkat untuk mengetahui status online/offline:

Status ONLINE  = Hijau  ✅ (response time < 100ms)
Status SLOW    = Kuning ⚠️ (response time 100-500ms)  
Status OFFLINE = Merah  ❌ (timeout / unreachable)

3. Manajemen Device

• Tambah perangkat — pilih tipe, isi nama, IP, lokasi, catatan
• Edit perangkat — klik node, ubah informasi
• Hapus perangkat — pilih, konfirmasi, selesai
• Clone perangkat — duplikasi untuk perangkat serupa
• Drag & drop — geser posisi node di canvas

4. Filter dan Pencarian

• Filter berdasarkan tipe perangkat (server, switch, PC, printer, dll)
• Filter berdasarkan status (online/offline)
• Pencarian berdasarkan nama atau IP

5. Koneksi Antar Perangkat

Koneksi digambarkan sebagai garis antar node:

┌──────────┐    Fiber    ┌──────────┐
│  Server  │─────────────│  Switch  │
│  MySQL   │             │  Fiber   │
└──────────┘             └──────────┘
                              │
                         Fiber│
                              │
                        ┌─────▼──────┐
                        │   Switch   │
                        │   HUB RM   │
                        └────────────┘

Tech Stack

Peran OpenClaw

Project ini 100% dibangun dengan bantuan OpenClaw. Berikut peran AI dalam setiap tahap:

Tahap 1: Desain Arsitektur

Saya menjelaskan kebutuhan saya:

"Saya punya 75 perangkat jaringan. Butuh aplikasi web untuk visualisasikan semua itu secara interaktif."

OpenClaw langsung merancang:

• Struktur data JSON untuk devices dan links
• Arsitektur frontend-backend
• Skema API untuk CRUD

Tahap 2: Coding Frontend

OpenClaw menulis 1296 baris HTML/CSS/JS dalam satu file:

• Canvas rendering untuk node dan edges
• Drag & drop system
• Sidebar form untuk CRUD
• Filter dan pencarian
• Responsive design

Tahap 3: Coding Backend

OpenClaw menulis 135 baris PHP untuk API:

• GET untuk membaca data
• POST untuk menyimpan data
• Deploy action untuk write file
• Data verification setelah save

Tahap 4: Testing & Debugging

Ketika ada masalah, OpenClaw langsung fix:

• JSON decode error → fix data validation
• Node tidak bisa di-drag → fix event handler
• Status monitoring timeout → fix ping implementation

Tahap 5: Deployment

OpenClaw membantu deploy ke server:

• Upload file ke shared hosting via robotku.php
• Setup API endpoint
• Verifikasi akses dari browser

Contoh Penggunaan

Melihat Status Jaringan

Buka browser, akses https://gretha.my.id/topologi/. Sidebar menampilkan daftar semua perangkat. Klik salah satu untuk melihat detail:

┌─────────────────────────┐
│  🖥️ Server MySQL        │
│  ─────────────────────  │
│  IP: 192.168.168.8      │
│  Tipe: Server           │
│  Lokasi: Ruang Server   │
│  Status: ✅ ONLINE      │
│  Response: 12ms         │
└─────────────────────────┘

Menambah Perangkat Baru

1. Klik "+ Tambah Device" di sidebar
2. Pilih tipe (Server, Switch, PC, dll)
3. Isi nama, IP, lokasi, catatan
4. Klik "Simpan"
5. Node muncul di canvas, drag ke posisi yang tepat

Mengedit Perangkat

1. Klik node yang ingin diedit
2. Panel detail muncul di sidebar
3. Klik "Edit"
4. Ubah informasi yang diperlukan
5. Klik "Simpan"

Insight dari Project Ini

1. Visualisasi Mengubah Cara Kerja

Sebelum project ini, saya harus hafal mana switch yang nyambung ke mana. Sekarang, cukup lihat diagram. Waktu troubleshooting turun drastis.

2. Data Real-Time = Keputusan Lebih Cepat

Ketika ada masalah jaringan, saya bisa langsung cek status semua perangkat dari satu halaman. Tidak perlu telpon satu-satu.

3. AI Mempercepat Development

Dulu, project seperti ini butuh waktu berminggu-minggu. Dengan OpenClaw, saya bisa bangun dalam beberapa jam. AI menulis kode, saya review dan test.

4. Shared Hosting Bisa Untuk App Serius

Banyak yang pikir shared hosting hanya untuk blog. Ternyata, dengan desain yang tepat (stateless API + JSON storage), shared hosting bisa menjalankan app interaktif yang powerful.

Tantangan dan Solusi

Demo Langsung

Mencoba project ini? Kunjungi:

👉 https://gretha.my.id/topologi/

• Buka sidebar dengan klik tombol ☰
• Klik device untuk melihat detail
• Filter berdasarkan tipe atau status
• Drag node untuk mengatur layout

Download & Instalasi

Project ini open source — silakan download dan pakai di jaringan Anda sendiri!

📥 Download

👉 Download topologi.zip (18 KB)

File yang Didapat

topologi/
├── index.html    ← Aplikasi utama (buka di browser)
├── api.php       ← Backend API untuk simpan data
├── data.json     ← Data topologi (75 device, 29 links)
├── data_old.json ← Backup data sebelumnya
└── up.php        ← Script upload file

Tutorial Instalasi

Persiapan

Yang Anda butuhkan:

Langkah 1: Extract File

# Extract topologi.zip ke folder web server
# Untuk XAMPP:
unzip topologi.zip -d C:\xampp\htdocs\topologi

# Untuk Laragon:
unzip topologi.zip -d C:\laragon\www\topologi

# Untuk Linux:
sudo unzip topologi.zip -d /var/www/html/topologi

Langkah 2: Buka di Browser

http://localhost/topologi/

Tampilan langsung jalan! Anda sudah bisa melihat topologi jaringan.

Langkah 3: Edit Data Topologi (Kustomisasi)

Buka file data.json dengan text editor untuk mengganti device sesuai jaringan Anda:

{
  "devices": [
    {
      "id": 1,
      "name": "Server MySQL",
      "type": "server",
      "ip": "192.168.1.10",
      "location": "Ruang Server",
      "x": 400,
      "y": 200,
      "notes": "Database utama"
    },
    {
      "id": 2,
      "name": "Switch Utama",
      "type": "switch",
      "ip": "",
      "location": "Ruang Server",
      "x": 600,
      "y": 200,
      "notes": ""
    }
  ],
  "links": [
    { "from": 1, "to": 2, "label": "Fiber" }
  ],
  "nextId": 3
}

Tips:

• type bisa diisi: server, switch, pc, printer, accesspoint, router, ups, cctv, other
• x dan y = posisi node di canvas (koordinat pixel)
• from dan to = ID device yang terhubung

Langkah 4: Deploy ke Server (Opsional)

Kalau ingin diakses dari mana saja:

# Upload ke VPS/shared hosting
scp -r topologi/ user@server:/var/www/html/topologi/

Atau gunakan robotku.php (file manager API) seperti yang saya lakukan di gretha.my.id.

Langkah 5: Kustomisasi Tampilan

Buka index.html untuk mengubah:

• Warna tema — edit CSS di bagian :root
• Logo/nama — edit teks di bagian sidebar header
• Icon device — ubah emoji di bagian DEVICE_TYPES
• Map area — ganti gambar latar (opsional)

FAQ

Q: Apakah butuh database MySQL?

A: Tidak! Data disimpan di file data.json — cukup copy paste, tidak perlu setup database.

Q: Berapa maksimal device yang bisa ditambah?

A: Secara teknis tidak ada batas. Tapi untuk performa optimal, di bawah 500 device masih nyaman.

Q: Bisa diakses dari HP?

A: Ya! Frontend sudah responsive. Bisa diakses dari browser HP.

Q: Data bisa hilang kalau server restart?

A: Tidak. Data tersimpan di file data.json yang persisten. File data_old.json adalah backup otomatis.

Kesimpulan

Project topologi jaringan ini membuktikan bahwa:

1. AI bisa membantu membangun app nyata — bukan hanya chatbot atau script kecil
2. Visualisasi data jaringan sangat membantu — troubleshooting jadi lebih cepat
3. Shared hosting masih relevan — untuk app yang didesain dengan benar
4. OpenClaw adalah mitra coding yang powerful — dari desain hingga deployment

Yang dulunya hanya bisa diakses oleh admin IT (yang hafal IP semua PC), sekarang bisa dilihat oleh siapa saja yang punya akses ke jaringan. Itulah kekuatan visualisasi data.

Project ini dibangun sepenuhnya dengan bantuan OpenClaw AI + DeepSeek Model. Semua kode, debugging, dan deployment dilakukan melalui chat.