Materi kuliah Pemrograman client server.pdf

Pemrograman Client Server
Pertemuan 9 & 10
Institut Teknologi dan Bisnis
PalComTech

Firebase adalah platform
pengembangan aplikasi yang dikelola
oleh Google. Ini menyediakan
berbagai layanan yang memungkinkan
pengembang untuk membangun,
mengelola, dan mengembangkan
aplikasi berkualitas tinggi lebih cepat
dan lebih mudah.
Firebase

Firebase menawarkan berbagai fitur, termasuk penyimpanan
data secara real-time, autentikasi pengguna, analitik,
pengujian, pelaporan bug, serta banyak lagi. Ini sering
digunakan untuk mengembangkan aplikasi seluler, aplikasi
web, dan aplikasi permainan. Firebase memanfaatkan
teknologi cloud untuk menyediakan layanan-layanan ini
kepada pengembang dengan biaya yang efisien dan mudah
digunakan.
Firebase

Firebase memiliki berbagai fitur menarik, seperti
authentication, realtime database, cloud storage, machine
learning, dan masih banyak lainnya. Untuk mengetahui
tentang layanan apa saja yang disediakan Firebase, kunjungi
situs resminya di https://firebase.google.com/.
Firebase

Firebase telah mendukung Flutter. Seluruh layanan Firebase
telah tersedia plugin supaya bisa diintegrasikan dengan
aplikasi mobile Flutter. Untuk platform lain seperti web dan
MacOS, masih sebagian layanan yang didukung. Untuk detail
plugin apa saja yang bisa digunakan pada Flutter, cek tautan
https://firebase.google.com/docs/flutter/setup#available-
plugins
Firebase

Pada pertemuan kali ini kita akan membuat sebuah aplikasi
chatting menggunakan Flutter dan memanfaatkan layanan
dari Firebase.
Ada beberapa hal yang harus Anda lakukan sebelum memulai
latihan ini:
1. Instal Node.js. (https://nodejs.org/en/download/)
2. Lalu clone repo berikut
https://gitlab.com/dika21.abuaisyah/latihan-chatting.git
Integrasi Flutter + Firebase

Sebelum mengintegrasikan project Flutter dengan Firebase,
ikuti langkah berikut untuk membuat project Firebase.
1. Masuk ke halaman Firebase console. Buat proyek baru
dengan klik Add project.
Membuat Firebase Project

2. Masukkan nama project yang Anda inginkan. Misalnya kali
ini gunakan nama Latihan Chatting, lalu klik Continue.

3. Lalu pilih akun untuk mengakses Google Analytics. Kita
bisa pilih Default Account for Firebase. Jika sudah, klik
Create Project. Firebase akan menyiapkan proyek Anda
dalam beberapa saat. Klik Continue ketika proyek Anda
siap.

4. Selanjutnya Anda akan diarahkan
ke halaman utama proyek Firebase.
Di sini Anda dapat mengatur
layanan yang digunakan dan
mengintegrasikan Firebase dengan
proyek Anda.

Selanjutnya kita perlu instal beberapa
aplikasi yang mendukung dalam
mengonfigurasi Firebase dengan
project Flutter.
Konfigurasi

1. Buka terminal pada direktori proyek Flutter, lalu instal Firebase
CLI.
Flag -g bertujuan untuk instal Firebase CLI secara global
sehingga dapat berjalan di berbagai direktori proyek. Pastikan
Anda login dengan akun Google yang sesuai dengan proyek
Firebase sebelumnya. Apabila tidak sesuai, Anda dapat lakukan
logout dengan perintah di bawah ini dan login kembali.
Konfigurasi

2. Login ke Firebase dengan akun Google dengan perintah
berikut.
3. Berikutnya lakukan install FlutterFire CLI pada terminal.
Tambahkan sub-perintah global agar Flutter CLI dapat bekerja
di berbagai direktori proyek.
Konfigurasi

4. Pada direktori utama proyek Flutter Anda, lakukan konfigurasi
Firebase melalui command line.
Konfigurasi

Anda akan diberi pertanyaan terkait konfigurasi Firebase dengan
proyek Flutter. Jawab pertanyaannya sesuai dengan tabel berikut.
Tunggu beberapa saat hingga proses inisiasi Firebase berakhir.
Select a Firebase project to
configure your Flutter applications
with..
Latihan Chatting (sesuaikan
dengan nama project yang sudah
Anda buat sebelumnya)
Which platforms should your
configuration support?
android, ios, web (pilih platform
dengan menekan tombol spasi)
Konfigurasi

5. Pastikan seluruh platform yang Anda pilih telah terdaftar dengan
baik. Jika berhasil, terminal Anda akan menampilkan
keterangan seperti berikut.
i Firebase android app com.latihan.latihan_chatting registered.
i Firebase ios app com.latihan.latihanChatting registered.
i Firebase web app latihan_chatting (web) registered.
Konfigurasi

Setelah proses konfigurasi Firebase, Anda mendapati beberapa berkas
baru di dalam proyek Flutter, yaitu:
- google-service.json, file ini berada pada folder android/app dan
berguna sebagai konfigurasi aplikasi Android dengan Firebase.
- GoogleService-Info.plist, file ini berada pada folder ios/Runner dan
berguna sebagai konfigurasi aplikasi iOS dengan Firebase.
- firebase_app_is_file.json, file ini berada pada folder ios dan
berguna sebagai sumber informasi Firebase dengan aplikasi iOS.
- firebase_options.dart, file ini berada pada folder lib dan berguna
sebagai kelas yang mendefinisikan Firebase ke dalam proyek Flutter.
Konfigurasi

Ada beberapa konfigurasi yang perlu dilakukan
pada Android maupun iOS. Untuk Android,
pastikan minimal target API Level 19 (KitKat)
atau lebih. Selain itu, Anda perlu aktifkan flag
Multidex untuk mendukung library multidex. Hal
ini perlu dilakukan karena API Level dibawah 21.
Jika target API Level aplikasi Anda bernilai 21
atau lebih, tidak perlu menambahkan flag
Multidex ini. Anda dapat ubah kedua konfigurasi
tersebut pada berkas build.gradle pada folder
android/app.
Konfigurasi

Selain itu, Anda perlu mengaktifkan plugin Google Services pada
berkas Gradle. Pada berkas build.gradle di folder android,
tambahkan aturan untuk menyertakan plugin Google Services. Periksa
juga apakah Anda sudah menyertakan repository Maven Google atau
tidak.
Konfigurasi

buildscript {
repositories {
// Periksa apakah sudah menyertakan Maven Google atau tidak.
google() // Google's Maven repository
}
dependencies {
// ...
// Tambahkan baris di bawah ini.
classpath 'com.google.gms:google-services:4.3.13' // Google Services plugin
}
}
allprojects {
// ...
repositories {
// Periksa apakah sudah menyertakan Maven Google atau tidak.
google() // Google's Maven repository
// ...
}
}
Konfigurasi

Selanjutnya, buka berkas build.gradle di dalam folder android/app.
Tambahkan kode di bawah ini untuk menerapkan plugin Google
Services.
Konfigurasi

Langkah terakhir adalah inisialisasi Firebase di proyek Flutter.
1. Tambahkan package firebase_core pada berkas
pubspec.yaml.
Pastikan lakukan build proyek setelah menambahkan
package baru.
Integrasi Proyek Flutter

Kebanyakan aplikasi perlu mengetahui dan memverifikasi identitas
pengguna. Proses autentikasi memungkinkan aplikasi untuk
mengidentifikasi identitas pengguna valid dan dapat mengakses
aplikasi.
Firebase Authentication menyediakan layanan backend & SDK yang
mudah digunakan untuk mengimplementasi autentikasi pengguna ke
aplikasi Anda. Firebase Auth mendukung autentikasi menggunakan
email, password, nomor telepon, serta penyedia autentikasi lain seperti
Google, Facebook, Twitter, dan banyak lagi.
Firebase Authentication

Untuk mengatur metode autentikasi pada Firebase buka halaman
konsol lalu pilih menu Authentication.

Pilih tab Sign-in method atau klik tombol Set up sign-in method.
Firebase akan menampilkan beberapa pilihan metode autentikasi yang
bisa digunakan. Untuk kali ini kita gunakan autentikasi dengan
Email/Password. Pilih Email/Password lalu klik Enable di switch
pertama lalu klik Save.

Untuk mengimplementasikan fitur autentikasi pada Flutter juga cukup
mudah. Gunakan Firebase Authentication API yang tersedia pada
package firebase_auth.

Setelah menambahkan package ke dalam project, mari kita mulai
dengan menambahkan fitur registrasi. Pada berkas register_page.dart
tambahkan instance FirebaseAuth ke dalam sebuah variabel.

Selanjutnya kita jalankan kode untuk registrasi pengguna ketika tombol
Register diklik.

Metode createUserWithEmailAndPassword menerima dua parameter
email dan password yang diinputkan oleh pengguna.

Jalankan aplikasi Anda. Ketika registrasi berhasil, daftar pengguna
akan ditambahkan ke halaman Authentication Firebase.

Sekarang dengan logika yang sama Anda dapat membuat fitur login.
Tambahkan instance FirebaseAuth pada berkas login_page.dart.

Sesuaikan juga kode ketika tombol Login diklik seperti berikut:

Proses autentikasi akan dijalankan pada backend Firebase ketika Anda
memanggil metode signInWithEmailAndPassword(). Data pengguna
yang digunakan untuk login juga akan disimpan secara lokal pada
perangkat Anda. Nantinya Anda dapat menggunakan data ini untuk
situasi lain yang berhubungan dengan profil pengguna, seperti
mengecek apakah pengguna telah login ketika pertama kali aplikasi
dibuka.

Terakhir, kita tambahkan fitur untuk logout dari aplikasi. Tambahkan
terlebih dahulu instance FirebaseAuth pada berkas chat_page.dart.

Kemudian temukan kode untuk menjalankan fungsi ketika ikon close
diklik. Lalu sesuaikan kodenya menjadi seperti berikut:

Metode signOut() akan menghapus data identitas pengguna yang
tersimpan dalam perangkat.
Cukup mudah bukan mengimplementasikan autentikasi dengan Flutter
dan Firebase?
Berikut ini adalah beberapa referensi tambahan yang bisa Anda
pelajari terkait Flutter dan Firebase Authentication:
1. https://firebase.google.com/docs/auth
2. https://firebase.flutter.dev/docs/auth/usage/

Cloud Firestore adalah database yang fleksibel dan scalable untuk
pengembangan aplikasi mobile dan web. Firestore memberikan dukungan
untuk menyimpan dan menampilkan data secara realtime di berbagai
perangkat mobile dan web. Firestore juga menawarkan dukungan offline untuk
mengatasi masalah latensi dan koneksi internet pengguna.
Firestore termasuk dalam kategori database NoSQL yang berbasiskan
dokumen. Data disimpan dalam dokumen yang terdiri dari pasangan key-
value. Dokumen-dokumen ini disimpan dalam collection yang merupakan
wadah untuk dokumen yang dapat Anda gunakan untuk mengatur data dan
membuat query.
Firebase Firestore

Dokumen Firestore mendukung banyak
tipe data yang berbeda, mulai dari
angka, string, boolean, hingga objek
bertingkat yang kompleks seperti
subcollection lain.
Firebase Firestore

Mari langsung mulai membuat
database Firestore untuk aplikasi
chatting kita. Pada konsol Firebase pilih
menu Cloud Firestore.
Firebase Firestore

Kemudian pada halaman Cloud Firestore klik tombol Create database.
Firebase Firestore

Selanjutnya Anda akan diminta untuk mengatur security rules. Peraturan ini
mendefinisikan siapa saja yang bisa membaca dan menuliskan data ke dalam
database. Untuk latihan ini pilih Start in test mode. Peraturan ini digunakan untuk
tahap pengembangan dan pengujian di mana siapa pun bisa menulis dan
membaca data pada database selama 30 hari ke depan. Klik Next.
Lalu pilih lokasi server di mana data Anda akan disimpan. Pilih lokasi server yang
dekat dengan pengguna aplikasi Anda untuk meminimalisir latensi. Perhatikan
bahwa Anda tidak bisa mengubah lokasi begitu server terbuat. Jika Anda telah
memilih lokasi, klik Enable.
Tunggu beberapa saat sampai Firebase selesai menyiapkan server database Anda.
Firebase Firestore

Begitu database Firestore siap, buat collection baru dengan
klik Start collection. Collection ini akan kita gunakan untuk
menyimpan dokumen-dokumen yang menyimpan data pesan.
Berikan nama collection messages kemudian klik Next.
Firebase Firestore

Tambahkan
beberapa data untuk
nantinya ditampilkan
ke dalam aplikasi.
Jika sudah klik Save.
Firebase Firestore

Setelah memiliki data pada Firestore, sekarang kita dapat
menampilkannya pada aplikasi. Pertama, tambahkan
package cloud_firestore ke dalam project. Setelah itu buat
instance Firestore pada berkas di mana Anda
membutuhkannya. Dalam kasus ini kita akan gunakan pada
ChatPage.
Aplikasi Chat

Selanjutnya ubah widget Placeholder pada ChatPage dengan
StreamBuilder. Kenapa kita menggunakan widget ini?
Jawabannya karena query dari Firestore dikembalikan dalam
bentuk stream. Stream sendiri merupakan aliran data yang
terjadi secara asynchronous. Apa manfaat dari menggunakan
stream? Alih-alih mendapatkan data baru ketika membuat
permintaan, stream akan memberi tahu bahwa ada data baru
yang siap digunakan.
Aplikasi Chat

Cara penggunaan StreamBuilder mirip dengan widget
FutureBuider.
Aplikasi Chat

Pada kode di slide sebelumnya, kita meminta firestore untuk
melakukan query dari collection messages lalu
mengurutkannya berdasarkan data dateCreated. Document Id
dari Firestore tidak dibuat secara berurutan sehingga kita
memerlukan dateCreated untuk mengurutkan data. Metode
snapshots() akan mengembalikan nilai Stream yang nantinya
memberitahukan ketika terjadi perubahan data.
Aplikasi Chat

Lalu parameter builder akan kita isi dengan fungsi untuk
menampilkan widget berdasarkan data snapshot yang
diterima dari Firestore. Pertama kita cek apakah snapshot
memiliki data. Jika tidak, maka tampilkan widget
CircularProgressIndicator untuk memberitahu pengguna
aplikasi sedang melakukan loading.
Aplikasi Chat

Selanjutnya ketika data telah tersedia, kita bisa ambil seluruh dokumen
dari collection yang tadi di-query kemudian menampilkannya sebagai
widget.
Aplikasi Chat

Pada kode di slide sebelumnya, kita mengonversi setiap data message
yang diterima menjadi widget MessageBubble. Kemudian tampilkan
list MessageBubble yang telah dibuat sebelumnya ke dalam ListView.
Pada ListView di atas kita tambahkan parameter reverse agar susunan
ListView terbalik dan dimulai dari bawah.
Aplikasi Chat

Sekarang seluruh kode widget StreamBuilder akan seperti berikut:
Aplikasi Chat

Jalankan aplikasi. Seharusnya
aplikasi sudah berhasil
menampilkan data pesan dari
Firestore.
Aplikasi Chat

Nice! Aplikasi kita telah berhasil
menampilkan data dari Firestore.
Namun, ada satu masalah di mana
seluruh pesan memiliki tampilan
yang sama, padahal idealnya pesan
yang dikirim oleh pengguna harus
ditampilkan berbeda. Mari ubah
kode kita untuk menjalankan
pengecekan siapa yang
mengirimkan pesan.
Aplikasi Chat

Ubah widget ChatPage agar menjadi stateful widget. Ini karena kita
membutuhkan lifecycle dari widget untuk mendapatkan data pengguna
di awal sebelum widget dibangun. Tambahkan metode initState()
dengan kode seperti berikut:
Aplikasi Chat

Kemudian buat metode
getCurrentUser() untuk
mendapatkan data pengguna
yang login ke dalam aplikasi.
Aplikasi Chat

Masuk ke widget MessageBubble
lalu tambahkan satu properti atau
parameter bertipe boolean untuk
menunjukkan siapa pengirim
pesan.
Aplikasi Chat

Sesuaikan tampilan bubble berdasarkan pengirim pesan.
Aplikasi Chat

Terakhir, tambahkan argumen dari parameter MessageBubble pada
ChatPage.
Aplikasi Chat

Tampilan aplikasi akan menjadi seperti berikut:
Aplikasi Chat

Sekarang kita akan menambahkan fitur untuk mengirimkan pesan dan
menyimpan datanya ke dalam Firestore. Caranya cukup sederhana. Pertama,
siapkan controller dari TextField().
Aplikasi Chat

Tambahkan kode berikut ketika tombol Send diklik:
Aplikasi Chat

Uji coba aplikasi Anda untuk
mengirimkan pesan. Anda bisa
memeriksa pada konsol Firebase
apakah data telah masuk dalam
database.
Hasil Project

Pertemuan 5 s.d. 7
PalComTech

State, API, State Management, Provider
PERTEMUAN 5 s.d.
7

Highlight
• State
• API
• State Management
• Provider

Sebelum membahas kedua jenis widget, kita harus berkenalan terlebih dahulu
dengan istilah State. Kenapa demikian? Widget kita akan terus berurusan
dengan State. Lalu apa itu State? Untuk teman-teman dengan background
frontend web developer, tentu tak akan asing dengan istilah State ini, terutama
menggunakan framework ReactJS. Tetapi untuk Anda tanpa background
tersebut tidak perlu risau. State tidaklah sulit untuk dimengerti. Jadi State
adalah data yang ada pada suatu widget. Widget menyimpan data yang
nantinya dapat berubah sesuai interaksi pengguna.
State

Setelah mengenal apa itu state, maka yang pertama kita
akan bahas adalah StatelessWidget. StatelessWidget
adalah widget yang nilai state-nya tidak dapat berubah
(immutable) maka widget tersebut lebih bersifat statis
dan memiliki interaksi yang terbatas.
StatelessWidget

Sekarang kita akan membuat sebuah Widget sederhana:
StatelessWidget

Kebalikan dari StatelessWidget, StatefulWidget ialah
widget yang state-nya dapat berubah-ubah nilainya,
yang berarti StatefulWidget bersifat dinamis dan memiliki
interaksi yang tak terbatas.
StatelessWidget

Penulisan StatefulWidget sangat berbeda dengan
StatelessWidget, berikut penulisannya:
StatefulWidget

Contoh di slide sebelumnya adalah cara penulisan
StatefulWidget. Seperti yang kita lihat, penulisan StatefulWidget
lebih panjang. Tetapi yang harus diperhatikan adalah properti
dari setiap class-nya.
Pada class ContohStateful propertinya hanya berupa parameter
ketika memanggil ContohStateful, parameter tersebut tidak wajib
ada. Sedangkan pada class _ContohStatefulState, properti
_dataState merupakan state yang sebenarnya. Kita akan
mengubah nilai _dataState.
StatefulWidget

Misalnya kita coba membuat contoh StatefulWidget
sederhana:
StatefulWidget

Letakkan kode di slide sebelumnya setelah
StatelessWidget Heading yang telah kita buat
sebelumnya lalu panggil StatefulWidget BiggerText pada
MyApp.
StatefulWidget

Maka hasilnya akan seperti berikut:
StatefulWidget

Ketika tombol "Perbesar" ditekan, text "Hello world!"
akan membesar karena state _textSize diubah nilainya.
Mengubah nilai state harus dilakukan pada fungsi
setState seperti berikut:
StatefulWidget

Dalam membuat aplikasi mobile, kemungkinan besar Anda
akan membutuhkan data yang berasal dari cloud atau internet
(data yang bersifat dinamis). Di sisi lain, Anda juga perlu
membuat aplikasi yang dapat menyimpan data ke cloud.
Untuk menjembatani proses antara server dengan client
(aplikasi) dapat memanfaatkan layanan yang bernama API.
API

API atau Application Programming Interface adalah sekumpulan perintah, fungsi, serta
protokol yang dapat digunakan oleh programmer saat membangun perangkat lunak
tertentu. Dengan kata lain, API adalah sebuah penghubung antara suatu aplikasi untuk
dapat berinteraksi dengan aplikasi lainnya. Jika kita ibaratkan pada pengambilan data
dari internet, API adalah sebuah jembatan antara server dengan klien (aplikasi yang
akan kita bangun). Secara umum format response dari REST API ini adalah berbentuk
JSON. Berikut adalah analoginya.
API

Bisa kita lihat dari gambar di slide sebelumnya bahwa aplikasi
yang dibuat oleh Flutter (klien) melakukan request terhadap
server melalui atau dijembatani oleh API. Kemudian, dari sisi
server memberikan respon ke aplikasi Flutter yang nantinya
akan ditampilkan pada platform Android, iOS, Web, atau
Desktop dan dapat diakses oleh user.
API

Sebelumnya Anda sudah mengetahui tentang apa itu API dan juga
bagaimana cara interaksi antara klien dan server pada Flutter. Kemudian
Anda juga sudah mengetahui format response dari sebuah API adalah
berbentuk JSON.
Lalu sebenarnya apa JSON itu? JSON (JavaScript Object Notation)
merupakan format yang menyimpan informasi terstruktur dan biasanya
digunakan untuk melakukan transfer data antara server dengan klien pada
suatu proses yang disebut dengan serialisasi.
JSON Parsing

JSON merupakan bagian (subset) dari Javascript (seperti dari namanya)
dan juga bisa dibaca dengan berbagai macam bahasa pemrograman
seperti C, C++, C#, Java, Javascript Perl, Dart, dan banyak lagi.
Hal ini yang membuat JSON menjadi format pertukaran data antar aplikasi
yang ideal. Karena sangat mudah dibaca dan ringan, JSON juga
memberikan alternatif lebih baik dari XML (eXtensible Markup Language)
dan membutuhkan formatting yang tidak banyak.
JSON Parsing

Ada dua elemen inti dari objek JSON, yaitu Key dan Value. Key
harus dalam bentuk string dan juga berisi urutan karakter yang
diapit oleh tanda kutip. Value adalah tipe data JSON yang valid
dan dapat berbentuk array, object, string, boolean, angka, atau
null. Objek (object) JSON diawali dan diakhiri dengan kurung
kurawal {}. Di dalam kurung kurawal tersebut dapat berisi dua
atau lebih key/value dengan tanda koma yang memisahkan
keduanya. Sedangkan tiap key diikuti oleh simbol titik dua untuk
membedakannya dengan value.
JSON Parsing

Berikut adalah contohnya:
JSON Parsing

Pada contoh tersebut ada tiga pasang key/value.
Pertama id, name, dan address adalah key, sedangkan 167, R Rifa
Fauzi Komara, dan Jakarta adalah value.
Pada contoh tersebut semua value bertipe data String.
JSON Parsing

Ada enam tipe data dasar yang bisa dipakai untuk membuat JSON yaitu:
Strings
Numbers
Objects
Arrays
Booleans (true atau false)
null
Secara lebih luas value juga dapat berisi tipe data yang lebih kompleks
misalnya JSON object atau JSON array.
JSON Parsing

Setelah kita mengetahui tentang JSON, sekarang kita akan coba
menguraikannya ke dalam bahasa pemrograman Dart untuk
dijadikan sebuah kelas model yang bernama User.
JSON Parsing

Pada kelas model tersebut bisa kita lihat tiga properti yaitu id,
name, dan address. Kemudian pada kelas tersebut juga kita
membuat konstruktornya dengan parameter sesuai properti.
Selanjutnya kita juga akan memetakan anggota kelas ini
menjadi JSON object. Untuk itu perlu dibuatkan suatu metode
factory. Menurut dokumentasi Dart, kita menggunakan factory
saat akan mengimplementasikan konstruktor yang tidak selalu
membuat instance baru dari kelasnya.
JSON Parsing

Di sini, kita membuat metode factory yang disebut User.fromJson.
Tujuannya adalah untuk memudahkan pembuatan kelas User yang
diawali dengan JSON object. Metode ini di Dart bernama Named
Constructor.
JSON Parsing

Kemudian jika kita lihat pada value dari Map, kita menggunakan
tipe dynamic. Kenapa demikian? Sebabnya, kita tidak akan
pernah tahu data yang dihasilkan JSON akan bertipe data apa.
Kebetulan untuk contoh sekarang semua nilai bertipe data
String, tetapi pada kenyataannya nilai dari JSON akan selalu
bervariasi tipe datanya, seperti String, Integer, Boolean, dll.
Demi mengatasi hal tersebut, maka sangat cocok kita memilih
tipe dynamic sebagai value dari Map tersebut.
JSON Parsing

Berikut ini adalah kode lengkapnya:
JSON Parsing

Ketika kita membuat aplikasi yang kompleks, terkadang kita
akan berhadapan dengan data yang kompleks pula. Sebut saja
data yang begitu banyak dan juga tipe data dari setiap value-nya
yang bervariasi. Untuk mendukung hal tersebut, JSON juga
dapat menyimpan objek bersarang (JSON Object) maupun array
bersarang (JSON Array). Seperti data lainnya objek atau array
ini dapat disimpan ke dalam sebuah key.
Dynamic JSON

Data dapat dimasukkan ke dalam format JSON menggunakan
array JavaScript sebagai sebuah value. JavaScript
menggunakan kurung siku [ ] di awal dan akhir sebuah array.
Kemudian Array juga adalah sebuah koleksi turunan dan
memiliki tipe data yang berbeda-beda. Kita dapat menggunakan
array saat bekerja dengan banyak data yang dapat
dikelompokkan, seperti hobi yang dimiliki oleh seorang user
misalnya.
JSON Array

Setelah kita membahas tentang array bersarang, berikut adalah
contohnya yang dapat dilihat:
JSON Array

Key "hobbies" dapat menggunakan array untuk menyimpan data yang
dimiliki oleh user berupa dua kategori hobi. Kita tahu bahwa data tersebut
adalah array karena terdapat kurung siku [ ] di awal dan akhir dari value
“hobbies”.
JSON Array

Menggunakan data bersarang di dalam format JSON memungkinkan kita untuk bekerja pada
data yang lebih kompleks. Sekarang kita akan melakukan konversi data JSON menjadi sebuah
kelas model.
1. class User {
2. String id;
3. String name;
4. String address;
5. List<String> hobbies;
6.
7. User({required this.id, required this.name, required this.address, required this.hobbies});
8.
9. factory User.fromJson(Map<String, dynamic> json) => User(
10. id: json["id"],
11. name: json["name"],
12. address: json["address"],
13. hobbies: List<String>.from(json["hobbies"].map((x) => x)),
14. );
15. }
JSON Array

Untuk melakukan parsing data JSON Array seperti pada
contoh di atas, kita bisa melakukannya dengan cara
List<String>.from(...) dan di dalam tanda kurung tersebut kita
melakukan proses mapping dari data array. Jika kita
perhatikan pada contoh JSON di atas, JSON Array tersebut
bertipe data String semua. Jadi kita tidak perlu membuat
kelas model lainnya dari tiap-tiap itemnya tersebut.
JSON Array

Pada contoh JSON di slide sebelumnya kita ada
menambahkan key “socialMedia”, key tersebut merupakan
JSON objek dan di dalamnya terdapat key “instagram” dan
“twitter”. Seperti data lainnya koma juga dipakai untuk
memisahkan antar elemen objek JSON.
JSON Object

Setelah kita mengetahui format dari JSON object, sekarang
kita akan melakukan konversi data JSON menjadi sebuah
kelas model.
JSON Object

Adakalanya kita akan membuat sebuah aplikasi yang
menjalankan suatu proses yang membutuhkan waktu cukup
lama. Untuk menangani hal ini di Flutter/Dart, kita dapat
menggunakan Future. Future memungkinkan Anda
menjalankan pekerjaan secara asynchronous agar tidak
memblokir threads lainnya. Contohnya seperti threads UI.
Future

Future didefinisikan persis seperti fungsi dalam Dart. Ia bisa mengembalikan
sebuah nilai ataupun tidak. Jika Anda ingin mengembalikan suatu nilai dari
Future, maka Anda harus menambahkan tipe ke dalam Future tersebut.
Sebabnya, Future ini merupakan kelas abstrak dengan tipe generik Future<T>
yang artinya Anda dapat menambahkan tipe apa pun ke dalam Future seperti
tipe data, class, objek, dsb. Jika Anda tidak ingin mengembalikan nilai, cukup
tidak menambahkan <> pada fungsi yang akan Anda buat, artinya fungsi
tersebut tidak akan mengembalikan nilai apapun.
Future

Ada dua cara untuk menjalankan Future dan menggunakan nilai yang
dikembalikannya. Jika mengembalikan nilai apa pun, cara paling umum
adalah dengan menambahkan await pada Future agar dapat
menunggu terlebih dahulu proses pengembalian nilainya.
Future

Terkadang Anda tidak ingin mengubah fungsi menjadi Future atau
menandainya sebagai asynchronous atau async, jadi cara lain untuk
menangani Future adalah dengan menggunakan fungsi .then.
Dibutuhkan sebuah fungsi yang akan dipanggil dengan tipe nilai Future
Anda seperti berikut:
Future

Future memiliki caranya sendiri dalam menangani kesalahan. Ketika
melakukan pemanggilan .then, selain meneruskan callback, Anda juga
bisa meneruskan fungsi ke dalam onError yang akan dipanggil dengan
kesalahan yang dikembalikan dari Future Anda.
1. // Fungsi Future
2. Future<bool> myTypedFuture() async {
3. await Future.delayed(Duration(seconds: 1));
4. return Future.error('Terjadi kesalahan');
5. }
1. // Fungsi yang menjalankan Future
2. void runMyFuture() {
3. myTypedFuture().then((value) {
4. // Run extra code here
5. }, onError: (error) {
6. print(error);
7. });
8. }
9.
Penanganan Error

1. // Kode di UI
2. FlatButton(
3. child: Text('Run Future'),
4. onPressed: () {
5. runMyFuture();
6. },
7. ),
8.
9. // Hasilnya
10. flutter: Terjadi kesalahan
Jika Anda menjalankan kode di atas, Anda akan melihat pesan 'Terjadi
kesalahan' yang dicetak setelah 1 detik. Jika Anda ingin menangani
dan menangkap eror secara eksplisit dari Future, Anda juga dapat
menggunakan fungsi khusus yang disebut catchError.
Penanganan Error

Saat menangani kesalahan di Future, Anda tidak perlu selalu
mengembalikan Future.error. Sebagai gantinya Anda juga bisa
mengirimkan Exception dan itu akan muncul di dalam callback
.catchError atau onError.
Penanganan Error

Anda juga dapat menggabungkan await dan .catchError. Anda bisa
melakukan await pada Future dan menggunakan callback .catchError
daripada menggabungkannya. Dengan cara ini nilai yang dikembalikan
adalah null, tetapi Anda memiliki kesempatan untuk menangani
kesalahan ini tanpa membungkusnya dengan try/catch.
Penanganan Error

Tidak seperti widget Flutter pada umumnya, secara umum FutureBuilder
adalah widget khusus pada Flutter yang dibangun atas dasar callback
(return) secara asynchronous dari sebuah kelas Future. Sehingga,
FutureBuilder sangat cocok untuk membuat sebuah tampilan yang
membutuhkan widget-widget di mana sumber datanya kita dapat dari
internet atau dari file internal.
Pada dasarnya tidak ada yang membatasi kapan Anda akan
mengimplementasikan widget FutureBuilder pada aplikasi Flutter. Namun
yang perlu Anda ketahui adalah bagaimana cara kerja dari widget
FutureBuilder supaya Anda paham lantas mengimplementasikan dengan
tepat.
FutureBuilder

Pada kasus sesungguhnya, widget FutureBuilder akan digunakan ketika membuat
tampilan yang membutuhkan data dari internet. Jika cara implementasinya tidak tepat,
maka penggunaan widget FutureBuilder akan menyebabkan banyak masalah jika kita
tidak mengelola event-nya dengan benar.
Untuk itu Anda perlu tahu bahwa FutureBuilder adalah widget yang dibangun ulang
ketika Anda memanggil fungsi setState() seperti halnya widget lain yang berada dalam
metode build(). Hanya saja jika penggunaan FutureBuilder tidak Anda pisah dengan
benar akan mengakibatkan perubahan data pada widget yang bukan merupakan
FutureBuilder. Metode pun menjadi tidak efektif. Seperti apa? Salah satu contohnya
adalah performance aplikasi jadi drop bahkan worst case scenario-nya bisa
menyebabkan OOM (Out Of Memory). Maka dari itu, memahami widget FutureBuilder
sangatlah penting agar penggunaan widget FutureBuilder pada aplikasi Anda menjadi
efektif.
FutureBuilder

Untuk lebih memahami lebih
lanjut mengenai widget
FutureBuilder, silakan
perhatikan contoh berikut:
FutureBuilder

Seperti yang dijelaskan sebelumnya, untuk melakukan perintah HTTP
Request, Anda membutuhkan package tambahan. Ini mencakup
mengambil, mengirim, mengubah, maupun menghapus data (atau
biasa kita kenal dengan istilah CRUD) yang bersumber dari internet.
Salah satu package untuk melakukan http request yang disediakan
langsung oleh tim Flutter adalah http package.
Http package ini berisi sekumpulan fungsi dan kelas tingkat tinggi yang
memudahkan penggunaan dalam mengelola sumber daya HTTP.
Package ini juga sudah mendukung multi-platform yang meliputi
aplikasi mobile (Android dan iOS), desktop, dan web browser.
HTTP Package

Setelah mengenal tentang http package, langkah selanjutnya kita akan
membuat aplikasi sederhana untuk melakukan proses pengambilan
data yang bersumber dari internet.
Langkah-langkah yang akan kita kerjakan, antara lain:
1. Menambahkan http package.
2. Membuat network request.
3. Mengonversi JSON menjadi model.
4. Menampilkan data pada widget.
HTTP Package

1. Langkah pertama yang harus Anda lakukan adalah membuat
projek Flutter dan berikan nama misalnya simple_http_request.
2. Kemudian untuk menggunakan http package, tambahkan package
tersebut sebagai dependensi pada proyek Flutter yang telah
dibuat. Anda harus menambahkannya pada file pubspec.yaml.
HTTP Package

3. Dalam contoh ini, Anda akan mengambil data dari suatu API yang
bersumber dari internet dengan format JSON. Anda dapat
melakukan request data menggunakan http.get(). Berikut adalah
contoh sederhananya.
Seperti yang Anda lihat, fungsi http.get() mengembalikan kelas
Future yang berisikan Response.
HTTP Package

4. Sulit rasanya menggunakan kelas http.Response jika informasi
atau data yang diberikan dalam format JSON sangatlah banyak.
Alangkah baiknya jika Anda membuka API yang kita pakai
https://jsonplaceholder.typicode.com/albums/1.
5. Setelah membuka API, lakukanlah konversi terlebih dahulu data
JSON pada kelas http.Response menjadi sebuah model yang
sesuai dengan tipe data Anda.
HTTP Package

Langkah pertama untuk
melakukan konversi JSON
menjadi kelas model
adalah dengan membuat
class yang sesuai dengan
struktur JSON. Pada
contoh berikut Anda akan
melihat kelas Album yang
berisi data mengenai user
beserta constructor-nya
(factory).
1. class Album {
2. final int userId;
3. final int id;
4. final String title;
5.
6. Album({
7. required this.userId,
8. required this.id,
9. required this.title,
10. });
11.
12. factory Album.fromJson(Map<String, dynamic> json) {
13. return Album(
14. userId: json['userId'],
15. id: json['id'],
16. title: json['title'],
17. );
18. }
19. }
HTTP Package

6. Selanjutnya perbarui fungsi fetchAlbum() agar dapat
mengembalikan nilai Future<Album>. Untuk melakukannya, Anda
harus meng-import untuk packagedart:convert dan httppada
bagian paling atas file.
HTTP Package

Di sini kita mewakili package http dengan variabel http dengan
menambahkan keyword as seperti contoh di atas. Dengan demikian
kita dapat dengan mudah memanggil fungsi-fungsi yang disediakan
oleh package http tanpa harus melakukan inisiasi terlebih dahulu,
melainkan dapat langsung memanggilnya seperti contoh berikut.
HTTP Package

7. Ubah isi respon menjadi JSON Map dengan fungsi json.decode().
Jika server mengembalikan respon "OK" dengan kode status 200,
ubah JSON tersebut menjadi model Album menggunakan metode
.fromJson() yang sudah dibuat di kelas Album. Jika server
mengembalikan respons selain 200, Anda dapat mengirimkan
Exception untuk menandakan bahwa data Album gagal
didapatkan. (Bahkan dalam kasus respon servernya adalah "404
Not Found", Anda dapat mengirimkan Exception. Jangan sampai
mengembalikan nilai berupa null).
HTTP Package

Berikut adalah hasilnya:
1. Future<Album> fetchAlbum() async {
2. final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
3.
4. if (response.statusCode == 200) {
5. return Album.fromJson(json.decode(response.body));
6. } else {
7. throw Exception('Failed to load album');
8. }
9. }
HTTP Package

8. Panggil fungsi
fetchAlbum() di dalam
metode initState().
Metode initState()ini akan
dipanggil hanya sekali
ketika pertama kali widget
dibangun.
*Note: tidak disarankan untuk
melakukan pemanggilan API di
dalam metode build().
HTTP Package

Flutter memanggil metode build() setiap kali diperlukan untuk
mengubah suatu tampilan. Sebagai contoh, jika Anda memasukan
fungsi pemanggilan API di dalam metode build() kemudian di dalam
metode tersebut terdapat widget button yang memanggil metode
setState(), maka ketika user mengeklik button tersebut metode build()
akan selalu dipanggil dengan artian proses pemanggilan API pun akan
terus dilakukan. Alhasil, performance aplikasi Anda menjadi drop
karena harus me-refresh semua widget dan proses yang ada di dalam
metode build().
HTTP Package

9. Ketika Anda ingin mengambil data dan menampilkannya pada
aplikasi, Anda dapat menggunakan widget FutureBuilder. Widget
FutureBuilder dapat memudahkan Anda untuk melakukan proses
secara asynchronous.
Untuk menggunakan widget FutureBuilder, Anda harus
memberikan dua parameter pada FutureBuilder: parameter future
berisi Future yang ingin Anda kerjakan. Kemudian parameter
builder akan memberitahu Flutter apa yang harus ditampilkan,
tergantung pada status Future seperti: loading, success, atau
error.
HTTP Package

1. FutureBuilder<Album>(
2. future: _futureAlbum,
3. builder: (context, snapshot) {
4. var state = snapshot.connectionState;
5. if (state != ConnectionState.done) {
6. return Center(child: CircularProgressIndicator());
7. } else {
8. if (snapshot.hasData) {
9. return Text(snapshot.data!.title);
10. } else if (snapshot.hasError) {
11. return Center(child: Text("${snapshot.error}"));
12. } else {
13. return Text('');
14. }
15. }
16. },
17. ),
HTTP Package

Bisa Anda lihat contoh di atas kita melakukan pengecekan pada kelas enum
ConnectionState. Jika state bukan berada pada kondisi done maka widget
yang akan ditampilkan adalah CircularProgressIndicator. Jika state berada
pada kondisi done (else statement) yang berarti suatu proses berhasil
dijalankan, maka akan melakukan pengecekan data terlebih dahulu
menggunakan if statement.
Perlu diperhatikan bahwa nilai dari snapshot.hasData hanya menampilkan
nilai true ketika snapshot berisi nilai data bukan null. Inilah sebabnya mengapa
fungsi fetchAlbum() harus menjalankan else statement bahkan dalam kasus
jika respon server adalah "404 Not Found". Jika fungsi fetchAlbum()
mengembalikan nilai null maka yang akan ditampilkan adalah teks kosong
sama halnya jika tidak masuk kedalam state manapun.
HTTP Package

10.Jika sudah, silakan jalankan aplikasi Anda. Berikut adalah kode
lengkapnya:
HTTP Package

10.Berikut adalah hasilnya
HTTP Package

State management adalah sebuah cara untuk mengatur data /
state kita bekerja, bisa juga untuk memisahkan antara logic dan
view, dimana logic tersebut juga bisa reusable.
State Management

State manajement memang merupakan salah satu topik
pembahasan yang sangat kompleks apabila kita ingin
memperdalam tentang flutter. Namun, untuk menggunakan
state management, kamu dapat memanfaat kan beberapa
package state management berikut.
1. Provider
2. Riverpod
3. Redux
4. BLoC
5. GetX
Jenis-jenis State Management

Provider dibuat oleh Remi Rousselet, bertujuan untuk
menangani keadaan sebersih mungkin. Di dalam Provider,
widget mendengarkan perubahan status dan memperbarui
segera setelah diberitahukan.
Oleh karena itu, alih-alih membuat ulang seluruh pohon widget
saat ada perubahan status, hanya widget yang terpengaruh
saja yang diubah, sehingga mengurangi jumlah pekerjaan dan
membuat aplikasi berjalan lebih cepat dan lancar.
Provider

Tiga komponen utama Provider adalah:
1. ChangeNotifier di Flutter,
2. ChangeNotifierProvider,
3. dan widget Consumer.
Provider

1. Buatlah sebuah project flutter.
2. Tambahkan package provider dengan membuka terminal
dan ketik command berikut:
3. Buatlah struktur folder menjadi seperti ini:
Cara Menggunakan Provider
flutter pub add provider

4. Buat file bernama data_service.dart di dalam direktori
layanan dan tambahkan kode di atas. Di sini kita
menggunakan perpustakaan http untuk membuat
permintaan GET dan kita perlu import 'dart:convert' untuk
memetakan respons json kita ke model yang akan kita buat
selanjutnya.

data_service.dart

5. Buat kelas model
Respon json yang kita dapatkan dengan memanggil api di
atas ( https://jsonplaceholder.typicode.com/comments/1 )
adalah

data_model.dart

6. Buat data_provider.dart di dalam direktori penyedia dan
tambahkan kode di atas. Di sini kami menggunakan mixin
ChangeNotifier dari perpustakaan penyedia. Karena membuat
panggilan api adalah proses yang berat dan untuk melakukannya
secara asinkron, kami menggunakan kata kunci async di depan
fungsi getData() .
Untuk menunggu hingga respon datang, gunakan kata kunci
menunggu sambil memanggil metode layanan. Panggil
notifyListeners() setelah data ditetapkan ke variabel data untuk
memberi tahu pendengar tentang perubahan data yang terjadi di
dalam penyedia.

data_provider.dart

7. Buat kelas HomeScreen yang menggunakan StatefulWidget
home_screen.dart

home_screen.dart

8. Atur main.dart

Hasil

Pertemuan 3 & 4
PalComTech

Navigasi & Routing
PERTEMUAN
3&4

Highlight
• Navigasi
• Routing

Navigasi
Dalam pemrograman Android kita mengenal Intent
lalu pada pemrograman website terdapat tag untuk
berpindah dari satu page ke page lain. Pada Flutter
kita akan menggunakan sebuah class bernama
Navigator. Dengan Navigator ini kita akan berpindah
dari satu screen ke screen lainnya. Berikut ini
contohnya:

Navigasi
Perlu kita ketahui bahwa konsep navigasi pada Flutter
mirip sekali dengan pemrograman Android, yakni
bahwa ketika berpindah screen/activity akan menjadi
tumpukan (stack). Jadi ketika berpindah dari satu
screen ke screen lain (push), maka screen pertama
akan ditumpuk oleh screen kedua. Kemudian apabila
kembali dari screen kedua ke pertama, maka screen
kedua akan dihapus (pop).

Navigasi
Kita akan membuat kode
seperti contoh di slide
sebelumnya. Kita
membutuhkan halaman
kedua yang kodenya
seperti berikut:

Lalu, kode untuk halaman
pertama akan seperti
berikut:
Navigasi

Untuk berpindah ke screen kedua kita akan
menggunakan sebuah method Navigator.push, method
tersebut ditulis seperti berikut:
Navigator.push

Pada kode sebelumnya Navigator.push memiliki dua
parameter. Pertama ialah context dan yang kedua Route.
Parameter context ini merupakan variabel BuildContext yang
ada pada method build. Parameter route berguna untuk
menentukan tujuan ke mana kita akan berpindah screen.
Route tersebut kita isikan dengan MaterialPageRoute yang di
dalamnya terdapat builder yang nantinya akan diisi dengan
tujuan screen-nya
Navigator.push

Maka untuk melakukan perpindahan screen kita akan membuat event
onPressed pada tombol ElevatedButton yang ada pada screen pertama:
Navigator.push

Setelah dapat berpindah ke screen lain maka kita akan
belajar menggunakan Navigator.pop untuk kembali ke screen
sebelumnya. Penulisan Navigator.pop seperti berikut.
Navigator.pop

Untuk kembali dari screen
kedua kita dapat menambahkan
event onPressed pada
OutlinedButton yang ada pada
screen kedua dan kita
masukkan Navigator.pop pada
event, seperti berikut:
Navigator.pop

Seringkali beberapa halaman pada aplikasi perlu saling
berinteraksi dengan berbagi dan saling mengirimkan data.
Pada Flutter kita memanfaatkan constructor dari sebuah class
untuk mengirimkan data antar halaman.
Sebagai contoh kita memiliki pesan yang akan dikirimkan dari
First Screen menuju Second Screen.
Mengirimkan Data Antar Halaman

Untuk mengirimkan variabel
message tersebut ke Second
Screen, maka kita akan
mengirimkannya sebagai
parameter dari constructor
kelas SecondScreen seperti
berikut:

Agar Second Screen bisa menerima data tersebut, maka kita
perlu mengubah default constructor-nya dan menambahkan
variabel untuk menampung datanya.

Kemudian kita dapat menampilkan data yang diterima melalui
variabel yang kita buat.

Sehingga tampilan Second
Screen akan menampilkan
pesan dari First Screen
seperti berikut:

Sebuah aplikasi tentunya tidak hanya memiliki satu halaman.
Pengguna seharusnya dapat berpindah-pindah halaman
untuk menampilkan informasi yang berbeda. Di dalam Flutter,
screen atau halaman juga dikenal dengan istilah routes.
Kembali lagi pada tagline “everything is a widget”, begitu pula
dengan routes.
Routing

Perlu kita ingat kembali bahwa konsep navigasi pada
Flutter adalah ketika berpindah screen/activity akan
menjadi tumpukan (stack). Jadi ketika berpindah ke
screen lain (push), maka screen pertama akan ditumpuk
oleh screen kedua. Kemudian apabila kembali dari
screen kedua ke pertama, maka screen kedua akan
dihapus (pop).
Routing

Namun, ketika Anda memerlukan navigasi ke suatu
halaman yang sama dari banyak tempat, hal ini akan
menghasilkan duplikasi kode. Di sinilah Anda dapat
memanfaatkan named route. Konsep named route ini
mirip dengan sebuah website di mana memiliki route
atau endpoint untuk merujuk ke suatu halaman,
contohnya seperti /login atau /detail.
Routing

Mari kita langsung
mengimplementasikannya ke
dalam kode. Buatlah project
aplikasi Flutter dengan tampilan
seperti berikut:
Routing

Kode untuk tampilan di slide sebelumnya adalah seperti berikut:
Routing

Selanjutnya untuk mendefinisikan route temukan widget MaterialApp
lalu tambahkan properti initialRoute dan routes.
Jika Anda menggunakan initialRoute, pastikan Anda tidak
menggunakan properti home.
Routing

Untuk melakukan navigasi ke route, Anda dapat memanggil method
Navigator.pushNamed dengan dua parameter yaitu context dan nama
route yang ingin dituju. Contohnya seperti berikut:
Normal Navigation

Untuk kembali ke halaman sebelumnya caranya masih sama, yaitu
menggunakan Navigator.pop.
Normal Navigation

Lalu bagaimana jika kita ingin mengirimkan data ke sebuah halaman?
Caranya, cukup menambahkan satu parameter atau properti lagi pada
method pushNamed bernama arguments.
1. ElevatedButton(
2. child: Text('Navigation with Data'),
3. onPressed: () {
4. Navigator.pushNamed(context,
'/secondScreenWithData', arguments: 'Hello from First
Screen!');
5. },
6. ),
Navigation with data

Untuk mendapatkan
argumen yang
dikirimkan pada route
tujuan kita
menggunakan method
ModalRoute.of().
1. class SecondScreenWithData extends StatelessWidget {
2. final String data;
3. const SecondScreenWithData(this.data, {Key? key}) : super(key: key);
4.
5. @override
6. Widget build(BuildContext context) {
7. return Scaffold(
8. body: Center(
9. child: Column(
10. mainAxisAlignment: MainAxisAlignment.center,
11. children: <Widget>[
12. Text(data),
13. ElevatedButton(
14. child: Text('Back'),
15. onPressed: () {
16. Navigator.pop(context);
17. },
18. ),
19. ],
20. ),
21. ),
22. );
23. }
24. }
Navigation with data

Dalam beberapa kasus, Anda mungkin ingin mengembalikan
data dari halaman baru. Misalnya, setelah pengguna
memberikan sebuah input, Anda ingin mengolahnya di
halaman sebelumnya. Method Navigator.pop() selain untuk
menutup halaman juga berguna untuk mengembalikan nilai.
Return data from a screen

Pada contoh ini mari kita buat halaman dengan TextField dan Button.

Selanjutnya kita akan mengembalikan nilai dari input pengguna.

Kembali ke FirstScreen, kita akan membuat Navigasi untuk menuju ke
ReturnDataScreen. Jika Anda perhatikan, method untuk push pada
navigation ini sebenarnya merupakan objek Future. Artinya, metode ini
bisa mengembalikan nilai di masa depan.

Oleh karena itu, kita dapat menyimpan nilainya ke dalam suatu
variabel. Jangan lupa untuk menggunakan async dan await untuk
menunggu nilai yang dikembalikan. Jika Anda belum familiar dengan
Future, async, dan await silakan mendaftar ke kelas Memulai
Pemrograman dengan Dart.

Hasil Return data from a screen

Kita telah membahas bahwa navigasi pada Flutter membuat halaman
menjadi bertumpuk (stacked). Namun, Anda juga memiliki opsi untuk
membuat halaman baru dengan menggantikan stack yang sedang
terbuka. Cara ini umum digunakan pada halaman seperti splash
screen atau login di mana pengguna tidak perlu kembali ke halaman
tersebut ketika menekan tombol back.
Replace Screen

Caranya, gunakan metode
pushReplacement atau
pushReplacementNamed jika
Anda menggunakan named
routes.
1. ElevatedButton(
2. child: Text('Replace Screen'),
3. onPressed: () {
4. Navigator.pushNamed(context, '/replacementScreen');
5. },
6. ),
7.
8. ...
9.
10. /// replacement_screen.dart
11. class ReplacementScreen extends StatelessWidget {
12. @override
13. Widget build(BuildContext context) {
14. return Scaffold(
15. body: Center(
16. child: ElevatedButton(
17. child: const Text('Open Another Screen'),
18. onPressed: () {
19. Navigator.pushReplacementNamed(context, '/anotherScreen');
20. },
21. ),
22. ),
23. );
24. }
25. }
Replace Screen

Halaman AnotherScreen
akan me-replace stack dari
ReplacementScreen.
Sehinga, ketika pengguna
keluar dari AnotherScreen
akan langsung diarahkan ke
FirstScreen.
Replace Screen

Pertemuan 1 & 2
PalComTech

Pengertian, Fungsi, Cara Kerja dan Arsitektur
PERTEMUAN
1&2

Highlight
• Pengantar Pemrograman Client Server
• Fungsi Pemrograman Client Server
• Cara Kerja Pemrograman Client Server
• Arsitektur Pemrograman Client Server

Client Server
Client-server adalah sebuah model arsitektur
komputer yang digunakan dalam jaringan komputer.
Dalam model ini, ada dua jenis komputer: server dan
klien. Server berfungsi sebagai pusat pengelolaan dan
penyimpanan data, sedangkan klien berfungsi
sebagai perangkat yang mengakses data yang
disimpan di server.

Client Server
Contoh penggunaan client-server adalah ketika kita
menggunakan aplikasi email. Kita mengakses aplikasi
email (klien) untuk membaca dan mengirim email.
Data email yang tersimpan dan diakses oleh aplikasi
email berasal dari server email. Dalam hal ini, server
email bertindak sebagai pusat penyimpanan data
email, sedangkan aplikasi email bertindak sebagai
klien yang mengakses data dari server.

Fungsi Client Server
Model client-server memiliki beberapa fungsi, berikut
adalah beberapa di antaranya:
1. Pemisahan Tugas
2. Pusat Pengelolaan data
3. Peningkatan Keamanan
4. Skalabilitas
5. Peningkatan Kinerja

Pemisahan Tugas
Dalam model client-server, tugas dibagi antara klien
dan server. Klien bertanggung jawab untuk membuat
permintaan atau request, sedangkan server
bertanggung jawab untuk memberikan respon atau
response atas permintaan tersebut. Hal ini
memungkinkan kinerja sistem menjadi lebih efisien
dan terstruktur.

Pusat Pengelolaan Data
Dalam model client-server, server berfungsi sebagai
pusat pengelolaan dan penyimpanan data. Hal ini
memungkinkan data dapat disimpan secara terpusat
dan diakses oleh berbagai klien yang terhubung ke
server.

Peningkatan Keamanan
Dalam model client-server, server berperan sebagai
pengatur akses ke data dan dapat menerapkan
kontrol akses dan keamanan untuk memastikan
hanya klien yang sah yang dapat mengakses data
yang terdapat di dalam server.

Skalabilitas
Dalam model client-server, klien dapat ditambahkan
dan dihapus secara fleksibel tanpa mempengaruhi
operasi server. Hal ini memungkinkan sistem menjadi
lebih mudah diupgrade dan diperluas sesuai dengan
kebutuhan.

Peningkatan Kinerja
Dalam model client-server, pemrosesan data dapat
dibagi antara server dan klien. Hal ini memungkinkan
kinerja sistem menjadi lebih cepat dan efisien karena
pemrosesan data dapat dilakukan secara terdistribusi
antara klien dan server.

Cara Kerja Client Server
Dalam konteks basis data, klien membuat halaman
web menggunakan berbagai program atau perangkat
keras yang menyediakan halaman visual yang
menarik atau disebut juga antarmuka pengguna.
Antarmuka pengguna yang bersih dan menarik
memengaruhi jumlah kunjungan pengguna, sehingga
menjadi topik penting bagi pelanggan.

Cara kerja client-server adalah sebagai berikut:
1. Klien membuat permintaan atau request kepada server,
seperti mengakses file atau mengirim data.
2. Permintaan dari klien akan dikirim melalui jaringan ke
server.
3. Server menerima permintaan dari klien dan
memprosesnya.
4. Server kemudian mengirimkan respon atau response
kepada klien.
5. Klien menerima respon dari server dan melakukan
pemrosesan data yang diterima.

Proses ini akan dilakukan berulang-ulang selama klien dan
server masih terhubung dan melakukan komunikasi melalui
jaringan. Dalam proses di atas, klien dan server biasanya
menggunakan protokol komunikasi tertentu seperti HTTP,
FTP, SMTP, dan lainnya.

Keuntungan Client Server
Berikut keuntungan yang diberikan arsitektur client server
bagi pengguna.
1. Menyimpan big data, melalui arsitektur ini client dapat
menyimpan dan mengakses database yang sangat
besar.
2. Menaikkan kinerja, dengan konsep client server
pengguna dapat meningkatkan kinerja akses data
berupa informasi. Kinerja cepat dikarenakan seluruh
data disimpan pada satu server yang multi tasking.

2. Biaya penggunaan hardware atau perangkat keras
menjadi kecil. Penggunaan client server
memungkinkan pengguna tidak perlu membeli hard
drive untuk menyimpan data.
3. Mengurangi biaya komunikasi antar pengguna.

4. Konsisten, melalui konsep ini database yang diberikan
akan meningkatkan konsistensi data. Karena satu data
dapat diakses oleh beberapa user secara bersamaan.
5. Server storage, hanya server saja yang membutuhkan
penyimpanan besar dengan performa yang sesuai
sehingga dapat memberikan kekuatan untuk
mengakses data.

Macam-macam Arsitektur Client Server
Perkembangan dunia server setiap tahun semakin
membaik. Perkembangan server tersebut bertujuan untuk
memberikan fasilitas akses, administrasi, dan keamanan
data yang lebih baik untuk pengguna.
Arsitektur client server memiliki beberapa macam seperti
berikut ini:
1. One Tier / Standalone
2. Two Tier / Client / Server
3. Three Tier
4. Multi Tier

One Tier
Pemrosesan jenis arsitek ini dilakukan melalui
mainframe. Seluruh kode yang berkaitan dengan
aplikasi ditempatkan dan berjalan pada host. Pada
one tier, pemrosesan dilakukan secara terpusat
dengan mesin tunggal atau disebut juga berbasis-
host.

Two Tier
Pemrosesan pada arsitek two tier terjadi pada client
dan server. Aplikasi ini menghubungkan satu server
ke banyak client dengan sebuah jaringan. Aplikasi
ini dapat ditempatkan dengan jarak komputer client
dan server jarak jauh. Prosesnya melalui client
membuat permintaan kemudian server memberikan
kepada client.

Three Tier
Arsitektur ini merupakan pengembangan dari arsitektur two tier
dengan adanya application server. Application berdiri di antara
client dan database server yang berperan sebagai business
process layer. Arsitektur ini dalam pengoperasiannya
membutuhkan bandwidth yang sangat besar untuk bisa diakses
ke banyak client. Kebanyakan aplikasi ini digunakan dengan
application server diletakkan di sisi client dan hanya berfungsi
untuk mengirimkan data ke database server. Model ini secara
garis besar membagi fungsi-fungsi ke dalam beberapa lapisan.
Sehingga aplikasi mendapatkan pembaharuan, skalabilitas serta
keamanan yang baik.

Multi Tier
Metode terakhir yaitu multi tier yang hampir mirip
dengan three tier. Hanya saja pada metode ini akan
dijelaskan mengenai user interface dan data
processing. Penambahan business logic server pada
metode ini memungkinkan application server dapat
terhubung pada application server lainnya.
Kemampuan tersebut digunakan untuk mendapatkan
data dari data server hingga mensuplai servis ke client
application.

Multi Tier
Multi tier digunakan untuk memberikan akses yang
lebih cepat daripada arsitektur – arsitektur lainnya.
Juga memiliki sistem keamanan, administrasi dan
backup data lebih baik. Hanya saja metode ini
membutuhkan biaya yang sangat mahal karena
komputer yang dibutuhkan perlu spesifikasi khusus
untuk menjadi server.

Materi kuliah Pemrograman client server.pdf

Recommandé

Recommandé

Contenu connexe

Similaire à Materi kuliah Pemrograman client server.pdf

Similaire à Materi kuliah Pemrograman client server.pdf (20)

Dernier

Dernier (20)

Materi kuliah Pemrograman client server.pdf