Flutter Json Serialization

&
REST API
Saiful Bahri - Code with Bahri
https://instagram.com/codewithbahri

https://instagram.com/codewithbahri
REST API

Apa itu Rest API ?

REST API adalah antarmuka (interface) yang digunakan dua sistem komputer untuk
bertukar informasi secara aman melalui internet. Sebagian besar aplikasi bisnis harus
berkomunikasi dengan aplikasi internal dan pihak ketiga lainnya untuk melakukan
berbagai kegiatan. Misalnya, untuk pembayaran courses jointsacademy, system joints akan
membuat penagihan dengan mengirim request ke payment gateway dengan data user,
setelah itu system joints akan menerima kode bayar yang dikirim ke user joints via joints
apps, setelah user berhasil payment, system payment gateway akan mengirimkan data ke
system joints dengan data user joints telah berhasil melakukan pembayaran, kemudian
system joints otomatis mengupdate data pembayaran user.. RESTful API mendukung
pertukaran informasi ini karena mengikuti standar komunikasi perangkat lunak yang aman,
andal, dan efisien.

https://instagram.com/codewithbahri
REST API

Apa itu API ?

Application programming interface (API) menentukan aturan yang harus Anda ikuti untuk
berkomunikasi dengan sistem perangkat lunak lain. Pengembang memaparkan atau
membuat API sehingga aplikasi lain dapat berkomunikasi dengan aplikasi mereka secara
terprogram. Misalnya, aplikasi system payment gateway sudah mempunyai API untuk
membuat tagihan otomatis, maka system joints bisa mengakses API tersebut untuk
membuatkan tagihan untuk user joints melalui apps joints. Disini backend joints pun perlu
menyiapkan api untuk menerima request dari joints apps. Jadi prosesnya, joints apps
request ke API backend, backend(system joints) request ke API payment gateway.

https://instagram.com/codewithbahri
REST API

Kita dapat menganggap API sebagai gerbang antara Client dan

Resources di server.
Client
Client adalah pengguna yang ingin mengakses informasi dari server. Client dapat
berupa orang atau sistem software yang menggunakan API. Misalnya, user joints
dengan menggunakan joints apps dapat mengakses data kursus dari sistem
backend joints. joints apps adalah client aplikasi.

https://instagram.com/codewithbahri
REST API

Resources
Resources (sumber daya) adalah informasi yang diberikan oleh aplikasi
kepada client. Resources dapat berupa gambar, video, teks, angka, atau
informasi apa pun. Mesin yang memberikan resources ke client disebut
server. Server menggunakan API untuk berbagi resources dan
menyediakan layanan sambil menjaga keamanan, kontrol, dan autentikasi.
Selain itu, API membantu server menentukan client mana yang
mendapatkan akses ke internal resources tertentu.

https://instagram.com/codewithbahri
REST API

Apa itu REST?

Representational State Transfer (REST) adalah arsitektur perangkat lunak yang
menerapkan persyaratan tentang cara kerja API. REST awalnya dibuat sebagai
pedoman untuk mengatur komunikasi pada jaringan yang kompleks seperti
internet. Kita dapat menggunakan arsitektur berbasis REST untuk mendukung
komunikasi berperforma tinggi dan andal dalam skala besar. Anda dapat
dengan mudah mengimplementasikan dan memodifikasinya, menghadirkan
visibilitas dan portabilitas lintas platform ke sistem API manapun.

https://instagram.com/codewithbahri
REST API

Apa itu REST?

Representational State Transfer (REST) adalah arsitektur perangkat lunak yang
menerapkan persyaratan tentang cara kerja API. REST awalnya dibuat sebagai
pedoman untuk mengatur komunikasi pada jaringan yang kompleks seperti internet.
Kita dapat menggunakan arsitektur berbasis REST untuk mendukung komunikasi
berperforma tinggi dan andal dalam skala besar. Anda dapat dengan mudah
mengimplementasikan dan memodifikasinya, menghadirkan visibilitas dan
portabilitas lintas platform ke sistem API manapun.

API yang mengikuti gaya arsitektur REST disebut REST API.

https://instagram.com/codewithbahri
REST API

Berikut ini adalah beberapa prinsip gaya arsitektur REST:

1. Antarmuka seragam (uniform interface)

Antarmuka yang seragam sangat penting untuk desain layanan REST apa pun. Ini
menunjukkan bahwa server mentransfer informasi dalam format standar. resource yang
diformat disebut representasi dalam REST. Format ini bisa berbeda dari representasi
internal resource pada aplikasi server. Misalnya, server dapat menyimpan data sebagai
teks tetapi mengirimkannya dalam format representasi JSON.

https://instagram.com/codewithbahri
REST API

Statelessness

Dalam arsitektur REST, Statelessness mengacu pada metode komunikasi di mana

server menyelesaikan setiap permintaan client secara independen dari semua
permintaan sebelumnya. Client dapat request resource kapan saja, dan setiap
request tidak memiliki state khusus, atau dengan kata lain diisolasi dari request
lainnya. Batasan desain REST API ini memberi pemahaman bahwa server dapat
sepenuhnya memahami dan memenuhi request setiap saat.

https://instagram.com/codewithbahri
REST API

Layered System

Dalam arsitektur layer system, client dapat terhubung ke perantara

resmi lainnya antara client dan server, dan masih akan menerima
response dari server. Server juga dapat meneruskan request ke server
lain. Anda dapat mendesain layanan REST Anda untuk berjalan di
beberapa server dengan banyak lapisan/layer seperti layer keamanan,
layer aplikasi, dan layer bisnis logic, bekerja sama untuk memenuhi
request dari client. Layer layer ini tidak terlihat oleh client.

https://instagram.com/codewithbahri
REST API

Kemampuan cache (Cacheability)

Layanan REST mendukung caching, yaitu proses menyimpan beberapa respons pada
client atau perantara untuk meningkatkan waktu respons server. Misalnya, Anda
mengunjungi server yang memiliki data yang sama di setiap requestnya. Setiap kali
Anda mengunjungi api tersebut, server harus mengirimkan ulang data. Untuk
menghindari hal ini, klien meng-cache atau menyimpan data ini setelah respons
pertama dan kemudian menggunakan data langsung dari cache. Layanan REST
mengontrol caching dengan menggunakan respons API yang mendefinisikan
dirinya apakah dapat di-cache atau tidak dapat di-cache.

https://instagram.com/codewithbahri
REST API

Kode sesuai permintaan (code on demand)

Dalam gaya arsitektur REST, server dapat memperluas atau menyesuaikan

fungsionalitas klien untuk sementara waktu dengan mentransfer kode
pemrograman perangkat lunak ke klien. Misalnya, saat Anda mengisi formulir
pendaftaran di situs web mana pun, browser Anda segera menyoroti kesalahan
apa pun yang Anda buat, seperti nomor telepon yang salah. Itu dapat dilakukan
karena kode yang dikirim oleh server ke client.

https://instagram.com/codewithbahri
REST API

Manfaat REST API?

Skalabilitas

Sistem yang mengimplementasikan REST API dapat berkembang secara efisien

karena REST mengoptimalkan interaksi klien-server. statelessness menghapus beban
server karena server tidak harus menyimpan informasi permintaan klien sebelumnya.
Caching yang dikelola dengan baik sebagian atau seluruhnya menghilangkan
beberapa interaksi klien-server. Semua fitur ini mendukung skalabilitas tanpa
menyebabkan hambatan komunikasi yang mengurangi kinerja.

https://instagram.com/codewithbahri
REST API

Fleksibilitas

Layanan REST mendukung pemisahan total klien-server. Mereka

menyederhanakan dan memisahkan berbagai komponen server sehingga setiap
bagian dapat berkembang secara mandiri. Perubahan platform atau teknologi
pada aplikasi server tidak mempengaruhi aplikasi client. Kemampuan untuk
melapisi fungsi aplikasi meningkatkan fleksibilitas lebih jauh lagi. Misalnya,
pengembang dapat membuat perubahan pada layer database tanpa menulis
ulang logic aplikasi.

https://instagram.com/codewithbahri
REST API

Independence

REST API tidak bergantung pada teknologi yang digunakan. Anda dapat
menulis aplikasi client dan server dengan berbagai bahasa pemrograman
tanpa mempengaruhi desain API. Anda juga dapat mengubah teknologi di
kedua sisi tanpa mempengaruhi komunikasi.

Contohnya server dibuat menggunakan bahasa python, aplikasi client dibuat

menggunakan flutter.

https://instagram.com/codewithbahri
REST API

Cara kerja REST API?

Fungsi dasar dari REST API sama dengan browsing internet. Klien menghubungi server dengan
menggunakan API saat membutuhkan resource. Developer API menjelaskan bagaimana klien
harus menggunakan REST API dalam dokumentasi API aplikasi server. Ini adalah
langkah-langkah umum untuk setiap panggilan REST API:

1. Klien mengirim request ke server. Klien mengikuti dokumentasi API untuk memformat
request dengan cara yang dipahami server.
2. Server mengotentikasi klien dan mengonfirmasi bahwa klien memiliki hak untuk
membuat permintaan itu.
3. Server menerima permintaan dan memprosesnya secara internal.
4. Server mengembalikan respons ke klien. Respons berisi informasi yang memberi tahu
klien apakah permintaan berhasil. Tanggapan juga mencakup informasi apa pun yang
diminta klien.

https://instagram.com/codewithbahri
REST API

Isi Permintaan REST API?

REST API memerlukan request untuk membawa komponen berikut:

Unique resource identifier

Server mengidentifikasi setiap resource dengan pengidentifikasi resource yang unik. Untuk
layanan REST, server biasanya melakukan identifikasi resource dengan menggunakan
Uniform Resource Locator (URL). URL menentukan jalur ke resource. URL mirip dengan
alamat situs web yang Anda masukkan ke browser untuk mengunjungi halaman web. URL
juga disebut sebagai request endpoint dan dengan jelas menentukan ke server mana yang
dibutuhkan klien.

https://instagram.com/codewithbahri
REST API

Method

Developer sering mengimplementasikan REST API dengan menggunakan

Hypertext Transfer Protocol (HTTP). Method HTTP memberi tahu server apa
yang perlu dilakukannya terhadap resource. Berikut ini adalah empat method
HTTP secara umum:

GET:

Client menggunakan GET untuk mengakses resource yang terletak di URL

yang ditentukan di server. Mereka dapat meng-cache request GET dan
request parameter dalam request REST API untuk menginstruksikan server
memfilter data sebelum dikirim ke client.

https://instagram.com/codewithbahri
REST API

POST:

Client menggunakan POST untuk mengirim data ke server. Mereka menyertakan

representasi data dengan permintaan. Mengirim permintaan POST yang sama
berkali-kali memiliki efek samping membuat resource yang sama berkali-kali.

PUT:

Client menggunakan PUT untuk memperbarui resource yang ada di server. Tidak
seperti POST, mengirimkan permintaan PUT yang sama beberapa kali dalam layanan
REST memberikan hasil yang sama.

DELETE:

Client menggunakan permintaan DELETE untuk menghapus resource. Permintaan

DELETE dapat mengubah status server. Namun, jika pengguna tidak memiliki
autentikasi yang sesuai, permintaan akan gagal.

https://instagram.com/codewithbahri
REST API

HTTP Header:

Request headers adalah metadata yang dipertukarkan antara klien dan server. Misalnya, header
request menunjukkan format request dan response, memberikan informasi tentang status
request, dan sebagainya.

Data:

Request REST API mungkin menyertakan data untuk POST, PUT, dan method HTTP lainnya
agar berhasil.

Parameter:

Request REST API dapat menyertakan parameter yang memberi server lebih banyak detail
tentang apa yang perlu dilakukan. Berikut ini adalah beberapa jenis parameter yang ada dan
perbedaannya:

Path parameter yang menentukan detail URL.

Query parameter yang meminta lebih banyak informasi tentang sumber daya.

Cookie parameter yang mengautentikasi klien dengan cepat.

https://instagram.com/codewithbahri
REST API

Metode autentikasi REST API?

Layanan REST harus mengautentikasi permintaan sebelum dapat mengirim respons. Otentikasi
adalah proses memverifikasi identitas. Misalnya, Anda dapat membuktikan identitas Anda dengan
menunjukkan KTP atau SIM. Demikian pula, klien layanan REST harus membuktikan identitas mereka
ke server untuk membangun kepercayaan.

HTTP authentication:

HTTP menentukan beberapa skema autentikasi yang dapat Anda gunakan secara langsung saat
mengimplementasikan REST API. Berikut ini adalah dua dari skema ini:

https://instagram.com/codewithbahri
REST API

Basic authentication:

Dalam basic authentication, klien mengirimkan nama pengguna dan kata sandi di
header permintaan. Itu mengencodekan dengan base64, yang merupakan teknik
pengkodean yang mengubah pasangan menjadi satu set 64 karakter untuk transmisi
yang aman.

Bearer authentication:

Bearer auth istilah ini mengacu pada proses pemberian kontrol akses ke pembawa
token. Token pembawa biasanya berupa string karakter terenkripsi yang dihasilkan
server sebagai tanggapan atas permintaan login. Klien mengirimkan token di header
permintaan untuk mengakses resource.

https://instagram.com/codewithbahri
REST API

Isi Response Server REST API ?

Prinsip REST mengharuskan respons server untuk memuat komponen utama berikut:

Status code

Status code berisi kode status tiga digit yang mengomunikasikan keberhasilan atau kegagalan
permintaan. Misalnya, kode 2XX menunjukkan keberhasilan, tetapi kode 4XX dan 5XX menunjukkan
kesalahan. Kode 3XX menunjukkan pengalihan URL.

Berikut ini adalah beberapa status code yang umum:

200: Tanggapan sukses umum

201: Tanggapan keberhasilan metode POST

400: Permintaan salah yang tidak dapat diproses oleh server

404: Resource tidak ditemukan

https://instagram.com/codewithbahri
REST API

Response Body:

Respon body berisi representasi resource. Server memilih format representasi yang
sesuai berdasarkan isi request header. Client dapat meminta informasi dalam format
JSON, yang menentukan bagaimana data ditulis dalam teks biasa. Misalnya, jika
client request name dan age seseorang bernama John, server mengembalikan
representasi JSON sebagai berikut:

'{"name":"John", "age":30}'

https://instagram.com/codewithbahri
REST API

Response Header:

Respons juga berisi header atau metadata tentang response.

Mereka memberikan lebih banyak konteks tentang respons dan
menyertakan informasi seperti server, penyandian, tanggal, dan
tipe konten.

https://instagram.com/codewithbahri
Flutter Networking

Setelah memahami REST API, sekarang waktunya

kita belajar bagaimana flutter berkoneksi dengan
api menggunakan transmisi json.

https://instagram.com/codewithbahri
JSON & Serialization

Apa itu JSON ?

JSON (JavaScript Object Notation) adalah format
pertukaran data yang ringan. Sangat mudah bagi
manusia untuk membaca dan menulisnya. Mudah bagi
mesin untuk memprosesnya dan membuatnya. Format
ini didasarkan pada Standar Bahasa Pemrograman
JavaScript ECMA-262 Edisi ke-3 - Desember 1999. JSON
adalah format teks yang sepenuhnya terbebas dari
bahasa pemrograman apapun, akan tetapi dalam
prakteknya json ini menggunakan konvensi yang akrab
dengan bahasa pemrograman dari keluarga bahasa C,
termasuk C, C++, C#, Java, JavaScript, Perl, Python, dan
masih banyak lainnya. Kemudahan dan keunggulannya
ini menjadikan JSON sebagai bahasa pertukaran data
yang ideal dan terkenal untuk saat ini.

https://instagram.com/codewithbahri
JSON & Serialization

Dalam topik ini nanti kita hanya akan membahas cara

menggunakan JSON dengan Flutter. Ini nanti akan
mencakup solusi yang diberikan oleh JSON dalam
skenario yang berbeda, dan mengapa itu diperlukan.

Pengkodean (Encoding) dan serialisasi (serialization)

adalah hal yang sama, mengubah struktur data
menjadi string. Decoding dan deserialization adalah
proses yang berlawanan, mengubah string menjadi
struktur data. Namun, serialisasi juga biasanya
mengacu pada keseluruhan proses penerjemahan
struktur data ke dan dari format yang lebih mudah
dibaca.

Untuk menghindari kebingungan, dalam topik ini kita

akan menggunakan "serialization" saat mengacu pada
keseluruhan proses, dan "encoding" - "decoding" saat
secara khusus merujuk pada proses tersebut.

https://instagram.com/codewithbahri
JSON & Serialization

Memilih Json Serialization yang tepat?

1. Manual Serialization
2. Automated serialization menggunakan code
generation

Proyek yang berbeda tentunya mempunyai kompleksitas

dan kasus logic yang berbeda. Untuk proyek
proof-of-concept yang sederhana atau prototipe,
menggunakan code generator mungkin terlalu berlebihan.
Dan juga untuk aplikasi dengan beberapa model JSON
yang lebih kompleks, Manual serialization bisa menjadi
membosankan, sering berulang, dan dapat menyebabkan
lebih banyak kesalahan kesalahan kecil yang berimpact ke
aplikasi.

https://instagram.com/codewithbahri
Manual Serialization

Manual Serialization atau proses decode

encode secara manual ini cocoknya
untuk project-project kecil.

https://instagram.com/codewithbahri
Manual Serialization

Decoding JSON secara manual mengacu pada

penggunaan Json decoder bawaan dari dart:convert.
Caranya memasukan string JSON ke dalam fungsi
jsonDecode(), hasilnya nanti berupa Map<String,
dynamic>. Dengan Map<String,dynamic> ini kita sudah
dapat mencari nilai yang kita inginkan dalam bentuk
object.

Decode manual tidak bekerja dengan baik saat proyek

kita menjadi lebih besar. Menulis logika decoding
secara manual bisa menjadikan kode kita sulit untuk
dikelola dan rawan kesalahan. Jika Anda salah ketik saat
mengakses kolom JSON yang tidak ada, kode kita akan
menampilkan kesalahan selama runtime.

Jika kita tidak memiliki banyak model JSON dalam

proyek kita dan hanya ingin menguji konsep dengan
cepat, manual serialization mungkin merupakan cara
yang tepat untuk dimulai. Untuk contoh manual
encoding, lihat Serialisasi JSON secara manual
menggunakan dart:convert.
https://instagram.com/codewithbahri
Manual Serialization

Flutter Basic JSON Serialization

Serialisasi JSON di Flutter sangatlah sederhana. Flutter
memiliki library dart:convert bawaan yang
menyediakan fungsi encoder dan decoder JSON secara
langsung.

Contoh JSON berikut mengimplementasikan secara

sederhana model user

Dengan dart:convert, kita dapat membuat serialize

model JSON ini dengan dua cara:

1. Serializing JSON secara inline

2. Serializing JSON didalam class model

https://instagram.com/codewithbahri
Manual Serialization

Serializing JSON inline

Dengan melihat dokumentasi dart:convert, kita
akan melihat bahwa kita dapat mendekode
JSON dengan memanggil fungsi jsonDecode() ,
dengan string JSON sebagai argumen metode.

https://instagram.com/codewithbahri
Manual Serialization

Sayangnya, jsonDecode() mengembalikan

Map<String, dynamic>, artinya kita tidak
mengetahui tipe data dari nilai sampai
runtime. Dengan pendekatan ini, kita
kehilangan sebagian besar fitur statically typed,
type safety, autocomplete, dan yang
terpenting, compile-time exceptions atau
pesan error ketika waktu compile. Itu artinya
kode kita akan langsung menjadi lebih rawan
dari kesalahan.

https://instagram.com/codewithbahri
Manual Serialization

Misalnya, setiap kali kita mengakses name

atau email, kita bisa saja langsung salah
ketik. Kesalahan ketik ini tidak akan
diketahui oleh kompiler karena JSON
berada dalam struktur map. Error ini akan
diketahui ketika runtime atau ketika
aplikasi sedang berjalan.

https://instagram.com/codewithbahri
Manual Serialization

Serializing JSON di dalam class

model
Dalam menghadapi masalah yang disebutkan
sebelumnya, saya akan memperkenalkan class
model. Dalam contoh ini kita dapat
menyebutnya class User. Di dalam class User
ini, kita akan menemukan:

Constructor User.fromJson(), untuk membuat

instance User baru dari struktur Map.

Metode toJson(), yang mengubah instance

User menjadi Map.

https://instagram.com/codewithbahri
Manual Serialization

Dengan pendekatan ini, pemanggilan kode

dapat memiliki keamanan tipe (type safety),
autocompletion untuk kolom name dan
email, dan compile-time exceptions.. Jadi
kalau kita ada kesalahan ketik atau
menganggap name dan email sebagai int,
bukan String, aplikasi tidak akan bisa
dikompilasi, sehingga tidak akan crash
ketika runtime.

https://instagram.com/codewithbahri
Manual Serialization

Tanggung jawab untuk decode sekarang

pindah ke dalam class model. Dengan
pendekatan baru ini, Anda dapat decode
User dengan mudah.

https://instagram.com/codewithbahri
Manual Serialization

Untuk encoding User, masukan objek User ke

fungsi jsonEncode(). kita tidak perlu
memanggil metode toJson(), karena
jsonEncode() sudah melakukannya untuk kita.

Dengan pendekatan ini, pemanggilan kode

tidak perlu mengkhawatirkan serialisasi JSON
sama sekali. Namun, class model tetap harus
kita perhatikan. Dalam aplikasi production, kita
harus memastikan bahwa serialisasi berfungsi
dengan baik. Dalam praktiknya, metode
User.fromJson() dan User.toJson() harus
memiliki unit test untuk memverifikasi
serialization ini berjalan dengan benar.

https://instagram.com/codewithbahri
Serialization using Code Generator

Code generator digunakan untuk project

sedang sampai project besar.

https://instagram.com/codewithbahri
Serialization using Code Generator

Serialisasi JSON dengan code generator artinya kita memiliki eksternal

library yang menghasilkan encoding boilerplate untuk kita. Setelah
menyiapkan class sesuai dengan aturan code generator, kita akan
menjalankan file watcher yang akan menghasilkan kode dari class model
tersebut. Misalnya, json_serializable dan freezed adalah jenis library yang
dapat kita pakai.

Pendekatan ini sangat baik untuk proyek yang besar. Tidak diperlukan
boilerplate secara manual, dan tidak ada kesalahan ketik saat mengakses
file JSON pada waktu kompilasi. Kelemahan dari pembuatan kode adalah
memerlukan beberapa pengaturan di awal. Juga, file yang dihasilkan
mungkin memperlihatkan visual yang kurang enak di navigator proyek kita.

Untuk melihat contoh encoding JSON berbasis code generator, lihat

Serialisasi JSON menggunakan library berikut.

https://instagram.com/codewithbahri
Serialization using Code Generator

Setup json_serializable dalam

project
Untuk menyertakan json_serializable dalam proyek
kita, Anda memerlukan satu dependensi reguler,
dan dua dependensi dev. Singkatnya, dependensi
dev adalah dependensi yang tidak disertakan
dalam sourcecode aplikasi kita, mereka hanya
digunakan di lingkungan development.

Jalankan flutter pub get ke dalam folder root kita

untuk membuat dependensi baru ini tersedia di
project kita.

https://instagram.com/codewithbahri
Serialization using Code Generator

Membuat class model dengan

json_serializable
Berikut ini menunjukkan bagaimana cara
mengkonversi class User menjadi class
json_serializable. Kode berikut ini menggunakan
model JSON yang disederhanakan dari contoh
sebelumnya.

https://instagram.com/codewithbahri
Serialization using Code Generator

Dengan setup ini, code generator

menghasilkan kode untuk encoding dan
decoding field name dan email dari JSON.

Jika perlu, juga mudah untuk menyesuaikan

strategi penamaan. Misalnya, jika API
mengembalikan objek dengan snake_case, dan
kita ingin menggunakan lowerCamelCase di
model kita, kita bisa menggunakan anotasi
@JsonKey dengan name parameter:

https://instagram.com/codewithbahri
Serialization using Code Generator

Running code generator

Saat membuat class json_serializable pertama kali,
Anda akan mendapatkan kesalahan yang serupa
dengan yang ditunjukkan pada gambar di
samping.

Kesalahan ini sepenuhnya normal dan hanya

karena kode yang dihasilkan untuk class model
belum ada. Untuk mengatasinya, jalankan code
generator untuk menghasilkan class boilerplate
yang sudah terserialisasi.

https://instagram.com/codewithbahri
Serialization using Code Generator

2 cara menjalankan code generator

- Dengan menjalankan flutter pub run build_runner
build --delete-conflicting-outputs di root project, ini
memicu build satu kali yang menelusuri files, memilih
yang sesuai setup code generator, dan menghasilkan
kode serialisasi.
- Generate kode secara terus menerus. watcher
membuat proses pembuatan kode kami lebih
nyaman. Itu mengawasi perubahan dalam file project
kita dan secara otomatis membuat file yang
diperlukan. Memulai watcher dengan cara
menjalankan perintah flutter pub run build_runner
watch --delete-conflicting-outputs di root project..
-

https://instagram.com/codewithbahri
Serialization using Code Generator

Mengkonsumsi model dari

json_serializable
Untuk decode JSON string dengan cara
json_serializable, Anda sebenarnya tidak perlu
melakukan perubahan apapun pada kode yang
pernah kita buat sebelumnya.

Teman teman dapat melihat contoh pada gambar

disamping ini.

https://instagram.com/codewithbahri
Flutter Networking

Introduction
Salah satu fitur yang ditawarkan oleh Flutter adalah kemampuannya untuk melakukan
networking, yaitu proses pertukaran data melalui jaringan (biasanya internet).

Untuk melakukan networking menggunakan Flutter, kamu bisa menggunakan

package bernama http, yang sudah disediakan oleh Flutter. Package ini
memungkinkan kamu untuk melakukan berbagai operasi networking, seperti
mengirimkan HTTP GET, POST, PUT, DELETE.

Selain package http, ada package lain yang bernama dio yang merupakan sebuah
library HTTP client yang lebih kuat dan fleksibel dibandingkan dengan package http.
Package dio ini cocok untuk melakukan operasi networking yang lebih kompleks di
Flutter. Namun untuk topic kali ini, kita hanya akan menggunakan package http

https://instagram.com/codewithbahri
Flutter Networking

POSTMAN
Untuk mempermudah dalam integrasi
API kedalam flutter, akan lebih mudah
ketika kita sudah dapat melihat url api,
request body, dan response body nya.
Untuk itu kita perlu tools/software lain
untuk melakukan pengecekan Rest API
nya. Disini saya akan memperkenalkan
teman teman dengan software bernama
postman, download softwarenya disini :
https://www.postman.com/downloads/

Nanti tampilannya seperti gambar

disamping :

https://instagram.com/codewithbahri
Flutter Networking

Mengambil data dari internet

Untuk mengambil data dari internet, kita dapat menggunakan method GET.

Metode GET adalah salah satu metode yang disediakan oleh package http ini,
yang digunakan untuk mengirimkan permintaan ke server API untuk
mengambil data.

Sebagai contoh kita akan mengambil data dari API URL:

https://jsonplaceholder.typicode.com/albums/1

Pertama yang perlu kita lakukan adalah mengecek dulu api ini di postman,
api ini berkerja dengan benar apa tidak.

https://instagram.com/codewithbahri
Flutter Networking

Test API menggunakan

1 2 3
POSTMAN
Disamping saya cek dulu url api nya di
aplikasi postman untuk mendapatkan data
dari api url yang sudah disiapkan oleh team
5
backend. Untuk keterangannya sudah saya
kasih angka:
4
1. Method, contoh method GET
2. URL
3. Button send request
4. Response body berupa json format
5. Status code, berhasil 200.

https://instagram.com/codewithbahri
Flutter Networking

Menambahkan package http

Setelah kita tahu cek menggunakan postman dan
normal, saatnya kita masuk ke kode flutter.

Pertama kita buat dulu project nya dengan cara

flutter create fic_rest_api

Setelah itu kita add package http dengan cara

flutter pub add http

Jangan lupa untuk menambahkan configurasi di

Androidmanifest.xml yang berada difolder
android/app/src/main

<uses-permission
android:name="android.permission.INTERNET"
/>
https://instagram.com/codewithbahri
Flutter Networking

Pertama kita import dulu package http nya seperti pada baris pertama. Setelah itu kita
dapat membuat class NetworkManager untuk menampung function http method yang
akan kita gunakan. Disini saya mencontohkan membuat function fetchAlbum().

Metode http.get() mengembalikan Future yang berisi Response. [baris 4]

- Future adalah class core Dart untuk bekerja dengan operasi async. Objek Future
mewakili potensi nilai atau kesalahan yang akan tersedia di masa mendatang.
- class http.Response berisi data yang diterima dari panggilan http yang berhasil.

https://instagram.com/codewithbahri
Flutter Networking

Konversi response menjadi object Dart

Meskipun mudah untuk membuat request network, namu bekerja
dengan Future<http.Response> yang mentah sangat tidak nyaman.
Untuk membuat ini lebih mudah kita handle, yuk kita ubah
http.Response menjadi object Dart dengan class json serialization
seperti topik sebelumnya.

https://instagram.com/codewithbahri
Flutter Networking

Membuat class Album

Pertama, buat class Album yang berisi
data hasil dari request API GET.

Mengonversi JSON secara manual

hanyalah salah satu opsi. Untuk informasi
lebih dalam bisa kembali ke topic JSON
Serialization

Hasil class Album dapat dilihat seperti

pada gambar disamping.

https://instagram.com/codewithbahri
Flutter Networking

Ubah http.Response menjadi

Album
Sekarang, gunakan langkah-langkah berikut untuk
memperbarui fungsi fetchAlbum() untuk
mengembalikan Future<Album> [line 6]

convert respons body menjadi JSON Map dengan

paket dart:convert. [line 1, line 11]

Jika server mengembalikan respons OK dengan

kode status 200, konversi JSON map menjadi Album
menggunakan metode factory fromJson(). [line 10-11]

Jika server tidak mengembalikan respons OK

dengan kode status 200, maka berikan exception.
(Bahkan dalam kasus respons server "404 Tidak
Ditemukan". Jangan kembalikan null. [line 12-14]

https://instagram.com/codewithbahri
Flutter Networking

Ambil Data
Panggil metode fetchAlbum() di
dalam metode initState()

Metode initState() dipanggil hanya

sekali dalam siklus stateful widget
ketika widget ini dipanggil.

https://instagram.com/codewithbahri
Flutter Networking

Tampilkan Data
Untuk menampilkan data di layar, gunakan widget
FutureBuilder. Widget FutureBuilder memudahkan
untuk bekerja dengan sumber data async.

Anda harus menyediakan dua parameter:

Future yang ingin Anda kerjakan. Dalam hal ini, future

dikembalikan dari fungsi fetchAlbum().

Bulder function memberi tahu Flutter apa yang harus

dirender, bergantung pada status dari future: loading,
success, atau error.

Perhatikan bahwa snapshot.hasData hanya

mengembalikan true saat snapshot berisi nilai data
bukan null.

Karena fetchAlbum hanya dapat mengembalikan nilai

non-null, fungsi tersebut harus mengarahkan exception
ketika terjadi error.
https://instagram.com/codewithbahri
Flutter Networking

Mengapa fetchAlbum() dipanggil di

initState()
Meskipun aman, tidak disarankan untuk melakukan panggilan
API dalam metode build().

Flutter memanggil metode build() setiap kali perlu mengubah

apa pun dalam tampilan, dan ini sering terjadi secara
mengejutkan. Metode fetchAlbum(), jika ditempatkan di dalam
build(), berulang setiap kali dipanggil pada setiap rebuild yang
menyebabkan aplikasi melambat.

Menyimpan hasil fetchAlbum() dalam variabel status memastikan

bahwa future dijalankan hanya sekali dan kemudian di-cache
untuk rebuild selanjutnya.

Hasil app ketika dirunning akan seperti disamping. Ini data sudah
ambil dari REST API.

https://instagram.com/codewithbahri
Flutter Networking

Mengirim data ke internet

Sebagian besar aplikasi memerlukan pengiriman data melalui internet, dan kita
dapat menggunakan package http.

HTTP Method POST adalah salah satu metode yang ada dalam HTTP (Hypertext
Transfer Protocol), yang digunakan untuk mengirim data dari aplikasi ke server.
Dengan menggunakan package http, kita dapat mengirim data ke server dengan
menggunakan HTTP Method POST.

Berikut langkah langkahnya :

https://instagram.com/codewithbahri
Flutter Networking

Pertama tambahkan http package dan

config internet permission di
AndroidManifest.xml seperti pada bab
http get.

Setelah itu kita dapat menuliskan kode

untuk mengirimkan judul album ke url
api:

https://jsonplaceholder.typicode.co
m/albums

Dengan http.post seperti potongan kode

disamping:

https://instagram.com/codewithbahri
Flutter Networking

Metode http.post() mengembalikan Future

yang berisi Response. [line 18]

- Future adalah class core Dart untuk

bekerja dengan operasi asinkron.
Objek future mewakili potensi nilai
atau kesalahan yang akan tersedia di
masa mendatang. [line 17]
- class http.Response berisi data yang
diterima dari panggilan http ketika
berhasil. [line 17]
- Metode createAlbum() mengambil
argument title lalu dikirim ke server
untuk membuat Album. [line 24]

https://instagram.com/codewithbahri
Flutter Networking

Convert response dari

http.Response ke Album
Gunakan langkah-langkah berikut untuk
memperbarui fungsi createAlbum() untuk
mengembalikan Future<Album>

- Jika server mengembalikan respons

CREATED dengan kode status 201, konversi
JSON map menjadi Album menggunakan
metode factory fromJson() . [line 29]
- Jika server tidak mengembalikan respons
DIBUAT dengan kode status 201, maka
masukan ke exception. (Bahkan dalam kasus
respons server "404 Tidak Ditemukan".) [line
31]

https://instagram.com/codewithbahri
Flutter Networking

Mendapatkan title dari inputan

user
Selanjutnya, buat TextField untuk
memasukkan title [line 41] dan ElevatedButton
untuk mengirim data ke server [line 45]. Juga
tentukan TextEditingController [line 20] untuk
membaca input pengguna dari TextField.

Saat ElevatedButton ditekan, futureAlbum

diset ke nilai yang dikembalikan oleh metode
createAlbum(). [line 48]

https://instagram.com/codewithbahri
Flutter Networking

Rozak dari kendal

Rozak dari kendal

Menampilkan response ke
layar
Hasil dari code sebelumnya bisa
dilihat digambar sebelah:

https://instagram.com/codewithbahri
Flutter Networking

Update data melalui internet

Kebanyakan aplikasi memerlukan fungsi update data melalui jaringan
internet dan http package menyediakan function itu dengan http put.

HTTP Method Put adalah sebuah metode yang digunakan untuk

mengupdate data pada sebuah server dengan menggunakan HTTP.
Metode ini biasanya digunakan untuk mengubah data yang sudah ada
di server dengan data baru yang telah diubah oleh pengguna.

Langkah langkahnya sebagai berikut

https://instagram.com/codewithbahri
Flutter Networking

Melanjutkan study case sebelumnya get album

create album. Sekarang kita coba untuk update
album.

- Function updateAlbum mempunyai 2

argument yaitu id yang nantinya untuk
parameter album yang akan di update, serta
argument title untuk pengganti dari title
yang dimiliki id tersebut. [line 35].
- Pada api url, untuk id kita menggunakan id
dari variable sehingga dapat dinamis untuk
mengganti album-album yang ada. [line37]
- Setelah itu ketika update success dengan
statuscode 200 maka akan mengembalikan
response body yang sudah di conversi ke dart
model album [line 47]
- Ketika terjadi error maka akan diteruskan ke
class exception [line 49]

https://instagram.com/codewithbahri
Flutter Networking

Proses delete yang terjadi di layar

secara code seperti disamping:

Ketika button Delete Data ditekan

[line 51], maka akan menjalankan
perintah deleteAlbum [line 56] dengan
id diambil dari data album yang
sebelumnya sudah diload ke layar
lewat snapshot [line 56] hasil dari
futureAlbum [line 39]. Ketika sukses
delete data maka akan muncul
wording ‘Deleted’ [line 49].

https://instagram.com/codewithbahri
Flutter Networking

Hasil tampilannya nanti akan Rozak dari kendal

seperti gambar disamping.
RozakRozak dari kendal
dari kendal
Jadi ketika text di edit lalu klik
update data button. Maka text
dibawah button juga akan berubah
sesuai dengan yang diedit. Karena
text yg dibawah button itu ambil
dari api yang success diupdate oleh
proses http put.

https://instagram.com/codewithbahri
Flutter Networking

Hapus data lewat jaringan internet

HTTP method DELETE adalah salah satu metode yang tersedia dalam
protokol HTTP, yang digunakan untuk menghapus suatu data dari sebuah
API. Jika Anda menggunakan paket HTTP di Flutter, Anda dapat
menggunakan method DELETE untuk mengirimkan permintaan
penghapusan data ke sebuah API yang tersedia melalui protokol HTTP.

Contoh penggunaan HTTP Method DELETE dalam Flutter adalah sebagai

berikut:

https://instagram.com/codewithbahri
Flutter Networking

Meneruskan study case api album. Disini kita

akan belajar bagaimana delete data album
yang sudah pernah kita create.

Pertama buat function deleteAlbum [line 53]

dengan argument id, lalu kita dapat
menggunakan http delete dan memasukan
argument id tadi ke dalam parameter url api
untuk menghapus data album yang ada di
server. [line 55]

Setelah itu jika response status code nya 200

makan kita akan mengembalikan data album
namun dengan data yang kosong karena dari
api kita akan menerima json kosong yang
artikanya proses delete berhasil, [line 67] begitu
juga kalau terjadi gagal proses maka akan
diteruskan ke class exception. [line 69]
https://instagram.com/codewithbahri
Flutter Networking

Hasil tampilannya nanti akan seperti

gambar disamping.

Pertama layar akan load data dengan id

kelayar dengan title qidem molestiae
enim.

Lalu ketika button Delete Data proses

deleteAlbum akan dijalankan dan
mengembalikan status code 200 dengan
json kosong sehingga tampilan berubah
menjadi title Delete seperti logic pada
code dislide sebelumnya.

https://instagram.com/codewithbahri
Referensi

Referensi

1. https://aws.amazon.com/what-is/restful-api/
2. https://docs.flutter.dev/cookbook/networking/fetch-data
3. https://docs.flutter.dev/cookbook/networking/send-data
4. https://docs.flutter.dev/cookbook/networking/update-data
5. https://docs.flutter.dev/cookbook/networking/delete-data
6. https://www.postman.com/downloads/

https://instagram.com/codewithbahri
Sourcecode

https://github.com/bahrie127/fic_flutter_model_rest_api

https://instagram.com/codewithbahri
Support with Follow/Subscribe

● Linkedin: https://linkedin.com/in/bahrie
● Instagram: https://instagram.com/codewithbahri
● Github: https://github.com/bahrie127
● Youtube : https://youtube.com/@codewithbahri
● Tiktok: https://tiktok.com/@codewithbahri

https://instagram.com/codewithbahri