→ From Coder to Shipper
From Coder to Shipper · Rapid-fire

Mobile dev — điện thoại là một nền tảng

Kỹ năng web của bạn, tiến thêm một bước tới túi user: app native (Swift/Kotlin) và cross-platform (React Native/Flutter) — cùng thói quen ship-it.

← / → để chuyển slide · chuyển EN/VI bên dưới

Nền tảng

Mobile app thực sự là gì

Không phải một URL — một gói code + asset sống ngay trên thiết bị.

Được cài, không phải được ghé

App được tải từ store (hoặc link) và chạy ngay trên thiết bị — có mạng hay không cũng chạy.

Hai con đường

NATIVE: viết bằng ngôn ngữ riêng của nền tảng (Swift trên iOS, Kotlin trên Android). CROSS-PLATFORM: viết một lần, gói cho cả hai (React Native, Flutter).

Cùng vòng lặp bạn đã biết

Code → build → chạy trên thiết bị hoặc máy ảo → nhìn → sửa. Vòng lặp dev y hệt web — chỉ khác đích đến là điện thoại.

State → màn hình

Cùng ý tưởng reactive như web: màn hình là hàm của state. Đổi state, UI tự vẽ lại — dù là tab trình duyệt hay điện thoại.

Điểm rẽ

Native vs cross-platform

Cả quyết định mobile gói trong một slide.

Native — một ngôn ngữ cho mỗi nền tảng

Swift cho iOS, Kotlin cho Android. Nhanh nhất, bóng bẩy nhất, truy cập đủ phần cứng — nhưng HAI codebase, hai ngôn ngữ, hai app store.

Chọn khi chính nền tảng là sản phẩm.

Cross-platform — một codebase, hai đích đến

React Native (JSX) hoặc Flutter (Dart): viết một lần, ship cả hai store. Khoảng 90–95% trải nghiệm native với hầu hết app.

Chọn khi có mặt ở khắp nơi là quan trọng nhất.

01
Các con đường

Chọn ngôn ngữ, chọn đường đi

Bốn lựa chọn đáp ứng 99% công việc mobile thực tế.

Đường 1 · native

Đường native — Swift & Kotlin

Swift — ngôn ngữ của Apple

iOS, iPadOS, macOS. Hiện đại, an toàn, nhanh; cách duy nhất để có app Apple chuẩn mực. IDE là Xcode.

Kotlin — ngôn ngữ của Android

Ngôn ngữ chính thức của Android: ngắn gọn, thân thiện với Java, an toàn null. IDE là Android Studio.

Bạn nhận được gì

Truy cập đủ phần cứng (camera, GPS, cảm biến, push), hiệu năng tốt nhất, và công cụ được store khuyến nghị.

Bạn trả giá gì

Hai codebase và hai ngôn ngữ cho hai store — gấp đôi công, gấp đôi hàng chờ duyệt.

Đường 2 · cross-platform

Đường cross-platform

React Native — JSX

Kỹ năng web của bạn, trên điện thoại: JavaScript + JSX render thành widget native THẬT. Expo là lối vào dễ nhất.

Flutter — Dart

Bộ công cụ của Google: codebase Dart tự VẼ UI của nó (không dùng widget native). Một diện mạo chuẩn pixel trên mọi màn hình.

Bạn nhận được gì

Một codebase, cả hai store. Hot reload: lưu file là thấy trên máy trong một giây. Hệ sinh thái lớn, trưởng thành.

Bạn trả giá gì

5–10% hoàn thiện cuối, và đôi khi vướng với tính năng phần cứng mới nhất (native module lấp khoảng trống).

Cạnh nhau

Bốn lựa chọn, một công việc

SwiftKotlinReact NativeFlutter
Con đườngNative (iOS)Native (Android)CrossCross
Kiểu UIWidget Apple nativeWidget Android nativeWidget native thật qua JSTự vẽ UI của nó
StoreApp StoreGoogle PlayBoth / Cả haiBoth / Cả hai
Hợp nhất choSản phẩm iOS cao cấpSản phẩm Android cao cấpTeam JS, MVP nhanhChuẩn pixel, cả hai nền tảng
Ý tưởng lõi

Ý tưởng gặp trên mọi con đường

Hot reload

Lưu file → app đang chạy cập nhật trong một giây, không cần build lại. Vòng lặp dev nhanh gấp 10 lần.

Thiết bị thật vs máy ảo

Emulator là điện thoại trong chương trình — ổn cho hầu hết việc, nhưng pin, camera và độ trễ thật chỉ có trên phần cứng thật.

Dây chuyền build

JS được đóng gói; Dart được biên dịch (AOT) thành mã máy. Store nhận một gói đã ký: .ipa / .apk / .aab.

State → màn hình, lần nữa

useState trong React Native, setState trong Flutter: cùng thỏa thuận reactive bạn gặp trên web, do framework thực thi.

Tự chạy thử · React Native

Một màn hình, bằng JSX

Đúng là kiến thức React web của bạn — View và Text chỉ là div và p của app.

App.jsx
import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.box}>
      <Text>Tap count: {count}</Text>
      <Button title="Tap" onPress={() => setCount(count + 1)} />
    </View>
  );
}

State đổi → màn hình vẽ lại — cùng thỏa thuận như web, nhưng giờ trên điện thoại.

Tự chạy thử · Flutter

Một màn hình, bằng Dart

Flutter dựng màn hình thành một cây Widget — UI là code, do engine tự vẽ.

main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Hello, mobile")
      )
    );
  }
}

Scaffold → Center → Text: ba widget, một màn hình. Đó là toàn bộ mẫu hình.

Trong terminal

Chạy trên điện thoại

Expo trỏ điện thoại về laptop của bạn; flutter build rồi đẩy lên thiết bị.

ops@vps — zsh
$ npx expo start
Starting project from ~/mobile-app
› Scan the QR code with Expo Go — it opens on your phone
$ flutter run
Launching lib/main.dart on Pixel 8 in debug mode...
✓ Built app/debug/app-debug.apk
← save a file: both rebuild + redeploy in seconds
Bức tranh

Những tên bạn sẽ thực sự gặp

React Native / Expo

Framework JS của Meta + bộ công cụ Expo — cách nhanh nhất để dev JS ship lên cả hai store.

Flutter / Dart

Bộ công cụ cross-platform của Google. Hậu thuẫn công ty lớn, cộng đồng lớn, UI đồng nhất khắp nơi.

The stores

App Store + Google Play: hàng chờ duyệt, ký, version — nửa shipper của mobile. Dự trù một ngày cho lần nộp đầu.

Quyết định

Bạn chọn đường nào?

Chọn sai là viết lại; chọn đúng là nhàm chán — và nhàm chán là tốt.

Đi native khi…

Một nền tảng quan trọng trước, sản phẩm sống còn nhờ camera/GPS/hiệu năng, hoặc bạn muốn 1% hoàn thiện cuối cùng.

Trả giá một lần; nền tảng kia làm sau.

Đi cross-platform khi…

Có mặt trên cả hai store ngay từ ngày đầu là quan trọng, bạn là team JS (→ React Native) hoặc muốn một UI nhất quán chuẩn pixel (→ Flutter).

Ship nhanh hơn, lặp nhanh hơn — 5% cuối để sau.

Ranh giới

Cái gì chủ động bỏ qua

Native module

Cây cầu JS/Dart → native khi framework không chạm được phần cứng trực tiếp.

Thông báo đẩy

Token APNs/FCM, luồng quyền, app gõ cửa user — một chủ đề có giấy tờ riêng.

Offline & đồng bộ

Lưu cục bộ, giải quyết xung đột, ra vào mạng — 10% khó của app thực thụ.

Phát hành & kiếm tiền

Build đã ký, rollout từng phần, mua trong ứng dụng, gói thuê bao — nửa shipper của mobile.

Mobile app chỉ là codebase của bạn khoác lên một thiết bị: cùng state, cùng vòng lặp build-chạy-nhìn, cùng kỷ luật ship — cái duy nhất mới là user cầm nó trong túi.
toàn cảnh

Một codebase. Hai chiếc túi.

Giờ bạn đã nói được mọi ngôn ngữ trong khóa học — chọn một và ship đi.