Deine erste App in 15 Minuten

Vorab: Du musst noch nicht alles verstehen

Diese Lektion ist anders als die folgenden. Wir bauen eine App, ohne jedes Detail zu erklären. Warum?

Weil du sehen sollst, wohin die Reise geht. Wenn du am Ende dieser Lektion eine eigene App auf dem Bildschirm hast, weißt du: Das ist machbar. Die Details lernst du ab Stufe 1 Schritt für Schritt, und bei jedem neuen Konzept wirst du denken: „Ach, das war das in meiner ersten App!“

Also: Tipp mit, staune, und lass dich nicht verunsichern, wenn manches noch wie Zauberei wirkt.

Schritt 1: Neues Projekt anlegen

Wie in Lektion 0.3:

1. File → New → Project… (⇧ ⌘ N)
2. iOS → App → Next
3. Product Name: Motivation
4. Interface: SwiftUI · Language: Swift · Testing System: None · Storage: None
5. Next → Speicherort wählen → Create

Öffne ContentView.swift.

Schritt 2: Ein großer Spruch

Ersetze den gesamten Inhalt von ContentView.swift durch diesen Code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 30) {
            Image(systemName: "sparkles")
                .font(.system(size: 60))
                .foregroundStyle(.orange)

            Text("Jeder Profi war einmal Anfänger.")
                .font(.title)
                .fontWeight(.bold)
                .multilineTextAlignment(.center)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Was passiert hier, grob gesagt?

• VStack stapelt Dinge untereinander, mit spacing: 30 Abstand.
• Image(systemName: "sparkles") zeigt ein Symbol aus Apples Symbolbibliothek.
• Text(...) zeigt einen Text.
• Die Zeilen mit dem Punkt am Anfang, wie .font(.title), nennt man Modifier. Sie verändern das Aussehen: Schriftgröße, Farbe, Ausrichtung.

Probier ruhig ein bisschen herum: Ändere .orange in .purple oder .title in .largeTitle. Der Canvas zeigt dir sofort das Ergebnis.

Schritt 3: Mehrere Sprüche und ein Button

Eine App mit einem einzigen Spruch ist schnell langweilig. Wir wollen auf Knopfdruck einen neuen bekommen. Ersetze den Code erneut komplett:

import SwiftUI

struct ContentView: View {
    let quotes = [
        "Jeder Profi war einmal Anfänger.",
        "Fehler sind Beweise dafür, dass du es versuchst.",
        "Kleine Schritte sind auch Schritte.",
        "Heute ist ein guter Tag, um etwas Neues zu lernen.",
        "Du musst nicht perfekt sein, nur dranbleiben."
    ]

    @State private var currentQuote = "Tippe auf den Button!"

    var body: some View {
        VStack(spacing: 30) {
            Image(systemName: "sparkles")
                .font(.system(size: 60))
                .foregroundStyle(.orange)

            Text(currentQuote)
                .font(.title)
                .fontWeight(.bold)
                .multilineTextAlignment(.center)

            Button("Neuer Spruch") {
                currentQuote = quotes.randomElement() ?? ""
            }
            .buttonStyle(.borderedProminent)
            .tint(.orange)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Im Canvas kannst du direkt auf den Button tippen. Bei jedem Tipp erscheint ein zufälliger Spruch.

Was ist neu?

• let quotes = [...] ist eine Liste (in Swift: Array) von Sprüchen. Lektion 1.6.
• @State private var currentQuote ist der aktuelle Spruch. @State sorgt dafür, dass sich der Bildschirm aktualisiert, wenn er sich ändert. Lektion 2.9.
• Button("Neuer Spruch") { ... } ist ein Button. Der Code in den geschweiften Klammern läuft beim Tippen. Lektion 2.11.
• quotes.randomElement() holt ein zufälliges Element aus der Liste.
• ?? "" ist eine Absicherung für den Fall, dass die Liste leer wäre. Klingt kryptisch? Das ist ein Optional, eines der wichtigsten Themen in Swift. Lektion 1.8.

Schritt 4: Ein bisschen Schliff

Zwei kleine Extras machen die App deutlich schöner. Ergänze den Code an zwei Stellen:

a) Eine sanfte Animation beim Wechsel. Ändere den Inhalt des Buttons:

Button("Neuer Spruch") {
    withAnimation {
        currentQuote = quotes.randomElement() ?? ""
    }
}

b) Ein farbiger Hintergrund. Ergänze nach .padding() (dem letzten Modifier des VStack) zwei Zeilen:

        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.orange.opacity(0.1))

.frame(...) lässt den Inhalt den ganzen Bildschirm ausfüllen, .background(...) färbt ihn zartorange.

import SwiftUI

struct ContentView: View {
    let quotes = [
        "Jeder Profi war einmal Anfänger.",
        "Fehler sind Beweise dafür, dass du es versuchst.",
        "Kleine Schritte sind auch Schritte.",
        "Heute ist ein guter Tag, um etwas Neues zu lernen.",
        "Du musst nicht perfekt sein, nur dranbleiben."
    ]

    @State private var currentQuote = "Tippe auf den Button!"

    var body: some View {
        VStack(spacing: 30) {
            Image(systemName: "sparkles")
                .font(.system(size: 60))
                .foregroundStyle(.orange)

            Text(currentQuote)
                .font(.title)
                .fontWeight(.bold)
                .multilineTextAlignment(.center)

            Button("Neuer Spruch") {
                withAnimation {
                    currentQuote = quotes.randomElement() ?? ""
                }
            }
            .buttonStyle(.borderedProminent)
            .tint(.orange)
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.orange.opacity(0.1))
    }
}

#Preview {
    ContentView()
}

Schritt 5: Im Simulator starten

Wähle oben ein iPhone-Modell und drück ⌘ R. Deine App startet im Simulator.

Drück dort ⇧ ⌘ H, um zum Home-Bildschirm zu wechseln. Zwischen den anderen Apps liegt jetzt deine App „Motivation“. 🎉

Schritt 6 (optional): Auf deinem eigenen iPhone

Wenn du ein iPhone hast, kannst du die App kostenlos darauf installieren. Beim ersten Mal sind ein paar Schritte nötig. Danach geht es mit einem Klick.

1. Apple-Account in Xcode hinterlegen (siehe Lektion 0.2, Schritt 5).
2. Team auswählen: Klick im Navigator ganz oben auf das blaue Projektsymbol „Motivation“. Wähle im Bereich Signing & Capabilities bei Team dein „Personal Team“ aus.
3. iPhone verbinden: per USB-Kabel. Bestätige auf dem iPhone die Frage „Diesem Computer vertrauen?“.
4. Entwicklermodus aktivieren: Auf dem iPhone unter Einstellungen → Datenschutz & Sicherheit → Entwicklermodus. Das iPhone startet neu und fragt noch einmal nach Bestätigung. Die Option erscheint oft erst, nachdem du das iPhone mit Xcode verbunden hast.
5. iPhone als Ziel wählen: In der Toolbar oben dein iPhone statt des Simulators auswählen.
6. Starten mit ⌘ R.
7. Beim ersten Mal vertrauen: Möglicherweise meldet das iPhone, dass der Entwickler nicht vertrauenswürdig ist. Geh dann auf dem iPhone zu Einstellungen → Allgemein → VPN & Geräteverwaltung, tipp auf deinen Account und vertrau ihm. Danach in Xcode erneut ⌘ R.

Typische Fehler

Der Button tut nichts

Prüfe, ob vor var currentQuote wirklich @State steht. Ohne @State meldet Xcode sogar einen Fehler:

Cannot find 'quotes' in scope

Entweder ein Tippfehler (z. B. quote statt quotes), oder die Liste steht an der falschen Stelle. Sie muss innerhalb von struct ContentView: View { ... } stehen, aber außerhalb von body.

Expected ',' separator

In der Liste fehlt ein Komma zwischen zwei Sprüchen. Jeder Spruch außer dem letzten braucht ein Komma am Ende.

„Signing for 'Motivation' requires a development team“

Du willst die App auf einem echten iPhone starten, hast aber kein Team ausgewählt. Siehe Schritt 6, Punkt 2.

Alles sieht anders aus als hier

Vergleich deinen Code mit dem kompletten Code oben. Oft ist es eine falsch gesetzte Klammer. Markier den ganzen Code mit ⌘ A und drück ⌃ I. Xcode rückt dann alles korrekt ein, und falsch gesetzte Klammern fallen sofort auf.

FAQ

Übungen

@State private var count = 0

count += 1

Text("\(count) Sprüche gelesen")
    .foregroundStyle(.secondary)

Zusammenfassung

• Du hast eine echte App gebaut, mit Text, Symbol, Button, Zufall und Animation.
• Du hast sie im Simulator gestartet, vielleicht sogar auf deinem iPhone.
• Du hast schon Begriffe gesehen, die dich durch den ganzen Kurs begleiten: View, Modifier, @State, Array, Optional.
• Du musst sie noch nicht verstehen. Genau das ist ab jetzt unsere Aufgabe.