Ein Instagram-Klon mit SwiftUI und GraphQL

Heute starten wir eine Reihe von Blogbeiträgen, in denen wir Ihnen zeigen, wie Sie mit vielen coolen Tools Ihr eigenes soziales Netzwerk aufbauen können: eine Anwendung, die Instagram ähnelt.

Wir werden nicht an der Technik sparen und das Neueste und Beste verwenden: Parse, GraphQL, etwas NodeJS und vor allem das (noch nicht freigegebene) neueste Apple-Framework SwiftUI.

Es wird ein paar Beiträge dauern, bis wir voll funktionsfähig sind, aber wenn wir soweit sind, werden Sie feststellen, wie einfach es sein kann, Ihre Ideen mit sehr wenig Aufwand hier bei Back4app zum Laufen zu bringen.

Um besser zu lernen, laden Sie das iOS Instagram Clone Projekt mit Quellcode herunter.

Es scheint also Zeit zu sein für…

Wollen Sie einen schnellen Start?

Klonen Sie diese App von unserem Hub und nutzen Sie sie ohne Probleme!

Einige Einführung

Nun, Sie kennen wahrscheinlich schon die enormen Vorteile, die Parse für Ihren Entwicklungsprozess mit sich bringt, besonders wenn es in Back4app gehostet wird, da unser Set an Tools die Produktivität enorm steigert.

Und unsere letzten Beiträge über GraphQL haben Ihnen gezeigt, wie einfach es sein kann, die Entwicklung von APIs im Laufe der Zeit aufrechtzuerhalten, wenn Sie es verwenden. Wenn Sie diese Beiträge verpasst haben, empfehle ich Ihnen dringend, sich die Zeit zu nehmen und sie zu lesen, da sie Ihr Verständnis im weiteren Verlauf erheblich verbessern werden.
Sie können mehr über GraphQL lesen und wir haben auch einen vollständigen Beitrag über die Verwendung im Artikel Web API.
Sie können auch sehen, einige Integration mit NodeJS in Cloud Code Functions lesen GraphQL und NodeJS.

Bleibt uns noch SwiftUI.
SwiftUI ist laut Apple “ein innovativer, außergewöhnlich einfacher Weg, um Benutzeroberflächen auf allen Apple-Plattformen mit der Kraft von Swift zu erstellen”.

Ich selbst denke, dass SwiftUI mehr als das ist.

Wenn Sie, wie ich, seit einiger Zeit Software entwickeln, wissen Sie wahrscheinlich, dass die Entwicklergemeinde immer zwischen der Bequemlichkeit der Verwendung von Storyboards, Apples Drag-and-Drop-Schnittstelle zur Erstellung von Benutzeroberflächen, und der Leistungsfähigkeit der programmatischen Benutzeroberfläche gespalten war.

SwiftUI bietet das Beste aus beiden Welten: Es ist einfach genug für Anfänger zu erlernen, während es die Wartungsfreundlichkeit einer programmierten Benutzeroberfläche beibehält.
Kombinieren Sie das mit Echtzeit-Rendering, so dass Entwickler die visuelle Ausgabe dessen, was sie kodieren, leicht sehen können, und machen Sie es in zwei Richtungen, so dass, wenn Sie den Code ändern, es sich auf die Benutzeroberfläche auswirkt, und die grafische Änderung der Benutzeroberfläche sich auf den Code auswirkt, und was Sie erhalten, ist eine der leistungsfähigsten und dennoch einfachsten Möglichkeiten, schön gestaltete und dennoch wartbare Benutzeroberflächen zu liefern.

Was brauchen Sie also?

Zum Zeitpunkt des Verfassens dieses Beitrags befindet sich das neue macOS Catalina, XCode 11, iOS 13 und einige andere Produkte, die bald auf den Markt kommen sollen, noch im Betatest.

Während Sie XCode 11 mit macOS Mojave verwenden können, benötigen Sie Catalina, um die Vorschauen von SwiftUI in Echtzeit zu rendern.

Kein Catalina? Keine Vorschaubilder für Sie!

Dies ist eine Entscheidung, die Sie treffen müssen, da ich festgestellt habe, dass der Wechsel von Bash zu ZSH als offizielle macOS-Shell in Catalina viele meiner Werkzeuge und Skripte, die ich für meinen täglichen Arbeitsablauf verwende, kaputt gemacht hat. Ich habe mich entschieden, für eine Weile in Mojave zu bleiben. Es liegt an Ihnen zu entscheiden, ob Sie aktualisieren wollen oder nicht.

Außerdem benötigen Sie ein Back4app-Konto mit einer erstellten App. Wie Sie Ihre erste App erstellen, erfahren Sie in der Dokumentation von Back4app.

Zu guter Letzt werden wir Apollo Client verwenden, um GraphQL in unser Projekt zu integrieren. Falls Sie noch keine Erfahrung damit haben, habe ich einen sehr detaillierten Beitrag darüber geschrieben, wie man die Web-Authentifizierung konfiguriert und verwendet.

Bevor wir also beginnen, benötigen Sie:

• XCode 11 installiert (mit macOS Catalina, wenn Sie Previews sehen wollen)
• Ihre neue App in Back4app erstellt
• Apollo Client installiert und konfiguriert

Meine App wird Back4Gram heißen, da sie Instagram ähneln wird.

Unsere allererste Klasse

Ich erzähle euch immer, wie Parse die Klasse User erstellt, damit ihr neue Benutzer anmelden und bestehende authentifizieren könnt, und die Klasse Role, damit ihr Benutzer mit ähnlichen Rechten gruppieren könnt. Das ist großartig, denn zumindest für die Authentifizierung müssen wir keine eigene Klasse erstellen.

Die Klasse User hat drei automatisch erstellte Eigenschaften, von denen zwei obligatorisch und eine optional sind:

• Benutzername (obligatorisch)
• Passwort (obligatorisch)
• E-Mail (optional)

Das reicht für unsere App aus, um Benutzer zu registrieren und zu verwalten.

Wie Sie wahrscheinlich wissen, ist Apples Politik bezüglich der Speicherung von Benutzer-E-Mails sehr streng, daher empfehle ich, diese Informationen nicht zu erfragen oder aufzubewahren, da Sie sonst möglicherweise nicht genehmigt werden.

Da dies nur ein Tutorial ist, werde ich den Benutzer auffordern, diese Informationen einzugeben, nur damit Sie sehen können, wie es funktioniert.

Automatisch erstellte Benutzer- und Rollenklassen

Als ob das nicht schon hilfreich genug wäre, hat Ihre neu erstellte App bereits automatisch GraphQL-Abfragen und Mutationen für uns erstellt. Dies gilt sowohl für unsere automatisch erstellten Klassen als auch für jede andere Klasse, die Sie im Laufe der Zeit erstellen. Wir haben auch die Dokumentation für Sie!

Habe ich Ihnen schon gesagt, dass wir auch Autocomplete haben? Wir haben sie!

Meine erste Mutation wird also wie oben aussehen und unsere spezielle Mutation signUp() verwenden, um einen neuen Benutzer zu erstellen:

Die Abfrage ist abhängig von der Parse-Version, die Sie verwenden:

Parse 3.7.2:

mutation signUpUser($username: String!, $password: String!, $email: String) {
  Benutzer {
    signUp(
      Felder: { username: $username, password: $password, email: $email }
    ) {
      objectId
    }
  }
}

Parse 3.8:

Mutation signUpUser($username: String!, $password: String!, $email: String) {
    signUp(
      Felder: { username: $username, password: $password, email: $email }
    ) {
      objectId
    }
}

Parse 3.9:

mutation signUpUser($username: String!, $password: String!, $email: String) {
    signUp(
      Felder: { username: $username, password: $password, email: $email }
    ) {
      id
    }
}

Beachten Sie, dass ich meine Variablen username und password durch ein “!” am Ende ihres Typs obligatorisch mache, während email optional ist, da es kein “!” nach seinem Typ hat.

Am Ende gebe ich die objectId des neu angelegten Benutzers zurück.

Und wenn wir schon dabei sind, lassen Sie uns auch unsere GraphQL-Mutation für die Anmeldung eines bereits existierenden Benutzers codieren.
In diesem Fall sind sowohl der Benutzername als auch das Passwort obligatorisch, und ich werde das sessionToken für den Benutzer abrufen:

Parse 3.7.2

mutation logInUser($username: String!, $password: String!){
  Benutzer{
    logIn(benutzername: $benutzername, passwort: $passwort){
      sessionToken
    }
  }
}

Parse 3.8

mutation logInUser($Benutzername: String!, $Passwort: String!){
    logIn(benutzername: $benutzername, passwort: $passwort){
      sessionToken
    }
}

Parse 3.9

mutation logInUser($Benutzername: String!, $Passwort: String!){
    logIn(benutzername: $benutzername, passwort: $passwort){
      sessionToken
    }
}

Zu guter Letzt noch eine Mutation für die Abmeldung des Benutzers, die keinen Parameter benötigt und nur ein Boolean zurückgibt:

Parse 3.7.2

mutation logOutUser{
  Benutzer{
    logOut
  }
}

Parse 3.8

Mutation logOutUser{
    logOut
}

Parse 3.9

Mutation logOutUser{
    logOut
}

Fügen Sie alle diese Dateien in eine neue Datei mit dem Namen UserMutations.graphql ein. Speichern Sie auch Ihre schema.graphql-Datei, die Sie in unserem vorherigen Artikel heruntergeladen haben.

Bewahren Sie diese Dateien sicher auf, denn wir werden sie zu unserem…

SwiftUI-Projekt

Lassen Sie uns unser SwiftUI-Projekt erstellen.

Starten Sie XCode 11 und klicken Sie auf “Create a new XCode Project” im Welcome to XCode Fenster.
Wenn Sie dieses Fenster nicht erhalten, können Sie auch auf Datei > Neu > Projekt gehen.

Wählen Sie oben iOS App und dann Single View App. Geben Sie der App einen guten Namen und vergessen Sie nicht, Swift als Sprache und SwiftUI als Benutzeroberfläche auszuwählen:

Vergessen Sie nicht, SwiftUI als Benutzeroberfläche auszuwählen.

Installieren Sie nun den Apollo Client, wie Sie es in unserem Web-Api-Artikel gelernt haben, und fügen Sie danach die Dateien UserMutations.graphql und schema.graphql zu Ihrem Projekt hinzu.
Kompilieren Sie und fügen Sie die neu generierte Datei API.swift in das Projekt ein.

An dieser Stelle erwarte ich, dass Sie Folgendes haben:

• XCode 11 ist installiert und läuft
• Apollo-Client installiert und in Ihr XCode-Projekt integriert
• UserMutations.graphql und schema.graphql Dateien zu Ihrem XCode Projekt hinzugefügt
• Die generierte Datei API.swift wurde zu Ihrem XCode-Projekt hinzugefügt.

Ihr Projekt sollte in etwa so aussehen:

Alles integriert in XCode 11

Wir sind nun bereit, mit SwiftUI’ing zu beginnen.

Melden Sie sich jetzt bei Back4App an und beginnen Sie mit der Erstellung Ihrer Instagram-Klon-App.

Entscheidung über unsere Steuerelemente

Bevor wir uns bei einem Benutzer an- oder abmelden können, müssen wir diesen Benutzer erst einmal anlegen. Wir werden also zuerst unseren SignUp-Bildschirm programmieren.

Normalerweise können wir 4 bis 5 Steuerelemente in diesem Bildschirm haben:

• Eine Art von Text, um dem Benutzer mitzuteilen, um welchen Bildschirm es sich handelt (Text)
• Benutzername (Texteingabe-Steuerelement)
• Passwort (sicheres Texteingabefeld)
• Passwort bestätigen (optional, abhängig von der Plattform, sicheres Texteingabefeld)
• E-Mail (Steuerelement für formatierte Texteingabe)
• Schaltfläche “Anmelden” (Schaltfläche)

Da es sich um eine mobile Anwendung handelt, habe ich mich entschieden, das Texteingabe-Steuerelement “Passwort bestätigen” nicht einzufügen, da die meisten mobilen Plattformen es dem Benutzer ermöglichen, das zuletzt eingegebene Zeichen zu sehen, was in den meisten Fällen ausreicht, um festzustellen, ob das Passwort richtig eingegeben wurde.

Diese Steuerelemente werden vertikal ausgerichtet angezeigt, eines unter dem anderen, in der oben genannten Reihenfolge, jedes mit seiner eigenen Farbe.

Die eigentliche Erstellung der Benutzeroberfläche

Wie bereits erwähnt, verwende ich nicht macOS Catalina, so dass ich die Vorschau nicht aktiviert habe, aber ich werde kompilieren und Ihnen die Ergebnisse zusammen mit meinem Code zeigen.

Erstellen Sie eine neue SwiftUI-Ansicht, indem Sie auf Datei > Neu > Datei gehen und dann SwiftUI-Ansicht im Abschnitt Benutzeroberfläche wählen.

Nennen Sie diese Datei SignUpView.swift und sie wird in Ihr Projekt integriert.

Sie werden feststellen, dass die neu erstellte Ansicht bereits ein Text-Steuerelement mit der Zeichenfolge “Hello World!” enthält.

Das Schöne an Swift ist, dass Sie mehrere einfache Ansichten erstellen können, die nur die für diese Ansicht erforderlichen Steuerelemente enthalten, und dann mehrere Ansichten zu einer komplexeren Ansicht zusammenführen können. Das ist Objektorientierung in Reinkultur.

Wir haben uns entschieden, unsere Steuerelemente vertikal auszurichten, und SwiftUI hat dafür ein spezielles Steuerelement namens VStack (Vertical Stack): Alles, was sich innerhalb eines VStacks befindet, wird automatisch vertikal gestapelt. Fügen wir also testweise unser VStack-Steuerelement zu unserer ContentView.swift hinzu und fügen darin zweimal die SignUpView ein:

SignUpView zweimal im VStack hinzugefügt: es zeigt zweimal vertikal ausgerichtet

Nun, wie cool ist das denn! Wenn wir mehr Steuerelemente brauchen, können wir sie einfach hinzufügen!

Entfernen wir den VStack und die Duplizität und haben nur eine SignUpView() in dieser Ansicht und gehen dann zurück zu unserer SignUpView und fangen an, sie zu ändern, da wir bereits die Ergebnisse unseres Tests gesehen haben. Ihr ContentView sollte jetzt ähnlich aussehen:

struct ContentView: View {
    var body: some View {
        SignUpView()
    }
}

Wir wissen bereits, dass wir den VStack mit Text am oberen Rand des Bildschirms benötigen, also fügen wir den VStack stattdessen zur SignUpView hinzu und ändern die “Hello World!”-String in etwas Nützliches, wie “Sign Up”. Unser SignUpView sollte wie folgt aussehen:

struct SignUpView: View {
    var body: some Ansicht {
        VStack{
            Text("Sign Up")
        }
    }
}

Und da wir bereits wissen, welche Steuerelemente wir darunter hinzufügen müssen, können wir hinzufügen:

• ein TextFeld für den Benutzernamen
• ein SecureField für Passwort
• ein TextFeld für Email
• eine Schaltfläche für die Anmeldung

Die TextFields und SecureFields sind beide dem alten UITextField recht ähnlich, müssen sich aber auf die Bindung an den Status verlassen, also werden wir diese als:

Control(“Platzhalter”, text: stateValueToBindTo)

und der allererste Schritt besteht darin, die Zustände zu deklarieren, an die gebunden werden soll:

@State var username: String = ""
@State var passwort: String = ""
@State var email: String = ""

Nun können wir damit beginnen, unsere Steuerelemente hinzuzufügen:

Text("Sign Up")
TextFeld("Benutzername", text: $Benutzername)
SecureField("Kennwort", Text: $Kennwort)
TextFeld("E-Mail (optional)", text: $email)

Zu guter Letzt können wir unseren Button hinzufügen, der wie folgt aufgebaut ist:

Button(action: {
//Code, der bei Auslösung ausgeführt wird
}){
//Inhalt
}

Wie Sie wahrscheinlich bemerkt haben, funktioniert es genauso wie ein UIButton, aber seine Struktur ist viel flexibler, da wir seinen Inhalt programmatisch definieren können und praktisch alles hinzufügen können: einen Text, ein Bild. Ganz wie Sie wollen.

Die alte target/action-Struktur ist verschwunden und wurde durch eine neue action:{}-Struktur ersetzt, die das Verhalten beim Antippen steuert.

Unsere Schaltfläche wird einen Text mit der Aufschrift “Sign Up!” enthalten:

Button(action: {

}){
    Text("Sign Up!")
}

Und Ihr endgültiger Code sollte so aussehen:

struct SignUpView: View {
    @State var username: String = ""
    @State var passwort: String = ""
    @State var email: String = ""
    
    var body: some Ansicht {
        VStack{
            Text("Anmelden")
            TextFeld("Benutzername", text: $Benutzername)
            SecureField("Kennwort", text: $Kennwort)
            TextFeld("E-Mail (optional)", text: $email)
            Button(action: {
                
            }){
                Text("Sign Up!")
            }
        }
    }
}

Und wie sieht es mit unserer Vorschau aus?

Sieht vielversprechend aus, aber wir können noch einiges verbessern, indem wir ein paar visuelle Eigenschaften festlegen.
Und das Tolle an SwiftUI ist, dass man visuelle Eigenschaften zum Code hinzufügen und die Änderungen in Echtzeit sehen kann!
Probieren wir einige aus!

Zuerst deklarieren wir die Farben, die wir verwenden werden

let lightGreyColor = Farbe(rot: 239.0/255.0, grün: 243.0/255.0, blau: 244.0/255.0, Deckkraft: 1.0)
    let lightBlueColor = Farbe(rot: 36,0/255,0, grün: 158,0/255,0, blau: 235,0/255,0, Deckkraft: 1,0)

Dann fügen wir ein paar nette Features hinzu:

Etwas Padding, damit wir etwas Platz zwischen diesen Elementen haben.
Legen Sie die Eigenschaften background und foregroundColor fest, damit wir Steuerelemente haben, die mit unserer Marke konsistent sind.
Etwas cornerRadius, damit wir abgerundete Ecken haben können.
Und die Einstellung von font und fontWeight, um die Dinge zu verschönern.
Voilà!

Ist das nun schön oder nicht?
Nur damit Sie an dieser Stelle den Überblick über unseren Code behalten:

struct SignUpView: View {
    @State var username: String = ""
    @State var passwort: String = ""
    @State var email: String = ""
    
    let lightGreyColor = Farbe(rot: 239,0/255,0, grün: 243,0/255,0, blau: 244,0/255,0, Deckkraft: 1,0)
    let lightBlueColor = Farbe(rot: 36,0/255,0, grün: 158,0/255,0, blau: 235,0/255,0, Deckkraft: 1,0)

    
    var body: some Ansicht {
        VStack{
            Text("Anmelden")
                .font(.largeTitle)
                .foregroundColor(lightBlueColor)
                .fontWeight(.semibold)
                .padding(.bottom, 20)
            TextFeld("Benutzername", text: $Benutzername)
                .padding()
                .background(hellGrauFarbe)
                .cornerRadius(5.0)
                .padding(.bottom, 20)
            SecureField("Kennwort", text: $kennwort)
                .padding()
                .background(hellGrauFarbe)
                .cornerRadius(5.0)
                .padding(.bottom, 20)
            TextFeld("E-Mail (optional)", text: $email)
                .padding()
                .background(hellGrauFarbe)
                .cornerRadius(5.0)
                .padding(.bottom, 20)
            Button(action: {
                
            }){
                Text("Melden Sie sich an!")
                 .font(.headline)
                 .foregroundColor(.white)
                 .padding()
                 .frame(Breite: 220, Höhe: 60)
                 .background(hellblauFarbe)
                 .cornerRadius(15.0)
            }
        }.padding()
    }
}

Wir haben also unseren schönen, glänzenden Bildschirm fast fertig.
Wie wäre es mit…

Etwas Funktionalität

Nun, da wir unser UI fertig haben, ist es an der Zeit, unsere Apollo-Aufrufe zu unseren GraphQL-Methoden hinzuzufügen.

Da wir diese Aufrufe in fast allen Views verwenden werden, sollten wir einen Apollo-Client an einem Ort erstellen, an dem alle Views darauf zugreifen können. Dieser Ort ist die AppDelegate.swift.

Deklarieren Sie Ihren Apollo-Client dort unterhalb des

importieren UIKit

und dem Beginn des Codeblocks

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
...

so wie wir es Ihnen in unserem letzten Artikel gezeigt haben, und von nun an können alle Views GraphQL-Abfragen und Mutationen durchführen.
Sie müssen zuerst das Apollo Framework importieren und dann Ihren Client wie folgt instanziieren:

Apollo importieren

// Apollo Client Initialisierung.
// Mehr dazu hier: https://www.back4app.com/docs/ios/swift-graphql
let apollo: ApolloClient = {
    let Konfiguration = URLSessionConfiguration.default
    configuration.httpAdditionalHeaders = [
        "X-Parse-Application-Id": "YourAppIdHere",
        "X-Parse-Client-Key": "YourClientKeyHere"
    ]
    
    let url = URL(string: "https://parseapi.back4app.com/graphql")!
    
    return ApolloClient(
        NetzwerkTransport: HTTPNetworkTransport(
            url: url,
            Konfiguration: Konfiguration
        )
    )
}()

Ersetzen Sie einfach die Zeichenketten YourAppIdHere und YourClientKeyHere durch Ihre aktuellen Werte und wir können fortfahren.

Wie Sie wahrscheinlich schon erraten haben, müssen wir unsere Mutation für SignUp durchführen, wenn wir auf die Schaltfläche SignUp klicken, also rufen wir sie im Aktionsblock auf:

            // Führen Sie die Mutation für SignUpUser durch und übergeben Sie die Parameter, die wir gerade von unseren TextFields erhalten haben
            apollo.perform(mutation: SignUpUserMutation(username: self.username, password: self.password, email: self.email)){ result in
                // Schalten wir das Ergebnis um, damit wir ein erfolgreiches Ergebnis von einem Fehler unterscheiden können
                switch ergebnis {
                    // Im Falle eines Erfolgs
                    case .success(let graphQLResult):
                        // Wir versuchen, unser Ergebnis zu parsen
                        if let objId = graphQLResult.data?.users?.signUp.objectId {
                            print ("Benutzer erstellt mit ObjectId: " + objId)
                        }
                        // aber im Falle eines GraphQL-Fehlers geben wir diese Meldung aus
                        else if let errors = graphQLResult.errors {
                            // GraphQL-Fehler
                            print(errors)
                            
                        }
                    // Im Falle eines Fehlers geben wir diese Meldung aus
                    case .failure(let error):
                      // Netzwerk- oder Antwortformatfehler
                      print(error)
                }
            }

Das wird funktionieren, aber diese print()-Methoden werden nur auf der Konsole ausgegeben. Wir müssen unserem Benutzer eine Warnung präsentieren, also ändern wir sie in eine Warnung mit der folgenden Struktur:

Alert(title: Text(“Titel”), message: Text(“Nachricht”), dismissButton: .default(Text(“TextOfButton”)))

Da wir den Titel und die Nachricht zur Laufzeit ändern müssen, müssen wir eine Struct setzen, um diese Werte zu behandeln, da self-Variablen zur Laufzeit nicht geändert werden können:

struct Message {
    var alertTitle: String = ""
    var alertText: String = ""
}

var myMessage = Nachricht()

Und erstellen Sie auch einen Status, damit die Ansicht weiß, wann der Alarm angezeigt werden soll:

@State private var showingAlert = false

Und unser vollständiger Code für unsere Button-Aktion sollte so aussehen:

Button(action: {
            // Führen Sie die SignUpUser-Mutation durch und übergeben Sie die Parameter, die wir gerade von unseren TextFields erhalten haben
            apollo.perform(mutation: SignUpUserMutation(username: self.username, password: self.password, email: self.email)){ result in
                // Schalten wir das Ergebnis um, damit wir ein erfolgreiches Ergebnis von einem Fehler unterscheiden können
                switch ergebnis {
                    // Im Falle eines Erfolgs
                    case .success(let graphQLResult):
                        // Wir versuchen, unser Ergebnis zu parsen
                        if let objId = graphQLResult.data?.users?.signUp.objectId {
                            myMessage.alertTitle = "Juhu!"
                            myMessage.alertText = "Benutzer hat sich angemeldet!"
                            
                            self.showingAlert = true

                            print ("Benutzer erstellt mit ObjectId: " + objId)
                        }
                        // aber im Falle eines GraphQL-Fehlers wird diese Meldung angezeigt
                        else if let errors = graphQLResult.errors {
                            // GraphQL-Fehler

                            myMessage.alertTitle = "Ups!"
                            myMessage.alertText = "Wir haben einen GraphQL-Fehler erhalten: " + errors.description
                            self.showingAlert = true

                            print(errors)
                        }
                    // Im Falle eines Fehlers wird die Meldung angezeigt
                    case .failure(let error):
                        // Netzwerk- oder Antwortformatfehler
                        myMessage.alertTitle = "Ups!"
                        myMessage.alertText = "Wir haben einen Fehler erhalten: " + error.localizedDescription
                        self.showingAlert = true
                        
                        print(error)
                }
            }
           }){
               Text("Melden Sie sich an!")
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .frame(Breite: 220, Höhe: 60)
                .background(hellblauFarbe)
                .cornerRadius(15.0)
           }
           .alert(isPresented: $showingAlert) {
                Alert(title: Text(myMessage.alertTitle), message: Text(myMessage.alertText)), dismissButton: .default(Text("OK")))
           }

Sieht vielversprechend aus, nicht wahr?

Also iiiiiiiiiiiiit ist es Zeit

Kompilieren und ausführen. Versuchen Sie, einen neuen Benutzer anzumelden und Sie sollten folgendes erhalten…

Schauen wir mal, ob der Benutzer in unserem Parse Dashboard angelegt ist!

Fazit

Sie haben eine voll funktionsfähige SwiftUI-Ansicht erstellt, die GraphQL-Mutationen mit Apollo Client durchführt. Wie genial ist das denn!

Wir werden weiter an unserer Instagram-Klon-App arbeiten! Die nächsten Schritte sind das Ein- und Ausloggen und der Beitrag ist bereits in der Mache!

Bleibt dran!

Referenz

• Teil 1 dieser Serie ist Instagram Clone.
• Teil 2 ist Instagram Login.
• Teil 3 ist Instagram Profil.
• Teil 4 ist Instagram HomeView.
• Sehen Sie das App-Backend unter iOS Instagram Clone Backend.
• Laden Sie ein iOS Instagram Clone Projekt mit Quellcode herunter und starten Sie mit Back4App.

Melden Sie sich jetzt bei Back4App an und beginnen Sie, Ihre Instagram Clone App zu erstellen.