Tutorial Flutter — To Do List dengan Trello REST API

Membuat To Do List sederhana dengan menggunakan Trello REST API

Published in

Komunitas Android CCIT-FTUI

10 min readJan 14, 2020

Perhatian: Tutorial kali ini hanya untuk bertujuan untuk belajar saja. Jika ada sedang di kejar deadline/ hanya ingin copy paste saja tidak akan bisa dilakukan ditutorial kali ini. Karena tutorial kali ini hanya akan berisi gambar.

Halo semua, kembali lagi dengan saya Jeremia. Kali ini kita akan membahas RESTful API . Tapi pertama, apa itu API ?.

API (Application Programming Interface) merupakan sebuah perantara yang menghubungkan aplikasi dengan server atau dengan aplikasi dengan aplikasi lain.

Contohnya seperti kita dapat membuat account/akun gmail/ lain — lainnya. Caranya?
1. Data yang sudah kita masukkan atau diregistrasikan untuk membuat akun akan di kirim ke server.
2. Kemudian data yang kita masukkan akan di terima server.
3. Setelah itu server akan mengirim balik konfirmasi bahwa kita bisa menggunakan akun yang kita buat, sesuai dari data yang kita masukkan sebelumnya.
4. Setelah itu kita dapat melakukan login untuk masuk kedalam gmail/ web/ aplikasi yang meminta data kita.

Tujuan dari API itu sendiri supaya para programmer tidak perlu menulis code lagi dari 0. Bagaimana dengan REST API ?

REST API atau bisa juga dibilang RESTful API dalah arsitektur metode komunikasi dengan protokol HTTP untuk bertukar data. Dengan REST API, kita bisa melakukan CRUD(Create, Read, Update, Delete) ke dalam API itu sendiri. Mungkin untuk lebih jelasnya, kalian bisa membuka artikel ini
https://medium.com/@kiddy.xyz/restful-api-apaan-tuh-dbcfa434761e.

Pada kali ini API yang akan kita gunakan adalah trello.

Trello adalah aplikasi pembuatan daftar pekerjaan bergaya Kanban berbasis web yang merupakan anak perusahaan dari Atlassian. Fungsi dari trello itu sendiri kalian bisa mengatur jadwal kalian/ sekedar membuat catatan. Entah untuk jadwal pribadi atau pun kelompok. Masil belum jelas? Silahkan cek medium orang ini lagi: https://medium.com/@kiddy.xyz/trello-manajemen-tim-jadi-lebih-mudah-2acf7cb72b40. Karena website resmi trello menyediakan API, jadi kita akan menggunakannya untuk tutorial kali ini.

Maaf karena beberapa penjelasan sangat singkat. Sekarang kita akan mulai dengan dasar cara untuk menggunakan REST API.

1. Autentikasi/Autorisasi(Authorize).

Karena kita sedang meggunakan API seseorang/suatu website, maka pasti API yang mereka buat memiliki peraturan mereka sendiri. Salah satunya autentikasi. Pertama, kita buat akunnya terlebih dahulu.

Buka https://developers.trello.com/ -> Klik login -> Klik sign up -> buat akun.

Setelah selesai, Buka API Docs.

Untuk autentikasi, kita membutuhkan token . Dan ini yang akan kita lakukan berikutnya

Click link https://trello.com/app-keys.

copy Key/kunci dan sisipkan di flutter . Buat saja nama filenya “api_provider.dart”

kembali ke web tadi, click “Token”, dan kalian kan di bawah ke web yang berbeda. Scroll sedikit kebawah dan tekan “allow” .

Dan kalian mendapatkan tokennya.

Copy lagi dan pasang di file sebelumnya .

Langkap pertama selesai. Kenapa kita perlu melakukan autentikasi ? Dan apa itu autentikasi ? Menurut yang ada di idwebhost.com,

Autentikasi (Authentification) adalah suatu proses yang merupakan sebuah tindakan pembuktian (validasi) terhadap identitas seorang pengguna pada saat akan memasuki (mengakses) sebuah sistem. Dimana proses validasi tersebut biasanya menggunakan nama dan password dari seorang pengguna yang nantinya akan dijadikan sebagai penanda (verifikasi) apakah seseorang itu adalah orang yang berhak untuk masuk kedalam sistem tersebut.

No Authentification, no security . Paham kan ? lanjut! Jangan lupa membuat akun untuk mengakses trello.com

Dan isikan saja terlebih dahulu.

2. Menggunakan API trello.

Di dokumentasi trello, kita sudah di berikan berbagai url. Trello memilik Board, List, Card, dan Lable sebagai dasar komponennya. Atau sering kita sebut widget dalam flutter. Di setiap url-nya akan selalu ada tulisan GET, POST, PUT, dan DELETE. Itu menunjuka setiap fungsi Url, jika dipanggil .

Contoh yang mendasar adalah kalian bisa memanggil url ini https://api.trello.com/1/boards/{boardId}/?cards=all . Untuk boardId, kalian dapat melihatnya di bagian trello kalian.

Dan jangan lupa baca pada bagian dokumentasi key, kita harus melakukan autentikasi pada setiap url-nya. Dengan cara, memberikan key={YOUR-API-KEY}&token={AN-OAUTH-TOKEN} pada setiap akhir url. Bagian ini ada di bagian board dengan statsu GET.

Untuk mengecek apakah data yang anda iginkan keluar, bisa dengan mencobanya di browser.

Jika tandanya seperti ini maka anda sudah berhasil.

GET

Kita pindah ke flutter. Kita akan membuat kelas dulu bernama API_Providers. Dan ubah sedikit seperti ini.

base Url akan berisi 1 text yang tidak akan pernah berubah, dan authorization kalian harusnya sudah tau itu apa. Kemudian kita membuat method untuk menjalankan GET pada api ini. Tapi sebelum method, kita buat dulu kelas modelnya. Untuk mempercepat waktu, kita bisa pergi ke https://app.quicktype.io/ . Copy semua output dari get dan paste di sana. Untuk GET nya, kita akan ubah dengan hanya mengambil name dan deskripsinya saja dengan seperti ini: https://api.trello.com/1/boards/{sesuaikan dengan punyamu}/cards?fields=name,desc&key={sesuaikan dengan punyamu }&token={sesuaikan dengan punyamu}

Kemudian Copy kelas Model tersebut dan paste di file flutter baru. sebut saja “api_models.dart”

Next, kita buat method GET. Kita menamai method ini dengan getBoard.

Seperti yang saya jelaskan pada bagian SQL, ini sama saja dengan ‘Select * from ..’ di sql hanya saja ini bukan sql. Intinya kita akan mengambil data pada API trello . Karena pada dokumentasi berstatus, Get, maka kita menggunakan get juga. Dan sama halnya dengan Delete, Post, ataupun Put . Mencoba memasukkan url yang tidak sesuai dengan statusnya hanya akan menyebabkan error .

Buat kelas Home nya dulu (dengan statefull), lalu di taruh di main.

Kita panggil kelas API_Providers nya dan kita buat dulu RefresIndictor.

RefresIndicator ini, akan melakukan refres halaman setiap kali di panggil. Dimana proprty yang di butuhkan untuk menaruh GlobalKey dan void setState. Didalam RefreshIndicator, kita menambahkan ListView.builder . Jadi, kita akan membuat semua data didalam Future<List<ApiModel>>ada di dalam List yang baru dengan nama ‘allList’.

Kita akan mengisi restarnya nanti. Setelah itu, kita buat menthod agar bisa menyimpan semua datanya di List yang baru.

Jadi ada List<ApiModel> baru yang menampung data dari getBoards. Lalu dengan menggunakan forEach setiap datanya akan dimasukkan kembali ke dalam allList . Kenapa kita tidak langsung saja memasukkan getBoards ke dalam allList? Jika kita melakukan akan terjadi error . Dan kenapa kita menggunakan forEach dan bukan for biasa ? sebetulnya itu terserah kalian. Tapi dengan forEach, kalian hanya harus nulisakan variable yang sudah berisi data , menuliskan ‘.forEach’ setelahnya, dan memberikan variable penggati(contoh pada gambar diatas, variable penggantinya ‘f’) . Kemudian kalian bisa menjalankan looping kalian tanpa harus menyesuaikan dengan banyaknya data di variable kalian buat.

Kemudian kita ketik di InitState, supaya method ini dijalankan terlebih dahulu saat aplikasi baru di jalankan.

Setelah itu kita buat method Wiget, yang berfungsi sebagai handeler jika allList di hitung kosong maka akan terus menampilkan CircularProgressIndicator() .

Kemudian untuk restart/refresh, kita buat method untuk dipanggil jika RefreshIndicator ter-trigger.

Selanjutnya, tambahkan beberapa syntax pada bagian “Widget utama” seperti di bawah ini.

Maka tampilnyanya seperti ini. Janga lupa menambahkan appbar di Scaffold.

ALTERNARTIF LISTVIEW.BUILDER

Listview.builder membutuhkan banyak data(itemCount) dan “widget satuan”(itemBuilder) untuk membuat sebuah list. Jadi, kita bisa saja menggantinya dengan Column. Dan syntaxnya seperti ini.

             Column(
                  children: allList.map((f) {
                    return FlatButton(
                      child: Card(
                        child: ListTile(
                          title: Text('name : ' + f.name),
                          subtitle: Text('desc : ' + f.desc),
                          trailing: FlatButton(
                            child: Icon(Icons.delete),
                            onPressed: (){},
                            ),
                        ),
                      ),
                      onPressed: (){}, 
                      );
                  }).toList(),
                )

Pada syntax di atas, kita langsung menaruh list-nya di column. Pada lisnya kita menggunakan method map. Apa itu method map?

Menurut https://api.flutter.dev/, "map Returns a new map where all entries of this map are transformed by the given f function."

Singkatnya ini sama seperti forEach. Jadi f pada syntax, yang akan mewakili setiap nilai di dalam list. Kemudian setiap nilai di wakili ‘f’ tersebut, akan dimasukkan ke dalam Flatbutton. Kemudia diakhiri dengan “.toList()” supaya semua nilai yang dimasukkan di Flatbutton akan menjadi list.

Berikutnya, kita akan melanjutakn dengan POST, PUT, dan DELETE .

Untuk Post Card, di dalam aturan main yang mereka buat mengharuskan kita menambahkan idList .

Bagaimana cara mendapatkan id list di board kita ? kita bisa melihat list didalam Trello kita dengan menjalankan Url bagian /boards/{id}/lists . Sama seperti di atas, kita menggunakan web broser.Jika sudah mendapatkannya silahkan pilih idList yang pertama saja .

jika sudah mendapatkan idList yang kita butuhkan, kembali ke kelas ‘API_Providers’ buat variable baru untuk menyisipkan idListnya .
Kemudian, kita buat method baru dengan nama createCard.

PUST

Pada method ini kita menggunakan parameter untuk memasukkan input dari user yang ingin di simpan di list trellonya . Setelah itu pindah ke kelas Homes. Di method widget loading, Kita edit sedikit untuk menambahkan tombol add/PUSH nya

Jadi kita menaruh widgetnya di dalam Scaffold, supaya bisa memanggil FloatingActionButton . Buat file baru lagi dengan nama show_dialog.dart . Kemudian, mari kita buat bagan showDialognya dulu.

import 'package:flutter/material.dart';
import 'api_models.dart';
import 'api_provider.dart';TextEditingController label = new TextEditingController();
TextEditingController desc = new TextEditingController();
double paddingSize = 8.0;Widget formFields(
  String names,
  TextEditingController controller,
) {
  return Column(
    children: <Widget>[
      Text(names),
      Container(
        padding: EdgeInsets.all(paddingSize),
        child: TextFormField(
          controller: controller,
          validator: (value) {
            if (value.isEmpty) {
              return 'Enter Some text';
            }
            return null;
          },
        ),
      )
    ],
  );
}Widget widgetActive(BuildContext contexts, GlobalKey<FormState> formKeys,
    GlobalKey<RefreshIndicatorState> refresKeys,
    {ApiModel models}) {
  String status;
  if (models != null) {
    label.text = models.name;
    desc.text = models.desc;
    status = "edit";
    print(models);
  } else {
    status = "add";
  }
  return Form(
      key: formKeys,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Center(child: Text(status)),
          formFields("labels names : ", label),
          formFields("descrintion : ", desc),
          RaisedButton(
              child: Text(status),
              onPressed: () {
              })
        ],
      ));
}

Pada widgetActive, kita membuat if else statement dan membuatkan parameter untuk ApiModel. Ini untuk menetukan apakah method akan dipanggil sebagai update atau post. Kemudian kita buat void untuk memanggil method createCard.

Jadi semua output user akan dimasukkan ke dalam variable api, dan kemudian dimasukkan kedalam method createCard. Jika sudah, aplikasi membersikan TextEditingController, di refresh dan widget dialog akan di tutup. Sisipkan method ini ke raisedbutton .

Setelah itu buat widget AlertDialog . Seperti ini.

sekarang sisipkan method ini di FloatingActionButton. Dan tambahkan variable GlobalKey<FormState> .

GlobalKey<FormState> formKeys = new GlobalKey<FormState>();

Jika FloatActionButton di tekan, akan menampilkan alert seperti ini.

UPDATE

Pindah ke update, tambahkan syntax ini di kelas API_Providers .

kemudian edit sedikit di method theCallBack di file show_dialog.dart.

Jika models yang diterima tidak kosong, maka status akan menjadi edit(pada bagian method widgetActive. Silahkan lihat method tadi jika lupa). Sekarang sisipkan method post_update() di onPressed punya card .

DELETE

Kita kembali lagi ke kelas API_Providers, Sekarang kita buat method deleteCard. Seperti syntax di bawah ini.

Pindah ke show_dialog.dart dan tambahkan method ini juga untuk memuncukan showDialog.

delete(BuildContext context, GlobalKey<FormState> formKeys,
    GlobalKey<RefreshIndicatorState> refresKeys,
    {ApiModel models}) {
  showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
            content: Container(
          padding: EdgeInsets.all(paddingSize),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text("Nama : " + models.name),
              Text("Descripsi : " + models.desc),
              Text("Apakah Anda ingin menghapusnya ?"),
              Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  FlatButton(
                    child: Text("Yes"),
                    onPressed: () {
                      ApiModel api = ApiModel(id: models.id);
                      API_Providers().deleteCard(api);
                      API_Providers().getBoards();
                      refresKeys.currentState.show();
                      Navigator.pop(context);
                    },
                  ),
                  FlatButton(
                    child: Text("cancle"),
                    onPressed: () {
                      refresKeys.currentState.show();
                      Navigator.pop(context);
                    },
                  )
                ],
              )
            ],
          ),
        ));
      });
}

Kita buat lagi method baru untuk delete. Ini tidak saya pisah seperti pada method post_update karena method ini hanya ada di listView.builder saja. Setelah itu, sisipkan onPressed icon delete.