Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7148e1026e | ||
|
|
96f337ef46 |
@@ -4,7 +4,7 @@
|
|||||||
<h1 align="center">ZeaVis Edu</h1>
|
<h1 align="center">ZeaVis Edu</h1>
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<strong>Asisten Edukasi Interaktif untuk Deteksi Penyakit Daun Jagung</strong><br>
|
<strong>Asisten Edukasi Interaktif untuk Deteksi Penyakit Daun Jagung</strong><br>
|
||||||
<em>Computer Vision • EfficientNetV2B0 • Transfer Learning</em>
|
<em>Computer Vision • EfficientNetV2B0 • Rust ONNX Runtime • Tauri 2 Android</em>
|
||||||
</p>
|
</p>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@@ -16,6 +16,7 @@
|
|||||||
<a href="#-jadwal"><b>Jadwal</b></a> •
|
<a href="#-jadwal"><b>Jadwal</b></a> •
|
||||||
<a href="#-tech-stack"><b>Tech Stack</b></a> •
|
<a href="#-tech-stack"><b>Tech Stack</b></a> •
|
||||||
<a href="#-memulai"><b>Memulai</b></a> •
|
<a href="#-memulai"><b>Memulai</b></a> •
|
||||||
|
<a href="#-platform"><b>Platform</b></a> •
|
||||||
<a href="#-dokumentasi"><b>Dokumentasi</b></a>
|
<a href="#-dokumentasi"><b>Dokumentasi</b></a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@@ -79,7 +80,7 @@ ZeaVis Edu menggunakan **Computer Vision** sebagai asisten edukasi interaktif:
|
|||||||
| Klasifikasi 3 penyakit + 1 daun sehat | Penyakit pada batang atau buah jagung |
|
| Klasifikasi 3 penyakit + 1 daun sehat | Penyakit pada batang atau buah jagung |
|
||||||
| Deteksi berbasis unggah gambar daun | Prediksi tanpa input gambar |
|
| Deteksi berbasis unggah gambar daun | Prediksi tanpa input gambar |
|
||||||
| Rekomendasi obat & penanganan | Diagnosis pengganti ahli/POPT |
|
| Rekomendasi obat & penanganan | Diagnosis pengganti ahli/POPT |
|
||||||
| Aplikasi web edukatif | Aplikasi mobile native |
|
| Aplikasi Web + Android (Tauri 2) | Aplikasi iOS |
|
||||||
|
|
||||||
### 4 Kelas yang Diklasifikasikan
|
### 4 Kelas yang Diklasifikasikan
|
||||||
|
|
||||||
@@ -98,7 +99,7 @@ ZeaVis Edu menggunakan **Computer Vision** sebagai asisten edukasi interaktif:
|
|||||||
| 2 | **Model ML** | Model Computer Vision terlatih di Google Colab, siap produksi |
|
| 2 | **Model ML** | Model Computer Vision terlatih di Google Colab, siap produksi |
|
||||||
| 3 | **UI Antarmuka** | Front-End berbasis React + Vite dengan fitur unggah gambar |
|
| 3 | **UI Antarmuka** | Front-End berbasis React + Vite dengan fitur unggah gambar |
|
||||||
| 4 | **Back-End Integration** | API + ML Service untuk inferensi real-time via Docker |
|
| 4 | **Back-End Integration** | API + ML Service untuk inferensi real-time via Docker |
|
||||||
| 5 | **Prototipe Akhir** | Aplikasi web final dengan klasifikasi + modul edukasi (rekomendasi obat & penanganan) |
|
| 5 | **Prototipe Akhir** | Aplikasi Web + Android (Tauri 2) dengan klasifikasi & modul edukasi (rekomendasi obat & penanganan) |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -131,7 +132,8 @@ ZeaVis Edu menggunakan **Computer Vision** sebagai asisten edukasi interaktif:
|
|||||||
.
|
.
|
||||||
├── apps/
|
├── apps/
|
||||||
│ ├── api/ # Backend Elysia/Bun + Drizzle ORM + PostgreSQL
|
│ ├── api/ # Backend Elysia/Bun + Drizzle ORM + PostgreSQL
|
||||||
│ ├── ml-service/ # Rust/Axum + ONNX Runtime inference service
|
│ ├── ml-service/ # Rust/Axum + ONNX Runtime inference engine
|
||||||
|
│ ├── tauri/ # Tauri 2 mobile wrapper → Android APK
|
||||||
│ └── web/ # Frontend React + Vite + Tailwind CSS
|
│ └── web/ # Frontend React + Vite + Tailwind CSS
|
||||||
├── Machine_Learning/ # Pipeline dataset, training Colab, ekspor model
|
├── Machine_Learning/ # Pipeline dataset, training Colab, ekspor model
|
||||||
│ └── README.md # ⤷ Panduan lengkap pipeline ML
|
│ └── README.md # ⤷ Panduan lengkap pipeline ML
|
||||||
@@ -147,8 +149,9 @@ ZeaVis Edu menggunakan **Computer Vision** sebagai asisten edukasi interaktif:
|
|||||||
| Komponen | Teknologi | Dokumentasi |
|
| Komponen | Teknologi | Dokumentasi |
|
||||||
|---|---|---|
|
|---|---|---|
|
||||||
| Web Frontend | React, Vite, Tailwind, Zustand, TanStack Query | `apps/web/` |
|
| Web Frontend | React, Vite, Tailwind, Zustand, TanStack Query | `apps/web/` |
|
||||||
|
| Android App | Tauri 2, Rust, WebView, Deep Link OAuth | `apps/tauri/` |
|
||||||
| API Backend | Bun, Elysia, Drizzle ORM, PostgreSQL | `apps/api/` |
|
| API Backend | Bun, Elysia, Drizzle ORM, PostgreSQL | `apps/api/` |
|
||||||
| ML Inference | Rust, Axum, ONNX Runtime | [`apps/ml-service/README.md`](apps/ml-service/README.md) |
|
| ML Inference Engine | Rust, Axum, ONNX Runtime | [`apps/ml-service/README.md`](apps/ml-service/README.md) |
|
||||||
| ML Pipeline | Python, TensorFlow/Keras, EfficientNetV2B0 | [`Machine_Learning/README.md`](Machine_Learning/README.md) |
|
| ML Pipeline | Python, TensorFlow/Keras, EfficientNetV2B0 | [`Machine_Learning/README.md`](Machine_Learning/README.md) |
|
||||||
| Infrastruktur | Docker, Coolify, Traefik, Tailscale | [`infra/README.md`](infra/README.md) |
|
| Infrastruktur | Docker, Coolify, Traefik, Tailscale | [`infra/README.md`](infra/README.md) |
|
||||||
| Telemetry | Prometheus, ClickHouse, Vector, Vue 3 | `telemetry/` |
|
| Telemetry | Prometheus, ClickHouse, Vector, Vue 3 | `telemetry/` |
|
||||||
@@ -157,15 +160,18 @@ ZeaVis Edu menggunakan **Computer Vision** sebagai asisten edukasi interaktif:
|
|||||||
|
|
||||||
## 🛠️ Tech Stack
|
## 🛠️ Tech Stack
|
||||||
|
|
||||||
### Frontend
|
### Frontend & Mobile
|
||||||
React • Vite • TypeScript • React Router • TanStack Query • Zustand • Tailwind CSS
|
React • Vite • TypeScript • React Router • TanStack Query • Zustand • Tailwind CSS
|
||||||
|
**Tauri 2** (Android) • Rust • WebView • Deep Link OAuth
|
||||||
|
|
||||||
### Backend API
|
### Backend API
|
||||||
Bun • Elysia • Drizzle ORM • PostgreSQL • prom-client
|
Bun • Elysia • Drizzle ORM • PostgreSQL • prom-client
|
||||||
|
|
||||||
### Machine Learning
|
### Machine Learning
|
||||||
Python • TensorFlow/Keras • EfficientNetV2B0 • Google Colab (GPU T4)
|
Python • TensorFlow/Keras • EfficientNetV2B0 • Google Colab (GPU T4)
|
||||||
Rust • Axum • ONNX Runtime • TFLite • TensorFlow.js
|
|
||||||
|
### Inference Engine
|
||||||
|
**Rust** • **Axum** • **ONNX Runtime** • TFLite • TensorFlow.js
|
||||||
|
|
||||||
### DevOps & Infrastruktur
|
### DevOps & Infrastruktur
|
||||||
Docker • Docker Compose • Coolify • Traefik • Tailscale • GitHub Actions (CI/CD)
|
Docker • Docker Compose • Coolify • Traefik • Tailscale • GitHub Actions (CI/CD)
|
||||||
@@ -181,7 +187,8 @@ Prometheus • Metric Ingester (Go) • Vector • ClickHouse • Qu
|
|||||||
|
|
||||||
- **Bun** — runtime & package manager
|
- **Bun** — runtime & package manager
|
||||||
- **Python 3.9–3.11** — pipeline ML
|
- **Python 3.9–3.11** — pipeline ML
|
||||||
- **Rust & Cargo** — `apps/ml-service`
|
- **Rust & Cargo** — `apps/ml-service` (inference) & `apps/tauri` (Android)
|
||||||
|
- **Java 21 + Android SDK** — build Android APK
|
||||||
- **Docker & Docker Compose** — deployment & telemetry
|
- **Docker & Docker Compose** — deployment & telemetry
|
||||||
- **PostgreSQL** — backend API
|
- **PostgreSQL** — backend API
|
||||||
|
|
||||||
@@ -199,7 +206,9 @@ bun install
|
|||||||
bun run dev # Semua service (web + api)
|
bun run dev # Semua service (web + api)
|
||||||
cd apps/web && bun run dev # Hanya frontend
|
cd apps/web && bun run dev # Hanya frontend
|
||||||
cd apps/api && bun run start # Hanya backend API
|
cd apps/api && bun run start # Hanya backend API
|
||||||
cd apps/ml-service && cargo run # Hanya ML service (port 8000)
|
cd apps/ml-service && cargo run # ML inference engine (port 8000)
|
||||||
|
cd apps/tauri && bun run tauri dev # Tauri desktop dev
|
||||||
|
cd apps/tauri && bun run tauri android dev # Tauri Android dev
|
||||||
```
|
```
|
||||||
|
|
||||||
### Environment Variables
|
### Environment Variables
|
||||||
@@ -236,6 +245,46 @@ make telemetry-up # Telemetry stack
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 📱 Platform
|
||||||
|
|
||||||
|
ZeaVis Edu tersedia di **dua platform** dari satu codebase:
|
||||||
|
|
||||||
|
| Platform | Teknologi | Build |
|
||||||
|
|---|---|---|
|
||||||
|
| **Web** | React + Vite → Static SPA | `bun run build` |
|
||||||
|
| **Android** | Tauri 2 + Rust → WebView APK | `cd apps/tauri && bun run tauri android build --apk` |
|
||||||
|
|
||||||
|
### Tauri 2 Android
|
||||||
|
|
||||||
|
Aplikasi Android membungkus frontend web yang sama dalam **WebView native** menggunakan **Tauri 2**, memberikan akses ke API native Android tanpa menulis ulang UI.
|
||||||
|
|
||||||
|
**Fitur Android:**
|
||||||
|
- **Google OAuth** — Login via system browser + deep link `zeavisedu://` kembali ke app
|
||||||
|
- **Kamera** — Izin `CAMERA` untuk unggah foto daun jagung langsung dari kamera
|
||||||
|
- **Tauri Plugin Opener** — Buka URL eksternal di system browser
|
||||||
|
- **Tauri Plugin Deep Link** — Tangkap OAuth callback tanpa memerlukan server redirect
|
||||||
|
|
||||||
|
**CI/CD Android:**
|
||||||
|
- GitHub Actions workflow `.github/workflows/android.yml`
|
||||||
|
- Build otomatis di setiap push/PR ke `main`
|
||||||
|
- Patch `AndroidManifest.xml` untuk menambahkan izin kamera + intent filter deep link
|
||||||
|
- APK ditandatangani (signed) via `apksigner` + release ke GitHub Releases
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Development Android (butuh Android SDK + emulator/device)
|
||||||
|
cd apps/tauri
|
||||||
|
bun run tauri android init # Init project Android
|
||||||
|
bun run tauri android dev # Dev dengan hot reload
|
||||||
|
bun run tauri android build --apk # Build APK production
|
||||||
|
|
||||||
|
# CI/CD — dijalankan otomatis via GitHub Actions
|
||||||
|
.github/workflows/android.yml
|
||||||
|
```
|
||||||
|
|
||||||
|
> Konfigurasi: `apps/tauri/tauri.conf.json` • `apps/tauri/gen/android/`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## 📚 Dokumentasi
|
## 📚 Dokumentasi
|
||||||
|
|
||||||
| Dokumen | Isi |
|
| Dokumen | Isi |
|
||||||
|
|||||||
@@ -314,12 +314,18 @@ export const authRoutes = new Elysia({ prefix: '/api/v1/auth' })
|
|||||||
}
|
}
|
||||||
|
|
||||||
const token = await createSession(user.id);
|
const token = await createSession(user.id);
|
||||||
set.headers['Set-Cookie'] = createSessionCookie(token, request.headers);
|
const sessionCookie = createSessionCookie(token, request.headers);
|
||||||
|
|
||||||
authCounter.labels('login', 'true').inc();
|
authCounter.labels('login', 'true').inc();
|
||||||
|
|
||||||
const successUrl = `${env.webAppUrl}/login?token=${encodeURIComponent(token)}`;
|
const successUrl = `${env.webAppUrl}/login?token=${encodeURIComponent(token)}`;
|
||||||
if (platform === 'tauri') return renderTauriDeepLinkPage(successUrl);
|
if (platform === 'tauri') {
|
||||||
|
// Inject Set-Cookie into the response so the browser gets it on redirect
|
||||||
|
const resp = renderTauriDeepLinkPage(successUrl);
|
||||||
|
resp.headers.set('Set-Cookie', sessionCookie);
|
||||||
|
return resp;
|
||||||
|
}
|
||||||
|
set.headers['Set-Cookie'] = sessionCookie;
|
||||||
set.status = 302;
|
set.status = 302;
|
||||||
set.headers['Location'] = successUrl;
|
set.headers['Location'] = successUrl;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
|||||||
@@ -4,10 +4,10 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"identifier": "com.zeavis.edu",
|
"identifier": "com.zeavis.edu",
|
||||||
"build": {
|
"build": {
|
||||||
"frontendDist": "../web/dist",
|
"frontendDist": "../web/dist-tauri",
|
||||||
"devUrl": "http://localhost:5173",
|
"devUrl": "http://localhost:5173",
|
||||||
"beforeBuildCommand": "cd ../web && bun run build",
|
"beforeBuildCommand": "echo 'Nothing to build (APK loads live web content)'",
|
||||||
"beforeDevCommand": "cd ../web && bun run dev"
|
"beforeDevCommand": "echo 'Dev mode - connect to localhost:5173'"
|
||||||
},
|
},
|
||||||
"app": {
|
"app": {
|
||||||
"withGlobalTauri": false,
|
"withGlobalTauri": false,
|
||||||
|
|||||||
@@ -0,0 +1,44 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>ZeaVis Edu</title>
|
||||||
|
<script>
|
||||||
|
var LIVE = 'https://zeavisedu.asepharyana.my.id';
|
||||||
|
var T = window.__TAURI_INTERNALS__;
|
||||||
|
|
||||||
|
function navigate(path) {
|
||||||
|
window.location.replace(LIVE + path);
|
||||||
|
}
|
||||||
|
|
||||||
|
// On cold start, check if the app was opened via a deep link (Google OAuth)
|
||||||
|
// before redirecting to the live web app.
|
||||||
|
if (T && T.invoke) {
|
||||||
|
T.invoke('plugin:deep-link|get_current')
|
||||||
|
.then(function(urls) {
|
||||||
|
if (urls && urls.length > 0 && urls[0]) {
|
||||||
|
try {
|
||||||
|
var u = new URL(urls[0]);
|
||||||
|
var target = u.pathname + u.search + u.hash;
|
||||||
|
if (target && target !== '/') {
|
||||||
|
// Preserve full path + query (e.g. /login?token=xxx)
|
||||||
|
navigate(target);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (e) { /* malformed URL — fall through */ }
|
||||||
|
}
|
||||||
|
// No deep link — redirect to live app home
|
||||||
|
navigate('/');
|
||||||
|
})
|
||||||
|
.catch(function() { navigate('/'); });
|
||||||
|
} else {
|
||||||
|
// Not in Tauri (dev mode or unknown) — redirect to live
|
||||||
|
navigate('/');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body style="background:#f0fdf4;font-family:sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0">
|
||||||
|
<p style="color:#16a34a">Memuat ZeaVis Edu...</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -12,6 +12,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
"@tanstack/react-query": "^5.100.11",
|
"@tanstack/react-query": "^5.100.11",
|
||||||
|
"@tauri-apps/plugin-deep-link": "^2",
|
||||||
|
"@tauri-apps/plugin-opener": "^2",
|
||||||
"@vitejs/plugin-react": "^6.0.2",
|
"@vitejs/plugin-react": "^6.0.2",
|
||||||
"@zeavis/shared": "workspace:*",
|
"@zeavis/shared": "workspace:*",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
|
|||||||
+31
-21
@@ -29,32 +29,42 @@ export async function openUrl(url: string): Promise<void> {
|
|||||||
* callback page redirects to zeavisedu://... which triggers this listener.
|
* callback page redirects to zeavisedu://... which triggers this listener.
|
||||||
* We extract the path + query and navigate the WebView there.
|
* We extract the path + query and navigate the WebView there.
|
||||||
*/
|
*/
|
||||||
|
function processDeepLinkUrl(url: string): void {
|
||||||
|
// url looks like: zeavisedu://login/login?token=xxx
|
||||||
|
// We need to extract path+query and navigate the WebView there
|
||||||
|
try {
|
||||||
|
const u = new URL(url);
|
||||||
|
const target = u.pathname + u.search + u.hash;
|
||||||
|
if (target && target !== '/') {
|
||||||
|
window.location.href = target;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch { /* try fallback below */ }
|
||||||
|
|
||||||
|
// Fallback: handle both double-slash (://) and single-slash (:/) schemes
|
||||||
|
let match = url.match(/^[^:]+:\/\/(?:[^/]+)?(\/.*)?$/);
|
||||||
|
if (!match) {
|
||||||
|
match = url.match(/^[^:]+:\/(\/.*)?$/);
|
||||||
|
}
|
||||||
|
if (match?.[1]) {
|
||||||
|
window.location.href = match[1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export async function setupDeepLinkHandler(): Promise<void> {
|
export async function setupDeepLinkHandler(): Promise<void> {
|
||||||
if (!isTauri()) return;
|
if (!isTauri()) return;
|
||||||
|
|
||||||
const { onOpenUrl } = await import('@tauri-apps/plugin-deep-link');
|
const { onOpenUrl, getCurrent } = await import('@tauri-apps/plugin-deep-link');
|
||||||
|
|
||||||
|
// Handle cold-start deep links (app opened via intent)
|
||||||
|
getCurrent().then((urls) => {
|
||||||
|
if (urls?.[0]) processDeepLinkUrl(urls[0]);
|
||||||
|
}).catch(() => { /* ignore */ });
|
||||||
|
|
||||||
|
// Handle warm-start deep links (app already running, new intent received)
|
||||||
onOpenUrl((urls) => {
|
onOpenUrl((urls) => {
|
||||||
for (const url of urls) {
|
for (const url of urls) {
|
||||||
// url looks like: zeavisedu://login/login?token=xxx
|
processDeepLinkUrl(url);
|
||||||
// Extract path + query after the host
|
|
||||||
try {
|
|
||||||
const u = new URL(url);
|
|
||||||
const target = u.pathname + u.search + u.hash;
|
|
||||||
if (target && target !== '/') {
|
|
||||||
window.location.href = target;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} catch { /* try fallback below */ }
|
|
||||||
|
|
||||||
// Fallback: extract everything after scheme, handling both // and /
|
|
||||||
let match = url.match(/^[^:]+:\/\/(?:[^/]+)?(\/.*)?$/);
|
|
||||||
if (!match) {
|
|
||||||
// Also handle single-slash non-hierarchical URLs (e.g. zeavisedu:/path)
|
|
||||||
match = url.match(/^[^:]+:\/(\/.*)?$/);
|
|
||||||
}
|
|
||||||
if (match?.[1]) {
|
|
||||||
window.location.href = match[1];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -53,6 +53,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
"@tanstack/react-query": "^5.100.11",
|
"@tanstack/react-query": "^5.100.11",
|
||||||
|
"@tauri-apps/plugin-deep-link": "^2",
|
||||||
|
"@tauri-apps/plugin-opener": "^2",
|
||||||
"@vitejs/plugin-react": "^6.0.2",
|
"@vitejs/plugin-react": "^6.0.2",
|
||||||
"@zeavis/shared": "workspace:*",
|
"@zeavis/shared": "workspace:*",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
|
|||||||
Reference in New Issue
Block a user