📱 Praktikum React Native: Membangun Aplikasi To Do List dari Nol Hingga Berhasil Membuat APK
Mata Pelajaran: Pemrograman Perangkat Bergerak
Kelas: XI PPLG / RPL
Framework: React Native + Expo
Level: Pemula
Pendahuluan
Pada praktikum kali ini, siswa akan belajar membuat aplikasi To Do List menggunakan React Native dengan framework Expo. Selain membuat aplikasi sederhana, siswa juga akan belajar bagaimana seorang programmer mengatasi berbagai error yang muncul selama proses pengembangan.
Di dunia industri, menulis kode hanyalah sebagian kecil dari pekerjaan seorang programmer. Sebagian besar waktu justru digunakan untuk membaca dokumentasi, menganalisis error, dan mencari solusi yang tepat. Oleh karena itu, praktikum ini dirancang agar siswa tidak hanya mampu membuat aplikasi, tetapi juga memahami proses debugging secara bertahap.
Tujuan Praktikum
Setelah menyelesaikan praktikum ini, siswa diharapkan mampu:
- Memahami struktur project React Native.
- Membuat aplikasi To Do List sederhana.
- Menambahkan data ke dalam daftar tugas.
- Menghapus data.
- Menambahkan status selesai menggunakan checkbox.
- Menggunakan Date Picker dan Time Picker.
- Menjalankan aplikasi menggunakan Expo Go.
- Menghasilkan file APK menggunakan EAS Build.
- Menganalisis dan memperbaiki error yang muncul selama pengembangan.
Persiapan
Pastikan perangkat telah terpasang:
- Node.js
- Visual Studio Code
- Android Studio (opsional)
- Expo Go pada smartphone Android
Membuat project baru:
npx create-expo-app BelajarReactNative
Masuk ke folder project:
cd BelajarReactNative
Menjalankan project:
npx expo start
Praktikum 1 – Membuat To Do List Sederhana
Pada tahap awal, aplikasi memiliki fitur:
- Menambah tugas
- Menampilkan daftar tugas
- Menghapus tugas
Contoh tampilan:
📋 To Do List Belajar React Native [ Tambah ] • Belajar React Native • Mengerjakan Tugas • Praktikum Mobile
Konsep React Native yang dipelajari:
-
useState -
TextInput -
TouchableOpacity -
FlatList -
StyleSheet
Praktikum 2 – Menambahkan Checkbox
Agar pengguna mengetahui tugas yang sudah selesai, setiap item diberi checkbox.
Contoh:
☐ Belajar React Native ☑ Mengerjakan Tugas
Ketika checkbox ditekan:
- Status berubah menjadi selesai.
-
Teks otomatis dicoret (
line-through).
Konsep yang dipelajari:
- State
- Array Object
-
Fungsi
map()
Praktikum 3 – Menambahkan Tanggal dan Waktu
Agar setiap tugas memiliki jadwal, digunakan DateTimePicker.
Instalasi:
npx expo install @react-native-community/datetimepicker
Fitur:
- Memilih tanggal
- Memilih jam
Contoh tampilan:
📅 24 Juli 2026 🕒 08.30
Praktikum 4 – Menjalankan Aplikasi
Menjalankan Metro Server:
npx expo start
Jika menggunakan emulator:
Tekan A
Jika menggunakan HP:
- Scan QR Code menggunakan Expo Go.
Permasalahan yang Sering Muncul
1. Cannot connect to Expo CLI
Pesan:
Cannot connect to Expo CLI
Penyebab:
- Metro belum berjalan.
- HP dan laptop tidak berada pada jaringan yang sama.
- Firewall memblokir koneksi.
- IP komputer berubah.
Solusi:
npx expo start --clear
atau
npx expo start -c
2. Project incompatible with Expo Go
Penyebab:
Versi SDK project berbeda dengan versi Expo Go.
Solusi:
npx expo install --fix
3. Error Saat Membuat APK
Pesan:
Build failed Unknown Error
Jangan panik.
Buka log build pada Expo dan lihat bagian:
Install dependencies
4. package-lock.json Tidak Sinkron
Error:
npm ci can only install packages when package.json and package-lock.json are in sync
Penyebab:
File package-lock.json belum diperbarui setelah menambah package.
Solusi:
npm install
atau
rm package-lock.json npm install
5. Dependency Tidak Sesuai
Contoh:
"@react-native-community/cli":"latest"
Package tersebut tidak diperlukan pada project Expo.
Hapus dari package.json.
Praktikum 5 – Membuat APK
Login Expo:
npx expo login
Install EAS:
npm install -g eas-cli
Konfigurasi:
eas build:configure
Membuat APK:
eas build -p android --profile preview
Setelah proses selesai, Expo akan memberikan tautan untuk mengunduh file APK.
Apa yang Dipelajari?
Pada praktikum ini siswa tidak hanya belajar membuat aplikasi, tetapi juga belajar bagaimana seorang programmer menyelesaikan masalah.
Beberapa kompetensi yang diperoleh antara lain:
- Membaca pesan error.
- Memahami dependency project.
- Mengelola package dengan npm.
- Menggunakan Expo CLI.
- Menghasilkan file APK.
- Melakukan debugging secara sistematis.
Kesimpulan
Membuat aplikasi mobile tidak selalu berjalan mulus. Seorang programmer akan sering menemui berbagai kendala, mulai dari dependency yang tidak sesuai, konflik versi, hingga kegagalan saat proses build. Yang membedakan programmer berpengalaman bukanlah seberapa sedikit mereka menemui error, melainkan bagaimana mereka mampu menganalisis, memahami, dan menyelesaikan setiap masalah tersebut.
Melalui praktikum ini, siswa diharapkan memahami bahwa error adalah bagian dari proses belajar, bukan tanda kegagalan. Dengan kemampuan membaca log, mencari penyebab, dan menerapkan solusi yang tepat, mereka akan memiliki bekal yang lebih kuat untuk menghadapi tantangan dalam pengembangan aplikasi mobile di dunia industri.
Tantangan Praktikum
Kembangkan aplikasi To Do List dengan menambahkan fitur berikut:
- Edit tugas.
- Penyimpanan data menggunakan AsyncStorage.
- Filter tugas (Semua, Aktif, Selesai).
- Pencarian tugas.
- Pengingat (Reminder).
- Tampilan menggunakan Material Design.
- Pembuatan APK dan pengujian pada smartphone Android.
Artikel ini sebagai seri praktikum di blog saya, karena tidak hanya berisi teori dan kode, tetapi juga mendokumentasikan proses penyelesaian masalah yang umum ditemui saat belajar React Native. Ini akan memberikan pengalaman belajar yang lebih realistis bagi siswa sekaligus menjadi referensi ketika mereka menghadapi error serupa di kemudian hari.
