Sesi#4 Pemrograman Perangkat Mobile I – Merancang Antarmuka Pengguna (UI) Dasar Menggunakan Expo

📱 Halo, teman-teman!

Di pertemuan kali ini kita bakal belajar hal yang seru banget nih — yaitu cara membuat tampilan aplikasi mobile (UI) menggunakan React Native dan Expo.
Kalau sebelumnya kita fokus ke struktur dasar dan logika aplikasi, sekarang kita mulai belajar “mempercantik” tampilan biar aplikasimu keren, rapi, dan nyaman dilihat pengguna. 😎

---

🎯 Tujuan Pembelajaran

Setelah kamu mempelajari materi ini, diharapkan kamu bisa:

1. Paham apa itu UI (User Interface) dalam aplikasi mobile.
2. Tahu gimana cara menyusun layout dasar dengan Flexbox.
3. Mengenal dan menggunakan komponen/widget dasar seperti View, Text, Button, dan Image.
4. Bisa membuat tampilan sederhana langsung dari Expo Go App di HP-mu. 📱

---

🧱 1. Apa Itu UI (User Interface)?

UI atau User Interface adalah tampilan yang dilihat dan digunakan oleh pengguna saat membuka aplikasi.
Misalnya, tombol “Login”, kotak teks “Nama”, atau gambar profil — semua itu adalah bagian dari UI.

Tujuan utama UI adalah:

• Menarik secara visual 🎨
• Nyaman digunakan 👆
• Membuat pengguna mudah mencapai tujuannya

Kalau desainnya berantakan, pengguna bisa langsung menutup aplikasimu 😅
Jadi, UI itu penting banget!

---

⚛️ 2. Struktur Dasar UI di React Native

Di React Native, elemen dasar tampilan disebut View.
Kita bisa anggap View itu seperti “kotak” tempat menaruh teks, tombol, atau gambar.

Contoh sederhana:

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Halo, dunia mobile!</Text>
    </View>
  );
}

➡️ Kode di atas menampilkan teks sederhana di layar HP kamu lewat aplikasi Expo.
Gampang banget kan?

---

🔲 3. Mengenal Layout dengan Flexbox

React Native pakai sistem Flexbox buat ngatur posisi elemen — apakah ditata ke samping, ke bawah, di tengah, atau di ujung layar.

Contoh:

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-around' }}>
  <View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
  <View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />
  <View style={{ width: 50, height: 50, backgroundColor: 'green' }} />
</View>

🧠 Penjelasan:

• flexDirection: 'row' → menyusun ke samping.
• justifyContent: 'space-around' → kasih jarak antar elemen.
• alignItems: 'center' → sejajarkan elemen di tengah.

---

🧰 4. Komponen (Widget) Dasar

Berikut ini beberapa komponen penting yang wajib kamu kenal di React Native:

Komponen	Fungsinya
View	Wadah utama untuk layout
Text	Menampilkan teks
Image	Menampilkan gambar
Button	Tombol interaksi
TextInput	Input teks dari pengguna
ScrollView	Biar tampilan bisa di-scroll
TouchableOpacity	Area sentuh dengan efek klik

Contoh:

import { View, Text, Button } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 20, marginBottom: 10 }}>Selamat Datang!</Text>
      <Button title="Mulai Sekarang" onPress={() => alert('Aksi tombol!')} />
    </View>
  );
}

5. Gaya (Style) di React Native

React Native pakai sistem mirip CSS, tapi ditulis dalam bentuk objek JavaScript.

Contoh:

<View style={{
  backgroundColor: '#e0f7fa',
  padding: 20,
  borderRadius: 10,
  alignItems: 'center'
}}>
  <Text style={{ color: '#00796b', fontSize: 18 }}>Desain UI Sederhana</Text>
</View>

Properti penting yang sering dipakai:

• color, backgroundColor
• margin, padding
• borderWidth, borderRadius
• textAlign, fontSize, fontWeight

---

📦 6. Contoh: Tabel Modern di Expo

Sekarang kita coba buat tampilan tabel modern yang menampilkan data mahasiswa.
Tabel ini kelihatan bersih, rapi, dan bisa di-scroll di HP.

import React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';

export default function App() {
  const data = [
    { nama: 'Andi', nilai: 85, status: 'Lulus' },
    { nama: 'Budi', nilai: 72, status: 'Lulus' },
    { nama: 'Citra', nilai: 58, status: 'Remedial' },
    { nama: 'Dewi', nilai: 90, status: 'Lulus' },
  ];

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>Daftar Nilai Mahasiswa</Text>

      <View style={[styles.row, styles.header]}>
        <Text style={[styles.cell, styles.headerText]}>Nama</Text>
        <Text style={[styles.cell, styles.headerText]}>Nilai</Text>
        <Text style={[styles.cell, styles.headerText]}>Status</Text>
      </View>

      {data.map((item, index) => (
        <View
          key={index}
          style={[
            styles.row,
            { backgroundColor: index % 2 === 0 ? '#f9f9f9' : '#e8f5e9' },
          ]}
        >
          <Text style={styles.cell}>{item.nama}</Text>
          <Text style={styles.cell}>{item.nilai}</Text>
          <Text
            style={[
              styles.cell,
              { color: item.status === 'Lulus' ? '#2e7d32' : '#d32f2f' },
            ]}
          >
            {item.status}
          </Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, backgroundColor: '#fff' },
  title: { fontSize: 20, fontWeight: 'bold', textAlign: 'center', marginBottom: 12, color: '#00796b' },
  row: { flexDirection: 'row', borderBottomWidth: 1, borderColor: '#ccc' },
  header: { backgroundColor: '#00796b' },
  cell: { flex: 1, padding: 10, textAlign: 'center' },
  headerText: { color: '#fff', fontWeight: 'bold' },
});

✨ Hasilnya:

• Warna baris selang-seling
• Teks rapi di tengah
• Tampilan clean dan responsif

---

💡 7. Tips Mendesain UI

1. Gunakan warna kontras biar teks terbaca jelas.
2. Tambahkan padding dan margin supaya tampilan lega.
3. Gunakan font yang konsisten.
4. Hindari terlalu banyak warna mencolok.
5. Buat desain yang bisa menyesuaikan layar HP kecil.

---

🧠 8. Tugas Praktek

Buat tampilan aplikasi sederhana dengan komponen:

• Header judul aplikasi
• Daftar data (misal tabel nilai atau daftar kontak)
• Tombol aksi sederhana
• Gunakan Flexbox dan StyleSheet

Kirim hasilnya lewat Expo link atau screenshot tampilan aplikasi di HP kamu.