Pengenalan Machine Learning dan AI

 

https://ioai.toki.id/

https://ioai-official.org/

https://ioai.toki.id/

https://drive.google.com/file/d/1DjrV-Pk8s6eHFftIHVKJirxbCvqJIbGP/view?usp=drive_link

Pelatihan NET

 

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

https://fajarbaskoro.blogspot.com/2022/02/pbkk-latihan-1-membuat-aplikasi-desktop.html

https://github.com/dotnet-architecture/eBooks/blob/1ed30275281b9060964fcb2a4c363fe7797fe3f3/current/modernize-desktop-apps/Modernize-Desktop-Apps-on-Windows-with-NET.pdf

https://learn.microsoft.com/id-id/training/modules/csharp-write-first/2-exercise-hello-world

https://microsoftlearning.github.io/c-sharp-minor/

https://microsoftlearning.github.io/c-sharp-minor/

https://dotnet.microsoft.com/id-id/download

https://code.visualstudio.com/

https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp

https://github.com/dotnet/vscode-csharp/blob/main/SUPPORT.md

https://learn.microsoft.com/id-id/training/paths/build-dotnet-applications-csharp/

https://learn.microsoft.com/id-id/training/browse/?products=dotnet&resource_type=learning%20path

https://www.petanikode.com/tutorial/cs/

Latihan Composable

 

Untuk materi awal Jetpack Compose, mini project sebaiknya sederhana tetapi masing-masing memperkenalkan pola @Composable yang berbeda. Saya sarankan 5 project berikut.

1. Greeting Card App 👋

Konsep: membuat kartu ucapan.

┌──────────────────────────┐
│       GREETING CARD      │
│                          │
│          👋              │
│                          │
│    Hello, Android!       │
│    Welcome to Compose    │
│                          │
│       [ Start ]          │
└──────────────────────────┘

Composable yang dikenalkan:

• Column
• Text
• Button
• Spacer
• Modifier
• @Preview

Contoh konsep kode:

@Composable
fun GreetingCard() {
    Column(
        modifier = Modifier.padding(24.dp)
    ) {
        Text("Hello, Android!")
        Spacer(Modifier.height(8.dp))
        Text("Welcome to Jetpack Compose")

        Button(onClick = {}) {
            Text("Start")
        }
    }
}

Nilai pembelajaran: mahasiswa memahami bahwa UI dapat dipecah menjadi composable kecil.

---

2. Simple Calculator 🧮

Konsep: kalkulator sederhana dua angka.

┌──────────────────────────┐
│      SIMPLE CALCULATOR   │
├──────────────────────────┤
│                          │
│   [ 10 ]   [ 5 ]        │
│                          │
│  [+] [-] [×] [÷]         │
│                          │
│       Result: 15         │
└──────────────────────────┘

Composable:

CalculatorScreen
│
├── Text
├── NumberInput
├── NumberInput
├── Row
│   ├── OperationButton
│   ├── OperationButton
│   ├── OperationButton
│   └── OperationButton
└── Result

Konsep yang diperkenalkan:

• Composable function
• TextField
• Row
• Column
• Button
• parameter composable
• event sederhana

Contoh reusable component:

@Composable
fun OperationButton(
    symbol: String,
    onClick: () -> Unit
) {
    Button(onClick = onClick) {
        Text(symbol)
    }
}

Nilai pembelajaran: mahasiswa mulai memahami reusable composable.

---

3. Food Menu App 🍔

Konsep: menampilkan menu makanan dalam bentuk card.

┌──────────────────────────┐
│       FOOD MENU          │
├──────────────────────────┤
│ 🍔  Burger       $5      │
│     Beef Burger          │
├──────────────────────────┤
│ 🍕  Pizza        $8      │
│     Cheese Pizza         │
├──────────────────────────┤
│ 🍜  Noodle       $4      │
│     Chicken Noodle       │
└──────────────────────────┘

Composable:

FoodMenuScreen
│
├── TopBar
│
├── FoodCard
│   ├── Image
│   ├── Text
│   ├── Text
│   └── Button
│
├── FoodCard
│
└── FoodCard

Contoh:

@Composable
fun FoodCard(
    name: String,
    price: String
) {
    Card {
        Row(
            modifier = Modifier.padding(16.dp)
        ) {
            Text(name)

            Spacer(
                modifier = Modifier.weight(1f)
            )

            Text(price)
        }
    }
}

Konsep:

• Card
• Row
• Image
• Text
• Button
• parameter
• reusable component
• Modifier

Nilai pembelajaran: sangat bagus untuk menjelaskan componentization.

---

4. To-Do List App ✅

Konsep: aplikasi daftar tugas sederhana.

┌──────────────────────────┐
│       MY TODO LIST       │
├──────────────────────────┤
│ [ Enter task........ ]   │
│                  [ADD]   │
├──────────────────────────┤
│ ☑ Learn Kotlin           │
│ ☐ Learn Compose          │
│ ☐ Build Android App      │
│ ☐ Submit Assignment      │
└──────────────────────────┘

Composable:

TodoScreen
│
├── TodoInput
│   ├── TextField
│   └── Button
│
└── TodoList
    │
    ├── TodoItem
    ├── TodoItem
    └── TodoItem

Contoh reusable item:

@Composable
fun TodoItem(
    task: String
) {
    Row(
        modifier = Modifier.padding(12.dp)
    ) {
        Checkbox(
            checked = false,
            onCheckedChange = {}
        )

        Text(task)
    }
}

Konsep:

• TextField
• Checkbox
• Row
• Column
• state sederhana
• event
• list

Nilai pembelajaran: menjadi jembatan dari Composable → State → Event → List.

---

5. Digital Business Card 📱

Konsep: kartu bisnis digital untuk seorang developer.

┌──────────────────────────┐
│                          │
│          👤              │
│                          │
│       Fajar B.           │
│    Android Developer     │
│                          │
│ ───────────────────────  │
│ 📧 email@example.com     │
│ 📱 +62 xxx xxx           │
│ 🌐 portfolio.com         │
│                          │
│    [ Contact Me ]        │
└──────────────────────────┘

Struktur:

BusinessCard
│
├── ProfileImage
├── Name
├── JobTitle
├── Divider
│
├── ContactItem
├── ContactItem
├── ContactItem
│
└── Button

Contoh reusable component:

@Composable
fun ContactItem(
    icon: String,
    text: String
) {
    Row(
        modifier = Modifier.padding(8.dp)
    ) {
        Text(icon)
        Spacer(Modifier.width(12.dp))
        Text(text)
    }
}

Konsep:

• Column
• Row
• Image
• Text
• Divider
• Button
• reusable composable
• parameter
• layout

---

Perbandingan 5 Mini Project

Mini Project	Fokus Utama	Composable Utama	Level
👋 Greeting Card	Dasar Composable	Column, Text, Button	⭐
🧮 Calculator	Reusable Component	Row, TextField, Button	⭐⭐
🍔 Food Menu	Componentization	Card, Image, Row	⭐⭐
✅ To-Do List	State & Event	TextField, Checkbox, List	⭐⭐⭐
📱 Business Card	UI Composition	Column, Row, Image, Button	⭐⭐

Urutan yang saya rekomendasikan untuk kuliah

GREETING CARD
      ↓
Memahami @Composable
      ↓
CALCULATOR
      ↓
Reusable Composable + Parameter
      ↓
FOOD MENU
      ↓
Componentization
      ↓
BUSINESS CARD
      ↓
Layout Composition
      ↓
TO-DO LIST
      ↓
State + Event
      ↓
MINI PROJECT
      ↓
Aplikasi Android sederhana

Yang paling efektif untuk menjelaskan konsep Composable menurut saya adalah Food Menu App. Karena mahasiswa bisa langsung melihat bagaimana satu FoodCard() dibuat sekali, kemudian digunakan berkali-kali dengan data berbeda. Ini memperkenalkan ide penting Compose: UI dibangun dari composable kecil yang reusable dan dapat dikomposisikan.

Android Jet Pack Compose Kurikulum

 

https://chatgpt.com/c/6aa8b0f5-61c8-83ec-ba48-e779d3a13494

https://www.geeksforgeeks.org/android/basics-of-jetpack-compose-in-android/

https://www.geeksforgeeks.org/android/android-jetpack-compose-tutorial/

https://www.geeksforgeeks.org/kotlin/kotlin-programming-language/

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

https://www.youtube.com/watch?v=EuZGaxymME0&list=PLLwcRoh3a6u6IsUrXoKaoZNb5LvhOhV8J

Ref

https://developer.android.com/codelabs/jetpack-compose-basics?hl=id#0

https://developer.android.com/develop/ui/compose/mental-model?hl=id

https://developer.android.com/reference/androidx/lifecycle/ViewModel

https://developer.android.com/topic/architecture?hl=id

Snippets

https://www.dicoding.com/blog/panduan-praktis-untuk-optimasi-jetpack-compose-di-android/

https://github.com/android/architecture-samples/tree/main

https://github.com/android/architecture-templates/tree/multimodule

https://github.com/android/architecture-templates/tree/base

Basics of Jetpack Compose in Android

1. Tujuan Pembelajaran

Setelah mengikuti materi ini, mahasiswa diharapkan mampu:

1. Menjelaskan konsep dasar Jetpack Compose.
2. Membedakan Declarative UI dan Imperative UI/XML.
3. Membuat @Composable function.
4. Menggunakan @Preview.
5. Menggunakan layout Column, Row, dan Box.
6. Mengatur ukuran dan jarak menggunakan Modifier.
7. Membuat scrolling menggunakan verticalScroll() dan LazyColumn.
8. Menggunakan Text, Button, Image, dan komponen UI dasar.
9. Memahami konsep state dan recomposition.
10. Membuat aplikasi Android sederhana dengan Jetpack Compose.

---

2. Apa Itu Jetpack Compose?

Jetpack Compose adalah toolkit modern dari Google untuk membangun native Android UI menggunakan Kotlin.

Perbedaan utamanya dengan pendekatan Android tradisional adalah cara kita mendeskripsikan UI.

Pendekatan XML

Secara sederhana:

XML Layout
    ↓
findViewById()
    ↓
Kotlin/Java
    ↓
Manipulasi View

Contoh:

val textView = findViewById<TextView>(R.id.textView)

textView.text = "Hello Android"

Developer harus menghubungkan objek UI dengan kode program.

Pendekatan Jetpack Compose

Dengan Compose:

Kotlin
  ↓
Composable Function
  ↓
UI

Contoh:

@Composable
fun Greeting() {
    Text("Hello Android")
}

UI langsung dideskripsikan menggunakan Kotlin.

---

3. Imperative UI vs Declarative UI

Ini adalah konsep paling penting yang sebaiknya dipahami mahasiswa sebelum belajar Compose.

Imperative UI

Developer memberi instruksi bagaimana UI harus diubah.

Buat TextView
      ↓
Cari TextView
      ↓
Ubah text
      ↓
Ubah visibility
      ↓
Ubah warna

Declarative UI

Developer mendeskripsikan UI seperti apa yang diinginkan berdasarkan data/state.

       STATE
         ↓
   COMPOSABLE FUNCTION
         ↓
          UI

Jika state berubah:

State berubah
     ↓
Recomposition
     ↓
UI diperbarui

Dengan demikian, mahasiswa perlu memahami prinsip:

UI = f(state)

Artinya, UI merupakan representasi dari kondisi/state aplikasi saat ini.

---

4. Mengapa Jetpack Compose?

Beberapa keuntungan utama:

Aspek	XML + View System	Jetpack Compose
Bahasa UI	XML	Kotlin
Bahasa logic	Kotlin/Java	Kotlin
Paradigma	Imperative	Declarative
findViewById()	Umumnya diperlukan	Tidak diperlukan
Preview	XML Preview	@Preview
State UI	Lebih manual	Terintegrasi dengan Compose
Recomposition	Tidak ada	Ada
Boilerplate	Relatif banyak	Lebih ringkas
UI + Logic	Terpisah	Dapat berada dalam ekosistem Kotlin yang sama

Catatan pedagogis: jangan mengajarkan Compose sebagai "pengganti XML yang selalu lebih baik". Mahasiswa tetap perlu mengenal View System karena masih terdapat banyak aplikasi Android yang menggunakan pendekatan tersebut dan Compose juga menyediakan interoperabilitas dengan View.

---

5. Struktur Dasar Jetpack Compose

Contoh paling sederhana:

@Composable
fun Greeting() {
    Text(
        text = "Hello Android"
    )
}

Ada dua konsep penting:

@Composable

dan

Text()

@Composable menandakan bahwa sebuah function dapat digunakan untuk mendeskripsikan UI Compose.

---

6. Composable Function

Composable function adalah function Kotlin yang diberi anotasi:

@Composable

Contoh:

@Composable
fun WelcomeMessage() {
    Text("Selamat Datang")
}

Composable dapat dipanggil dari composable lainnya.

@Composable
fun HomeScreen() {

    WelcomeMessage()

    Text("Belajar Jetpack Compose")
}

Konsep ini memungkinkan UI dibangun secara hierarkis.

HomeScreen
│
├── WelcomeMessage
│   └── Text
│
└── Text

---

7. @Preview

@Preview digunakan untuk melihat tampilan composable secara langsung di Android Studio tanpa harus menjalankan aplikasi pada emulator.

Contoh:

@Preview(showBackground = true)
@Composable
fun WelcomePreview() {
    WelcomeMessage()
}

Secara konseptual:

@Preview
    ↓
Android Studio
    ↓
Preview UI

Ini sangat berguna ketika mahasiswa sedang belajar desain UI.

---

8. Text

Komponen paling sederhana:

Text(
    text = "Hello Android"
)

Contoh dengan beberapa properti:

Text(
    text = "Jetpack Compose",
    fontSize = 24.sp
)

Tambahkan import:

import androidx.compose.ui.unit.sp

---

9. Column

Column digunakan untuk menyusun komponen secara vertikal.

@Composable
fun Profile() {

    Column {
        Text("Nama: Fajar")
        Text("Program Studi: Informatika")
        Text("Universitas: XYZ")
    }
}

Visualisasi:

┌─────────────────────┐
│ Nama: Fajar         │
│                     │
│ Program Studi       │
│                     │
│ Universitas         │
└─────────────────────┘

Struktur:

Column
│
├── Text
├── Text
└── Text

---

10. Row

Row digunakan untuk menyusun komponen secara horizontal.

@Composable
fun SocialMedia() {

    Row {
        Text("Instagram")
        Text("YouTube")
        Text("GitHub")
    }
}

Struktur:

Row
│
├── Text
├── Text
└── Text

Secara visual:

Instagram   YouTube   GitHub

---

11. Box

Box digunakan ketika komponen perlu ditempatkan dalam area yang sama atau saling bertumpuk.

@Composable
fun ProfileImage() {

    Box {
        Image(
            painter = ...,
            contentDescription = "Profile"
        )

        Text(
            text = "ONLINE"
        )
    }
}

Konsep:

       BOX
        │
   ┌────┴────┐
   │  Image  │
   │    +    │
   │  Text   │
   └─────────┘

---

12. Modifier

Salah satu konsep wajib dalam pembelajaran Compose adalah Modifier.

Modifier digunakan untuk mengatur berbagai aspek UI, misalnya:

• ukuran
• padding
• background
• alignment
• clickable
• fill width
• fill height

Contoh:

Text(
    text = "Hello",
    modifier = Modifier
        .padding(16.dp)
)

Contoh lainnya:

Button(
    onClick = {},
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Text("Login")
}

Mahasiswa sebaiknya memahami:

Composable
    +
Modifier
    ↓
UI yang terstruktur

---

13. Spacer

Spacer digunakan untuk memberikan jarak antar-komponen.

Column {

    Text("Nama")

    Spacer(
        modifier = Modifier.height(16.dp)
    )

    Text("Email")
}

Konsep:

Text
  ↓
Spacer
  ↓
Text

---

14. Padding

Padding memberikan ruang di sekitar sebuah komponen.

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
)

Padding dapat diberikan secara spesifik:

Modifier.padding(
    start = 16.dp,
    top = 8.dp,
    end = 16.dp,
    bottom = 8.dp
)

---

15. Scrolling

Untuk konten yang panjang, kita dapat menggunakan:

verticalScroll()

Contoh:

Column(
    modifier = Modifier
        .verticalScroll(rememberScrollState())
) {

    Text("Materi 1")
    Text("Materi 2")
    Text("Materi 3")
    Text("Materi 4")
}

Konsep:

┌───────────────┐
│ Materi 1      │
│ Materi 2      │
│ Materi 3      │
│ Materi 4      │
│      ↓        │
│    SCROLL     │
└───────────────┘

---

16. LazyColumn

Untuk menampilkan daftar data, Compose menyediakan LazyColumn.

Contoh:

LazyColumn {

    item {
        Text("Mahasiswa")
    }

    item {
        Text("Dosen")
    }

    item {
        Text("Administrator")
    }
}

Untuk data:

val students = listOf(
    "Andi",
    "Budi",
    "Citra",
    "Dina"
)

LazyColumn {
    items(students) { student ->
        Text(student)
    }
}

Konsepnya mirip dengan RecyclerView, tetapi API-nya lebih deklaratif.

---

17. Button

Compose menyediakan berbagai komponen interaktif.

Contoh:

Button(
    onClick = {
        println("Button clicked")
    }
) {
    Text("Klik Saya")
}

Struktur:

Button
  │
  └── Text

Yang penting mahasiswa pahami:

onClick = { }

adalah event handler.

---

18. State

Setelah mahasiswa memahami layout, materi sebaiknya segera dilanjutkan ke State.

Contoh:

var counter by remember {
    mutableStateOf(0)
}

Kemudian:

Column {

    Text(
        text = "Counter: $counter"
    )

    Button(
        onClick = {
            counter++
        }
    ) {
        Text("Tambah")
    }
}

Alurnya:

User klik Button
       ↓
counter++
       ↓
State berubah
       ↓
Recomposition
       ↓
Text diperbarui

Misalnya:

Counter: 0
     ↓
   Klik
     ↓
Counter: 1
     ↓
   Klik
     ↓
Counter: 2

Ini merupakan jembatan penting dari "membuat UI" menuju "membangun aplikasi interaktif".

---

19. Mini Project: Student Profile

Untuk pertemuan awal, saya menyarankan studi kasus:

Student Profile App

Mahasiswa membuat aplikasi profil mahasiswa menggunakan Compose.

Tampilan:

┌──────────────────────────────┐
│        STUDENT PROFILE       │
│                              │
│          ┌────────┐          │
│          │ PHOTO  │          │
│          └────────┘          │
│                              │
│          Fajar B             │
│      Informatics Student     │
│                              │
│ ┌──────────────────────────┐ │
│ │ Skills                   │ │
│ │ Kotlin                   │ │
│ │ Android                  │ │
│ │ Web Programming          │ │
│ └──────────────────────────┘ │
│                              │
│       [ Contact Me ]         │
│                              │
└──────────────────────────────┘

Mahasiswa menggunakan:

StudentProfile
│
├── Column
│   ├── Image
│   ├── Text
│   ├── Text
│   │
│   ├── Row
│   │   ├── Text
│   │   ├── Text
│   │   └── Text
│   │
│   └── Button
│
└── Modifier

---

20. Learning Roadmap Jetpack Compose

Saya menyarankan materi kuliah Android Programming disusun bertahap seperti berikut:

                    JETPACK COMPOSE
                           │
             ┌─────────────┴─────────────┐
             │                           │
         FUNDAMENTAL                  UI DESIGN
             │                           │
       ┌─────┼─────┐              ┌──────┼──────┐
       │     │     │              │      │      │
   Composable Preview Modifier   Column  Row    Box
       │             │              │      │      │
       └─────────────┴──────────────┴──────┴──────┘
                           │
                       COMPONENT
                           │
             ┌─────────────┼─────────────┐
             │             │             │
           Text          Button        Image
             │             │             │
             └─────────────┼─────────────┘
                           │
                         STATE
                           │
                    remember / State
                           │
                     Recomposition
                           │
                         EVENT
                           │
                      User Action
                           │
                         LIST
                           │
                  LazyColumn / LazyRow
                           │
                       NAVIGATION
                           │
                     ARCHITECTURE
                           │
                  ViewModel + State
                           │
                         DATA
                           │
                    Repository/API
                           │
                       DATABASE
                           │
                       PROJECT

Urutan perkuliahan yang saya rekomendasikan

Pertemuan	Materi	Praktikum
1	Introduction to Compose	Hello Compose
2	Composable & Preview	Greeting App
3	Column, Row, Box	Profile UI
4	Modifier, Padding, Spacer	Card/Profile
5	Text, Image, Button	Student Profile
6	State & Recomposition	Counter App
7	Event Handling	Form Input
8	UTS / Mini Project	Simple App
9	LazyColumn / Lists	Student List
10	Material 3	Modern UI
11	Navigation	Multi-screen App
12	ViewModel & State	MVVM
13	REST API	API Integration
14	Room / Local Data	CRUD
15	Final Project	Development
16	UAS / Project Presentation	Final App

Dengan struktur tersebut, mahasiswa tidak hanya menghafal Column, Row, Box, dan LazyColumn, tetapi memahami cara berpikir deklaratif Compose dan kemudian mengembangkannya menjadi aplikasi Android yang terhubung dengan state, ViewModel, API, dan database.