Flutter Frontend
Smart Attendance

1. Struktur Arsitektur Folder Proyek

Aplikasi ini dikembangkan menggunakan pemisahan tanggung jawab (*Separation of Concerns*). File di dalam folder lib/ disusun seperti bagan di bawah ini:

frontendFlutter/
├── pubspec.yaml                          # Manajemen package/dependensi eksternal
├── lib/
│   ├── main.dart                         # Entry point utama inisialisasi aplikasi
│   ├── config/
│   │   └── api_config.dart               # Pusat konfigurasi alamat IP & endpoint backend
│   ├── models/
│   │   ├── user_model.dart               # Mapping data JSON profil user / mahasiswa
│   │   └── absensi_model.dart            # Model payload data check-in/check-out
│   ├── services/
│   │   ├── auth_service.dart             # Logika HTTP POST requst Login & simpan sesi
│   │   ├── absensi_service.dart          # Integrasi kirim koordinat & foto base64
│   │   └── settings_service.dart         # Fetch data koordinat acuan radius kampus
│   └── screens/
│       ├── login_screen.dart             # Antarmuka form autentikasi NIM & Password
│       ├── home_screen.dart              # Dasbor utama (Navigasi Tab/Menu)
│       ├── absensi_screen.dart           # Deteksi GPS, Camera view & Tombol Absen
│       └── riwayat_screen.dart           # List log absensi bulanan user
└── android/                              # Konfigurasi native platform Android (Izin perangkat)

2. Instalasi VS Code & Flutter SDK

Langkah 1: Unduh Visual Studio Code

Download installer melalui website resmi code.visualstudio.com. Saat proses instalasi berlangsung, pastikan Anda memberikan tanda centang pada pilihan "Add to PATH (requires restart)" agar command terminal dikenali secara global.

Langkah 2: Pemasangan Flutter SDK

Ekstrak arsip Flutter SDK (.zip) ke dalam direktori yang bersih dan aman tanpa spasi, direkomendasikan pada path: C:\flutter\.

Masukkan environment variable PATH sistem operasi Anda ke sub-folder bin Flutter: C:\flutter\flutter\bin.

Buka terminal/Command Prompt (CMD) yang baru, lalu ketik perintah diagnostik berikut:

flutter --version
flutter doctor

3. Setup Android Studio & SDK Toolchain

Meskipun kita menulis sintaks aplikasi di VS Code, modul compiler Android Studio (SDK) tetap dibutuhkan untuk merakit paket instalasi target smartphone.

Langkah mutakhir, setujui semua lisensi persetujuan Android dengan menjalankan perintah di terminal Anda:

flutter doctor --android-licenses

Tekan tombol y kemudian Enter berulang-ulang untuk menyetujui seluruh klausul lisensi yang muncul.

4. Konfigurasi Ekstensi Pendukung VS Code

Buka panel Extensions di bilah sisi kiri VS Code (Ctrl+Shift+X), lalu cari dan install alat bantu berikut:

• Flutter (Diproduksi oleh Dart Code) - Menyediakan integrasi debugger, auto-completion, dan pintasan *Hot Reload*.
• Error Lens - Memunculkan galat/error penulisan kode langsung secara inline di samping baris baris teks.

5. Inisialisasi & Setup Proyek Flutter

Buka terminal CMD baru, arahkan ke folder project Anda dan buat kerangka baru:

mkdir C:\Projects
cd C:\Projects
flutter create --org com.absensi --project-name absensi_app absensi_flutter
cd absensi_flutter

Menyalin File Source Code Komponen

Strukturkan sub-direktori dalam lib/ terlebih dahulu, lalu salin file aset frontend lama yang bersumber dari arsip zip Anda:

mkdir lib\config lib\models lib\services lib\screens
# Salin source code utama pengganti kerangka dasar default boilerplate
copy C:\xampp\htdocs\absensi\frontendFlutter\lib\main.dart lib\
copy C:\xampp\htdocs\absensi\frontendFlutter\lib\config\api_config.dart lib\config\
copy C:\xampp\htdocs\absensi\frontendFlutter\lib\models\*.dart lib\models\
copy C:\xampp\htdocs\absensi\frontendFlutter\lib\services\*.dart lib\services\
copy C:\xampp\htdocs\absensi\frontendFlutter\lib\screens\*.dart lib\screens\

Mengonfigurasi pubspec.yaml

Buka file pubspec.yaml, daftarkan pustaka dependensi pihak ketiga berikut di bawah blok deklarasi dependencies::

name: absensi_app
description: "Sistem Smart Attendance Absensi Berbasis GPS dan Kamera."
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.1                  # Protokol komunikasi kirim data JSON ke backend PHP
  geolocator: ^12.0.0           # Modul pelacak titik koordinat latitude longitude GPS HP
  image_picker: ^1.1.2          # Pengambil gambar via kamera / media galeri internal
  flutter_map: ^7.0.2           # Peta visual interaktif open-source (OpenStreetMap)
  latlong2: ^0.9.1              # Komputasi matematis kalkulasi koordinat geografis
  shared_preferences: ^2.3.2    # Penyimpan session login (Token/NIM) di storage lokal HP

Simpan file dan jalankan penarikan dependensi otomatis melalui terminal:

flutter pub get

Penyesuaian Level SDK & Hak Akses Android Native

1. Buka file android/app/build.gradle.kts (atau versi non-KTS build.gradle), temukan pengaturan variabel konfigurasi dan ubah batas minimum SDK menjadi 21 agar kompatibel dengan library geolocator terbaru:

defaultConfig {
    applicationId = "com.absensi.absensi_app"
    minSdk = 21
    targetSdk = 34
    versionCode = 1
    versionName = "1.0.0"
}

2. Ganti seluruh isi file block android/app/src/main/AndroidManifest.xml dengan kode baku izin privasi perangkat keras (Internet, Kamera, GPS Presisi Tinggi) seperti di bawah ini:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.CAMERA"/>

    <application
        android:label="Smart Attendance"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">
        
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|screenLayout|locale|fontScale|uiMode|layoutDirection|density"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

Lakukan pemeriksaan sintaks akhir menggunakan perintah:

flutter analyze

Pastikan terminal mengembalikan pesan bernada: • No issues found!

6. Sinkronisasi Jalur Jaringan Lokal IP Server

Aplikasi smartphone Android tidak dapat membaca alamat domain localhost milik laptop development Anda. Anda wajib mencari alamat IP lokal (IPv4) laptop Anda.

Ketik ipconfig di CMD laptop Anda, cari baris IPv4 Address, misalnya: 192.168.1.14.

Buka file lib/config/api_config.dart, perbarui isinya sesuaikan dengan nilai IPv4 komputer host Anda:

class ApiConfig {
  static const String serverIp = '192.168.1.14'; // Ganti dengan IPv4 Laptop Anda yang sedang aktif
  static const String baseUrl = 'http://$serverIp/absensi/api';
  
  static const String login = '$baseUrl/login.php';
  static const String absensi = '$baseUrl/absensi.php';
  static const String riwayat = '$baseUrl/riwayat.php';
  static const String settings = '$baseUrl/settings.php';
  static const String fotoBase = 'http://$serverIp/absensi/uploads/';
}

7. Proses Debug Menjalankan Aplikasi di HP Real

Guna menguji fungsi kamera dan GPS akurat, pengujian wajib menggunakan HP Android fisik, bukan emulator.

flutter devices
# Pastikan nama seri device HP Anda terdaftar di konsol terminal
flutter run

Saat aplikasi mulai dikompilasi, pantau layar smartphone Anda. Berikan konfirmasi klik "Allow/Izinkan" pada sembulan pop-up otoritas instalasi aplikasi serta izin pelacakan lokasi.

8. Kompilasi Build Paket File APK

Jika aplikasi dirasa sudah stabil dan ingin didistribusikan ke pengguna lain secara mandiri tanpa kabel, lakukan kompilasi rilis:

# Build versi debug untuk pengujian lanjutan eksternal
flutter build apk --debug

# Build versi release penuh dengan optimasi kompresi ukuran file
flutter build apk --release

File instalan mentah hasil kompilasi akan tersimpan di dalam folder direktori berikut:
build\app\outputs\flutter-apk\app-release.apk

9. Kamus Troubleshooting (Penyelesaian Kendala)

10. Tabel Data Kredensial Akun Pengujian (Demo)

Gunakan pengenal identitas NIM di bawah ini pada formulir login interface aplikasi untuk menguji fungsionalitas sistem:

Logika Alur Kerja Absensi Aplikasi

Bagan operasional harian yang terjadi di balik layar latar belakang aplikasi mobile:

Tips Esensial Maintenance

• IP Dinamis WiFi: Router Wi-Fi atau Tethering Hotspot HP sering mengubah alokasi IP Laptop Anda setiap kali perangkat diputus-sambungkan. Selalu lakukan pengecekan ulang ipconfig berkala.
• Mode Produksi: Jika ingin mempublikasikan aplikasi secara resmi ke Play Store, ganti protokol alamat server menjadi secure HTTPS demi keamanan enkripsi enkapsulasi data.