Tutorial Membuat Aplikasi Absensi dengan Face Detection Flutter

Azhar Rivaldi    6/13/2024    Tutorial Flutter    2 comments   

Baca Juga

Tutorial Membuat Aplikasi Absensi dengan Face Detection Flutter

Halo sobat 48 😁. Bagaimana kabarnya? Semoga selalu dalam keadaan sehat ya. Pada kesempatan kali ini saya akan membagikan sebuah artikel yang membahas tentang Tutorial Membuat Aplikasi Absensi dengan Face Detection Flutter.

Aplikasi Absensi ini berisi tiga Menu. Menu pertama berisi absen dengan foto selfie. Di Menu ini wajib foto dengan wajah ya, karena saya sematkan Face Detection. Menu kedua berisi absen untuk Cuti, Izin dan Sakit. Menu yang ketiga berisi riwayat dari absensi yang di input.

Database yang digunakan untuk Aplikasi Absensi ini menggunakan Firebase. Saya asumsikan kalian sudah menguasai cara penggunaan dari Firebase ya. Berikut ini saya kasih sedikit langkah-langkah untuk penerapaanya di Flutter.

1. Hal pertama yang perlu kalian lakukan adalah membuka https://firebase.google.com/ dan membuat akun untuk mendapatkan akses ke console Firebase. Setelah kalian mendapatkan akses ke console, kalian bisa mulai dengan membuat project pertama.

Gambar 1

2. Pilih Project yang kalian ingin gunakan, lalu kalian download google-services.json dan letakkan file tersebut di nama_package_aplikasi\android\app.

Gambar 2

Gambar 3

Gambar 4

atau jika masih kurang paham, bisa lihat DISINI atau DISINI.

Buat kalian yang ingin langsung mencobanya, silahkan unduh melalui Github saya SOURCE CODE DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan lanjut baca artikel ini sampai selesai.

Jika kamu ingin mencoba tutorial aplikasi ini dengan versi video, berikut saya berikan Videonya:

Jangan lupa subscribe Channel Youtube saya juga ya Azhar Rivaldi, karena disana ada banyak tutorial-tutorial untuk membuat aplikasi lainnya. Oke langsung saja tanpa basa-basi lagi kita langsung ke langkah pertama :

1. Seperti biasa, buat project baru di Android Studio dengan cara klik File ⇒ New Project Flutter. Ingat, jangan langsung Run atau Copy Paste Source Code dari saya. Disini saya menggunakan Android Studio versi Jellyfish.

2. Import beberapa Library dan Assets ke pubspec.yaml.
Source : pubspec.yaml

3. File Assets yang ditambahkan.
Source : assets file

4. Ubah isi main.dart yang sebagai Class utama.
Source : main.dart

5. Buat Class main_page.dart yang sebagai Menu Utama.
Source : main_page.dart

6. Buat Class untuk menampilkan absensi face detection. Buat absen_page.dart dan canera_page.dart.

Source : absen_page.dart dan camera_page.dart

7. Buat Class untuk menampilkan history absensi. Buat history_page.dart.
Source : history_page.dart

8. Buat Class untuk menampilkan cuti, sakit dan izin absensi. Buat leave_page.dart.
Source : leave_page.dart

9. Buat Class Google MLKit. Buat google_ml_kit.dart.
Source : google_ml_kit.dart

10. Buat Class Vision. Buat vision.dart.
Source : vision.dart

Selesai dan coba kalian Run. Jika kalian mengikuti langkah-langkah diatas dengan baik, pasti aplikasi yang kalian buat akan berjalan sebagaimana mestinya. Namun jika mengalami Error, silahkan berikan komentar dan kita diskusikan bersama.

Berikut ini hasilnya:

Menu Riwayat

Menu Absensi Cuti, Izin dan Sakit

Menu Absensi Selfie Face Detection

Menu Utama

Menu Foto Selfie Face Detection

Support Blog Rivaldi 48 agar terus bisa membagikan artikel-artikel yang bermanfaat dengan cara klik link Sociabuzz dibawah ini :

https://sociabuzz.com/azharrvldi_/donate (bisa pakai GoPay, OVO, DANA, Bank Transfer)

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Aplikasi Absensi dengan Face Detection Flutter ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram Admin @azhardvls_

#aplikasiabsensionline #aplikasiabsensiflutter #absensiwajah #absensifacedetection #absensifacerecognition #absensikaryawan #absensiwiswa