Pertemuan 14 - News App

1. Deskripsi Proyek

NewsApp adalah sebuah aplikasi mobile Android modern yang dirancang untuk menyajikan berita terkini secara cepat, efisien, dan interaktif. Aplikasi ini dibangun menggunakan teknologi native Android terbaru, yaitu bahasa pemrograman Kotlin dan toolkit UI deklaratif Jetpack Compose.

Dengan mengadopsi pola arsitektur MVVM (Model-View-ViewModel), aplikasi ini memastikan pemisahan kode yang bersih (clean code) antara logika bisnis (data/repository), logika presentasi (viewmodel), dan tampilan UI (screens/components). Aplikasi ini mendukung pengambilan data berita langsung dari internet melalui integrasi dengan NewsAPI menggunakan library networking Retrofit, serta dilengkapi dengan mekanisme fallback berupa Mock Data lokal apabila terjadi gangguan koneksi internet atau kunci API (API Key) belum dikonfigurasi.

2. Fitur-Fitur Aplikasi

Aplikasi NewsApp dilengkapi dengan beberapa fitur utama untuk memberikan pengalaman terbaik kepada pengguna dalam membaca berita:

Halaman Utama (Home Screen / Tab Home): Menampilkan berita utama teratas (Featured News) menggunakan komponen kartu visual berukuran besar, diikuti dengan daftar berita terbaru lainnya (Breaking News) secara vertikal. Terdapat pula fungsi penanganan error (Retry Button) jika pengambilan data gagal.
Fitur Pencarian (Search Screen / Tab Search): Pengguna dapat mencari berita berdasarkan kata kunci tertentu secara real-time. Tampilan hasil pencarian diperbarui secara otomatis ketika pengguna mengetik kata kunci pada kotak pencarian.
Fitur Simpan Berita (Saved Screen / Tab Saved): Fitur bookmark yang memungkinkan pengguna untuk menyimpan artikel berita yang mereka sukai. Artikel yang disimpan akan masuk ke tab "Saved" dan dapat diakses kembali dengan cepat.
Halaman Detail Berita (Detail Screen): Ketika salah satu kartu berita ditekan, pengguna akan diarahkan ke halaman detail berita yang menampilkan gambar artikel penuh, kategori/sumber berita, waktu penerbitan (dengan format relatif seperti "2 hours ago"), judul utama, deskripsi singkat, serta konten artikel yang komprehensif. Halaman ini juga memiliki tombol aksi untuk menyimpan/menghapus berita dari bookmark dan membagikan berita (share placeholder).
Dukungan Offline (Offline & Network Fallback): Sistem repositori aplikasi secara cerdas mendeteksi ketersediaan API Key atau koneksi internet. Jika tidak tersedia, aplikasi secara otomatis menampilkan data berita simulasi (Mock Data) yang dinamis agar aplikasi tetap fungsional.

3. Teknologi dan Library (Tech Stack)

Berikut adalah komponen teknologi utama yang diintegrasikan dalam pengembangan aplikasi ini:

Teknologi / Library	Kategori	Deskripsi / Fungsi
Kotlin	Bahasa Pemrograman	Bahasa pemrograman modern yang ringkas dan aman untuk pengembangan aplikasi Android native.
Jetpack Compose	UI Toolkit	Toolkit modern dari Google untuk mendesain antarmuka pengguna Android secara deklaratif dengan lebih sedikit kode dan transisi yang halus.
MVVM Architecture	Pola Desain Perangkat Lunak	Pola arsitektur untuk memisahkan UI (View) dari data dan logika bisnis (Model) dengan dimediasi oleh StateFlow (ViewModel).
Retrofit 2 & Gson	Networking & Parsing Data	Library HTTP client yang aman type-safe untuk melakukan REST API request ke endpoint NewsAPI dan melakukan serialisasi data JSON menjadi objek Kotlin.
Kotlin Coroutines	Asynchronous Programming	Mekanisme concurrency untuk menjalankan tugas-tugas berat di background thread (seperti HTTP requests) tanpa memblokir thread UI utama.
Coil (Compose Image Loader)	Image Loading	Library pemuatan gambar asinkron yang dioptimalkan untuk Jetpack Compose guna memuat gambar dari URL internet secara cepat.
Compose Navigation	Navigasi Aplikasi	Mengatur alur navigasi antar-halaman (Home ke Detail) dengan aman menggunakan rute berbasis URI dan transfer parameter terenkripsi.
StateFlow & LiveData	State Management	Observabilitas data stream yang reaktif untuk memperbarui UI secara real-time saat status data berubah (Loading, Success, Error).

4. Struktur Direktori Proyek

Kode sumber aplikasi ini diorganisasikan secara rapi ke dalam paket-paket logis berikut:

com.aflabs.newsapp/
│
├── MainActivity.kt               - Titik masuk utama aplikasi yang menginisialisasi tema dan graf navigasi.
│
├── data/                         - Menyimpan logika data dan interaksi eksternal (API / Repositori).
│   ├── api/
│   │   ├── ApiService.kt         - Interface definisi endpoint REST API menggunakan Retrofit.
│   │   └── RetrofitClient.kt     - Singleton instansiasi Retrofit dengan base URL NewsAPI.
│   ├── model/
│   │   ├── Article.kt            - Model data representasi entitas artikel berita.
│   │   └── NewsResponse.kt       - Model wrapper untuk merespons struktur JSON dari NewsAPI.
│   └── repository/
│       └── NewsRepository.kt     - Penghubung data yang mengelola logika loading data API atau Mock lokal.
│
├── viewmodel/                    - Menangani logika presentasi dan pemeliharaan status UI.
│   └── NewsViewModel.kt          - ViewModel yang memproses state UI (Loading, Success, Error) menggunakan StateFlow.
│
├── navigation/                   - Mengatur perpindahan antar-halaman dalam aplikasi.
│   └── NavGraph.kt               - Definisi rute, NavHost, dan passing parameter berbentuk JSON terevaluasi.
│
└── ui/                           - Mengandung semua komponen antarmuka pengguna Jetpack Compose.
    ├── components/
    │   └── NewsCard.kt           - Desain kartu berita visual (FeaturedNewsCard dan reguler NewsCard).
    └── screens/
        ├── HomeScreen.kt         - Tampilan tab Home (berita utama & Breaking News) dan tab Saved (bookmark).
        ├── SearchScreen.kt       - Tampilan tab Search untuk memasukkan query dan menampilkan hasil pencarian.
        └── DetailScreen.kt       - Tampilan detail berita lengkap beserta tombol bookmark dan share.

5. Analisis Alur Kerja Aplikasi (Workflow)

Inisialisasi: Aplikasi dijalankan melalui MainActivity, yang memanggil AppNavGraph untuk menyiapkan navigasi. NavGraph meluncurkan rute awal "home" yang menampilkan HomeScreen.
Pengambilan Data: NewsViewModel diinisialisasi dan segera memanggil fungsi loadNews() yang menjalankan coroutine untuk meminta berita terpopuler melalui NewsRepository. State UI diubah menjadi NewsUiState.Loading.
Penyajian Data Berita: Repositori memeriksa keberadaan kunci API. Jika ada, data diambil dari server NewsAPI. Jika tidak, data diambil dari daftar mockArticles. Jika berhasil, state berubah menjadi NewsUiState.Success(articles), memicu HomeScreen untuk merender konten menggunakan FeaturedNewsCard dan LazyColumn dari NewsCard. Jika gagal, state berubah menjadi NewsUiState.Error dengan opsi tombol "Retry".
Navigasi ke Detail: Saat pengguna menekan salah satu berita, objek Article dikonversi menjadi string JSON menggunakan library Gson, disandikan (URL-encode), kemudian dikirimkan sebagai argumen navigasi ke rute "detail/{articleJson}".
Interaksi Detail: DetailScreen mendekode argumen tersebut kembali menjadi objek Article dan menampilkannya secara detail. Pengguna dapat menekan tombol bookmark untuk menyimpan artikel tersebut secara dinamis ke dalam list savedArticles pada ViewModel.

6. Cara Menjalankan Aplikasi

Untuk menjalankan aplikasi ini di lingkungan pengembangan lokal, ikuti langkah-langkah berikut:

Buka aplikasi Android Studio (versi Koala ke atas direkomendasikan).
Pilih menu File > Open, lalu arahkan ke direktori proyek NewsApp ini.
Tunggu proses sinkronisasi Gradle (Gradle Sync) selesai. Pastikan komputer Anda terhubung ke internet untuk mengunduh library dependensi yang didefinisikan pada file build.gradle.
(Opsional) Jika ingin menggunakan data berita online nyata, buka file NewsRepository.kt dan ganti nilai variabel apiKey = "YOUR_API_KEY" dengan kunci API terdaftar Anda dari newsapi.org. Jika dibiarkan default, aplikasi akan otomatis menggunakan data simulasi lokal (Mock Data).
Sambungkan perangkat fisik Android melalui USB Debugging atau gunakan Android Virtual Device (Emulator).
Klik tombol Run 'app' (ikon segitiga hijau) di toolbar Android Studio untuk melakukan kompilasi dan menginstal aplikasi ke perangkat Anda.

Hasil Preview

Link Repository:

https://github.com/afadhilah/AndroidStudioProjects/tree/main/NewsApp

Search This Blog

Tugas-Tugas