Pertemuan 14 - News App
Aplikasi Berita Mobile dengan REST API dan Jetpack Compose
Nama: Christoforus Indra Bagus Pratama
NRP: 5025231124
Mata Kuliah: Pemrograman Perangkat Bergerak
Tanggal: 3 Juni 2026
Pertemuan: 14
Link: Link Github
1. Deskripsi Aplikasi dan Tujuan Pembuatan
1.1 Deskripsi Umum
Project Pertemuan 14 berfokus pada pembuatan aplikasi Berita Mobile berbasis Android. Aplikasi ini memungkinkan pengguna untuk melihat berita terkini dari berbagai sumber, mencari berita berdasarkan keyword, melihat detail artikel lengkap, dan melakukan refresh data secara manual melalui pull-to-refresh. Aplikasi menggunakan NewsAPI sebagai sumber data real-time, Retrofit untuk komunikasi HTTP, dan Jetpack Compose untuk antarmuka pengguna modern yang responsif.
1.2 Tujuan Pembuatan
Tujuan utama pembuatan aplikasi ini adalah memperdalam konsep berikut:
Integrasi REST API: Mempelajari cara berkomunikasi dengan API eksternal menggunakan Retrofit dan menangani response JSON dengan Gson.
Arsitektur MVVM dengan API: Memahami pola MVVM yang menghubungkan UI dengan data dari server melalui Repository dan ViewModel.
Manajemen State Asynchronous: Menggunakan Sealed Class dan StateFlow untuk mengelola state Loading, Success, dan Error.
Navigation Compose yang Kompleks: Menerapkan navigation dengan parameter kompleks melalui URL encoding untuk passing data antar screen.
Pull-to-Refresh dan Loading States: Menerapkan user experience yang baik dengan indikator loading dan kemampuan refresh manual.
Async Image Loading: Menggunakan Coil library untuk memuat gambar dari URL dengan efficient caching.
Penerapan HCI Principles: Merancang UI yang user-friendly, minimalis, modern, dengan proper spacing dan typography sesuai Material Design 3.
2. Arsitektur Aplikasi (MVVM + Retrofit)
2.1 Penjelasan Pola MVVM dengan API
MVVM (Model-View-ViewModel) pada project ini memiliki struktur yang berbeda dengan project berbasis database lokal. View menampilkan UI dan menerima input dari user, ViewModel mengelola state aplikasi dan mengkoordinasikan data flow, Repository mengatur komunikasi dengan API melalui Retrofit, dan API Service mendefinisikan endpoint-endpoint yang digunakan.
2.2 Empat Lapisan dalam Aplikasi Ini
| Lapisan | File/Class | Tanggung Jawab | Penjelasan |
|---|---|---|---|
| View | HomeNewsScreen.kt, SearchNewsScreen.kt, DetailNewsScreen.kt, NewsCard.kt |
Menampilkan UI dan menerima input user | Composable untuk home dengan pull-to-refresh, search screen, detail artikel, dan card item berita. |
| ViewModel | NewsViewModel.kt |
Mengelola state UI dan logika bisnis | Mengatur state untuk top headlines dan search results menggunakan StateFlow, memanggil repository untuk fetch data. |
| Repository | NewsRepository.kt |
Mediator data dari API | Mengatur komunikasi dengan API Service, menangani error, dan menyediakan data ke ViewModel. |
| API & Model | NewsApiService.kt, RetrofitInstance.kt, Article.kt, NewsResponse.kt |
Komunikasi HTTP dan struktur data | Service mendefinisikan endpoint, Retrofit mengelola HTTP client, Model mendefinisikan struktur JSON. |
2.3 Alur Data Aplikasi
Alur data mengikuti pola MVVM yang jelas: UI (Compose) → ViewModel → Repository → Retrofit/API → Server, kemudian hasilnya dikembalikan sebagai state dan UI ter-update secara otomatis melalui StateFlow. Khusus untuk NewsAPI yang memiliki keterbatasan konten, hanya preview artikel yang diterima, sementara URL penuh tersedia untuk membuka artikel lengkap.
| Tahap | Komponen | Aksi |
|---|---|---|
| 1 | User / UI | User membuka app atau menginput keyword pencarian. |
| 2 | View Layer | Compose screen memanggil ViewModel untuk fetch data. |
| 3 | ViewModel | Set state ke Loading, memanggil repository method. |
| 4 | Repository | Memanggil API Service untuk get headlines atau search. |
| 5 | Retrofit/HTTP | Mengirim request ke NewsAPI.org dengan parameter. |
| 6 | NewsAPI Server | Memproses request dan mengembalikan JSON response. |
| 7 | Gson Converter | Mengkonversi JSON ke Kotlin data class (Article, NewsResponse). |
| 8 | ViewModel | Update state ke Success(articles) atau Error(message). |
| 9 | UI (StateFlow) | UI observe StateFlow dan melakukan recomposition dengan data terbaru. |
3. Fitur-Fitur Aplikasi
3.1 Home News Screen (Halaman Utama)
Home News Screen menampilkan daftar berita terkini dari NewsAPI endpoint top-headlines. Fitur utama meliputi: (1) TopAppBar dengan title "News App" dan search icon di sebelah kanan, (2) Pull-to-Refresh untuk refresh data manual dengan gesture tarik ke bawah, (3) LazyColumn untuk menampilkan artikel dalam bentuk NewsCard yang dapat di-scroll, (4) CircularProgressIndicator saat loading, (5) Pesan error dengan tombol retry jika terjadi kesalahan, (6) Pesan kosong jika tidak ada berita tersedia.
3.2 Search News Screen (Halaman Pencarian)
Search News Screen memungkinkan user mencari berita berdasarkan keyword. User dapat mengetik keyword di OutlinedTextField yang mempunyai search icon di sebelah kiri. Pencarian dilakukan real-time saat user mengetik (dengan debouncing implisit melalui user action). Hasil pencarian ditampilkan dalam LazyColumn dengan NewsCard yang sama. State loading dan error juga ditangani dengan baik untuk memberikan feedback visual kepada user.
3.3 Detail News Screen (Halaman Detail Artikel)
Detail News Screen menampilkan informasi lengkap tentang sebuah artikel. Layout terdiri dari: (1) AsyncImage untuk gambar artikel dengan aspect ratio 16:9 yang fixed di atas (tidak ikut scroll), (2) Scrollable content area berisi source name, publish date, title, author, description, dan content (jika ada), (3) Tombol "Buka Artikel Lengkap" untuk membuka URL artikel di browser, (4) TopAppBar dengan back button untuk kembali ke screen sebelumnya.
3.4 NewsCard Component (Komponen Kartu Berita)
NewsCard menampilkan preview artikel dalam bentuk horizontal card layout. Komposisi: (1) AsyncImage 90x90 pixel di sebelah kiri dengan rounded corner, (2) Kolom teks di sebelah kanan dengan: source name (11sp), title (13sp dengan max 2 lines), dan publish date (11sp), (3) Padding dan elevation untuk visual yang ringan dan modern sesuai HCI principles, (4) Clickable modifier untuk navigate ke detail screen.
4. Langkah-Langkah Pembuatan Aplikasi (Detail Implementasi)
4.1 Langkah 1: Persiapan Project dan Dependency
Project dibuat di Android Studio dengan nama "Pertemuan 14" dan package "com.example.pertemuan14". Pada build.gradle.kts, ditambahkan dependency utama: Retrofit dan OkHttp untuk HTTP client, Gson untuk JSON deserialization, Coil untuk async image loading, Coroutines untuk async operations, Compose Navigation untuk routing antar screen, dan Material Compose untuk UI components.
4.2 Langkah 2: Membuat Data Models
Data models dibuat dengan @SerializedName annotation untuk mapping JSON field. Article.kt memiliki field: source (object), author, title, description, url, urlToImage, publishedAt, dan content. NewsResponse.kt membungkus response API dengan field status, totalResults, dan articles list. Source.kt adalah sub-object dengan field id dan name.
4.3 Langkah 3: Konfigurasi Retrofit dan API Service
RetrofitInstance.kt mengatur singleton Retrofit dengan base URL NewsAPI (https://newsapi.org/v2/). NewsApiService.kt mendefinisikan dua endpoint: getTopHeadlines() menggunakan "top-headlines" endpoint untuk fetch berita terkini dengan parameter country=us, dan searchNews(query) menggunakan "everything" endpoint dengan parameter sortBy=relevancy untuk pencarian yang lebih relevan.
4.4 Langkah 4: Membuat Repository
NewsRepository.kt menyediakan abstraksi untuk data operations. Repository menyimpan API key sebagai constant dan menyediakan dua suspend function: getTopHeadlines() dan searchNews(query). Kedua fungsi menangani error exception dan memberikan pesan error yang jelas kepada user.
4.5 Langkah 5: Membuat ViewModel dengan State Management
NewsViewModel.kt mendefinisikan sealed class NewsUiState dengan tiga state: Loading (saat fetch data), Success(articles) (saat berhasil), dan Error(message) (saat gagal). ViewModel menyediakan StateFlow untuk uiState (berita terkini) dan searchResults (hasil pencarian). Method loadTopHeadlines(), searchNews(query), dan retryLoadNews() mengelola state transitions dengan memanggil repository dalam viewModelScope.
4.6 Langkah 6: Membuat Navigation Structure
NewsAppNavigation.kt mengatur tiga route: Home (home), Search (search), dan Detail (detail/{articleJson}). Detail route menggunakan Gson untuk serialize/deserialize Article object melalui URL parameter dengan URLEncoder/URLDecoder untuk safe transmission. NavHost diatur dengan Home sebagai startDestination.
4.7 Langkah 7: Membuat UI Screens dengan Jetpack Compose
Tiga screen utama dibuat: HomeNewsScreen dengan pull-to-refresh dan error handling, SearchNewsScreen dengan OutlinedTextField dan real-time search, DetailNewsScreen dengan fixed image dan scrollable content. Setiap screen mengunakan Scaffold untuk konsistensi layout, TopAppBar untuk header, dan state management melalui ViewModel.
4.8 Langkah 8: Setup MainActivity dan Theme
MainActivity.kt menggunakan ComponentActivity dengan setContent untuk render Compose UI. NavController dibuat dengan rememberNavController() dan NewsAppNavigation ditampilkan dalam Pertemuan14Theme. Theme mengikuti Material 3 dengan color scheme yang konsisten.
5. Penjelasan File-File Utama dan Tujuan Masing-Masing
5.1 Tabel Ringkasan File-File Utama
| Kategori | File | Tujuan | Isi Kode Utama |
|---|---|---|---|
| Entry Point | MainActivity.kt |
Activity utama aplikasi | Setup NavController, render NewsAppNavigation dalam theme. |
AndroidManifest.xml |
Konfigurasi manifest | MainActivity sebagai launcher, permission INTERNET untuk API calls. | |
| UI/View Layer | ui/screen/HomeNewsScreen.kt |
Layar utama berita terkini | TopAppBar 64dp, pull-to-refresh, LazyColumn dengan NewsCard, state handling. |
ui/screen/SearchNewsScreen.kt |
Layar pencarian berita | OutlinedTextField dengan search icon, real-time search, hasil dalam LazyColumn. | |
ui/screen/DetailNewsScreen.kt |
Layar detail artikel | Fixed AsyncImage top (16:9 ratio), scrollable content, "Buka Artikel Lengkap" button. | |
ui/component/NewsCard.kt |
Komponen kartu berita | Horizontal layout dengan image 90x90, text info, clickable untuk detail. | |
| Navigation | ui/navigation/NewsAppNavigation.kt |
Routing antar screen | NavHost dengan tiga route, Article serialization via Gson dan URL encoding. |
| ViewModel Layer | viewmodel/NewsViewModel.kt |
State management dan logika | Sealed class NewsUiState, StateFlow untuk uiState dan searchResults, method load/search/retry. |
| Data Layer - API | api/NewsApiService.kt |
Retrofit interface untuk API | @GET endpoints untuk top-headlines dan everything dengan query parameters. |
api/RetrofitInstance.kt |
Konfigurasi Retrofit instance | Singleton Retrofit dengan base URL dan GsonConverterFactory. | |
data/NewsRepository.kt |
Repository untuk data operations | Suspend function getTopHeadlines() dan searchNews(), error handling. | |
| Data Layer - Models | data/Article.kt |
Model artikel dari API | @SerializedName annotations untuk mapping JSON, Serializable untuk navigation. |
data/NewsResponse.kt |
Model response API | Wrapper dengan status, totalResults, articles list. | |
data/Source.kt |
Model source berita | Object dengan id dan name dari JSON response. | |
| Theme & Resources | ui/theme/Color.kt |
Definisi warna Material 3 | Primary, secondary, error colors untuk light dan dark theme. |
ui/theme/Theme.kt |
Konfigurasi MaterialTheme | Material 3 theme dengan dynamic color support. | |
ui/theme/Type.kt |
Typography aplikasi | Font family dan predefined text styles. | |
| Config & Build | build.gradle.kts |
Konfigurasi build dan dependency | Retrofit, OkHttp, Coroutines, Coil, Compose Navigation, Gson. |
6. Struktur Folder dan Alur Komunikasi Data dengan API
6.1 Struktur Folder Aplikasi
Pertemuan 14/
├── app/
│ ├── build.gradle.kts
│ └── src/
│ └── main/
│ ├── AndroidManifest.xml
│ ├── java/com/example/pertemuan14/
│ │ ├── MainActivity.kt
│ │ ├── api/
│ │ │ ├── NewsApiService.kt
│ │ │ └── RetrofitInstance.kt
│ │ ├── data/
│ │ │ ├── Article.kt
│ │ │ ├── NewsResponse.kt
│ │ │ ├── Source.kt
│ │ │ └── NewsRepository.kt
│ │ ├── viewmodel/
│ │ │ ├── NewsUiState.kt
│ │ │ └── NewsViewModel.kt
│ │ └── ui/
│ │ ├── screen/
│ │ │ ├── HomeNewsScreen.kt
│ │ │ ├── SearchNewsScreen.kt
│ │ │ └── DetailNewsScreen.kt
│ │ ├── component/
│ │ │ └── NewsCard.kt
│ │ ├── navigation/
│ │ │ └── NewsAppNavigation.kt
│ │ └── theme/
│ │ ├── Color.kt
│ │ ├── Theme.kt
│ │ └── Type.kt
│ └── res/
│ ├── values/
│ │ ├── strings.xml
│ │ ├── colors.xml
│ │ └── themes.xml
│ ├── drawable/
│ │ ├── ic_launcher_background.xml
│ │ └── ic_launcher_foreground.xml
│ └── mipmap-*/
│ └── ic_launcher.webp
├── build.gradle.kts (root)
├── settings.gradle.kts
└── gradle/6.2 Penjelasan Struktur Folder
| Folder/File | Kegunaan | Penjelasan |
|---|---|---|
api/ |
HTTP Communication | Retrofit service interface dan instance singleton untuk komunikasi dengan NewsAPI. |
data/ |
Data Models & Repository | Entity classes (Article, NewsResponse, Source) dan Repository yang mengatur data flow dari API. |
viewmodel/ |
State Management | NewsViewModel yang mengelola state UI, sealed class NewsUiState, dan interaksi dengan Repository. |
ui/screen/ |
UI Screens | Composable screens untuk Home, Search, dan Detail berita dengan state handling. |
ui/component/ |
Reusable UI Components | NewsCard component untuk tampilan artikel dalam list. |
ui/navigation/ |
Navigation Setup | NavHost configuration dan route definitions dengan parameter passing. |
ui/theme/ |
Styling & Theme | Color palette, Material 3 theme, dan typography definitions. |
6.3 Alur Komunikasi Data dengan API (Data Flow)
Alur komunikasi data mengikuti proses berikut secara terstruktur:
User Action: User membuka app atau menginput keyword pencarian di HomeNewsScreen atau SearchNewsScreen.
ViewModel Request: Screen memanggil ViewModel method (loadTopHeadlines atau searchNews).
State Loading: ViewModel set state ke NewsUiState.Loading untuk menampilkan progress indicator.
Repository Call: ViewModel memanggil Repository suspend function dengan viewModelScope.
API Request: Repository memanggil NewsApiService endpoint dengan parameter (country=us, atau query string).
HTTP Communication: Retrofit mengirim HTTP request ke NewsAPI.org dengan API key di parameter.
JSON Response: Server mengirim JSON response dengan articles array.
Deserialization: Gson converter mengubah JSON ke Kotlin data class (NewsResponse dan Article).
State Success/Error: Repository mengembalikan result ke ViewModel. ViewModel set state ke Success(articles) atau Error(message).
UI Update: UI observe StateFlow dan melakukan recomposition otomatis dengan data/error message.
7. Cara Pengujian di Android Studio
7.1 Persiapan Sebelum Testing
Buka Project: Buka folder Pertemuan 14 di Android Studio dan tunggu Gradle indexing selesai.
Gradle Sync: Pastikan semua dependency Retrofit, Coil, Coroutines ter-download dengan benar.
Network Access: Pastikan emulator/device memiliki akses internet untuk komunikasi dengan NewsAPI.org.
Build Check: Jalankan Build → Make Project (Ctrl+F9) dan pastikan tidak ada compilation error.
7.2 Langkah-Langkah Testing
Clean & Build: Jalankan Build → Clean Project, dilanjutkan Build → Rebuild Project.
Setup Device: Siapkan Android Emulator atau connect device fisik yang sudah enable developer mode.
Run Application: Tekan tombol Run (Shift+F10) dan pilih target device untuk menjalankan aplikasi.
Verify Installation: Tunggu app terinstall dan launch, pastikan tidak ada crash saat startup.
7.3 Skenario Testing Fungsional
| No | Skenario | Aksi | Expected Result |
|---|---|---|---|
| 1 | Load Berita Terkini | Buka app, HomeNewsScreen tampil | Loading indicator muncul, kemudian daftar berita terkini ter-display dengan NewsCard. |
| 2 | Pull-to-Refresh | Drag layar ke bawah dari atas | Refresh animation muncul, data di-refresh dari API. |
| 3 | Buka Detail Artikel | Klik salah satu NewsCard | Navigate ke DetailNewsScreen dengan image, title, author, description, content, dan button. |
| 4 | Scroll Detail Content | Drag konten ke atas di DetailNewsScreen | Hanya konten teks yang scroll, image tetap fix di atas. |
| 5 | Buka Artikel Lengkap | Klik button "Buka Artikel Lengkap" | Browser terbuka dengan URL artikel di website sumber. |
| 6 | Cari Berita | Klik search icon, input keyword "technology" | SearchNewsScreen tampil, hasil pencarian ter-display sesuai keyword. |
| 7 | Search Real-time | Ketik lebih banyak character di search bar | Hasil search ter-update real-time sesuai input. |
| 8 | Error Handling | Disconnect network, try refresh atau search | Error message ter-display dengan tombol retry untuk mencoba lagi. |
| 9 | Back Navigation | Dari DetailNewsScreen, klik back button | Kembali ke HomeNewsScreen atau SearchNewsScreen sebelumnya. |
8. Hasil Pengujian
Berikut ringkasan hasil observasi dari beberapa kondisi uji utama.
| Kondisi Uji | Hasil Observasi | Screenshot Hasil |
|---|---|---|
| Kondisi 1: Home Screen - Loading |
|
 |
| Kondisi 2: Home Screen - Data Loaded |
|
 |
| Kondisi 3: Detail Screen |
|
 |
| Kondisi 4: Search Screen |
|
 |
| Kondisi 5: Error State |
|
  |
9. Catatan Teknis dan Keterbatasan
9.1 Keterbatasan API NewsAPI
NewsAPI memiliki beberapa keterbatasan yang perlu diketahui. Pertama, field "content" dari API hanya memberikan preview artikel sekitar 160 karakter dan diakhiri dengan "[+...]" atau "[XXXX+ chars]" sebagai truncation marker. Ini adalah design dari NewsAPI untuk melindungi hak cipta dan mendorong traffic ke website asli. Kedua, field "description" juga terbatas hingga sekitar 200 karakter. Solusi yang diterapkan adalah menampilkan button "Buka Artikel Lengkap" yang membuka URL asli di browser untuk membaca artikel lengkap.
9.2 Implementasi Content Cleaning
Untuk menangani truncation marker, diterapkan regex cleaning pada DetailNewsScreen menggunakan `.replace(Regex("\\s*\\[\\d+\\s+chars?\\]$"), "")`. Ini menghapus suffix seperti "[5215 char]" atau "[+...]" yang muncul di akhir content field.
9.3 Search API Parameters
Search menggunakan endpoint "everything" dengan sortBy=relevancy untuk menampilkan hasil paling relevan terhadap keyword, dan pageSize=50 untuk menampilkan lebih banyak hasil. Ini memastikan user mendapatkan hasil pencarian yang akurat dan relevan dengan query mereka.
9.4 HCI Implementation
Desain aplikasi menerapkan prinsip HCI (Human-Computer Interaction) modern: proper touch target sizes (56dp untuk search bar), minimalist design dengan lightweight components, modern aesthetic menggunakan Material 3, consistent spacing dan typography, dan visual feedback yang jelas (loading indicators, error messages, pull-to-refresh animation).
10. Kesimpulan
Project Aplikasi Berita pada Pertemuan 14 berhasil mengimplementasikan pola MVVM yang kompleks dengan integrasi REST API, state management asynchronous, serta navigation yang sophisticated. Aplikasi mendemonstrasikan kemampuan untuk berkomunikasi dengan API eksternal, menangani berbagai state (Loading, Success, Error), menampilkan data secara real-time, dan memberikan user experience yang baik melalui pull-to-refresh, search functionality, dan detail view yang interaktif.
Dari project ini, diperoleh pemahaman mendalam tentang arsitektur aplikasi Android modern, networking dengan Retrofit, JSON handling dengan Gson, async image loading dengan Coil, navigation Compose dengan parameter passing, dan penerapan HCI principles dalam desain UI. Aplikasi ini menunjukkan best practices dalam Android development dan dapat dikembangkan lebih lanjut dengan fitur seperti pagination, offline caching, dan bookmarking artikel.
Komentar
Posting Komentar