📱FLUTTER

🎯DART

🌿GIT

📦APK

🐙GITHUB

🤖ANDROID

BAB 12

Final Project & Deployment APK

🎓 Kelas 11

📚 Semester 1

🚀 Deploy to Production

🗺️ Peta Materi BAB 12

Perjalananmu dari kode mentah menjadi aplikasi nyata yang bisa di-install & dibanggakan!

📦 Build APK

Mengubah kode Flutter jadi file .apk siap install

🔏 Signing

Tanda tangan digital agar aplikasi resmi & aman

🎨 Icon & Splash

Wajah aplikasi: ikon launcher & layar pembuka

🔢 Versioning

Penomoran versi seperti generasi produk

🌿 Git & GitHub

Menyimpan & membagikan kode ke seluruh dunia

📝 Dokumentasi

README & portfolio yang profesional

🎯 Tujuan Pembelajaran

Setelah bab ini kamu mampu mem-build, menandatangani, dan men-deploy aplikasi Flutter, serta mengelola kode dengan Git/GitHub.

🏁 Hasil Akhir

Satu APK release yang ter-install, ter-publish di GitHub, dan satu Final Project sebagai isi portfolio-mu.

📦 Build APK

POINANALOGIPENJELASANKODEDEMO

APK (Android Package) adalah file hasil "memasak" proyek Flutter menjadi satu paket yang bisa di-install di HP Android.

🖨️ ANALOGI: MENCETAK BUKU DARI NASKAH

Kode Flutter-mu ibarat naskah tulisan tangan. Perintah build seperti mesin cetak yang mengubah naskah menjadi buku jadi (file .apk) yang siap dibagikan ke pembaca (pengguna).

Penjelasan: Naskah = source code, mesin cetak = compiler Flutter, buku = APK. Sekali "dicetak", siapa pun bisa memasangnya tanpa butuh kode aslimu.

Terminal · Build APK

# Build APK untuk rilis (siap dibagikan)
flutter build apk --release

# Hasil ada di:
# build/app/outputs/flutter-apk/app-release.apk

# Build per-arsitektur agar ukuran lebih kecil:
flutter build apk --split-per-abi

🎬 DEMO: Lihat animasi mesin cetak di atas — naskah masuk, APK keluar!

⚖️ Release Mode vs Debug Mode

Dua "mode masak" yang berbeda tujuan: satu untuk uji coba, satu untuk dirilis.

🍳 ANALOGI: MASAK COBA-COBA vs HIDANGAN RESTORAN

Debug = memasak sambil mencicipi (cepat diubah, banyak catatan). Release = hidangan final yang disajikan ke tamu (rapi, cepat, tanpa coretan dapur).

📝 Source Code

→

🐞 DEBUG
cepat compile
ada hot reload
lambat jalan

→

🚀 RELEASE
dioptimasi
ukuran kecil
cepat & siap rilis

🐞 Debug Mode

Untuk pengembangan. Ada hot reload, pesan error lengkap, performa belum optimal, ukuran besar.

🚀 Release Mode

Untuk pengguna akhir. Kode dioptimasi (tree-shaking), tanpa debug info, cepat, ukuran ringkas.

Terminal

flutter run                 # jalan dalam DEBUG mode (default)
flutter run --release       # uji performa nyata di device
flutter build apk --release # buat APK final untuk dibagikan

🔏 Signing APK

POINANALOGIPENJELASANKODEDEMO

Signing = menandatangani aplikasi secara digital dengan keystore agar Android percaya bahwa aplikasi benar buatanmu.

✍️ ANALOGI: TANDA TANGAN DI DOKUMEN RESMI

Keystore ibarat tanda tangan + materai pribadimu. Tanpa tanda tangan, dokumen (APK) dianggap tidak resmi. Play Store hanya menerima aplikasi yang sudah "ditandatangani".

Penjelasan: File keystore berisi kunci rahasia. Simpan baik-baik — jika hilang, kamu tidak bisa meng-update aplikasimu di Play Store!

Terminal · Buat Keystore

keytool -genkey -v -keystore my-key.jks \
  -keyalg RSA -keysize 2048 -validity 10000 \
  -alias upload

android/app/build.gradle · Signing Config

android {
  signingConfigs {
    release {
      storeFile file("my-key.jks")
      storePassword "PASSWORD_KAMU"
      keyAlias "upload"
      keyPassword "PASSWORD_KAMU"
    }
  }
  buildTypes {
    release { signingConfig signingConfigs.release }
  }
}

🎬 DEMO: Animasi tanda tangan menggores layar di atas ✍️

🎨 App Icon

Ikon launcher adalah hal pertama yang dilihat pengguna di layar HP mereka.

🏬 ANALOGI: WAJAH TOKO DI MALL

Ratusan toko berjajar di mall. Papan nama & etalase yang menarik membuat orang ingin masuk. Icon aplikasi = etalase aplikasimu di antara puluhan app lain.

🖼️ icon.png
1024×1024

→

⚙️ flutter_launcher_icons

→

📱 Icon di semua ukuran HP

pubspec.yaml

dev_dependencies:
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"

Terminal · Generate Icon

flutter pub get
flutter pub run flutter_launcher_icons

🌅 Splash Screen

Layar pembuka singkat saat aplikasi pertama dibuka — kesan pertama yang berkelas.

🏨 ANALOGI: PINTU MASUK HOTEL MEWAH

Sebelum masuk kamar, kamu disambut lobby megah selama beberapa detik. Splash screen = lobby aplikasimu: menyambut sambil menyiapkan isi di belakang layar.

pubspec.yaml · flutter_native_splash

dev_dependencies:
  flutter_native_splash: ^2.4.0

flutter_native_splash:
  color: "#0A0A0F"
  image: assets/splash/logo.png
  android_12:
    color: "#0A0A0F"
    image: assets/splash/logo.png

Terminal

flutter pub get
flutter pub run flutter_native_splash:create

💡 Durasi ideal: 2–3 detik. Cukup untuk berkesan, tidak membuat bosan.

🔢 Versioning (SemVer)

Versi memberi tahu pengguna & sistem seberapa baru aplikasimu.

📱 ANALOGI: GENERASI PRODUK iPHONE

iPhone 1 → 2 → 3 → ... Tiap angka naik = ada perubahan. Sama seperti versi aplikasi: makin besar angkanya, makin baru fiturnya.

v1.0.0

→

v1.0.1

→

v1.1.0

→

v2.0.0

MAJOR (2.x.x)

Perubahan besar yang bisa tidak kompatibel dengan versi lama

MINOR (x.1.x)

Fitur baru, tetap kompatibel dengan versi sebelumnya

PATCH (x.x.1)

Perbaikan bug kecil tanpa fitur baru

pubspec.yaml

# format:  versionName+versionCode
version: 1.2.0+5
#         ^^^^^  ^
#         tampil  nomor build (naik tiap upload ke Play Store)

🌿 Git Fundamentals

Git = mesin waktu untuk kodemu. Menyimpan setiap perubahan agar bisa kembali kapan saja.

🌳 ANALOGI: POHON YANG TUMBUH BERCABANG

Tiap commit = ruas batang baru. Tiap branch = cabang yang tumbuh ke arah eksperimen tanpa merusak batang utama. Merge = menyatukan cabang kembali.

Terminal · Alur Git Dasar

git init                       # mulai repository
git add .                      # siapkan semua perubahan
git commit -m "fitur awal"     # simpan snapshot
git branch fitur-baru          # buat cabang
git checkout fitur-baru        # pindah ke cabang
git merge fitur-baru           # gabungkan kembali

🐙 GitHub

GitHub = tempat menyimpan repository Git secara online agar aman & bisa dibagikan.

☁️ ANALOGI: GOOGLE DRIVE VERSI DEVELOPER

Seperti Drive menyimpan dokumen di cloud, GitHub menyimpan kodemu di cloud — lengkap dengan riwayat perubahan, dan bisa diakses dari mana pun.

Terminal · Push ke GitHub

# Hubungkan repo lokal ke GitHub
git remote add origin https://github.com/USERNAME/nama-repo.git

git branch -M main
git push -u origin main        # kirim kode ke cloud ☁️

# Update berikutnya cukup:
git add .
git commit -m "update fitur"
git push

🎬 DEMO: File terbang dari laptop 💻 menuju cloud ☁️ di atas!

📝 Dokumentasi Project

File README.md adalah halaman depan proyekmu — penjelasan agar orang lain paham aplikasimu.

📖 ANALOGI: BUKU MANUAL KENDARAAN

Setiap mobil punya buku manual: cara pakai, fitur, peringatan. README = manual aplikasimu agar pengguna & developer lain langsung paham.

💻 Code

→

📝 README.md

→

🌐 GitHub Pages

README.md · Template

# 📱 Nama Aplikasi

Deskripsi singkat aplikasi dalam 1-2 kalimat.

## ✨ Fitur
- Fitur 1
- Fitur 2

## 🚀 Cara Menjalankan
    flutter pub get
    flutter run

## 🛠️ Teknologi
- Flutter & Dart
- Provider (state management)

## 👤 Pembuat
Nama — Kelas 11

💼 Portfolio Mobile

Kumpulan karya terbaikmu yang menunjukkan kemampuan kepada guru, sekolah, bahkan calon kampus/perusahaan.

🖼️ ANALOGI: PORTOFOLIO SENIMAN DI GALERI

Seniman memajang lukisan terbaik di galeri agar pengunjung terkesan. Portfolio = galeri digitalmu — pajang proyek & APK terbaik.

✅ Yang Harus Ada

Screenshot aplikasi, deskripsi singkat, link GitHub, link download APK, daftar fitur & teknologi.

🌟 Nilai Tambah

Demo video pendek, penjelasan tantangan yang diselesaikan, rapi & konsisten.

✓Judul & deskripsi proyek

✓Screenshot UI yang menarik

✓Link repository GitHub

✓Link / file APK release

🛒 Final Project 1: Kasir Mobile

Aplikasi kasir sederhana untuk mencatat transaksi penjualan.

🎯 Fitur Utama

➕ Tambah produk & harga
🧮 Hitung total belanja
🧾 Cetak/lihat struk
📊 Riwayat transaksi

🧱 Tech Stack

FlutterProviderSharedPreferencesListView

┌───────────────────────────┐ │ KASIR MOBILE 🛒 │ ├───────────────────────────┤ │ Nasi Goreng Rp 15.000 │ │ Es Teh Rp 5.000 │ │ ─────────────────────── │ │ TOTAL Rp 20.000 │ │ [ BAYAR ] [ RESET ] │ └───────────────────────────┘

💡 Cocok untuk yang suka logika hitung & manajemen data.

📒 Final Project 2: Catatan CRUD

Aplikasi catatan dengan Create, Read, Update, Delete + Local Storage + Dark Mode.

🎯 Fitur Utama

📝 Tambah catatan (Create)
📖 Lihat daftar (Read)
✏️ Edit catatan (Update)
🗑️ Hapus catatan (Delete)
🌙 Toggle Dark Mode

🧱 Tech Stack

FluttersqfliteProviderThemeMode

┌───────────────────────────┐ │ 📒 CATATANKU 🌙 │ ├───────────────────────────┤ │ • Belajar Flutter ✏️🗑️ │ │ • Tugas Matematika ✏️🗑️ │ │ • Ide Project ✏️🗑️ │ │ [ + ]│ └───────────────────────────┘

💡 Menguasai CRUD = fondasi hampir semua aplikasi nyata.

✅ Final Project 3: Manajemen Tugas

To-Do App untuk mengatur tugas: Tambah, Edit, Hapus, dan ubah Status selesai/belum.

🎯 Fitur Utama

➕ Tambah tugas + deadline
✏️ Edit detail tugas
🗑️ Hapus tugas
☑️ Tandai selesai / belum
🔍 Filter berdasarkan status

🧱 Tech Stack

FlutterHiveCheckboxListView.builder

┌───────────────────────────┐ │ ✅ TUGASKU │ ├───────────────────────────┤ │ ☑ Kerjakan PR Fisika │ │ ☐ Baca Bab 12 Flutter │ │ ☐ Push project ke GitHub │ │ [ + ]│ └───────────────────────────┘

💡 Latihan state management & data lokal yang sangat praktis.

🛍️ Final Project 4: E-Commerce UI Clone

Tiruan UI toko online: Home, Detail Produk, Keranjang, dan Profil.

🎯 Halaman

🏠 Home — daftar produk & banner
🔍 Detail — foto, harga, deskripsi
🛒 Cart — item & total belanja
👤 Profile — info & pengaturan

🧱 Tech Stack

FlutterGridViewNavigationHero Animation

┌───────────────────────────┐ │ 🛍️ TOKO KITA 🛒(2) │ ├───────────────────────────┤ │ [👕] [👟] [🎒] [⌚] │ │ Kaos Sepatu Tas Jam │ │ 150rb 350rb 90rb 200rb │ ├───────────────────────────┤ │ 🏠 🔍 🛒 👤 │ └───────────────────────────┘

💡 Paling menantang secara UI — pamerkan skill desainmu!

🏆 Output Skills Recap

12 skill yang telah kamu kuasai dari BAB 1 sampai BAB 12! 🎉

✓Dasar Bahasa Dart

✓OOP (Class & Object)

✓Dasar Flutter & Widget

✓Layout Responsif

✓Form & Input Handling

✓Navigation antar halaman

✓State Management

✓Local Storage

✓UI/UX & Design System

✓Build & Signing APK

✓Git & GitHub

✓Deployment & Portfolio

🚀 Kamu sekarang siap membangun aplikasi nyata dari nol hingga rilis!

📋 Tugas 1: Build & Release APK

🎯 Instruksi

Ambil salah satu proyek Flutter dari bab sebelumnya.
Set app icon & version di pubspec.yaml.
Jalankan flutter build apk --release.
Install APK di HP / emulator, ambil screenshot.
Tulis dokumentasi singkat langkah yang kamu lakukan.

📦 Output

1 file app-release.apk + 3 screenshot + dokumentasi (.md/.pdf).

⏱️ Estimasi

± 2 jam · Dikumpulkan akhir minggu ini.

Kriteria	Bobot
APK berhasil di-build & terinstall	40%
Icon & versi diatur dengan benar	30%
Screenshot & dokumentasi jelas	30%

📋 Tugas 2: Push ke GitHub + README

🎯 Instruksi

Buat akun & repository baru di GitHub.
Inisialisasi Git di proyekmu (git init).
Commit & push seluruh kode ke GitHub.
Buat README.md lengkap (deskripsi, fitur, cara jalan, teknologi, pembuat).
Kirim link repository sebagai bukti.

🔗 Output

Link repository GitHub publik berisi kode + README.md rapi.

⏱️ Estimasi

± 1.5 jam · Branch main harus bersih.

Kriteria	Bobot
Kode berhasil di-push ke GitHub	40%
README.md lengkap & rapi	40%
Commit message bermakna	20%

📋 Tugas 3: Final Project Pilihan Bebas

🎯 Instruksi

Pilih SATU dari 4 Final Project, lalu bangun, build APK, push ke GitHub, dan presentasikan di kelas.

🛒 Kasir Mobile
📒 Catatan CRUD + Dark Mode
✅ Manajemen Tugas
🛍️ E-Commerce UI Clone

📦 Output

APK release + repo GitHub + slide presentasi (3–5 menit).

⏱️ Estimasi

± 1 minggu · Presentasi minggu depan.

Kriteria	Bobot
Fungsi aplikasi berjalan baik	35%
UI/UX menarik & rapi	25%
Deploy (APK + GitHub) lengkap	25%
Presentasi jelas & percaya diri	15%

🎓 Selamat! Kamu telah menamatkan perjalanan Flutter Kelas 11 Semester 1! 🚀✨