“Dari pengguna HP → jadi pembuat aplikasi”

darsurplsmknesaba7/30/2026 08:18:00 AM 34 komentar

📱 Dunia Mobile Development

“Dari pengguna HP → jadi pembuat aplikasi”

🎯 Kompetensi

Setelah pembelajaran, peserta didik mampu:

Menjelaskan konsep dasar Mobile Development.
Membedakan Android dan iOS.
Memahami perbedaan Native, Hybrid, dan Cross-Platform.
Mengenal teknologi yang digunakan dalam pengembangan aplikasi mobile.
Membandingkan Kotlin, Flutter, dan React Native.
Mengenal profesi dan peluang kerja di bidang Mobile Development.
Membuat Roadmap Karier Mobile Developer sesuai minat pribadi.

🔥 MATERI 1 — Kenapa HP Kita Bisa "Sepintar Ini"?

Mulai dari pertanyaan yang dekat dengan siswa:

“Kalau kamu buka TikTok, Instagram, Gojek, WhatsApp, atau mobile banking… sebenarnya siapa yang membuat aplikasi itu?”

Dari sini masuk ke konsep:

Apa itu Mobile Development?

Mobile Development adalah proses membuat aplikasi yang berjalan pada perangkat mobile seperti:

📱 Smartphone
📲 Tablet
⌚ Smartwatch
🚗 Android Auto / sistem kendaraan
📺 Smart TV

Contoh aplikasi:

WhatsApp
Instagram
TikTok
YouTube
Gojek
Shopee
Spotify
Mobile Banking

💡 Aktivitas Gen Z

Minta siswa memilih:

“3 aplikasi yang paling sering kamu buka setiap hari.”

Kemudian diskusikan:

Kenapa aplikasi itu menarik?

Misalnya:

cepat
tampilannya bagus
mudah digunakan
ada notifikasi
bisa login
bisa upload foto
bisa chatting
bisa transaksi

Dari sini siswa mulai memahami bahwa di balik fitur tersebut ada programmer.

🤖 MATERI 2 — Android vs iOS

Jangan langsung memberikan definisi panjang.

Gunakan pertanyaan:

“Kalau Android dan iPhone sama-sama HP, kenapa aplikasinya bisa berbeda?”

Android

Dikembangkan oleh Google dan digunakan oleh banyak produsen perangkat.

Contoh:

Samsung
Xiaomi
OPPO
vivo
Google Pixel

Teknologi yang umum:

Kotlin / Java

iOS

Sistem operasi perangkat Apple.

Contoh:

iPhone
iPad

Teknologi utama:

Swift / Objective-C

🎮 Mini Challenge

“Android atau iPhone?”

Berikan beberapa kasus:

Saya ingin membuat aplikasi untuk Samsung.

Saya ingin membuat aplikasi untuk iPhone.

Saya ingin aplikasi yang berjalan di Android dan iPhone.

Siswa menentukan teknologi/platform yang cocok.

⚔️ MATERI 3 — Native vs Hybrid vs Cross-Platform

Ini bagian yang sangat penting.

Buat analogi:

🏠 Native

Seperti membuat rumah khusus untuk satu jenis lingkungan.

Android → teknologi Android
iOS → teknologi iOS

Kelebihan:

performa tinggi
akses fitur perangkat lebih maksimal
cocok untuk aplikasi yang kompleks

Kekurangan:

jika ingin Android + iOS, biasanya perlu pengembangan terpisah.

🔀 Cross-Platform

Satu project dapat digunakan untuk membuat aplikasi di beberapa platform.

Contohnya:

Flutter

Dart

atau

React Native

JavaScript / TypeScript

Analogi:

“Sekali bikin, bisa dipakai untuk beberapa platform.”

Tentu bukan berarti 100% tanpa penyesuaian, tetapi konsepnya sangat menarik untuk dikenalkan kepada siswa.

🥊 MATERI 4 — Flutter vs React Native vs Kotlin

Nah, ini bisa dibuat seperti battle.

Teknologi	Bahasa	Target utama	Cocok untuk
Kotlin	Kotlin	Android	Native Android
Flutter	Dart	Android + iOS	Cross-platform
React Native	JavaScript/TypeScript	Android + iOS	Cross-platform

🟢 Kotlin

Cocok jika ingin fokus:

Android Developer

🔵 Flutter

Cocok jika ingin:

Membuat aplikasi Android + iOS dengan satu framework

🟣 React Native

Menarik untuk siswa yang sudah tertarik:

JavaScript / Web Development → Mobile Development

🎯 Pertanyaan diskusi

“Kalau kamu diberi tugas membuat aplikasi untuk Android dan iPhone dengan waktu terbatas, teknologi mana yang kamu pilih? Kenapa?”

Tidak harus ada satu jawaban benar. Yang penting siswa mampu memberikan alasan teknis.

🧑‍💻 MATERI 5 — Siapa Saja yang Membuat Aplikasi?

Jangan hanya mengenalkan "programmer".

Tunjukkan bahwa membuat aplikasi adalah pekerjaan tim.

👨‍💻 Mobile Developer

Membuat kode aplikasi.

🎨 UI/UX Designer

Mendesain tampilan dan pengalaman pengguna.

🧪 QA / Tester

Menguji aplikasi dan mencari bug.

☁️ Backend Developer

Mengembangkan server/API/database.

📊 Product Manager

Menentukan kebutuhan dan arah produk.

🔧 DevOps / Cloud Engineer

Membantu proses deployment dan infrastruktur.

💼 Project Manager

Mengatur pekerjaan dan timeline project.

💰 MATERI 6 — Mobile Developer Kerja di Mana?

Hubungkan dengan dunia nyata.

🏢 Software House

Mengerjakan aplikasi untuk klien.

Contoh project:

Aplikasi sekolah
Aplikasi toko
Aplikasi rumah sakit
Aplikasi perusahaan

🚀 Startup

Membangun produk digital.

Contoh:

aplikasi transportasi
marketplace
fintech
edutech
food delivery

🏦 Perusahaan

Banyak perusahaan memiliki tim IT sendiri.

Misalnya:

bank
rumah sakit
perusahaan retail
perusahaan manufaktur
perusahaan telekomunikasi

🌎 Freelancer

Mengerjakan project berdasarkan pesanan.

Misalnya:

"Tolong buatkan aplikasi kasir."

"Tolong buat aplikasi absensi."

"Tolong buat aplikasi booking."

💸 MATERI 7 — Dari Skill Jadi Penghasilan

Ini biasanya bagian yang membuat siswa lebih tertarik.

Buat alur:

Belajar → Portfolio → Project → Pengalaman → Kerja/Freelance

Contohnya:

Level 1

Belajar Dart / JavaScript

↓

Level 2

Membuat aplikasi sederhana

↓

Level 3

Membuat aplikasi dengan database

↓

Level 4

Membuat API

↓

Level 5

Membuat aplikasi real project

↓

Level 6

Upload portfolio

↓

Level 7

PKL / Freelance / Kerja

🚀 MATERI 8 — Evolusi Mobile Apps

Bisa dibuat sebagai perjalanan:

📞 HP jadul

↓

📱 Smartphone

↓

📲 Aplikasi mobile

↓

☁️ Cloud + API

↓

🤖 AI

↓

⌚ IoT + Wearable

↓

🚗 Smart Device

Pertanyaan:

“Menurut kalian, 5 tahun lagi aplikasi mobile akan seperti apa?”

Ini bisa menjadi diskusi kelas.

🧩 MATERI 9 — Bedah Aplikasi Favorit

Ini menurut saya sangat cocok untuk Gen Z.

Pilih satu aplikasi yang familiar.

Misalnya aplikasi marketplace.

Minta siswa membedah:

Tampilan

Apa saja halaman yang tersedia?

Fitur

Apa saja yang bisa dilakukan user?

Data

Data apa yang disimpan?

Internet

Fitur apa yang membutuhkan internet?

Login

Bagaimana pengguna dikenali?

Database

Data pengguna dan transaksi disimpan di mana?

API

Bagaimana aplikasi berkomunikasi dengan server?

Kemudian gambarkan:

User → Mobile App → API → Server → Database

Siswa mulai mendapatkan gambaran arsitektur aplikasi mobile.

🛠️ MATERI 10 — Tools Mobile Developer

Kenalkan tools yang benar-benar akan mereka gunakan.

Coding

VS Code
Android Studio

Framework

Flutter
React Native

Bahasa

Dart
JavaScript
TypeScript
Kotlin

Database

SQLite
Firebase
MySQL

Version Control

Git
GitHub

Testing

Android Emulator
Smartphone Android

🧠 PROJECT: "MY FIRST MOBILE PRODUCT"

Daripada hanya membuat roadmap karier, saya sarankan siswa juga membuat mini product concept.

Misalnya:

Nama aplikasi: Kantin SMKN 1 Banjar

Siswa menentukan:

Masalah:
Siswa harus antre di kantin.

Solusi:
Aplikasi pemesanan makanan.

Target user:
Siswa dan guru.

Fitur:

Login
Daftar makanan
Keranjang
Checkout
Status pesanan

Teknologi:

Flutter / React Native

🗺️ PROJECT UTAMA — ROADMAP KARIER MOBILE DEVELOPER

Ini bisa menjadi tugas akhir materi.

Minta siswa membuat:

"MY ROADMAP TO MOBILE DEVELOPER"

Contoh:

2026

📚 Belajar dasar pemrograman

↓

2026

🐦 Belajar Dart / JavaScript

↓

2026

📱 Membuat aplikasi pertama

↓

2027

🗄️ Belajar Database + API

↓

2027

🚀 Membuat 3 project portfolio

↓

PKL

💼 Mengikuti project industri

↓

Lulus

👨‍💻 Junior Mobile Developer

↓

2–3 tahun

🔥 Mobile Developer

↓

5 tahun

🚀 Senior Developer / Tech Lead / Freelancer / Entrepreneur

🎮 Biar Pembelajarannya Tidak Membosankan

Saya sarankan satu pertemuan jangan hanya:

Guru menjelaskan → siswa mencatat.

Gunakan pola:

🔥 Hook

Pertanyaan yang dekat dengan kehidupan mereka.

🧠 Learn

Materi singkat 15–20 menit.

🔎 Explore

Bedah aplikasi nyata.

⚔️ Challenge

Flutter vs React Native vs Kotlin.

🛠️ Practice

Membuat rancangan aplikasi.

🎤 Present

Siswa mempresentasikan hasil.

🚀 Project

Membuat roadmap + ide aplikasi.

📚 Susunan Materi yang Saya Rekomendasikan

Kalau ini untuk materi awal Pemrograman Perangkat Bergerak kelas XI/XII, saya akan susun menjadi 8 pertemuan:

Pertemuan	Materi	Aktivitas
1	📱 Dunia Mobile Development	Bedah aplikasi favorit
2	🤖 Android & iOS	Android vs iPhone challenge
3	🧩 Native, Hybrid & Cross-Platform	Studi kasus
4	⚔️ Kotlin vs Flutter vs React Native	Technology Battle
5	👨‍💻 Profesi Mobile Developer	Simulasi tim developer
6	💼 Dunia Kerja Mobile Developer	Software House, Startup, Freelancer
7	🚀 Bedah & Rancang Aplikasi	Membuat konsep aplikasi
8	🗺️ Roadmap Karier	Membuat "My Mobile Developer Roadmap"

🎯 Output akhirnya

Siswa tidak hanya hafal:

Android = Google
iOS = Apple
Flutter = Dart
React Native = JavaScript
Kotlin = Android

Tetapi sampai pada pemahaman:

“Saya tahu bagaimana aplikasi dibuat, teknologi apa yang digunakan, siapa saja yang bekerja di dalamnya, dan langkah apa yang harus saya ambil kalau ingin menjadi Mobile Developer.”

Ini menurut saya jauh lebih relevan dengan Gen Z dan dunia kerja daripada materi yang hanya berisi sejarah Android dan definisi istilah.

📱 Belajar Mobile Development dengan Cara Gen Z: Bedah Aplikasi yang Mereka Gunakan Sehari-hari

darsurplsmknesaba7/30/2026 08:13:00 AM Tidak ada komentar

📱 Belajar Mobile Development dengan Cara Gen Z: Bedah Aplikasi yang Mereka Gunakan Sehari-hari

Jangan mulai dengan kode. Mulailah dengan rasa penasaran.

Ketika mengajar Pemrograman Perangkat Bergerak, salah satu tantangan yang sering muncul adalah bagaimana membuat siswa tertarik sebelum mereka berhadapan dengan kode program.

Kita bisa saja langsung mengajarkan Dart, Kotlin, JavaScript, Flutter, React Native, atau Android Studio.

Tetapi ada pertanyaan yang lebih menarik untuk diberikan kepada siswa:

"Pernahkah kalian berpikir bagaimana aplikasi Instagram, WhatsApp, TikTok, Shopee, atau Gojek bisa bekerja?"

Pertanyaan sederhana tersebut bisa menjadi pintu masuk yang menarik untuk mengenalkan Mobile Development.

📱 Dari Pengguna Menjadi Pembuat Aplikasi

Hampir setiap siswa sudah menjadi pengguna aplikasi mobile.

Mereka menggunakan smartphone untuk:

berkomunikasi
menonton video
bermain game
berbelanja
belajar
mencari informasi
menggunakan media sosial

Namun, menjadi pengguna aplikasi berbeda dengan memahami bagaimana aplikasi tersebut dibuat.

Di sinilah pembelajaran Mobile Development menjadi menarik.

Siswa tidak hanya diajak menggunakan aplikasi, tetapi mulai bertanya:

"Bagaimana aplikasi ini dibuat?"

"Di mana datanya disimpan?"

"Bagaimana aplikasi tahu siapa saya?"

"Bagaimana foto yang saya upload bisa muncul di HP orang lain?"

"Bagaimana tombol Like bisa mengubah jumlah Like?"

Pertanyaan-pertanyaan tersebut sebenarnya sudah membawa siswa masuk ke dunia software engineering.

🔎 Bedah Aplikasi: Belajar dari Aplikasi yang Sudah Mereka Kenal

Salah satu metode pembelajaran yang menarik adalah Bedah Aplikasi.

Tidak perlu langsung membongkar source code.

Yang dibedah adalah cara kerja aplikasinya dari sudut pandang pengguna dan developer.

Sebagai contoh, kita bisa menggunakan Instagram.

📸 Bedah Instagram

Instagram sangat cocok digunakan sebagai contoh karena siswa sudah familiar dengan aplikasinya.

Tetapi kali ini kita tidak melihat Instagram hanya sebagai pengguna.

Kita mencoba melihatnya sebagai seorang Mobile Developer.

1. Tampilan

Pertama, perhatikan halaman yang tersedia.

Misalnya:

Home
Explore
Reels
Create
Activity
Direct Message
Profile
Settings

Kemudian berikan pertanyaan kepada siswa:

"Kalau kalian menjadi programmer Instagram, halaman mana yang menurut kalian paling sulit dibuat?"

Pertanyaan ini membuat siswa mulai memperhatikan aplikasi secara lebih kritis.

⚡ 2. Fitur

Selanjutnya kita identifikasi apa saja yang dapat dilakukan pengguna.

Contohnya:

membuat akun
login
upload foto
upload video
membuat Story
membuat Reels
Like
komentar
Follow
DM
Search
Save
Share
menerima notifikasi

Kemudian ajukan pertanyaan:

"Dari semua fitur tersebut, fitur mana yang membutuhkan database?"

Siswa akan mulai menyadari bahwa hampir semua aktivitas pengguna berhubungan dengan data.

🗄️ 3. Data

Sekarang kita masuk ke sudut pandang RPL.

Apa saja data yang kemungkinan diperlukan?

Data pengguna

User ID
Username
Nama
Email
Foto Profil
Bio

Data postingan

Post ID
User ID
Caption
Foto/Video
Tanggal Upload

Data interaksi

Like
Comment
Follow
Share
Save

Data pesan

Pengirim
Penerima
Isi Pesan
Waktu
Status Pesan

Siswa akhirnya memahami bahwa sebuah aplikasi mobile tidak hanya terdiri dari tampilan.

Di belakang tampilan terdapat data dan proses.

🌐 4. Internet

Selanjutnya coba lakukan eksperimen sederhana.

Tanyakan:

"Apa yang terjadi kalau internet Instagram kita matikan?"

Beberapa bagian aplikasi mungkin masih dapat dibuka karena data tertentu sudah tersimpan sementara di perangkat.

Namun banyak fitur utama membutuhkan komunikasi dengan server.

Contohnya:

mengambil feed terbaru
Like
Comment
Follow
Upload
Search
DM
Notifikasi

Dari sini siswa mulai mengenal konsep:

Mobile App tidak berdiri sendiri.

Aplikasi sering berkomunikasi dengan sistem di belakangnya.

🔐 5. Login

Sekarang kita bedah proses login.

Misalnya pengguna memasukkan:

Username
Password

Secara sederhana:

User
 ↓
Mobile App
 ↓
Server
 ↓
Database
 ↓
Verifikasi
 ↓
Berhasil / Gagal

Dari satu fitur login saja siswa sudah dapat diperkenalkan kepada konsep:

Authentication
User
Server
Database
Security

Tentu dalam sistem nyata prosesnya jauh lebih kompleks dan menggunakan mekanisme keamanan yang tepat.

🔌 6. API

Bagian ini biasanya menjadi salah satu konsep yang paling penting bagi siswa RPL.

Kita bisa menggunakan analogi sederhana.

🍽️ Restoran

User = pelanggan

Mobile App = orang yang memesan

API = pelayan

Server = dapur

Database = tempat penyimpanan data

Ketika aplikasi membutuhkan data, aplikasi mengirimkan request melalui API.

Secara sederhana:

Mobile App
     ↓
   Request
     ↓
    API
     ↓
   Server
     ↓
  Database
     ↓
   Server
     ↓
  Response
     ↓
Mobile App

Jadi ketika siswa bertanya:

"Kok postingan orang lain bisa muncul di HP saya?"

Kita bisa menjawab:

Aplikasi meminta data ke server melalui API, kemudian server memberikan data yang diperlukan kembali kepada aplikasi.

❤️ Bedah Satu Fitur: Like

Agar konsep lebih mudah dipahami, jangan langsung membedah seluruh Instagram.

Ambil satu fitur sederhana: Like.

Misalnya jumlah Like awal:

❤️ 125

Kemudian user menekan tombol Like.

Secara sederhana:

USER
  ↓
Menekan Like
  ↓
MOBILE APP
  ↓
API
  ↓
SERVER
  ↓
DATABASE
  ↓
Data Like disimpan
  ↓
SERVER
  ↓
API
  ↓
MOBILE APP
  ↓
❤️ 126

Dari satu tombol sederhana, siswa sudah melihat hubungan:

UI → Event → API → Server → Database → Response → UI

Ini adalah cara yang menarik untuk memperkenalkan konsep backend dan database tanpa membuat siswa langsung takut dengan istilah teknis.

🧩 Gambaran Arsitektur Aplikasi

Setelah melakukan bedah aplikasi, siswa dapat diperkenalkan dengan gambaran sederhana:

             👤 USER
                │
                ▼
        📱 MOBILE APP
                │
                ▼
             🔌 API
                │
                ▼
          🖥️ SERVER
           /       \
          /         \
         ▼           ▼
   🗄️ DATABASE    ☁️ STORAGE

Versi paling sederhananya:

USER
  ↓
MOBILE APP
  ↓
API
  ↓
SERVER
  ↓
DATABASE

Memang arsitektur aplikasi nyata jauh lebih kompleks.

Tetapi untuk tahap pengenalan, model sederhana seperti ini membantu siswa memahami gambaran besar sebuah aplikasi.

🤖 Android, iOS, Native, dan Cross-Platform

Setelah siswa memahami bagaimana aplikasi bekerja, barulah kita masuk ke dunia teknologi.

Android

Sistem operasi mobile yang digunakan pada berbagai perangkat.

Teknologi yang umum digunakan antara lain:

Kotlin / Java

iOS

Platform perangkat Apple.

Teknologi utamanya antara lain:

Swift / Objective-C

Kemudian siswa dikenalkan dengan pendekatan pengembangan aplikasi.

Native

Aplikasi dikembangkan secara khusus untuk platform tertentu.

Cross-Platform

Satu project dapat digunakan untuk membangun aplikasi pada beberapa platform dengan framework seperti:

Flutter

atau

React Native

⚔️ Flutter vs React Native vs Kotlin

Daripada menjadikan materi ini sebagai hafalan, ubah menjadi diskusi.

Teknologi	Bahasa	Pendekatan	Cocok untuk
Kotlin	Kotlin	Native	Android
Flutter	Dart	Cross-platform	Android & iOS
React Native	JavaScript/TypeScript	Cross-platform	Android & iOS

Kemudian berikan studi kasus:

"Kalian mendapat tugas membuat aplikasi Android dan iOS dalam waktu terbatas. Teknologi mana yang akan kalian pilih?"

Tidak harus ada satu jawaban mutlak.

Yang penting siswa mampu memberikan alasan.

👨‍💻 Mobile Developer Bukan Sekadar Programmer

Pembelajaran Mobile Development juga perlu memperkenalkan dunia profesinya.

Sebuah aplikasi besar tidak dikerjakan oleh satu orang saja.

Ada:

👨‍💻 Mobile Developer

Mengembangkan aplikasi.

🎨 UI/UX Designer

Mendesain tampilan dan pengalaman pengguna.

🧪 QA Tester

Menguji aplikasi dan mencari bug.

☁️ Backend Developer

Mengembangkan server, API, dan sistem backend.

🗄️ Database Engineer

Mengelola data.

📊 Product Manager

Menentukan kebutuhan dan arah produk.

🚀 DevOps / Cloud Engineer

Membantu deployment dan infrastruktur.

Dengan demikian siswa memahami bahwa dunia teknologi memiliki banyak jalur karier.

💼 Ke Mana Mobile Developer Bisa Bekerja?

Mobile Developer dapat bekerja di berbagai lingkungan.

🏢 Software House

Mengerjakan aplikasi untuk berbagai klien.

🚀 Startup

Membangun produk digital.

🏦 Perusahaan

Banyak perusahaan memiliki tim IT internal.

🌎 Freelancer

Mengerjakan project berdasarkan kebutuhan klien.

💡 Entrepreneur

Bahkan seorang developer dapat membuat produk aplikasinya sendiri.

Inilah salah satu alasan mengapa pembelajaran Mobile Development sebaiknya tidak berhenti pada syntax.

Siswa perlu melihat hubungan antara skill, project, portfolio, dan dunia kerja.

🚀 Jangan Hanya Membuat Clone Instagram

Setelah membedah aplikasi besar, berikan tantangan yang lebih dekat dengan lingkungan siswa.

Misalnya:

📱 "Bagaimana kalau kita membuat Instagram versi sekolah?"

Contohnya:

SMKNESABA

Fitur:

Login
 ↓
Home
 ↓
Berita Sekolah
 ↓
Foto Kegiatan
 ↓
Like
 ↓
Komentar
 ↓
Profile

Kemudian siswa menentukan:

Siapa user-nya?

Apa masalah yang diselesaikan?

Apa saja fiturnya?

Data apa yang dibutuhkan?

Bagaimana data disimpan?

Apakah membutuhkan API?

Teknologi apa yang akan digunakan?

Di sinilah pembelajaran mulai berubah dari:

"Belajar coding"

menjadi:

"Belajar membuat produk digital."

🛠️ Dari Bedah Aplikasi Menjadi Project

Metode pembelajaran dapat dibuat menjadi alur:

📱 Gunakan Aplikasi
        ↓
🔎 Bedah Aplikasi
        ↓
🧠 Pahami Cara Kerja
        ↓
💡 Temukan Masalah
        ↓
📝 Rancang Solusi
        ↓
📱 Buat Prototype
        ↓
💻 Coding
        ↓
🗄️ Database + API
        ↓
🚀 Testing
        ↓
📦 Release

Siswa akhirnya melihat bahwa membuat aplikasi bukan hanya mengetik kode.

Ada proses berpikir, merancang, menguji, memperbaiki, dan menyelesaikan masalah.

🗺️ Roadmap Menjadi Mobile Developer

Setelah memahami dunia Mobile Development, siswa dapat membuat roadmap pribadi.

Contohnya:

2026
📚 Dasar Pemrograman
       ↓
🐦 Dart / JavaScript
       ↓
📱 Membuat Aplikasi Sederhana
       ↓
🗄️ Database
       ↓
🔌 API
       ↓
🚀 Membuat Project
       ↓
📁 Portfolio
       ↓
💼 PKL / Freelance
       ↓
👨‍💻 Junior Mobile Developer
       ↓
🔥 Mobile Developer
       ↓
🚀 Senior / Tech Lead / Entrepreneur

Roadmap setiap siswa tentu dapat berbeda.

Ada yang ingin menjadi Mobile Developer.

Ada yang lebih tertarik UI/UX.

Ada yang ingin menjadi Backend Developer.

Ada yang ingin menjadi Game Developer.

Ada pula yang ingin membangun startup sendiri.

🎯 Inti Pembelajaran

Menurut saya, pembelajaran Mobile Development yang menarik bukan dimulai dari:

"Hari ini kita belajar Flutter."

Tetapi dimulai dari:

"Pernahkah kalian berpikir bagaimana aplikasi yang setiap hari kalian gunakan bisa bekerja?"

Kemudian:

Bedah aplikasi.

↓

Pahami masalah.

↓

Pahami fitur.

↓

Pahami data.

↓

Pahami API.

↓

Pahami server.

↓

Pahami database.

↓

Baru belajar framework.

Dengan pendekatan ini, siswa mempunyai alasan mengapa mereka harus belajar Flutter, React Native, Kotlin, database, API, dan berbagai teknologi lainnya.

🌱 Dari Pengguna Menjadi Pencipta

Teknologi yang digunakan siswa setiap hari sebenarnya dapat menjadi sumber belajar yang luar biasa.

Instagram bukan hanya tempat untuk melihat foto.

TikTok bukan hanya tempat menonton video.

Shopee bukan hanya tempat berbelanja.

Gojek bukan hanya tempat memesan kendaraan atau makanan.

Di balik semuanya terdapat:

Program

Database

API

Server

Cloud

Security

Design

Business

Teamwork

Dan yang paling penting:

Ada orang yang membuat semuanya.

Maka tugas kita sebagai pendidik bukan hanya mengajarkan siswa bagaimana menggunakan teknologi.

Lebih jauh dari itu, kita perlu membantu mereka menyadari:

"Suatu hari nanti, kalian juga bisa menjadi orang yang membuat teknologi tersebut."

Karena belajar Mobile Development pada akhirnya bukan sekadar belajar membuat aplikasi.

Ini adalah proses mengubah seorang pengguna teknologi menjadi seorang pencipta teknologi. 🚀📱

📱 Praktikum React Native: Membangun Aplikasi To Do List dari Nol Hingga Berhasil Membuat APK

darsurplsmknesaba7/24/2026 11:20:00 AM Tidak ada komentar

📱 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


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.

🚀 Praktikum React Native #1: Membuat Project Pertama dengan Expo

darsurplsmknesaba7/23/2026 10:59:00 PM Tidak ada komentar

🚀 Praktikum React Native #1: Membuat Project Pertama dengan Expo

Belajar Mobile Programming dari Nol untuk Siswa SMK RPL

Selamat datang di praktikum pertama React Native. Pada pertemuan ini kita akan mempelajari cara membuat aplikasi mobile menggunakan React Native dengan bantuan Expo. Expo memudahkan kita menjalankan aplikasi tanpa harus melakukan konfigurasi yang rumit.

📱 Apa itu React Native?

React Native adalah framework JavaScript yang digunakan untuk membuat aplikasi mobile Android dan iOS menggunakan satu basis kode (single codebase).

Dengan React Native, kita cukup menulis satu kode JavaScript, kemudian aplikasi dapat berjalan di berbagai platform.

Keunggulan React Native

✅ Mudah dipelajari
✅ Menggunakan JavaScript
✅ Bisa membuat aplikasi Android & iOS
✅ Banyak digunakan oleh perusahaan
✅ Hot Reload (perubahan langsung terlihat)

🛠 Persiapan

Sebelum memulai praktikum, pastikan telah menginstal:

Node.js (LTS)
Visual Studio Code
Expo Go (Android)
Git (Opsional)

📂 Membuat Project Baru

Buka Terminal VS Code kemudian jalankan perintah berikut.

npx create-expo-app BelajarReactNative -t blank

Jika muncul pilihan SDK:

Latest (SDK xx) - Recommended for most projects

Pilih Latest kemudian tekan Enter.

Tunggu hingga proses selesai.

📁 Masuk ke Folder Project

cd BelajarReactNative

🚀 Menjalankan Project

Jalankan Expo.

npx expo start

atau

npm start

Jika berhasil akan muncul QR Code.

📲 Menjalankan di Android

Install aplikasi Expo Go dari Google Play Store.

Kemudian:

Scan QR Code
Tunggu proses loading
Aplikasi akan tampil di smartphone

📁 Struktur Folder

Setelah project selesai dibuat, kita akan melihat struktur seperti berikut.

BelajarReactNative
│
├── assets
├── node_modules
├── App.js
├── index.js
├── package.json
└── app.json

File yang paling sering kita edit adalah:

App.js

Mengenal App.js

Secara sederhana isi App.js terdiri dari tiga bagian.

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

export default function App() {
  return (
    <View>
      <Text>Hello React Native</Text>
    </View>
  );
}

Penjelasan:

import → mengambil komponen React Native.
View → wadah seperti <div> pada HTML.
Text → menampilkan tulisan.
export default → komponen utama aplikasi.

Praktik Pertama

Ganti isi App.js menjadi berikut.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.subTitle}>
        Selamat datang di kelas Mobile Programming
      </Text>

      <Text style={styles.title}>
        Belajar bersama Darsu
      </Text>

      <Text style={styles.footer}>
        🚀 React Native + Expo
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({

  container:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#F5F7FA',
    padding:20
  },

  subTitle:{
    fontSize:18,
    color:'#666',
    textAlign:'center'
  },

  title:{
    fontSize:30,
    fontWeight:'bold',
    textAlign:'center',
    marginVertical:15
  },

  footer:{
    fontSize:18,
    color:'#1E88E5'
  }

});

Simpan file (Ctrl + S).

Perubahan akan langsung muncul di aplikasi (Fast Refresh).

Mengenal Komponen

View

Digunakan sebagai wadah komponen.

<View>

Text

Digunakan untuk menampilkan tulisan.

<Text>Hello</Text>

StyleSheet

Digunakan untuk mengatur tampilan.

StyleSheet.create({
   ...
})

Mengenal Flexbox

React Native menggunakan Flexbox untuk mengatur posisi komponen.

Contoh:

justifyContent:'center'
alignItems:'center'

Hasilnya seluruh komponen berada tepat di tengah layar.

Hasil Praktikum

Setelah praktikum selesai, tampilan aplikasi akan menampilkan:

Judul di tengah layar.
Teks sambutan.
Tulisan "React Native + Expo".
Background sederhana dan rapi.

Permasalahan yang Sering Muncul

1. `npx` tidak dikenali

Pastikan Node.js telah terinstal.

Cek:

node -v
npm -v

2. Expo Go tidak bisa membuka project

Solusi:

npx expo start --clear

Pastikan Expo Go yang digunakan sesuai dengan SDK project.

3. Metro Bundler Error

Hapus cache.

npx expo start -c

Tantangan Praktikum

Modifikasi aplikasi dengan kreativitas masing-masing.

Cobalah untuk:

Mengubah warna latar belakang.
Mengubah ukuran huruf.
Menambahkan emoji.
Mengganti tulisan sesuai identitas masing-masing.
Menambahkan nama kelas.

Contoh:

Selamat Datang

Belajar React Native

XI RPL 1

SMKN 1 Banjar

Kesimpulan

Pada praktikum pertama ini kita telah mempelajari dasar-dasar pengembangan aplikasi menggunakan React Native dengan Expo. Kita mengenal struktur project, menjalankan aplikasi pertama, memahami fungsi View, Text, dan StyleSheet, serta melihat bagaimana perubahan kode dapat langsung tampil melalui fitur Fast Refresh. Penguasaan materi dasar ini menjadi fondasi sebelum melanjutkan ke materi berikutnya seperti penggunaan Button, TextInput, Image, useState, dan pembuatan aplikasi To Do List.

💻 Tugas Praktikum

Buat project React Native baru menggunakan Expo.
Jalankan aplikasi pada perangkat Android menggunakan Expo Go.
Ubah tampilan App.js sesuai kreativitas masing-masing.
Ambil screenshot hasil aplikasi yang telah dibuat.
Buat postingan di blog pribadi yang berisi:
- Tujuan praktikum.
- Langkah-langkah pembuatan project.
- Potongan kode App.js.
- Screenshot hasil aplikasi.
- Kesimpulan.
Kirimkan link postingan blog pada kolom komentar postingan ini.

Selamat belajar dan teruslah bereksperimen! 🚀 Setiap aplikasi besar selalu dimulai dari proyek sederhana. Hari ini kita membuat aplikasi pertama, dan langkah kecil ini adalah awal perjalanan menjadi seorang Mobile Developer profesional.