1
1. Akses API
(Studi kasus aplikasi Berita dengan NewsApi)
API atau Application Programming Interface merupakan antarmuka yang dapat menghubungkan satu
aplikasi dengan aplikasi lainnya. API dapat menghubungkan berbagai aplikasi baik dalam satu platform
yang sama atau platform yang berbeda.
Gambar 2.1
Pada penggunaanya API memiliki beberapa jenis, yaitu:
1. Public API
Public API merupakan API yang dapat digunakan secara bebas oleh orang banyak. Untuk
menggunakan API ini ada yang dapat menggunakan secara langsung tanpa mendaftar di web
penyedia API nya ada juga yang harus mendaftar terlebih dahulu. Contoh dari public API adalah
newsapi ([Link]
2. Private API
Private API merupakan API yang khusus dikembangkan untuk institusi, perusahaan, atau
organisasi tertentu untuk keperluan internal.
3. Partner API
Partner API merupakan API yang hanya bisa digunakan oleh pihak yang sudah memiliki ijin dari
penyedia API. Penggunaan API ini sesuai dengan perjanjian antara penyedia API dengan pengguna
API, contoh dari API ini adalah API Pinterest.
4. Composite API
Composite API merupakan API yang menyimpan data dari berbagai server atau hosting dalam
satu tempat.
Pada bab 2 ini kita akan belajar untuk mengimplementasikan newsapi dengan studi kasus pembuatan
aplikasi berita menggunakan API dari [Link] Aplikasi yang akan dibuat kurang lebih seperti
Gambar 2.2.
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
2
Gambar 1.1 Aplikasi Simple Note
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
3
appBar
leading title
subtitle
listView builder
ListTile
bottomNavigationBar
Gambar 1.2 Widget pada halaman utama simple note
A. Mendaftar ke [Link]
1. Buka browser dan kunjungi laman [Link].
2. Klik tombol “Get API Key →”.
3. Isikan data yang diminta kemudian klik submit.
4. Buka email Anda dan salin key yang telah dikirim oleh [Link].
5. Kembali ke [Link] dan copy link yang diinginkan. Disini saya mengambil API key untuk
berita “Top Headlines” dari TechCrunch.
6. Copykan link tersebut ke project Anda.
B. Membuat Project Baru
1. Buka VSCode
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
4
2. Buat project baru dengan menekan Ctrl+Shift+P untuk menampilkan jendela command
pallete VSCode.
3. Pilih Flutter: New Project
Gambar 1.3 Command Pallete
4. Pilih Application
5. Pilih folder
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
5
6. Beri nama project “simple_news_api”.
7. Hapus semua komentar dari file [Link].
8. Pada class MyApp sesuaikan kode jadi seperti berikut:
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
6
Gambar 1.4 Class MyApp di [Link]
C. Menambahkan Dependency
1. Tambahkan dependency http di file [Link] seperti berikut:
Gambar 1.5 Menambah dependency
2. Jalankan perintah flutter pub get di terminal untuk menambahkan paket http ke dalam
project Anda.
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
7
D. Membuat Halaman Antarmuka Utama
Halaman utama ([Link]) digunakan untuk membuat tampilan yang berinteraksi dengan
pengguna. Dengan adanya antarmuka ini pengguna lebih mudah untuk berinteraksi dengan data
yang ada di database. Untuk membuat antarmuka aplikasi Simple Note ikuti langkah berikut:
1. Klik kanan folder lib dan buat file baru dengan nama “[Link]”.
2. Import package [Link] dan database_helper.dart seperti berikut:
Gambar 1.6 Import package di [Link]
3. Buat class StatefulWidget dan beri nama MyHomePage seperti berikut:
Gambar 1.7 Class MyHomePage di [Link]
4. Ubah return const PlaceHolder(); pada Widget build (baris 11 diatas) menjadi return
MaterialApp();
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
8
5. Tambahkan List untuk menampung data yang diambil dari API dibawah baris
class _MyHomePageState extends …
Gambar 1.8 Membuat List Map untuk menampung data
6. Tambahkan API Key yang telah Anda dapatkan dari [Link] yang dikrimi melalui email
Anda seperti berikut:
API key yang diperoleh tiap orang akan berbeda-beda. Gunakan API key yang sudah Anda
dapatkan.
7. Buat method initstate untuk memanggil fungsi _getData
Gambar 1.9 Inisialisasi state isLoading
8. Buat fungsi asinkron untuk mengambil data dari [Link]
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
9
Gambar 1.10 Deklarasi _titleControler & _descriptionController
Perintah “print(e);“ diatas tidak boleh digunakan pada mode produksi.
9. Tambahkan kode berikut pada Widget build seperti berikut:
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
10
Gambar 1.11 Fungsi refresh data
10. Pada bagian leading tambahkan kode seperti berikut:
Gambar 1.12 Fungsi inisialisasi state awal
Bagian leading kita gunakan untuk menampilkan gambar preview dari berita yang akan
ditampilkan.
11. Pada bagian title tambahkan kode seperti berikut:
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
11
Gambar 1.13 Fungsi menampilkan form input dengan showModalBottomSheet
Bagian title kita gunakan untuk judul dari berita yang akan ditampilkan. Judul berita yang
ditampilkan dibatasi baris sebanyak 1 baris dengan perintah “maxLines”. Perintah overflow
untuk membatasi tulisan yang ditampilkan di title sehingga jika melebihi lebar dari Widget
Text maka tampilan akan diganti dengan karaker … dengan perintah “[Link]”.
12. Pada bagian subtitle tambahkan kode seperti berikut:
Gambar 1.14 Fungsi menampilkan form input dengan showModalBottomSheet
Bagian subtitle kita gunakan untuk menampilkan isi berita. Isi berita yang ditampilkan dibatasi
barisnya sebanyak 2 baris dengan perintah “maxLines”. Perintah overflow untuk membatasi
tulisan yang ditampilkan di subtitle sehingga jika melebihi lebar dari Widget Text maka
tampilan akan diganti dengan karaker … dengan perintah “[Link]”.
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
12
E. Membuat Halaman Antarmuka Detail
Sebelum membuat halaman detail kita perlu menambahkan event onTap pada listView sehingga
ketika salah satu berita yang ditampilkan di klik maka akan pindah ke halaman detail berita.
1. Di bagian listView Tambahkan onTap dibawah subtitle seperti berikut:
2. Pada jendela explorer, klik kanan folder lib dan buat file baru dengan nama
“detail_page.dart”.
3. Import package [Link] seperti berikut:
Gambar 1.15 Import package di detail_page.dart
4. Buat class StatefullessWidget dan beri nama DetailPage seperti berikut:
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
13
Gambar 1.16 Class MyHomePage di [Link]
5. Ubah return const PlaceHolder(); pada Widget build (baris 11 diatas) menjadi return
MaterialApp();
6. Tambahkan List untuk menampung data yang diambil dari API dibawah baris
class _MyHomePageState extends …
Gambar 1.17 Membuat List Map untuk menampung data
7. Tambahkan API Key yang telah Anda dapatkan dari [Link] yang dikrimi melalui email
Anda seperti berikut:
API key yang diperoleh tiap orang akan berbeda-beda. Gunakan API key yang sudah Anda
dapatkan.
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
14
8. Buat method initstate untuk memanggil fungsi _getData
Gambar 1.18 Inisialisasi state isLoading
9. Buat fungsi asinkron untuk mengambil data dari [Link]
Gambar 1.19 Deklarasi _titleControler & _descriptionController
Perintah “print(e);“ diatas tidak boleh digunakan pada mode produksi.
10. Tambahkan kode berikut pada Widget build seperti berikut:
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
15
Gambar 1.20 Fungsi refresh data
11. Pada bagian leading tambahkan kode seperti berikut:
Gambar 1.21 Fungsi inisialisasi state awal
Bagian leading kita gunakan untuk menampilkan gambar preview dari berita yang akan
ditampilkan.
12. Pada bagian title tambahkan kode seperti berikut:
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T
16
Gambar 1.22 Fungsi menampilkan form input dengan showModalBottomSheet
Bagian title kita gunakan untuk judul dari berita yang akan ditampilkan. Judul berita yang
ditampilkan dibatasi baris sebanyak 1 baris dengan perintah “maxLines”. Perintah overflow
untuk membatasi tulisan yang ditampilkan di title sehingga jika melebihi lebar dari Widget
Text maka tampilan akan diganti dengan karaker … dengan perintah “[Link]”.
13. Pada bagian subtitle tambahkan kode seperti berikut:
Gambar 1.23 Fungsi menampilkan form input dengan showModalBottomSheet
Bagian subtitle kita gunakan untuk menampilkan isi berita. Isi berita yang ditampilkan dibatasi
barisnya sebanyak 2 baris dengan perintah “maxLines”. Perintah overflow untuk membatasi
tulisan yang ditampilkan di subtitle sehingga jika melebihi lebar dari Widget Text maka
tampilan akan diganti dengan karaker … dengan perintah “[Link]”.
14. Jalankan program dengan menekan tombol F5. Jangan lupa pilih device yang Anda gunakan
untuk menampilkan hasil program Anda.
<<< Improve your skill with more training >>>
PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, [Link], M.T