claude-help

12 - Phát hành App Store, Google Play và Web với Claude Code

Hướng dẫn toàn diện để đưa ứng dụng lên Web, Apple App Store và Google Play Store với sự hỗ trợ của Claude Code CLI.


Mục lục

  1. Phát hành Web App
  2. Progressive Web App (PWA)
  3. Web Performance
  4. Mobile App với React Native
  5. Mobile App với Capacitor
  6. Đưa lên Apple App Store
  7. Đưa lên Google Play Store
  8. CI/CD cho Mobile
  9. Analytics và Monitoring
  10. Cập nhật ứng dụng
  11. Sử dụng Claude Skills
  12. Checklist phát hành tổng hợp

1. Phát hành Web App

Checklist trước khi phát hành

Trước khi đưa ứng dụng web lên production, cần kiểm tra đầy đủ các hạng mục sau:

Performance Audit với Lighthouse

Chạy Lighthouse audit cho ứng dụng Next.js:
- Performance score >= 90
- Accessibility score >= 90
- Best Practices score >= 90
- SEO score >= 90
Liệt kê các vấn đề cần sửa và cách khắc phục.
# Cài đặt Lighthouse CLI
npm install -g lighthouse

# Chạy audit cho production URL
lighthouse https://my-app.com --output html --output-path ./lighthouse-report.html

# Chạy audit với Chrome headless
lighthouse https://my-app.com --chrome-flags="--headless" --output json

# Chạy audit cho nhiều trang
npx unlighthouse --site https://my-app.com

SEO Optimization

Kiểm tra và tối ưu SEO cho ứng dụng Next.js:
- Meta tags (title, description, og:image)
- Sitemap.xml
- Robots.txt
- Structured data (JSON-LD)
- Canonical URLs
- Hreflang cho đa ngôn ngữ
// app/layout.tsx - Cấu hình metadata cơ bản
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: 'Tên ứng dụng',
    template: '%s | Tên ứng dụng',
  },
  description: 'Mô tả ứng dụng cho SEO',
  openGraph: {
    type: 'website',
    locale: 'vi_VN',
    url: 'https://my-app.com',
    siteName: 'Tên ứng dụng',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    creator: '@username',
  },
  robots: {
    index: true,
    follow: true,
  },
}

Accessibility (a11y)

Kiểm tra accessibility cho ứng dụng web:
- ARIA labels đầy đủ
- Keyboard navigation
- Color contrast ratio >= 4.5:1
- Screen reader compatibility
- Focus management
Sử dụng axe-core để scan tự động.
# Cài đặt công cụ kiểm tra a11y
npm install --save-dev @axe-core/react axe-core

# Chạy kiểm tra a11y tự động
npx pa11y https://my-app.com
npx pa11y-ci --sitemap https://my-app.com/sitemap.xml

Security Headers

Thêm security headers cho ứng dụng Next.js:
- Content-Security-Policy
- X-Frame-Options
- X-Content-Type-Options
- Strict-Transport-Security
- Permissions-Policy
// next.config.js - Cấu hình security headers
const securityHeaders = [
  { key: 'X-DNS-Prefetch-Control', value: 'on' },
  { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
  { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  { key: 'Referrer-Policy', value: 'origin-when-cross-origin' },
  { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
]

module.exports = {
  async headers() {
    return [{ source: '/(.*)', headers: securityHeaders }]
  },
}

Analytics Setup

# Cài đặt Google Analytics 4
npm install @next/third-parties

# Hoặc dùng Plausible (privacy-friendly)
npm install next-plausible

# Hoặc PostHog (self-hosted option)
npm install posthog-js
Tích hợp analytics cho ứng dụng Next.js:
- Google Analytics 4 hoặc Plausible
- Theo dõi page views, events, conversions
- Setup goals và funnels
- Đảm bảo tuân thủ GDPR/cookie consent

2. Progressive Web App (PWA)

Chuyển đổi Next.js thành PWA

Chuyển đổi ứng dụng Next.js hiện tại thành PWA với:
- Service Worker cho offline support
- Web App Manifest
- Install prompt tùy chỉnh
- Cache strategies (stale-while-revalidate)
- Background sync

Cài đặt next-pwa

# Cài đặt next-pwa
npm install @ducanh2912/next-pwa

# Hoặc dùng Serwist (bản mới hơn, thay thế next-pwa cũ)
npm install @serwist/next

Cấu hình next-pwa

// next.config.js
const withPWA = require('@ducanh2912/next-pwa').default({
  dest: 'public',
  cacheOnFrontEndNav: true,
  aggressiveFrontEndNavCaching: true,
  reloadOnOnline: true,
  swcMinify: true,
  disable: process.env.NODE_ENV === 'development',
  workboxOptions: {
    disableDevLogs: true,
  },
})

module.exports = withPWA({
  // Cấu hình Next.js khác
})

Web App Manifest

// public/manifest.json
{
  "name": "Tên đầy đủ ứng dụng",
  "short_name": "Tên ngắn",
  "description": "Mô tả ứng dụng",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0070f3",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Custom Install Prompt

// hooks/useInstallPrompt.ts
'use client'
import { useState, useEffect } from 'react'

interface BeforeInstallPromptEvent extends Event {
  prompt(): Promise<void>
  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
}

export function useInstallPrompt() {
  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null)
  const [isInstallable, setIsInstallable] = useState(false)

  useEffect(() => {
    const handler = (e: Event) => {
      e.preventDefault()
      setDeferredPrompt(e as BeforeInstallPromptEvent)
      setIsInstallable(true)
    }
    window.addEventListener('beforeinstallprompt', handler)
    return () => window.removeEventListener('beforeinstallprompt', handler)
  }, [])

  const install = async () => {
    if (!deferredPrompt) return
    deferredPrompt.prompt()
    const { outcome } = await deferredPrompt.userChoice
    if (outcome === 'accepted') {
      setIsInstallable(false)
    }
    setDeferredPrompt(null)
  }

  return { isInstallable, install }
}

Service Worker tùy chỉnh

Tạo Service Worker tùy chỉnh cho PWA với:
- Cache-first cho static assets
- Network-first cho API calls
- Stale-while-revalidate cho pages
- Offline fallback page
- Background sync cho form submissions

3. Web Performance

Core Web Vitals

Tối ưu Core Web Vitals cho ứng dụng Next.js:
- LCP (Largest Contentful Paint) < 2.5s
- FID/INP (Interaction to Next Paint) < 200ms
- CLS (Cumulative Layout Shift) < 0.1
Phân tích các vấn đề và đề xuất giải pháp cụ thể.

Image Optimization

// Sử dụng next/image cho tối ưu hình ảnh
import Image from 'next/image'

export function HeroImage() {
  return (
    <Image
      src="/hero.webp"
      alt="Mô tả hình ảnh"
      width={1200}
      height={630}
      priority // Dùng cho hình ảnh above-the-fold
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
    />
  )
}
# Chuyển đổi hình ảnh sang WebP/AVIF
npx sharp-cli --input ./images/*.png --output ./public/images/ --format webp --quality 80

# Tạo nhiều kích thước
npx responsive-images-creator --input hero.png --output ./public/images/ --widths 640,768,1024,1280,1920

Code Splitting và Bundle Analysis

# Phân tích bundle size
npm install --save-dev @next/bundle-analyzer

# Chạy phân tích
ANALYZE=true npm run build

# Kiểm tra kích thước từng route
npx next-bundle-analyzer
// next.config.js - Bật bundle analyzer
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({})

CDN Setup

Cấu hình CDN cho ứng dụng Next.js:
- Cloudflare hoặc AWS CloudFront
- Asset prefix cho static files
- Image CDN (Cloudinary/imgproxy)
- Edge caching rules
// next.config.js - CDN configuration
module.exports = {
  assetPrefix: process.env.CDN_URL || '',
  images: {
    loader: 'custom',
    loaderFile: './lib/image-loader.ts',
    domains: ['cdn.my-app.com'],
  },
}

4. Mobile App với React Native

Setup dự án React Native (Expo)

Tạo dự án React Native với Expo bao gồm:
- TypeScript
- React Navigation (stack + bottom tabs)
- Zustand cho state management
- TanStack Query cho data fetching
- Cấu trúc thư mục chuẩn
# Tạo dự án Expo mới
npx create-expo-app@latest my-mobile-app --template expo-template-blank-typescript

# Di chuyển vào thư mục dự án
cd my-mobile-app

# Cài đặt navigation
npx expo install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs
npx expo install react-native-screens react-native-safe-area-context

# Cài đặt state management
npm install zustand

# Cài đặt data fetching
npm install @tanstack/react-query axios

# Cài đặt các thư viện UI phổ biến
npx expo install expo-status-bar expo-constants expo-device
npx expo install expo-secure-store expo-image-picker expo-camera

# Cài đặt thư viện hỗ trợ
npm install react-native-mmkv   # Storage nhanh hơn AsyncStorage
npm install date-fns             # Xử lý ngày tháng

Cấu trúc thư mục đề xuất

my-mobile-app/
├── app/                    # Expo Router (file-based routing)
│   ├── (tabs)/            # Tab navigator
│   │   ├── index.tsx      # Tab Home
│   │   ├── search.tsx     # Tab Tìm kiếm
│   │   └── profile.tsx    # Tab Hồ sơ
│   ├── _layout.tsx        # Root layout
│   ├── login.tsx          # Màn hình đăng nhập
│   └── [id].tsx           # Dynamic route
├── components/            # Các component dùng chung
├── hooks/                 # Custom hooks
├── lib/                   # Thư viện, utilities
│   ├── api.ts            # API client (Axios)
│   └── storage.ts        # Secure storage
├── stores/               # Zustand stores
├── types/                # TypeScript types
├── constants/            # Hằng số, theme
└── assets/               # Hình ảnh, fonts

Build cho iOS và Android

# Chạy trên thiết bị/emulator
npx expo start
npx expo start --ios
npx expo start --android

# Prebuild (tạo native project)
npx expo prebuild
npx expo prebuild --clean  # Xóa và tạo lại từ đầu

# Chạy native build
npx expo run:ios
npx expo run:android

# Cài đặt EAS CLI
npm install -g eas-cli
eas login

# Cấu hình EAS Build
eas build:configure

# Build cho development
eas build --platform ios --profile development
eas build --platform android --profile development

# Build cho production
eas build --platform ios --profile production
eas build --platform android --profile production

# Build cả hai nền tảng
eas build --platform all --profile production

Cấu hình EAS Build

// eas.json
{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      }
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "production": {
      "autoIncrement": true,
      "ios": {
        "image": "latest"
      },
      "android": {
        "image": "latest"
      }
    }
  },
  "submit": {
    "production": {
      "ios": {
        "appleId": "your@email.com",
        "ascAppId": "1234567890",
        "appleTeamId": "ABCDE12345"
      },
      "android": {
        "serviceAccountKeyPath": "./google-play-key.json",
        "track": "internal"
      }
    }
  }
}

5. Mobile App với Capacitor (từ Next.js/Web app)

Thêm Capacitor vào dự án Next.js

Thêm Capacitor vào dự án Next.js hiện tại để build mobile app:
- Cấu hình output: export cho static
- Cài đặt Capacitor core và CLI
- Thêm platform iOS và Android
- Cấu hình native plugins cần thiết
# Cài đặt Capacitor
npm install @capacitor/core
npm install --save-dev @capacitor/cli

# Khởi tạo Capacitor
npx cap init "Tên App" "com.company.app" --web-dir=out

# Cấu hình Next.js cho static export
# Thêm vào next.config.js: output: 'export'

# Build web app
npm run build

# Thêm nền tảng mobile
npx cap add ios
npx cap add android

# Đồng bộ code web vào native project
npx cap sync

# Mở trong IDE
npx cap open ios      # Mở trong Xcode
npx cap open android  # Mở trong Android Studio

# Chạy trực tiếp
npx cap run ios
npx cap run android

# Live reload khi phát triển
npx cap run ios --livereload --external
npx cap run android --livereload --external

Cấu hình Capacitor

// capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.company.myapp',
  appName: 'Tên ứng dụng',
  webDir: 'out',
  server: {
    androidScheme: 'https',
  },
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      backgroundColor: '#ffffff',
      showSpinner: false,
    },
    PushNotifications: {
      presentationOptions: ['badge', 'sound', 'alert'],
    },
    Keyboard: {
      resize: 'body',
      style: 'dark',
    },
  },
}

export default config

Cài đặt Native Plugins phổ biến

# Push Notifications
npm install @capacitor/push-notifications

# Camera
npm install @capacitor/camera

# Filesystem
npm install @capacitor/filesystem

# Geolocation
npm install @capacitor/geolocation

# Share
npm install @capacitor/share

# App (lifecycle events)
npm install @capacitor/app

# Status Bar
npm install @capacitor/status-bar

# Haptics (rung)
npm install @capacitor/haptics

# Đồng bộ sau khi cài plugins
npx cap sync

6. Đưa lên Apple App Store

Yêu cầu bắt buộc

Quy trình chi tiết

Bước 1: Tạo App ID trên Apple Developer Portal

# Đăng nhập Apple Developer qua terminal (nếu dùng Fastlane)
fastlane produce create --app_identifier com.company.myapp --app_name "Tên App"

Bước 2: Certificates và Provisioning Profiles

# Tạo certificates tự động với Fastlane Match
fastlane match init
fastlane match appstore    # Tạo distribution certificate
fastlane match development # Tạo development certificate

# Hoặc dùng EAS cho Expo
eas credentials --platform ios

Bước 3: Build và Upload

# Với Expo/EAS
eas build --platform ios --profile production
eas submit --platform ios

# Với Fastlane
fastlane ios release

# Với Xcode CLI
xcodebuild -workspace MyApp.xcworkspace -scheme MyApp -configuration Release archive -archivePath build/MyApp.xcarchive
xcodebuild -exportArchive -archivePath build/MyApp.xcarchive -exportOptionsPlist ExportOptions.plist -exportPath build/

Bước 4: App Store Connect Metadata

Tạo toàn bộ App Store metadata cho ứng dụng [tên ứng dụng]:
- App Name (30 ký tự)
- Subtitle (30 ký tự)
- Description (4000 ký tự, tiếng Việt)
- Keywords (100 ký tự, phân cách bằng dấu phẩy)
- Promotional Text (170 ký tự)
- What's New (4000 ký tự)
- Privacy Policy URL
- Support URL
- Marketing URL
- Category và sub-category phù hợp

App Store Screenshot Sizes

# Kích thước screenshot yêu cầu
# iPhone 6.7" (1290 x 2796) - iPhone 15 Pro Max
# iPhone 6.5" (1284 x 2778) - iPhone 14 Plus
# iPhone 5.5" (1242 x 2208) - iPhone 8 Plus
# iPad Pro 12.9" (2048 x 2732)
# iPad Pro 11" (1668 x 2388)

# Tạo screenshot tự động với Fastlane
fastlane snapshot
fastlane frameit

App Store Optimization (ASO)

Phân tích và tối ưu ASO cho ứng dụng [tên]:
- Nghiên cứu keywords cạnh tranh thấp, volume cao
- Tối ưu title và subtitle
- Viết description hấp dẫn với keywords tự nhiên
- Gợi ý chiến lược ratings và reviews
- Phân tích đối thủ cạnh tranh

App Review Guidelines - Những lỗi hay gặp

Kiểm tra ứng dụng iOS trước khi submit theo Apple Review Guidelines:
- Guideline 2.1: App Completeness (không có crash, link hỏng)
- Guideline 2.3: Accurate metadata
- Guideline 4.0: Design (tuân thủ HIG)
- Guideline 5.1: Privacy (permission descriptions)
- Guideline 5.1.1: Data Collection and Storage
Liệt kê checklist cụ thể.

7. Đưa lên Google Play Store

Yêu cầu bắt buộc

Quy trình chi tiết

Bước 1: Tạo App trên Google Play Console

# Tạo keystore cho app signing (nếu không dùng EAS)
keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore \
  -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

# Cấu hình signing trong android/app/build.gradle
# signingConfigs { release { ... } }

Bước 2: Build AAB

# Với Expo/EAS
eas build --platform android --profile production

# Với React Native CLI
cd android
./gradlew bundleRelease

# File AAB nằm ở:
# android/app/build/outputs/bundle/release/app-release.aab

# Kiểm tra AAB
bundletool build-apks --bundle=app-release.aab --output=app.apks
bundletool install-apks --apks=app.apks

Bước 3: Upload và Testing Tracks

# Submit với EAS
eas submit --platform android

# Submit với Fastlane
fastlane android deploy

# Testing tracks (theo thứ tự):
# 1. Internal testing (tối đa 100 testers, review nhanh)
# 2. Closed testing (alpha/beta, cần email testers)
# 3. Open testing (ai cũng có thể tham gia)
# 4. Production (phát hành chính thức)

Bước 4: Google Play Store Listing

Tạo Google Play Store listing cho ứng dụng [tên]:
- Title (50 ký tự)
- Short description (80 ký tự)
- Full description (4000 ký tự)
- Nội dung phù hợp tiếng Việt
- Tags/categories phù hợp
- Content rating questionnaire
- Data safety section

Data Safety Section

Tạo nội dung Data Safety cho Google Play:
- Liệt kê tất cả loại dữ liệu thu thập
- Mục đích thu thập từng loại
- Có chia sẻ với bên thứ ba không
- Có mã hóa khi truyền tải không
- Người dùng có thể yêu cầu xóa không
Phải chính xác với thực tế ứng dụng.

Google Play Policies - Lưu ý quan trọng

Kiểm tra ứng dụng Android theo Google Play policies:
- Permissions: Chỉ yêu cầu quyền cần thiết
- Target API level: >= Android 14 (API 34)
- Data safety form chính xác
- Ads policy compliance
- Families policy (nếu dành cho trẻ em)
- Billing policy (sử dụng Google Play Billing cho in-app purchases)

8. CI/CD cho Mobile

EAS (Expo Application Services)

# Cấu hình EAS
eas build:configure

# Build và submit tự động
eas build --platform all --profile production --auto-submit

# Chỉ submit (khi đã có build)
eas submit --platform ios --latest
eas submit --platform android --latest

# Cập nhật OTA (không cần rebuild)
eas update --branch production --message "Sửa lỗi hiển thị trang chủ"

# Xem trạng thái build
eas build:list

GitHub Actions cho Mobile

Tạo GitHub Actions workflow cho React Native/Expo:
- Trigger khi push vào main hoặc tạo tag
- Chạy tests (Jest + Detox)
- Build iOS và Android qua EAS
- Auto submit lên TestFlight và Internal Testing
- Gửi thông báo qua Slack khi hoàn thành
# .github/workflows/mobile-release.yml
name: Mobile Release

on:
  push:
    tags:
      - 'v*'

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm test

  build-and-submit:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: $
      - run: npm ci
      - name: Build iOS
        run: eas build --platform ios --profile production --non-interactive
      - name: Build Android
        run: eas build --platform android --profile production --non-interactive
      - name: Submit iOS
        run: eas submit --platform ios --latest --non-interactive
      - name: Submit Android
        run: eas submit --platform android --latest --non-interactive

Fastlane

Cấu hình Fastlane cho iOS và Android:
- Automatic code signing với Match
- Build và upload tự động
- Screenshot automation
- Quản lý metadata
- Increment version/build number
# ios/fastlane/Fastfile
default_platform(:ios)

platform :ios do
  desc "Đẩy bản mới lên TestFlight"
  lane :beta do
    increment_build_number
    match(type: "appstore")
    build_app(
      workspace: "MyApp.xcworkspace",
      scheme: "MyApp",
      export_method: "app-store"
    )
    upload_to_testflight(skip_waiting_for_build_processing: true)
    slack(message: "Bản iOS beta mới đã được upload lên TestFlight!")
  end

  desc "Phát hành lên App Store"
  lane :release do
    increment_build_number
    match(type: "appstore")
    build_app(
      workspace: "MyApp.xcworkspace",
      scheme: "MyApp",
      export_method: "app-store"
    )
    upload_to_app_store(
      submit_for_review: true,
      automatic_release: true,
      force: true
    )
  end
end
# android/fastlane/Fastfile
default_platform(:android)

platform :android do
  desc "Đẩy bản mới lên Google Play Internal Testing"
  lane :beta do
    gradle(
      task: "bundle",
      build_type: "Release",
      project_dir: "./"
    )
    upload_to_play_store(
      track: "internal",
      aab: "app/build/outputs/bundle/release/app-release.aab",
      skip_upload_metadata: true,
      skip_upload_images: true
    )
    slack(message: "Bản Android beta mới đã được upload lên Internal Testing!")
  end

  desc "Phát hành lên Google Play Production"
  lane :release do
    gradle(task: "bundle", build_type: "Release", project_dir: "./")
    upload_to_play_store(
      track: "production",
      aab: "app/build/outputs/bundle/release/app-release.aab"
    )
  end
end

9. Analytics và Monitoring

Firebase Analytics

# Cài đặt Firebase cho React Native
npx expo install @react-native-firebase/app @react-native-firebase/analytics

# Hoặc cho Capacitor
npm install @capacitor-firebase/analytics
npx cap sync
Tích hợp Firebase Analytics cho mobile app:
- Theo dõi screen views tự động
- Custom events cho các hành động quan trọng
- User properties (phân khúc người dùng)
- Conversion tracking
- Funnel analysis

Sentry cho Mobile

# Cài đặt Sentry cho React Native
npx expo install @sentry/react-native

# Hoặc cho Capacitor
npm install @sentry/capacitor @sentry/angular
npx cap sync
// Cấu hình Sentry
import * as Sentry from '@sentry/react-native'

Sentry.init({
  dsn: 'https://your-dsn@sentry.io/project-id',
  tracesSampleRate: 0.2,       // 20% transactions cho performance
  profilesSampleRate: 0.1,     // 10% cho profiling
  environment: __DEV__ ? 'development' : 'production',
  enableAutoSessionTracking: true,
  attachScreenshot: true,       // Chụp screenshot khi crash
  enableNativeCrashHandling: true,
})

Crash Reporting và User Tracking

Thiết lập hệ thống monitoring cho mobile app:
- Crash reporting (Sentry/Firebase Crashlytics)
- Performance monitoring (startup time, screen load)
- Network monitoring (API latency, error rates)
- User session replay
- Custom dashboards và alerts

10. Cập nhật ứng dụng

OTA Updates với Expo

# Cập nhật JavaScript bundle mà không cần qua Store review
eas update --branch production --message "Sửa lỗi giao diện trang thanh toán"

# Cập nhật cho preview channel
eas update --branch preview --message "Thêm tính năng tìm kiếm nâng cao"

# Xem danh sách updates
eas update:list

# Rollback update
eas update:rollback --branch production

Versioning Strategy

Thiết lập chiến lược versioning cho mobile app:
- Semantic versioning (MAJOR.MINOR.PATCH)
- Tự động increment build number
- Mapping giữa version code và version name
- Changelog cho mỗi phiên bản
// app.json - Quản  version
{
  "expo": {
    "version": "1.2.0",
    "ios": {
      "buildNumber": "42"
    },
    "android": {
      "versionCode": 42
    }
  }
}
# Tăng version tự động
npm version patch   # 1.2.0 -> 1.2.1
npm version minor   # 1.2.1 -> 1.3.0
npm version major   # 1.3.0 -> 2.0.0

# EAS tự động tăng build number
# Đã cấu hình trong eas.json: "autoIncrement": true

Release Notes

Viết release notes cho phiên bản [version] của ứng dụng [tên]:
- Tính năng mới (bullet points ngắn gọn)
- Cải thiện hiệu năng
- Sửa lỗi đã biết
- Ngôn ngữ: tiếng Việt, thân thiện với người dùng
- Tối đa 500 ký tự cho App Store, 500 ký tự cho Google Play

11. Sử dụng Claude Skills

Các skill hữu ích khi phát hành ứng dụng:

# Tối ưu frontend và performance
/engineering-skills:senior-frontend

# Testing trên mobile
/engineering-skills:senior-qa

# Thiết lập CI/CD cho mobile
/engineering-skills:senior-devops

# Review kiến trúc hệ thống
/engineering-skills:senior-architect

# Kiểm tra bảo mật
/engineering-skills:senior-security

# Viết tài liệu phát hành
/document-skills:doc-coauthoring

# Quản lý dự án phát hành
/pm-skills:senior-pm

Prompt mẫu kết hợp Skills

/engineering-skills:senior-frontend
Review và tối ưu performance cho ứng dụng Next.js trước khi phát hành:
- Bundle size analysis
- Code splitting optimization
- Image và font optimization
- Critical rendering path
/engineering-skills:senior-qa
Tạo test plan cho mobile app trước khi submit lên Store:
- Functional testing checklist
- Device compatibility matrix
- Edge cases cần kiểm tra
- Performance benchmarks
/engineering-skills:senior-devops
Thiết lập CI/CD pipeline hoàn chỉnh cho:
- Build iOS và Android tự động
- Run tests trước khi build
- Auto submit lên TestFlight và Internal Testing
- Thông báo kết quả qua Slack

12. Checklist phát hành tổng hợp

Web App Checklist

## Trước khi phát hành Web
- [ ] Lighthouse score >= 90 trên cả 4 hạng mục
- [ ] Core Web Vitals đạt chuẩn (LCP, INP, CLS)
- [ ] SEO: meta tags, sitemap.xml, robots.txt
- [ ] Structured data (JSON-LD) cho rich snippets
- [ ] Security headers đã cấu hình
- [ ] HTTPS với SSL certificate hợp lệ
- [ ] Analytics đã tích hợp và hoạt động
- [ ] Error tracking (Sentry) đã cấu hình
- [ ] Cookie consent / GDPR compliance
- [ ] 404 page và error pages
- [ ] Favicon và app icons đầy đủ
- [ ] Open Graph images cho social sharing
- [ ] Cross-browser testing (Chrome, Firefox, Safari, Edge)
- [ ] Responsive design trên mobile/tablet/desktop
- [ ] Loading states và skeleton screens
- [ ] Environment variables đúng cho production
- [ ] Database migrations đã chạy
- [ ] CDN và caching đã cấu hình
- [ ] Backup strategy đã thiết lập
- [ ] Monitoring và alerting đã bật

iOS App Checklist

## Trước khi submit lên App Store
- [ ] Apple Developer Account active
- [ ] App ID đã tạo trên Developer Portal
- [ ] Certificates và Provisioning Profiles hợp lệ
- [ ] App icons đầy đủ kích thước (1024x1024 cho Store)
- [ ] Launch screen / splash screen
- [ ] Screenshots cho tất cả kích thước thiết bị
- [ ] App Store metadata (title, description, keywords)
- [ ] Privacy Policy URL
- [ ] Support URL
- [ ] App Privacy details đã điền
- [ ] Info.plist permissions descriptions (camera, location, etc.)
- [ ] Không có crash khi test trên thiết bị thật
- [ ] Deep links hoạt động đúng
- [ ] Push notifications hoạt động (nếu có)
- [ ] In-app purchases hoạt động (nếu có)
- [ ] Sign in with Apple (bắt buộc nếu có social login)
- [ ] Dark mode hỗ trợ
- [ ] Dynamic Type hỗ trợ (accessibility)
- [ ] IPv6 compatibility
- [ ] Không có private API usage
- [ ] Build archive thành công
- [ ] TestFlight testing hoàn thành

Android App Checklist

## Trước khi submit lên Google Play
- [ ] Google Play Developer Account active
- [ ] App signing key đã tạo và lưu trữ an toàn
- [ ] Target SDK version >= API 34 (Android 14)
- [ ] App icons (512x512 adaptive icon)
- [ ] Feature graphic (1024x500)
- [ ] Screenshots cho phone và tablet
- [ ] Store listing (title, description)
- [ ] Content rating questionnaire đã hoàn thành
- [ ] Data safety section đã điền chính xác
- [ ] Privacy Policy URL
- [ ] AAB build thành công
- [ ] ProGuard/R8 rules đã cấu hình
- [ ] Permissions tối thiểu cần thiết
- [ ] Không có crash trên các thiết bị phổ biến
- [ ] Deep links hoạt động đúng
- [ ] Push notifications hoạt động (nếu có)
- [ ] Google Play Billing tích hợp (nếu có in-app purchases)
- [ ] Backup rules đã cấu hình
- [ ] Network security config
- [ ] Internal testing đã hoàn thành
- [ ] Closed testing với người dùng thật
- [ ] ANR rate < 0.47%, Crash rate < 1.09%

Checklist chung cho cả iOS và Android

## Chung cho Mobile
- [ ] Versioning đúng (version name + version code)
- [ ] Release notes đã viết
- [ ] CI/CD pipeline hoạt động
- [ ] Error tracking (Sentry) đã cấu hình
- [ ] Analytics đã tích hợp
- [ ] Performance monitoring
- [ ] Offline handling
- [ ] Network error handling
- [ ] Loading states
- [ ] Empty states
- [ ] Localization (nếu đa ngôn ngữ)
- [ ] Biometric authentication (nếu cần)
- [ ] Secure storage cho sensitive data
- [ ] Certificate pinning (nếu cần bảo mật cao)
- [ ] Rollback plan nếu có vấn đề

Tổng kết

Nền tảng Phí Thời gian review Cập nhật OTA
Web Tùy hosting Không cần review Ngay lập tức
iOS (App Store) $99/năm 1-3 ngày (trung bình 24h) Có (EAS Update)
Android (Google Play) $25 (một lần) Vài giờ - 7 ngày Có (EAS Update)

Thứ tự phát hành khuyến nghị:

  1. Web - Phát hành trước, thu thập feedback
  2. Android - Review nhanh hơn, dễ sửa lỗi
  3. iOS - Review kỹ hơn, cần chuẩn bị kỹ lưỡng

Công cụ khuyến nghị: