Pertemuan 14 PPB (B)

 

TUGAS 14
Membuat News App dengan REST API

Nama : Tarisha Falah Basuki
NRP : 5025231043

Kelas : PPB (B)

Aplikasi ini menampilkan berita terkini dari internet secara real-time menggunakan NewsAPI.org sebagai sumber data. Fitur: filter topik (Business, Technology, Sports, dll.), search berita berdasarkan kata kunci, dan baca detail berita langsung di dalam app via WebView. Stack: Kotlin + Jetpack Compose + Retrofit + OkHttp + Coil + ViewModel + Navigation Compose.

Berikut langkah-langkah membuat News App dengan REST API menggunakan Android Studio:

1. Membuat Project Baru

- Buka Android Studio.
- Klik New Project.
- Pilih template Empty Activity.

2.  Mengisi Konfigurasi Project

- Isi data project seperti berikut:

    Name : NewsApp

    Package name : com.example.newsapp

    Save location : pilih folder penyimpanan

    Language : Java atau Kotlin

    Minimum SDK : pilih API 24 (Android 7.0) 

- Klik Finish.

- Android Studio akan membuat project dan melakukan Gradle build (tunggu sampai selesai).

3. Get API Key

- Buka https://newsapi.org  → Get API Key → daftar akun gratis.

- Salin API key yang diberikan (format: string 32 karakter).

- API key ini akan ditempel di file Constants.kt nanti.

3. Merancang Struktur MVVM

app/src/main/java/com/example/newsapp/

│

├── constants/

│   └── Constants.kt                  

│

├── data/

│   ├── model/

│   │   ├── Article.kt                

│   │   ├── Source.kt                 

│   │   └── NewsResponse.kt           

│   ├── remote/

│   │   ├── NewsApiService.kt         

│   │   └── RetrofitInstance.kt       

│   └── repository/

│       └── NewsRepository.kt         

│

├── ui/

│   ├── components/

│   │   └── NewsCard.kt               

│   ├── screen/

│   │   ├── HomeScreen.kt             

│   │   └── DetailScreen.kt           

│   └── viewmodel/

│       ├── NewsUiState.kt            

│       └── NewsViewModel.kt          

│

├── navigation/

│   └── NavGraph.kt                   

│

└── MainActivity.kt

4. Menambahkan Dependency dan Permission Internet

- Buka build.gradle.kts (Module :app), tambahkan dependency Retrofit, OkHttp, Coil, Navigation Compose. Klik Sync Now.

- Buka AndroidManifest.xml, tambahkan permission INTERNET dan atribut usesCleartextTraffic.

5. Isi Kode setiap File/Class

Constants.kt 

Menyimpan nilai konstan yang dipakai di seluruh app, seperti BASE_URL API dan API_KEY. Dipisah di sini supaya mudah diubah tanpa harus buka banyak file.



Article.kt 

Data class yang memetakan struktur satu objek artikel dari response JSON API (title, description, url, gambar, tanggal, sumber). Field yang bisa null ditandai nullable karena tidak semua artikel dari API selalu lengkap datanya.



Source.kt 

Data class kecil untuk objek source yang ada di dalam tiap artikel, berisi id dan nama outlet berita.



NewsResponse.kt 

Wrapper keseluruhan response dari API: berisi status, total hasil, dan list Article. Ini adalah model "paling luar" yang di-parse Gson dari JSON.



NewsApiService.kt 

Interface Retrofit yang mendefinisikan endpoint-endpoint API: getTopHeadlines (berita utama per kategori) dan searchNews (pencarian kata kunci). Setiap fungsi diberi anotasi @GET beserta parameter query-nya.



RetrofitInstance.kt 

Singleton yang membuat satu instance Retrofit dengan base URL, Gson converter, dan OkHttp (termasuk logging interceptor untuk debugging response di Logcat). Pola singleton mencegah pembuatan koneksi baru berulang-ulang.



NewsRepository.kt 

Lapisan perantara antara NewsApiService dan ViewModel. Repository bertugas memanggil API dan mengembalikan hasilnya dalam bentuk Result<T>, sehingga ViewModel tidak perlu tahu detail HTTP request.



NewsUiState.kt 

Sealed class yang merepresentasikan 3 kondisi UI: Loading (sedang fetch), Success (data berhasil dimuat, berisi list artikel), dan Error (gagal, berisi pesan error). Dipakai oleh ViewModel untuk memberi tahu UI kondisi terkini.



NewsViewModel.kt 

Pusat logic: menyimpan state UI sebagai StateFlow, mengelola query pencarian dan kategori terpilih, serta memanggil repository untuk fetch data. Juga meng-handle debounce search (delay sebelum kirim request supaya tidak spam API).



NewsCard.kt 

Composable reusable untuk satu item berita: menampilkan gambar thumbnail (Coil), judul, nama sumber, tanggal, dan bisa di-klik untuk buka DetailScreen. Dipisah dari HomeScreen supaya kode lebih modular.



HomeScreen.kt 

Layar utama: search bar di atas, row chip kategori (All, Business, Technology, dll.), lalu LazyColumn berisi NewsCard untuk setiap artikel. Menampilkan loading indicator saat fetch dan pesan error saat gagal.



DetailScreen.kt 

Layar WebView yang membuka URL artikel langsung di dalam app. Menampilkan top bar dengan tombol back dan judul artikel.



NavGraph.kt

Mendefinisikan 2 route: home dan detail/{url}. URL artikel di-encode supaya aman dipakai sebagai navigation argument.



MainActivity.kt 

Entry point aplikasi, langsung memanggil NavGraph tanpa setup manual tambahan karena NewsViewModel dibuat otomatis oleh Compose (viewModel()).

6. Hasil