Fastlane là gì? 

Fastlane là một công cụ phân phối ứng dụng (CD) mã nguồn mở giúp tự động hóa việc xây dựng và triển khai ứng dụng Android và iOS lên Firebase,  Play Store hoặc App Store. Bạn có thể tùy chỉnh các lane theo môi trường DEV, STAGING, PROD theo ý muốn và chúng cũng giúp bạn tự động hóa quy trình ký mã cho cả hai nền tảng.

Cấu hình cho fastlane cho flutter thực chất là cấu hình riêng cho 2 môi trường iOS và Android trong project. Cấu hình riêng này hoàn toàn có thể dùng cho môi trường native iOS hoặc Android.

Tôi sẽ chia làm 3 phần
Phần 1: Config fastlane Firebase app distribution cho iOS
Phần 2: Config fastlane Firebase app distribution cho Android
Phần 3: Config fastlane Testflight iOS và Google Playstore Android

Hãy cùng bắt đầu với phần 1: Config fastlane Firebase app distribution cho iOS

Bước 1: Cài đặt fastlane

Bắt đầu cài đặt đơn giản qua Homebrew (macOS). Bạn có thể tham khảo tại tại fastlane doc

brew install fastlane

Bước 2: Khởi tạo fastlane trong project iOS

trỏ tới thư mục iOS trong dự án flutter của bạn thông qua terminal

cd ios

khởi tạo fastlane

fastlane init

Lúc này sẽ có 4 lựa chọn để fastlane tạo sẵn cho bạn config mặc định. Để đơn giản hay bắt đầu với lựa chọn 4: Manual setup

Tiếp tục và Enter cho đến khi hoàn thành

Lúc này kiểm tra trong thư mục ios sẽ sinh ra thu mục fastlane và các file config sẵn, chúng ta sẽ chú ý tới Fastfile, nơi config các lệnh tự động.

Mở file Fastfile bạn sẽ thấy config mặc định lane: custom_lane
chúng ta sẽ thêm 1 dòng printf(“Hello fastlane”) để test

Giờ hãy cùng test qua terminal để xem fastlane nó chạy như nào:
chú ý vẫn tại thư mục ios trong project

fastlane custom_lane

Hello fastlane đã được in ra 🎉

• Fastfile được viết bằng Ruby

• lane: custom_lane nơi bạn gom chạy các task vụ chung lại với nhau. Bạn có thể tìm hiểu thêm tại doc
  
  Giờ chúng ta cùng nhau config chi tiết lane: DEV mục tiêu là đẩy bản build môi trường DEV lên firebase app distribution.

Bước 3: Import certificate và provisioning profile

• Để build được file ipa và đẩy lên firebase distribution cần certificate và provisioning được setup và cấu hình qua tài khoản apple developer. Trong bài viết tôi không đi sâu vào vấn đề tạo certificate cũng như provisioning tuy nhiên bạn có thể tìm hiểu thêm tại đây
• Tới bước này mặc định bạn đã có certificate dạng dev_ios_distribution.p12 (với password) và provisioning dạng ios_app_name_dev_adhoc.mobileprovision cho môi trường DEV
  
  Chúng ta có 2 cách
  – Cách 1: là đưa lên git private mục đích bảo mật dành cho những thành viên có quyền mới truy cập vào build deploy được. Với cách này chúng ta dùng fastlane action match để get từ github private và import. Chi tiết tại fastlane action match
  – Cách 2: đưa thẳng file certificate và provisioning vào cùng thư mục để dễ dàng truy cập. Tôi sẽ đi sâu vào cách này ví nó đơn giản.
  Tạo 2 thư mục certs và profile để save local cùng project ios

Bắt đầu config lane DEV trong Fastfile

Thực hiện fastlane action import_certificate
–keychain_name : kiểm tra xem certificate của bạn được import trong keychain nào, open Keychain Access trong Macos và tìm. Trong trường hợp của máy tôi, certificate iPhone Distribution xxx COMPANY LIMITTED (yyyyy) có trong keychain login
–certificate_password: password certificate_distribution.p12 của bạn
–keychain_password: password vào keychain của bạn.

Thực hiện tiếp fastlane action install_provisioning_profile
Trong trường hợp chạy máy ảo hoặc bạn muốn tách biệt bạn có thể dùng fastlane action create_keychain để tạo riêng keychain cho bạn.

Tiếp tục với action build_ios_app thực hiện export file ipa. Cần chú ý vài điểm sau
–scheme và configuration: đúng như bạn đã config trong xcode
–output_directory: đường dẫn thư mục chứ file ipa sau khi export thành công
–export_method: ad-hoc
–codesigning_identity: tên chính sác của provisioning profile
–provisionningProfile: chính xác tên bundle và tên file provisioning

Sau khi config xong test thử lệnh

fastlane DEV

Vài lỗi có thể gặp phải:

• import certificate error: kiểm tra lại tên file và đường dẫn. Có thể lấy đường dẫn trực tiếp để test kỹ.
• build_ios_app error: thêm debug: true để check kỹ lỗi gặp phải.

Sau khi build thành công bạn sẽ thấy thư mục build/dev có file APP-DEV.ipa như hình

Ngoài ra còn có file .dSYM.zip .File này mục đích để giải mã lỗi ngược dùng cho firebase crashlytics. Trường hợp bạn export không có file dSYM.zip hãy kiểm tra config trong Debug Information Format chọn DWARK with dSYM File.

4. Cấu hình upload Firebase distribution
Giả định bạn đã setup thành công firebase và kết nối với project flutter. Chi tiết config firebase bạn có thể xem tại đây. Chúng ta sẽ tiếp cụ với:

• Tìm App ID thông qua Firebase Console
• Để phân phối ứng dụng thông qua Fastlane, bạn cần một Firebase CLI token. Chạy lệnh sau trong terminal để đăng nhập và tạo token:

firebase login:ci

Sau khi đăng nhập thành công, bạn sẽ nhận được một token. Hãy lưu trữ token này một cách an toàn.

Tiếp tục mở Fastfile và thêm config fastlane action firebase_app_distriution và upload_symbols_to_crashlytics

–groups: tên group test config trong firebase app distribution
–testers: list email chỉ định tới các tester đã add trong firebase app distribution
–upload_symbols_to_crashlytics: nếu bạn không sử dụng Firebase crashlytics hãy bỏ nó đi.

Các lỗi gặp phải:
-sai đường dẫn hoặc tên file ipa
-hãy đảm bảo bạn đã kích hoạt app distribution của ios trên firebase console
-đảm bảo version name, version code khác nhau mỗi lần upload.

Tới đây bạn đã hoàn thành việc config fastlane build Firebase app distribution cho môi trường iOS.
Hãy cùng đón đợi tiếp phần 2 config cho môi trường Android.

The post Fastlane Flutter App Distribution (part 1: Firebase app distribution iOS) appeared first on Tomoshare.

Trong SwiftUI, view modifiers là một cách để thay đổi hoặc thiết lập hành vi cho một view cụ thể. Chúng là các cấu trúc nhẹ nhàng cho phép bạn thay đổi giao diện, hành vi hoặc bố cục của một view. Các bộ điều chỉnh view được áp dụng bằng cách sử dụng cú pháp dấu chấm và có thể được nối với nhau để thực hiện những sửa đổi phức tạp hơn.

View modifiers không chỉ cho phép bạn thay đổi hình dạng và hành vi của một view, mà còn cho phép bạn tạo ra những thay đổi phức tạp bằng cách nối chúng lại với nhau. Với SwiftUI, bạn có thể thay đổi font, màu sắc, khoảng trống, căn chỉnh, và nhiều tính năng khác của view chỉ bằng cú pháp đơn giản.

Ngoài ra, SwiftUI cung cấp các view modifier tích hợp sẵn, giúp bạn tiết kiệm thời gian và công sức trong việc tạo ra giao diện người dùng đẹp và hiệu quả. Hơn nữa, bạn cũng có thể tạo ra những bộ điều chỉnh tùy chỉnh phù hợp với yêu cầu cụ thể của ứng dụng của mình.

Trong SwiftUI, view modifiers là một cách hữu dụng để có thể đóng gói và tái sử dụng các hành vi và styles cho các view.

Bạn có thể làm điều này bằng cách tạo một struct ViewModifier mới với giao thức ViewModifier. Ở đây, mình tạo một struct CustomViewModifier và tuân thủ nó vào giao thức ViewModifier.

struct CustomViewModifier: ViewModifier {

    func body(content: Content) -> some View {
        content
    }

}

Bây giờ, bạn có thể thêm các modifier vào content này theo ý muốn. Mình sẽ thêm một số view modifier tích hợp sẵn để thêm border.

struct CustomViewModifier: ViewModifier {

    func body(content: Content) -> some View {
        content
            .padding()
            .cornerRadius(10)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.black, lineWidth: 2)
            )
    }
}

Chúng ta có thể tùy chỉnh các thuộc tính của bộ điều chỉnh view như corner radius, border width, v.v.

struct CustomViewModifier: ViewModifier {
    
    var cornerRadius: CGFloat
    var borderColor: Color
    var borderWidth: CGFloat

    func body(content: Content) -> some View {
        content
            .padding()
            .cornerRadius(cornerRadius)
            .overlay(
                RoundedRectangle(cornerRadius: cornerRadius)
                    .stroke(borderColor, lineWidth: borderWidth)
            )
    }
}

Chúng ta có thể gọi trực tiếp custom modifier này hoặc bạn có thể đặt một tên cho nó bằng cách tạo extension từ View.

.modifier(CustomViewModifier(cornerRadius: 10, 
                             borderColor: .black, 
                             borderWidth: 2)) 

extension View{
    //--Chúng ta có thể đặt tên cho custom modifer
    func addBorder(cornerRadius: CGFloat, 
                   borderColor: Color,
                   borderWidth: CGFloat) -> some View{
        self.modifier(CustomViewModifier(cornerRadius: cornerRadius, 
                                         borderColor: borderColor,
                                         borderWidth: borderWidth))
    }
}

Bây giờ hãy sử dụng modifier này trong view của bạn.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .addBorder(cornerRadius: 8, 
                           borderColor: Color.blue, 
                           borderWidth: 2)
        }
    }
}

Kết quả chúng ta sẽ được như hình bên dưới:

Thêm một ví dụ custom modifier với Linear Gradient: Tạo một view modifier có background là linear gradient và có thể blur.

struct BlurWithLinearGradient: ViewModifier {
    let isBlur: Bool
    let cornerRadius: CGFloat
    
    func body(content: Content) -> some View {
        ZStack {
            if isBlur {
                content
                    .background(linearGradient())
                    .blur(radius: 3)
            }

            content
                .background(linearGradient())
        }
    }
    
    @ViewBuilder
    private func linearGradient() -> some View {
        LinearGradient(colors: [Colors.black, Colors.blue],
                       startPoint: .topLeading,
                       endPoint: .bottomTrailing)
            .overlay(
                RoundedRectangle(cornerRadius: cornerRadius)
                    .strokeBorder(.white.opacity(0.5), lineWidth: 1)
            )
            .clipShape(RoundedRectangle(cornerRadius: cornerRadius))
    }
}

extension View {
    func linearGradientBlur(isBlur: Bool = false, 
                            cornerRadius: CGFloat = 15) -> some View {
        self.modifier(BlurWithLinearGradient(isBlur: isBlur, 
                                             cornerRadius: cornerRadius))
    }
}

References:
https://developer.apple.com/documentation/swiftui/viewmodifier

The post Custom View Modifiers trong SwiftUI appeared first on Tomoshare.

01. Sử dụng if và switch như biểu thức

Đến mãi Swift 5.9, thì từ khoá if và switch chỉ được sử dụng như các câu lệnh!

Điều này có nghĩa là không thể gán trực tiếp kết quả của if hoặc switch vào một biến hoặc truyền nó như một tham số

Swift

let bullet = 
  isRoot && (count == 0 || !willExpand) ? ""
    : count == 0    ? "- "
    : maxDepth <= 0 ? ">" : "<"

Hiện tại ở Swift 5.9 này, if và switch có thể được sử dụng như một biểu thức!

Các biểu thức bậc ba loằng ngoằng nhìn rối mắt bây giờ có thể thay thế bằng điều kiện if giúp chúng ta có thể dễ đọc hơn nhiều:

Swift

let bullet = 
    if isRoot && (count == 0 || !willExpand) { "" }
    else if count == 0 { "- " }
    else if maxDepth <= 0 { ">" }
    else { "<" }

Không những thế, chúng ta có thể sử dụng chức năng mới này với if let hoặc guard let để unwrap biến optionals:

Swift

let attributedName =
        if let displayName, !displayName.isEmpty {
            AttributedString(markdown: displayName)
        } else {
            "Untitled"
        } 

02. Parameter Packs

Nếu bạn đã từng phải viết những đoạn code cần xử lý nhiều loại generic không xác định, và Swift không trợ cho việc đa dạng generics

Và cách duy nhất bạn có thể làm là triển khai tất cả các generics vào một function:

Swift

struct Request<Result> { ... }

struct RequestEvalutor {
  func evalute<Result>(_:) -> (Result)
  
  func evalute<R1, R2>(_:,_:) -> (R1, R2)
  
  func evalute<R1, R2, R3>(_:,_:,_:) -> (R1, R2, R3)
  
  func evalute<R1, R2, R3, R4>(_:,_:,_:,_:) -> (R1, R2, R3, R4)
  
  func evalute<R1, R2, R3, R4, R5>(_:,_:,_:,_:,_:) -> (R1, R2, R3, R4, R5)
}

let request = RequestEvalutor()
let result = request.evaluate(r1, r2, r3, r4, r5)

Mặc dù cách làm như trên có vẻ như không được tốt lắm nhưng các framework như SwiftUI và Combine cũng dựa vào cách làm như trên

Nhưng không may một điều là cách làm như trên sẽ gặp một nhược điểm lớn vì bạn không thể triển khai một số lượng đối số chồng chất vô hạn, vì vậy luôn có một giới hạn về số lượng đối số mà hàm của bạn có thể xử lý:

Swift

let result = request.evaluate(r1, r2, r3, r4, r5, r6, r7)
// This code will be error: Extra argrument in call

Một ví dụ thực tế là khi bạn cố gắng implement thật nhiều child view vào 1 VStack hoặc HStack thì SwiftUI chỉ có thể thêm được tối đa 10 child view.

Nhưng nếu bạn sử dụng Xcode 15 và thử thêm 11 child view thì một điều tuyệt vời là không còn warning giới hạn nào ở đây nữa. Có thể thêm bao nhiêu tuỳ thích !

Vì trong Swift 5.9 này có một tính năng mới gọi là Parameter Packs:

Sử dụng từ khoá each, để khai báo một Parameter Pack.

Và sau đó, thông qua từ khoá repeat, chúng ta có thể sử dụng Parameter Pack này, chẳng hạn để khai báo các đối số của hàm hoặc xác định một tuple type.

Swift 5.9:

Swift

func zip<each T>(_ input: repeat each T) -> (A, B, C, D) {
    return (repeat each input)
}

//Example
func pairUp<each T, each U>(firstPeople: repeat each T, 
                            secondPeople: repeat each U)
                           -> (repeat (first: each T, second: each U)) {
    return (repeat (each firstPeople, each secondPeople))
}

let result = pairUp(firstPeople: johnny, derek, 
                     secondPeople: kate, kevin)

Trước đây:

Swift

func zip<T₁, T₂,‥․, Tₙ>(_ i₁: T₁, _ i₂:T₂,‥․,_ iₙ: Tₙ) -> (T₁, T₂,‥․,Tₙ) {
    return (i₁, i₂,‥․, iₙ)
}

03. Macros

Ở Swift 5.9, ngôn ngữ swift đã cho ra mắt tính năng Macros, không kém gì các plugin có khả năng generating code

Dưới đây là đoạn code điển hình mà macro có thể tạo cho bạn: xác định một thuộc tính sau khi tính toán cho từng case trong một enum

Swift

enum Path {
  case relative(String)
  case absolute(String)
}

let absPaths = paths.filter { $0.isAbsolute }

extension Path {
  var isAbsolute:Bool {
    if case .absolute = self { true }
    else { false }
  }
}

extension Path {
  var isRelative:Bool {
    if case .relative = self { true }
    else { false }
  }
}

Ở Swift 5.9 bạn có thể xoá đoạn code trên và thay vào đó, bạn chỉ cần thêm @CaseDetection enum của bạn :

Swift

@CaseDetction
enum Path {
  case relative(String)
  case absolute(String)
}

let absPaths = paths.filter { $0.isAbsolute }

Tại thời điểm biên dịch, macro này sau đó sẽ được trình biên dịch Swift generate đoạn code trên giúp bạn:

Swift

@CaseDetction
enum Path {
  case relative(String)
  case absolute(String)
                               @CaseDection will generate this code 
** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
*                                                                  *
* var isAbsolute:Bool {                                            *
*  if case .absolute = self { true }                               *
*  else { false }                                                  *
* }                                                                *
*                                                                  *
* var isRelative:Bool {                                            *
*  if case .relative = self { true }                               *
*  else { false }                                                  *
* }                                                                *
*                                                                  *
** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 

}

let absPaths = paths.filter { $0.isAbsolute }

Và đó là 3 tính năng mới của Swift 5.9 mà mình muốn giới thiệu cho các bạn !!!

Hi vong các bạn sẽ apply các tính năng này vào dự án của mình 🙌

The post Có gì HOT trong Swift 5.9 🔥🔥 appeared first on Tomoshare.

Giới thiệu

Vào đầu năm 2019, Flutter phiên bản 1.0 đã được phát hành chính thức. Còn SwiftUI cũng được giới thiệu bởi Apple vào năm 2019, Apple nói rằng SwiftUI là tương lai của việc phát triển ứng dụng trên các nền tảng của Apple (vì nó là đa nền tảng, cho phép bạn phát triển ứng dụng iOS, MacOS, WatchOS và tvOS chỉ bằng một mã nguồn duy nhất).

Thay vì nói lí thuyết, ta sẽ thử viết 1 màn hình để play video. Xuyên suốt quá trình dựng UI, chúng ta sẽ cùng code và phân tích ưu điểm của mỗi framework nhé.

1/ UI tổng quan

Flutter trước nhé.

TopView class sẽ hiển thị tabs, ta sẽ tạo class HomeView. Ở HomeView, ta dùng widget CupertinoPageScaffold. Sẽ có navi, và 1 SingleChildScrollView để đảm bảo tính đầy đủ dữ liệu ở các thiết bị màn hình nhỏ.

TopView và HomeView kế thừa từ StatefulWidget.

Rồi, đến SwiftUI, cũng sẽ hiển thị tabs tương tự

HomeScreen struct sẽ hiển thị video player và danh sách video.

2/ UI về video player

Về phía Flutter, mỗi UI element được đặt trong 1 vị trí thích hợp bằng cách set MainAxisAlignment của Column widget và Row widget. CupertinoSlider widget sẽ đảm nhận việc hiển thị thanh slider. 

Đối với SwiftUI, BigMovieCellOverlay struct sẽ đảm nhận việc hiển thị player thông qua VStack và HStack. Rectangle được bọc trong ZStack sẽ đóng vai trò Slider progress của video. 

3/ UI về List

a/ Scroll ngang

Về phía Flutter, Widget ListView trong Broadcasting được set Axis.horizontal, được xếp chồng bằng cách sử dụng Stack. Mỗi thumbnail được triển khai trong lớp BigPicCell được mô tả bên dưới.

Về phía SwiftUI, mỗi thumbnail được triển khai ở BigPicCell struct.

b/ Decoration

Flutter, League class gần giống với Broadcasting class. Mỗi thumbnail được triển khai ở class bên dưới.

BigPicCell class sẽ đảm nhận việc hiển thị thumbnails và thông tin, được bọc bởi 1 Column widget

Thumbnail dùng BoxDecoration widget tạo cái viền vàng xung quanh.

Tương tự thì SwiftUI cũng có League và BigPicCell struct sẽ đảm nhận việc hiển thị thumbnails và thông tin.

ZStack set border(Color.yellow, width: isWatchingId == id ? 2 : 0) để hiển thị viền vàng xung quanh. Khi tap vào, video sẽ được play và Text(“ Live”) sẽ được hiển thị ở thumbnail.

Group {isRecord ? nil : LiveLabel()}
.padding(EdgeInsets.init(top: 15.0, leading: 15.0, bottom: 0.0, trailing: 0.0)).

4/Summary:

Đã trải qua quãng thời gian làm việc khá lâu với SwiftUI, trước đó là UIKit và Interfacebuilder của iOS. Bằng so sánh chủ quan của mình, tôi đánh giá cao về sự hiện đại trong cách Flutter framework hỗ trợ chúng ta dựng UI.

Còn về phía bạn, hãy chia sẽ cảm nghĩ của mình ở phần bình luận nhé.

The post SwiftUI vs Flutter : Cách xây dựng UI appeared first on Tomoshare.

1. Cài đặt KIF

Điều đầu tiên, để sử dụng được KIF thì chúng ta cần tạo target cho việc test của chúng ta. Ở đây, KIF không sử dụng iOS UI Testing Bundle mà sử dụng iOS Unit Testing Bundle.Nên trong trường hợp bạn nào đã có unit test ở trong project thì cần chọn 1 trong 2 target để chạy test.

Chọn dự án của bạn trong Xcode và nhấp vào “Add Target” ở góc dưới bên trái của trình soạn thảo. Chọn iOS -> Test -> iOS Unit Testing Bundle. Hãy cung cấp cho nó một tên như “Acceptance Tests”, “UI Tests”, hoặc cái gì đó cho thấy ý định của quá trình test của bạn.

Acceptance Test Target của bạn được tạo và sẽ có thêm 1 file đi cùng với nó, ex: “Acceptance_Tests.swift” khớp với tên target. Hãy xoá nó đi.

1.1 Cài đặt với Pod

Khi Test Target của bạn đã được thiết lập, thêm đoạn mã dưới đây vào Podfile của bạn. Sử dụng đúng target cần cài đặt KIF

target 'Your Apps' do
  ...
end

target 'Acceptance Tests' do
  pod 'KIF', :configurations => ['Debug']
end

Sau khi chạy pod install thì công việc tiếp theo là làm theo Cấu hình Test Target ở bên dưới để cấu hình thích hợp cho nó

1.2 Cài với static library

Để cài đặt KIF, bạn cần liên kết static library libKIF trực tiếp vào ứng dụng của bạn. Tải xuống nguồn từ KIF và làm theo hướng dẫn dưới đây.

Chúng tôi sẽ sử dụng một dự án đơn giản làm ví dụ và bạn có thể tìm thấy nó trong Documentation/Examples/Testable Swift trong reposity của KIF.

Thêm KIF vào dự án

Bước đầu tiên là thêm dự án KIF vào thư mục con của ./Frameworks/KIF của dự án. Nếu dự án của bạn sử dụng Git để kiểm soát phiên bản, bạn có thể sử dụng submodules để cập nhật trong tương lai dễ dàng hơn:

cd /path/to/MyApplicationSource
mkdir Frameworks
git submodule add https://github.com/kif-framework/KIF.git Frameworks/KIF

Thêm KIF vào Workspace

Hãy để dự án của bạn biết về KIF bằng cách thêm dự án KIF vào không gian làm việc cùng với dự án chính của bạn. Tìm KIF.xcodeproj trong Finder và kéo nó vào Project Navigator (⌘1).

1.3 Cấu hình Test Target

Bây giờ, bạn đã có test target cho việc viết UI Test của bạn. Tiếp theo là thêm các thư viện cần thiết cho dự án, chúng ta chọn trong Project Navigator và vào Test Target mà bạn đã tạo ra, chọn tab “Build Phases”. Trong phần “Link Binary With Libraries”, hãy nhấn nút “+”. Trong bảng xuất hiện, chọn “libKIF.a” và nhấp vào “Add”. Lặp lại quá trình cho CoreGraphics.framework và QuartzCore.framework . KIF yêu cầu IOKit.framework, nhưng nó không nằm trong các khuôn khổ hệ thống. Để liên kết đến nó, thêm “-framework IOKit” vào “Other Linker Flags”.

KIF được viết bằng Objective C nên các bạn cần thêm -ObjC vào “Other Linker Flags” trong Build Settings của Test Target

Ở phần này mình chỉ giới thiệu về việc thêm KIF framework vào dự án của chúng. Ở phần sau mình sẽ demo về KIF framework

The post Automation Test for iOS (part 1) appeared first on Tomoshare.