Proyek - Mobile Front End

 

Proyek 1: Aplikasi To-Do List Personal

Judul Proyek: “Daily Task Manager”
Deskripsi: Buatlah aplikasi pengelola tugas harian yang memungkinkan pengguna menambahkan, menghapus, dan menandai tugas sebagai selesai.

Fitur Utama:

• Input tugas dengan tanggal dan waktu deadline

• Checkbox status tugas

• Penyortiran berdasarkan deadline atau status

• UI intuitif dan responsive (menggunakan Material Design)

---

Proyek 2: Aplikasi Resep Masakan

Judul Proyek: “ResepKita”
Deskripsi: Buat aplikasi front-end untuk menampilkan daftar resep masakan lengkap dengan gambar, bahan, dan langkah-langkah memasak.

Fitur Utama:

• Tampilan daftar resep (ListView/RecyclerView)

• Detail resep dengan gambar dan deskripsi

• Pencarian resep berdasarkan nama atau bahan

• Desain menarik, responsif, dan ramah pengguna

---

Proyek 3: Aplikasi Booking Tempat Olahraga

Judul Proyek: “BookSport”
Deskripsi: Aplikasi ini bertujuan untuk memudahkan pengguna memesan lapangan olahraga seperti futsal, badminton, atau basket.

Fitur Utama:

• Tampilan daftar tempat olahraga

• Formulir pemesanan dengan tanggal, waktu, dan pilihan jenis olahraga

• Validasi input form

• Tampilan konfirmasi pemesanan

---

Proyek 4: Aplikasi Catatan Keuangan Pribadi

Judul Proyek: “MyMoney Notes”
Deskripsi: Buat aplikasi sederhana untuk mencatat pengeluaran dan pemasukan harian.

Fitur Utama:

• Input jenis transaksi (pemasukan/pengeluaran)

• Pilih kategori dan nominal

• Lihat daftar transaksi

• Tampilan grafik sederhana (opsional menggunakan chart library untuk visualisasi)

---

Proyek 5: Aplikasi Galeri Foto Pribadi

Judul Proyek: “MyGallery”
Deskripsi: Aplikasi front-end untuk menampilkan galeri gambar lokal dari perangkat atau dari URL dummy.

Fitur Utama:

• GridView/RecyclerView untuk menampilkan gambar

• Halaman detail gambar

• Simulasi upload (dummy)

• Tampilan estetis, responsive, dan mendukung mode gelap

Ketentuan Pengumpulan

• Tuliskan Title Aplikasi yang dibuat
• Deskripsi Aplikasi dan Fitur
• Foto Infografis Aplikasi - Thumbnail
• PPT - Deskripsi, Desain, Cara Mengerjakan (dalam pdf)
• Link Blog Anggota 1
• Video Presentasi
• Link Source Code
• Link Aplikasi/ Download

Pengisian Form

• Form Evaluasi
• Dashboard Evaluasi

Peserta

Kelas A

Kelas D

Kelas G

Absensi

Penggunaan Kotlin 1

Kotlin adalah bahasa pemrograman open source berjenis statis yang mendukung pemrograman berorientasi objek dan fungsional. Kotlin memberikan sintaksis dan konsep serupa dari bahasa lain, di antaranya termasuk C#, Java, dan Scala. Kotlin tidak dimaksudkan agar unik, melainkan mengambil inspirasi dari perkembangan bahasa selama puluhan tahun. Kotlin ada dalam varian yang menargetkan JVM (Kotlin/JVM), JavaScript (Kotlin/JS), dan kode native (Kotlin/Native).

Kotlin dikelola oleh Kotlin Foundation, sebuah grup yang didirikan oleh JetBrains dan Google, yang ditugaskan untuk mengembangkan dan melanjutkan pengembangan bahasa. Kotlin secara resmi didukung oleh Google untuk pengembangan Android. Artinya, dokumentasi dan alat Android didesain dengan mempertimbangkan Kotlin.

Android API tertentu, seperti Android KTX, khusus untuk Kotlin, tetapi sebagian besar ditulis dalam Java dan dapat dipanggil dari Java atau Kotlin. Interoperabilitas Kotlin dengan Java adalah inti dari pertumbuhannya. Artinya, Anda dapat memanggil kode Java dari Kotlin dan sebaliknya, serta memanfaatkan semua library Java yang ada. Popularitas Kotlin menghasilkan pengalaman pengembangan yang lebih baik di Android. Akan tetapi, pengembangan framework Android terus berlanjut dengan mempertimbangkan Kotlin dan Java.

Interoperabilitas Kotlin dengan Java bukan berarti Anda harus mengadopsi Kotlin sekaligus. Anda dapat memiliki project dengan kode Kotlin dan Java. Untuk informasi selengkapnya tentang menambahkan Kotlin ke aplikasi yang sudah ada, lihat Menambahkan Kotlin ke aplikasi yang sudah ada. Jika Anda adalah bagian dari tim berukuran besar, ukuran organisasi dan codebase mungkin memerlukan fokus khusus. Untuk tips dan informasi lainnya, lihat Mengadopsi Kotlin untuk tim berukuran besar.

Contoh function kotlin

Absensi

Referensi

https://www.idn.id/mengapa-kotlin-menjadi-masa-depan-bagi-pemrograman-android/
https://worldline.github.io/learning-kotlin/en/kotlin-features/
https://pl.kotl.in/FFDq2WbId

https://play.kotlinlang.org/#eyJ2ZXJzaW9uIjoiMS43LjIxIiwicGxhdGZvcm0iOiJqYXZhIiwiYXJncyI6IiIsIm5vbmVNYXJrZXJzIjp0cnVlLCJ0aGVtZSI6ImlkZWEiLCJjb2RlIjoiLy8gUTogZGVjbGFyZSBhIGZ1bmN0aW9uIGNhbGxlZCBjb3VudFZvd2VscyB0aGF0IHRha2VzIGEgU3RyaW5nIGFyZ3VtZW50IFxuLy8gYW5kIHJldHVybnMgaXRzIG51bWJlciBvZiB2b3dlbHMgKGEsIHUsIGkgLCBlLCBvKS4gUGxlYXNlIHVzZSBhIGZvb3IgbG9vcC4ifQ==
https://developer.android.com/kotlin/overview?

hl=id#:~:text=Kotlin%20adalah%20bahasa%20pemrograman%20open,C%23%2C%20Java%2C%20dan%20Scala.
https://developer.android.com/kotlin/learn?hl=id

https://helgaagnizar.wordpress.com/2020/10/10/pemrograman-mobile-pertemuan-2-perkenalan-kotlin/

https://www.slideshare.net/slideshow/1-introduction-kotlinpptx/255224307

https://www.slideshare.net/slideshow/pertemuan-2-kotlin-programmingpdf/259224470
https://developer.android.com/kotlin/learn?hl=id#:~:text=Kotlin%20adalah%20bahasa%20pemrograman%20banyak,membantu%20Anda%20bekerja%20dengan%20cepat.

Studi Kasus iSaku

 

i.saku adalah uang elektronik yang telah mendapat izin dari Bank Indonesia. Pakai i.saku memudahkan kamu untuk transaksi apa aja, mulai dari bayar belanja di Merchant, kirim uang, tarik tunai, dan bayar semua tagihan. Mudahkan hidupmu dalam bertransaksi dan nikmati ekstra untungnya pake i.saku.

Cara menjadi Mitra i.saku adalah

• Download Aplikasi Mitra i.saku

• Buka Aplikasi Mitra i.saku lalu pilih menu Daftar Sekarang

•Masukkan nomor HP yang ingin Anda daftarkan, tentukan PIN Anda, lalu klik tombol Selanjutnya.

• Akan ada kode verifikasi yang dikirimkan ke WhatsApp nomor terdaftar. Masukkan kode tersebut untuk melakukan verifikasi.

• Setelah melakukan verifikasi, silahkan login kembali di halaman awal menggunakan nomor HP dan PIN yang sudah didaftarkan, lalu lengkapi informasi usaha Anda.

• Selanjutnya, tim Mitra i.saku akan melakukan proses validasi data Anda terlebih dahulu. Proses validasi maksimal H+2. Jika proses validasi data sudah berhasil, maka anda akan menerima SMS.

• QRIS Statis untuk usaha Anda akan muncul pada menu Tampilkan QR di Aplikasi Mitra i.saku.

https://i-saku.com/

https://play.google.com/store/apps/details?id=com.isaku.app.mitra&hl=id

Link detail

Pengumpulan

Isikan Form Jawaban Berikut

https://forms.gle/JGvoaFgkk15zkvDJ8

Yang sudah Submit, Lihat Link Berikut 

https://lookerstudio.google.com/reporting/6b210206-b019-4eae-b642-90a3acabb008

Untuk Edit Form, Silakan klik Link Berikut

https://lookerstudio.google.com/reporting/32c0053c-2d46-4c2b-8146-81b11f7d770f

Studi Kasus - Alfamind

Alfamind merupakan toko virtual di mana pengguna atau store owner dapat memiliki toko Alfamart tanpa harus membangun toko tersebut secara fisik. Store owner tak perlu repot memikirkan stok dan distribusi barang, sebab hanya bermodalkan piranti cerdas (smartphone), mereka dapat menjual produknya langsung ke konsumen.

Alfamind merupakan bisnis digital yang dikembangkan oleh induk perusahaan dalam meningkatkan skala bisnis sekaligus menggenjot penjualan. Saat ini, Alfamind telah memiliki 3.500 store owner yang menjual produk UMKM dari 120 pemasok yang diseleksi oleh Alfamart.

Agar tak mendisrupsi bisnis Alfamart yang menjual produk kebutuhan sehari-hari, Alfamind fokus menjual produk-poduk UMKM berupa fesyen dan perabot rumah tangga, seperti panci dan piring. Hanya bermodalkan Rp 1.000.000 untuk deposito yang bisa digunakan untuk berbelanja produk, store owner bisa langsung memiliki toko Alfamart.

Fungsi utama dalam Alfamind

• Screen Pembuka Alfamind
• Sign Up/ Sign in Membership
• View Barang Dagangan
• Profile Store Owner
• Top Up Saldo

https://play.google.com/store/apps/details?id=id.meteor.alfamind&hl=id

https://alfamind.id/

Pengumpulan

Isikan Form Jawaban Berikut

https://forms.gle/JGvoaFgkk15zkvDJ8

Yang sudah Submit, Lihat Link Berikut 

https://lookerstudio.google.com/reporting/6b210206-b019-4eae-b642-90a3acabb008

Untuk Edit Form, Silakan klik Link Berikut

https://lookerstudio.google.com/reporting/32c0053c-2d46-4c2b-8146-81b11f7d770f

Studi Kasus - Starbuck

 

https://www.starbucks.co.id/card

Starbucks merupakan satu di antara gerai minuman kopi dan non kopi yang terkenal di Indonesia.Berdasarkan informasi dari laman resmi Starbucks, saat ini Starbucks sedang memberikan penawaran menarik yang bisa dicoba, yakni membeli minuman seharga Rp10.000 bagi pengguna baru aplikasi Starbucks Indonesia.

Rewards khusus berupa minuman dengan harga Rp10.000 akan ditambahkan ke dalam akun setelah menyelesaikan proses registrasi. Rewards dapat ditukarkan untuk membeli 1 minuman handcrafted apa saja (ukuran Tall) di semua gerai Starbucks Indonesia.

Aplikasi Membership klik  link berikut  : https://play.google.com/store/apps/details?id=com.starbucks.id&hl=en

1. Buka syarat dan ketentuan mengenai aplikasi Starbucks kemudian gulir ke bawah hingga menemukan tulisan "Agree".
2. Klik "Agree" dan lakukan pengisian data diri.
3. Masukkan nomor HP kemudian klik "Send OTP"
4. Tunggu Kode OTP yang dikirimkan melalui SMS.
5. Jika sudah menerima kode OTP aplikasi Starbucks, masukkan kode OTP dalam kolom yang telah tersedia
6. Setelah memasukkan kode OTP, input data diri email dan buat password aplikasi Starbucks.
7. Setelah membuat password, masukkan informasi detail mengenai data diri, seperti nama lengkap dan tanggal lahir.
8. Setelah memasukkan data diri, sebagai pilihan, Anda bisa menuliskan menu favorit Starbucks dan memasukkan refferal kode.
9. Kedua hal ini tidak wajib diisi, tapi jika Anda memilikinya, Anda bisa mengisi pada kolom yang tersedia.
10. Setelah semua kolom pendaftaran berhasil diisi, maka tulisan "Sign Up" akan berwarna hijau.
11. Jika sudah berwarna hijau, klik "Sign Up" dan akun berhasil dibuat.

Isikan Form Jawaban Berikut

https://forms.gle/JGvoaFgkk15zkvDJ8

Yang sudah Submit, Lihat Link Berikut 

https://lookerstudio.google.com/reporting/6b210206-b019-4eae-b642-90a3acabb008

Untuk Edit Form, Silakan klik Link Berikut

https://lookerstudio.google.com/reporting/32c0053c-2d46-4c2b-8146-81b11f7d770f

Adaptive Application dengan Flutter

 

Adaptive adalah kemampuan aplikasi Flutter dalam menyesuaikan tata letak dan desain yang disesuaikan dengan platform atau perangkat yang digunakan oleh pengguna aplikasi. Pengguna IOS akan mendapatkan tampilan aplikasi yang sesuai dengan perangkat IOS, sedangkan pengguna Android akan mendapatkan tampilan aplikasi yang sesuai dengan perangkat Android. Flutter juga menyediakan widget platform yang dapat digunakan oleh developer dalam mengembangkan aplikasi. Cupertino untuk IOS dan Material untuk Android.

Sedangkan Responsive adalah kemampuan aplikasi Flutter dalam merespon adanya perubahan ukuran UI pada tampilan layar. Perubahan ukuran UI mengikuti pada device yang digunakan saat merespon ukuran UI pada tampilan layar, contohnya seperti Portrait, Landscape, dan ukuran layar yang lebih besar. 

https://www.youtube.com/watch?v=LeKLGzpsz9I

Pada Latihan kali ini kita akan membuat Video Viewer Youtube yang bisa berjalan di perangkat/ platform mobile, web, maupun desktop. Gambaran aplikasi seperti di bawah ini

Panduan pengerjaan bisa klik link codelab berikut : 

https://codelabs.developers.google.com/codelabs/flutter-adaptive-app?hl=id#0

Referensi

https://codelabs.developers.google.com/codelabs/flutter-adaptive-app?hl=id#0

https://docs.flutter.dev/ui/adaptive-responsive

Absen

Flutter - Music Application

 

 

Dalam materi ini kita akan membuat aplikasi MyArtist, yaitu sebuah aplikasi pemutar musik tempat penggemar dapat terus mengikuti kabar terbaru dari artis favoritnya. Di dalam aplikasi akan ditampilkan foto dan deskripsi artist, album lagu, dan juga komentar fans.

Kode sumber untuk dipelajari bisa diambil di 

git clone https://github.com/flutter/codelabs.git
cd codelabs/boring_to_beautiful/step_01/

Untuk codelab silakan diikuti link berikut 

https://codelabs.developers.google.com/codelabs/flutter-boring-to-beautiful?hl=id#0

Tutorial Latihan dapat dilihat pada Video Berikut

Referensi

https://codelabs.developers.google.com/codelabs/flutter-boring-to-beautiful#0

https://www.youtube.com/watch?v=ixRuIYK-llU

https://docs.flutter.dev/get-started/learn-more

https://docs.flutter.dev/ui/layout/tutorial

https://docs.flutter.dev/ui

https://codelabs.developers.google.com/codelabs/flutter-codelab-first#1