Mobile Development · Kelas 11 · Semester 2

BAB 12
Deployment & Production App

Saatnya aplikasimu keluar dari laptop dan terbang ke dunia nyata — dari kode menjadi aplikasi yang bisa diunduh jutaan orang di Play Store.

Build APK & Bundle Release Signing Analytics & Crashlytics Play Store Final Project

Gunakan ← → atau tombol navigasi untuk berpindah slide

Slide 2

Tujuan Pembelajaran & Peta Materi

ANALOGI

Selama ini kamu membangun roket di garasi (coding di laptop). BAB ini adalah peluncuran — memastikan roketnya aman, terpantau, dan benar-benar terbang ke orbit (Play Store).

Setelah BAB ini, kamu mampu:

Membangun file rilis: APK & App Bundle
Menandatangani aplikasi dengan Keystore
Memasang Firebase Analytics, Crashlytics & Performance
Mempersiapkan listing aplikasi di Play Store
Mengelola versioning & changelog yang rapi
Menjalankan Production & Security Checklist
Membangun Final Project nyata

Peta Materi (23 Slide)

Build: APK, App Bundle, Signing (Slide 3-5)
Monitoring: Analytics, Crashlytics, Performance (6-8)
Publish: Play Store, Versioning, Changelog (9-11)
Quality: Production & Security Checklist (12-13)
Final Project: 5 Opsi aplikasi nyata (14-20)
Praktik: 2 Latihan + 1 Tugas Akhir (21-23)

Slide 3 · Build

Build APK — `flutter build apk`

🏭 ANALOGI PABRIK

Bahan baku (kode Flutter { }) masuk ke ban berjalan pabrik → keluar produk jadi (file APK) yang siap dipasang di HP Android. Perintah flutter build apk adalah tombol "MULAI PRODUKSI".

i Penjelasan Teknikal

APK (Android Package Kit) = satu file utuh berisi seluruh aplikasi yang bisa langsung di-install.
--release = versi final, sudah dioptimasi & di-minify (beda dengan --debug saat ngoding).
Cocok untuk: distribusi langsung (kirim ke teman, install manual / sideload).
Hasil tersimpan di: build/app/outputs/flutter-apk/app-release.apk

terminal — bash

# Build APK rilis (semua arsitektur)
flutter build apk --release

# Lebih ramping → khusus HP 64-bit modern
flutter build apk --release --target-platform android-arm64

# Pisah per arsitektur (ukuran lebih kecil)
flutter build apk --release --split-per-abi

Demo Output

$ flutter build apk --release
Running Gradle task 'assembleRelease'...
✓ Built build/app/outputs/flutter-apk/app-release.apk (21.4MB)

📁 Struktur folder hasil:

build/
└─ app/outputs/flutter-apk/
└─ app-release.apk ← file ini yang dibagikan

Slide 4 · Build

Build App Bundle — `flutter build appbundle`

📦 ANALOGI KATERING

App Bundle seperti mengirim bahan masak lengkap ke dapur Google Play. Google lalu "memasak" porsi pas untuk tiap HP user — yang HP-nya arm64 hanya dapat porsi arm64. Hasil: ukuran download lebih kecil!

Kenapa AAB?

WAJIB untuk upload ke Play Store sejak Agustus 2021.
Google membuat APK optimal otomatis (Dynamic Delivery).
User download lebih kecil → hemat kuota → rating naik.
Format: .aab (Android App Bundle).

APK vs AAB

APK → install manual / bagi ke teman.
AAB → upload resmi ke Play Store.
AAB tidak bisa di-install langsung ke HP.
Lokasi: build/app/outputs/bundle/release/

terminal — bash

# Build App Bundle untuk Play Store
flutter build appbundle --release

Demo Output

$ flutter build appbundle --release
Running Gradle task 'bundleRelease'...
✓ Built build/app/outputs/bundle/release/app-release.aab (18.9MB)
→ File .aab inilah yang di-upload ke Play Console

Slide 5 · Build

Release Signing — Keystore & Certificate

🪪 ANALOGI KTP / PASPOR

Keystore ibarat tanda tangan + cap resmi-mu. Sama seperti paspor membuktikan "ini benar kamu", certificate membuktikan "aplikasi ini benar dari developer asli". Kehilangan keystore = kehilangan identitas — kamu tak bisa lagi update aplikasi itu!

Flowchart Proses Signing

Buat Keystore
keytool

key.properties
simpan rahasia

build.gradle
baca config

App Ter-sign
siap rilis

1. Generate keystore — terminal

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

2. android/app/build.gradle

android {
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}

JANGAN pernah commit file .jks dan key.properties ke Git! Tambahkan ke .gitignore. Simpan keystore di tempat super aman — backup di banyak lokasi.

Slide 6 · Monitoring

Firebase Analytics — Mengukur Perilaku User

📹 ANALOGI CCTV TOKO

Analytics adalah CCTV pintar di tokomu. Ia mencatat: berapa orang masuk, tombol mana paling sering ditekan, halaman mana paling lama dilihat. Dengan data ini, kamu tahu apa yang user suka tanpa harus bertanya satu per satu.

i Yang Bisa Diukur

Events — aksi user: klik tombol, buka layar, beli produk.
User properties — umur, kota, bahasa, tipe HP.
Funnel — di langkah mana user berhenti (drop-off).
Gratis & real-time di Firebase Console.

lib/services/analytics.dart

FirebaseAnalytics analytics = FirebaseAnalytics.instance;

// Catat event saat tombol ditekan
await analytics.logEvent(
  name: 'button_click',
  parameters: {'screen': 'home'},
);

// Catat layar yang dibuka
await analytics.logScreenView(screenName: 'ProductPage');

Demo — Dashboard Firebase

1.248

active users hari ini

3.402

event "button_click"

Slide 7 · Monitoring

Crashlytics — Deteksi Crash Otomatis

🚨 ANALOGI ALARM KEBAKARAN

Crashlytics adalah alarm kebakaran otomatis di aplikasimu. Begitu ada "kebakaran" (crash) di HP user mana pun, alarm langsung berbunyi ke dashboard-mu — lengkap dengan lokasi dan penyebabnya, tanpa user perlu lapor.

i Yang Dilaporkan

Stack trace — baris kode persis yang error.
Device info — HP, OS, memori saat crash.
Jumlah user terdampak & frekuensi crash.
Pengelompokan otomatis crash yang sama (issues).

lib/main.dart

// Tangkap semua error Flutter → kirim ke Crashlytics
FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

// Catat error manual (non-fatal) di dalam try/catch
try {
  await fetchData();
} catch (error, stack) {
  FirebaseCrashlytics.instance.recordError(error, stack, fatal: false);
}

Demo — Crashlytics Console

● NullCheckOperatorError — ProductPage.dart:42
Crash-free users: 99.4% | Terdampak: 18 users
Device: Xiaomi Redmi 9 · Android 11 · RAM 4GB

Slide 8 · Monitoring

Performance Monitoring

🏎️ ANALOGI SPEEDOMETER

Performance Monitoring adalah speedometer aplikasimu. Ia mengukur seberapa cepat layar terbuka, berapa lama loading API, dan kapan aplikasi "tersendat". Jika jarum menunjuk merah → ada yang perlu dibenahi.

Yang Diukur

App start time — kecepatan buka aplikasi.
Screen rendering — frozen / slow frames.
Network latency — durasi tiap request HTTP.

Kenapa Penting?

Aplikasi lambat → user kabur (53% jika >3 detik).
Temukan bottleneck sebelum user komplain.
Data per-negara, per-device, per-versi.

lib/services/perf.dart

// Ukur durasi sebuah proses dengan custom trace
final trace = FirebasePerformance.instance.newTrace('load_products');
await trace.start();

await fetchProducts();      // proses yang diukur

await trace.stop();         // durasi otomatis terkirim

Demo — Performance Dashboard

1.2s

app start time

340ms

load_products

0.3%

frozen frames

Slide 9 · Publish

Play Store Preparation

☁️ ANALOGI BUKA TOKO DI MAL

Play Store seperti mal besar. Sebelum buka toko, kamu sewa kios (Developer Account $25), pasang papan nama menarik (ikon & screenshot), dan tulis deskripsi produk. Lalu barang (file .aab) diangkut naik ke gudang awan.

1. Developer Account

Daftar di play.google.com/console
Bayar sekali $25 (seumur hidup).
Verifikasi identitas & alamat.

2. App Listing

Nama aplikasi & deskripsi (singkat + panjang).
Ikon 512×512, feature graphic 1024×500.
Min. 2 screenshot, kategori & rating konten.
Privacy Policy URL (wajib).

Alur Submission ke Play Store

Upload .aab

Isi Listing

Content Rating

Review Google
1-7 hari

PUBLISHED 🎉

Slide 10 · Publish

Versioning — versionCode & versionName

📚 ANALOGI EDISI BUKU

Versioning seperti edisi buku. "Edisi Revisi 2.0" memberi tahu pembaca ada perubahan besar, sedangkan nomor cetakan internal (versionCode) memastikan tiap edisi unik. versionName dilihat user, versionCode dipakai sistem.

i Memahami 1.2.0+5

versionName (1.2.0) → terlihat user. Format MAJOR.MINOR.PATCH (Semantic Versioning).
versionCode (5) → angka internal Play Store. Wajib NAIK tiap upload, kalau tidak update ditolak.
MAJOR ↑ = perubahan besar/breaking. MINOR ↑ = fitur baru. PATCH ↑ = perbaikan bug.

pubspec.yaml

version: 1.2.0+5    # versionName + versionCode
#        ▲ ▲ ▲ ▲
#  MAJOR─┘ │ │ └─ versionCode (internal, harus naik)
#    MINOR─┘ └─PATCH

Demo — Riwayat Versi

1.0.0+1 rilis pertama 🎉
1.0.1+2 perbaikan bug login (PATCH ↑)
1.1.0+3 tambah fitur dark mode (MINOR ↑)
2.0.0+4 redesign total (MAJOR ↑)

Slide 11 · Publish

Changelog — Apa yang Berubah Tiap Versi

🧾 ANALOGI STRUK BELANJA

Changelog seperti struk/nota yang merinci apa saja yang berubah. User membacanya di Play Store ("What's New") untuk tahu fitur baru, dan tim developer memakainya untuk melacak sejarah aplikasi.

i Aturan Changelog yang Baik

Tulis dari sudut pandang user, bukan istilah teknis berat.
Kelompokkan: ✨ Added, 🔧 Fixed, ⚡ Improved, 🗑️ Removed.
Satu file standar: CHANGELOG.md (format Keep a Changelog).
Selalu cantumkan nomor versi & tanggal.

CHANGELOG.md

# Changelog

## [1.2.0] - 2026-06-10
### ✨ Added
- Fitur dark mode di halaman pengaturan
- Login dengan Google

### 🔧 Fixed
- Perbaikan crash saat membuka kamera
- Tombol checkout kini responsif

### ⚡ Improved
- Loading produk 2x lebih cepat

Demo — Tampilan "What's New" di Play Store

Versi 1.2.0

🌙 Sekarang ada Dark Mode!
🚀 Loading lebih cepat
🐛 Perbaikan bug kamera

Slide 12 · Quality

Production Checklist

💬 Sebelum tinggal landas, pilot memeriksa checklist. Klik tiap item untuk menandainya selesai ✓

Hapus semua print() & debugPrint() yang tidak perlu
Build menggunakan mode --release (bukan debug)
Aplikasi sudah di-sign dengan keystore rilis
versionCode & versionName sudah dinaikkan
Firebase Analytics & Crashlytics aktif
Tested di minimal 3 device / ukuran layar berbeda
Icon, splash screen & nama aplikasi sudah final
Privacy Policy & permission sudah sesuai kebutuhan

0 dari 8 selesai — ayo dicek! ✈️

Checklist ini disimpan di kepala setiap developer profesional. Melewatkan satu langkah bisa berarti aplikasi ditolak Play Store atau crash di tangan user.

Slide 13 · Quality

Security Checklist

🛡️ ANALOGI PERISAI BERPUTAR

Security adalah perisai yang melindungi aplikasi & data user dari serangan. Perisai harus menutup semua sisi — satu celah kecil saja (API key bocor) bisa membahayakan seluruh pengguna.

Klik tiap item perisai untuk mengaktifkannya 🔒

API key & secret TIDAK di-hardcode (pakai .env / dart-define)
Keystore & key.properties ada di .gitignore
Semua komunikasi pakai HTTPS (bukan HTTP)
Token disimpan aman di flutter_secure_storage
Input user divalidasi (cegah injection)
Aktifkan ProGuard / R8 (obfuscation kode)
Firebase Security Rules sudah dikunci (bukan test mode)

0 dari 7 perisai aktif 🛡️

Slide 14 · Final Project

Overview Final Project — 5 Opsi

💬 Inilah panggung utamamu! Pilih satu dari lima proyek nyata berikut dan bangun dari nol hingga siap rilis, menggunakan semua skill BAB 1–12.

Opsi 1
E-Commerce App

Toko online lengkap dengan keranjang & pembayaran

Opsi 2
AI Chat App

Chatbot pintar dengan Gemini / OpenAI streaming

Opsi 3
OCR Scanner App

Pindai dokumen → teks → ekspor PDF

Opsi 4
School Management

Manajemen sekolah: nilai, absensi, jadwal

Opsi 5
Financial App

Catat pemasukan/pengeluaran + grafik

Bebas Pilih!
Detail tiap opsi

Lihat slide 15–19 →

Slide 15 · Final Project

Opsi 1 — E-Commerce Mobile App

🛒 KONSEP

Bangun toko online seperti Tokopedia mini: katalog produk, keranjang belanja, checkout, dan riwayat pesanan — semua tersinkron ke cloud.

Fitur Utama

Katalog produk + pencarian & filter
Keranjang belanja & wishlist
Checkout + simulasi pembayaran
Autentikasi user & riwayat order
Admin: tambah/edit produk

Arsitektur & Screen

Clean Architecture + Riverpod
Screen: Home, Detail, Cart, Checkout, Profile, Orders
Backend: Firebase/Supabase (produk & order)

FlutterRiverpodFirebaseREST APIClean Arch

Slide 16 · Final Project

Opsi 2 — AI Chat App

🤖 KONSEP

Buat asisten AI pribadi seperti ChatGPT. Jawaban muncul kata-demi-kata (streaming) sehingga terasa hidup dan responsif.

Fitur Utama

Chat real-time dengan Gemini / OpenAI
Streaming response (typing effect)
Riwayat percakapan tersimpan
Markdown rendering + copy code
Multi-session chat

Arsitektur & Screen

State management Provider/Riverpod
Screen: Chat List, Chat Room, Settings
Stream API + secure API key

Gemini APIOpenAIStreamingRiverpodSQLite

Slide 17 · Final Project

Opsi 3 — OCR Scanner App

📄 KONSEP

Aplikasi pemindai dokumen: arahkan kamera ke teks/dokumen → diubah jadi teks digital (OCR) → diekspor jadi file PDF rapi.

Fitur Utama

Capture dokumen via kamera
OCR teks dengan ML Kit
Edit & koreksi hasil teks
Ekspor ke PDF & share
Riwayat scan tersimpan

Arsitektur & Screen

Screen: Home, Camera, Result, History
ML Kit Text Recognition (on-device)
Package pdf & printing

ML KitCameraOCRpdfpath_provider

Slide 18 · Final Project

Opsi 4 — School Management App

🏫 KONSEP

Sistem manajemen sekolah dalam genggaman: guru input nilai & absensi, siswa lihat jadwal & rapor, semua role punya akses berbeda.

Fitur Utama

Multi-role: Admin, Guru, Siswa
Input & lihat nilai / rapor
Absensi harian
Jadwal pelajaran & pengumuman
Notifikasi push

Arsitektur & Screen

Role-based authentication
Screen: Login, Dashboard, Grades, Attendance, Schedule
Backend Firebase + Cloud Messaging

Firebase AuthFirestoreFCMRole-basedProvider

Slide 19 · Final Project

Opsi 5 — Financial Management App

💰 KONSEP

Aplikasi pengatur keuangan pribadi: catat pemasukan & pengeluaran, lihat di mana uang habis lewat grafik, dan atur budget bulanan.

Fitur Utama

Catat transaksi (income/expense)
Kategori & dompet (cash, bank, e-wallet)
Grafik pie & bar (fl_chart)
Budget & reminder
Ekspor laporan bulanan

Arsitektur & Screen

Local-first (SQLite/Hive) + sync cloud
Screen: Dashboard, Add Transaction, Stats, Budget
State management Riverpod

SQLiteHivefl_chartRiverpodintl

Slide 20 · Recap

Output Skills Semester 4 — Recap

💬 Selamat! Berikut peta kemampuan lengkap yang kini kamu kuasai dari BAB 1 hingga 12. Kamu sudah jadi Mobile Developer sungguhan! 🎓

Data & Backend

REST API & JSON
Firebase & Supabase
Authentication

Arsitektur

State Management
Provider & Riverpod
Clean Architecture

AI & ML

ML Kit (OCR, Face)
AI API (Gemini/OpenAI)
Streaming response

Quality

Automation Testing
Advanced Features
Security best practice

Deployment

Build APK & AAB
Release Signing
Play Store publish

Monitoring

Analytics
Crashlytics
Performance

Dari nol coding di BAB 1 → aplikasi nyata di Play Store di BAB 12. Itu perjalanan luar biasa!

Slide 21 · LATIHAN 1

Latihan 1 — Build & Sign APK Release

🎯 Tujuan: Membuat keystore lalu menghasilkan APK rilis yang sudah ditandatangani. Ikuti langkah & centang tiap selesai.

Step 1. Generate keystore dengan keytool
Step 2. Buat file android/key.properties
Step 3. Konfigurasi build.gradle baca keystore
Step 4. Tambahkan file rahasia ke .gitignore
Step 5. Jalankan flutter build apk --release
Step 6. Verifikasi APK sudah ter-sign

0 dari 6 step selesai

Step 1 & 2 — terminal + key.properties

# Step 1 — buat keystore
keytool -genkey -v -keystore ~/upload-keystore.jks \
  -keyalg RSA -keysize 2048 -validity 10000 -alias upload

# Step 2 — android/key.properties
storePassword=passwordku
keyPassword=passwordku
keyAlias=upload
storeFile=/Users/kamu/upload-keystore.jks

Kriteria Berhasil

File app-release.apk muncul di folder output.
Cek tanda tangan: jarsigner -verify -verbose app-release.apk → "jar verified".
Keystore & key.properties TIDAK ikut ter-commit ke Git.

Slide 22 · LATIHAN 2

Latihan 2 — Setup Firebase Analytics + Crashlytics

🎯 Tujuan: Integrasikan Analytics & Crashlytics ke project dummy, lalu kirim 1 event dan 1 test-crash.

1. pubspec.yaml — dependencies

dependencies:
  firebase_core: ^2.27.0
  firebase_analytics: ^10.8.0
  firebase_crashlytics: ^3.4.18

2. lib/main.dart — inisialisasi

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Arahkan semua error Flutter ke Crashlytics
  FlutterError.onError =
      FirebaseCrashlytics.instance.recordFlutterFatalError;

  runApp(const MyApp());
}

3. Kirim event & test crash

// Analytics — catat event tombol
await FirebaseAnalytics.instance.logEvent(
  name: 'button_click',
  parameters: {'screen': 'home'},
);

// Crashlytics — paksa crash untuk uji coba
ElevatedButton(
  onPressed: () => FirebaseCrashlytics.instance.crash(),
  child: const Text('Test Crash'),
);

Kriteria Berhasil

Event button_click muncul di Firebase → Analytics → DebugView.
Test crash muncul di Firebase → Crashlytics dalam beberapa menit.
Dashboard menampilkan device & stack trace.

Slide 23 · TUGAS AKHIR

Tugas Akhir — Bangun Final Project

🎓 MISI FINAL

Pilih 1 dari 5 opsi (slide 15–19), lalu susun dokumen perencanaan lengkap sebelum mulai ngoding. Perencanaan yang baik = setengah pekerjaan selesai!

Yang Harus Diserahkan (Dokumen Perencanaan)

1. Pilihan Proyek — opsi mana & alasan singkat.
2. Daftar Fitur — minimal 5 fitur utama (MVP).
3. Arsitektur — pola yang dipakai (Clean Arch + Riverpod/Provider).
4. Screen List — daftar semua halaman + alur navigasi.
5. Tech Stack — package & backend yang digunakan.
6. Deployment Plan — versioning awal + checklist rilis.

Kriteria Penilaian

Kelengkapan fitur MVP (30%)
Kerapian arsitektur & kode (25%)
Integrasi monitoring/security (20%)
Build rilis ter-sign & siap publish (15%)
Dokumentasi & changelog (10%)

Target Akhir

Aplikasi berjalan, ter-build sebagai APK/AAB rilis, terpasang Analytics & Crashlytics, lolos Production & Security Checklist, dan siap di-upload ke Play Store. 🚀

Selamat berkarya, calon developer hebat! 🎉

BAB 12Deployment & Production App

Tujuan Pembelajaran & Peta Materi

Build APK — flutter build apk

Build App Bundle — flutter build appbundle

Release Signing — Keystore & Certificate

Firebase Analytics — Mengukur Perilaku User

Crashlytics — Deteksi Crash Otomatis

Performance Monitoring

Play Store Preparation

Versioning — versionCode & versionName

Changelog — Apa yang Berubah Tiap Versi

Production Checklist

Security Checklist

Overview Final Project — 5 Opsi

Opsi 1 — E-Commerce Mobile App

Opsi 2 — AI Chat App

Opsi 3 — OCR Scanner App

Opsi 4 — School Management App

Opsi 5 — Financial Management App

Output Skills Semester 4 — Recap

Latihan 1 — Build & Sign APK Release

Latihan 2 — Setup Firebase Analytics + Crashlytics

Tugas Akhir — Bangun Final Project

BAB 12
Deployment & Production App

Build APK — `flutter build apk`

Build App Bundle — `flutter build appbundle`