Skip to content
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Fx Studio
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Written by chuotfx on May 6, 2021

Hello Multiplatform App – SwiftUI Notes #22

SwiftUI . Tutorials

Contents

  • Chuẩn bị
  • 1. Create a new project
  • 2. Project Struct
    • 2.1. Shared
    • 2.2. iOS & MacOS
    • 2.3. File Target
  • 3. Build Project
    • 3.1. Preview
    • 3.2. Run
    • 3.3. Config View
  • 4. Add more platform
    • 4.1. New
    • 4.2. Config View
  • Tạm kết

Chào bạn đến với Fx Studio và series SwiftUI Notes của Fx Studio. Đây sẽ là bài viết trong phần mới nhất của Apple & SwiftUI. Đó là Multiplatform App với SwiftUI App. Nó không như Mac Catalyst, project của bạn sẽ chạy trực tiếp trên các nền tảng khác nhau của Apple. Và sẽ có rất nhiều thứ mà bạn cần cập nhật nữa theo phần mới này.

Phần này cũng khá là liên quan tới phần thứ 4 – Apple Ecosystem. Bạn nên đọc qua nó để có thể hiểu được nhiều hơn. Còn nếu mọi thứ đã ổn rồi thì …

Bắt đầu thôi!

Chuẩn bị

Khi bạn sử dụng Xcode 12 để tạo mới một Project, bạn sẽ thấy một phần mới được giới thiệu trong Xcode 12. Đó là Multiplatform App Template. Do đó, bạn cũng cần phải chuẩn bị các version OS & tool theo cập nhật mới nhất.

    • Xcode 12
    • SwiftUI 2.0

Còn về kiến thức thì bạn cần nắm các kiến thức sau đây:

    • SwiftUI App – Life Cycle
    • SwiftUI – The Apple Ecosystem

1. Create a new project

Chúng ta sẽ tìm hiểu về Multiplatform App thông qua việc thực hiện theo demo từng bước. Mình sẽ cố gắng trình bày các điểm lý thuyết bổ sung để giúp bạn hiểu rõ hơn về nó.

Để bắt đầu, bạn hãy mở Xcode và New Project. Bạn hãy chú ý tới phần Multiplatform nha.

Multiplatform App Template

Bạn nhấn Next để tiếp tục, sau đó điền thông tin cho project của bạn.

(Thông tin ban đầu cho Project cũng khá là sơ sài.)

Như vậy, bạn đã hoàn thành việc tạo mới một project theo Multiplatform App rồi đó. Chúng ta sẽ đi vào tìm hiểu cấu trúc của project có những gì nào.

2. Project Struct

Tiếp theo, chúng ta sẽ xem từng phần trong Project có những gì. Hãy bắt đầu bằng việc quan sát phần Navigation của Xcode để xem cấu trúc files và thư mục.

Multiplaform App Struct

Ta có 3 phần rất rõ ràng như sau:

    • Shared
    • iOS
    • macOS

Vì 2 nền tảng iOS & MacOS là lớn nhất nên nó sẽ ưu tiên được tạo ra đầu tiên. Thêm Các nền tảng khác thì bạn sẽ phải tự thêm vào. Chúng ta sẽ tìm hiểu nó sau nha. Giờ đi vào chi tiết từng cấu trúc một của project mới này.

2.1. Shared

Đây là nơi bạn sẽ làm việc rất nhiều. Là nới sẽ lưu trữ các thứ chung như sau:

    • Giao diện ứng dụng
    • Models
    • Service
    • …

Nó giúp bạn tiết kiệm code và tránh việc tạo các thư viện thêm như Swift Package. Bạn sẽ kết hợp thế mạnh của nhiều thứ:

  • SwiftUI giúp 1 lần code cho nhiều nền tảng
  • Sử dụng chung một logic và các models

Tiếp tục vào chi tiết từng file ban đầu có trong phần Shared này. Bạn sẽ thấy nó chính là SwiftUI App Life Cycle.

  • File App là nơi bắt đầu chạy của ứng dụng. Với các Scene được tạo ra. Nó sẽ quản lý các Window & State của ứng dụng …
  • ContentView là nơi hiển thị view đầu tiên của bạn. Nếu bạn không thích nó thì hãy xoá đi cũng không sao.
  • Assets là nơi chứa tài nguyên, ảnh, font, color …v..v..

2.2. iOS & MacOS

Hai thư mục này tuy khác nhưng về ý nghĩa thì giống nhau. Bạn sẽ có:

  • iOS : chứa các files cho riêng iOS
  • MacOS : chứa các files cho riêng MacOS

Đôi lúc bạn cũng phải cần thiết kế chúng khác nhau một ít giữa các nền tảng.

2.3. File Target

Nếu bạn để ý kĩ thì chỉ có 1 file ContentView.swift cho cả 2 nền tảng iOS và MacOS. Và bạn muốn tạo một file mới và đảm bảo file đó hoạt động tốt cho 2 nền tảng thì bạn cần chú ý tới Target của file.

(Nếu như bạn thêm một nền tảng nữa thì cũng phải chú ý tới Target đó.)

3. Build Project

3.1. Preview

Lợi thế của SwiftUI đó chính là Preview, bạn không cần phải run project chi cho mệt mà vẫn có thể test app một cách xịn sò. Hiện tại, chúng ta chưa cần code gì hết. Chúng ta sẽ thử xem nó sẽ hiển thị ra sao trên iOS và MacOS trước.

Đầu tiên, bạn chọn lại scheme build của project là iOS.

Sau đó, bạn bấm Resume ở phần Canvas của Xcode. Điều kì diệu sẽ hiện ra.

multiplatform app - ios

Bạn làm tương tự cho MacOS nhoé. Và nó sẽ trông như thế này.

Multiplatform App - MacOS

Nhìn khá là xấu xí quá đi mà.

3.2. Run

Sau khi, bạn đã Preview thành công và không có lỗi nào xuất hiện. Thì hãy build project lên iOS và MacOS nha. Công việc vẫn tương tự như Preview, chọn Schema và build thôi.

  • iOS Simulator

  • MacOS

Cái nhìn đầu tiên là khá khó chịu phải không nào. Nhất là khi chạy trên MacOS lại xuất hiện một window nhỏ xí, vừa đủ chứa cái chữ mà thôi. Giờ ta sẽ config chúng nó cho đẹp hơn mới được.

3.3. Config View

Bắt đầu, bạn mở file ContentView và tiến thành thay đổi một ít code như sau.

struct ContentView: View {
    var body: some View {
        #if os(macOS)
        Text("Hello MacOS!")
            .font(.largeTitle)
            .frame(width: 500.0, height: 300.0)
            .padding()
        #else
        Text("Hello iOS!")
            .font(.title)
            .padding()
        #endif
        
    }
}

Trong đó:

  • if os(...) dùng để kiểm tra xem nền tảng chúng ta sử dụng là gì. SwiftUI đã giúp bạn làm việc này khá là đơn giản rồi đó.
  • Tại mỗi điều kiện khác nhau, ta thực hiện việc config khác nhau cho View

Bạn nãy build lại ứng dụng trên iOS và MacOS để kiểm tra chúng hoạt động như thế nào.

  • iOS Simulator

  • MacOS

Lúc này, ứng dụng trên macOS đã đẹp rồi. Bạn có thể tuỳ biến frame của ứng dụng cho phù hợp.

4. Add more platform

4.1. New

Như đã nói ở trên, chúng ta sẽ thử tiếp xem SwiftUI với template mới này & nhiều nền tảng khác sẽ như thế nào. Ta đã có iOS & MacOS (cho mặc định khi tạo project). Do đó, ta sẽ tạo thêm một platform nữa, đó là watchOS.

Bắt đầu, tại file project và phần Target, bạn nhấn nút (+) để tạo mới một target.

Bạn chọn tạo thêm một Watch App nha. Sau đó, bạn sẽ điền các thông tin vào cho Target mới này.

Bạn chú ý chọn đúng các thông tin để chúng đồng bộ giữa các targets trong cùng một project

    • SwiftUI
    • SwiftUI App Life Cycle
    • Project

Các file mới sẽ được thêm vào project và chúng trông như thế này.

Multiplatform App - WatchOS

Khá là nhiều files, tuy nhiên bạn không cần quan tâm nhiều về nó. Sang phần chính của chúng ta thôi.

4.2. Config View

Kết hợp kiến thức mới học ở phần trên. Chúng ta sẽ tiết kiệm việc coding lại bằng cách dùng chung file từ phần Shared. Do đó, việc đầu tiên của bạn cần làm là mạnh tay xoá đi file ContentView.swift ở phần WatchOS App.

Tiếp theo, bạn truy cập lại file ContentView.swift ở phần Shared, mở phần File inspector và tích thêm vào target mới tạo.

Tiếp theo nữa, bạn sẽ thay đổi code một chút tại file ContentView để có thể thấy được sự khác nhau giữa các nền tảng. Code ví dụ như sau.

struct ContentView: View {
    var body: some View {
        #if os(macOS)
        Text("Hello MacOS!")
            .font(.largeTitle)
            .frame(width: 500.0, height: 300.0)
            .padding()
        #elseif os(iOS)
        Text("Hello iOS!")
            .font(.title)
            .padding()
        #else
        Text("Hello WatchOS!")
            .font(.title)
            .padding()
        #endif
    }
}

Chỉ là thêm if else thôi nha!

Bạn cần phải hiển thị được Preview cho WatchOS  là okay và công việc này cũng khá đơn giản. Chọn lại target thôi.

Cuối cùng, bạn hãy bấm lại Resume tại phần Canvas và xem kết quả nhoé!

Multiplatform App - Watch App

Đã xuất hiện dòng chữ Hello WatchOS! xịn sò rồi. Nếu bạn hiển thị được như vậy thì chúc mừng bạn đã thành công bước đầu trong việc tạo một project với Multiplatform App với SwiftUI.

Tạm kết

  • Tạo project với Template Multiplatform App với SwiftUI & SwiftUI App
  • Tìm hiểu cấu trúc project mới
  • Config cho nhiều nền tảng
  • Cách tuỳ chọn hiển thị với Target cho files
  • Build app cho nhiều nền tảng

 

Okay! Tới đây, mình xin kết thúc bài viết về Multiplatform App với SwiftUI. Và nếu có gì thắc mắc hay góp ý cho mình thì bạn có thể để lại bình luận hoặc gởi email theo trang Contact.

  • Bạn có thể checkout code tại đây.
  • Bài viết tiếp theo tại đây.

Cảm ơn bạn đã đọc bài viết này!

FacebookTweetPinYummlyLinkedInPrintEmailShares12

Related Posts:

  • Make color App Flutter
    Make color App Flutter
  • MacOS App - SwiftUI Notes #20
    MacOS App - SwiftUI Notes #20
  • Multiplatform App : Design Views - SwiftUI Notes #23
    Multiplatform App : Design Views - SwiftUI Notes #23
  • tvOS App - SwiftUI Notes #21
    tvOS App - SwiftUI Notes #21
Tags: SwiftUI, SwiftUI Notes
Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Donate – Buy me a coffee!

Fan page

Fx Studio

Tags

Actor Advanced Swift api AppDistribution Asynchronous autolayout basic ios tutorial blog callback ci/cd closure collectionview combine concurrency CoreData Core Location crashlytics darkmode dart dart basic dart tour Declarative decoding delegate deploy fabric fastlane firebase flavor flutter GCD iOS mapview MVVM optional protocol rxswift Swift Swift 5.5 SwiftUI SwiftUI Notes tableview testing TravisCI unittest

Recent Posts

  • Raw String trong 10 phút
  • Dispatch Semaphore trong 10 phút
  • Tổng kết năm 2022
  • KeyPath trong 10 phút – Swift
  • Make color App Flutter
  • Ứng dụng Flutter đầu tiên
  • Cài đặt Flutter SDK & Hello world
  • Coding Conventions – người hùng hay kẻ tội đồ?
  • Giới thiệu về Flutter
  • Tìm hiểu về ngôn ngữ lập trình Dart

You may also like:

  • SwiftUI - Phần 2 : Cơ bản về ứng dụng SwiftUI App
    SwiftUI - Phần 2 : Cơ bản về ứng dụng SwiftUI App
  • SwiftUI - Phần 5 : Multiplatform App
    SwiftUI - Phần 5 : Multiplatform App
  • RxSwift vs. UIKit - Hello ViewController
    RxSwift vs. UIKit - Hello ViewController
  • Multiplatform App : Design Views - SwiftUI Notes #23
    Multiplatform App : Design Views - SwiftUI Notes #23
  • tvOS App - SwiftUI Notes #21
    tvOS App - SwiftUI Notes #21

Archives

  • February 2023 (1)
  • January 2023 (2)
  • November 2022 (2)
  • October 2022 (1)
  • September 2022 (5)
  • August 2022 (6)
  • July 2022 (7)
  • June 2022 (8)
  • May 2022 (5)
  • April 2022 (1)
  • March 2022 (3)
  • February 2022 (5)
  • January 2022 (4)
  • December 2021 (6)
  • November 2021 (8)
  • October 2021 (8)
  • September 2021 (8)
  • August 2021 (8)
  • July 2021 (9)
  • June 2021 (8)
  • May 2021 (7)
  • April 2021 (11)
  • March 2021 (12)
  • February 2021 (3)
  • January 2021 (3)
  • December 2020 (3)
  • November 2020 (9)
  • October 2020 (7)
  • September 2020 (17)
  • August 2020 (1)
  • July 2020 (3)
  • June 2020 (1)
  • May 2020 (2)
  • April 2020 (3)
  • March 2020 (20)
  • February 2020 (5)
  • January 2020 (2)
  • December 2019 (12)
  • November 2019 (12)
  • October 2019 (19)
  • September 2019 (17)
  • August 2019 (10)

About me

Education, Mini Game, Digital Art & Life of coders
Contacts:
contacts@fxstudio.dev

Fx Studio

  • Home
  • About me
  • Contact us
  • Mail
  • Privacy Policy
  • Donate
  • Sitemap

Categories

  • Art (1)
  • Blog (22)
  • Code (4)
  • Combine (22)
  • Flutter & Dart (24)
  • iOS & Swift (86)
  • RxSwift (37)
  • SwiftUI (76)
  • Tutorials (70)

Newsletter

Stay up to date with our latest news and posts.
Loading

    Copyright © 2023 Fx Studio - All rights reserved.

    Share this ArticleLike this article? Email it to a friend!

    Email sent!