Puji dan syukur senantiasa kami panjatkan kehadirat Allah SWT yang telah melimpahkan nikmatnya kepada kita semua sehingga penulis berhasil menyelesaikan modul pembelajaran bertajuk Mobile Programming ini tanpa kendala yang berarti. Tujuan penyusunan modul ini adalah untuk memudahkan identifikasi dan pemahaman praktik pemrograman mobile dan pembuatan API bagi mahasiswa Teknik Informatika Fakultas Teknik Universitas Muhammadiyah Cirebon. Modul ini disusun secara bertahap agar para pemula dapat dengan mudah mempelajari pemrograman mobile dan mengembangkan aplikasi mobile khusus untuk sistem operasi Android.
Untuk itu penulis mengucapkan terima kasih yang sebesar-besarnya kepada semua pihak yang telah memberikan dukungan baik moril maupun materiil sehingga buku ini dapat terselesaikan. JDK harus diinstal pada komputer yang akan melakukan proses pembuatan aplikasi berbasis Java, namun tidak perlu diinstal pada komputer yang menjalankan aplikasi bawaan Java. Kemudian masukkan alamat folder bin di JDK yang kita, misal. telah diekstraksi dalam kasus ini.
13 Kemudian pilih tipe standar dan klik next
15 Kemudian klik tombol next
17 Setelah selesai klik finish
19 Kemudian pilih “Advanced System Setting”
21 Kemudian klik tombol “New”
23 Konfigurasi Android Studio dengan Flutter
25 Kemudian pilih “Flutter Application” dan klik “Next”
27 Setelah selesai akan muncul projek yang telah dibuat
Selanjutnya kita pilih versi sistem operasi androidnya, dalam hal ini misalnya “Q”, jika belum ada maka kita akan diminta untuk mendownloadnya terlebih dahulu.
31 Jika emulator sudah berjalan, kita dapat mengeksekusi projek dengan cara klik tombol play
33 Kemudian pilih Application
35 Menjalankan aplikasi dengan Handphone Android
37 Kemudian ketuk Build number beberapa kali, namun ini juga berbeda untuk beberapa versi
Kemudian aktifkan USB Debugger dengan memilih Opsi Pengembang di Sistem Opsi Pengembang ini akan muncul setelah mengaktifkan Mode Pengembang menggunakan cara di atas.
39 Kemudian aktifkan USB Debugging
41 Atau jika pada Android Studio terletak pada toolbar bagian atas tengah
Untuk mempermudah membaca dan memelihara kode, Anda dapat memisahkan MyApp dari halaman yang ingin Anda tampilkan. Di bagian home kita memanggil kelas HelloWorld yang kita buat sebelumnya di file hello_world.dart. Jika kita lihat pada teks utama terdapat Widget Center dan pada Widget Center terdapat child parameter untuk menempatkan Widget lain pada widget, dalam hal ini Text Widget.
Untuk mempercepat pembuatan kelas di VSCode, Anda dapat mengetikkan st lalu memilih widget stateless atau widget stateless lalu mengetikkan nama kelas yang diinginkan. Buat file bernama kolom_widget.dart di folder lib, lalu tulis kode berikut.
51 Membuat Widget Row
StatelessWidget adalah kelas widget yang propertinya tidak dapat diubah, artinya nilainya tidak dapat diubah, sedangkan nilai StatefullWidget dapat berubah. Selanjutnya kita akan belajar membuat form di Flutter, agar tampilan halaman lebih rapi kita kelompokkan dalam satu folder tersendiri, dalam hal ini kita akan membuat folder bernama ui pada folder lib. Agar kodenya mudah dibaca dan dikembangkan, alangkah baiknya jika widget yang digunakan dipisahkan menjadi metode/fungsi tertentu, misalnya ditemukan product_form.dart.
Pada folder UI, buat file bernama product_detail.dart lalu masukkan kode berikut. Membuat fungsi tombol simpan dan menampilkan data di Product Details. Buka kembali file product_form.dart dan tambahkan atributnya. Untuk setiap TextField yang dibuat, data input dikirim ke atribut TextEditingController() yang kita buat sebelumnya.
Kemudian fungsi _Save() jika diklik akan meneruskan data input dan menampilkan data tersebut pada ProductDetail yang telah kita buat sebelumnya. Buat file bernama product_page.dart di folder ui lalu tulis kode berikut.
65 Membuat Route (Pindah Halaman)
67 Pemisahan Widget ke dalam Class StatelessWidget
69 Menampilkan Detail Produk saat ListView diklik
SOAP
REST
75 Berikutnya akan muncul jendela Setup-XAMPP. Klik tombol Next untuk melanjutkan proses
77 Dan proses installasi pun berjalan
79 Untuk mengetahui apakah installasi telah berhasil atau tidak, ketikkan „localhost/‟ pada
API SPEC
81 Header Content-Type: application/json
Login
Produk 1. List Produk
- Create Produk
- Update Produk
- Show Produk
- Delete Produk
- SQL membuat tabel member_token
- SQL membuat tabel produk
85 Installasi CodeIgniter 4 sebagai Restful API
Pada project, buka file Database.php di folder app\config lalu cari kode berikut.
89 Membuat controller Registrasi
Buka aplikasi Postman yang telah terinstall
Masukkan url pendaftaran toko-api yang kita buat yaitu http://localhost/toko-api/public/registrasi http://localhost/toko-api/public/registrasi.
Selanjutnya pilih pengujian dengan type POST
Buat file bernama MMember.php di folder app\Models dan masukkan kode berikut. Buat file bernama MLogin.php di folder app/Models dan masukkan kode berikut. Buat file bernama LoginController.php di folder app/Controllers dan masukkan kode berikut.
Coba Rest API dengan memasukkan url http://localhost/toko-api/public/login menggunakan metode POST. Buat file bernama MProduk.php di folder app/Models dan ketikkan kode berikut.
95 Membuat fungsi delete produk
Agar ProductController dapat diakses, maka tambahkan rute untuk mengakses produk pada file app/Config/Routes.php.
97 List Produk (localhost/toko-api/public/produk) dengan method GET
101 Registrasi
Untuk mencoba halaman pendaftaran, buka file main.dart lalu ubah kodenya menjadi seperti berikut.
105 Login
Form produk yang kami buat dibawah ini memiliki 2 fungsi yaitu menambahkan data produk dan memodifikasi data produk.
115 Jika salah satu data produk diklik maka akan muncul detail produk
Dalam pembuatan aplikasi ini diperlukan dependensi untuk menerima dan mengirim permintaan ke Rest API (http) dan dependensi untuk menyimpan token (shared_preferences). Pastikan komputer atau laptop anda terhubung dengan internet, buka file pubspec.yaml lalu tambahkan kode berikut pada bagian dependencies.
117 Kemudian pada folder helpers buat sebuah file dengan nama user_info.dart dan masukkan
Buat file di folder pembantu bernama app_Exception.dart lalu tulis kode berikut.
119 Pada file ini berfungsi sebagai penanganan jika terjadi error saat melakukan
Buatlah file pada folder helpers bernama api_url.dart, dimana fungsi dari file ini adalah untuk menyimpan alamat API yang telah dibuat sebelumnya (Endpoint dari API Spec). Baris kedua (baseUrl) adalah alamat IP dari Rest API, jika ingin mengecek apakah terhubung ke emulator atau tidak, bisa dengan memasukkan alamat tersebut di browser pada emulator atau ponsel Android yang terhubung.
121 Membuat Bloc
Buat file dengan nama produk bloc.dart di direktori blok lalu masukkan kode berikut.
125 Menyatukan Fungsionalitas
127 Kemudian buat file dengan nama warning_dialog.dart dengan kode
Buka kembali file main.dart, kita akan memodifikasi file tersebut dengan syarat jika belum login akan terbuka halaman login, namun jika login akan terbuka halaman daftar produk. Buka file registrasi_page.dart di folder ui, lalu modifikasi fungsi _buttonRegistration dan tambahkan fungsi bernama _submit seperti gambar di bawah ini.
133 Modifikasi login_page.dart (fungsi login)
Bagian ini memodifikasi file product_page.dart sehingga dapat menampilkan data dari Rest API.
147 Dengan kode keseluruhan menjadi seperti berikut
Buka file product_detail.dart pada folder ui lalu kita sesuaikan fungsi konfirmasiHapus sebagai berikut.
