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_rows": [
|
||
{ "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
|