PPB C - Pertemuan 14 - News App (REST API)

5025221103 | Hilmi Fawwaz Sa'ad | Pertemuan 13 | PPB C

News App (REST API)

Pada tugas kali ini, saya membuat sebuah aplikasi News App menggunakan bahasa pemrograman Kotlin pada Android Studio dengan memanfaatkan Jetpack Compose untuk membangun antarmuka pengguna yang modern dan responsif. Aplikasi ini terintegrasi dengan NewsAPI melalui implementasi REST API menggunakan Retrofit dan OkHttp untuk mengambil serta menampilkan berita terbaru secara real-time dari berbagai kategori. Aplikasi menerapkan arsitektur MVVM (Model-View-ViewModel) dan Repository Pattern agar struktur kode lebih terorganisir, modular, dan mudah dikembangkan. Pengelolaan state dilakukan menggunakan StateFlow dan MutableStateFlow, sedangkan proses asynchronous memanfaatkan Kotlin Coroutines sehingga komunikasi dengan API dapat berjalan secara efisien. Fitur utama yang tersedia meliputi menampilkan headline berita berdasarkan kategori, pencarian berita secara real-time dengan mekanisme debounce, melihat detail artikel, membagikan artikel, membuka artikel asli melalui browser, serta dukungan pagination, infinite scroll, dan pull-to-refresh untuk meningkatkan pengalaman pengguna. Selain itu, aplikasi juga menggunakan Navigation Compose untuk navigasi antar halaman, skeleton loading sebagai placeholder saat data dimuat, serta centralized error handling melalui sealed class Result agar penanganan kesalahan menjadi lebih aman dan terstruktur. Dengan penerapan teknologi dan arsitektur tersebut, aplikasi News App dapat berjalan secara optimal, memberikan pengalaman membaca berita yang lebih interaktif, serta menunjukkan implementasi REST API pada pengembangan aplikasi Android modern.

Repository Github : News App

1. Buka Android Studio

2. Pilih "Project Baru"

3. Pilih "Empty Activity" dan pilih "Next"

4. Isi konfigurasi sesuai dengan project yang dikerjakan dan pilih "Finish"

5. Buat file News.kt pada direktori data/model/ untuk mendefinisikan struktur data yang akan dipakai di seluruh aplikasi. File ini berisi tiga data class: NewsResponse sebagai wrapper response API, Article sebagai entitas berita dengan field title, description, url, urlToImage, publishedAt, source, author, dan content, serta Source untuk data sumber berita. Tambahkan computed properties seperti safeTitle dan safeContent langsung di Article agar UI tidak perlu handle null secara manual. Gunakan anotasi @SerializedName dari Gson untuk mapping nama field dari JSON API.

6. Buat file ApiService.kt pada direktori data/api/ untuk mendefinisikan kontrak komunikasi dengan NewsAPI menggunakan Retrofit interface. File ini berisi dua fungsi suspend: getTopHeadlines() dengan endpoint top-headlines dan parameter country, category, pageSize, page, serta searchNews() dengan endpoint everything dan parameter q dan sortBy. Kedua fungsi mengembalikan NewsResponse yang sudah dibuat di langkah sebelumnya.

7. Buat file RetrofitInstance.kt pada direktori data/api/ untuk menyediakan instance Retrofit sebagai singleton menggunakan object. Di dalamnya, konfigurasi OkHttpClient dengan HttpLoggingInterceptor yang aktif hanya saat debug, lalu timeout koneksi 30 detik. Instance Retrofit dibuat secara lazy dengan mengambil BASE_URL dari BuildConfig, kemudian expose property api: ApiService yang juga lazy agar instance tidak dibuat sampai benar-benar dibutuhkan.

8. . Buat file NewsRepository.kt pada direktori data/repository/ untuk menjadi jembatan antara ViewModel dan API, sekaligus tempat error handling terpusat. Definisikan sealed class Result<T> dengan dua subclass, Success dan Error, agar hasil pemanggilan API bisa di-handle secara type-safe di ViewModel. Implementasikan dua fungsi suspend: getTopHeadlines() dan searchNews(), keduanya berjalan di Dispatchers.IO dan memfilter artikel yang title-nya null atau bernilai "[Removed]" sebelum dikembalikan.

9. Buat file NewsViewModel.kt pada direktori viewmodel/ untuk mengelola seluruh state dan logika bisnis aplikasi. Buat data class NewsUiState yang menampung semua state UI: list headlines dan searchResults, loading flags, error messages, selectedCategory, searchQuery, dan variabel pagination currentPage serta hasMoreHeadlines. Gunakan MutableStateFlow untuk state management. Implementasikan fungsi loadTopHeadlines() dengan support pagination, refreshHeadlines() untuk pull-to-refresh, selectCategory() yang reset pagination saat kategori berganti, serta onSearchQueryChange() dengan debounce 500ms menggunakan delay dan cancel Job sebelumnya.

10. Buat file NewsCard.kt pada direktori ui/component/ untuk menyediakan komponen card berita yang akan dipakai di banyak screen. File ini berisi tiga composable: NewsCard untuk tampilan card standar dengan gambar, chip source, judul, dan deskripsi; NewsCardFeatured untuk card horizontal 280×200dp dengan overlay semi-transparan di atas gambar yang dipakai di bagian Top Stories; dan NewsCardSkeleton sebagai placeholder shimmer saat data masih loading menggunakan Box dengan clip(RoundedCornerShape).

11. Buat file HomeScreen.kt pada direktori ui/screen/ untuk menampilkan halaman utama aplikasi. Screen ini menggunakan LazyColumn dengan beberapa section: CategoryChips berupa LazyRow filter chip untuk memilih kategori, FeaturedSection berupa LazyRow yang menampilkan tiga artikel pertama sebagai NewsCardFeatured, lalu sisanya ditampilkan sebagai NewsCard biasa. Implementasikan pull-to-refresh menggunakan PullRefreshIndicator dan infinite scroll dengan derivedStateOf yang men-trigger loadMoreHeadlines() ketika item terakhir yang terlihat sudah dekat ujung list.

12. Buat file SearchScreen.kt pada direktori ui/screen/ untuk menampilkan halaman pencarian berita. Search bar ditempatkan langsung di dalam TopAppBar menggunakan OutlinedTextField dengan auto-focus saat screen pertama kali muncul via FocusRequester. Handle empat kondisi tampilan: query kosong menampilkan ilustrasi prompt, sedang loading menampilkan skeleton, tidak ada hasil menampilkan pesan kosong, dan ada hasil menampilkan list NewsCard dengan infinite scroll.

13. Buat file DetailScreen.kt pada direktori ui/screen/ untuk menampilkan detail lengkap sebuah artikel. Screen ini menggunakan scrollable Column dengan layout berurutan: hero image 240dp, chip nama source, judul artikel, avatar author dengan initial huruf pertama di dalam circle, tanggal format lengkap, divider, deskripsi bold, konten artikel, dan card "Read full article" dengan button yang membuka URL artikel di browser. Tombol share di TopAppBar menggunakan Intent.ACTION_SEND untuk membagikan judul dan URL artikel.

14. Buat file MainActivity.kt sebagai entry point aplikasi sekaligus tempat setup navigasi. Buat object Routes yang berisi konstanta HOME, SEARCH, dan DETAIL. Di dalam composable NewsApp, inisialisasi satu NewsViewModel yang di-share ke semua screen, collect uiState menggunakan collectAsStateWithLifecycle, dan gunakan var selectedArticle sebagai penampung artikel yang diklik sebelum berpindah ke DetailScreen. Setup NavHost dengan tiga route yang menghubungkan HomeScreen, SearchScreen, dan DetailScreen.