---

📖 Tentang Project Ini

Aplikasi mobile Lampung Dev adalah sistem manajemen event dan kehadiran yang digunakan oleh admin untuk:

• ✅ Melihat daftar event yang tersedia
• ✅ Melihat detail event dan peserta terdaftar
• ✅ Scan QR code untuk verifikasi kehadiran peserta
• ✅ Mencatat waktu check-in peserta

Aplikasi ini dibuat untuk mendukung kegiatan komunitas developer seperti meetup, workshop, dan conference.

🎯 Siapa yang Cocok Mengikuti Series Ini?

Series ini cocok untuk:

• Pemula yang baru mau belajar React Native
• Web developer yang ingin expand ke mobile development
• Developer yang ingin belajar Expo ecosystem
• Siapa saja yang tertarik dengan event management system

---

🏗️ Arsitektur Sistem

Gambaran Arsitektur

Sistem menggunakan arsitektur client-server dengan beberapa client yang terhubung ke satu REST API backend.

Layer	Deskripsi
Clients	Web Client, Mobile Client, Admin Panel
Backend	REST API dibangun dengan Next.js
Database	PostgreSQL untuk penyimpanan data

Komponen Sistem

Komponen	Teknologi	Fitur
🌐 Web Client	Next.js	Landing page, Daftar event, Registrasi
📱 Mobile Client	React Native + Expo	QR Scanner, Daftar event, Kehadiran (Fokus series ini!)
⚙️ Admin Panel	Next.js	CRUD Event, CRUD Member, Laporan
🔌 REST API	Next.js API Routes	/api/admin/auth, /api/admin/events, /api/attendance
🗄️ Database	PostgreSQL	users, events, attendances, registrations

Alur Data

Dari	Ke	Deskripsi
Clients (Web, Mobile, Admin)	REST API	HTTP requests untuk data
REST API	PostgreSQL	Penyimpanan data
PostgreSQL	REST API	Hasil query
REST API	Clients	JSON responses

---

📱 Arsitektur Mobile App

Aplikasi mobile menggunakan pola arsitektur berlapis untuk pemisahan yang bersih.

Layer Aplikasi

Layer	Folder	Deskripsi
📱 Presentation	app/	UI screens dan navigasi
🗃️ State	store/	State management dengan Zustand
🔌 Services	services/	Layer komunikasi API
☁️ External	-	Backend REST API

Presentation Layer (Screens)

Screen	Path	Deskripsi
Home	app/(tabs)/index.tsx	Daftar event dengan pull-to-refresh
Scanner	app/(tabs)/scanner.tsx	QR code scanner untuk kehadiran
Account	app/(tabs)/account.tsx	Profil user dan logout
Event Detail	app/event/[id].tsx	Info event dan peserta
Login	app/login.tsx	Autentikasi admin

State Layer (Zustand Store)

Store	Fungsi	Deskripsi
auth.ts	token, user, setAuth(), logout(), initialize()	Manajemen state autentikasi

Service Layer (API Calls)

Service	Fungsi	API Endpoint
api.ts	Axios instance	Konfigurasi dasar + interceptors
auth.ts	loginAdmin()	POST /api/admin/auth
events.ts	getAdminEvents(), getEventDetail()	GET /api/admin/events
attendance.ts	recordAttendance()	POST /api/attendance

---

🔄 Flow Diagram

Authentication Flow

Step	Aksi	Deskripsi
1️⃣	User masukkan kredensial	Email dan password di Login screen
2️⃣	Panggil loginAdmin()	Service kirim POST ke /api/admin/auth
3️⃣	API validasi	Server cek kredensial di database
4️⃣	Terima token	API kembalikan { token, user }
5️⃣	Simpan auth	Zustand simpan ke SecureStore (terenkripsi)
6️⃣	Navigasi ke Home	User diarahkan ke tab navigator

QR Attendance Flow

Step	Aksi	Deskripsi
1️⃣	Admin scan QR	Kamera baca QR code dari peserta
2️⃣	Decode data	Parse format: eventId:uniqueCode
3️⃣	Panggil API	Kirim POST ke /api/attendance
4️⃣	Validasi registrasi	Server cek apakah peserta terdaftar
5️⃣	Catat check-in	Database simpan timestamp kehadiran
6️⃣	Tampilkan hasil	Tampilkan animasi sukses/error

---

🛠️ Tech Stack

Teknologi	Kegunaan	Alasan
React Native	Mobile framework	Cross-platform (iOS + Android)
Expo	Development platform	Setup cepat, tidak perlu native code
Expo Router	Navigation	File-based routing seperti Next.js
NativeWind	Styling	Syntax Tailwind CSS (familiar)
Zustand	State management	Simpel, ringan, tanpa boilerplate
Axios	HTTP client	Interceptors untuk auth headers
SecureStore	Token storage	Penyimpanan terenkripsi (aman)
Expo Camera	QR scanning	Akses kamera native

---

📂 Struktur Folder

Folder	Files	Deskripsi
app/	-	Screens (Expo Router)
app/(tabs)/	index.tsx, scanner.tsx, account.tsx	Tab navigation screens
app/event/	[id].tsx	Detail Event (dynamic route)
app/	login.tsx, _layout.tsx, +not-found.tsx	Login, Root Layout, 404
components/	EventCard.tsx, LoadingSpinner.tsx	Komponen UI reusable
services/	api.ts, auth.ts, events.ts, attendance.ts	Layer komunikasi API
store/	auth.ts	Zustand state management
constants/	Colors.ts	Konstanta aplikasi
utils/	theme.ts	Fungsi utilitas
assets/	fonts/, images/	Aset statis

---

🔐 Keamanan

Layer Keamanan	Implementasi	Deskripsi
Token Storage	expo-secure-store	Encrypted keychain/keystore
Komunikasi API	HTTPS only	TLS encryption in transit
Autentikasi	JWT tokens	Short-lived, server-validated
Otorisasi	Role-based	Admin-only endpoints

---

📅 Learning Path

Minggu	Parts	Topik
Minggu 1	Part 1-3	Arsitektur, Instalasi, Project Setup
Minggu 2	Part 4-5	Autentikasi, Manajemen Event
Minggu 3	Part 6-7	QR Scanner, Polish & Deploy

---

✅ Checklist Sebelum Lanjut

Sebelum melanjutkan ke Part 2, pastikan kamu:

• Memahami arsitektur sistem secara keseluruhan
• Mengerti flow authentication dan QR attendance
• Familiar dengan tech stack yang akan digunakan
• Sudah punya akun Expo (gratis di expo.dev)

🚀 Selanjutnya

Pada Part 2, kita akan melakukan instalasi environment development di berbagai platform (Mac, Windows, Ubuntu) termasuk Node.js, VS Code, Expo CLI, dan Android Studio/Xcode.

---

Next: Instalasi di Mac, Windows, Ubuntu →

---

Series ini dibuat untuk mendukung materi Casual Meetup #15 di LampungDev.