IMUII LogoIMUII

Web User Guide

Web User Guide

Panduan lengkap untuk menggunakan IMUII Web Dashboard.

Dokumentasi ini khusus untuk Web Users yang lebih suka bekerja melalui web interface.

📌 Note: Untuk CLI Users, lihat [CLI Reference](/docs/cli-reference).

🎯 Overview

IMUII Web Dashboard menyediakan interface yang user-friendly untuk:

  • 📊 Monitor semua projects dalam satu dashboard
  • 🚀 Create project baru (import dari GitHub atau upload template)
  • 📈 Track deployment status secara real-time
  • ⚙️ Manage project settings
  • 📝 View deployment history dan logs

🚀 Getting Started

Prerequisites

Sebelum memulai, pastikan Anda memiliki:

  1. Akun IMUII - Daftar/login di web dashboard
  2. GitHub Account - Untuk import project dari GitHub (opsional)

Step 1: Login

  1. Buka [IMUII Web Dashboard](https://imuii.id)
  2. Klik Login di navbar
  3. Login dengan akun Anda (OAuth flow)

Setelah login, Anda akan diarahkan ke Dashboard.

📊 Dashboard

Dashboard adalah halaman utama setelah login. Di sini Anda dapat melihat:

Recent Projects

Menampilkan 5 project terbaru dengan informasi:

  • 📦 Project name
  • 📅 Created date
  • 🔗 GitHub repository link
  • 📊 Status (Pending, Building, Deployed, Failed)
  • ➡️ Quick link ke detail project

Quick Actions

  • Create Project - Buat project baru
  • View All Projects - Lihat semua projects di My Work

🆕 Create Project

Ada dua cara untuk membuat project di web dashboard:

Opsi A: Import dari GitHub

Kapan menggunakan:
  • Project sudah ada di GitHub
  • Ingin menghubungkan project existing dengan IMUII
Langkah-langkah:
  1. Klik Create di navbar atau tombol Create Project di dashboard
  2. Pilih tab GitHub
  3. Pilih repository yang ingin di-import
  • Jika belum connect, akan diminta untuk connect GitHub account
  • Pilih repository dari daftar yang tersedia
  1. Isi konfigurasi project:
  • Project Name: Nama project (default: dari repo name)
  • Build Command: Command untuk build (contoh: npm install && npm run build)
  • Start Command: Command untuk start dev server (contoh: npm run dev)
  • Domain: Subdomain untuk deployment (contoh: my-project)
  • Email: Email untuk menerima deployment reports
  1. Klik Create Project
Setelah project dibuat:
  • Project akan muncul di dashboard
  • Status akan mulai dari Pending
  • Deployment akan dimulai otomatis

Opsi B: Upload Template

Kapan menggunakan:
  • Ingin membuat project baru dari template
  • Memiliki template custom yang ingin digunakan
Langkah-langkah:
  1. Klik Create di navbar
  2. Pilih tab Template
  3. Upload template file atau pilih dari template yang tersedia
  4. Isi konfigurasi project:
  • Project Name: Nama project
  • Build Command: Command untuk build
  • Start Command: Command untuk start dev server
  • Domain: Subdomain untuk deployment
  • Email: Email untuk menerima deployment reports
  1. Klik Create Project

📁 My Work

Halaman My Work menampilkan semua projects Anda.

Features

  • Project List: Semua projects dengan status dan informasi lengkap
  • Filter: Filter berdasarkan status (All, Pending, Building, Deployed, Failed)
  • Search: Cari project berdasarkan nama
  • Sort: Sort berdasarkan date created, name, atau status

Project Card

Setiap project card menampilkan:

  • 📦 Project name
  • 🔗 GitHub repository link
  • 📅 Created date
  • 📊 Status dengan icon:
  • ⏳ Pending - Menunggu deployment
  • 🔄 Building - Sedang build
  • ✅ Deployed - Sudah deployed dan live
  • ❌ Failed - Deployment gagal
  • ➡️ Link ke detail project

Actions

Klik project card untuk melihat detail dan melakukan actions:

  • View deployment logs
  • Update project settings
  • Redeploy project
  • Delete project

🔍 Project Detail

Halaman detail project menampilkan informasi lengkap tentang project.

Information Section

  • Project Name: Nama project
  • Status: Current deployment status
  • Domain: Subdomain URL (jika sudah deployed)
  • GitHub Repository: Link ke GitHub repo
  • Created Date: Tanggal project dibuat
  • Last Updated: Tanggal terakhir di-update

Deployment Status

Status deployment dengan visual indicator:

  • Pending (Yellow) - Menunggu deployment
  • Building (Blue) - Sedang build
  • Deployed (Green) - Sudah deployed dan live
  • Failed (Red) - Deployment gagal

Deployment Logs

Menampilkan logs dari deployment terakhir:

  • Build logs
  • Deployment logs
  • Error messages (jika ada)

Actions

  • Redeploy: Trigger deployment ulang
  • Settings: Update project settings
  • Delete: Hapus project (dengan konfirmasi)

⚙️ Project Settings

Di halaman settings, Anda dapat mengupdate:

Basic Settings

  • Project Name: Update nama project
  • Domain: Update subdomain
  • Email: Update email untuk deployment reports

Build Settings

  • Build Command: Command untuk build project
  • Start Command: Command untuk start development server

Advanced Settings

  • Environment Variables: Tambah/edit environment variables
  • GitHub Repository: Update GitHub repository link

Save Changes

Setelah mengupdate settings:

  1. Klik Save Changes
  2. Jika ada perubahan yang memerlukan redeploy, akan muncul notifikasi
  3. Klik Redeploy untuk apply changes

📈 Monitoring & Status

Real-time Updates

Dashboard dan project list akan update secara real-time:

  • Status berubah otomatis saat deployment progress
  • Logs update secara real-time saat building
  • Notifikasi muncul saat deployment selesai atau gagal

Status Indicators

Pending ⏳
  • Project baru dibuat
  • Menunggu deployment queue
  • Biasanya hanya beberapa detik
Building 🔄
  • Project sedang di-build
  • Logs akan muncul di real-time
  • Durasi tergantung complexity project
Deployed ✅
  • Project sudah berhasil di-deploy
  • Domain sudah aktif dan bisa diakses
  • Link ke live site tersedia
Failed ❌
  • Deployment gagal
  • Error message tersedia di logs
  • Bisa retry deployment

🔄 Deployment Flow

Automatic Deployment

Setelah project dibuat atau di-update:

  1. Trigger: Project dibuat atau settings di-update
  2. Queue: Project masuk ke deployment queue
  3. Build: System build project sesuai build command
  4. Deploy: Deploy ke server dan assign subdomain
  5. Complete: Status update ke Deployed

Manual Redeploy

Anda bisa trigger deployment manual:

  1. Buka project detail
  2. Klik Redeploy button
  3. Deployment akan dimulai dari awal

📝 Templates

Available Templates

IMUII menyediakan beberapa template siap pakai:

  • Next.js + TypeScript
  • Next.js + JavaScript
  • Vite + React + TypeScript
  • Vite + React + JavaScript

Upload Custom Template

Anda bisa upload template custom:

  1. Klik Templates di navbar
  2. Klik Upload Template
  3. Upload template file
  4. Template akan tersimpan dan bisa digunakan untuk create project

🎨 UI Features

Dark Mode

Dashboard mendukung dark mode:

  • Toggle di navbar (Theme Toggle)
  • Setting tersimpan di browser
  • Auto-detect system preference

Responsive Design

Dashboard responsive untuk semua device:

  • Desktop: Full features
  • Tablet: Optimized layout
  • Mobile: Mobile-friendly interface

Search

Search bar di dashboard untuk:

  • Cari project berdasarkan nama
  • Filter cepat

🔐 Account Management

User Menu

Klik user menu di navbar untuk:

  • View profile
  • Account settings
  • Logout

Profile

Di profile page, Anda dapat melihat:

  • Email
  • User ID
  • Account created date
  • Last login

🆘 Troubleshooting

Project Tidak Muncul

Problem: Project tidak muncul di dashboard setelah dibuat. Solutions:
  1. Refresh halaman
  2. Check filter settings (mungkin ter-filter)
  3. Check apakah project dibuat dengan akun yang sama
  4. Clear browser cache

Deployment Gagal

Problem: Deployment status stuck di Failed. Solutions:
  1. Check deployment logs untuk error message
  2. Verify build command dan start command
  3. Check GitHub repository accessibility
  4. Try redeploy
  5. Contact support jika masalah persist

Status Tidak Update

Problem: Status tidak update secara real-time. Solutions:
  1. Refresh halaman
  2. Check internet connection
  3. Clear browser cache
  4. Try di browser lain

GitHub Import Gagal

Problem: Tidak bisa import project dari GitHub. Solutions:
  1. Verify GitHub account sudah connected
  2. Check repository accessibility
  3. Verify repository bukan private (atau sudah granted access)
  4. Try connect GitHub account lagi

💡 Best Practices

1. Organize Projects

  • Gunakan nama project yang jelas dan deskriptif
  • Group projects dengan naming convention yang konsisten

2. Monitor Deployments

  • Check deployment logs secara berkala
  • Monitor status untuk early detection issues

3. Update Settings

  • Update build/start commands jika ada perubahan di project
  • Keep domain names consistent

4. Use Templates

  • Gunakan template yang sesuai untuk project baru
  • Create custom template untuk project yang sering dibuat

5. Regular Cleanup

  • Delete project yang tidak digunakan lagi
  • Archive old projects jika perlu

🔗 Integration dengan CLI

Anda bisa menggunakan Web dan CLI secara bersamaan:

Workflow Hybrid

  1. CLI untuk Setup: Gunakan CLI untuk inisialisasi project baru
  2. Web untuk Monitoring: Monitor deployment di web dashboard
  3. Web untuk Management: Manage multiple projects di web
  4. CLI untuk Updates: Update project via CLI jika perlu

Sync

  • Project yang dibuat via CLI otomatis muncul di web dashboard
  • Settings yang di-update di web akan sync dengan CLI
  • Deployment status sync antara CLI dan Web

📚 Related Documentation

  • [Getting Started](/docs/get-started) - Quick start guide
  • [CLI Reference](/docs/cli-reference) - Untuk CLI users
  • [Deployment Flow](/docs/deployment-flow) - Memahami proses deployment
  • [Troubleshooting](/docs/troubleshooting) - Solusi untuk masalah umum

🎯 Quick Reference

Keyboard Shortcuts

  • / - Focus search bar
  • Esc - Close modals/dropdowns

Common Actions

  • Create Project: Click "Create" di navbar
  • View All Projects: Click "My Work" di navbar
  • View Dashboard: Click logo atau "Dashboard" di navbar
  • Logout: Click user menu > Logout
💡 Tip: Web Dashboard adalah cara terbaik untuk monitor dan manage multiple projects. Gunakan CLI untuk setup, Web untuk monitoring!