🩸 BESI: Bot Edukasi dan Skrining Anemia Terintegrasi Artificial Intelligence

Platform Inovasi Digital Edukasi & Skrining Risiko Anemia Remaja Putri Indonesia
Karya Ilmiah LKTI Nasional METHANOL 2026 (Medical Laboratory Technologist Olympiad)
Subtema: IT • Perguruan Tinggi: Universitas Trunojoyo Madura (UTM), Bangkalan

👥 Tim Penulis & Pengembang

Muhammad Hendrik Purwanto (NIM: 240411100118) — Ketua Tim
Zakaria Mujur Prasetyo (NIM: 240411100144) — Anggota 1
Fathan Ruhul Alam (NIM: 240411100190) — Anggota 2

📌 Sekilas Tentang BESI

BESI adalah platform inovasi kesehatan digital multiplatform (WhatsApp Bot & React Single Page Web Application) yang dirancang sebagai teman pendamping kesehatan remaja putri di Indonesia. Menggabungkan teknologi kecerdasan buatan (Artificial Intelligence) berbasis Retrieval-Augmented Generation (RAG) dan Llama 3.3 70B untuk mempermudah akses edukasi, penapisan awal risiko anemia 14 indikator klinis Kemenkes RI, rekomendasi gizi zat besi, serta pemantauan konsumsi Tablet Tambah Darah (TTD).

⚠️ Disclaimer Medis: BESI dikembangkan sebagai alat bantu penapisan awal mandiri dan media edukasi. BESI bukan alat diagnosis medis. Kepastian kadar hemoglobin (Hb) wajib melalui pemeriksaan darah oleh tenaga kesehatan profesional di Puskesmas atau fasilitas kesehatan terdekat.

✨ Fitur-Fitur Utama

🩺 Skrining Awal Risiko Anemia (14 Indikator Klinis Kemenkes RI):
- Kuesioner interaktif 14 pertanyaan klinis (gejala 5L, menstruasi, pola makan, TTD, konsentrasi).
- Pemrosesan skor risiko instan (Risiko Sangat Rendah, Sedang, Tinggi) bebas kedipan (zero flicker).
📄 Cetak PDF Laporan Hasil Skrining (Template Dokumen A4 Resmi):
- Generasi dokumen PDF laporan medis A4 menggunakan jsPDF dengan biodata pasien, hasil analisis risiko, rekomendasi Kemenkes RI, dan Digital Hash Stamp.
🤖 AI Health Assistant (Groq Llama 3.3 70B + RAG Local Store):
- Chatbot AI yang menjawab pertanyaan seputar anemia, gizi, dan TTD berdasarkan pedoman resmi Kemenkes RI & WHO.
- Dilengkapi Floating AI Chat Widget melayang di pojok layar seluler & laptop.
🥗 Rekomendasi Gizi Kaya Zat Besi (Layout 2 Kolom Mobile):
- Katalog bahan makanan hewani (Heme) & nabati (Non-Heme) kaya zat besi.
- Panel Faktor Peningkat Penyerapan (Vitamin C, Protein) & Penghambat Penyerapan (Tanin Teh/Kopi, Kalsium Susu, Fitat) diletakkan di posisi paling atas.
⏰ Pengingat Minum Tablet Tambah Darah (TTD):
- Sistem pengatur jadwal mingguan otomatis (1x seminggu rutin / 1x sehari saat haid) dengan riwayat konsumsi TTD.
📝 Kuis Interaktif (3 Kategori & Transparansi Pembahasan):
- 15 kuis variatif (Kategori Dasar, Nutrisi, & Pencegahan) dilengkapi transparansi pembahasan jawaban medis.
📸 Custom Foto Profil & Cookie Persistence:
- Kustomisasi nama, sekolah, serta fitur Upload Foto Profil Custom yang tersimpan di localStorage & document.cookie (berlaku 365 hari).
🖼️ Optimasi Format Gambar WebP (~95% Lebih Ringan):
- Seluruh aset gambar utama dikonversi ke format WebP untuk waktu muat halaman yang ultra-cepat.
📱 Responsive Mobile UI Friendly & Non-User-Select:
- Proteksi user-select: none global agar antarmuka terasa rapi seperti aplikasi native HP.

🚀 Teknologi yang Digunakan

Layer	Teknologi	Keterangan
Frontend Framework	React 19 + Vite	Modern Single Page Application (SPA)
CSS Framework	Tailwind CSS v4	Styling utility-first berbasis CSS variables
Icons Library	Lucide React	Ikon vektor modern & konsisten
Routing	React Router v7	Path-based routing (`/dashboard`, `/screening`, `/nutrition`, dll)
WhatsApp Bot	@whiskeysockets/baileys	WhatsApp Web API tanpa framework eksternal
AI Chat LLM	Groq SDK + Llama 3.3 70B	Chatbot AI berbasis cloud inference
RAG Embedding	@xenova/transformers	100% offline lokal, tanpa API Key
Backend	Node.js + Express.js	Server lokal (Port 3000) & Vercel Serverless
PDF Generation	jsPDF (Client-side)	Cetak laporan hasil skrining A4 di browser
Format Gambar	WebP (Sharp Node.js)	Kompresi gambar hemat kuota hingga 95%
Deployment	Vercel + GitHub Actions	Auto-deploy static + serverless function

📁 Arsitektur Proyek (MVC-Inspired React)

besi/
│
├── api/                              # Vercel Serverless Functions
│   └── chat.js                       #   └── Endpoint AI Chat (Groq Llama 3.3 70B)
│
├── data/                             # Knowledge Base & Dataset
│   ├── edukasi.json                  #   ├── Data modul edukasi medis
│   ├── gejala.json                   #   ├── Data indikator gejala 5L & risiko
│   ├── kemenkes_guidelines.txt       #   ├── Pedoman resmi Kemenkes RI (RAG source)
│   ├── kuis.json                     #   ├── Bank kuis 3 kategori (15 pertanyaan)
│   ├── makanan.json                  #   ├── Database kandungan zat besi & nutrisi
│   └── vector_store.json             #   └── Embeddings RAG lokal offline
│
├── plugins/                          # WhatsApp Bot Handler Plugins (Baileys)
│   ├── ai-chat.js                    #   ├── Handler AI Chat RAG
│   ├── edukasi.js                    #   ├── Handler Modul Edukasi
│   ├── kuis.js                       #   ├── Handler Kuis Interaktif
│   ├── makanan.js                    #   ├── Handler Rekomendasi Gizi
│   ├── menu.js                       #   ├── Handler Navigation Menu
│   ├── pengingat.js                  #   ├── Handler Pengingat TTD
│   ├── router.js                     #   ├── Dispatcher Pesan Masuk
│   └── skrining.js                   #   └── Handler Skrining 14 Soal
│
├── scripts/                          # Build & Maintenance Scripts
│   ├── build-vector.js               #   ├── Builder Vector DB (@xenova/transformers)
│   └── convert-webp.js               #   └── Sharp script konversi PNG ke WebP
│
├── utils/                            # Shared Utility Modules (Backend)
│   ├── baileys-helper.js             #   ├── Utility WhatsApp API Baileys
│   ├── gemini.js                     #   ├── Integrasi Groq SDK LLM
│   ├── normalize.js                  #   ├── Normalisasi input teks
│   ├── rag.js                        #   ├── Vector Similarity Search Engine
│   └── session.js                    #   └── Session Manager Multi-User
│
├── web/                              # React 19 + Vite + Tailwind CSS v4 Frontend
│   ├── index.html                    #   ├── Root HTML Shell & Font Google Outfit
│   ├── vite.config.js                #   ├── Konfigurasi Vite, Tailwind v4, & Proxy /api
│   │
│   ├── public/
│   │   └── assets/images/            #   │   └── Gambar Aset Terkompresi (.webp & .png)
│   │       ├── hero.webp             #   │       ├── Hero Illustration Landing Page
│   │       ├── logo.webp             #   │       ├── Logo BESI Full
│   │       ├── logo_icon.webp        #   │       ├── Logo BESI Icon (Avatar)
│   │       ├── mascot.webp           #   │       ├── Maskot BESI
│   │       └── favicon.png           #   │       └── Favicon Browser Tab
│   │
│   └── src/
│       ├── main.jsx                  #   │   ├── Entrypoint React Virtual DOM
│       ├── App.jsx                   #   │   ├── React Router Provider & Route Setup
│       ├── index.css                 #   │   ├── Tailwind v4 @import & Custom Theme Tokens
│       │
│       ├── data/                     #   │   ├── [MODEL] Client-Side Dataset
│       │   ├── screeningData.js      #   │   │   ├── Data skrining 14 soal & scoring
│       │   ├── edukasiData.js        #   │   │   ├── Data modul edukasi & artikel
│       │   ├── kuisData.js           #   │   │   ├── Data kuis 3 kategori
│       │   └── makananData.js        #   │   │   └── Data bahan makanan zat besi
│       │
│       ├── hooks/                    #   │   ├── Custom React Hooks (State Controller)
│       │   ├── useProfile.js         #   │   │   ├── State profil + cookie persistence
│       │   ├── useScreening.js       #   │   │   ├── State machine skrining 14 soal
│       │   └── useChat.js            #   │   │   └── State AI Chat & API caller
│       │
│       ├── components/               #   │   ├── [VIEW] Reusable UI Components
│       │   ├── layout/
│       │   │   ├── TopBar.jsx        #   │   │   ├── Top Header Navigation
│       │   │   ├── Sidebar.jsx       #   │   │   ├── Desktop Sidebar Navigation
│       │   │   ├── BottomNav.jsx     #   │   │   ├── Mobile Bottom Navigation
│       │   │   └── AppShell.jsx      #   │   │   └── Layout Shell Wrapper
│       │   ├── modals/
│       │   │   ├── ProfileModal.jsx  #   │   │   ├── Custom Profile & Avatar Modal
│       │   │   ├── WhatsAppModal.jsx #   │   │   ├── WhatsApp Linking Simulator Modal
│       │   │   └── NotificationModal.jsx #   │   └── Notification Center Modal
│       │   ├── chat/
│       │   │   └── FloatingAIChat.jsx#   │   │   └── Floating AI Assistant Widget
│       │   └── shared/
│       │       ├── Disclaimer.jsx    #   │   │   ├── Medical Disclaimer Banner
│       │       └── Toast.jsx         #   │   │   └── Toast Notification Banner
│       │
│       ├── pages/                    #   │   └── [CONTROLLER] Page Views
│       │   ├── LandingPage.jsx       #   │       ├── Landing Page (/)
│       │   ├── DashboardPage.jsx     #   │       ├── Dashboard (/dashboard)
│       │   ├── ScreeningPage.jsx     #   │       ├── Skrining (/screening)
│       │   ├── ResultPage.jsx        #   │       ├── Hasil Skrining (/result)
│       │   ├── EducationPage.jsx     #   │       ├── Edukasi & Kuis (/education)
│       │   ├── NutritionPage.jsx     #   │       ├── Rekomendasi Gizi (/nutrition)
│       │   ├── ChatPage.jsx          #   │       ├── AI Chat Fullscreen (/chat)
│       │   ├── ReminderPage.jsx      #   │       ├── Pengingat TTD (/reminder)
│       │   ├── ConsultationPage.jsx  #   │       ├── Konsultasi Medis (/consultation)
│       │   └── PrivacyPage.jsx       #   │       └── Kebijakan Privasi (/privacy)
│       │
│       └── utils/                    #   │   └── Helper Utilities
│           └── pdfGenerator.js       #   │       └── Generator PDF Laporan A4 (jsPDF)
│
├── .github/workflows/
│   └── deploy.yml                    # GitHub Actions Auto Redeploy ke Vercel
│
├── index.js                          # Entrypoint Backend WhatsApp Bot Baileys
├── server.js                         # Express Server Backend + Production Serve
├── vercel.json                       # Konfigurasi Vercel Static + Serverless
└── package.json                      # Dependensi Node.js Proyek

💻 Cara Instalasi & Menjalankan Lokal

📖 Panduan Lengkap: Untuk panduan instalasi yang lebih mendetail, silakan baca file INSTALL.md.

1. Persiapan Environment

Pastikan kamu telah menginstal Node.js (minimal v18+).

# Clone repository
git clone https://github.com/hendprw/besi.git
cd besi

# Install dependensi backend & frontend
npm install
cd web && npm install && cd ..

2. Pengaturan API Key (Groq AI)

Buat file .env di direktori utama:

GROQ_API_KEY=gsk_kode_api_key_groq_kamu_di_sini

3. Build Frontend React

npm run build:web

4. Menjalankan Server Production

npm run server

Buka browser di http://localhost:3000.

📄 Lisensi & Hak Cipta

© 2026 Tim Penulis BESI — Universitas Trunojoyo Madura (UTM), Bangkalan.
Dikembangkan untuk LKTI Nasional METHANOL 2026 (Medical Laboratory Technologist Olympiad).

Navigation Menu

Repository files navigation

🩸 BESI: Bot Edukasi dan Skrining Anemia Terintegrasi Artificial Intelligence

👥 Tim Penulis & Pengembang

📌 Sekilas Tentang BESI

✨ Fitur-Fitur Utama

🚀 Teknologi yang Digunakan

📁 Arsitektur Proyek (MVC-Inspired React)

💻 Cara Instalasi & Menjalankan Lokal

1. Persiapan Environment

2. Pengaturan API Key (Groq AI)

3. Build Frontend React

4. Menjalankan Server Production

📄 Lisensi & Hak Cipta

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
api		api
data		data
plugins		plugins
scripts		scripts
utils		utils
web		web
.gitignore		.gitignore
.vercelignore		.vercelignore
INSTALL.md		INSTALL.md
README.md		README.md
SYSTEM_BESI_WEB_APP.md		SYSTEM_BESI_WEB_APP.md
index.js		index.js
package-lock.json		package-lock.json
package.json		package.json
server.js		server.js
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation

🩸 BESI: Bot Edukasi dan Skrining Anemia Terintegrasi Artificial Intelligence

👥 Tim Penulis & Pengembang

📌 Sekilas Tentang BESI

✨ Fitur-Fitur Utama

🚀 Teknologi yang Digunakan

📁 Arsitektur Proyek (MVC-Inspired React)

💻 Cara Instalasi & Menjalankan Lokal

1. Persiapan Environment

2. Pengaturan API Key (Groq AI)

3. Build Frontend React

4. Menjalankan Server Production

📄 Lisensi & Hak Cipta

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages