Mengenal Dunia Mobile Development dan React Native

darsurplsmknesaba7/17/2026 07:54:00 AM 40 komentar

📱 Seri 1 Belajar React Native dari Nol untuk Siswa SMK

Mengenal Dunia Mobile Development dan React Native

Pendahuluan

Pernahkah kamu berpikir, siapa yang membuat aplikasi WhatsApp, Instagram, TikTok, Gojek, atau Shopee yang setiap hari kita gunakan?

Di balik aplikasi-aplikasi tersebut ada Mobile Developer, yaitu programmer yang merancang, membangun, menguji, dan mengembangkan aplikasi untuk smartphone.

Saat ini, hampir semua aktivitas manusia dilakukan melalui perangkat mobile. Belanja, belajar, bekerja, memesan makanan, hingga mengatur keuangan semuanya dilakukan melalui aplikasi.

Karena itulah, kebutuhan akan Mobile Developer terus meningkat. Bagi siswa SMK jurusan RPL, mempelajari Mobile Development bukan hanya untuk memenuhi tugas sekolah, tetapi juga sebagai bekal memasuki dunia kerja dan industri digital yang terus berkembang.

React Native hadir sebagai salah satu teknologi yang banyak digunakan perusahaan karena mampu mempercepat proses pengembangan aplikasi tanpa mengorbankan kualitas.

🎯 Tujuan Pembelajaran

Setelah mempelajari materi ini, diharapkan kamu mampu:

Memahami konsep dasar Mobile Development.
Menjelaskan apa itu React Native.
Mengetahui alasan React Native banyak digunakan di industri.
Mengenal software utama yang digunakan dalam pengembangan aplikasi mobile.

1️⃣ Konsep Mobile Development

Apa itu Mobile Development?

Mobile Development adalah proses merancang, membuat, menguji, dan memelihara aplikasi yang berjalan pada perangkat mobile seperti smartphone dan tablet.

Aplikasi mobile dirancang agar dapat digunakan kapan saja dan di mana saja, sehingga harus memiliki tampilan yang nyaman, responsif, dan mudah digunakan.

Contohnya:

WhatsApp
Instagram
TikTok
Shopee
Tokopedia
Gojek
Grab
Mobile Banking

Semua aplikasi tersebut merupakan hasil kerja Mobile Developer.

Mengapa Mobile Development Penting?

Saat ini, sebagian besar pengguna internet mengakses layanan melalui smartphone.

Perubahan perilaku ini membuat perusahaan lebih memprioritaskan pengembangan aplikasi mobile dibandingkan website.

Artinya, peluang kerja sebagai Mobile Developer akan terus terbuka lebar.

Analogi Kehidupan

Bayangkan sebuah rumah.

Arsitek membuat desain rumah.
Tukang membangun rumah.
Tukang listrik memasang instalasi.
Tukang cat memperindah rumah.

Begitu pula dalam Mobile Development.

Developer merancang tampilan, menulis kode, menghubungkan database, hingga memastikan aplikasi berjalan dengan baik.

Diagram Mobile Development


Ide Aplikasi
      │
      ▼
Perancangan UI/UX
      │
      ▼
Menulis Program
      │
      ▼
Testing
      │
      ▼
Perbaikan
      │
      ▼
Publikasi ke Play Store / App Store
      │
      ▼
Pemeliharaan dan Update

Pola Pikir Seorang Mobile Developer

Seorang programmer bukan hanya belajar mengetik kode.

Ia belajar menyelesaikan masalah.

Saat membuat aplikasi kas kelas misalnya, yang dipikirkan bukan hanya tombol "Simpan", tetapi juga:

Bagaimana data disimpan?
Bagaimana data dicari?
Bagaimana jika terjadi kesalahan?
Bagaimana agar pengguna mudah menggunakannya?

Inilah yang membedakan programmer dengan orang yang hanya bisa menyalin kode.

2️⃣ Apa Itu React Native?

Pengertian

React Native adalah framework open source yang digunakan untuk membuat aplikasi Android dan iOS menggunakan bahasa JavaScript dan konsep React.

Dengan React Native, seorang developer cukup menulis satu basis kode (single codebase) untuk menghasilkan aplikasi di dua platform sekaligus.

Artinya:

Tulis sekali.

Jalankan di Android.

Jalankan juga di iPhone.

Mengapa React Native Dibuat?

Sebelum React Native hadir, perusahaan harus membuat dua aplikasi yang berbeda:

Android menggunakan Java/Kotlin.

iPhone menggunakan Swift/Objective-C.

Hal ini membutuhkan:

dua tim programmer,
waktu lebih lama,
biaya lebih besar,
proses pemeliharaan yang lebih rumit.

React Native hadir untuk mengatasi tantangan tersebut dengan pendekatan "Learn Once, Write Anywhere".

Analogi Kehidupan

Bayangkan kamu memiliki dua kelas.

Kamu ingin memberikan materi yang sama kepada kedua kelas tersebut.

Ada dua cara:

Cara pertama, menjelaskan dua kali.

Cara kedua, merekam video pembelajaran lalu memutarnya di kedua kelas.

React Native bekerja seperti cara kedua.

Satu kode dapat digunakan di berbagai platform dengan penyesuaian yang minimal.

Diagram React Native


JavaScript + React
        │
        ▼
   React Native
     │       │
     ▼       ▼
 Android   iOS

Keunggulan React Native

Satu basis kode untuk dua platform.
Proses pengembangan lebih cepat.
Mudah dipelajari bagi yang sudah mengenal JavaScript.
Komunitas besar dan dokumentasi lengkap.
Banyak pustaka (library) siap pakai.
Didukung oleh Meta (Facebook).

3️⃣ Mengapa React Native Banyak Digunakan Industri?

Efisiensi Waktu

Perusahaan tidak perlu membuat dua aplikasi yang berbeda.

Satu tim dapat mengembangkan aplikasi Android dan iOS secara bersamaan.

Efisiensi Biaya

Lebih sedikit sumber daya yang dibutuhkan.

Biaya pengembangan menjadi lebih hemat.

Performa yang Baik

React Native menghasilkan aplikasi dengan performa yang mendekati aplikasi native.

Bagi sebagian besar kebutuhan bisnis, performanya sudah sangat memadai.

Komunitas Besar

Karena digunakan secara luas, hampir setiap masalah yang ditemui sudah pernah dibahas oleh komunitas.

Hal ini memudahkan proses belajar dan pengembangan.

Banyak Digunakan Perusahaan

Berbagai perusahaan memanfaatkan React Native untuk mempercepat pengembangan aplikasi mereka, mulai dari startup hingga perusahaan teknologi besar.

Hal ini menunjukkan bahwa React Native bukan sekadar alat belajar, tetapi juga teknologi yang digunakan dalam dunia kerja.

Peluang Karier

Dengan menguasai React Native, kamu berpeluang berkarier sebagai:

Mobile Developer
Front-End Mobile Engineer
React Native Developer
Full Stack Developer
Freelance Mobile Programmer
Software Engineer

Bahkan kamu juga bisa membangun startup atau aplikasi sendiri.

Pesan Penting

Belajar React Native bukan sekadar belajar membuat aplikasi.

Kamu sedang belajar menyelesaikan masalah melalui teknologi.

Aplikasi yang sederhana sekalipun bisa memberikan manfaat besar jika mampu membantu banyak orang.

4️⃣ Software yang Digunakan

Sebelum mulai membuat aplikasi, seorang Mobile Developer perlu menyiapkan lingkungan pengembangan (development environment).

Berikut perangkat lunak yang akan digunakan selama proses belajar.

Software	Fungsi
Node.js	Menjalankan JavaScript di luar browser dan menyediakan npm.
npm	Mengelola library atau package yang dibutuhkan proyek.
Visual Studio Code (VS Code)	Editor kode untuk menulis dan mengelola program.
Git	Mencatat riwayat perubahan kode dan memudahkan kolaborasi.
Android Studio	Menyediakan Android SDK, emulator, dan alat pendukung pengembangan Android.
JDK (Java Development Kit)	Dibutuhkan oleh Android Studio untuk proses build aplikasi.
React Native CLI / Expo	Alat untuk membuat, menjalankan, dan mengembangkan aplikasi React Native.
Android Emulator / Smartphone Android	Digunakan untuk menguji aplikasi secara langsung.

Hubungan Antar Software


Visual Studio Code
        │
        ▼
Menulis Kode JavaScript
        │
        ▼
Node.js + npm
        │
        ▼
React Native
        │
        ▼
Android Studio (SDK & Emulator)
        │
        ▼
Aplikasi Android Berjalan

Mindset Seorang Mobile Developer

Belajar React Native bukan tentang menghafal sintaks.

Yang lebih penting adalah membangun pola pikir seorang pengembang perangkat lunak:

Berpikir logis dalam memecahkan masalah.
Teliti saat menulis dan membaca kode.
Sabar ketika menghadapi error, karena setiap error adalah petunjuk untuk belajar.
Terus belajar, karena teknologi selalu berkembang.
Berorientasi pada pengguna, bukan hanya pada kode.

"Programmer hebat bukanlah orang yang tidak pernah mengalami error, tetapi orang yang mampu memahami penyebabnya dan memperbaikinya."

Kesimpulan

React Native menjadi salah satu pilihan terbaik untuk memulai perjalanan sebagai Mobile Developer karena menggabungkan kemudahan belajar, efisiensi pengembangan, dan kebutuhan nyata di industri.

Dengan memahami konsep Mobile Development, mengenal React Native, memahami alasan penggunaannya di dunia kerja, serta menguasai perangkat pendukungnya, kamu telah membangun pondasi yang kuat untuk melangkah ke materi berikutnya: JavaScript Modern sebagai bahasa utama dalam pengembangan React Native.

"Belajar pemrograman bukan sekadar mengejar nilai atau sertifikat. Setiap baris kode yang kamu tulis adalah langkah kecil menuju kemampuan menciptakan solusi yang bermanfaat bagi banyak orang."

Seri 1 — Belajar React Native dari Nol untuk Siswa SMK

darsurplsmknesaba7/17/2026 07:51:00 AM Tidak ada komentar

Seri 1 — Belajar React Native dari Nol untuk Siswa SMK

Roadmap Lengkap Menjadi Mobile Developer

Pendahuluan

Pernahkah kamu berpikir bagaimana aplikasi seperti WhatsApp, Instagram, TikTok, Gojek, Grab, Shopee, atau Tokopedia dibuat?

Setiap hari jutaan orang menggunakan aplikasi mobile untuk belajar, bekerja, berbelanja, hingga mencari hiburan. Semua aplikasi tersebut dibuat oleh para Mobile Developer.

Kabar baiknya, kamu tidak perlu menjadi seorang jenius untuk membuat aplikasi seperti itu. Dengan belajar secara bertahap dan konsisten, siswa SMK pun sudah bisa membuat aplikasi Android sendiri.

Salah satu teknologi yang paling banyak digunakan saat ini adalah React Native.

React Native memungkinkan kita membuat aplikasi Android dan iPhone hanya dengan satu bahasa pemrograman yaitu JavaScript.

Pada seri pertama ini kita akan mengenal perjalanan belajar React Native dari nol hingga siap bekerja di dunia industri.

Tujuan Pembelajaran

Setelah mempelajari materi ini, siswa diharapkan mampu:

✅ Memahami apa itu React Native.

✅ Mengetahui peluang karier Mobile Developer.

✅ Mengetahui skill yang wajib dipelajari.

✅ Memahami roadmap belajar React Native.

✅ Menyiapkan target belajar selama satu semester.

Konsep Dasar

Apa itu React Native?

React Native adalah framework yang dibuat oleh Meta (Facebook) untuk membuat aplikasi Android dan iOS menggunakan JavaScript.

Dengan React Native kita cukup membuat satu kode program yang bisa dijalankan pada dua sistem operasi sekaligus.

Bahasa yang digunakan

JavaScript
JSX
React

Tools yang digunakan

VS Code
Node.js
Android Studio
Emulator Android
Expo CLI (untuk pemula)

Mengapa Belajar React Native?

Ada banyak alasan mengapa React Native menjadi pilihan yang tepat bagi siswa SMK.

1. Dipakai oleh perusahaan besar

Contoh:

Facebook
Instagram
Discord
Shopify
Tesla

2. Mudah dipelajari

Jika sudah pernah belajar HTML, CSS, dan JavaScript maka proses belajar menjadi lebih mudah.

3. Satu kode untuk Android dan iPhone

Tidak perlu membuat dua aplikasi yang berbeda.

4. Banyak lowongan kerja

Startup maupun perusahaan besar membutuhkan Mobile Developer.

5. Cocok untuk Freelance

Banyak project React Native tersedia di Fiverr, Upwork, maupun Freelancer.

Peluang Kerja Mobile Developer

Setelah menguasai React Native, kamu bisa bekerja sebagai:

Mobile Developer
Front-End Mobile Engineer
React Native Developer
Software Engineer
Freelancer
Startup Founder
App Developer
UI Implementer
Mobile Consultant

Bahkan kamu juga bisa membuat aplikasi sendiri dan mendapatkan penghasilan dari Google Play Store.

Skill yang Harus Dikuasai

Roadmap belajar tidak langsung membuat aplikasi.

Semuanya dimulai dari dasar.

Logika Pemrograman

↓

HTML CSS

↓

JavaScript

↓

ES6

↓

React

↓

React Native

↓

API

↓

Firebase

↓

Database

↓

State Management

↓

Publish APK

↓

Play Store

Roadmap Pembelajaran

Tahap 1

Dasar Pemrograman

Variabel
Tipe Data
Operator
Percabangan
Perulangan
Function

Tahap 2

JavaScript Modern

let
const
Arrow Function
Object
Array
Destructuring
Spread Operator
Module

Tahap 3

React Fundamental

Component
Props
State
Event
Hook
Lifecycle

Tahap 4

React Native

View
Text
Image
Button
ScrollView
FlatList
TextInput
StyleSheet

Tahap 5

Navigation

Stack Navigation
Bottom Tab
Drawer

Tahap 6

Database

AsyncStorage
SQLite
Firebase

Tahap 7

REST API

Fetch API
Axios
JSON
CRUD

Tahap 8

Project

To Do List
Notes
Kas Kelas
Absensi
Jadwal Pelajaran
E-Commerce
Chat App

Tahap 9

Deployment

Build APK
Generate AAB
Publish Google Play

Analogi Kehidupan

Bayangkan ingin menjadi seorang koki profesional.

Kamu tidak langsung memasak makanan hotel berbintang.

Kamu belajar:

mengenal alat dapur,
belajar memotong,
belajar memasak sederhana,
mencoba resep baru,
hingga akhirnya mampu membuat hidangan terbaik.

Belajar React Native juga seperti itu. Tidak perlu terburu-buru membuat aplikasi besar. Kuasai dasar-dasarnya terlebih dahulu.

Diagram

                 MENJADI MOBILE DEVELOPER

                Logika Pemrograman
                        │
                        ▼
                  JavaScript Dasar
                        │
                        ▼
                  JavaScript ES6
                        │
                        ▼
                 React Fundamental
                        │
                        ▼
                  React Native UI
                        │
                        ▼
                  Navigation
                        │
                        ▼
               Database & Firebase
                        │
                        ▼
                     REST API
                        │
                        ▼
                     Project
                        │
                        ▼
                 Publish Play Store
                        │
                        ▼
                  Siap Dunia Kerja

Sintaks

Program pertama React Native.

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

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

Penjelasan Sintaks

import

Mengambil komponen dari React Native.

View

Wadah seperti <div> pada website.

Text

Menampilkan tulisan.

export default

Menjadikan komponen App sebagai halaman utama.

return

Menampilkan tampilan ke layar.

Contoh Program

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

export default function App() {
  return (
    <View>
      <Text>Halo Dunia!</Text>
      <Text>Saya belajar React Native.</Text>
    </View>
  );
}

Penjelasan Baris per Baris

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

Mengambil komponen bawaan.

export default function App() {

Membuat komponen utama.

<View>

Membuat area tampilan.

<Text>Halo Dunia!</Text>

Menampilkan tulisan.

</View>

Menutup View.

Latihan

Jawablah pertanyaan berikut.

Apa yang dimaksud React Native?
Mengapa React Native banyak digunakan?
Apa bahasa utama yang digunakan?
Sebutkan tiga pekerjaan yang menggunakan React Native.
Apa fungsi komponen View?

Tantangan

Tuliskan target belajar React Native selama 6 bulan ke depan.

Contoh:

Bulan 1 → JavaScript
Bulan 2 → React
Bulan 3 → React Native
Bulan 4 → Database
Bulan 5 → API
Bulan 6 → Project Portofolio

Kesalahan yang Sering Terjadi

❌ Ingin langsung membuat aplikasi seperti WhatsApp.

❌ Tidak menguasai JavaScript terlebih dahulu.

❌ Hanya menonton tutorial tanpa praktik.

❌ Tidak membaca dokumentasi resmi.

❌ Mudah menyerah saat muncul error.

Rangkuman

React Native adalah framework untuk membuat aplikasi Android dan iOS dengan satu basis kode JavaScript.
Mobile Developer merupakan profesi yang banyak dibutuhkan industri.
Penguasaan JavaScript dan React menjadi fondasi penting sebelum masuk ke React Native.
Belajar secara bertahap melalui roadmap akan membuat proses lebih mudah dipahami.
Konsistensi berlatih dan membangun proyek nyata adalah kunci menjadi Mobile Developer.

Quiz

Pilih jawaban yang paling tepat.

React Native digunakan untuk membuat ....
- A. Website
- B. Aplikasi Mobile
- C. Game PC
- D. Database
React Native menggunakan bahasa ....
- A. Java
- B. Kotlin
- C. JavaScript
- D. PHP
React Native dibuat oleh ....
- A. Google
- B. Microsoft
- C. Meta
- D. Apple
Komponen untuk menampilkan teks adalah ....
- A. Button
- B. Image
- C. Text
- D. View
Langkah pertama sebelum belajar React Native adalah ....
- A. Publish ke Play Store
- B. Menguasai dasar JavaScript
- C. Membuat aplikasi e-commerce
- D. Menggunakan Firebase

Kunci Jawaban: 1-B, 2-C, 3-C, 4-C, 5-B

Project Mini

Nama Proyek: My Mobile Developer Journey

Buatlah sebuah poster digital atau mind map yang berisi:

Cita-cita menjadi Mobile Developer.
Alasan memilih React Native.
Roadmap belajar selama 1 tahun.
Daftar skill yang ingin dikuasai.
Target aplikasi pertama yang ingin dibuat.

Presentasikan hasilnya di depan kelas selama 3–5 menit.

Kesimpulan

Menjadi Mobile Developer bukanlah tujuan yang dicapai dalam semalam, melainkan hasil dari proses belajar yang bertahap dan konsisten. React Native memberikan kesempatan bagi siswa SMK untuk membangun aplikasi modern dengan teknologi yang digunakan di dunia industri. Mulailah dari dasar, kuasai JavaScript, pahami React, lalu lanjutkan ke React Native. Setiap latihan dan setiap kesalahan adalah bagian dari proses menuju keahlian. Pada seri berikutnya, kita akan memulai langkah pertama dengan mempelajari JavaScript Dasar, sebagai fondasi utama sebelum membangun aplikasi mobile.

React Fundamental

darsurplsmknesaba7/16/2026 02:50:00 PM Tidak ada komentar

MODUL PEMBELAJARAN

React Fundamental

Mata Pelajaran: Pemrograman Perangkat Bergerak

Kelas XII RPL/PPLG

"React bukan sekadar framework untuk membuat tampilan. React mengajarkan cara berpikir dalam membangun aplikasi yang rapi, terstruktur, dan mudah dikembangkan."

Capaian Pembelajaran

Pada akhir pembelajaran, peserta didik mampu memahami konsep dasar React, membangun antarmuka menggunakan Component, memanfaatkan Props, mengelola State, menggunakan Hook, serta mengembangkan Dashboard sederhana sebagai implementasi konsep React.

Tujuan Pembelajaran

Setelah mempelajari materi ini, siswa mampu:

Menjelaskan konsep React.
Memahami fungsi Component.
Menggunakan Props untuk mengirim data.
Menggunakan State untuk mengubah data secara dinamis.
Memahami Hook (useState).
Membuat Dashboard sederhana.

Apersepsi

Guru membuka pembelajaran dengan bertanya.

"Ketika membuka Instagram, apakah seluruh halaman berubah saat ada notifikasi baru?"

Jawaban siswa:

"Tidak."

Yang berubah hanya bagian tertentu.

Contohnya:

jumlah like
jumlah komentar
foto profil
chat baru

Mengapa?

Karena aplikasi modern menggunakan Component.

Apa itu React?

React adalah JavaScript Library yang digunakan untuk membuat User Interface (UI) secara cepat, modern, dan mudah dipelihara.

React dibuat oleh Meta (Facebook).

Sekarang React digunakan oleh banyak perusahaan besar seperti

Facebook
Instagram
Netflix
Airbnb
Discord
Shopify

Sedangkan untuk aplikasi mobile digunakan React Native.

Mengapa Belajar React?

Tanpa React

Satu halaman terdiri dari ribuan baris HTML.

Sulit diperbaiki.

Sulit dikembangkan.

Sulit digunakan kembali.

Dengan React

Halaman dipecah menjadi bagian-bagian kecil.

Lebih rapi.

Lebih mudah dipelihara.

Lebih cepat dibuat.

Konsep React

Bayangkan sebuah rumah.

Rumah terdiri dari

pintu
jendela
atap
ruang tamu
kamar
dapur

Semuanya adalah bagian kecil.

Jika pintu rusak

Tidak perlu membangun rumah baru.

Cukup mengganti pintunya.

Begitu juga React.

Aplikasi dibangun dari bagian-bagian kecil.

Bagian kecil inilah yang disebut

Component

MATERI 1

Component

Pengertian

Component adalah bagian kecil dari tampilan aplikasi yang dapat digunakan kembali (Reusable).

Misalnya aplikasi Shopee.

Logo

Search Bar

Banner

Kategori

Produk

Footer

Semuanya merupakan Component.

Contoh Dashboard Sekolah

Dashboard terdiri dari

Header

↓

Sidebar

↓

Card Jumlah Siswa

↓

Card Jumlah Guru

↓

Grafik

↓

Footer

Masing-masing dibuat sebagai Component.

Keuntungan Component

✔ Kode lebih rapi

✔ Mudah diperbaiki

✔ Bisa digunakan kembali

✔ Mudah dikembangkan

Analogi

Lego.

Satu keping Lego kecil.

Jika disusun.

Menjadi mobil.

Rumah.

Pesawat.

Begitu pula React.

Component kecil.

Disusun menjadi aplikasi besar.

MATERI 2

Props

Setelah Component dibuat,

bagaimana jika isinya berbeda?

Misalnya

Card pertama

Jumlah Siswa
1500

Card kedua

Jumlah Guru
120

Apakah harus membuat dua Component?

Tidak.

Cukup satu Component.

Datanya dikirim menggunakan

Props

Pengertian

Props adalah data yang dikirim dari Parent Component ke Child Component.

Props bersifat

Read Only.

Tidak boleh diubah oleh Child.

Analogi

Guru memberi soal kepada siswa.

Guru

↓

Memberikan soal.

↓

Siswa mengerjakan.

↓

Siswa tidak mengubah soal.

Props seperti itu.

Contoh

<Card
judul="Jumlah Siswa"
nilai="1500"
/>

<Card
judul="Jumlah Guru"
nilai="120"
/>

Component tetap sama.

Yang berubah hanya datanya.

Keuntungan Props

Mengurangi penulisan kode.

Lebih fleksibel.

Reusable.

MATERI 3

State

Props tidak bisa berubah.

Lalu bagaimana jika datanya berubah?

Misalnya

Like Instagram

100

↓

101

↓

102

↓

103

Bagaimana caranya?

Menggunakan

State.

Pengertian

State adalah data yang dimiliki oleh sebuah Component dan dapat berubah selama aplikasi berjalan.

Contoh

Jumlah Like

Keranjang Belanja

Saldo

Jam Digital

Counter

Semuanya menggunakan State.

Analogi

Gelas.

Awalnya

Air = 0

Ditambah

Air = 1

Ditambah

Air = 2

Nilainya selalu berubah.

Itulah State.

Fungsi State

✔ Menyimpan data

✔ Mengubah tampilan otomatis

✔ Membuat aplikasi interaktif

MATERI 4

Hook

Sebelumnya

State hanya ada di Class Component.

Sekarang

React menyediakan

Hook.

Pengertian

Hook adalah fitur React yang memungkinkan Function Component memiliki kemampuan seperti State dan Lifecycle.

Hook paling dasar

useState()

Fungsi useState

Menyimpan data.

Mengubah data.

Meng-update tampilan otomatis.

Contoh Penggunaan

Counter

↓

Klik

↓

Klik

↓

Klik

↓

Tanpa me-refresh halaman.

Hook Lain

useEffect()

Digunakan ketika

mengambil data API
menjalankan proses saat halaman dibuka
timer
sinkronisasi data

Pada materi awal, fokuskan pembelajaran pada useState(), sedangkan useEffect() dikenalkan secara sederhana sebagai jembatan menuju materi API pada pertemuan berikutnya.

Hubungan Antar Konsep

Dashboard

↓

Terdiri dari banyak

Component

↓

Setiap Component menerima

Props

↓

Sebagian Component memiliki

State

↓

State dikelola menggunakan

Hook (useState)

Inilah alur berpikir React yang harus dipahami siswa sebelum mulai membuat aplikasi yang lebih kompleks.

PROJECT

Dashboard Sekolah

Buat Dashboard sederhana yang menampilkan:

Header:

Logo sekolah
Nama sekolah

Sidebar:

Beranda
Data Siswa
Data Guru
Kelas
Pengaturan

Konten:

Card Jumlah Siswa
Card Jumlah Guru
Card Jumlah Kelas
Card Jumlah Jurusan

Tambahkan:

Jam digital.
Tanggal hari ini.
Tombol Tambah Siswa yang menambah angka pada card "Jumlah Siswa" menggunakan useState().

Gunakan Props agar setiap Card menerima judul dan nilai yang berbeda tanpa membuat Component baru.

Refleksi

Jawablah pertanyaan berikut.

Apa manfaat Component dibandingkan menulis semua tampilan dalam satu file?
Mengapa Props membuat kode lebih efisien?
Apa perbedaan Props dan State?
Mengapa State diperlukan dalam aplikasi modern?
Bagaimana Hook membantu Function Component menjadi lebih interaktif?
Jika Anda membuat aplikasi sekolah, Component apa saja yang akan Anda buat agar aplikasi mudah dikembangkan?

Kesimpulan

React mengajarkan cara membangun aplikasi dari bagian-bagian kecil (Component) yang dapat digunakan kembali. Props memungkinkan setiap Component menerima data yang berbeda tanpa menulis ulang kode, sedangkan State menyimpan data yang dapat berubah selama aplikasi berjalan. Perubahan State dikelola menggunakan Hook, terutama useState(), sehingga antarmuka dapat diperbarui secara otomatis. Dengan memahami empat konsep dasar ini, siswa memiliki fondasi yang kuat untuk melanjutkan ke materi React Native, REST API, autentikasi, dan pengembangan aplikasi mobile yang sesuai dengan praktik industri.

Mengenal Dunia Mobile Development: Langkah Awal Menjadi Mobile Developer Profesional

darsurplsmknesaba7/16/2026 08:17:00 AM Tidak ada komentar

Mengenal Dunia Mobile Development: Langkah Awal Menjadi Mobile Developer Profesional

"Setiap aplikasi hebat yang kita gunakan hari ini, dahulu hanyalah sebuah ide sederhana yang diwujudkan dengan keberanian untuk belajar dan berkarya."

Di era digital saat ini, hampir setiap aktivitas manusia tidak lepas dari smartphone. Mulai dari berkomunikasi melalui WhatsApp, berbagi momen di Instagram, menikmati hiburan di TikTok, berbelanja di Shopee, memesan transportasi melalui Gojek atau Grab, mendengarkan musik di Spotify, hingga melakukan transaksi menggunakan Mobile Banking. Semua aplikasi tersebut hadir untuk mempermudah kehidupan kita.

Namun, pernahkah kita bertanya, siapa yang membuat aplikasi-aplikasi tersebut?

Jawabannya adalah Mobile Developer, yaitu seseorang yang merancang, mengembangkan, menguji, dan memelihara aplikasi yang berjalan pada perangkat mobile seperti smartphone dan tablet.

Apa itu Mobile Development?

Mobile Development adalah proses membuat aplikasi yang dapat digunakan pada perangkat bergerak seperti smartphone dan tablet. Seorang Mobile Developer tidak hanya menulis kode program, tetapi juga harus memahami berbagai aspek penting agar aplikasi nyaman digunakan oleh pengguna.

Beberapa hal yang menjadi perhatian seorang Mobile Developer antara lain:

User Experience (UX), yaitu bagaimana pengguna merasa nyaman saat menggunakan aplikasi.
User Interface (UI), yaitu tampilan aplikasi agar menarik dan mudah dipahami.
Keamanan Data, agar informasi pengguna tetap terlindungi.
Performa Aplikasi, sehingga aplikasi berjalan cepat dan stabil.
Kebutuhan Pengguna, karena aplikasi yang baik harus mampu menyelesaikan masalah yang dihadapi penggunanya.

Dengan kata lain, seorang Mobile Developer adalah seorang problem solver yang memanfaatkan teknologi untuk memberikan solusi bagi masyarakat.

Evolusi Mobile Application

Perjalanan teknologi mobile berkembang sangat pesat dari tahun ke tahun.

1995–2005: Era Ponsel Sederhana

Pada masa ini masyarakat mengenal ponsel seperti Nokia dengan sistem operasi Symbian dan aplikasi berbasis Java ME. Aplikasi yang tersedia masih sangat sederhana, seperti permainan Snake, kalkulator, kalender, dan pesan singkat (SMS).

2007: Lahirnya Smartphone Modern

Tahun 2007 menjadi titik awal revolusi smartphone ketika Apple memperkenalkan iPhone. Perangkat ini menghadirkan layar sentuh, antarmuka yang modern, dan pengalaman pengguna yang jauh lebih baik dibandingkan ponsel sebelumnya.

2008: Android Resmi Diluncurkan

Setahun kemudian, Google memperkenalkan Android sebagai sistem operasi berbasis open source. Android kemudian berkembang sangat cepat dan menjadi sistem operasi mobile dengan jumlah pengguna terbesar di dunia.

2015: Era Aplikasi Online

Memasuki tahun 2015, aplikasi mulai memanfaatkan teknologi internet secara maksimal. Muncul berbagai layanan berbasis Cloud Computing, REST API, marketplace digital, media sosial, hingga layanan transportasi online yang menghubungkan jutaan pengguna secara real time.

2020–Sekarang: Era Artificial Intelligence

Saat ini perkembangan teknologi semakin pesat dengan hadirnya:

Artificial Intelligence (AI)
Cloud Computing
Internet of Things (IoT)
Cross Platform Development
Super Apps

Aplikasi tidak lagi hanya digunakan untuk komunikasi, tetapi telah menjadi bagian dari pendidikan, kesehatan, keuangan, hiburan, hingga pemerintahan.

Android vs iOS

Saat ini terdapat dua sistem operasi mobile yang paling banyak digunakan, yaitu Android dan iOS.

Android

Android dikembangkan oleh Google dan bersifat Open Source, sehingga dapat digunakan oleh berbagai produsen smartphone seperti Samsung, Xiaomi, Oppo, Vivo, Realme, dan banyak merek lainnya.

Kelebihan Android:

Memiliki jumlah pengguna terbesar di Indonesia.
Mudah dipelajari oleh pengembang pemula.
Banyak pilihan perangkat dengan harga yang beragam.
Memiliki peluang kerja yang luas bagi Mobile Developer.

iOS

Berbeda dengan Android, iOS dikembangkan oleh Apple dan hanya digunakan pada perangkat seperti iPhone dan iPad.

Karena bersifat Closed Source, Apple memiliki kontrol penuh terhadap perangkat keras maupun perangkat lunaknya sehingga menghasilkan performa yang stabil, keamanan tinggi, dan pengalaman pengguna yang konsisten.

Android atau iOS, Mana yang Lebih Baik?

Tidak ada jawaban yang mutlak karena masing-masing memiliki keunggulan.

Android unggul dalam jumlah pengguna, fleksibilitas, dan peluang pengembangan aplikasi, sedangkan iOS dikenal dengan kualitas, keamanan, dan optimalisasi perangkat yang sangat baik.

Sebagai siswa Rekayasa Perangkat Lunak, mempelajari keduanya merupakan bekal penting untuk menghadapi dunia kerja. Dalam pembelajaran nanti, kita akan menggunakan Flutter untuk memahami konsep dasar pengembangan aplikasi mobile, kemudian melanjutkan ke React Native agar lebih siap menghadapi kebutuhan industri yang saat ini banyak menggunakan teknologi tersebut.

Kesimpulan

Mobile Development merupakan salah satu bidang yang memiliki peluang karier sangat besar di era transformasi digital. Di balik setiap aplikasi yang kita gunakan setiap hari, terdapat tim pengembang yang bekerja keras mulai dari merancang tampilan, menulis kode program, menguji aplikasi, hingga memastikan aplikasi berjalan dengan baik.

Belajar Mobile Development bukan hanya belajar membuat aplikasi, tetapi juga belajar berpikir logis, bekerja sama dalam tim, memecahkan masalah, dan menciptakan solusi yang bermanfaat bagi banyak orang.

Siapa tahu, beberapa tahun ke depan, aplikasi yang digunakan jutaan orang berasal dari ide dan karya yang lahir dari ruang kelas ini.

Semoga artikel ini menjadi pengantar yang menarik dan mampu menumbuhkan semangat siswa untuk mulai belajar menjadi Mobile Developer.

Materi : "penggunaan internet dan media sosial sehat""

darsurplsmknesaba7/15/2026 08:16:00 AM Tidak ada komentar

MATERI PEMBELAJARAN

PENGGUNAAN INTERNET DAN MEDIA SOSIAL SEHAT

"Smart Digital Citizen: Bijak Bermedia, Siap Berkarya"

Untuk Siswa Kelas X SMK Negeri 1 Banjar

Durasi: ± 90–120 Menit

"Kalian Tidak Sedang Bermain Internet. Kalian Sedang Membangun Masa Depan."

Pengantar

Bayangkan ada dua siswa SMK.

Siswa pertama menghabiskan 6 jam sehari scrolling TikTok, Instagram, dan bermain game. Ia mengetahui semua tren terbaru, tetapi tidak memiliki satu pun karya yang bisa dibanggakan.

Siswa kedua juga menggunakan internet setiap hari. Bedanya, ia belajar desain di Canva, membuat CV di LinkedIn, mengikuti kursus gratis, belajar AI, membuat portofolio di GitHub atau Behance, dan membangun jaringan profesional.

Lima tahun kemudian, siapa yang lebih siap memasuki dunia kerja?

Internet tidak pernah membedakan siapa penggunanya. Internet hanya memperbesar kebiasaan kita. Jika digunakan untuk belajar, ia menjadi tangga menuju kesuksesan. Jika hanya digunakan untuk hiburan tanpa batas, ia perlahan menjadi perangkap yang menghabiskan waktu, fokus, dan masa depan.

Hari ini kita akan belajar bukan sekadar cara menggunakan media sosial, tetapi bagaimana menjadi Generasi Digital yang Cerdas, Beretika, dan Siap Kerja.

BAB I

Hidup Gen Z Tidak Bisa Dipisahkan dari Internet

Kalian adalah generasi pertama yang sejak kecil sudah mengenal internet.

Saat SD sudah mengenal YouTube.

Saat SMP sudah mengenal TikTok.

Sekarang di SMK, hampir semua aktivitas dilakukan secara digital.

Belajar menggunakan Google Classroom.
Mengumpulkan tugas melalui internet.
Berkomunikasi menggunakan WhatsApp.
Mencari referensi melalui AI.
Membuat desain menggunakan Canva.
Melamar pekerjaan melalui Jobstreet atau LinkedIn.

Internet bukan lagi pilihan.

Internet sudah menjadi kebutuhan.

Tetapi...

Tidak semua pengguna internet adalah pengguna yang cerdas.

Diskusi

Coba jawab dengan jujur.

Berapa lama Screen Time HP kalian setiap hari?

2 jam?
4 jam?
6 jam?
bahkan lebih dari 8 jam?

Sekarang pikirkan lagi...

Dari waktu tersebut:

Berapa jam untuk belajar?

Berapa jam hanya untuk scrolling?

BAB II

Internet Itu Pisau Bermata Dua

Internet dapat menjadi:

Jalan Menuju Kesuksesan

Internet bisa membuat kalian:

belajar coding
belajar editing
belajar bahasa asing
membuka toko online
menghasilkan uang
menemukan beasiswa
menemukan pekerjaan

Namun...

Internet juga bisa menjadi jalan menuju kegagalan.

Karena internet juga berisi:

hoaks
judi online
pornografi
cyberbullying
penipuan
pinjaman online ilegal
kecanduan media sosial

Teknologi tidak pernah salah.

Yang menentukan hasilnya adalah penggunanya.

BAB III

Dunia Digital Adalah Dunia Nyata

Banyak orang berpikir:

"Ah... cuma bercanda di internet."

Padahal...

Dunia digital memiliki dampak nyata.

Satu komentar kasar bisa membuat seseorang depresi.

Satu foto yang tersebar tanpa izin bisa menghancurkan masa depan seseorang.

Satu postingan yang tidak pantas bisa membuat lamaran kerja ditolak.

Internet bukan dunia kedua.

Internet adalah bagian dari dunia nyata.

BAB IV

Fenomena Gen Z

1. Doom Scrolling

Scrolling tanpa tujuan.

Niat awal:

"Cuma lima menit."

Ternyata...

Sudah pukul 11 malam.

Tugas belum dikerjakan.

Otak lelah.

Mengapa ini terjadi?

Media sosial dirancang agar kita terus melihat konten berikutnya.

Algoritma memahami apa yang kita sukai.

Semakin lama kita menonton, semakin banyak iklan yang muncul.

Artinya...

Produk sebenarnya bukan videonya.

Produk sebenarnya adalah perhatian kita.

2. FOMO

Fear Of Missing Out

Takut tertinggal tren.

Takut tidak ikut challenge.

Takut tidak dianggap gaul.

Padahal...

Tidak semua yang viral penting.

3. FOPO

Fear Of People's Opinion

Takut tidak mendapat like.

Takut dikomentari.

Takut tidak viral.

Akhirnya...

Hidup dijalankan berdasarkan pendapat orang lain.

4. Comparison Trap

"Teman sudah punya motor."

"Teman sudah punya iPhone."

"Teman sudah liburan."

Padahal...

Media sosial hanya menunjukkan bagian terbaik kehidupan seseorang.

Tidak ada yang mengunggah kegagalannya setiap hari.

BAB V

Jejak Digital

"Internet Tidak Pernah Lupa."

Bayangkan setiap postingan kalian seperti tinta permanen.

Meskipun dihapus...

Sudah ada yang:

screenshot
download
simpan
bagikan

Jejak digital akan terus hidup.

Dunia Kerja Sudah Berubah

Sekarang HRD perusahaan tidak hanya melihat nilai rapor.

Mereka juga melihat:

Instagram.

TikTok.

Facebook.

LinkedIn.

Twitter/X.

Mereka ingin mengetahui:

Apakah calon pegawai memiliki karakter baik?

Apakah sopan?

Apakah pernah menyebarkan kebencian?

Apakah sering membuat konten negatif?

BAB VI

Etika Bermedia Sosial

Sebelum mengunggah sesuatu...

Gunakan rumus:

THINK

T = True

Apakah benar?

H = Helpful

Apakah bermanfaat?

I = Inspiring

Apakah menginspirasi?

N = Necessary

Apakah perlu?

K = Kind

Apakah disampaikan dengan baik?

Kalau tidak lolos lima pertanyaan ini...

Lebih baik jangan diposting.

BAB VII

Hoaks

Mengapa hoaks mudah dipercaya?

Karena manusia lebih suka berita yang mengejutkan.

Sebelum membagikan informasi lakukan:

STOP

↓

BACA

↓

CEK SUMBER

↓

VERIFIKASI

↓

BARU BAGIKAN

BAB VIII

Cyberbullying

Cyberbullying bukan hanya menghina.

Tetapi juga:

body shaming
menyindir
menyebarkan foto
membuat meme menghina
komentar kasar
mengucilkan di grup

Ingat.

Jempolmu bisa menjadi alat untuk menyembuhkan.

Atau melukai.

BAB IX

Privasi Digital

Jangan pernah mengunggah:

KTP
KK
SIM
OTP
Password
Nomor rekening
Lokasi rumah secara real time

Karena internet dipenuhi pelaku kejahatan.

BAB X

Penipuan Digital

Modus terbaru:

investasi bodong
hadiah palsu
APK palsu
QR Code palsu
phishing
AI Voice Scam

Kalimat favorit penipu:

"Buruan."

"Terbatas."

"Hanya hari ini."

Kalau terburu-buru...

Biasanya kita berhenti berpikir.

BAB XI

AI dan Deepfake

Sekarang AI mampu membuat:

foto palsu

video palsu

suara palsu

bahkan wajah palsu.

Maka...

Jangan langsung percaya.

Biasakan memverifikasi informasi.

BAB XII

Internet untuk Masa Depan

Sebagai siswa SMK kalian memiliki peluang luar biasa.

Gunakan internet untuk:

✔ belajar AI

✔ belajar Canva

✔ belajar Excel

✔ belajar Bahasa Inggris

✔ membuat CV

✔ membuat portofolio

✔ mengikuti lomba

✔ mengikuti webinar

✔ membangun personal branding

BAB XIII

Personal Branding

Apa yang ingin orang lihat ketika membuka akun media sosialmu?

Apakah:

Game?

Drama?

Konten negatif?

Atau...

Prestasi.

Sertifikat.

Kegiatan sekolah.

PKL.

Lomba.

Karya.

Portofolio.

Media sosial bisa menjadi CV digital.

BAB XIV

Digital Wellbeing

Internet sehat juga berarti menjaga kesehatan diri.

Tips sederhana:

Batasi screen time.
Jangan membuka HP saat belajar.
Tidur cukup tanpa scrolling.
Berolahraga.
Berkumpul dengan keluarga.
Membaca buku.
Beribadah.
Luangkan waktu tanpa gawai (digital detox).

BAB XV

Relevansi untuk Semua Jurusan di SMKN 1 Banjar

Apa pun jurusan kalian—MPLB/Perkantoran, AKL, BDP, DKV, PPLG, TJKT, TBSM, Tata Busana, Kuliner, atau jurusan lainnya—kemampuan menggunakan internet secara sehat adalah kompetensi dasar abad ke-21.

MPLB (Manajemen Perkantoran dan Layanan Bisnis) harus menjaga etika komunikasi digital, kerahasiaan data, dan profesionalisme email.
AKL (Akuntansi dan Keuangan Lembaga) harus mampu menjaga keamanan data keuangan dan waspada terhadap penipuan digital.
BDP (Bisnis Digital) perlu membangun citra merek dan memanfaatkan media sosial secara bertanggung jawab.
DKV (Desain Komunikasi Visual) dituntut menghasilkan karya orisinal serta menghargai hak cipta.
PPLG/TJKT harus memahami keamanan siber, privasi, dan etika sebagai pengembang teknologi.
Jurusan lainnya pun memerlukan kemampuan mencari informasi yang valid, berkomunikasi profesional, dan membangun reputasi digital yang baik.

Di dunia kerja, perusahaan tidak hanya menilai apa yang kalian kuasai, tetapi juga bagaimana kalian berperilaku di ruang digital.

Studi Kasus

Kasus 1

Seorang siswa mengunggah foto temannya yang sedang tidur di kelas disertai tulisan:

"Calon pengangguran."

Foto tersebut viral.

Temannya merasa dipermalukan.

Diskusi

Apa yang salah?
Bagaimana jika kalian menjadi korban?
Apa solusi terbaik?

Kasus 2

Seorang siswa menerima pesan WhatsApp:

"Selamat! Anda memenangkan Rp100 juta. Klik link berikut."

Apa yang harus dilakukan?

Kasus 3

HRD membuka Instagram calon pegawai.

Yang ditemukan:

umpatan
konten kebencian
candaan menghina guru
video balap liar

Apakah kemungkinan diterima bekerja menjadi lebih besar atau lebih kecil?

Refleksi

Tuliskan secara jujur:

Kebiasaan digital apa yang paling perlu saya ubah?
Konten seperti apa yang ingin saya tinggalkan sebagai jejak digital?
Jika lima tahun lagi HRD membuka akun media sosial saya, apakah saya akan bangga dengan isinya?
Bagaimana internet dapat membantu saya mencapai cita-cita?

Tantangan "Digital Upgrade 30 Hari"

Selama 30 hari, lakukan komitmen berikut:

Maksimal 2 jam scrolling hiburan per hari.
Pelajari satu keterampilan baru melalui internet.
Unggah minimal satu karya atau pencapaian setiap minggu.
Jangan menyebarkan informasi sebelum memverifikasi sumbernya.
Berkomentar dengan bahasa yang santun.
Aktifkan autentikasi dua faktor pada akun penting.
Sisihkan satu jam setiap hari tanpa gawai untuk membaca, berolahraga, atau berbincang dengan keluarga.

Penutup

Kalian adalah generasi yang akan bekerja di era Artificial Intelligence, Big Data, Cloud Computing, dan Internet of Things. Di masa depan, kemampuan menggunakan teknologi dengan bijak akan menjadi pembeda antara mereka yang hanya menjadi pengguna dan mereka yang menjadi pencipta.

Jadikan internet sebagai alat belajar, media sosial sebagai ruang berkarya, dan jejak digital sebagai warisan karakter. Ingatlah, dunia mungkin pertama kali mengenal kalian bukan dari wajah atau nilai rapor, tetapi dari apa yang kalian tinggalkan di internet.

"Media sosial bisa membuatmu terkenal dalam semalam, tetapi karakter digitalmu akan menentukan masa depanmu selama bertahun-tahun."

"Jangan hanya menjadi generasi yang pandai scrolling. Jadilah generasi yang pandai menciptakan solusi."

"Gunakan internet bukan untuk melarikan diri dari masa depan, tetapi untuk mempersiapkan diri menghadapinya."

Rencana Pengajaran dengan pembagian KELAS 11 FLUTTER, KELAS 12 REACT

darsurplsmknesaba7/14/2026 07:27:00 AM Tidak ada komentar

Rencana Pengajaran dengan pembagian KELAS 11 FLUTTER, KELAS 12 REACT, pembagian seperti ini justru lebih ideal daripada mengajarkan Flutter di kelas XI dan XII secara berkelanjutan.

Alasannya karena siswa akan mengenal dua ekosistem mobile terbesar di industri.

Kelas XI → Flutter (Dart) = belajar konsep dasar mobile development dengan sintaks yang relatif mudah dan dokumentasi yang baik.
Kelas XII → React Native (JavaScript/TypeScript) = belajar framework yang banyak digunakan perusahaan startup dan software house sehingga lebih dekat dengan kebutuhan industri.

Model seperti ini juga membuat siswa memiliki transfer of learning. Mereka tidak hanya hafal satu framework, tetapi memahami bahwa framework hanyalah alat, sedangkan konsep pemrograman tetap sama.

ROADMAP PEMBELAJARAN 2 TAHUN

Mata Pelajaran Pemrograman Perangkat Bergerak

Konsentrasi Keahlian Rekayasa Perangkat Lunak (RPL/PPLG)

FILOSOFI PEMBELAJARAN

Pembelajaran tidak bertujuan menghasilkan siswa yang hanya bisa membuat aplikasi.

Tetapi menghasilkan lulusan yang mampu berpikir layaknya software engineer.

Karena di dunia industri teknologi selalu berubah.

Hari ini Flutter.
Besok React.
Lima tahun lagi mungkin framework lain.

Yang harus dipahami siswa adalah

Konsep lebih penting daripada framework.

Framework hanyalah alat.

Konsep akan selalu digunakan.

Oleh karena itu urutan pembelajaran disusun berdasarkan perkembangan seorang Mobile Developer.

Programming
      ↓
Object Oriented Programming
      ↓
UI Development
      ↓
State Management
      ↓
Database
      ↓
API
      ↓
Authentication
      ↓
Deployment
      ↓
Team Collaboration
      ↓
Project

KELAS XI

FASE 1

MOBILE DEVELOPMENT FUNDAMENTAL

(Menggunakan Flutter)

Target akhir kelas XI

Siswa mampu membuat aplikasi Android offline secara mandiri menggunakan Flutter.

BAB 1

Dunia Mobile Development

Kompetensi

mengenal Android
iOS
Native
Hybrid
Cross Platform

Materi

Sejarah Android
Evolusi Mobile Apps
Flutter vs React Native vs Kotlin
Profesi Mobile Developer
Peluang kerja
Software House
Startup

Project

Membuat roadmap karir menjadi Mobile Developer.

BAB 2

Dasar Pemrograman Dart

Kompetensi

syntax
variable
tipe data
operator
input output

Project

Program Kasir

Program Nilai

Program Konversi

BAB 3

Struktur Kontrol

Materi

switch

loop

break

continue

nested loop

Project

Aplikasi Penilaian

BAB 4

Function

Materi

parameter

return

scope

anonymous function

arrow function

Project

Kalkulator Modular

BAB 5

Object Oriented Programming

Materi

Class

Object

Method

Constructor

Encapsulation

Inheritance

Polymorphism

Abstraction

Project

Sistem Perpustakaan

BAB 6

Flutter Widget

Konsep

Everything is Widget

Materi

Text

Image

Container

Icon

Button

Card

Scaffold

SafeArea

Project

UI Profil Sekolah

BAB 7

Layout

Materi

Row

Column

Expanded

Stack

Flex

GridView

ListView

Responsive Layout

Project

Landing Page Sekolah

BAB 8

Navigation

Materi

Navigator

Route

Named Route

Passing Data

Project

Aplikasi Menu Restoran

BAB 9

Form

Materi

TextFormField

Dropdown

Validation

SnackBar

Dialog

Project

Formulir Pendaftaran

BAB 10

State Management Dasar

Materi

State

setState

Lifecycle

Project

Counter

Shopping Cart

BAB 11

Database Lokal

Materi

SQLite

Hive

CRUD

Filter

Project

To Do List

BAB 12

Mini Project

Pilihan

Kas Kelas

Catatan

Inventaris

Perpustakaan

Jadwal Pelajaran

Target

500+ baris kode

HASIL AKHIR KELAS XI

Siswa sudah menguasai

✅ OOP

✅ Flutter

✅ UI

✅ Database Lokal

✅ CRUD

✅ Responsive

KELAS XII

FASE 2

INDUSTRIAL MOBILE DEVELOPMENT

Framework

React Native

Expo

TypeScript

Node.js

Target

Siswa mampu membuat aplikasi online seperti yang digunakan industri.

BAB 1

JavaScript Modern

Materi

ES6

Arrow Function

Module

Promise

Async Await

Destructuring

Spread

Map

Filter

Reduce

Project

Latihan Logic

BAB 2

TypeScript

Materi

Type

Interface

Generic

Enum

Project

Mini CRUD

BAB 3

React Fundamental

Materi

Component

Props

State

Hook

Project

Dashboard

BAB 4

React Native

Materi

View

Text

Image

StyleSheet

Touchable

FlatList

ScrollView

Project

Catalog App

BAB 5

Navigation

React Navigation

Stack

Drawer

Bottom Tab

Project

Marketplace

BAB 6

State Management

Context API

Redux Toolkit

Zustand (pengenalan)

Project

Shopping Cart

BAB 7

REST API

Materi

HTTP

JSON

Axios

Fetch

API Documentation

Postman

Project

News App

BAB 8

Authentication

Firebase

JWT

Forgot Password

Project

E-Learning

BAB 9

Cloud Database

Firebase

Supabase

Project

Chat App

BAB 10

Device Feature

Camera

Gallery

Location

QR Code

Notification

Project

Absensi QR

BAB 11

Deployment

Build APK

AAB

Versioning

Release

Signing

Play Store

BAB 12

Git

GitHub

Branch

Merge

Pull Request

Issue

Project Board

BAB 13

Clean Architecture

Folder Structure

Repository Pattern

Service

Model

Reusable Component

BAB 14

Capstone Project

Siswa bekerja dalam tim (3–5 orang) menggunakan Scrum sederhana.

Tahapan:

Analisis kebutuhan pengguna.
Penyusunan backlog dan pembagian peran.
Desain UI/UX di Figma.
Pengembangan aplikasi React Native.
Integrasi REST API dan autentikasi.
Pengujian, debugging, dan dokumentasi.
Deployment APK.
Presentasi (pitching) kepada guru, teman, dan mitra industri.

Contoh tema proyek:

Sistem Absensi Sekolah
E-Kantin
Monitoring PKL
Perpustakaan Digital
Bank Sampah Digital
Pelaporan Sarana Prasarana
Sistem Reservasi Ruang
Aplikasi UMKM Lokal

Kompetensi Lulusan

Dengan alur ini, lulusan diharapkan memiliki kompetensi sebagai berikut:

Menguasai konsep dasar pemrograman dan OOP.
Mampu membangun aplikasi Android menggunakan Flutter untuk kebutuhan offline maupun lokal.
Mampu mengembangkan aplikasi berbasis React Native yang terhubung ke layanan backend modern.
Memahami konsumsi REST API, autentikasi, manajemen state, dan integrasi fitur perangkat.
Menggunakan Git dan GitHub untuk kolaborasi tim.
Menerapkan praktik pengembangan perangkat lunak seperti dokumentasi, pengujian, dan deployment.
Memiliki portofolio minimal 3–5 aplikasi individu dan 1 proyek capstone tim yang siap dipresentasikan kepada industri.

Catatan Implementasi

Pembagian Flutter di kelas XI dan React Native di kelas XII sangat kuat secara pedagogis karena membangun kompetensi secara bertahap:

Kelas XI berfokus pada learning to build, yaitu memahami konsep dasar pemrograman perangkat bergerak, UI, database lokal, dan arsitektur aplikasi.
Kelas XII berfokus pada learning to engineer, yaitu bekerja dengan teknologi yang umum di industri, kolaborasi tim, backend, version control, deployment, dan proyek berskala nyata.

Dengan pendekatan ini, siswa tidak hanya belajar menggunakan framework tertentu, tetapi memahami prinsip rekayasa perangkat lunak yang dapat diterapkan pada teknologi apa pun di masa depan. Ini juga menjadi landasan yang baik untuk PKL, UKK, sertifikasi, maupun kebutuhan dunia kerja yang semakin banyak memanfaatkan React Native tanpa mengabaikan penguasaan konsep fundamental yang telah dibangun melalui Flutter.

Rencana Pembelajaran Mata Pelajaran Pemrograman Perangkat Bergerak pada kelas XI dan XII Program Keahlian Rekayasa Perangkat Lunak (RPL/PPLG)

darsurplsmknesaba7/14/2026 07:23:00 AM Tidak ada komentar

Rencana Pembelajaran Mata Pelajaran Pemrograman Perangkat Bergerak pada kelas XI dan XII Program Keahlian Rekayasa Perangkat Lunak (RPL/PPLG), maka materi akan mengacu pada Capaian Pembelajaran (CP) Fase F Kurikulum Merdeka yang menekankan penguasaan IDE, framework, bahasa pemrograman, basis data perangkat bergerak, API, dokumentasi, dan presentasi aplikasi. (Guru Kemendikdasmen)

Melihat perkembangan industri saat ini, saya berencana menggunakan Flutter + Dart sebagai platform utama karena dapat menghasilkan aplikasi Android, iOS, Web, dan Desktop sekaligus sehingga lebih relevan untuk kebutuhan dunia kerja.

KELAS XI

Semester Ganjil

Fokus: Fundamental Mobile Programming

Bab	Materi Pokok	Praktik
1	Pengenalan Mobile Development dan Tren Industri	Instalasi Android Studio, VS Code, Flutter SDK
2	Pengenalan Dart Programming	Variabel, Tipe Data, Operator
3	Control Flow	if, switch, loop
4	Function dan Modular Programming	Function, Parameter, Return Value
5	Object Oriented Programming	Class, Object, Constructor
6	Widget Dasar Flutter	Text, Image, Icon, Container
7	Layout Flutter	Row, Column, Stack, Expanded
8	Navigation	Multi Screen
9	Form Input	TextField, Dropdown, Checkbox
10	Mini Project	Aplikasi Profil Sekolah

Semester Genap

Fokus: CRUD Offline

Bab	Materi Pokok	Praktik
1	State Management Dasar	setState
2	ListView dan GridView	Daftar Produk
3	Shared Preferences	Login Sederhana
4	SQLite/Hive	Database Lokal
5	CRUD Lengkap	Tambah, Edit, Hapus Data
6	Pencarian dan Filter	Search Data
7	Export Data	PDF & Excel
8	Debugging	Error Handling
9	Testing Aplikasi	User Testing
10	Project Akhir	Aplikasi Catatan / ToDo List / Kas Kelas

KELAS XII

Semester Ganjil

Fokus: Mobile Apps Terhubung Server

Bab	Materi Pokok	Praktik
1	REST API	Konsep Client Server
2	HTTP Request	GET POST PUT DELETE
3	JSON Parsing	Model Data
4	Firebase Authentication	Login Register
5	Cloud Firestore	Database Online
6	Storage	Upload Foto
7	State Management Modern	Provider / Riverpod
8	Maps & Location	Google Maps
9	Push Notification	Firebase Messaging
10	Project	Aplikasi Absensi Online

Semester Genap

Fokus: Project Based Learning

Bab	Materi Pokok	Praktik
1	UI/UX Mobile	Figma ke Flutter
2	Clean Code	Struktur Project
3	Git & GitHub	Version Control
4	Testing	Unit Test
5	Build APK	Release Mode
6	Deploy	Play Store Preparation
7	Dokumentasi	User Manual
8	Presentasi Produk	Pitching
9	Simulasi UKK	Project Lengkap
10	Capstone Project	Presentasi Akhir

Urutan Project yang Disarankan

Kelas XI

Biodata Siswa
Kalkulator
Konversi Nilai
Jadwal Pelajaran
Catatan Harian
To Do List
Buku Kontak
Kas Kelas
Perpustakaan Mini
Aplikasi Inventaris

Kelas XII

Login Firebase
CRUD Online
Absensi Siswa
Penjualan Sederhana
E-Commerce Mini
Reservasi Hotel
Sistem Antrian
Kantin Digital
Monitoring PKL
Aplikasi Pelayanan Sekolah

Kompetensi Lulusan yang Diharapkan

Setelah lulus, siswa diharapkan mampu:

Mengembangkan aplikasi Android menggunakan Flutter.
Mendesain antarmuka (UI) yang responsif dan mudah digunakan.
Mengimplementasikan OOP dalam pengembangan aplikasi.
Menggunakan SQLite, Hive, atau Firebase sebagai basis data.
Mengintegrasikan aplikasi dengan REST API.
Menggunakan Git dan GitHub untuk kolaborasi.
Melakukan pengujian, debugging, dokumentasi, dan membangun APK siap distribusi.
Menyusun portofolio aplikasi sebagai bekal PKL, UKK, dan dunia kerja. Seluruh kompetensi tersebut sejalan dengan CP Fase F yang menekankan penguasaan IDE, framework, basis data perangkat bergerak, API, serta kemampuan mendokumentasikan dan mempresentasikan hasil pengembangan aplikasi. (Guru Kemendikdasmen)

Rekomendasi agar lebih siap menghadapi kebutuhan industri 2026–2027

Selain materi inti kurikulum, saya berencana menambahkan beberapa topik yang kini banyak digunakan di industri perangkat lunak:

Flutter 3.x dan Dart terbaru.
Konsumsi REST API dan pengenalan GraphQL.
Firebase Authentication, Firestore, dan Cloud Storage.
State Management (Provider, Riverpod, atau Bloc).
Git, GitHub, dan kolaborasi tim.
Dasar CI/CD untuk build aplikasi.
Integrasi AI melalui API (misalnya chatbot atau fitur ringkasan otomatis).
UI/UX berbasis Figma.
Deployment APK/AAB dan persiapan publikasi ke Google Play.
Penyusunan portofolio profesional di GitHub dan LinkedIn.

Dengan susunan tersebut, pembelajaran diharapkan tidak hanya memenuhi CP Kurikulum Merdeka, tetapi juga menghasilkan lulusan yang lebih siap mengikuti UKK, PKL, sertifikasi, maupun kebutuhan industri perangkat lunak saat ini.

Penggunaan Internet & Media Sosial yang Sehat

darsurplsmknesaba7/13/2026 03:47:00 PM Tidak ada komentar

Materi Interaktif

Penggunaan Internet & Media Sosial yang Sehat

Untuk Siswa Kelas X SMK Jurusan Perkantoran (OTKP/MPLB)

Tema: "Jadilah Profesional Sejak Sekarang, Jejak Digital Menentukan Masa Depanmu."

Tujuan Pembelajaran

Setelah mengikuti pembelajaran ini, peserta didik mampu:

Memahami manfaat dan risiko internet serta media sosial.
Menjadi pengguna media sosial yang cerdas, kritis, dan bertanggung jawab.
Membangun citra diri (personal branding) yang positif.
Menghindari penyalahgunaan internet seperti cyberbullying, hoaks, penipuan digital, dan kecanduan media sosial.
Menggunakan internet sebagai sarana belajar dan pengembangan karier.

Pembuka (Ice Breaking)

Pertanyaan

Angkat tangan jika...

✅ Bangun tidur langsung buka HP.

✅ Pernah scrolling TikTok "cuma 5 menit" tapi ternyata sudah 2 jam.

✅ Pernah menghapus postingan karena malu.

✅ Pernah membaca komentar yang membuat overthinking.

Hampir semua Gen Z pasti pernah.

Artinya?

Internet sudah menjadi bagian dari hidup kita.
Yang menjadi masalah bukan internetnya.

Tetapi bagaimana cara kita menggunakannya.

Fakta Gen Z

Generasi Z lahir di era internet.

Kalian adalah:

Digital Native
AI Generation
Social Media Generation

Namun...

Generasi yang paling dekat dengan teknologi juga menjadi generasi yang paling rentan terhadap:

kecanduan media sosial
cyberbullying
FOMO
penipuan online
kebocoran data pribadi
gangguan kesehatan mental

Teknologi ibarat pisau.

Di tangan koki menghasilkan makanan.

Di tangan kriminal menghasilkan kejahatan.

Apa Itu Internet Sehat?

Internet sehat bukan berarti membatasi internet.

Tetapi...

Menggunakan internet dengan cerdas, aman, produktif, dan bertanggung jawab.

Bukan hanya menjadi penonton.

Tetapi menjadi pencipta karya.

Fenomena Gen Z Saat Ini

Doom Scrolling

Scrolling tanpa tujuan.

Video demi video.

Konten demi konten.

Tanpa sadar...

2 jam hilang.

Yang didapat?

Capek.

Pikiran penuh.

Tugas belum selesai.

FOMO

Fear Of Missing Out

Takut ketinggalan tren.

Teman upload nongkrong.

Langsung merasa hidup sendiri membosankan.

Padahal...

Media sosial adalah highlight kehidupan.

Bukan kehidupan sebenarnya.

FOPO

Fear Of People's Opinion

Takut komentar orang.

Takut tidak dapat like.

Takut tidak viral.

Akhirnya hidup hanya untuk validasi.

Brain Rot

Otak terbiasa menerima informasi pendek.

Akibatnya:

sulit membaca buku
sulit fokus belajar
cepat bosan
konsentrasi menurun

Jejak Digital

"Internet Tidak Pernah Lupa."

Sekali upload...

bisa di screenshot
bisa di download
bisa disimpan orang lain
bisa muncul kembali bertahun-tahun kemudian

Bahkan ketika sudah dihapus.

Kisah Nyata

Banyak perusahaan sekarang melakukan:

Social Media Checking

Sebelum menerima pegawai.

Mereka melihat:

Instagram
TikTok
Facebook
Twitter/X
LinkedIn

Yang dilihat bukan follower.

Tetapi karakter.

Hubungkan dengan Jurusan Perkantoran

Sebagai calon tenaga administrasi profesional...

Kalian akan menangani:

dokumen perusahaan
data pelanggan
surat resmi
email perusahaan
komunikasi bisnis

Perusahaan membutuhkan orang yang:

✔ sopan

✔ bertanggung jawab

✔ menjaga rahasia

✔ bijak menggunakan internet

Bukan orang yang mudah menyebarkan informasi.

Media Sosial Bisa Menjadi CV

Hari ini...

Instagram bisa menjadi portofolio.

TikTok bisa menjadi media edukasi.

LinkedIn bisa membuka pekerjaan.

YouTube bisa menghasilkan uang.

Facebook bisa membangun relasi.

Pertanyaannya...

Apakah akunmu menunjukkan bahwa kamu layak direkrut?

Sebelum Posting, Gunakan Rumus THINK

Apakah postingan ini...

T
True?

Benar?

H
Helpful?

Bermanfaat?

I
Inspiring?

Menginspirasi?

N
Necessary?

Perlu diposting?

K
Kind?

Santun?

Kalau salah satu jawabannya "tidak"...

Lebih baik jangan diposting.

Hoaks

Jangan mudah percaya.

Lakukan:

STOP

BACA

CEK SUMBER

VERIFIKASI

BARU BAGIKAN

Orang pintar bukan yang cepat menyebarkan.

Tetapi yang memastikan kebenarannya.

Cyberbullying

Bentuknya:

menghina
body shaming
menyebarkan foto
mempermalukan orang
komentar kasar

Ingat.

Komentar hanya 10 detik.

Luka seseorang bisa bertahun-tahun.

Privasi Digital

Jangan unggah:

❌ KTP

❌ KK

❌ Password

❌ OTP

❌ Lokasi rumah

❌ Jadwal rumah kosong

❌ Data pribadi keluarga

Karena internet juga dipenuhi pelaku kejahatan.

Penipuan Digital

Modus yang sering terjadi

Link palsu
Giveaway palsu
Investasi bodong
Lowongan kerja palsu
APK berbahaya
QR Code palsu

Prinsipnya:

Kalau terlalu indah untuk dipercaya...

Biasanya memang tidak benar.

AI dan Deepfake

Sekarang AI bisa membuat:

suara palsu
video palsu
foto palsu

Maka...

Jangan mudah percaya hanya karena melihat video.

Selalu cek sumber.

Digital Well-being

Gunakan HP.

Jangan digunakan HP.

Tips:

Matikan notifikasi yang tidak penting.
Tentukan jam tanpa media sosial.
Jangan membawa HP saat belajar.
Tidur tanpa scrolling.
Luangkan waktu untuk olahraga dan berinteraksi langsung.

Bangun Personal Branding

Mulailah upload:

prestasi
sertifikat
kegiatan organisasi
lomba
karya desain
karya video
proyek sekolah
kegiatan PKL
pengalaman magang

Suatu hari...

HRD bisa melihat akunmu.

Biarkan akunmu berbicara sebelum kamu berbicara.

Tantangan 30 Hari

Selama 30 hari:

✔ Tidak menyebarkan hoaks

✔ Tidak menghina orang

✔ Upload satu karya

✔ Belajar satu skill baru

✔ Batasi scrolling maksimal 2 jam

✔ Membaca minimal 10 halaman buku setiap hari

✔ Tidur tanpa HP di samping bantal

Refleksi

Renungkan tiga pertanyaan berikut:

Apakah media sosial mengendalikan saya, atau saya yang mengendalikan media sosial?
Jika HRD sebuah perusahaan membuka akun media sosial saya hari ini, apakah saya akan bangga dengan isinya?
Konten apa yang ingin saya tinggalkan sebagai jejak digital untuk lima tahun ke depan?

Pesan Penutup

"Media sosial bukan tentang siapa yang paling viral, tetapi tentang siapa yang paling memberi nilai."

Sebagai siswa SMK jurusan Perkantoran, kalian sedang dipersiapkan menjadi tenaga profesional. Profesionalisme dimulai bukan saat diterima bekerja, tetapi dari kebiasaan sehari-hari dalam menggunakan internet: berpikir sebelum membagikan informasi, menjaga etika saat berkomunikasi, melindungi data pribadi, dan membangun jejak digital yang membanggakan. Jadikan internet sebagai alat untuk belajar, berkarya, dan membuka peluang, bukan sekadar tempat menghabiskan waktu.