9drive 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +432 -389
- package/backend/dist/modules/system/system.routes.js +12 -5
- package/backend/prisma/schema.sqlite.prisma +354 -354
- package/backend/public/assets/{index-sAYu4Fpp.js → index-BdvnnDEz.js} +30 -30
- package/backend/public/assets/index-C7bWEPbJ.css +2 -0
- package/backend/public/assets/{ort.bundle.min-DJ4PiNdC.js → ort.bundle.min-BWec8A6i.js} +1 -1
- package/backend/public/assets/{ort.webgpu.bundle.min-BmjguWk-.js → ort.webgpu.bundle.min-BJrZkBGK.js} +1 -1
- package/backend/public/index.html +2 -2
- package/backend/public/sw.js +1 -1
- package/bin/9drive.js +424 -423
- package/package.json +60 -60
- package/backend/public/assets/index-CriZZwHi.css +0 -2
package/README.md
CHANGED
|
@@ -1,389 +1,432 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# 9Drive — Virtual Cloud Storage & Client-Side Productivity Suite
|
|
4
|
-
|
|
5
|
-
[
|
|
2
|
+
|
|
3
|
+
# 9Drive — Virtual Cloud Storage & Client-Side Productivity Suite
|
|
4
|
+
|
|
5
|
+
[](package.json)
|
|
6
|
+
[](https://www.npmjs.com/package/9drive)
|
|
7
|
+
[](LICENSE)
|
|
8
|
+
[]()
|
|
9
|
+
|
|
10
|
+
**9Drive** adalah platform virtual cloud storage gateway modern yang menggabungkan banyak akun **Google Drive** dan **S3-Compatible Storage** (Cloudflare R2, MinIO, Wasabi, AWS S3, Backblaze B2) ke dalam satu dashboard terpadu bergaya **Google Drive Material Design 3 (MD3)**.
|
|
11
|
+
|
|
12
|
+
Dilengkapi dengan **High-Performance CDN Media Gateway**, **External Upload API**, serta **Client-Side Productivity Tools Suite** lengkap (alat olah PDF, AI Hapus Background Gambar, Ekstraksi Audio Video, dan Utilitas Data) yang berjalan 100% di browser secara aman, cepat, dan terintegrasi langsung dengan penyimpanan Drive Anda.
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## ⚡ Panduan Menjalankan 9Drive (CLI)
|
|
17
|
+
|
|
18
|
+
9Drive dapat dipasang secara global di sistem operasi manapun (Windows, macOS, Linux) tanpa perlu setup database manual, menggunakan bundled local-first storage engine (SQLite) dan auto-launching browser dashboard.
|
|
19
|
+
|
|
20
|
+
### 1. Pasang Secara Global
|
|
21
|
+
Buka terminal / Command Prompt dan jalankan:
|
|
22
|
+
```bash
|
|
23
|
+
npm install -g 9drive
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### 2. Jalankan Aplikasi Kapan Saja
|
|
27
|
+
Setelah terpasang, cukup ketik perintah berikut dari direktori mana saja untuk membuka 9Drive:
|
|
28
|
+
```bash
|
|
29
|
+
9drive
|
|
30
|
+
```
|
|
31
|
+
> *9Drive akan otomatis menyiapkan direktori data lokal `~/.9drive`, menyinkronkan database SQLite, dan membuka antarmuka web di browser default Anda (`http://localhost:9999`).*
|
|
32
|
+
|
|
33
|
+
> **💡 Pasang Icon di Desktop (Opsional):**
|
|
34
|
+
> Bagi Anda yang ingin membuka 9Drive cukup dengan klik dua kali icon Desktop/Start Menu tanpa membuka terminal, jalankan:
|
|
35
|
+
> ```bash
|
|
36
|
+
> 9drive shortcut
|
|
37
|
+
> ```
|
|
38
|
+
> *(Tersedia untuk Windows, macOS, dan Linux).*
|
|
39
|
+
|
|
40
|
+
*(Catatan: Anda juga bisa menjalankannya instan tanpa instalasi menggunakan `npx 9drive`)*
|
|
41
|
+
|
|
42
|
+
#### Perintah CLI yang Tersedia:
|
|
43
|
+
| Perintah | Deskripsi |
|
|
44
|
+
|---|---|
|
|
45
|
+
| `9drive` / `9drive start` | Menjalankan server lokal dan membuka dashboard di browser |
|
|
46
|
+
| `9drive shortcut` | Memasang shortcut / icon launcher di Desktop (Opsional) |
|
|
47
|
+
| `9drive status` | Memeriksa lokasi direktori data, ukuran database SQLite, & konfigurasi |
|
|
48
|
+
| `9drive backup` | Membuat cadangan (*snapshot backup*) database lokal secara instan |
|
|
49
|
+
| `9drive open` | Membuka antarmuka 9Drive di browser |
|
|
50
|
+
| `9drive --port <num>` | Menjalankan pada port kustom (contoh: `--port 8080`) |
|
|
51
|
+
| `9drive --db <url>` | Menghubungkan ke database kustom (MySQL / PostgreSQL / SQLite) |
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## 🌟 Fitur Utama & Pembaruan Terkini
|
|
56
|
+
|
|
57
|
+
Repositori ini telah disesuaikan dan dikembangkan dengan penambahan serangkaian fitur produktivitas:
|
|
58
|
+
|
|
59
|
+
### 1. 🎨 Antarmuka Google Drive Material Design 3 (MD3)
|
|
60
|
+
- **Tampilan Otentik Google Drive**: Navigasi sidebar dengan indikator pill aktif, floating search bar, breadcrumbs folder dinamis, surface elevation, dan palet warna resmi Google Drive (`#0B57D0`, background neutral, rounded cards).
|
|
61
|
+
- **Drive Account Selector Terpadu**: Dropdown pemilih akun Drive langsung di navbar untuk memfilter tampilan berkas berdasarkan akun Google Drive tertentu atau menampilkan semua akun sekaligus.
|
|
62
|
+
- **Pengurutan Berkas & Folder Fleksibel (*Smart Sorting*)**: Toolbar My Drive dilengkapi opsi pengurutan instan berdasarkan Terakhir Diubah (*Last Modified*), Nama (A-Z / Z-A), serta Ukuran Berkas / Folder (Terbesar / Terkecil).
|
|
63
|
+
- **Banner Status & Panduan Setup Terpadu**: Indikator minimalis di bagian atas daftar berkas jika akun Drive belum terhubung, lengkap dengan tombol langsung menuju panduan aktivasi Google Console.
|
|
64
|
+
- **Deteksi Pembaruan Versi Real-Time**: Aplikasi secara otomatis mendeteksi ketersediaan rilis versi terbaru di NPM dan menyediakan tombol 1-klik untuk menyalin perintah pembaruan.
|
|
65
|
+
- **Global Search Bar Cerdas**: Pencarian instan berkas dan folder dilengkapi filter cepat berdasarkan tipe berkas (Dokumen, Gambar, Video, PDF, ZIP), rentang tanggal modifikasi, dan akun penyimpanan.
|
|
66
|
+
- **Sistem Notifikasi Floating Toast (`ToastContext`)**: Notifikasi mengambang yang responsif dan interaktif untuk memberikan konfirmasi aksi (unggah, hapus, salin tautan, mutasi berkas) tanpa mengganggu alur kerja pengguna.
|
|
67
|
+
- **Menu Konteks Klik Kanan Lengkap (*Right-Click Context Menu*)**:
|
|
68
|
+
- **Menu Berkas**: Buka di Tools Suite, Salin Tautan CDN, Pratinjau, Unduh, Ganti Nama, Pindahkan, Bagikan, Berbintang (Star), Laci Detail, Hapus ke Sampah.
|
|
69
|
+
- **Menu Folder**: Buka Folder, Bagikan, Ganti Nama, Pindahkan, Info Detail, Hapus.
|
|
70
|
+
- **Menu Ruang Kosong (*Canvas Area*)**: Klik kanan pada area kosong untuk langsung mengunggah berkas, mengunggah folder, atau membuat folder baru.
|
|
71
|
+
- **Laci Detail Berkas (*File Details Drawer*)**:
|
|
72
|
+
- Menampilkan pratinjau thumbnail visual, metadata teknis (ukuran berkas, tipe MIME, lokasi folder, tanggal pembuatan/modifikasi, akun pemilik).
|
|
73
|
+
- Tombol aksi instan untuk membuka berkas langsung ke dalam modul **Tools Suite** (PDF Tools, Image Tools, Remove BG) atau menyalin tautan publik CDN.
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
### 2. 🛠️ Productivity & Tools Suite (100% Client-Side & Privasi Terjaga)
|
|
78
|
+
Pusat alat pengolah dokumen dan multimedia yang berjalan sepenuhnya di browser client (tanpa membebani CPU server atau mengirim berkas pribadi ke pihak ketiga):
|
|
79
|
+
|
|
80
|
+
#### 📄 PDF Suite (`/tools/pdf`)
|
|
81
|
+
- **Merge PDF**: Menggabungkan beberapa berkas PDF menjadi satu dokumen berurutan sesuai susunan yang ditentukan.
|
|
82
|
+
- **Split PDF**: Memecah halaman PDF atau mengekstrak rentang halaman tertentu menjadi berkas tersendiri.
|
|
83
|
+
- **Compress PDF**: Mengurangi ukuran dokumen PDF agar hemat penyimpanan dan cepat dibagikan tanpa merusak keterbacaan teks.
|
|
84
|
+
- **JPG ke PDF**: Mengonversi dan merangkai sekumpulan foto (JPG, PNG, WebP) menjadi satu berkas album PDF yang rapi.
|
|
85
|
+
- **PDF ke Gambar (JPG/PNG)**: Mengekstrak setiap lembar halaman dokumen PDF menjadi berkas gambar resolusi tinggi dengan pratinjau instan.
|
|
86
|
+
- **Rotate PDF**: Memutar orientasi lembar dokumen PDF yang terbalik (90°, 180°, 270°) secara serentak.
|
|
87
|
+
- **Watermark PDF**: Membubuhkan stempel teks hak cipta atau tanda keamanan kustom (contoh: *RAHASIA*, *DRAFT*) pada lembar PDF.
|
|
88
|
+
|
|
89
|
+
#### 🖼️ AI & Image Suite (`/tools/image` & `/tools/remove-bg`)
|
|
90
|
+
- **Hapus Background AI (`/tools/remove-bg`)**:
|
|
91
|
+
- Menghapus latar belakang foto manusia atau produk secara otomatis dan instan menggunakan model AI langsung di browser (`@imgly/background-removal`).
|
|
92
|
+
- Dilengkapi slider perbandingan **Before/After** interaktif.
|
|
93
|
+
- Opsi penggantian background kustom: transparan (PNG), palet warna solid, atau latar belakang gambar kustom.
|
|
94
|
+
- **Kompres Gambar**: Mengecilkan ukuran foto JPG, PNG, dan WebP hingga 80% dengan kualitas visual optimal.
|
|
95
|
+
- **Potong Foto / Pas Foto**: Pemotongan gambar dengan preset rasio resmi (Pas Foto 3:4, 4:6, Persegi 1:1, atau rasio bebas).
|
|
96
|
+
- **Konversi Format Gambar**: Konversi format berkas secara batch antara WebP, PNG, dan JPG.
|
|
97
|
+
- **Ubah Ukuran (Resize)**: Menyesuaikan dimensi piksel atau persentase skala dengan pengunci rasio aspek (*aspect-ratio lock*).
|
|
98
|
+
- **Watermark Foto**: Menambahkan cap teks hak cipta pada posisi tengah atau sudut berkas secara batch.
|
|
99
|
+
|
|
100
|
+
#### 🎬 Video & Audio Suite (`/tools/video`)
|
|
101
|
+
- **Ekstrak Audio Video**: Mengambil dan mengubah suara dari video (MP4, WebM, MOV) menjadi berkas audio jernih (`.wav`) langsung di browser.
|
|
102
|
+
|
|
103
|
+
#### 📊 Utilitas Data & Berkas (`/tools/data`)
|
|
104
|
+
- **CSV ⇄ JSON Converter**: Konversi dua arah data tabel CSV dan format JSON secara instan dengan auto-formatting rapi.
|
|
105
|
+
- **File Hash & Checksum**: Menghitung sidik jari digital (SHA-256) berkas untuk memverifikasi keaslian dan integritas dokumen.
|
|
106
|
+
- **Base64 Encoder / Decoder**: Mengubah berkas atau gambar menjadi teks kode data Base64 untuk kebutuhan embedding web atau konfigurasi.
|
|
107
|
+
|
|
108
|
+
#### 🔄 Integrasi Seamless dengan 9Drive
|
|
109
|
+
- **Drive File Picker Modal**: Ambil berkas langsung dari folder 9Drive untuk langsung diproses di dalam tools tanpa perlu mengunduh ke komputer lokal terlebih dahulu.
|
|
110
|
+
- **Save Destination Modal**: Simpan hasil olahan tools langsung kembali ke folder 9Drive yang dipilih, atau unduh ke perangkat lokal sebagai file tunggal maupun arsip ZIP otomatis.
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
### 3. ⚡ High-Performance CDN Media Gateway (`/cdn`)
|
|
115
|
+
Gerbang pengiriman media berkinerja tinggi untuk kebutuhan embedding gambar, video, dan berkas statis:
|
|
116
|
+
- **Tautan Streaming & Pratinjau Publik**:
|
|
117
|
+
- `GET /cdn/view/:id`: Pengiriman berkas dengan header `inline` disposition. Sangat optimal untuk tag HTML `<img>`, `<video>`, audio player, maupun pratinjau dokumen di web eksternal.
|
|
118
|
+
- `GET /cdn/raw/:id`: Pengiriman berkas dengan header `attachment` untuk unduhan langsung.
|
|
119
|
+
- **Dukungan HTTP 206 Partial Content (Range Requests)**: Memungkinkan penonton video atau pendengar audio melakukan seeking/scrubbing timeline tanpa harus mengunduh keseluruhan berkas.
|
|
120
|
+
- **Mekanisme Caching Agresif**: Mendukung header `ETag`, `Last-Modified`, validasi `If-None-Match` (HTTP 304 Not Modified), serta `Cache-Control: public, max-age=31536000, immutable` untuk menghemat bandwidth server.
|
|
121
|
+
- **Dynamic Open CORS**: Mengizinkan akses lintas domain (`*`) khusus untuk jalur `/cdn`, `/api`, dan `/public`.
|
|
122
|
+
- **One-Click CDN Link & Embed Modal**: Generator kode siap pakai di antarmuka (Direct URL, Tag HTML `<img>`, dan sintaks Markdown).
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
### 4. 🔌 External Upload API & Developer Hub (`/api`)
|
|
127
|
+
- **Manajemen API Key Terpadu (`/api`)**:
|
|
128
|
+
- Pembuatan API Key aman dengan hashing token (SHA-256) di database dan tampilan rahasia satu kali (*one-time secret modal*).
|
|
129
|
+
- Pembatasan izin akses (*scope permissions*, misalnya `files:upload`).
|
|
130
|
+
- Pemantauan waktu penggunaan terakhir (*last-used tracking*) dan pencabutan kunci (*revocation*).
|
|
131
|
+
- **Endpoint Unggah Publik**: `POST /api/v1/uploads` dengan otentikasi header `X-API-Key` atau `Authorization: Bearer <API_KEY>`.
|
|
132
|
+
- **Dokumentasi SDK Interaktif In-App**: Contoh kode siap pakai untuk cURL, Node.js (fetch & axios), Python, PHP, dan Bash testing script bawaan (`test-external-upload.ts`).
|
|
133
|
+
- **Target Folder & Routing Fleksibel**: Berkas eksternal dapat diarahkan langsung ke ID folder virtual tertentu serta mengikuti kebijakan alokasi akun penyimpanan yang aktif.
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
### 5. ☁️ Multi-Account & Storage Gateway
|
|
138
|
+
- **Multi-Account Google Drive**: Hubungkan beberapa akun Google Drive dalam satu akun 9Drive untuk menggabungkan total kapasitas penyimpanan cloud.
|
|
139
|
+
- **S3-Compatible Storage Gateway**: Mendukung integrasi MinIO, Cloudflare R2, Wasabi, Backblaze B2, dan AWS S3.
|
|
140
|
+
- **Upload Routing Policies**: Kebijakan alokasi unggahan cerdas:
|
|
141
|
+
- *Most-Available*: Mengunggah ke akun dengan sisa kuota terbesar.
|
|
142
|
+
- *Round-Robin*: Distribusi bergantian secara merata antar akun.
|
|
143
|
+
- *Priority-Order*: Memenuhi akun utama terlebih dahulu sebelum beralih ke akun sekunder.
|
|
144
|
+
- **Direct Stream Upload**: Berkas dialirkan langsung (*piped stream*) dari pengguna ke Google Drive / S3 storage gateway tanpa pernah disimpan di disk lokal server.
|
|
145
|
+
- **Quota Tracker**: Visualisasi pemakaian penyimpanan, persentase kuota, dan breakdown kapasitas per akun.
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
### 6. 🔗 Smart Sharing & Permission System
|
|
150
|
+
- **Dialog Berbagi Interaktif (`ShareModal`)**:
|
|
151
|
+
- Konfigurasi izin akses: *Restricted* (hanya akun tertentu) atau *Anyone with the link* (publik).
|
|
152
|
+
- Penentuan hak akses: *Viewer*, *Commenter*, dan *Editor*.
|
|
153
|
+
- **Deteksi Izin Warisan (*Inherited Permission Origin*)**: Secara otomatis mendeteksi jika suatu berkas mewarisi status publik dari folder induknya, serta menyediakan opsi langsung untuk mengatur izin folder asalnya.
|
|
154
|
+
- **Halaman Berbagi (`/shared`)**: Tampilan tab terpisah untuk berkas yang dibagikan kepada Anda (*Shared with me*) dan berkas yang Anda bagikan ke orang lain (*Shared by me*).
|
|
155
|
+
- **Halaman Berbintang (`/starred`) & Sampah (`/trash`)**: Manajemen berkas favorit yang terhubung ke Google Drive API, serta pemulihan atau penghapusan permanen dari tempat sampah.
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
159
|
+
### 7. ⚙️ Manajemen Konfigurasi & Pembaruan Sistem
|
|
160
|
+
- **Konfigurasi Google OAuth via UI**: Input Google Client ID, Client Secret, dan Redirect URI langsung melalui halaman **Settings -> Google Credentials** di dashboard tanpa wajib menjalankan seed manual terminal. Kredensial dienkripsi aman (AES-256) di database MySQL.
|
|
161
|
+
- **Automated In-App Updates (PM2)**: Menu pembaruan sistem sekali klik di UI Settings yang menjalankan git pull, migrasi Prisma, build aset, dan restart layanan backend otomatis dengan monitor log langsung.
|
|
162
|
+
- **Monorepo Dev Runner**: Satu perintah di root workspace untuk menjalankan frontend dan backend secara bersamaan.
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
## 📁 Struktur Direktori Repositori
|
|
167
|
+
|
|
168
|
+
```txt
|
|
169
|
+
9drive/
|
|
170
|
+
├── backend/ # API Server (Express + TypeScript + Prisma)
|
|
171
|
+
│ ├── prisma/ # Skema database & file migrasi MySQL
|
|
172
|
+
│ └── src/
|
|
173
|
+
│ ├── config/ # Konfigurasi env & Prisma client
|
|
174
|
+
│ ├── middleware/ # Otentikasi JWT, API Key, dan error handler
|
|
175
|
+
│ ├── modules/
|
|
176
|
+
│ │ ├── api-keys/ # Pengelolaan API Key developer
|
|
177
|
+
│ │ ├── audit-logs/ # Pencatatan riwayat aktivitas pengguna
|
|
178
|
+
│ │ ├── auth/ # Registrasi, login, dan refresh token
|
|
179
|
+
│ │ ├── cdn/ # High-performance CDN media streaming gateway
|
|
180
|
+
│ │ ├── connected-accounts/ # Manajemen multi-akun Google Drive
|
|
181
|
+
│ │ ├── files/ # Manipulasi berkas, streaming, dan preview
|
|
182
|
+
│ │ ├── folders/ # Virtual folder tree management
|
|
183
|
+
│ │ ├── google/ # Integrasi Google Drive API & OAuth
|
|
184
|
+
│ │ ├── public-api/ # Endpoint REST API publik (/api/v1/uploads)
|
|
185
|
+
│ │ ├── storage/ # Ringkasan kuota dan manajemen penyimpanan
|
|
186
|
+
│ │ ├── system/ # Updater otomatis & status sistem
|
|
187
|
+
│ │ └── uploads/ # Multi-part upload streaming engine
|
|
188
|
+
│ └── scripts/ # Script pengujian upload eksternal & seeding
|
|
189
|
+
│
|
|
190
|
+
├── frontend/ # Aplikasi Web Client (React 18 + Vite + Tailwind/MD3)
|
|
191
|
+
│ └── src/
|
|
192
|
+
│ ├── components/
|
|
193
|
+
│ │ ├── drive/ # UI Google Drive MD3 (FileGrid, ContextMenu, Drawer, ShareModal, dll)
|
|
194
|
+
│ │ ├── tools/ # UI Tools Suite (Picker, BeforeAfterPreview, SaveDestination, Icons)
|
|
195
|
+
│ │ └── ui/ # Komponen atomik UI (Buttons, Inputs, Dialogs, Cards)
|
|
196
|
+
│ ├── context/ # State context (DriveFilter, UploadManager, ToastNotification)
|
|
197
|
+
│ ├── layouts/ # Layout utama Drive (Sidebar, Header, Main Content Area)
|
|
198
|
+
│ ├── lib/tools/ # Core engine tools (PDF, Image, Video-to-audio, Background removal AI)
|
|
199
|
+
│ └── pages/
|
|
200
|
+
│ ├── tools/ # Halaman Tools Hub, PDF View, Image View, Video View, Data View, RemoveBG
|
|
201
|
+
│ ├── AllFilesPage.tsx
|
|
202
|
+
│ ├── ApiManagementPage.tsx
|
|
203
|
+
│ ├── QuotaTrackerPage.tsx
|
|
204
|
+
│ ├── SettingsPage.tsx
|
|
205
|
+
│ ├── SharedPage.tsx
|
|
206
|
+
│ ├── StarredPage.tsx
|
|
207
|
+
│ └── TrashPage.tsx
|
|
208
|
+
│
|
|
209
|
+
├── setup.ps1 # Script setup otomatis untuk Windows PowerShell
|
|
210
|
+
├── setup.sh # Script setup otomatis untuk Linux/macOS
|
|
211
|
+
├── docker-compose.yml # Orchestration Docker (MySQL + Backend + Frontend)
|
|
212
|
+
└── package.json # Monorepo root dev runner (concurrently)
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
---
|
|
216
|
+
|
|
217
|
+
## 💻 Prasyarat Sistem
|
|
218
|
+
|
|
219
|
+
- **Node.js**: Versi 20 LTS atau lebih baru
|
|
220
|
+
- **NPM**: Versi 10+
|
|
221
|
+
- **MySQL**: Versi 8.0+ berjalan secara lokal atau via Docker
|
|
222
|
+
- **Google Cloud Project**:
|
|
223
|
+
- Mengaktifkan **Google Drive API**
|
|
224
|
+
- Mengonfigurasi **OAuth Consent Screen**
|
|
225
|
+
- Membuat **OAuth 2.0 Client ID** (Web Application)
|
|
226
|
+
|
|
227
|
+
Default basis data MySQL yang digunakan pada development lokal:
|
|
228
|
+
```txt
|
|
229
|
+
Host: localhost
|
|
230
|
+
Port: 3306
|
|
231
|
+
Database: 9drive
|
|
232
|
+
User: root
|
|
233
|
+
Password: (kosong / sesuaikan dengan konfigurasi MySQL Anda)
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
---
|
|
237
|
+
|
|
238
|
+
## 🚀 Panduan Instalasi & Menjalankan Proyek
|
|
239
|
+
|
|
240
|
+
### Cara 1: Setup Otomatis Menggunakan Script (Direkomendasikan)
|
|
241
|
+
|
|
242
|
+
Script setup akan secara otomatis memasang seluruh dependensi backend dan frontend, membuat berkas `.env` dengan token acak yang aman, serta membuat skema database Prisma.
|
|
243
|
+
|
|
244
|
+
#### Windows (PowerShell)
|
|
245
|
+
Buka PowerShell di direktori `9drive`:
|
|
246
|
+
```powershell
|
|
247
|
+
powershell -ExecutionPolicy Bypass -File .\setup.ps1
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
#### Linux / macOS
|
|
251
|
+
Buka Terminal di direktori `9drive`:
|
|
252
|
+
```bash
|
|
253
|
+
chmod +x ./setup.sh
|
|
254
|
+
./setup.sh
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
---
|
|
258
|
+
|
|
259
|
+
### Cara 2: Setup Manual & Menjalankan Monorepo
|
|
260
|
+
|
|
261
|
+
#### 1. Pasang Dependensi
|
|
262
|
+
Dari direktori root proyek `9drive`:
|
|
263
|
+
```bash
|
|
264
|
+
# Pasang dependensi monorepo runner
|
|
265
|
+
npm install
|
|
266
|
+
|
|
267
|
+
# Pasang dependensi backend dan frontend
|
|
268
|
+
npm run install:all
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
#### 2. Buat Basis Data MySQL
|
|
272
|
+
Pastikan server MySQL Anda telah aktif, lalu buat basis data:
|
|
273
|
+
```sql
|
|
274
|
+
CREATE DATABASE IF NOT EXISTS 9drive;
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
#### 3. Konfigurasi Berkas Environment
|
|
278
|
+
Salin konfigurasi default atau buat berkas `backend/.env`:
|
|
279
|
+
```env
|
|
280
|
+
DATABASE_URL="mysql://root@localhost:3306/9drive"
|
|
281
|
+
APP_PORT=4000
|
|
282
|
+
FRONTEND_URL="http://localhost:5173"
|
|
283
|
+
JWT_ACCESS_SECRET="ganti-dengan-secret-jwt-acak-minimal-32-karakter"
|
|
284
|
+
TOKEN_ENCRYPTION_KEY="kunci-enkripsi-tepat-32-karakter-key!"
|
|
285
|
+
ACCESS_TOKEN_TTL_SECONDS=900
|
|
286
|
+
REFRESH_TOKEN_TTL_DAYS=30
|
|
287
|
+
MAX_UPLOAD_BYTES=5368709120
|
|
288
|
+
RECAPTCHA_SECRET_KEY=""
|
|
289
|
+
|
|
290
|
+
# (Opsional) Kredensial Google OAuth juga dapat diisi langsung via UI Settings
|
|
291
|
+
GOOGLE_CLIENT_ID=""
|
|
292
|
+
GOOGLE_CLIENT_SECRET=""
|
|
293
|
+
GOOGLE_REDIRECT_URI="http://localhost:4000/connected-accounts/google/callback"
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
Buat berkas `frontend/.env`:
|
|
297
|
+
```env
|
|
298
|
+
VITE_API_URL=http://localhost:4000
|
|
299
|
+
VITE_RECAPTCHA_SITE_KEY=
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
#### 4. Jalankan Migrasi Database Prisma
|
|
303
|
+
```bash
|
|
304
|
+
cd backend
|
|
305
|
+
npm run prisma:migrate
|
|
306
|
+
cd ..
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
#### 5. Jalankan Development Server (Monorepo)
|
|
310
|
+
Jalankan satu perintah di folder root `9drive` untuk memulai backend dan frontend secara bersamaan:
|
|
311
|
+
```bash
|
|
312
|
+
npm run dev
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
Aplikasi dapat langsung diakses pada:
|
|
316
|
+
- **Frontend Dashboard**: [http://localhost:5173](http://localhost:5173)
|
|
317
|
+
- **Backend API & CDN**: [http://localhost:4000](http://localhost:4000)
|
|
318
|
+
|
|
319
|
+
*(Opsional jika ingin menjalankan terpisah: `npm run dev:backend` dan `npm run dev:frontend`)*
|
|
320
|
+
|
|
321
|
+
---
|
|
322
|
+
|
|
323
|
+
### Cara 3: Menjalankan Menggunakan Docker Compose
|
|
324
|
+
|
|
325
|
+
1. Siapkan berkas `.env` dari template Docker:
|
|
326
|
+
```bash
|
|
327
|
+
cp .env.docker.example .env
|
|
328
|
+
```
|
|
329
|
+
2. Sesuaikan konfigurasi di `.env` (isi password MySQL, kredensial Google, dan secret token).
|
|
330
|
+
3. Bangun dan jalankan seluruh container:
|
|
331
|
+
```bash
|
|
332
|
+
docker compose up -d --build
|
|
333
|
+
```
|
|
334
|
+
4. Layanan akan berjalan pada:
|
|
335
|
+
- Frontend: `http://localhost:5173`
|
|
336
|
+
- Backend: `http://localhost:4000`
|
|
337
|
+
- MySQL: `localhost:3306`
|
|
338
|
+
|
|
339
|
+
---
|
|
340
|
+
|
|
341
|
+
## 🌐 Konfigurasi Google Cloud Console
|
|
342
|
+
|
|
343
|
+
1. Buka [Google Cloud Console](https://console.cloud.google.com/).
|
|
344
|
+
2. Buat atau pilih proyek Google Cloud Anda.
|
|
345
|
+
3. Buka **APIs & Services** -> **Library**, cari **Google Drive API**, lalu klik **Enable**.
|
|
346
|
+
4. Buka **APIs & Services** -> **OAuth consent screen**:
|
|
347
|
+
- Pilih jenis pengguna: **External**.
|
|
348
|
+
- Masukkan nama aplikasi dan email dukungan pengembang.
|
|
349
|
+
- Tambahkan scopes berikut:
|
|
350
|
+
```txt
|
|
351
|
+
https://www.googleapis.com/auth/drive
|
|
352
|
+
https://www.googleapis.com/auth/userinfo.email
|
|
353
|
+
https://www.googleapis.com/auth/userinfo.profile
|
|
354
|
+
```
|
|
355
|
+
- Di bagian **Test users**, tambahkan alamat email Google yang akan digunakan untuk pengujian aplikasi.
|
|
356
|
+
5. Buka **APIs & Services** -> **Credentials**:
|
|
357
|
+
- Klik **Create Credentials** -> **OAuth client ID**.
|
|
358
|
+
- Pilih tipe: **Web application**.
|
|
359
|
+
- **Authorized JavaScript origins**:
|
|
360
|
+
```txt
|
|
361
|
+
http://localhost:5173
|
|
362
|
+
```
|
|
363
|
+
- **Authorized redirect URIs**:
|
|
364
|
+
```txt
|
|
365
|
+
http://localhost:4000/connected-accounts/google/callback
|
|
366
|
+
```
|
|
367
|
+
- Simpan dan salin **Client ID** serta **Client Secret**.
|
|
368
|
+
6. Simpan kredensial tersebut ke dalam aplikasi melalui menu **Settings** -> **Google Credentials** pada dashboard 9Drive.
|
|
369
|
+
|
|
370
|
+
---
|
|
371
|
+
|
|
372
|
+
## 📡 Ringkasan Endpoint API
|
|
373
|
+
|
|
374
|
+
### Otentikasi & Akun
|
|
375
|
+
- `POST /auth/register` — Pendaftaran akun pengguna baru
|
|
376
|
+
- `POST /auth/login` — Masuk dengan email & kata sandi
|
|
377
|
+
- `GET /auth/google/url` — Inisiasi login cepat via Google
|
|
378
|
+
- `POST /auth/google/exchange` — Pertukaran kode otentikasi Google
|
|
379
|
+
- `POST /auth/refresh` — Memperbarui token akses JWT
|
|
380
|
+
- `GET /auth/me` — Mendapatkan profil pengguna saat ini
|
|
381
|
+
|
|
382
|
+
### CDN Media Streaming
|
|
383
|
+
- `GET /cdn/view/:id` — Streaming media publik inline (untuk tag `<img>`, video player, dll)
|
|
384
|
+
- `GET /cdn/raw/:id` — Unduhan langsung berkas publik (attachment disposition)
|
|
385
|
+
- `GET /cdn/:id` — Redirect otomatis ke endpoint view
|
|
386
|
+
|
|
387
|
+
### Developer Public API
|
|
388
|
+
- `POST /api/v1/uploads` — Mengunggah berkas menggunakan API Key (`X-API-Key`)
|
|
389
|
+
|
|
390
|
+
### Manajemen Berkas & Folder
|
|
391
|
+
- `GET /files` — Mendapatkan daftar berkas (mendukung parameter `folderId`, `q`, `mimeType`, `accountId`)
|
|
392
|
+
- `POST /uploads` — Mengunggah berkas ke Drive/S3 via dashboard (multipart streaming)
|
|
393
|
+
- `PATCH /files/:id` — Mengubah nama atau metadata berkas
|
|
394
|
+
- `DELETE /files/:id` — Memindahkan berkas ke sampah atau menghapus permanen
|
|
395
|
+
- `POST /files/:id/share` — Membuat tautan berbagi publik
|
|
396
|
+
- `GET /folders` — Mendapatkan susunan pohon folder virtual
|
|
397
|
+
- `POST /folders` — Membuat folder virtual baru
|
|
398
|
+
|
|
399
|
+
### Penyimpanan & Akun Terhubung
|
|
400
|
+
- `GET /connected-accounts` — Daftar akun Google Drive & S3 yang terhubung
|
|
401
|
+
- `GET /storage/summary` — Statistik agregasi total kuota dan penggunaan penyimpanan
|
|
402
|
+
- `POST /connected-accounts/:id/sync-quota` — Sinkronisasi ulang kuota dari Google Drive
|
|
403
|
+
|
|
404
|
+
---
|
|
405
|
+
|
|
406
|
+
## 🔒 Catatan Keamanan
|
|
407
|
+
|
|
408
|
+
1. **Keamanan Streaming**: Berkas unggahan dialirkan langsung (*piped stream*) dari antarmuka ke cloud provider target. Server backend tidak pernah menyimpan salinan berkas di disk lokal.
|
|
409
|
+
2. **Enkripsi Kredensial**: Token akses OAuth, refresh token Google, dan API secret disimpan dalam database MySQL menggunakan enkripsi AES-256 (`TOKEN_ENCRYPTION_KEY`).
|
|
410
|
+
3. **Penyimpanan Token Sesi**: Hash SHA-256 digunakan untuk menyimpan token refresh dan API Key, mencegah kebocoran kredensial mentah saat terjadi database dump.
|
|
411
|
+
4. **Isolasi Lingkungan**: Berkas `.env` telah didaftarkan dalam `.gitignore` dan tidak boleh di-commit ke repositori publik.
|
|
412
|
+
|
|
413
|
+
---
|
|
414
|
+
|
|
415
|
+
## 🛠️ Build untuk Produksi
|
|
416
|
+
|
|
417
|
+
Untuk menghasilkan bundle produksi:
|
|
418
|
+
|
|
419
|
+
```bash
|
|
420
|
+
# Build frontend dan backend secara bersamaan
|
|
421
|
+
npm run build
|
|
422
|
+
```
|
|
423
|
+
|
|
424
|
+
Bundle produksi yang dihasilkan:
|
|
425
|
+
- **Backend**: Berada di `backend/dist` (dijalankan dengan `node dist/server.js`)
|
|
426
|
+
- **Frontend**: Berada di `frontend/dist` (dapat disajikan via Nginx atau static file server)
|
|
427
|
+
|
|
428
|
+
---
|
|
429
|
+
|
|
430
|
+
## 📄 Lisensi
|
|
431
|
+
|
|
432
|
+
Didistribusikan di bawah lisensi Apache 2.0. Lihat berkas [LICENSE](LICENSE) untuk informasi lisensi selengkapnya.
|