Building a Virtual Business Card App with SwiftUI

In today’s digital age, virtual business cards are becoming increasingly popular for their convenience and eco-friendliness. SwiftUI, Apple’s declarative UI framework, offers a straightforward and efficient way to create such an application. This blog post guides you through the process of building a virtual business card app using SwiftUI, providing step-by-step instructions and code samples.

What is SwiftUI?

SwiftUI is a modern UI toolkit from Apple that allows developers to create user interfaces declaratively. It is designed to be simple, easy to use, and fully integrated with other Apple platforms. SwiftUI leverages Swift’s powerful features to make UI development more intuitive and efficient.

Why Use SwiftUI for a Virtual Business Card App?

• Declarative Syntax: Simplifies UI development, making the code more readable and maintainable.
• Live Preview: Offers real-time previews of your UI as you code, speeding up the development process.
• Cross-Platform Compatibility: Allows you to build apps for iOS, macOS, watchOS, and tvOS from a single codebase.

Step-by-Step Guide to Building a Virtual Business Card App

Step 1: Setting Up a New SwiftUI Project

Open Xcode and create a new project. Select the “App” template under the iOS tab and ensure that the interface is set to “SwiftUI”. Name your project “VirtualBusinessCard”.

Step 2: Designing the Business Card Model

Create a struct to hold the information for the business card. This struct will include details like name, title, email, phone number, and any other relevant information.

import SwiftUI

struct BusinessCard: Identifiable {
    let id = UUID()
    var name: String
    var title: String
    var email: String
    var phone: String
    var company: String
    var address: String
}

Here, Identifiable is adopted so the model can be easily used in SwiftUI lists.

Step 3: Creating the Business Card View

Create a SwiftUI view to display the business card information. This view will use the BusinessCard struct to populate the UI elements.

struct BusinessCardView: View {
    var card: BusinessCard

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text(card.name)
                .font(.largeTitle)
                .fontWeight(.bold)

            Text(card.title)
                .font(.title2)
                .foregroundColor(.secondary)

            Divider()

            HStack {
                Image(systemName: "envelope")
                Text(card.email)
            }

            HStack {
                Image(systemName: "phone")
                Text(card.phone)
            }

            Divider()

            Text(card.company)
                .font(.headline)

            Text(card.address)
                .foregroundColor(.gray)
        }
        .padding()
        .background(Color.white)
        .cornerRadius(10)
        .shadow(radius: 5)
    }
}

In this view:

• A VStack arranges the card information vertically.
• Text views display the different fields of the business card.
• HStack combines an icon with the contact details (email and phone).
• Styling is applied using modifiers like .font, .fontWeight, .foregroundColor, .padding, .background, .cornerRadius, and .shadow to create a visually appealing card.

Step 4: Implementing a List of Business Cards

To manage multiple business cards, you can use a List view. First, create an array of BusinessCard instances.

struct ContentView: View {
    let cards = [
        BusinessCard(
            name: "John Doe",
            title: "Software Engineer",
            email: "john.doe@example.com",
            phone: "+1 (555) 123-4567",
            company: "Tech Corp",
            address: "123 Main St, Anytown"
        ),
        BusinessCard(
            name: "Jane Smith",
            title: "Marketing Manager",
            email: "jane.smith@example.com",
            phone: "+1 (555) 987-6543",
            company: "Marketing Inc",
            address: "456 Oak Ave, Othertown"
        )
    ]

    var body: some View {
        NavigationView {
            List(cards) { card in
                BusinessCardView(card: card)
                    .padding(.vertical, 5)
            }
            .navigationTitle("Business Cards")
        }
    }
}

In this view:

• An array named cards holds sample BusinessCard data.
• A NavigationView provides a navigation bar for the list.
• The List view iterates through the cards array, displaying each card using the BusinessCardView.
• .padding(.vertical, 5) adds vertical padding to each card for better spacing.

Step 5: Adding the Ability to Add New Cards

Implement a form to add new business cards. Create a new view for the add card form.

import SwiftUI

struct AddCardView: View {
    @Environment(\.presentationMode) var presentationMode
    @State private var name: String = ""
    @State private var title: String = ""
    @State private var email: String = ""
    @State private var phone: String = ""
    @State private var company: String = ""
    @State private var address: String = ""
    
    @Binding var cards: [BusinessCard]

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Personal Information")) {
                    TextField("Name", text: $name)
                    TextField("Title", text: $title)
                }

                Section(header: Text("Contact Information")) {
                    TextField("Email", text: $email)
                    TextField("Phone", text: $phone)
                }

                Section(header: Text("Company Information")) {
                    TextField("Company", text: $company)
                    TextField("Address", text: $address)
                }
            }
            .navigationTitle("Add New Card")
            .navigationBarItems(trailing: Button("Save") {
                let newCard = BusinessCard(name: name, title: title, email: email, phone: phone, company: company, address: address)
                cards.append(newCard)
                presentationMode.wrappedValue.dismiss()
            })
        }
    }
}

Key elements in the AddCardView include:

• @State properties to hold the form input values for each field.
• A Form that organizes the input fields into sections.
• TextField elements for user input.
• A “Save” button in the navigation bar that creates a new BusinessCard instance and adds it to the cards array.
• @Environment(\.presentationMode) var presentationMode enables dismissing the view to return to the card list.
• @Binding var cards: [BusinessCard] is needed so ContentView can listen to the add actions

Modify the ContentView to show a button that show’s the AddCardView in sheet.

struct ContentView: View {
    @State private var cards: [BusinessCard] = [
        BusinessCard(
            name: "John Doe",
            title: "Software Engineer",
            email: "john.doe@example.com",
            phone: "+1 (555) 123-4567",
            company: "Tech Corp",
            address: "123 Main St, Anytown"
        ),
        BusinessCard(
            name: "Jane Smith",
            title: "Marketing Manager",
            email: "jane.smith@example.com",
            phone: "+1 (555) 987-6543",
            company: "Marketing Inc",
            address: "456 Oak Ave, Othertown"
        )
    ]
    @State private var isShowingAddCardView = false

    var body: some View {
        NavigationView {
            List(cards) { card in
                BusinessCardView(card: card)
                    .padding(.vertical, 5)
            }
            .navigationTitle("Business Cards")
            .navigationBarItems(trailing: Button(action: {
                isShowingAddCardView = true
            }) {
                Image(systemName: "plus")
            })
            .sheet(isPresented: $isShowingAddCardView) {
                AddCardView(cards: $cards)
            }
        }
    }
}

The following key aspects ensure the new card is saved properly:

• Added @State private var isShowingAddCardView = false
• Use the `.sheet` Modifier to create a sheet and link with `@State private var isShowingAddCardView = false`
• Binding `cards` array

Step 6: Enhance User Experience

To further enhance the user experience, consider adding the following features:

• Edit Cards: Implement the ability to edit existing business cards.
• Search: Add a search bar to quickly find cards by name or company.
• Share Cards: Allow users to share their business cards via email, SMS, or QR code.

Conclusion

Building a virtual business card app with SwiftUI is a straightforward process that leverages the framework’s declarative syntax and live preview features. By following the steps outlined in this guide, you can create a functional and visually appealing app that meets the needs of modern professionals. SwiftUI’s simplicity and efficiency make it an excellent choice for developing innovative mobile applications.