📱

🤖

🍎

⚡

🔧

💻

📘 SEMESTER 1 · KELAS 11

BAB 1

PENGENALAN MOBILE DEVELOPMENT

Dari Smartphone ke Code — Perjalananmu Dimulai Di Sini 🚀

🎯 TUJUAN PEMBELAJARAN

Setelah mempelajari BAB 1, kamu mampu:

✅ Menjelaskan pengertian Mobile App Development
✅ Membedakan platform Android dan iOS
✅ Memahami perbedaan Native vs Cross-Platform
✅ Mengetahui mengapa Flutter menjadi pilihan populer
✅ Melakukan instalasi Flutter SDK, Android Studio & VS Code
✅ Menggunakan perintah dasar Flutter CLI

🕒 Estimasi waktu belajar: 2 × 45 menit

SLIDE 3

Apa itu Mobile Development?

Bayangkan kamu seorang ARSITEK yang membangun rumah. Mobile Developer itu seperti arsitek yang membangun "rumah digital" di dalam smartphone-mu.

Definisi: Mobile Development adalah proses merancang, membangun, dan menguji aplikasi yang berjalan di perangkat mobile (smartphone & tablet).

0.00

Miliar+ Pengguna Smartphone di Dunia (2024)

💬 📷 🛵 🎵 🛒 🎮

App bermunculan dari dalam smartphone

🔄 Alur Pembuatan Aplikasi (SDLC)

Setiap aplikasi — dari TikTok sampai Gojek — lahir melalui 6 tahap berurutan berikut:

💡Ide

➜

🎨Desain

➜

💻Koding

➜

🧪Testing

➜

🚀Deploy

➜

📱App Store

💡 Ide → 🎨 Desain

Menentukan masalah yang ingin dipecahkan, lalu merancang tampilan (UI/UX) — misalnya di Figma.

💻 Koding → 🧪 Testing

Menulis baris kode menjadi aplikasi nyata, lalu mengujinya agar bebas bug di berbagai HP.

🚀 Deploy → 📱 Store

Aplikasi dirilis ke Play Store / App Store sehingga bisa diunduh jutaan pengguna.

SLIDE 4

Ekosistem Mobile: Android vs iOS

Seperti di dunia laptop ada Windows vs MacOS, di dunia mobile ada Android vs iOS.

■ Android 72% ■ iOS 28%

🤖

Android

Google

Digunakan 1000+ merek HP

72%

🍎

iOS

Apple

Eksklusif iPhone & iPad

28%

Merek Android di Indonesia: Samsung · Xiaomi · OPPO · Vivo · Realme

SLIDE 5

Android Platform

🤖

📌 Dibuat oleh: Google (2008)
📌 Bahasa: Java → Kotlin
📌 IDE Resmi: Android Studio
📌 Open Source: ✅ Ya
📌 Market Share Dunia: ~72%
📌 Market Share Indonesia: ~90%+

Android itu seperti resep masakan yang dibagikan gratis. Samsung, Xiaomi, OPPO semua bisa "memasak" (membuat HP) dengan resep yang sama, lalu menambahkan bumbu rahasianya sendiri.

📜 → 🤖 → 📱📱📱

Satu resep, banyak merek HP

SLIDE 6

iOS Platform

🍎

📌 Dibuat oleh: Apple Inc. (2007)
📌 Bahasa: Objective-C → Swift
📌 IDE Resmi: Xcode (hanya di MacOS!)
📌 Closed Source: ✅ Tertutup
📌 Eksklusif: iPhone, iPad, iPod
📌 Keunggulan: Keamanan & stabilitas tinggi

iOS itu seperti restoran bintang 5 yang eksklusif — kamu HARUS punya iPhone untuk masuk. Tidak bisa masuk pakai Android, seberapa canggih pun HP-nya.

🚪✨ → 🍎 only

Gerbang eksklusif hanya untuk perangkat Apple

SLIDE 7 · FLOWCHART UTAMA

Native vs Cross-Platform

NATIVE

Satu bahasa untuk satu platform. Performa terbaik.

CROSS-PLATFORM

Satu bahasa untuk semua platform. Efisiensi tinggi.

SLIDE 8

Native Development

🤖 Android Native — Kotlin/Java

Performa: ★★★★★
Hardware access: Full (kamera, GPS, sensor)
Update OS: Langsung dapat fitur baru
Tim: Khusus Android developer

🍎 iOS Native — Swift

Performa: ★★★★★
Hardware access: Full (Face ID, haptic)
Update OS: Langsung dapat fitur baru
Syarat: Harus punya Mac + Xcode

Native itu seperti memiliki 2 dapur terpisah — dapur Android dan dapur iOS. Masakannya sempurna, tapi butuh 2 koki dan 2 tempat!

SLIDE 9 · NATIVE ANDROID

Kotlin 🟣

Dibuat oleh JetBrains (2016), lalu diadopsi Google sebagai bahasa resmi Android (2017). Lebih modern & ringkas dari Java, lebih aman dari error null, dan 100% kompatibel dengan kode Java lama.

📖 Bedah Kode

fun main() titik awal program dijalankan
val nama variabel konstan (nilainya tetap)
$nama menyisipkan nilai variabel ke dalam teks
println() menampilkan teks ke layar/konsol

// Output akan muncul di sini setelah kode dijalankan...

SLIDE 10 · NATIVE iOS

Swift 🐦

Dibuat oleh Apple (2014) sebagai pengganti Objective-C. Sintaksnya elegan & mudah dibaca, sangat cepat (mendekati bahasa C), dan punya keamanan tipe data yang ketat.

📖 Bedah Kode

let nama variabel konstan (mirip val di Kotlin)
\(nama) menyisipkan variabel ke dalam teks (interpolation)
print() menampilkan teks ke layar/konsol

// Output akan muncul di sini setelah kode dijalankan...

Aspek	Kotlin	Swift
Platform	Android	iOS
Dibuat oleh	JetBrains/Google	Apple
Sintaks	Modern & ringkas	Elegan & aman

SLIDE 11

Cross-Platform Overview

📱 🍎 🌐 💻

👨‍🍳

main.dart

Satu koki memasak, 4 meja platform terlayani

✅ Keuntungan

✅ Satu codebase untuk semua platform
✅ Hemat waktu 50–70%
✅ Tim lebih kecil = biaya hemat
✅ Update fitur serentak

❌ Kekurangan

❌ Performa sedikit di bawah Native
❌ Akses hardware eksklusif kadang terbatas
❌ Bergantung pada update framework

SLIDE 12

Flutter

UI toolkit open source dari Google untuk membangun aplikasi cantik & berkinerja tinggi dari satu codebase — Mobile, Web & Desktop.

🏢 Dibuat: Google

💻 Bahasa: Dart

📅 Stable: Des 2018

⭐ Stars: 160.000+

🌍 Open Source

🆓 Gratis

Dipakai oleh: Google Pay · eBay · BMW · Alibaba · iRobot

"Flutter is Google's portable UI toolkit for crafting beautiful, natively compiled applications." — flutter.dev

SLIDE 13

React Native

Framework dari Meta (Facebook) untuk membuat aplikasi mobile menggunakan JavaScript — bahasa yang sudah dikenal banyak web developer.

Aspek	Flutter	React Native
Bahasa	Dart	JavaScript
Performa	★★★★★	★★★★
UI Kustom	★★★★★	★★★
Web Support	✅ Native	✅ Terbatas
Desktop	✅ Native	⚠️ Terbatas
Komunitas	Besar	Sangat Besar

SLIDE 14

🔥 KINERJA TINGGI

Compile ke native ARM machine code. Tanpa JavaScript bridge = tanpa bottleneck!

🎨 UI KUSTOM BEBAS

Widget lengkap, UI sesuai desain apapun, persis sama di Android & iOS.

📱💻🌐 SATU KODE SEMUA PLATFORM

Mobile + Web + Desktop dari satu file kode yang sama!

🆓 GRATIS & OPEN SOURCE

Tanpa biaya lisensi. Ribuan package gratis di pub.dev.

🏢 BACKED BY GOOGLE

Update rutin, dokumentasi lengkap, ecosystem berkembang.

SLIDE 15 · HIGHLIGHT

Satu Codebase, Banyak Platform

main.dart

🍎 iOS IPA

🤖 Android APK

💻 Desktop App

🌐 Web App

⬆ Satu file main.dart "meledak" menjadi 4 aplikasi di 4 platform berbeda

Seperti seorang penyanyi yang merekam 1 lagu, lalu dirilis serentak di Spotify, Apple Music, YouTube Music & JOOX — tanpa merekam ulang!

🤖 Android APK

File instalasi untuk semua HP Android.

🍎 iOS IPA

Aplikasi untuk iPhone & iPad.

🌐 Web App

Website yang bisa dibuka di browser.

💻 Desktop App

Program untuk Windows, Mac & Linux.

Flutter + 1 file Dart = Android APK + iOS IPA + Website + Windows App

📦 Step 1 of 3

Instalasi: Flutter SDK

33% — Instalasi Flutter SDK

1

Download SDK

Buka flutter.dev → pilih OS → download ZIP Flutter SDK.

2

Extract

Extract ke C:\flutter. JANGAN di Program Files (butuh permission khusus!)

3

Set PATH

# Windows — tambahkan ke System PATH setx PATH "%PATH%;C:\flutter\bin"

4

Verifikasi

$ flutter --version Flutter 3.x.x • channel stable

💡 Butuh ruang ~1.5GB untuk Flutter SDK!

🤖 Step 2 of 3

Instalasi: Android Studio

66% — Android Studio + SDK

1

Download

developer.android.com/studio

2

Install

Pilih "Standard" setup, tunggu SDK (~3–5GB).

3

Plugin

Settings → Plugins → cari "Flutter" → Install → Restart.

4

Set SDK Path

Settings → Flutter → SDK Path: C:\flutter

Simulasi instalasi...

Installing Flutter plugin... Installing Dart plugin... Restarting IDE... [✓] Flutter plugin installed! [✓] Dart plugin installed!

💡 Android Studio = IDE + Android Emulator GRATIS sepaket!

💻 Step 3 of 3

Instalasi: VS Code

100% — Setup Selesai! 🎉

1

Download

code.visualstudio.com → versi Stable.

2

Install Extensions

Tekan Ctrl+Shift+X lalu install:

⚡ Flutter (WAJIB)

Core Flutter support

🎯 Dart (WAJIB)

Dart language support

🔍 Error Lens

Error inline (rekomendasi)

🌈 Bracket Colorizer

Bracket warna (rekomendasi)

⚡ + 🤖 + 💻 = SETUP SELESAI! 🎉

SLIDE 19

Emulator vs Device Fisik

🖥️ Emulator (Virtual)

Kapan dipakai:

✅ Tidak punya HP spare
✅ Tes berbagai ukuran layar
✅ Tes berbagai versi Android

Setup: Android Studio → AVD Manager → Create Virtual Device → download image (API 30+) → Launch.

📱 Device Fisik

Kapan dipakai:

✅ Tes performa realistis
✅ Tes hardware (kamera, sensor)
✅ Demo ke klien/guru

Setup: Ketuk "Nomor Build" 7x → USB Debugging ON → sambungkan USB → flutter devices

Emulator = driving simulator untuk belajar. Device fisik = nyetir mobil beneran di jalan!

SLIDE 20

⌨️ Flutter CLI

CLI itu seperti remote control TV super canggih. Tidak perlu menekan tombol satu per satu — cukup ketik perintah, Flutter langsung eksekusi!

SLIDE 21

🩺 flutter doctor

Fungsi: Memeriksa apakah semua komponen Flutter sudah terinstall & dikonfigurasi dengan benar di komputermu.

[✓] Hijau

OK, siap dipakai

[!] Kuning

Peringatan, perlu dicek

[✗] Merah

Error, belum terinstall

SLIDE 22

flutter run & build apk

▶️ flutter run

Menjalankan app di emulator/device terhubung.

$ flutter run # target device spesifik $ flutter run -d emulator-5554

r Hot Reload R Hot Restart q Quit

📦 flutter build apk

Membuat file APK yang bisa diinstall di HP Android manapun.

# untuk testing $ flutter build apk --debug # untuk distribusi $ flutter build apk --release

📍 Hasil: build/app/outputs/flutter-apk/app-release.apk 🎁

🏋️ LATIHAN 1 · Individual · ⏱ 15 Menit

Detektif Aplikasi

Buka HP Android-mu! Pilih 5 aplikasi favoritmu, lalu tentukan teknologinya: Native atau Cross-Platform?

No	Aplikasi	Native / Cross	Alasan
1	TikTok	???	???
2	Shopee	???	???
3	WhatsApp	???	???
4	Gojek	???	???
5	(pilihanmu)	???	???

TikTok → Native + Flutter (sebagian)
Shopee → React Native
WhatsApp → Native + React Native (beberapa bagian)
Gojek → Flutter (sejak 2021)

🌟 BONUS: Cari tahu teknologi Tokopedia & BCA Mobile!

🧩 LATIHAN 2 · Kelompok · ⏱ 20 Menit

Konsultan Teknologi

Kamu seorang Konsultan IT. 3 klien minta saranmu — Native atau Cross-Platform? Berikan alasanmu!

Kasus 1 — Startup

App kuliner, budget Rp 50jt, Android+iOS, 2 dev junior.

Kasus 2 — Bank Besar

10 juta nasabah, Face ID, keamanan tinggi, budget besar.

Kasus 3 — Game Studio

Game 2D indie, grafis menarik, Android dulu lalu iOS.

Kasus 1 → CROSS-PLATFORM (Flutter) — hemat biaya, satu tim.
Kasus 2 → NATIVE — keamanan & performa maksimal.
Kasus 3 → CROSS-PLATFORM (Flutter) — cocok game 2D, mudah expand ke iOS.

🏆

📝 TUGAS BAB 1

Buatlah INFOGRAFIS (A4, berwarna) menggunakan Canva, PowerPoint, atau kertas.

✅ Perbedaan Android vs iOS (min 3)
✅ Kapan Native vs Cross-Platform (min 2 kondisi tiap jenis)
✅ Langkah instalasi Flutter (min 5 langkah berurutan)
✅ Min 3 perintah Flutter CLI + fungsi + contoh output
✅ Bonus: Mengapa kamu memilih Flutter untuk belajar?

📄 Format: PDF/JPG
📧 Kirim ke: [email guru]
📅 Deadline: [minggu depan]
⭐ Nilai Maks: 100

Konten 40%

Visualisasi 30%

Kreativitas 20%

Ketepatan 10%

Selamat! Kamu menyelesaikan BAB 1. Perjalananmu baru dimulai! 🚀
Di BAB 2 kita mulai coding Dart pertamamu!