IV. HASIL DAN PEMBAHASAN
4.3 Implementasi Sistem
image_picker ^0.7.4 Untuk memilih gambar dari galeri dan mengambil gambar menggunakan kamera.
logger ^1.0.0 Untuk mencetak log.
image ^3.1.0 Untuk menampilkan pada flutter.
font_awesome_flutter ^9.2.0 Untuk akses icon font awesome di flutter.
flutter_staggered_grid_view ^0.6.2 Untuk layout grid di flutter.
http ^0.13.5 Untuk Membuat permintaan http.
connectivity_plus ^2.3.8 Untuk mengecek apakah perangkat terhubung ke jaringan atau tidak.
1. Implementasi Halaman Splashscreen
Halaman splashscreen merupakan class MySplashPage yang terdiri dari beberapa widget seperti StatefulWidget, SplashScreen, dll. Halaman splashscreen muncul ketika pertama kali pengguna membuka aplikasi. Pada halaman tersebut terdapat logo dari aplikasi yang akan muncul selama 5 detik. Implementasi kode program halaman splashscreen dapat dilihat pada gambar 35, dan hasil implementasi halaman splashscreen dapat dilihat pada gambar 36.
Gambar 35. Implementasi Kode Program Halaman Splashscreen
Gambar 36. Hasil Implementasi Halaman Splashscreen 2. Implementasi Halaman Utama
Halaman utama merupakan class Home yang terdiri dari beberapa widget seperti StatefulWidget, Scaffold, dll. Halaman utama akan muncul setelah halaman splashscreen. Pada halaman ini terdapat beberapa menu utama yaitu Menu Deteksi, Menu Gejala PMK, Menu Informasi PMK, dan Menu Tentang Aplikasi. Implementasi kode program halaman utama dapat dilihat pada gambar
37, dan hasil implementasi halaman utama dapat dilihat pada gambar 38.
Gambar 37. Implementasi Kode Program Halaman Utama
Gambar 38. Hasil Implementasi Halaman Utama 3. Implementasi Halaman Deteksi Gambar
Halaman deteksi gambar merupakan class CameraPage yang terdiri dari beberapa widget seperti StatefulWidget, Scaffold, dll. Pada halaman deteksi gambar terdapat tempat gambar, kotak hasil deteksi, tombol upload gambar jika di klik maka akan menampilkan pop-up pilih camera atau gallery, dan tombol untuk lanjut deteksi non-fisik. Implementasi kode program halaman deteksi gambar dapat dilihat pada gambar 39, dan hasil implementasi halaman deteksi gambar dapat dilihat pada gambar 40, 41 dan gambar 42.
Gambar 39. Implementasi Kode Program Halaman Deteksi Gambar
Gambar 40. Hasil Implementasi Halaman
Deteksi Gambar
Gambar 41. Pop-up pilih kamera atau
gallery
Gambar 42. Hasil Implementasi Halaman
Hasil Deteksi Gambar 4. Implementasi Halaman Pertanyaan Deteksi Gejala Non Fisik
Halaman pertanyaan deteksi gejala non fisik merupakan class QuestionPage yang terdiri dari beberapa widget seperti StatefulWidget, Scaffold, dll. Pada halaman pertanyaan akan menampilkan informasi jumlah pertanyaan yang akan dijawab, terdapat tombol untuk menjawab “ya” atau “tidak”, serta tombol selanjutnya jika pengguna sudah selesai menjawab dan ingin melanjutkan ke pertanyaan berikutnya. Implementasi kode program halaman pertanyaan deteksi gejala non fisik dapat dilihat pada gambar 43, dan hasil implementasi halaman pertanyaan dapat dilihat pada gambar 44.
Gambar 43. Implementasi Kode Program Halaman Pertanyaan
Gambar 44. Hasil Implementasi Halaman Pertanyaan Deteksi Gejala Non Fisik 5. Implementasi Halaman Hasil Deteksi Non-Fisik
Halaman hasil deteksi non-fisik merupakan sebuah method private yang terdiri dari beberapa widget seperti Scaffold, Container, dll. Pada halaman hasil deteksi non-fisik akan menampilkan informasi jumlah pertanyaan yang dijawab
“ya” pada halaman pertanyaan sebelumnya, terdapat tombol informasi PMK, tombol dinas setempat, dan tombol selesai untuk kembali ke halaman utama.
Implementasi kode program halaman hasil deteksi non-fisik dapat dilihat pada gambar 45, dan hasil implementasi halaman hasil deteksi non-fisik dapat dilihat pada gambar 46.
Gambar 45. Implementasi Kode Program Halaman Hasil Deteksi Non-Fisik
Gambar 46. Hasil Implementasi Halaman Hasil Deteksi Non-Fisik 6. Implementasi Halaman Informasi Gejala Fisik
Halaman gejala fisik merupakan class GejalaPage yang terdiri dari beberapa widget seperti StatefulWidget, Scaffold, dll. Pada halaman informasi gejala fisik akan terdapat dua tab yaitu tab gejala fisik dan tab gejala non-fisik. Pada tab gejala fisik akan menampilkan gambar-gambar gejala fisik yang dialami sapi PMK.
Implementasi kode program halaman gejala PMK dapat dilihat pada gambar 47, halaman gejala fisik pada gambar 48, dan hasil implementasi halaman informasi gejala fisik dapat dilihat pada gambar 49.
Gambar 47. Implementasi Kode Halaman Gejala PMK
Gambar 48. Implementasi Kode Menampilkan List Gambar Gejala Fisik
Gambar 49. Hasil Implementasi Halaman Informasi Gejala Fisik 7. Implementasi Halaman Informasi Detail Gejala Fisik
Halaman detail gejala fisik merupakan class DetailGejala yang terdiri dari beberapa widget seperti StatelessWidget, Scaffold, dll. Pada halaman informasi detail gejala fisik akan terdapat gambar beserta informasi detail mengenai gambar yang di klik pada halaman gejala fisik sebelumnya. Implementasi kode program halaman detail gejala fisik dapat dilihat pada gambar 50, dan hasil implementasi halaman informasi detail gejala fisik dapat dilihat pada gambar 51.
Gambar 50. Implementasi Kode Program Halaman Detail Gejala Fisik
Gambar 51. Hasil Implementasi Halaman Informasi Detail Gejala Fisik 8. Implementasi Halaman Informasi Gejala Non Fisik
Halaman informasi gejala non-fisik merupakan class GejalaNfisikPage yang terdiri dari beberapa widget seperti StatelessWidget, Container, dll. Halaman informasi gejala fisik akan muncul Ketika pengguna mengklik tab gejala non-fisik pada halaman gejala PMK. Pada tab gejala non-non-fisik akan menampilkan informasi mengenai gejala-gejala non-fisik yang dialami sapi PMK. Implementasi kode program halaman gejala PMK dapat dilihat pada gambar 47, halaman
informasi gejala non-fisik pada gambar 52, dan hasil implementasi halaman informasi gejala non-fisik dapat dilihat pada gambar 53.
Gambar 52. Implementasi Kode Program Menampilkan List Gejala Non-Fisik
Gambar 53. Hasil Implementasi Halaman Informasi Gejala Non Fisik 9. Implementasi Halaman Penyebaran PMK
Halaman penyebaran PMK merupakan class PenyebaranPage yang terdiri dari beberapa widget seperti StatelessWidget, Container, dll. Halaman penyebaran PMK merupakan subclass dari halaman informasi PMK yaitu class InfoPmkPage.
Pada halaman informasi PMK akan terdapat dua tab yaitu tab penyebaran dan tab pertolongan pertama. Pada tab penyebaran akan menampilkan informasi mengenai bagaimana cara penyebaran virus PMK. Implementasi kode program
halaman informasi PMK dapat dilihat pada gambar 54, halaman penyebaran pada gambar 55, dan hasil implementasi halaman penyebaran dapat dilihat pada gambar 56.
Gambar 54. Implementasi Kode Program Halaman Informasi PMK
Gambar 55. Implementasi Kode Program Menampilkan List Penyebaran PMK
Gambar 56. Hasil Implementasi Halaman Penyebaran PMK 10. Implementasi Halaman Pertolongan Pertama PMK
Halaman pertolongan pertama PMK merupakan class PertolonganPage yang terdiri dari beberapa widget seperti StatelessWidget, Container, dll. Halaman pertolongan pertama PMK merupakan subclass dari halaman informasi PMK yaitu class InfoPmkPage. Pada halaman tab pertolongan pertama akan menampilkan informasi mengenai tindakan apa saja yang dapat dilakukan peternak untuk pertama kali ketika terdapat sapi yang terduga PMK.
Implementasi kode program halaman informasi PMK dapat dilihat pada gambar 54, halaman pertolongan pertama PMK pada gambar 57, dan hasil implementasi halaman pertolongan pertama PMK dapat dilihat pada gambar 58.
Gambar 57. Implementasi Kode Program Menampilkan List Pertolongan Pertama PMK
Gambar 58. Hasil Implementasi Halaman Pertolongan Pertama PMK 11. Implementasi Halaman Tentang Aplikasi
Halaman tentang aplikasi merupakan class AboutPage yang terdiri dari beberapa widget seperti StatelessWidget, Scaffold, dll. Pada halaman tentang aplikasi akan menampilkan informasi mengenai aplikasi Pendeteksi Gejala Awal PMK pada Sapi dan informasi mengenai Dinas Pertanian dan Ketahanan Kota Jambi. Implementasi kode program halaman tentang aplikasi dapat dilihat pada gambar 59, dan hasil implementasi halaman tentang aplikasi dapat dilihat pada gambar 60.
Gambar 59. Implementasi Kode Program Halaman Tentang Aplikasi
Gambar 60. Hasil Implementasi Halaman Tentang Aplikasi b) Stabilize
Pada fase ini seluruh modul yang telah selesai pengkodean (coding) akan disatukan menjadi satu kesatuan aplikasi sistem secara utuh. Proses penyatuan aplikasi dapat dilihat pada gambar 61 dan 62 berikut ini:
Gambar 61. Proses Penyatuan Seluruh Modul Aplikasi
Gambar 62. Tampilan Folder Hasil Build Release Aplikasi
Dari gambar diatas dapat dilihat proses penyatuan seluruh modul menjadi satu kesatuan aplikasi sistem secara utuh berhasil dengan format .apk yang tersimpan dalam folder release setelah itu akan dilanjutkan pada tahap pengujian aplikasi.