Van de voi anh chup man hinh thu cong

Neu ban da tung phat hanh mot ung dung di dong, ban se hieu noi kho nay. Moi chu ky phat hanh, ban phai mo Figma hoac Sketch, cap nhat thu cong anh chup man hinh cho tung kich thuoc thiet bi, tung ngon ngu, tung man hinh. Voi mot ung dung duy nhat ho tro iPhone, iPad va Android tren 10 ban dia phuong hoa, ban co the phai tao hang tram asset rieng le.

Hau het cac nhom mat tu mot den ba ngay lam viec cho quy trinh nay moi lan phat hanh. Va phan toi te nhat? No gan nhu hoan toan lap di lap lai. Template thiet ke khong doi. Khung thiet bi khong doi. Chi noi dung anh chup va van ban thay doi.

Co mot cach tot hon.

Giai phap tu dong: Screenshots.live + Fastlane

Trong huong dan nay, chung ta se thiet lap mot pipeline anh chup man hinh tu dong hoan toan su dung Screenshots.live va Fastlane. Cuoi cung, pipeline CI/CD cua ban se tao, ban dia phuong hoa va tai len tat ca anh chup App Store ma khong can thao tac thu cong.

Day la cach quy trinh hoat dong:

Ban thiet ke cac template anh chup mot lan trong trinh chinh sua truc quan cua Screenshots.live.
Ban dinh nghia cac bien (van ban tieu de, hinh anh chup, mau nen) trong moi template.
Pipeline Fastlane goi REST API cua Screenshots.live, thay the van ban da ban dia phuong hoa va anh chup moi.
Fastlane tai hinh anh hoan chinh truc tiep len App Store Connect hoac Google Play.

Dieu kien tien quyet

Tai khoan Screenshots.live voi it nhat mot template da tao.
Khoa API tu bang dieu khien Screenshots.live.
Fastlane da cai dat va cau hinh cho du an cua ban.
Ruby 2.7+ (cho Fastlane).
Moi truong CI/CD nhu GitHub Actions, GitLab CI hoac Bitrise.

Buoc 1: Thiet ke template

Dang nhap vao Screenshots.live va mo trinh chinh sua truc quan. Tao mot template cho moi vi tri anh chup. Khai niem then chot la bien dong:

{{headline}} cho van ban marketing
{{screenshot}} cho anh chup thiet bi thuc te
{{background_color}} cho tuy chinh giao dien

Buoc 2: Lay thong tin xac thuc API

export SCREENSHOTS_LIVE_API_KEY="sk_live_khoa_api_cua_ban"

Buoc 3: Thu nghiem API truc tiep

curl -X POST https://api.screenshots.live/v1/render \
  -H "Authorization: Bearer $SCREENSHOTS_LIVE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "tpl_abc123",
    "variables": {
      "headline": "Theo doi thoi quen cua ban de dang",
      "screenshot": "https://your-bucket.s3.amazonaws.com/screen1.png"
    },
    "deviceFrames": ["iphone_6.7", "iphone_6.5", "ipad_pro"]
  }'

Buoc 4: Tao cau hinh ban dia phuong hoa

# screenshots.yml
locales:
  en:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Track your habits effortlessly"
          screenshot: screens/en/home.png
  vi:
    screenshots:
      - template: tpl_abc123
        variables:
          headline: "Theo doi thoi quen cua ban de dang"
          screenshot: screens/vi/home.png

device_frames:
  ios:
    - iphone_6.7
    - iphone_6.5
    - ipad_pro_12_9

Buoc 5: Viet tich hop Fastlane

Them vao Fastfile cua ban:

require 'yaml'
require 'net/http'
require 'json'
require 'fileutils'

platform :ios do
  desc "Tao va tai len anh chup da ban dia phuong hoa"
  lane :screenshots do
    generate_screenshots
    upload_to_app_store(
      skip_binary_upload: true,
      skip_metadata: true,
      screenshots_path: "./fastlane/screenshots"
    )
  end
end

private_lane :generate_screenshots do |options|
  config = YAML.load_file("screenshots.yml")
  api_key = ENV["SCREENSHOTS_LIVE_API_KEY"]
  device_frames = config["device_frames"]["ios"]

  config["locales"].each do |locale, data|
    data["screenshots"].each_with_index do |entry, index|
      UI.message("Dang render #{locale} anh chup #{index + 1}...")

      uri = URI("https://api.screenshots.live/v1/render")
      http = Net::HTTP.new(uri.host, uri.port)
      http.use_ssl = true

      request = Net::HTTP::Post.new(uri)
      request["Authorization"] = "Bearer #{api_key}"
      request["Content-Type"] = "application/json"
      request.body = {
        templateId: entry["template"],
        variables: entry["variables"],
        deviceFrames: device_frames
      }.to_json

      response = http.request(request)
      result = JSON.parse(response.body)

      result["images"].each do |image|
        output_dir = "./fastlane/screenshots/#{locale}"
        FileUtils.mkdir_p(output_dir)
        File.write(
          "#{output_dir}/#{image['device']}_#{index}.png",
          Net::HTTP.get(URI(image["url"]))
        )
      end
    end
  end
end

Buoc 6: Tich hop voi CI/CD

# .github/workflows/screenshots.yml
name: Tao anh chup App Store

on:
  push:
    branches: [main]
    paths:
      - 'screenshots.yml'
      - 'screens/**'
  workflow_dispatch:

jobs:
  generate:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4
      - name: Cai dat Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
          bundler-cache: true
      - name: Tao va tai len anh chup
        env:
          SCREENSHOTS_LIVE_API_KEY: ${{ secrets.SCREENSHOTS_LIVE_API_KEY }}
        run: bundle exec fastlane ios screenshots

Truoc va sau: Tac dong thuc te

Truoc: Quy trinh thu cong

Nha thiet ke mo Figma, dat thu cong anh chup moi vao 6 template.
Xuat cho 3 kich thuoc thiet bi moi nen tang = 36 hinh anh moi ngon ngu.
Voi 10 ngon ngu: 360 hinh anh can xuat va sap xep.
Thoi gian: 2-3 ngay moi chu ky phat hanh.

Sau: Pipeline tu dong

Lap trinh vien cap nhat screenshots.yml.
Push len main. CI/CD chay tu dong.
Tat ca 360+ hinh anh duoc tao va tai len trong duoi 15 phut.
Khong can thao tac thu cong. Khong co asset sai vi tri.
Thoi gian tiet kiem moi lan phat hanh: 2+ ngay.

Ket luan

Tu dong hoa anh chup App Store la mot trong nhung cai tien co tac dong lon nhat ma ban co the thuc hien cho quy trinh phat hanh. Bat dau voi Screenshots.live va lay lai nhung ngay phat hanh cua ban.

Cach tu dong hoa anh chup man hinh App Store voi Fastlane va REST API