Get Data menggunakan Rest API

December 30, 2022

Apa itu CRUD?

CRUD adalah operasi dasar yang harus ada pada setiap sistem komputer, yang terdiri dari beberapa perintah pada sistem tersebut. Masing-masing fungsi sistem tersebut adalah Create, Read, Update, dan Delete.

– Create secara istilah, create adalah salah satu fungsi dalam sebuah aplikasi yang berperan dalam membuat atau menginputkan data ke dalam sistem. Data ini nantinya akan terkirim ke database yang tertuju secara otomatis dari sistem yang Anda buat.

– Read adalah perintah membaca. Maksud dari perintah ini adalah untuk menampilkan data yang diambil dari database yang terhubung dengan sistem. Perintah ini menggunakan id unik sebagai pembeda satu data dengan yang lainnya.

– Update pada CRUD adalah sebuah perintah yang memungkinkan pengguna melakukan editing atau update informasi dari data yang sudah tersaji. Jadi, pengguna harus memposisikan opsi perintah ini pada bagian tampilan data yang Anda beri akses untuk bisa pengguna edit.

– Delete pada CRUD adalah fungsi hapus, yang memungkinkan pengguna aplikasi Anda untuk menghapus entri data yang tersedia. Pada proses kerja sistem penghapusan ini, jangan langsung hapus data yang pengguna hapus.

untuk pembahasan kali ini kita akan menggunakan Api yang telah disediakan oleh reqres.in

kita akan mencoba untuk get data menggunakan

Get

Untuk Get api kita akan menggunakan API

https://reqres.in/api/users/2

Tampilan Awal

Jadi sebelum kita mengget data kita perlu membuat perlu tampilan awal berikut tampilan awal,

import ‘package:flutter/material.dart’;

import ‘person.dart’;

import ‘person_card.dart’;

class MainPage extends StatefulWidget {

const MainPage({Key? key}) : super(key: key);

@override

State<MainPage> createState() => _MainPageState();

}

class _MainPageState extends State<MainPage> {

Person? person;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text(‘Rest Api’),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

person != null

? PersonCard(person: person!)

: const Text(‘no data’),

const SizedBox(

height: 20,

SizedBox(

width: 100,

child: ElevatedButton(

onPressed: () async {}, child: const Text(‘GET’)),

SizedBox(

width: 100,

child: ElevatedButton(

onPressed: () async {}, child: const Text(‘POST’)),

)

));

}

Untuk tampilannya akan menjadi seperti berikut

Card

Setelah membuat tampilan awal kita juga akan membuat tampilan card untuk dapat menampilkan Data, Berikut kode untuk card

import ‘package:flutter/material.dart’;

import ‘person.dart’;

class PersonCard extends StatelessWidget {

final Person person;

const PersonCard({Key? key, required this.person}) : super(key: key);

@override

Widget build(BuildContext context) {

return Container(

padding: const EdgeInsets.all(15),

width: 300,

decoration: BoxDecoration(

borderRadius: BorderRadius.circular(8), color: Colors.lightBlue[100]),

child: Column(

children: [

Row(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

const SizedBox(

width: 50,

child: Text(‘ID’,

style: TextStyle(

fontWeight: FontWeight.bold,

)),

SizedBox(width: 220, child: Text(‘: ${person.id}‘))

Row(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

const SizedBox(

width: 50,

child: Text(‘Name’,

style: TextStyle(

fontWeight: FontWeight.bold,

)),

SizedBox(width: 220, child: Text(‘: ${person.name}‘))

Row(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

const SizedBox(

width: 50,

child: Text(‘Email’,

style: TextStyle(

fontWeight: FontWeight.bold,

)),

SizedBox(width: 220, child: Text(‘: ${person.email}‘))

)

);

}

Class Model

Untuk class model kita hanya menggunakan cara sederhana
class Person {
int id;
String name;
String email;

Person({required this.id, required this.name, required this.email});
}
Setelah kita membuat model kita bisa memulai untuk Get Api menggunakan Dio, tetapi pertma kita perlu membuat class baru, dengan nama Services agar kita bisa menulis kode untuk mendapatkan Data dari API
import 'person.dart';

abstract class Services {
/// Get Data / Read
static Future<Person?> getById(int id) async {}
}
Pada file Services kita perlu menyiapkan 2 Fungsi yang tipe datanya adalah Person Class atau Model yang telah kita buat yang akan kita buat untuk GET dan POST data Ke API,
dan kita juga perlu menambahkan package DIO pada project kita dengan menuliskan
flutter pub add dio
Kita bisa menuliskan command diatas dengan terminal di project kita
Get Api
Untuk mendapatkan Api kita bisa isi fungsi getById dengan kode berikut

static Future<Person?> getById(int id) async {
try {
   var response = await Dio().get('https://reqres.in/api/users/$id');
   if (response.statusCode == 200) {
     return Person(
         id: response.data['data']['id'],
         name: response.data['data']['first_name'] +
             '' +
             response.data['data']['last_name'],
         email: response.data['data']['email']);
   }
} catch (e) {
   throw Exception(e.toString());
}
}
lalu bisa kita buat trigger agar fungsi getById ini dapat digunakan dengan kta memanggil fungsi getById pada Button Post di halaman awal yang telah kita buat sebelumnya,
berikut kode untuk memanggil Fungsi getByI
SizedBox(
width: 100,
child: ElevatedButton(
     onPressed: () async {
       Person? result = await Services.createUser('Ahmad', 'Miqdad', '[email protected]');
       if(result != null){
         setState(() {
           person = result;
         });
       }
     }, child: const Text('POST')),
)