sadari_web.app

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 2 Open GitHub ↗

AI-powered diabetes assistant. Scan food with your camera to get nutrition insights, track blood sugar, and manage daily habits.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🩺 SADARI AI

**Asisten Cerdas Manajemen Diabetes**

Aplikasi berbasis AI untuk membantu penderita diabetes memantau gula darah, menganalisis nutrisi dari foto makanan, dan mengelola gaya hidup sehari-hari.

[![Next.js](https://img.shields.io/badge/Next.js-15-black?style=flat-square&logo=next.js)](https://nextjs.org/)
[![React](https://img.shields.io/badge/React-19-61DAFB?style=flat-square&logo=react)](https://react.dev/)
[![Gemini](https://img.shields.io/badge/Gemini-Flash-4285F4?style=flat-square&logo=googlegemini&logoColor=white)](https://ai.google.dev/)
[![Firebase](https://img.shields.io/badge/Firebase-Firestore-FFCA28?style=flat-square&logo=firebase&logoColor=black)](https://firebase.google.com/)
[![Tailwind](https://img.shields.io/badge/Tailwind-4-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)

[Fitur](#-fitur) · [Arsitektur](#-arsitektur) · [Instalasi](#-menjalankan-secara-lokal) · [Struktur](#-struktur-proyek) · [Deployment](#-deployment)

</div>

---

## ✨ Fitur

| Fitur | Deskripsi | Teknologi |
|:---|:---|:---|
| **Kamera Nutrisi** | Foto makanan atau label kemasan → deteksi kalori, karbohidrat, gula, dan indeks glikemik | Gemini Vision |
| **Scanner Hasil Lab** | Unggah foto hasil lab, AI mengekstrak dan menjelaskan nilainya dalam bahasa awam | Gemini Vision |
| **Asisten AI Chat** | Tanya jawab seputar diabetes 24/7, mendukung teks dan gambar | Gemini + `react-markdown` |
| **Konsultasi Dokter** | Alur chat terpisah dengan konteks profil medis pengguna | Gemini |
| **Deteksi Stres** | Rekam suara → transkrip + analisis volume audio diproses AI jadi estimasi tingkat stres | Web Speech API + Web Audio API |
| **Pedometer** | Menghitung langkah dari sensor gerak perangkat, tanpa library eksternal | `DeviceMotionEvent` |
| **Dashboard & Tracking** | Grafik gula darah, kalori, aktivitas harian, dengan sistem *streak* | Recharts |
| **Pengingat Obat** | Jadwal minum obat beserta riwayat kepatuhan | Firestore |
| **Arsip Medis** | Penyimpanan dokumen dan riwayat pemeriksaan | Firebase Storage |
| **Dwibahasa & Tema** | Indonesia/Inggris dan mode terang/gelap | React Context |

---

## 🧬 Arsitektur

```mermaid
graph TD
    A[Klien - Browser Mobile/Desktop] -->|Server Components| B[Next.js 15 App Router]
    B --> C[API Routes / Route Handlers]
    C -->|Teks, Vision, JSON mode| D[Google Gemini API]
    B -->|SDK Klien| E[(Firebase Firestore)]
    B --> F[Firebase Auth]
    B --> G[Firebase Storage]
    B -.Deploy.-> H[Google Cloud Run - asia-southeast2]
```

**Stack**

- **Frontend** — Next.js 15 (App Router), React 19, Tailwind CSS 4, Motion, Recharts, Lucide
- **AI** — Google Gemini via `@google/genai`. Model `gemini-flash-latest` untuk sebagian besar route, `gemini-3-flash-preview` untuk analisis lab
- **Backend** — Next.js Route Handlers (serverless), tanpa server terpisah
- **Data** — Firebase Firestore (realtime), Auth (email/password + Google Sign-In), Storage
- **Deploy** — Docker multi-stage (`node:18-alpine`) di Google Cloud Run, region Jakarta

### Rotasi API key otomatis

[`lib/gemini.ts`](lib/gemini.ts) mendukung **beberapa API key sekaligus**, dipisah koma. Saat satu key kena limit kuota (`429` / `RESOURCE_EXHAUSTED`), request otomatis diulang dengan key berikutnya. Error non-kuota langsung dilempar tanpa retry.

```env
GEMINI_API_KEY=key_pertama,key_kedua,key_ketiga
```

---

## 🛠️ Menjalankan Secara Lokal

**Prasyarat:** Node.js 18+ dan npm.

**1. Clone dan install**

```bash
git clone https://github.com/LindungiLw/sadari_app.git
cd sadari_app
npm install
```

**2. Buat file `.env` di root proyek**

Ambil API key dari [Google AI Studio](https://aistudio.google.com/apikey) dan konfigurasi Firebase dari [Firebase Console](https://console.firebase.google.com/) → *Project settings* → *Your apps*.

```env
# Gemini — bisa diisi beberapa key dipisah koma untuk fallback kuota
GEMINI_API_KEY=AIza...

# Firebase (aman diekspos ke klien, dilindungi Security Rules)
NEXT_PUBLIC_FIREBASE_API_KEY=AIza...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=nama-proyek.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=nama-proyek
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=nama-proyek.firebasestorage.app
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abc
```

> [!WARNING]
> `.env` sudah masuk `.gitignore` dan `.dockerignore` — **jangan pernah** commit file ini atau menaruh nilai key di manifest deployment. `GEMINI_API_KEY` adalah rahasia sisi server; jika bocor, segera rotasi di Google AI Studio.

**3. Jalankan**

```bash
npm run dev
```

Buka `http://localhost:3000`.

### Skrip yang tersedia

| Perintah | Fungsi |
|:---|:---|
| `npm run dev` | Server pengembangan |
| `npm run build` | Build produksi (`.next` dibersihkan dulu via rimraf) |
| `npm start` | Menjalankan hasil build produksi |
| `npm run lint` | ESLint |

---

## 📁 Struktur Proyek

```
app/
├── layout.tsx              # Root layout, font, provider tema/bahasa/profil
├── page.tsx                # Landing page (dynamic rendering)
├── LandingPageClient.tsx
├── main/page.tsx           # Shell aplikasi — router antar-layar
└── api/                    # Route handler sisi server
    ├── analyze-food/       # Analisis nutrisi dari gambar
    ├── analyze-lab/        # Ekstraksi hasil lab
    ├── analyze-stress/     # Analisis stres dari suara
    ├── chat/               # Asisten AI umum (+ brain.ts)
    ├── doctor-chat/        # Konsultasi dokter
    ├── education/          # Konten edukasi
    └── recommendations/    # Rekomendasi harian

components/
├── screens/                # 13 layar utama (Dashboard, FoodScanner, Aktivitas, dll)
├── ui/                     # Modal & komponen (BottomNav, SnapAndTrack, dll)
├── context/                # ThemeContext, UserProfileContext
├── language/               # LanguageContext + translations.ts
└── SADARIIcons.tsx         # Ikon SVG kustom

lib/
├── firebase.ts             # Inisialisasi Firebase (lazy, hanya jika ada config)
├── gemini.ts               # Klien Gemini + rotasi key
└── utils.ts                # Helper cn()

hooks/use-mobile.ts
public/                     # Ikon, logo, gambar edukasi, manifest
```

---

## 📱 Dukungan Perangkat

Antarmuka **mobile-first** dan responsif, dengan penanganan *safe area* untuk notch dan Dynamic Island. Diuji pada Android, iOS, dan desktop.

> [!NOTE]
> **PWA saat ini dinonaktifkan secara sengaja.** [`public/sw.js`](public/sw.js) adalah *killer service worker* yang menghapus seluruh cache lalu meng-*unregister* dirinya sendiri, dan [`app/layout.tsx`](app/layout.tsx) menjalankan skrip yang membatalkan registrasi semua service worker. Ini dipasang untuk menyelesaikan *caching loop* yang membuat pengguna terjebak di versi lama. Aplikasi berjalan sebagai web app biasa tanpa mode offline.

Fitur yang memerlukan izin perangkat:

- **Kamera** — pemindaian makanan dan hasil lab
- **Mikrofon** — deteksi stres
- **Sensor gerak** — pedometer (di iOS perlu izin eksplisit `DeviceMotionEvent.requestPermission()`)

---

## 🚀 Deployment

Menggunakan Docker multi-stage: instalasi dependensi → build → runner ramping.

```bash
gcloud run deploy sadari-app \
  --source . \
  --region asia-southeast2 \
  --allow-unauthenticated
```

Set environment variable lewat *Cloud Run console* atau `--set-env-vars`. **Jangan** menaruh nilai key di file manifest yang ikut ter-commit — gunakan [Secret Manager](https://cloud.google.com/run/docs/configuring/services/secrets) untuk `GEMINI_API_KEY`.

---

### Dikembangkan oleh Rahma

*Dedikasi untuk membantu penderita diabetes di Indonesia hidup lebih sehat dan lebih lama.*

</div>

sadari_web.app

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README