Bahasa Pemrograman – 2023
Teknik Komputer
PRAKTIKUM 8
Pengembangan Aplikasi Client-Server berbasis Mobile
Menggunakan Flutter
Wildan Faizin
2 D4 Teknik Komputer A
3222600011
Maretha Ruswiansari
Praktikum Bahasa Pemrograman
27 November 2023
1
Bahasa Pemrograman – 2023
Teknik Komputer
Pengembangan Aplikasi Client-Server berbasis Mobile Menggunakan Flutter
-Front End-
I. Tujuan Pembelajaran
● Mahasiswa dapat menjelaskan penerapan basis data dalam aplikasi
● Mahasiswa dapat mengembangkan backend dan frontend aplikasi
● Mahasiswa dapat menganalisis cara kerja aplikasi
II. Prosedur Percobaan
1. Buka VS Code, pilih View > Command Palette seperti berikut
2. Beri nama project, misal good_health, kemudian tunggu hingga project
selesai disiapkan
3. Cari pada project folder ‘good_health’ untuk file pubspec.yaml, dimana file
ini berisi metadata tentang package yang akan digunakan pada project.
Tambahkan beberapa baris setelah ‘cupertino.icons: ’, kemudian lanjutkan
dengan save file dan tunggu proses sinkronisasi selesai.
2
Bahasa Pemrograman – 2023
Teknik Komputer
cupertino_icons: ^1.0.2
intl: ^0.18.1
http: ^1.1.0
shared_preferences: ^2.2.2
google_maps_flutter: ^2.5.0
4. Pada pengembangan aplikasi ini membutuhkan Google Maps API Setup,
sehingga perlu melakukan setup API key agar bisa menampilkan maps dalam
widget :
a. Android
● Buka browser dan menuju ke halaman https://console.cloud.google.com/
● Pilih APIs & Services > Enabled APIs & Services
● Selanjutnya pilih CREATE PROJECT, isikan Good Health sebagai
nama project
● Kemudian Pilih Maps SDK for Android dan klik enable
● Pilih Keys & Credentials > CREATE CREDENTIALS > API Key,
kemudian copy API Key tersebut
b. iOS
● Untuk iOS langkahnya sama, namun perlu mengaktifkan Maps SDK
for iOS
3
Bahasa Pemrograman – 2023
Teknik Komputer
5. Selanjutnya buka project good_health > android > app > src > main >
AndroidManifest.xml, kemudian tambahkan beberapa baris berikut :
6. Sedangkan untuk iOS dapat membuka project good_health > ios > Runner >
Base.lproj > AppDelegate.Swift, kemudian tambahkan :
4
Bahasa Pemrograman – 2023
Teknik Komputer
7. Selanjutkan terkait project organizer, semua source code akan dibuat di
dalam folder lib, seperti berikut :
5
Bahasa Pemrograman – 2023
Teknik Komputer
8. Selanjutnya buat folder baru dengan nama model, dimana dalam folder baru
ini perlu membuat 6 file baru yaitu : dokter.dart, obat.dart, pasien.dart,
pesan_obat.dart, reg_poli.dart, user.dart
9. Untuk session and utility, maka perlu membuat folder util, dimana perlu
menambah 2 file baru session.dart dan util.dart
10. Berikutnya kita akan membuat file main.dart dan edit file
11. Untuk membuat login interface, buat folder baru page, dan buat file
login.dart
12. Untuk membuat register interface, kita akan membuat membuat folder
modul_pasien dan buat file baru signup.dart
13. Nantinya user pasien akan melihat 3 menu yaitu Home, Registrasi Poli, dan
Pesan Obat, maka kita buat 3 folder baru yaitu : reg_poli,home, dan
modul_pasien, kemudian di dalam folder modul_pasien, buatlah file
index.dart
14. User tidak hanya pasien tetapi juga pegawai, maka kita buat folder baru
bernama modul_pegawai, yang didalamnya akan terdapat file index.dart
15. Selanjutnya, kita perlu membuat folder baru dengan nama list_widget di
dalam folder page, kemudian buat file baru pesan_obat_pegawai.dart,
pesan_obat.dart, dan reg_poli.dart
16. Dalam folder modul_pegawai, buat file baru dengan nama
pesan_obat_view.dart
17. Dalam folder modul pasien, kita buat folder baru reg_poli tambahkan file
baru reg_poli_content.dart
18. Untuk widget, kita perlu membuat file baru reg_poli.dart dalam folder
list_widget
19. Selanjutnya tambahkan file dengan nama create.dart dalam folder reg_poli
20. Buat file baru dengan nama pesan_obat_content.dart dalam folder
pesan_obat
21. Buat file baru dengan nama pesan_obat.dart di dalam folder list_widget
22. Tambahkan file dengan nama create.dart dalam folder pesan_obat
6
Bahasa Pemrograman – 2023
Teknik Komputer
III. Hasil Percobaan
1. Pasien Interface
Login
Home
7
Bahasa Pemrograman – 2023
Teknik Komputer
Registrasi Poli
8
Bahasa Pemrograman – 2023
Teknik Komputer
Pesan Obat
9
Bahasa Pemrograman – 2023
Teknik Komputer
10
Bahasa Pemrograman – 2023
Teknik Komputer
2. Pegawai Interface
Login
Index Pegawai
11
Bahasa Pemrograman – 2023
Teknik Komputer
Informasi Pesanan
12
Bahasa Pemrograman – 2023
Teknik Komputer
3. Struktur keseluruhan
13
Bahasa Pemrograman – 2023
Teknik Komputer
IV. Analisa
Pada praktikum kali ini dilakukan pengembangan aplikasi client-server berbasis
mobile. Aplikasi yang dibuat yaitu sebuah aplikasi untuk kesehatan. Aplikasi ini
memiliki 2 User Interface, yaitu untuk Pasien dan untuk Pegawai. UI untuk Pasien dapat
digunakan untuk booking registrasi dan pemesanan obat, sementara UI untuk Pegawai
dapat digunakan untuk melihat Pasien pemesan obat dan informasi pesanannya.
Database yang sudah dibuat pada praktikum sebelumnya, dilanjutkan dengan
membuat aplikasinya. Pada file pubspec.yaml, intl, http, shared_preferences dan
google_maps_flutter ditambahkan. Paket intl memberikan dukungan untuk lokalitas dan
internasionalisasi, memungkinkan proyek untuk mendukung multiple bahasa dan
pengaturan regional. Dependensi pada paket http memungkinkan aplikasi untuk
melakukan permintaan HTTP, berkomunikasi dengan server, dan mengambil data dari
internet. Paket shared_preferences memberikan mekanisme penyimpanan data yang dapat
dibagi, berguna untuk menyimpan pengaturan atau data pengguna secara lokal. Terakhir,
paket google_maps_flutter digunakan untuk mengintegrasikan peta Google Maps ke
dalam aplikasi Flutter.
Dalam pengembangan aplikasi ini dibutuhkan integrasi Google Maps, setup API
key menjadi langkah krusial agar aplikasi dapat menampilkan peta melalui widget. Untuk
Android, halaman https://console.cloud.google.com/ diakses. Setelah itu, navigasi ke
menu APIs & Services > Enabled APIs & Services. Dipilih opsi "CREATE PROJECT"
dan diberi nama proyek "Good Health". Selanjutnya, dipilih "Maps SDK for Android"
dan layanan ini diaktifkan. Setelah itu, navigasi ke opsi "Keys & Credentials" >
"CREATE CREDENTIALS" > "API Key". Setelah API keys dibuat, API Key tersebut
disalin dan digunakan dalam konfigurasi aplikasi Android. Selanjutnya pada
AndroidManifest.xml, ditambahkan beberapa permission untuk mengakses fitur koneksi
internet, informasi status jaringan, dan lokasi. Pada AndroidManifest.xml juga
ditambahkan API Key Google Maps yang sudah disalin.
Selanjutnya, masukkan isi folder ‘lib’ yang didownload pada google classroom
kedalam isi folder ‘lib’ yang ada pada folder good_health. Folder ‘lib’ berisi kode-kode
yang diperlukan untuk membuat aplikasi Flutter. Folder ‘model’ berisi 6 file yaitu
‘dokter.dart’, ‘obat.dart’, ‘pasien.dart’, ‘pesan_obat.dart’, ‘reg_poli.dart’, dan ‘user.dart’.
Folder ‘util’ berisi 2 file yaitu ‘session.dart’ dan ‘util.dart’. Folder ‘page’ berisi file
‘login.dart’. Folder ‘modul_pasien’ berisi file ‘signup.dart’ dan folder ‘reg_poli’ yang
berisi file ‘reg_poli_content.dart’. Folder ‘modul_pegawai’ berisi file
‘pesan_obat_view.dart’. Folder ‘list_widget’ berisi file ‘pesan_obat_pegawai.dart’,
‘pesan_obat.dart’, ‘reg_poli.dart’, ‘create.dart’, dan ‘pesan_obat_content.dart’. Terakhir
folder `home` berisi file `home_content.dart`.
Saat main dart dijalankan, terdapat beberapa error yang terjadi di beberapa file.
Error tersebut terjadi karena kurangnya penambahan ‘.toSting()’. Ketika nilai dari sebuah
variabel ditampilkan ke dalam sebuah widget, maka tipe data perlu diubah dari variabel
14
Bahasa Pemrograman – 2023
Teknik Komputer
tersebut menjadi sebuah string. Hal ini dapat dilakukan dengan menggunakan method
toString(). Jika toString() tidak ditambahkan pada variabel tersebut, maka program akan
mengalami error karena tidak dapat menampilkan nilai dari variabel tersebut ke dalam
widget yang memerlukan tipe data string.
V. Kesimpulan
Setelah melakukan praktikum, dapat disimpulkan bahwa:
1. Aplikasi client-server berbasis mobile dapat dikembangkan dengan menggunakan
Flutter.
2. Integrasi Google Maps ke dalam aplikasi Flutter dapat dilakukan dengan
menambahkan API Key Google Maps.
3. Beberapa error dapat terjadi saat menjalankan aplikasi Flutter, salah satunya adalah
karena kurangnya penambahan .toSting() pada variabel yang akan ditampilkan ke
dalam widget.
15
