App Store Connect submission in iOS Swift - Mini App: Build & Ship

Build: App Submission Guide

This screen guides users through the steps to submit their iOS app to App Store Connect.

Target UI

---------------------------------
|       App Submission Guide     |
|-------------------------------|
| 1. Archive your app in Xcode   |
| 2. Validate your archive       |
| 3. Upload to App Store Connect |
| 4. Fill app metadata           |
| 5. Submit for review           |
|                               |
| [Start Submission]             |
---------------------------------

Display a numbered list of submission steps

Include a button labeled 'Start Submission' at the bottom

When the button is tapped, show an alert confirming the start of submission process

Use a simple and clean layout with readable fonts

Support light and dark mode automatically

Starter Code

iOS Swift

import SwiftUI

struct AppSubmissionGuideView: View {
    var body: some View {
        VStack {
            Text("App Submission Guide")
                .font(.title)
                .padding()
            // TODO: Add numbered list of steps here
            Spacer()
            Button("Start Submission") {
                // TODO: Show alert on tap
            }
            .padding()
        }
        .padding()
    }
}

struct AppSubmissionGuideView_Previews: PreviewProvider {
    static var previews: some View {
        AppSubmissionGuideView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct AppSubmissionGuideView: View {
    @State private var showAlert = false
    
    let steps = [
        "Archive your app in Xcode",
        "Validate your archive",
        "Upload to App Store Connect",
        "Fill app metadata",
        "Submit for review"
    ]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("App Submission Guide")
                .font(.title)
                .bold()
                .padding(.bottom, 20)
            
            ForEach(steps.indices, id: \.self) { index in
                Text("\(index + 1). \(steps[index])")
                    .font(.body)
            }
            Spacer()
            Button("Start Submission") {
                showAlert = true
            }
            .font(.headline)
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.accentColor)
            .foregroundColor(.white)
            .cornerRadius(8)
            .alert("Submission Started", isPresented: $showAlert) {
                Button("OK", role: .cancel) { }
            } message: {
                Text("You have started the app submission process.")
            }
        }
        .padding()
    }
}

struct AppSubmissionGuideView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            AppSubmissionGuideView()
                .preferredColorScheme(.light)
            AppSubmissionGuideView()
                .preferredColorScheme(.dark)
        }
    }
}

This SwiftUI view shows a clear numbered list of the five steps needed to submit an app to App Store Connect. The steps are displayed using a ForEach loop for simplicity and scalability.

The "Start Submission" button triggers an alert confirming the start of the submission process. The button uses the app's accent color for good visibility and accessibility.

The layout uses padding and spacing for readability and supports both light and dark modes automatically by using system colors.

Final Result

Completed Screen

---------------------------------
|       App Submission Guide     |
|-------------------------------|
| 1. Archive your app in Xcode   |
| 2. Validate your archive       |
| 3. Upload to App Store Connect |
| 4. Fill app metadata           |
| 5. Submit for review           |
|                               |
| [ Start Submission ]           |
---------------------------------

Tapping 'Start Submission' shows an alert with title 'Submission Started' and message 'You have started the app submission process.'

Alert has an 'OK' button to dismiss it

Stretch Goal

Add a toggle to switch between light and dark mode manually within the app.

💡 Hint

Use @Environment(\.colorScheme) and a @State variable to override the color scheme for the view.