183 lines
4.3 KiB
Markdown
183 lines
4.3 KiB
Markdown
|
# 🚀 Web Upload Automation Platform
|
|||
|
|
|
|||
|
|
> Sistem Web untuk **otomasi unggah file dan publikasi data** berbasis React + Vite.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📦 Teknologi yang Digunakan
|
|||
|
|
|
|||
|
|
| Layer | Stack |
|
|||
|
|
|-------|-------|
|
|||
|
|
| Frontend | **React + Vite + TailwindCSS + React Router v6** |
|
|||
|
|
| State Management | **Redux Toolkit** |
|
|||
|
|
| HTTP Client | **Axios (dengan interceptor JWT)** |
|
|||
|
|
| Auth | **JWT Token (disimpan di LocalStorage)** |
|
|||
|
|
| Backend | FastAPI (terpisah dari repo ini) |
|
|||
|
|
| Database | PostgreSQL + PostGIS |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ⚙️ Fitur Utama
|
|||
|
|
|
|||
|
|
### 🔑 Autentikasi
|
|||
|
|
- Login menggunakan JWT token.
|
|||
|
|
- Token disimpan di `localStorage` agar tetap login selama belum kadaluarsa.
|
|||
|
|
- Proteksi route admin via `ProtectedRoute`.
|
|||
|
|
|
|||
|
|
### 🧩 Upload File (Multi Format)
|
|||
|
|
- Dukungan **drag & drop** area (`FileDropzone`).
|
|||
|
|
- Mendukung berbagai format:
|
|||
|
|
- `.zip` (Shapefile / Geodatabase)
|
|||
|
|
- `.csv` / `.xlsx`
|
|||
|
|
- `.pdf`
|
|||
|
|
|
|||
|
|
### 🔍 Analisis & Validasi Data
|
|||
|
|
- Backend menganalisis isi file (misalnya memvalidasi koordinat atau ejaan wilayah).
|
|||
|
|
- Hasil analisis ditampilkan sebagai **preview data** dan **warning table**:
|
|||
|
|
- DataPreview.jsx menampilkan:
|
|||
|
|
- Cuplikan data (max 5 baris)
|
|||
|
|
- Data dengan ejaan tidak valid (jika ada)
|
|||
|
|
|
|||
|
|
### 🧾 Validasi & Upload ke Database
|
|||
|
|
- User memberi **judul tabel** sebelum disimpan ke PostGIS.
|
|||
|
|
- Validasi input:
|
|||
|
|
- Jika belum mengisi judul → notifikasi Tailwind muncul.
|
|||
|
|
- Konfirmasi sebelum meninggalkan halaman (peringatan bawaan browser).
|
|||
|
|
- Saat disimpan → hasil dari backend ditampilkan di halaman sukses.
|
|||
|
|
|
|||
|
|
### 🧠 Dashboard Admin
|
|||
|
|
- Navigasi menggunakan **AdminLayout** dengan navbar di atas.
|
|||
|
|
- Halaman admin:
|
|||
|
|
- `/admin/home` – Dashboard utama
|
|||
|
|
- `/admin/upload` – Form upload & validasi
|
|||
|
|
- `/admin/publikasi` – Manajemen publikasi
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🧭 Alur Upload File
|
|||
|
|
|
|||
|
|
### **1️⃣ Upload Step**
|
|||
|
|
User mengunggah file (drag & drop atau pilih manual).
|
|||
|
|
→ dikirim ke backend `/upload`
|
|||
|
|
→ backend mengembalikan `result` (kolom, preview, warning, dll.)
|
|||
|
|
|
|||
|
|
### **2️⃣ Validasi Step**
|
|||
|
|
User:
|
|||
|
|
- Melihat hasil preview dan warning.
|
|||
|
|
- Mengisi “Judul Tabel”.
|
|||
|
|
- Klik “Upload ke Database”.
|
|||
|
|
→ dikirim ke backend `/upload_to_postgis`.
|
|||
|
|
|
|||
|
|
### **3️⃣ Success Step**
|
|||
|
|
Response backend disimpan ke Redux (`validatedData`), lalu:
|
|||
|
|
- Ditampilkan di halaman sukses `/admin/upload/success`.
|
|||
|
|
- Menampilkan ringkasan hasil:
|
|||
|
|
- Nama tabel
|
|||
|
|
- Jumlah baris
|
|||
|
|
- Waktu upload
|
|||
|
|
- Pesan backend
|
|||
|
|
- Metadata tambahan (jika ada)
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ⚡ Instalasi & Menjalankan
|
|||
|
|
|
|||
|
|
### 1️⃣ Clone Repository
|
|||
|
|
```bash
|
|||
|
|
git clone https://github.com/yourusername/upload-automation.git
|
|||
|
|
cd upload-automation
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2️⃣ Install Dependencies
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3️⃣ Jalankan Server Development
|
|||
|
|
```bash
|
|||
|
|
npx vite
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4️⃣ (Opsional) Build untuk Produksi
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🔐 Konfigurasi Lingkungan (`.env`)
|
|||
|
|
Buat file `.env` di root proyek dan tambahkan:
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
VITE_API_URL=http://localhost:8000
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Lalu di `api.js`:
|
|||
|
|
```js
|
|||
|
|
baseURL: import.meta.env.VITE_API_URL
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🧩 Contoh Respons Backend
|
|||
|
|
|
|||
|
|
### `/upload` (POST)
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"file_type": ".pdf",
|
|||
|
|
"columns": ["id", "nama_desa", "kecamatan", "kabupaten"],
|
|||
|
|
"preview": [
|
|||
|
|
{ "id": 1, "nama_desa": "Kedungrejo", "kecamatan": "Waru", "kabupaten": "Sidoarjo" }
|
|||
|
|
],
|
|||
|
|
"geometry_valid": 120,
|
|||
|
|
"geometry_empty": 3,
|
|||
|
|
"warning_examples": [
|
|||
|
|
{ "nama_desa": "Kedung Rejo", "kecamatan": "waru", "kabupaten": "Sidoarjo" }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### `/upload_to_postgis` (POST)
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"table_name": "data_wilayah_valid",
|
|||
|
|
"total_rows": 123,
|
|||
|
|
"upload_time": "2025-10-28T10:14:00Z",
|
|||
|
|
"message": "Data berhasil disimpan ke PostGIS.",
|
|||
|
|
"metadata": {
|
|||
|
|
"user": "admin",
|
|||
|
|
"database": "geosystem",
|
|||
|
|
"duration": "1.2s"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🧑💻 Pengembang
|
|||
|
|
**Nama:** Dimas Anhar
|
|||
|
|
**Project:** Web Upload & Validation Automation Platform
|
|||
|
|
**Tujuan:** Sistem Otomatisasi Unggah dan Validasi Data Geospasial
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 💬 Catatan
|
|||
|
|
- Pastikan backend `FastAPI` berjalan di `localhost:8000`.
|
|||
|
|
- File besar (PDF/ZIP > 50MB) sebaiknya diunggah melalui koneksi stabil.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🧠 Rencana Pengembangan Selanjutnya
|
|||
|
|
- ✅ Pagination untuk tabel preview
|
|||
|
|
- ✅ Progress bar upload file
|
|||
|
|
- 🔄 Refresh token otomatis JWT
|
|||
|
|
- 🗂️ Manajemen file hasil upload
|
|||
|
|
- 🌐 Publikasi hasil ke GeoServer/GeoNetwork
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🏁 Lisensi
|
|||
|
|
MIT License © 2025 — Dimas Anhar
|