Anleitung zur Erstellung von iOS-Apps mit Swift
Dank Apples umfassendem Entwicklungs-Ökosystem mit Xcode und der Programmiersprache Swift war die Entwicklung von iOS-Apps noch nie so einfach. In diesem Artikel lernen Sie den grundlegenden Ablauf der App-Entwicklung mit Swift kennen: von der Einrichtung der Tools über die Erstellung eines neuen Projekts und das Design der Benutzeroberfläche bis hin zum Ausführen der App im Simulator. Dieses Tutorial ist zwar eine Einführung, die beschriebenen Schritte sollten Ihnen aber ausreichen, um eine einfache, funktionierende App zu erstellen.
-
1. Vorbereitung der Werkzeuge und Anforderungen
Bevor Sie mit dem Programmieren beginnen, stellen Sie sicher, dass Sie über die folgenden Geräte und Software verfügen:
1. MacBook/iMac (oder macOS auf Apple-Geräten), da Xcode offiziell nur auf macOS läuft.
2. Xcode (kostenloser Download im Mac App Store). Xcode enthält einen Code-Editor, einen iPhone-Simulator sowie Tools zum Erstellen und Debuggen.
3. Swift (in Xcode enthalten).
4. (Optional) Apple Developer-Konto für die Installation auf physischen Geräten und die Veröffentlichung im App Store.
Sobald Xcode installiert ist, öffnen Sie die Anwendung und warten Sie gegebenenfalls, bis die Installation zusätzlicher Komponenten abgeschlossen ist.
-
2. Erstellen Sie ein neues Projekt in Xcode.
1. Öffnen Sie Xcode.
2. Wählen Sie „Neues Xcode-Projekt erstellen“.
3. Wählen Sie im Abschnitt „Vorlage“ Folgendes aus:
– iOS
– App
4. Klicken Sie auf „Weiter“ und füllen Sie anschließend die Projektkonfiguration aus:
– Produktname: zum Beispiel `HelloSwiftApp`
– Team: Wählen Sie Ihr Konto aus (kann leer bleiben, wenn Sie nicht angemeldet sind)
– Organisationskennung: zum Beispiel `com.devname`
– Benutzeroberfläche: Wählen Sie SwiftUI (moderner und einfacher für Anfänger)
Hinweis: Falls Sie UIKit bevorzugen, können Sie Storyboard wählen, dieses Tutorial konzentriert sich jedoch auf SwiftUI.
– Sprache: Swift
5. Klicken Sie auf Weiter und wählen Sie den Speicherort für das Projekt aus. Klicken Sie anschließend auf Erstellen.
Sobald das Projekt erstellt ist, sehen Sie eine Dateistruktur wie `HelloSwiftAppApp.swift` und `ContentView.swift`.
-
3. Die grundlegende Struktur eines SwiftUI-Projekts verstehen
In SwiftUI ist der Ausgangspunkt einer Anwendung üblicherweise die Datei `YourAppNameApp.swift`. Zum Beispiel:
„Schnell
import SwiftUI
@hauptsächlich
struct HelloSwiftAppApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
“`
Kurze Erklärung:
– `@main` markiert den Einstiegspunkt der Anwendung.
– `WindowGroup` ist der Hauptansichtscontainer.
– `ContentView()` ist die erste angezeigte Ansicht.
Die Datei `ContentView.swift` enthält unterdessen die Hauptansicht:
„Schnell
import SwiftUI
struct ContentView: Ansicht {
Var-Körper: einige Ansicht {
Text(“Hallo Welt!”)
.Polsterung()
}
}
“`
-
4. Erstellung einer einfachen Benutzeroberfläche: „Schnellnotizen“-App
Um das Ganze etwas interessanter zu gestalten, erstellen wir eine einfache Anwendung namens „Quick Notes“, mit der Benutzer Notizen eingeben und diese als Liste anzeigen lassen können.
Schritt 1: Zustände für Eingabe und Liste erstellen
Ändern Sie `ContentView.swift` in:
„Schnell
import SwiftUI
struct ContentView: Ansicht {
@State private var noteText: String = “”
@State private var notes: [String] = []
Var-Körper: einige Ansicht {
NavigationView {
VStack(spacing: 16) {
TextField(“Schreibe eine Notiz…”, text: $noteText)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding(.horizontal)
Button(action: addNote) {
Text(“Notiz hinzufügen”)
.frame(maxWidth: .infinity)
}
.buttonStyle(.borderedProminent)
.padding(.horizontal)
Liste {
ForEach(notes, id: \.self) { note in
Text (Anmerkung)
}
.onDelete(perform: deleteNote)
}
}
.navigationTitle(“Kurznotizen”)
}
}
private func addNote() {
let trimmed = noteText.trimmingCharacters(in: .whitespacesAndNewlines)
guard !trimmed.isEmpty else { return }
notes.insert(trimmed, at: 0)
noteText = “”
}
private func deleteNote(at offsets: IndexSet) {
notes.remove(atOffsets: offsets)
}
}
“`
-
5. Wichtige Code-Erläuterung
Einige wichtige Konzepte, die man verstehen sollte:
– @State: Wird verwendet, um Daten zu speichern, die sich ändern und die UI entsprechend aktualisieren.
– `noteText` speichert den Eingabetext.
– `notes` speichert eine Liste von Notizen.
– TextField : Texteingabekomponente.
Die Bindung `text: $noteText` bedeutet, dass das TextField direkt mit dem Zustand `noteText` verbunden ist.
– Button(action:) : Schaltfläche zum Ausführen der Funktion `addNote()`.
– List + ForEach : Zeigt Daten in Listenform an.
`id: \.self` wird verwendet, weil es sich bei dem Element um eine eindeutige Zeichenkette handelt (um ein einfaches Beispiel zu nennen).
– onDelete: Ermöglicht das Löschen von Elementen aus der Liste durch eine Wischgeste.
-
6. Ausführen der Anwendung im Simulator
So führen Sie die Anwendung aus:
1. Wählen Sie oben in Xcode das Zielgerät aus, zum Beispiel iPhone 15 (Simulator).
2. Klicken Sie auf die Schaltfläche „Ausführen“ (Dreieckssymbol ▶).
3. Der Simulator öffnet sich, dann wird die Anwendung automatisch ausgeführt.
Versuchen Sie, eine Notiz einzugeben, auf „Notiz hinzufügen“ zu tippen und sie in der Liste anzuzeigen. Wischen Sie ein Element nach links, um es zu löschen.
-
7. Einfaches Debuggen
Wenn eine Anwendung nicht wie erwartet funktioniert, können Sie Folgendes tun:
– Schauen Sie im Debug-Konsolenfenster am unteren Rand von Xcode nach Fehlerprotokollen.
– Die Funktion `print()` wurde hinzugefügt, um Variablenwerte zu überprüfen:
„Schnell
print(“Notiz hinzugefügt:”, getrimmt)
“`
Darüber hinaus bietet Xcode eine Haltepunktfunktion, mit der Sie das Programm an einer bestimmten Zeile anhalten können, um den Inhalt von Variablen zu untersuchen.
-
8. Anwendungsverbesserung: Datenvalidierung und -speicherung
Die obige Anwendung speichert Notizen weiterhin temporär (sie werden beim Schließen der Anwendung gelöscht). Für die nächste Entwicklungsphase können Sie Folgendes hinzufügen:
1. Lokaler Speicher (Benutzerstandardwerte)
Speichert ein Array von Notizen in UserDefaults, damit diese auch nach dem Schließen der Anwendung erhalten bleiben.
2. Datenbank (Core Data/SQLite)
Geeignet für komplexere Daten.
3. Funktion „Notizen bearbeiten“
Erstellen Sie eine Detailansicht, um den Datensatz zu bearbeiten.
4. Attraktivere Benutzeroberfläche
Fügen Sie Symbole, Farben und ein übersichtlicheres Layout hinzu.
Als ersten Schritt können Sie Datensätze mithilfe von `JSONEncoder` und `JSONDecoder` in `UserDefaults` speichern.
-
9. Fazit
Swift und SwiftUI bieten eine moderne und schnelle Möglichkeit, iOS-Apps zu entwickeln. In diesem Tutorial haben Sie gelernt, wie Sie ein neues iOS-Projekt erstellen, die grundlegende Struktur einer SwiftUI-App verstehen, eine einfache Benutzeroberfläche mit Textfeldern, Schaltflächen und Listen entwickeln und die App im Simulator ausführen. Obwohl die App noch einfach ist, bildet diese Grundlage die Basis für komplexere Funktionen wie Datenspeicherung, Seitennavigation und API-Integration.
Wenn Sie möchten, kann ich Ihnen auch bei der Erstellung fortgeschrittenerer Versionen dieses Tutorials helfen, z. B. beim Hinzufügen von persistentem Speicher mit UserDefaults/Core Data, beim Erstellen einer Detailseite mit NavigationStack oder beim Erstellen einer App, die Daten aus dem Internet mit URLSession abruft.
