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 (https://newsapi.org)
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 https://newsapi.org. Aplikasi yang akan dibuat kurang lebih seperti
Gambar 2.2.

PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, S.KOM, M.T

 2

Gambar 1.1 Aplikasi Simple Note

PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, S.KOM, M.T

 3

appBar

leading title

subtitle

listView builder
ListTile

bottomNavigationBar
Gambar 1.2 Widget pada halaman utama simple note

A. Mendaftar ke newsapi.com
1. Buka browser dan kunjungi laman newsapi.org.
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 newsapi.org.
5. Kembali ke newsapi.org 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, S.KOM, 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, S.KOM, M.T

 5

6. Beri nama project “simple_news_api”.

7. Hapus semua komentar dari file main.dart.

8. Pada class MyApp sesuaikan kode jadi seperti berikut:

PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, S.KOM, M.T

 6

Gambar 1.4 Class MyApp di main.dart

C. Menambahkan Dependency
1. Tambahkan dependency http di file pubspec.yaml 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, S.KOM, M.T

 7

D. Membuat Halaman Antarmuka Utama

Halaman utama (Home.dart) 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 “homepage.dart”.
2. Import package material.dart dan database_helper.dart seperti berikut:

Gambar 1.6 Import package di homepage.dart

3. Buat class StatefulWidget dan beri nama MyHomePage seperti berikut:

Gambar 1.7 Class MyHomePage di homepage.dart

4. Ubah return const PlaceHolder(); pada Widget build (baris 11 diatas) menjadi return
MaterialApp();

PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, S.KOM, 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 newsapi.org 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 newsapi.org

PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, S.KOM, 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, S.KOM, 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, S.KOM, 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 “TextOverflow.ellipsis”.

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 “TextOverflow.ellipsis”.

PEMROGRAMAN PERANGKAT BERGERAK LANJUT AHMAD JUFRI, S.KOM, 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 material.dart 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, S.KOM, M.T

 13

Gambar 1.16 Class MyHomePage di homepage.dart

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 newsapi.org 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, S.KOM, 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 newsapi.org

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, S.KOM, 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, S.KOM, 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 “TextOverflow.ellipsis”.

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 “TextOverflow.ellipsis”.

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, S.KOM, M.T