Erste Schritte mit AWS

Erstellen einer iOS-Anwendung

Erstellen Sie eine einfache iOS-Anwendung mit AWS Amplify

Modul 1: Erstellen und Bereitstellen einer iOS-App

In diesem Modul erstellen Sie eine iOS-Anwendung und stellen sie mit dem Webhosting-Service von AWS Amplify in der Cloud bereit.

Einführung

AWS Amplify bietet einen Git-basierten Workflow zur Erstellung, Verwaltung, Integration und Bereitstellung von serverlosen Backends für Web- und mobile Anwendungen. Die Amplify CLI bietet eine einfache textbasierte Benutzeroberfläche zur Bereitstellung und Verwaltung von Backend Services, wie z. B. Benutzerauthentifizierung oder eine REST- oder GraphQL-API für Ihre Anwendungen. Die Amplify-Bibliotheken ermöglichen die einfache Integration dieser Amplify Backend Services mit nur wenigen Zeilen Code in Ihre Anwendungen.

In diesem Modul beginnen wir mit der Erstellung einer neuen iOS-Anwendung zur Aufnahme von Reisenotizen. Es werden ein Titel, eine Beschreibung und ein Bild notiert. Wir werden diese Anwendung in den folgenden Modulen erweitern.

Lerninhalte

  • Erstellen einer iOS-Anwendung
  • Aktualisieren der Hauptansicht
  • Erstellen und Testen Ihrer Anwendung

Wichtige Konzepte

SwiftUI – SwiftUI ist eine einfache Möglichkeit, Benutzeroberflächen auf allen Apple-Plattformen mit der Leistungsfähigkeit der Programmiersprache Swift zu erstellen.

 Veranschlagte Zeit

10 Minuten

 Verwendete Services

Implementierung

  • Erstellen einer iOS-Anwendung

    Starten Sie Xcode und wählen Sie im Startbildschirm die Option Neues Xcode-Projekt erstellen:

    iOSTutorial-Module1-Step1

    Unter iOS, Anwendung wählen Sie Einzelansicht-App und klicken Sie auf Weiter:

    iOSTutorial-Module1-Step2

    Geben Sie einen Namen für Ihr Projekt ein, zum Beispiel iOS Erste Schritte. Stellen Sie sicher, dass die Sprache auf "Swift" und die Benutzeroberfläche auf "SwiftUI" eingestellt ist, und klicken Sie dann auf "Weiter:"

    iOSTutorial-Module1-Step3

    Wählen Sie schließlich ein Verzeichnis aus und klicken Sie auf Erstellen, um das Projekt zu erstellen.

  • Aktualisieren der Hauptansicht

    Öffnen Sie in der Dateiliste links von Xcode ContentView.swift und ersetzen Sie den Code durch diesen Inhalt:

    import SwiftUI
    
    // singleton object to store user data
    class UserData : ObservableObject {
        private init() {}
        static let shared = UserData()
    
        @Published var notes : [Note] = []
        @Published var isSignedIn : Bool = false
    }
    
    // the data class to represents Notes
    class Note : Identifiable, ObservableObject {
        var id : String
        var name : String
        var description : String?
        var imageName : String?
        @Published var image : Image?
    
        init(id: String, name: String, description: String? = nil, image: String? = nil ) {
            self.id = id
            self.name = name
            self.description = description
            self.imageName = image
        }
    }
    
    // a view to represent a single list item
    struct ListRow: View {
        @ObservedObject var note : Note
        var body: some View {
    
            return HStack(alignment: .center, spacing: 5.0) {
    
                // if there is an image, display it on the left
                if (note.image != nil) {
                    note.image!
                    .resizable()
                    .frame(width: 50, height: 50)
                }
    
                // the right part is a vertical stack with the title and description
                VStack(alignment: .leading, spacing: 5.0) {
                    Text(note.name)
                    .bold()
    
                    if ((note.description) != nil) {
                        Text(note.description!)
                    }
                }
            }
        }
    }
    
    // this is the main view of our app, 
    // it is made of a Table with one line per Note
    struct ContentView: View {
        @ObservedObject private var userData: UserData = .shared
    
        var body: some View {
            List {
                ForEach(userData.notes) { note in
                    ListRow(note: note)
                }
            }
        }
    }
    
    // this is use to preview the UI in Xcode
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
    
            let _ = prepareTestData()
    
            return ContentView()
        }
    }
    
    // this is a test data set to preview the UI in Xcode
    func prepareTestData() -> UserData {
        let userData = UserData.shared
        userData.isSignedIn = true
        let desc = "this is a very long description that should fit on multiiple lines.\nit even has a line break\nor two."
    
        let n1 = Note(id: "01", name: "Hello world", description: desc, image: "mic")
        let n2 = Note(id: "02", name: "A new note", description: desc, image: "phone")
    
        n1.image = Image(systemName: n1.imageName!)
        n2.image = Image(systemName: n2.imageName!)
    
        userData.notes = [ n1, n2 ]
    
        return userData
    }

    Was haben wir gerade hinzugefügt?

    • Wir haben eine Notiz-Klasse erstellt, um die Daten von Notizen zu speichern. Wir haben zwei unterschiedliche Eigenschaften für ImageName und Image verwendet. Um Image kümmern wir uns später im Abschnitt Speicher hinzufügen.
    • Wir haben eine UserData-Klasse erstellt, die bestimmte Benutzerdaten enthält, in diesem Stadium nur eine Liste von Notizobjekten.
    • Die Hauptansicht ContentView enthält eine Liste der ListRow's
    • Jede Zeile wird durch eine ListRow gerendert: ein horizontaler Stapel mit einem Bild und Text. Text ist ein vertikaler Stapel mit dem Namen der Notiz in Fettdruck und der Beschreibung der Notiz.
    • Schließlich haben wir ContentView_Previews angepasst und prepareTestData() hinzugefügt, um ein Vorschau-Rendering in der Leinwand zu ermöglichen.
  • Erstellen und testen

    Überprüfen Sie den Canvas, um sicherzustellen, dass das Layout wie gewünscht ist. Wenn Sie den Canvas nicht sehen, können Sie ihn über das Menü Editor aktivieren und dann auf Canvas klicken. Möglicherweise müssen Sie auch auf die Schaltfläche Fortsetzen im Canvas klicken, um die Vorschau des Layouts zu generieren.

    iOSTutorial-Module1-Step4

    Beachten Sie, dass die Daten für die Vorschau im Code generiert werden (ab Zeile 70), die Daten erscheinen nicht zur Laufzeit. Wenn alles in Ordnung aussieht, bauen und starten Sie die Anwendung im Simulator. Klicken Sie auf das Menü Produkt und wählen Sie Ausführen oder geben Sie ein. Alternativ können Sie auf die Schaltfläche Play ▶️ in der Symbolleiste klicken.

    iOSTutorial-Module1-Step5

    Nach einer Weile startet die Anwendung im iOS-Simulator mit einem leeren Anfangsbildschirm. Die Vorschaudaten werden nicht zur Laufzeit gerendert, sie sind nur für Vorschauen innerhalb von Xcode bestimmt.

    iOSTutorial-Module1-step6

Fazit

Sie haben erfolgreich eine iOS-Anwendung erstellt. Sie sind bereit, mit Amplify zu arbeiten!

War das Modul hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Schließen
Es tut uns Leid Sie zu enttäuschen
Ist etwas veraltet, verwirrend oder ungenau? Bitte helfen Sie uns, dieses Tutorial zu verbessern, indem Sie Feedback geben.
Schließen

Amplify starten