ORANG PERTAMA
Script persentasi
Orang pertama
Assalamualaikum warahmatullahi [Link]
Perkenalkan nama saya .....
Kamu dari kelompok 6 akan mempersentasikan project kami,pada matakuliah mobile programing.
Project kami ini merupakan sebuah aplikasi presensi karyawan .
Sebelum itu kami perkenalkan kelompok kami terlebih dahulu
Baca slide ke 2
Slide selanjutnya akan di jelaskan oleh ...
ORANG KEDUA
Orang ke 2
Perkenalan diri..
Baca slide ke 3 Latar belakang..
Software atau alat yg di gunakan baca slide ke 4
Flow penggunaan aplikasi
Adalah urutan untuk menggunakan aplikasi nya :
Yg pertama yaitu ...baca slide 5
Slide ke 6
Kemudian user interface aplikasi presensi
Yang Pertamaa yaitu tampilan welcome screen aplikasi dengan tombol login
Kemudian yang ke 2 adalah tampilan login aplikasi yg di dalamnya terdapat from input email dan
password kemudian klik tombol login
Tampilan ke 3 adalah tampilan home page yg di dalamnya ada nama user ,kolom tanggal,absen
masuk,absen ,pulang riwayat presensi dan di bawah ada buton untuk melakukan presensi
Tampilan ke 4 terdapat Petta lokasi saat presensi dan tombol simpan presensi
Di tampilan ke 5 terdapat tampilan setelah kita melakukan simpan presensi di tandai dengan adanya
waktu masuk di kolom presensi
Untuk tampilan ke 6 terdapat tampilan absen pulang di tandai dengan waktu di kolom absen pulang
ORANG KETIGA
Slide ke 7
Build aplikasi
Yaitu tahap pembuatan aplikasi dengan menulis sourch code
Sebelumnya kami hanya akan menjelaskan source code aplikasi yang menggunakan framework flutter
sedangkan untuk penggunaan framwork ravel hanya akan di tampilkan sekilas
Slide 8
Yang pertama kita membuat file [Link]
Dalam file [Link] ini terdapat function main yang merupakan point entry dari program , main ini
merupakan bangunan awal dri program aplikasi presensi
Di daalam file ini kita menambahkan inisialisasi sebelum masuk aplikasi dengan menambahkan function
date formating untuk mengatur default tanggal agar menampilkan tanggal ke bahasa Indonesia
Setelah itu kita mengatur setting default tampilan untuk aplikasi ini seperti primary colo1r. defaul buton
dll
Dan menambah class welcome screen sebagai tampilan awal saat membuka aplikasi
Di dalam file background Dart kita mengatur widget untuk background aplikasi yang akan digunakan di
tampilan welcome screen dan login screen.
Slide 9
kemudian ini adalah tampilan dari welcome screen aplikasi presensi
slide 10
Untuk tampilan ini kami membuat file welcome screen di dalamnya kita membuat function dengan
menggunakan share preference untuk mendapatkan data token dan nama.
Token dan nama ini akan digunakan sebagai function ketika kita menekan tombol kembali di halaman
homepage langsung menuju ke halaman welcome screen ini dengan menggunakan navigasi push and
remove
Dalam file ini juga digunakan untuk memanggil function login button dan welcome screen image.
Slide 11
Kita juga membuat class login button untuk digunakan sebagai tombol navigator menuju ke homepage.
Kita membuat file welcome image untuk menampilkan gambar di halaman ini dari file asset dan untuk
menampilkan teks welcome to presensi
ORANG KE EMPAT
Slide 12
Ini adalah tampilan login screen
Slide 13
Pada filie login_screen dart ini merupakan class yang di gunakan sebagai background atau bangunan
awal, yang nantinya akan di di isi beberapa class atau widget yang akan di tampilkan seperti login form
dan image pada login screen. Pada filie ini juga di atur ukuran screen nya aar bisa di tampilkan di menu
desktop dan mobile agar bisa responsive.
Slide 14
Sebelumnya kita menambahkan package http dan shared preferreces. Kemudian kita membuat teks
editing controller untuk menyimpan teks dari teksfield yang kita buat.
Disini kita akan membuat method dengan shared preference untuk menyimpan token dan data nama
dari api setelah kita berhasil melakukan login.
Kemudian kita membuat method login agar kita bisa melakukan request ke server untuk bisa login dan
mendapatkan data dari login response model. Parameter dari method login ini akan di isi dari data yang
kita masukan dari teksfield yang kita buat.
Di sini kita juga membuat function Ketika kita sudah login dan mendapatkan token dan nama maka kita
akan langsung ke halaman login page mengugunakan navigator ini.
Slide 15
Ini merupakan code untuk membuat widget dari login form kita membuat texfield untuk email dan
password dan kita tambahkan function tex editing controller yang sudah kita buat.
Kemudian kita membuat elevated button yang Ketika di klik isinya berupa method login yang sudah
terdapat parameter email dan password di dalamnya.
Slide 16
Ini merupakan pemetaan balikan data dari login response model
ORANG PERTAMA
Slide 17
Ini merupakan tampilan dari home page
Slide 18
Di halaman home page ini kita membuart init state untuk memanggil data token dan nama yang sudah
kita dapatkan tadi.
Kemudian kita juga membuat fuction get data untuk mendapatkan data yang akan kita dapatkan dari api
atau home response model menggunakan token yang sudah kita daptkan
Slide 19
Ini merupakan code untuk ui dari home page, pertama kita membuat icon ‘Kembali atau panah’ yang
berada di appbar dengan icon button dan menambah kan function Ketika di klik, nama dan token yang
tersimpan di shared perefernces akan terhapus sehingga Ketika kita akan masuk lagi kita harus login
Kembali. Dan Ketika di klik kita akan langsung Kembali ke welcome screnn dengan navigator ini.
Di sini juaga terdapat teks nama user yang kita panggil dari data nama yang kita dapatkan dari api
Kemudian kita membuat container untuk membuat kotak yang akan diisi dengan tanggal yang kitaa
dapat kan dari api dan juga kita atur dengan date format ke Bahasa Indonesia
Slide 20
Kemudian ini merupakan code untuk membuata keterangan presensi yang kita dapat dari api yang sudah
dibuat. Kita menggunakan column dan text untuk menulisakan waktu dan keterangan masuk dan pulang,
teksi ini akan otomatis di isi Ketika kita sudah dapat data variable ‘hari ini’ dan ‘masuk’ jika belum teks ini
hanya akan bertuliskan absen masuk begitu pula dengan absen pulang.
Kita juga membuyat Riwayat presensi dengan menggunakan list view. Kita menggunakan item count yang
berisi array yang kita dapatkan dari home response model agar Ketika Riwayat absensi kita bertambah
maka card Riwayat absensi juga akan bertambah
Kita juga membuat floating action button untuk menjadi navigator ke halaman simpan page dan untuk
mendapatakan get data untuk melakukan absensi
Slide 21
Ini merupakan pemetaan balikan data dari home response model
ORANG KEDUA
Slide 23
Untuk tampilan di halaman simpan page ini kita memerlukan package location dan sincfution flutter map
untuk mendapatkan lokasi dan menampilkan peta atau map.
Kita membuat function current location untuk mendapatkan location data yang akan digunakan untuk
menampilkan map. Disini kita juiga membuat permsission untuk mendapatkan izin lokasi dari device
yang kita gunakan.
Kita membuat function save presensi model untuk menyimpan data latitude dan longitude yang akan
kita post ke API kita
Kita juga membuat scaffold messenger Ketika kita sukses menyimpan presesnsi atau gagal simpan
peresensi
Slide 24
Kemudian kita membuat appbar dengan teks presensi, kita membuat container yang di dalamnya
terdapat singfution map ,maptile layer dan current location latitude longitude. Kemudian juga ada url
untuk template dari map yang kita tampilkan.
Kemudian kita membuat tombol presensi dengan elevated button untuk memanggil function save
presesnsi yang parameter nya di ambil dari get lokasi dari map yang sudah kita buat
Slide 25
Ini adalah pemetaan dari balikan data dari save presesnsi model
ORANG KETIGA
Slide 26
Ini adalah tampilan data admin Ketika kita sudah melakukan absensi
Slide 27
Ini juga halaman website admin untuk melihat data user, menambah dan menghapus user
slide 28
Terima kasih
Kemudian akan di lanjutkan untuk demo aplikasi
ORANG KE EMPAT
Di lanjut demo aplikasi