**Course Title:** Swift Programming: From Basics to Advanced Development **Section Title:** Introduction to SwiftUI and Building UI Components **Topic:** Develop a simple SwiftUI application with interactive UI components. **Objective:** In this lab, you will create a simple SwiftUI application that includes interactive user interface (UI) components, demonstrating your understanding of SwiftUI's declarative syntax and state management principles. **Prerequisites:** * Completion of the previous topics in this course, including Introduction to SwiftUI and Building UI Components. * Familiarity with Xcode and the Swift programming language. **Step 1: Create a New SwiftUI Project** Launch Xcode and create a new project by selecting the "App" template under the "iOS" tab. Choose "SwiftUI App" as the template and click "Next." * Fill in the project details: + Product Name: SimpleSwiftUIApp + Team: Your team name or None + Bundle Identifier: Your unique identifier (e.g., com.yourcompany.yourappname) + Language: Swift + User Interface: SwiftUI App * Click "Next" and then "Create" to create the project. **Step 2: Design the User Interface** In the SimpleSwiftUIApp project, open the `ContentView.swift` file and replace the existing code with the following: ```swift import SwiftUI struct ContentView: View { @State private var isLoggedIn = false var body: some View { VStack { if isLoggedIn { Text("Welcome, User!") .font(.title) Button("Logout") { isLoggedIn.toggle() } } else { Text("Please login") .font(.title) Button("Login") { isLoggedIn.toggle() } } } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } ``` * This code defines a `ContentView` struct that uses a `@State` variable `isLoggedIn` to toggle between a login and logout state. * The `body` property returns a `VStack` containing a `Text` element and a `Button`. When the button is pressed, the `isLoggedIn` state is toggled. **Step 3: Add Interactivity with a Text Field** Add a `TextField` to the `ContentView` to collect user input: ```swift struct ContentView: View { @State private var isLoggedIn = false @State private var username = "" var body: some View { VStack { if isLoggedIn { Text("Welcome, \(username)!") .font(.title) Button("Logout") { isLoggedIn.toggle() username = "" } } else { Text("Please login") .font(.title) TextField("Username", text: $username) .textFieldStyle(RoundedCornerTextFieldStyle()) Button("Login") { isLoggedIn.toggle() } } } } } ``` * This code adds a `TextField` to collect the user's username. The `$username` syntax creates a binding between the `username` state variable and the `TextField`. **Step 4: Run the Application** Run the application on a simulator or physical device using Xcode's "Product" -> "Run" menu option or the keyboard shortcut ⌘R. * Observe how the UI updates in response to user interactions. **Step 5: Refactor the Code (Optional)** Refactor the code to separate the login and logout logic into separate functions: ```swift struct ContentView: View { @State private var isLoggedIn = false @State private var username = "" var body: some View { VStack { if isLoggedIn { Text("Welcome, \(username)!") .font(.title) Button("Logout") { logout() } } else { Text("Please login") .font(.title) TextField("Username", text: $username) .textFieldStyle(RoundedCornerTextFieldStyle()) Button("Login") { login() } } } } func login() { isLoggedIn.toggle() } func logout() { isLoggedIn.toggle() username = "" } } ``` * This refactoring makes the code more modular and easier to maintain. **Conclusion** In this lab, you created a simple SwiftUI application with interactive UI components. You learned how to use state management and declarative syntax to update the UI in response to user interactions. **External Resources** * SwiftUI Documentation: [https://developer.apple.com/documentation/swiftui](https://developer.apple.com/documentation/swiftui) * SwiftUI Tutorials: [https://developer.apple.com/tutorials/swiftui](https://developer.apple.com/tutorials/swiftui) **Leave a Comment or Ask for Help** If you have any questions or need help with this lab, leave a comment below or ask for help in the discussion section. **Next Topic** In the next topic, we will learn about making network requests using URLSession.