Fastlane: Tạo Screenshot với snapshot và frameit

Không giống với các actions khác của Fastlane, action snapshot và frameit hoạt động khác 1 chút với nhiều thao tác manual hơn, tuy nhiên với lợi ích nó mang lại thì việc setup này chấp nhận được.

Mục đích: Tạo ảnh screenshots trên Store
Demo với iOS project: Swift, XCUITest framework

Source code có thể tải về tại Github

---

snapshot: Take Screenshots on many different devices and languages#

Cài đặt#

fastlane snapshot init

Bước 1: Setup UI Test#

1. Tạo UI Testing Bundle với tên: fastlaneScreenshots
2. New Scheme… với target là fastlaneScreenshots
3. Edit Scheme… fastlaneScreenshots
   Tab Build: Chọn Run
   Tab Run: Excutable = fastlaneGadev.app
4. Kéo file SnapshotHelper.swift vào Project tại folder fastlaneScreenshots
5. Code cho file fastlaneScreenshots.swift như sau:

class fastlaneScreenshots: XCTestCase {
    override func setUp() {
        let app = XCUIApplication()
        setupSnapshot(app)
        app.launch()
    }
    
    func testSnapshot () {
    }
}

Bước 2: Viết code UI Test#

1. Đặt con trỏ chuột vào giữa hàm testSnapshot, sau đó nhấn nút Record UI Test (Hoặc tự viết code ko cần Record cũng được).
2. Gọi hàm snapshot(“Tên màn hình”) để chụp ảnh.

func testSnapshot () {
    let app = XCUIApplication()
    snapshot("1-home")
    
    app.buttons["Làm sao để ăn gà ngon hơn?"].tap()
    snapshot("2-recipe-start")
    
    app.swipeUp();
    snapshot("3-recipe-end")
}

Bước 3: fastlane: Thiết lập ngôn ngữ, thiết bị sẽ chụp#

Tạo file ./fastlane/Snapfile

devices([
  "iPad (7th generation)",
  "iPhone 11 Pro Max"
])

languages([
    "en-US",
    "vi",
])

scheme("fastlaneScreenshots")
skip_open_summary true # bỏ qua việc mở web để xem lại ảnh sau khi chạy lệnh snapshot

# Để clean mọi thứ trước khi tạo ảnh snapshot
stop_after_first_error true
erase_simulator true
clear_previous_screenshots true
reinstall_app true

Simulator devices phải avaiable trong Xcode trước.
Chú ý khai báo scheme

Bước 4: Chụp màn hình#

fastlane snapshot

Thành quả nằm trong thư mục ./fastlane/screenshots/

frameit - Make screenshots look better#

Ảnh chụp màn hình sẽ được đóng khung trông như trên thiết bị thật 😲

Cài đặt

Yêu cầu imagemagick

Tạo lane

lane :frame do 
	frameit(path: "./fastlane/screenshots",
		rose_gold: true) # Chọn được màu thiết bị luôn ạ
end

Chạy lane:

fastlane frame
Ngon, trông như chụp hình app đang chạy trên điện thoại thật 👏

frameit - Advanced#

Screenshots với caption theo ngôn ngữ, background

Chuẩn bị:

• File ảnh nền: ./fastlane/screenshots/background.jpg
• Font chữ: ./fastlane/screenshots/fonts/Chalkduster.ttf
• File caption
  • Tiếng Việt: ./fastlane/screenshots/vi/titles.strings
  • Tiếng Anh: ./fastlane/screenshots/en-US/titles.strings
• File cấu hình: ./fastlane/screenshots/Framefile.json

Nội dung file titles.strings Tiếng việt

"1-home" = "Với nguyên liệu nấu ăn đơn giản";
"2-recipe-start" = "Công thức nấu ăn dễ hiểu";
"3-recipe-end" = "Làm thế nào để nấu được món ăn ngon";

Nội dung file titles.strings Tiếng Anh

"1-home" = "With ingredients easy to find";
"2-recipe-start" = "Just follow the recipes";
"3-recipe-end" = "How do you cook good food?";

Nội dung file Framefile.json

{
  "device_frame_version": "latest",
  
  // project - wide
  "default": {
    "keyword": {
      "font": "./fonts/Chalkduster.ttf"
    },
    "title": {      
      "color": "#B35800"
    },
    "padding": 50,
    "title_below_image": true,
    "background": "./background.jpg",
    "show_complete_frame": true
  },
  // Scene - specific
  "data": []
} 

🙌 Chạy lại lane frame và enjoy 🐣🐣