How to build VisionOS application?

Creating Your First VisionOS App with SwiftUI

If VisionOS is new to you, begin by creating a fresh project in Xcode. This is like the starting point for understanding what VisionOS can do and how things work there. When you make an app for VisionOS, using something called SwiftUI is a smart move. It lets you use all the cool stuff that VisionOS offers. While there are other tools you can use (they're called UIKit) to build some parts of your app, you'll need SwiftUI for the special things that make VisionOS different. It's like having a special key that unlocks all the unique features and experiences of VisionOS.
In SwiftUI apps, you arrange what you want to show on the screen using something called "scenes." A scene is like a frame that holds all the things you want people to see and interact with on the screen. It's not just about putting things on the screen – scenes also decide how things should look when they're displayed.
Now, when we're talking about VisionOS, things get even more exciting. You can put both 2D and 3D views together in the same scene. It's like combining regular pictures with pictures that pop out of the screen. And the cool part? You can show these scenes in a window, or you can make them part of the environment around the person using the app. It's like bringing your creations to life in the real world!

Prerequisites

Xcode 15 beta 4: This version of Xcode is essential, as it empowers you to build, test, and share apps across Apple's platforms. It supports various SDKs for iOS 17, iPadOS 17, tvOS 17, watchOS 10, macOS 14, and the VisionOS 1 platform. As of writing this blog, I'm utilizing Xcode 15 beta 4 for illustration.

VDine: A Food Delivery App Powered by Spatial Computing

VDine is not your typical food delivery app. It's a revolutionary vision that blends technology with gastronomy to redefine how we order and enjoy meals. At its core, VDine utilizes spatial computing, allowing users to see their meal choices in 3D, virtually explore restaurant kitchens, and interact with dishes as if they were right in front of them. With VDine, ordering becomes a seamless process, complete with real-time delivery tracking and an augmented reality dining experience. Gamification and partnerships with local restaurants enhance variety and engagement, while user feedback and data analytics ensure personalized recommendations. VDine is where the future of food delivery meets innovation, making each meal an extraordinary experience.

Let's set up first VisionOS app project in Xcode, step by step:

Create a New Project: Open Xcode and go to the "File" menu. Choose "New" and then "Project."
Choose the Right Template: In the template options, look for the "VisionOS" section. From there, pick the "App" template.
Name Your Project: When Xcode prompts you, give your project a name. You can also pick other options that suit your project.
Set Up Your Initial Scene:
- When you're making a new VisionOS app, you can decide how your first scene will look.
- If you want your initial scene to show mostly regular stuff (2D content), go with "Window" as your initial scene type.
- But if you're aiming for a scene with things popping out of the screen (3D content), go for "Volume.”
- And here's something amazing: you can also create an "immersive scene" that puts your stuff right where the user is, like in the real world.

And that's it! You've now kickstarted your Xcode project for your VisionOS app. The adventure begins as you design scenes that will captivate users and make your app truly stand out.

Let's dive into modifying your existing window and building your initial interface using SwiftUI:


@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .background(Color.black.opacity(0.8))  // Adds a semi-transparent black background
        }

        // Create an immersive scene
        ImmersiveSpace(id: "Immersive") {
            ImmersiveView()
        }
    }
}

In this code, you're enhancing your app's interface in a few steps:

WindowGroup`: This defines the main window for your app. You're setting up the initial content view of the window to be `ContentView()`.
`.background`: This is a modifier that lets you change the background of your content. In this case, it adds a semi-transparent black background (with 80% opacity) to the `ContentView`.
. `ImmersiveSpace`: This is used to create an immersive scene that places your content in the user's surroundings. You're specifying an ID for the immersive space and including an `ImmersiveView()` within it.

With these modifications, you're customizing your app's window and creating an immersive experience that users will enjoy. Your VisionOS app is taking shape, combining design and interactivity seamlessly.

‍Presenting windows and spaces

Think of an app's scenes as different stages where you can do stuff. These stages can look different – some might fill a window, others could be in a tab or even cover the whole screen. Some scenes can even put things all around you. How they look depends on what kind they are, what device you're using, and the situation you're in.
When you open your app, SwiftUI searches for the first special thing you set up, like a WindowGroup, Window, or DocumentGroup. Then, it sets up a scene that matches. This scene might fill a new window or take up the whole screen, depending on whether you're on a phone, computer, or something else.

Build and run your app

First, build and run your app in the Simulator. This is where the magic happens – you'll see exactly how your app looks and works.
Inside the VisionOS Simulator, your app gets a special virtual background. It adds a unique touch to your app's content, making it stand out.
Now, use your keyboard, mouse, or trackpad to explore and interact with your app. Click on things, move around – see how your app reacts.
If you want to change the window's position, it's easy! Just tap and drag the window bar under your app's content. Think of it as moving things around in a virtual space.
To resize the window, move your cursor to a corner. And to close the window, hover over the circle next to the window bar.
So, dive into the Simulator, have fun experimenting, and watch your app come to life in this cool virtual world. It's your opportunity to see your ideas in action!

Visualizing Excellence: A Glimpse of Our Final App's Stunning User Interface

VDine: Let's Explore Our Innovative Dining App


import SwiftUI

@main
struct VDineApp: App {
        @State private var model = ViewModel()

        var body: some Scene {
            WindowGroup {
                TabView {
                    HomeContainer()
                        .tabItem {
                            Label("Home", systemImage: "house.circle.fill")
                        }
                    CustomImmersiveSpace()
                        .tabItem {
                            Label("ImmersiveSpace", systemImage: "microbe.circle.fill")
                    }
                    SphereView()
                        .tabItem {
                            Label("SphereView", systemImage: "paperplane")
                    }                    
                }
                .environment(model)
            }
            .windowStyle(.plain)
        }
}

In this SwiftUI code snippet, we encounter an visionOS app called "VDine" designed to provide immersive dining experiences. Let's break down this code and understand its key components.
The code starts with the import statement, bringing in the SwiftUI framework, which is Apple's declarative framework for building user interfaces.
The @main attribute indicates that the VDineApp struct serves as the entry point for the application.
Inside the VDineApp struct, we have the declaration of a State property called 'model,' initialized with a ViewModel. This 'model' is likely used to manage the application's data and state.
The body property defines the main user interface of the application. It consists of a TabView, which allows users to navigate between different sections of the app.
The first tab, "Home," is associated with the HomeContainer view.
The second tab, "ImmersiveSpace," leads to the CustomImmersiveSpace view.
Each tab is labeled with an icon using the Label view, making the app's interface more user-friendly.
The 'environment' modifier is used to pass the 'model' to the TabView, allowing the views within the tabs to access and interact with the application's data.
The WindowGroup struct defines two windows for the application:
The first WindowGroup serves as the main window for the app, displaying the TabView. It uses the '.plain' window style.

‍

Certainly! The `HomeContainer` struct is a crucial component of the VDineApp, a SwiftUI-based application. In this context, the `HomeContainer` represents the "Home" tab of the app, which is responsible for displaying a list of menu items and the details associated with the selected item.


struct HomeContainer: View {
    private let assetClasses = SideMenuItem.listAll
    @State private var selectedSideMenu: SideMenuItem? = SideMenuItem.delivery

    var body: some View {
        NavigationSplitView {
            List(assetClasses, selection: $selectedSideMenu) { sideMenu in
                NavigationLink(value: sideMenu) {
                    Label(sideMenu.title, systemImage: sideMenu.icon)
                                        .foregroundStyle(.primary)
                }
            }
            .navigationBarTitle("VDine")
            .navigationSplitViewColumnWidth(min: 300, ideal: 290, max: 300)
        } detail: {
            if(selectedSideMenu == .delivery) {
                DeliveryView()
            } else if(selectedSideMenu == .diningOut) {
                DiningOutView()
            } else if(selectedSideMenu == .nightLife) {
                ExploreMealView()
                    .environmentObject(OpenAIConnector())
            }
        }
    }
}

At its core, `HomeContainer` is a SwiftUI view, which means it defines both the visual layout and the behavior of this particular tab. Inside this struct, there are several key components that work together to create the user interface and enable user interaction.
First, there's a private constant called `assetClasses`. This constant holds an array of `SideMenuItem` instances, which presumably represent various menu categories or options. These options will be displayed as a list for users to choose from.
Next, we have a `@State` property named `selectedSideMenu`. This property is responsible for keeping track of the user's selection within the list of menu items. It utilizes the `@State` property wrapper, indicating that it's mutable and capable of updating the UI when its value changes. Initially, `selectedSideMenu` is set to `SideMenuItem.delivery`, implying that "Delivery" is the default selected menu item.
The core of the `HomeContainer` view is defined within the `body` property. SwiftUI uses this property to determine what to display on the screen. In this case, the `body` property presents a `NavigationSplitView`. This view is responsible for creating a split view interface where there's a list on one side and detailed content on the other.
The left side of the split view contains a list of `assetClasses`, which are the menu items from the `assetClasses` array. Users can select an item from this list, and the `selectedSideMenu` state variable is updated accordingly.
Finally, the right side of the split view shows different content based on the selected menu item. Depending on what the user chooses, `HomeContainer` conditionally displays either a `DeliveryView`, a `DiningOutView`, or a `ExploreMealView`. Each of these views likely contains specific information and functionality related to the chosen menu category.
In summary, `HomeContainer` is a central component of the VDineApp's "Home" tab. It allows users to select from a list of menu items and dynamically displays relevant content based on their selection, demonstrating the power of SwiftUI for building dynamic and interactive user interfaces.

Sneak Peek: The Seamless Delivery Experience in Action

A Deep Dive into the Technical Brilliance of DeliveryView


struct DeliveryView: View {   
    var body: some View {
        ScrollView {
            InspirationView()
            TopBrandsView()
            DeliveryRestaurantView()
        }
        .background(Color.white)
    }
}

The body property is where the magic happens. This computed property defines the entire user interface of the "Delivery" tab.
‍ScrollView for Scrolling Bliss: The outermost element, a ScrollView, encapsulates the other views. It enables users to scroll through content seamlessly, even if it exceeds the screen's size. This ensures that all content remains accessible, no matter how extensive it is.
‍Combining Components: Within the ScrollView, three essential components are integrated: InspirationView(), TopBrandsView(), and DeliveryRestaurantView(). These views collectively create a rich and engaging user experience.
‍InspirationView(): This view is responsible for showcasing a list of horizontal scrollable meal items. Users can swipe left or right to explore various food options. It's like flipping through a menu with the flick of a finger.
TopBrandsView(): Here, you'll encounter a list of horizontal scrollable top brands. These are displayed in a sleek manner, making it easy to navigate and discover popular food establishments. It's akin to flipping through a gallery of culinary excellence.
‍DeliveryRestaurantView(): The pièce de résistance, this view presents a grid of meal items, each accompanied by a meal info card. Users can explore different dishes and access essential details like ingredients and pricing. It's like having an interactive menu right on your device.

Creating Multiple Windows in VisionOS SwiftUI

Discover how to unveil and hide distinct areas within your app. SwiftUI in VisionOS empowers you to do just that, providing a dynamic user experience. In this guide, we'll walk you through the process of creating an app with two distinct windows, all with the magic of SwiftUI.
‍Defining the AppTo get started, let's define our app using the `@main` attribute. Our `ExampleApp` struct will house the essential elements for our multi-window experience.
‍Creating Window.
‍In VisionOS, `WindowGroup` serves as our ticket to crafting windows. Our app features two windows: the primary window and a secondary window, identified as "SecondWindow". These windows are like different scenes where users interact with your app's content.


@main
struct ExampleApp: App {
    var body: some Scene {
        WindowGroup {
            PrimaryWindow()
        }
        
        WindowGroup (id: "SecondWindow"){
            SecondWindow()
        }
    }
}

‍PrimaryWindow: Exploring a New Realm
Our `PrimaryWindow` view is the anchor of the primary window. It showcases a button allowing users to venture into the second window. The `openWindow` environment variable enables this transition, providing a seamless experience for users to explore further.


struct PrimaryWindow: View {
    @Environment(\.openWindow) private var openWindow

    var body: some View {
        NavigationSplitView {
            // Sidebar content
            VStack {
                Button(action: {
                    openWindow(id: "SecondWindow")
                }) {
                    Text("Show Second Window")
                        .font(.headline)
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
                .buttonStyle(.plain)
            }
            .frame(maxWidth: .infinity, alignment: .top)
            .navigationTitle("Sidebar")
        } detail: {
            // Detail content
            Text("Detail")
        }
    }
}

‍SecondWindow: Exploring Another Dimension
The `SecondWindow` view, residing in the secondary window, offers a reverse journey. A dismiss button lets users return to the primary window. The `dismissWindow` environment variable facilitates this seamless transition, ensuring a cohesive user experience.


struct SecondWindow: View {
    @Environment(\.dismissWindow) private var dismissWindow

    var body: some View {
        NavigationSplitView {
            // Sidebar content
            VStack {
                Button(action: {
                    dismissWindow(id: "SecondWindow")
                }) {
                    Text("Dismiss Second Window")
                        .font(.headline)
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
                .buttonStyle(.plain)
            }
            .frame(maxWidth: .infinity, alignment: .top)
            .navigationTitle("Sidebar")
        } detail: {
            // Detail content
            Text("Detail")
        }
    }
}

Putting it All Together
With these views in place, our `ExampleApp` leverages the power of SwiftUI to bring multiple windows to life. Users can switch between windows effortlessly, enjoying a versatile and engaging app experience.
‍Positioning and sizing windows
In VisionOS, you can easily adjust the position and size of windows. Your app can also control how windows appear initially using scene modifiers. This includes specifying how the system sets minimum and maximum window sizes.
In VisionOS, when your app opens a window from a specific scene for the first time, it usually appears centered on the screen. For scenes that allow multiple windows, the system slightly shifts extra windows to prevent overlap.
You have the power to change where the first window appears by using the defaultPosition(_:) scene modifier. This lets you determine a different starting spot on the screen, like asking for a new window to appear at the bottom right corner of the screen:


var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .defaultPosition(.bottomTrailing)
    }


func defaultPosition(_ position: UnitPoint) -> some Scene

The defaultPosition(_:) function is a handy tool that lets you set a preferred starting position for a window. By calling this function, you can indicate where you'd like the window to appear on the screen by default.

Position

A "UnitPoint" serves as a coordinate that instructs where a newly opened window should be positioned in relation to the screen boundaries.


WindowGroup {
    ContentView()
}
.defaultPosition(UnitPoint(x: 0.25, y: 0.5))

Specify initial window size
To define the initial size of a window that the system generates based on a Scene declaration, you can utilize default size scene modifiers, such as defaultSize(width:height:). This allows you to specify the dimensions you desire for a new window.


WindowGroup {
        ContentView()
}
.defaultSize(CGSize(width: 600, height: 400))

Adding 3D content to your app

In VisionOS, combine RealityKit and SwiftUI to effortlessly blend 2D and 3D content in your app. You can easily use existing USDZ assets or create scenes in Reality Composer Pro. These scenes can have animations, physics, lighting, sounds, and special behaviors for your content.
‍Using USDZ to Display 3D Models
Think of a 3D model like an image, but with a 3D twist. It's a convenient way to bring in and show 3D content. However, there's a cool difference: 3D models load in a special way. Unlike images that load all at once, 3D models load asynchronously, meaning they load in the background, making your app smoother and more responsive.
Incorporating a USDZ file to present a 3D model is straightforward. You can seamlessly integrate your USDZ file within your app. For instance, let's consider a USDZ file named "Birthday_Cake." Here's how to showcase it using the `WindowGroup`:


WindowGroup("3D WINDOW GROUP", id: "3d_window_module") {
    DisplayEmbedded3DModel()
}

Inside the `DisplayEmbedded3DModel`, the code is structured like this:


VStack {
    Model3D(named: "BurgerKing") { nikePegasus in
       nikePegasus
            .resizable()
            .scaledToFit()
            .scaleEffect(0.30)
            .rotation3DEffect(rotationAngle, axis: rotationAxis)
            .onAppear {
                withAnimation(Animation.easeInOut(duration: 8).repeatForever(autoreverses: true)) {
                    rotateXY.toggle()
                }
            }
    } placeholder: {
        ProgressView()
    }
}

private var rotationAngle: Angle {
    return model.active3DModelIndex == 0 ? .degrees(rotateXY ? 720 : 0) : .degrees(rotateXY ? 720 : 150)
}

private var rotationAxis: (x: CGFloat, y: CGFloat, z: CGFloat) {
    return model.active3DModelIndex == 0 ? (x: 5, y: 10, z: rotateXY ? -15 : 15) :  (x: 10 ,y: 8, z: 0)
}

Within the `DisplayEmbedded3DModel` section, a `VStack` arrangement showcases the 3D model using the `Model3D` component. This code ensures that your USDZ 3D model is seamlessly integrated and displayed within the app's window. The `rotationAngle` and `rotationAxis` properties control dynamic rotations for an enhanced user experience.
To display the 3d_window_module,' simply execute the following line of code: openWindow(id: "3d_window_module"). This action will trigger the presentation of a captivating 3D model featuring a mouthwatering burger. As depicted in the accompanying image, the code seamlessly embeds the '3d_window_module' within the 'news window group,' showcasing 3D content.

Experience 3D with RealityView

In this scenario, we're using RealityView to showcase 3D content. RealityView is a special SwiftUI view that acts as a container for your RealityKit creations. Plus, you can make changes to your content using the familiar techniques you know from SwiftUI.
Let's dive in with an example: Imagine you want to display a 3D sphere. With RealityView, it's easy peasy. Check out the code below. We've got a simple SwiftUI view called `SphereView` that's using RealityView. Inside the view's code, we're setting up a 3D sphere using RealityKit and putting it right into the view:


struct SphereView: View {
    var body: some View {
        RealityView { content in
            let model = ModelEntity(
                mesh: .generateSphere(radius: 0.1),
                materials: [SimpleMaterial(color: .white, isMetallic: true)])
            content.add(model)
        }
    }
}

So, with RealityView, you're diving into a world where your 3D content becomes part of your app's interface, and you control it using the simplicity of SwiftUI.

Presenting Popups in Apple VisionOS: A Login Modal Example

VisionOS Pro offers a seamless and intuitive user experience, and one way to enhance it is by using modal popups. Modal popups provide a focused and contextual way to display information or gather user input without disrupting the overall flow of your app.
In this tutorial, we'll dive into the world of VisionOS Pro and explore how to create and present a modal popup using SwiftUI. To illustrate this, we'll use a practical example: a login modal.

Why Modal Popups?

Modal popups are a popular choice in user interface design for various reasons. They allow you to:

Provide Context: Display information or options related to a specific task or feature.
Gather Input: Prompt users for input, such as login credentials or preferences.
Minimize Distraction: Keep users focused on a single task without navigating away from the current screen.
Simplify UI: Present complex information or options in a digestible manner.

With these advantages in mind, let's get started by creating a login modal in VisionOS Pro.

The Login Modal: A Visual Walkthrough

‍

Creating a Login Modal

We'll break down the process into manageable steps, starting with the creation of a custom LoginButton component that triggers our login modal. Here's a sneak peek at what we're going to achieve:


LoginButton(showLoginModal: $showLoginModal)

The LoginButton component will serve as the entry point to our login modal. When tapped, it will reveal the modal for users to log in.

Step 1: Create the LoginButton Component

Our journey begins with the LoginButton component. This SwiftUI view represents the login button that users will tap to open the login modal. Here's the code:


import SwiftUI

struct LoginButton: View {
    @Binding var showLoginModal: Bool
    @State private var userName = ""
    @State private var password = ""
    
    var body: some View {
        Button("Login") {
            showLoginModal = true
        }
        .foregroundColor(.blue)
        .sheet(isPresented: $showLoginModal, content: {
            // Present a modal when `showLoginModal` is true
            LoginModalView(
                isModalPresented: $showLoginModal,
                userName: $userName,
                password: $password
            ) { username, password in
                // Callback when modal is closed or login is submitted
                print("Username: \(username), Password: \(password)")
            }
            .background(Color.gray.opacity(0.3)) // Add a gray backdrop
            .edgesIgnoringSafeArea(.all) // Cover the entire screen
        })
    }
}

In this code, we define the structure of our LoginButton component and establish its interaction with the login modal. Let's dive into the code and break it down step by step.

Explanation:

@Binding var showLoginModal: Bool: This binding controls the visibility of the login modal. When the button is tapped, it sets showLoginModal to true, displaying the modal.
@State private var userName = "" and @State private var password = "": These state properties store the user's entered username and password. Changes to these properties trigger view updates.
Button("Login") { ... }: This creates a "Login" button. When tapped, it sets showLoginModal to true, triggering the modal's display.
.foregroundColor(.blue): It sets the button text color to blue.
.sheet(isPresented: $showLoginModal, content: { ... }): When showLoginModal is true, it presents a modal sheet. The sheet's content is defined within the closure.
LoginModalView { ... }: Inside the sheet's content, we create an instance of LoginModalView. We pass bindings to isModalPresented, userName, and password, allowing the modal to access and modify these values.
.background(Color.gray.opacity(0.3)): This adds a semi-transparent gray backdrop to the modal, creating a visual effect.
.edgesIgnoringSafeArea(.all): Ensures that the modal covers the entire screen, ignoring the safe area.

In summary, the LoginButton component is a SwiftUI view that represents a button. When tapped, it sets a state variable (showLoginModal) to trigger the presentation of a login modal. The modal communicates with the parent view through bindings and a callback closure, allowing the user to enter their login credentials and initiate the login process.
Let's explain the LoginModalView component


import SwiftUI

struct LoginModalView: View {
    @Binding var isModalPresented: Bool
    @Binding var userName: String
    @Binding var password: String
    var onSubmit: (String, String) -> Void

    var body: some View {
        ZStack {
            // The modal's background and content layout
            VStack {
                // The header section with a close button
                HStack {
                    Spacer()
                    Button(action: {
                        isModalPresented = false // Close the modal
                    }) {
                        Image(systemName: "xmark.circle.fill")
                            .font(.title)
                    }
                }
                .padding()
                // The title "Login" at the top
                Text("Login")
                    .font(.title)
                    .foregroundColor(.white)
                    .fontWeight(.bold)
                
                // Secure text fields for entering username and password
                SecureField("Username", text: $userName)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding()
                    .font(.system(size: 20))
                
                SecureField("Password", text: $password)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding()
                    .font(.system(size: 20))
                
                // Login button
                Button("Login") {
                    // Call the onSubmit closure with username and password
                    onSubmit(userName, password)
                    // Close the modal
                    isModalPresented = false
                }
                .foregroundColor(.white)
                .background(Color.blue)
                .cornerRadius(24)
                .padding(.horizontal)
                
                Spacer()
                
                // Buttons for alternative login methods (Gmail, Facebook, etc.)
                HStack(spacing: 20) {
                    Button("Login with Gmail") {
                        // Add Gmail login functionality here
                    }
                    .foregroundColor(.white)
                    .background(Color.red)
                    .cornerRadius(24)
												Button("Login with Facebook") {
                        // Add Facebook login functionality here
                    }
                    .foregroundColor(.white)
                    .background(Color.blue)
                    .cornerRadius(24)
                }
                .padding()
            }
            .padding()
            .cornerRadius(10)
            .padding()
        }
    }
}

Explanation:

@Binding var isModalPresented: Bool: This binding controls the visibility of the login modal. When the close button is tapped, it sets isModalPresented to false, closing the modal.
@Binding var userName: String and @Binding var password: String: These bindings are used to capture and display the user's entered username and password.
var onSubmit: (String, String) -> Void: This closure is a callback that gets executed when the modal is closed or when the login button is clicked. It receives the entered username and password as parameters.
Inside the body, the code defines the layout of the login modal, including:
- The close button (an "x" mark) in the top-right corner.
- The "Login" title at the top.
- Secure text fields for entering the username and password.
- A "Login" button that calls the onSubmit closure and closes the modal when clicked.
- Buttons for alternative login methods (Gmail and Facebook) that you can customize with specific functionality.
Various styling and layout modifications, such as padding, fonts, and background colors, are applied to make the modal visually appealing.

In summary, the LoginModalView component is a SwiftUI view that represents a login modal. It provides a user-friendly interface for entering login credentials and offers options for alternative login methods. The component communicates with the parent view through bindings and a callback closure, allowing for dynamic user interactions. The LoginModalView streamlines the login process in VisionOS Pro. It's user-friendly, efficient, and offers alternative login options. With seamless communication through bindings and callbacks, it's the key to a polished and hassle-free login experience.

How to build VisionOS application?