Tu Xcode Simulator den App Store: Quy trinh chup man hinh cho lap trinh vien

Van de chup man hinh ma moi lap trinh vien iOS deu biet

Ban da danh hang tuan de hoan thien ung dung cua minh. Giao dien dep, animation muot ma va cac beta tester deu hai long. Bay gio den phan ma khong ai canh bao ban trong cac huong dan: tao anh chup man hinh App Store cho moi thiet bi, moi ngon ngu va moi kich thuoc man hinh ma Apple yeu cau.

Neu ban da tung phat hanh du chi mot ung dung, ban biet quy trinh nay. Mo Xcode Simulator, di chuyen den man hinh can chup, nhan Cmd+S, lap lai cho sau kich thuoc thiet bi khac nhau, roi mo Figma hoac Photoshop de them lop chu va hinh nen. Nhan so do voi so ngon ngu ban ho tro, va ban dang nhin vao hang gio lam viec thu cong lap di lap lai cho thu ma khong phai la code.

Bai viet nay huong dan tung buoc qua quy trinh thu cong truyen thong, xac dinh cac diem nghen va thay the tung buoc bang tu dong hoa. Cuoi cung, ban se co mot pipeline tu dong hoan toan tu thiet ke template den tai len App Store Connect ma khong can can thiep thu cong.

Quy trinh thu cong: Tung buoc mot

Buoc 1: Chup man hinh trong Simulator

Hanh trinh bat dau trong Xcode. Ban khoi dong simulator cho tung thiet bi can thiet: iPhone 6.7", iPhone 6.5", iPhone 5.5", iPad Pro 12.9" va iPad Pro 11". Voi moi simulator, ban dieu huong ung dung den man hinh chinh xac can chup va nhan Cmd+S.

Nghe don gian, nhung van de bat dau ngay lap tuc. Ung dung cua ban co the hien thi noi dung khac nhau tuy theo kich thuoc man hinh. Simulator khoi dong cham. Neu ung dung yeu cau xac thuc, ban phai dang nhap tren moi thiet bi.

Voi mot ung dung dien hinh co 6 anh chup tren 5 kich thuoc thiet bi, do la 30 lan chup rieng le. Them 3 ngon ngu va ban co 90 anh chup truoc khi mo bat ky cong cu thiet ke nao.

Buoc 2: Thay doi kich thuoc va dinh dang

Apple co yeu cau kich thuoc nghiem ngat cho anh chup App Store. Moi loai thiet bi yeu cau kich thuoc pixel chinh xac. Neu dau ra simulator khong khop chinh xac, App Store Connect se tu choi tai len.

Buoc 3: Them lop chu va hinh nen

Anh chup simulator tho khong du cho mot listing canh tranh. Cac ung dung hang dau su dung anh chup duoc thiet ke can than voi chu mo ta, hinh nen thuong hieu va khung thiet bi.

Buoc 4: Xuat cho moi thiet bi

Voi cac thiet ke hoan chinh, ban xuat tung cai o do phan giai chinh xac va quan ly quy uoc dat ten.

Buoc 5: Tai len App Store Connect

Cuoi cung, ban mo App Store Connect va bat dau keo anh chup vao dung vi tri. Neu phat hien loi, ban quay lai Figma, sua, xuat lai va tai lai. Vong phan hoi cuc ky cham.

Xac dinh cac diem nghen

• Lap lai giua cac thiet bi. Moi hanh dong duoc nhan voi so luong kich thuoc thiet bi.
• Lap lai giua cac ngon ngu. Moi thay doi van ban nghia la xuat lai cho moi ngon ngu.
• Khong co nguon su that duy nhat. File Figma, anh chup simulator va tai len App Store Connect khong ket noi voi nhau.

Pipeline tu dong

Buoc 1: Thiet ke mot lan trong Screenshots.live

Thay vi thiet ke trong Figma, ban tao template trong trinh chinh sua truc quan cua Screenshots.live. Trinh chinh sua hoat dong truc tiep trong trinh duyet va duoc xay dung dac biet cho anh chup App Store.

Moi template ho tro lop van ban va hinh anh dong. Loi the chinh: mot template hoat dong cho nhieu kich thuoc thiet bi. Screenshots.live xu ly viec render khung thiet bi, nen ban thiet ke bo cuc mot lan va he thong tu dong dieu chinh.

Buoc 2: Dinh nghia noi dung duoi dang du lieu

const screenshots = [
  {
    templateId: "habit-tracker-main",
    layers: {
      headline: "Theo doi thoi quen cua ban de dang",
      appScreenshot: "https://your-cdn.com/screens/home.png"
    }
  }
];

Buoc 3: Render qua API

Screenshots.live cung cap REST API de render template thanh hinh anh hoan hao tung pixel:

curl -X POST https://api.screenshots.live/v1/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "habit-tracker-main",
    "format": "png",
    "width": 1290,
    "height": 2796,
    "layers": {
      "headline": "Theo doi thoi quen cua ban de dang"
    }
  }'

Buoc 4: Tu dong tai len voi Fastlane

Cong cu deliver cua Fastlane xu ly tai len App Store Connect tu dong lenh. Ket hop voi API cua Screenshots.live, ban co the xay dung pipeline hoan toan tu dong.

Buoc 5: Tich hop vao CI/CD

Buoc cuoi cung la chay pipeline nay tu dong trong he thong CI cua ban.

Con Android thi sao?

Neu ban cung phat hanh tren Google Play, Screenshots.live ho tro khung thiet bi Android va tinh nang chuyen doi template tu dong tu iOS sang Android.

So sanh thoi gian

Bat dau

1. Dang ky tai Screenshots.live va tao template dau tien trong trinh chinh sua truc quan.
2. Thiet lap du lieu noi dung duoi dang file JSON voi tieu de va URL man hinh cho moi ngon ngu.
3. Viet script render goi API Screenshots.live cho moi bien the va luu dau ra theo cau truc thu muc Fastlane.
4. Chay Fastlane deliver de tai tat ca len App Store Connect bang mot lenh.
5. Them vao CI de cap nhat tu dong.

Toan bo cai dat mat khoang mot gio va tu hoan von ngay lan dau tien ban can cap nhat anh chup tren nhieu thiet bi va ngon ngu.