Minggu, 31 Maret 2024

Tugas 3 - HappyBirthday

Pada kesempatan ini saya akan meampilkan ucapan happy birthday dengan menggunakan jetpack compose. Jetpack Compose adalah toolkit modern untuk pembangunan antarmuka pengguna (UI) dalam aplikasi Android, yang diperkenalkan oleh Google sebagai alternatif terhadap pendekatan konvensional menggunakan XML untuk menentukan tata letak UI. Dengan menggunakan Compose, pengembang dapat membuat UI dengan menggunakan kode Kotlin biasa, yang memungkinkan mereka untuk mendefinisikan tampilan dan perilaku UI secara deklaratif dan berbasis komponen.
Berikut adalah beberapa poin penting tentang Jetpack Compose:

1. Deklaratif: Compose menggunakan pendekatan deklaratif dalam pembangunan UI, yang berarti pengembang mendefinisikan tampilan dan perilaku UI dengan mendeklarasikan bagaimana UI seharusnya terlihat pada suatu waktu tertentu, bukan secara imperatif yang memerintahkan langkah-langkah untuk menghasilkan tampilan yang diinginkan. Pendekatan ini mempermudah pemahaman dan pemeliharaan kode.

2. Komponen Berbasis: UI dalam Compose dibangun menggunakan berbagai komponen yang dapat digunakan kembali, seperti `Text`, `Button`, `Column`, `Row`, dan banyak lagi. Komponen-komponen ini dapat dikombinasikan dan disusun sesuai kebutuhan untuk membentuk UI yang lebih kompleks. Penggunaan komponen-komponen ini memudahkan dalam pembuatan UI yang konsisten dan mengurangi duplikasi kode.

3. Pemutakhiran Otomatis: Salah satu fitur penting dari Compose adalah pemutakhiran otomatis UI. Compose secara otomatis mendeteksi perubahan dalam data yang digunakan untuk membangun UI, dan secara cerdas memperbarui UI sesuai dengan perubahan tersebut. Hal ini menghilangkan kebutuhan untuk mengelola siklus hidup UI secara manual, seperti yang sering terjadi dalam pendekatan XML Layouts.

4. Peningkatan Produktivitas: Pembangunan UI dengan Compose dapat meningkatkan produktivitas pengembang. Kode Kotlin biasa lebih ekspresif dan dapat memanfaatkan fitur-fitur bahasa Kotlin, seperti ekstensi, fungsi pembantu, dan lain-lain. Ini memungkinkan pengembang untuk menulis kode dengan lebih cepat dan lebih efisien.

5. Pengujian yang Mudah: Compose menyediakan alat bawaan yang memudahkan dalam menulis dan menjalankan pengujian UI. Fitur seperti preview langsung memungkinkan pengembang untuk melihat tampilan UI mereka secara real-time saat mereka menulis kode, sehingga memudahkan dalam proses pengujian dan iterasi.

6. Kompabilitas dengan Ekosistem Jetpack: Compose merupakan bagian dari ekosistem Jetpack, yang menyediakan berbagai alat dan komponen tambahan untuk mempercepat pengembangan aplikasi Android. Compose dapat dengan mudah diintegrasikan dengan komponen Jetpack lainnya, seperti ViewModel, LiveData, dan Room Database.

Jetpack Compose menghadirkan pengalaman pengembangan UI yang lebih interaktif, dinamis, dan responsif untuk pengembang Android. Dengan pendekatan yang deklaratif dan berbasis komponen, serta fitur-fitur seperti pemutakhiran otomatis dan pengujian yang mudah, Compose membantu mempercepat siklus pengembangan dan meningkatkan kualitas aplikasi Android.

Berikut adalah source code dan tampilanya:






Jumat, 29 Maret 2024

Tugas 4 Dice Roller App

Pada kesempatan kali ini saya akan berlatih membuat aplikasi interaktif dice roller app menggunakan jetpack compose dengan kotlin untuk tata letak aplikasi. Dari pembuatan aplikasi ini akan belajar tentang:

  • Cara menambahkan composable Button ke aplikasi Android dengan Compose.
  • Cara menambahkan perilaku ke composable Button di aplikasi Android dengan Compose.
  • Cara membuka dan mengubah kode Activity untuk aplikasi Android. 

1.Pertama kita membuat project bernama dice roller pada android studio.



2. Kedua adalah dengan membuat tata letak aplikasi dengan cara sebagai berikut:
  • Klik Build & Refresh di panel Split atau Design, setelah muncul greeting preview pada panel desain yang bertuliskan "Hello Android!" kita akan mengubah tata letak nya.
  • Rubah struktur kode pada file bernama MainActivity.kt Sebagai berikut:
  • Hapus fungsi DefaultPreview().
  • Buat fungsi DiceWithButtonAndImage() dengan anotasi @Composable.
  • Hapus fungsi Greeting(name: String).
  • Buat fungsi DiceRollerApp() dengan anotasi @Preview dan @Composable.
  • Hapus semua kode di dalam lambda setContent{} yang ditemukan dalam metode onCreate().
  • Di bagian lambda setContent{}, panggil lambda DiceRollerTheme{}, lalu di dalam lambda DiceRollerTheme{}, panggil fungsi DiceRollerApp()

  • Di fungsi DiceRollerApp(), panggil fungsi DiceWithButtonAndImage()
           
3. Selanjutnya kita tambahkan pengubah, Compose menggunakan objek Modifier yang merupakan kumpulan elemen yang mendekorasi atau mengubah perilaku elemen UI Compose. Anda menggunakannya untuk menata gaya komponen UI dari komponen aplikasi Dice Roller.
  • Pada MainActivity.kt ubah fungsi DiceWithButtonAndImage() untuk menerima argumen modifier dari jenis Modifier dan tetapkan nilai default Modifier.

          
  • Setelah composable DiceWithButtonAndImage() memiliki parameter pengubah, teruskan pengubah saat composable dipanggil. Tanda tangan metode untuk fungsi DiceWithButtonAndImage() mengalami perubahan sehingga objek Modifier dengan dekorasi yang diinginkan harus diteruskan saat dipanggil. Class Modifier bertanggung jawab atas dekorasi, atau penambahan perilaku, pada composable di fungsi DiceRollerApp(). Dalam hal ini, ada beberapa dekorasi penting yang dapat ditambahkan ke objek Modifier yang diteruskan ke fungsi DiceWithButtonAndImage().
  • Buat rantai metode fillMaxSize() ke objek Modifier sehingga tata letak mengisi seluruh layar.
  • Buat rantai metode wrapContentSize() ke objek Modifier, lalu teruskan Alignment.Center sebagai argumen untuk memusatkan komponen. Alignment.Center menentukan bahwa komponen dipusatkan secara vertikal dan horizontal.
4. Membuat tata letak vertikal.
Di Compose, tata letak vertikal dibuat dengan fungsi Column(). Fungsi Column() adalah tata letak composable yang menempatkan turunannya dalam urutan vertikal. Di desain aplikasi yang diharapkan, Anda dapat melihat bahwa gambar dadu ditampilkan secara vertikal di atas tombol lempar:
  • Dalam fungsi DiceWithButtonAndImage(), tambahkan fungsi Column().
  • Teruskan argumen modifier dari tanda tangan metode DiceWithImageAndButton() ke argumen pengubah Column().
  • Teruskan argumen horizontalAlignment ke fungsi Column(), lalu tetapkan ke nilai Alignment.CenterHorizontally.

5. Menambahkan tombol
  • Di file strings.xml, tambahkan string dan tetapkan ke nilai Roll
  • <string name="roll">Roll</string>
  • Dalam isi lambda Column(), tambahkan fungsi Button().
  • Di file MainActivity.kt, tambahkan fungsi Text() ke Button() dalam isi lambda fungsi.
  • Teruskan ID resource string dari string roll ke fungsi stringResource() dan teruskan hasilnya ke composable Text.

6. Menambahkan gambar.
  • Buka URL ini untuk mendownload file zip gambar dadu ke komputer, lalu tunggu download selesai.
  • Ekstrak file zip untuk membuat folder dice_images baru yang berisi enam file gambar dadu dengan nilai dadu dari 1 sampai 6.
  • Di Android Studio, klik View > Tool Windows > Resource Manager.
  • Klik + > Import Drawables untuk membuka file browser.
  • Temukan dan pilih enam folder gambar dadu, lalu lanjutkan untuk menguploadnya.
  • Klik Next.
  • Klik Import untuk mengonfirmasi bahwa Anda ingin mengimpor enam gambar.


7. Menambahkan composable image.
  • Pada isi fungsi Column(), buat fungsi Image() sebelum fungsi Button()
  • Teruskan argumen painter ke fungsi Image(), lalu tetapkan nilai painterResource yang menerima argumen ID resource drawable. Untuk saat ini, teruskan ID resource berikut: argumen R.drawable.dice_1.



Kini semua komponen UI yang diperlukan sudah ada. Namun, Button dan Image sedikit saling bersinggungan.

  • Untuk memperbaikinya, tambahkan composable Spacer di antara composable Button dan Image. Spacer menggunakan Modifier sebagai parameter. Dalam hal ini, Image berada di atas Button sehingga harus ada spasi vertikal di antara keduanya. Oleh karena itu, tinggi Modifier dapat disetel agar berlaku untuk Spacer. Coba tetapkan tinggi ke 16.dp. Biasanya, dimensi dp diubah dengan kelipatan 4.dp. >> Spacer(modifier = Modifier.height(16.dp))
  • Di panel Preview, klik Build & Refresh.
7. Selanjutnya membuat logika pelemparan dadu dapat di ikuti melalui tutorial berikut.

Kode lengkap pada MainActivity.kt



Hasil Run App:


Selasa, 05 Maret 2024

Tugas 1 History Mobile Phone

History Mobile Phone dan Teknologi Pengembang Android

  • Mobile Phone

Telepon seluler mulai populer di tahun 1990-an, meski sejarahnya dimulai dari dekade-dekade sebelumnya. Panggilan telepon seluler pertama dilakukan pada tahun 1973 oleh Martin Cooper, seorang peneliti dan eksekutif di Motorola. Namun, butuh sekitar satu dekade agar telepon seluler tersedia secara komersial.




  • History Teknologi Pengembangan Android
Sejarah Android dimulai dari pengembangan sistem operasi Linux oleh Linus Torvalds pada 1991. Pada tahun 2003, Andy Rubin, Rich Miner, Nick Sears, Dan O'Driscoll, dan Chris White membangun Android. Diperkenalkan pada 2005 dan ke publik pada 2008. Android berkembang pesat dengan peningkatan sistem operasi, fitur, dan aplikasi. Kini menjadi sistem operasi paling populer, khususnya di ponsel. Pengembangan Android mempengaruhi banyak aplikasi, dari pembelajaran hingga perkantoran, menjadi tren utama di dunia teknologi. Berikut ini adalah perkembangan Teknologi Pengembangnya dari masa ke masa.

EAS-PPB I