Kloningan Instagram menggunakan SwiftUI dan GraphQL

your-own-instagram-clone-starring-swiftui-and-graphql-digite-uma-mensagem-aqui - Your Application's Backend, Simplified

Hari ini kami memulai serangkaian posting blog yang akan mengajarkan Anda cara menggunakan banyak alat keren untuk membangun Jejaring Sosial Anda sendiri: aplikasi yang menyerupai Instagram.

Kami tidak akan berhemat dalam hal teknologi dan akan menggunakan yang terbaru dan terhebat: Parse, GraphQL, beberapa NodeJS dan terutama framework Apple terbaru (yang belum dirilis) SwiftUI.

Ini akan membutuhkan beberapa posting agar dapat berfungsi penuh, tetapi ketika kita sampai di sana, Anda akan menyadari betapa sederhananya untuk membuat ide Anda berjalan dan berjalan dengan sedikit usaha di sini di Back4app.

Untuk pembelajaran yang lebih baik, unduh proyek Klon Instagram iOS dengan kode sumber.

Jadi, sepertinya sudah waktunya untuk…

Contents

0.1 Apakah Anda ingin memulai dengan cepat?
0.2 Beberapa Pengantar
0.3 Jadi, apa yang Anda perlukan?
0.4 Kelas pertama kita
0.5 Memutuskan Kontrol Kita
0.6 Sebenarnya membangun UI
0.7 Beberapa Fungsionalitas
0.8 Jadi iiiiiiiiiiiit’s tiiiiiime

1 Kesimpulan
- 1.1 Referensi

Apakah Anda ingin memulai dengan cepat?

Klon Aplikasi ini dari Hub kami dan mulai gunakan tanpa kerepotan!

Beberapa Pengantar

Anda mungkin sudah mengetahui manfaat besar yang dibawa Parse ke proses pengembangan Anda, terutama jika dihosting di Back4app, karena seperangkat alat kami meningkatkan produktivitas dalam jumlah besar.

Dan tulisan terbaru kami tentang GraphQL menunjukkan kepada Anda betapa mudahnya mempertahankan pengembangan API dari waktu ke waktu jika Anda menggunakannya. Jika Anda melewatkan postingan tersebut, saya sangat menyarankan agar Anda meluangkan waktu untuk membacanya, karena itu akan sangat meningkatkan pemahaman Anda seiring berjalannya waktu.
Anda dapat membaca lebih lanjut tentang GraphQL dan kami juga memiliki postingan lengkap tentang cara menggunakan di artikel Web API.
Anda juga dapat melihat beberapa integrasi dengan NodeJS di Cloud Code Functions yang membaca GraphQL dan NodeJS.

Itu meninggalkan kita dengan SwiftUI.
SwiftUI, menurut Apple, adalah “cara yang inovatif dan sangat sederhana untuk membangun antarmuka pengguna di semua platform Apple dengan kekuatan Swift”.

Saya sendiri suka berpikir bahwa SwiftUI lebih dari itu.

Jika Anda, seperti saya, mengembangkan perangkat lunak untuk beberapa waktu, Anda mungkin tahu bahwa komunitas pengembang selalu terpecah antara kenyamanan menggunakan Storyboard, antarmuka pembuatan UI seret dan lepas Apple, atau kekuatan UI terprogram.

SwiftUI hadir untuk memberikan yang terbaik dari kedua hal tersebut: cukup mudah dipelajari oleh pemula, namun tetap mempertahankan kemudahan pemeliharaan UI yang dikodekan.
Kombinasikan dengan rendering real-time, sehingga pengembang dapat dengan mudah melihat hasil visual dari apa yang mereka kodekan, dan membuatnya dua arah sehingga jika Anda mengubah kode, maka akan tercermin pada UI, dan secara grafis mengubah UI dan akan tercermin pada kode, dan apa yang Anda dapatkan adalah salah satu cara yang paling ampuh dan mudah untuk menghadirkan UI yang dirancang dengan indah, namun tetap mudah dipelihara dari waktu ke waktu.

Jadi, apa yang Anda perlukan?

Pada saat penulisan artikel ini, Apple masih menguji beta macOS Catalina, XCode 11, iOS 13, dan beberapa produk lain yang akan segera diluncurkan.

Meskipun Anda bisa menggunakan XCode 11 dengan macOS Mojave, Anda akan membutuhkan Catalina untuk merender pratinjau SwiftUI secara real-time.

Tidak punya Catalina? Tidak ada Pratinjau untuk Anda!

Ini adalah keputusan yang harus Anda ambil karena saya menemukan bahwa mengubah perubahan dari Bash ke ZSH sebagai shell resmi macOS di Catalina merusak banyak alat dan skrip yang saya gunakan untuk alur kerja sehari-hari, saya memutuskan untuk tetap menggunakan Mojave untuk sementara waktu. Terserah Anda untuk memutuskan apakah Anda akan memperbarui atau tidak.

Selain itu, Anda juga memerlukan akun Back4app dengan Aplikasi yang telah dibuat. Anda dapat mempelajari cara membuat Aplikasi pertama Anda di dokumentasi Back4app.

Terakhir, kita akan menggunakan Apollo Client untuk mengintegrasikan GraphQL ke dalam proyek kita. Jika Anda tidak memiliki pengalaman dengan itu, saya telah menulis posting yang sangat rinci tentang cara mengkonfigurasi dan menggunakannya Otentikasi Web.

Jadi, bahkan sebelum kita mulai, Anda perlu:

XCode 11 terinstal (dengan macOS Catalina jika Anda ingin melihat Pratinjau)
Aplikasi baru Anda yang dibuat di Back4app
Klien Apollo yang sudah terinstal dan terkonfigurasi

Aplikasi saya akan dinamakan Back4Gram, karena akan menyerupai Instagram.

Kelas pertama kita

Saya selalu memberi tahu kalian tentang bagaimana Parse membuat kelas User, sehingga Anda dapat mendaftarkan pengguna baru dan mengautentikasi pengguna yang sudah ada, dan kelas Role, sehingga Anda dapat mengelompokkan pengguna dengan hak istimewa yang sama. Ini sangat bagus karena, setidaknya untuk autentikasi, kita tidak perlu membuat kelas apa pun.

Kelas User memiliki tiga properti yang dibuat secara otomatis, dua di antaranya wajib dan satu lagi opsional:

nama pengguna (wajib)
kata sandi (wajib)
email (opsional)

Itu sudah cukup bagi Aplikasi kita untuk mendaftarkan dan mengelola pengguna.

Seperti yang mungkin Anda ketahui, kebijakan Apple tentang penyimpanan email pengguna sangat ketat, jadi saya sarankan untuk tidak meminta atau menyimpan informasi tersebut atau Anda mungkin tidak akan disetujui.

Karena ini hanya tutorial, saya akan meminta pengguna untuk memasukkan informasi tersebut, supaya Anda dapat melihat cara kerjanya.

Kelas Pengguna dan Peran dibuat secara otomatis

Seolah-olah itu belum cukup membantu, Aplikasi yang baru Anda buat sudah memiliki Query dan Mutasi GraphQL yang dibuat secara otomatis untuk kita. Hal ini berlaku untuk kelas-kelas yang dibuat secara otomatis dan juga untuk kelas lain yang Anda buat dari waktu ke waktu. Kami juga menyediakan dokumentasi untuk Anda!

Apakah saya sudah mengatakan bahwa kami juga memiliki Pelengkapan Otomatis? Benar!

Jadi, Mutasi pertama saya akan seperti di atas, dan menggunakan mutasi khusus signUp() untuk membuat pengguna baru:

Kueri akan bergantung pada versi Parse yang Anda gunakan:

Parse 3.7.2:

mutasi signUpUser($username: String!, $password: String!, $email: String) {
  pengguna {
    signUp(
      fields: { username: $username, password: $password, email: $email }
    ) {
      objectId
    }
  }
}

Parse 3.8:

mutasi signUpUser($username: String!, $password: String!, $email: String) {
    signUp(
      field: { username: $username, password: $password, email: $email }
    ) {
      objectId
    }
}

Parse 3.9:

mutasi signUpUser($username: String!, $password: String!, $email: String) {
    signUp(
      field: { username: $username, password: $password, email: $email }
    ) {
      id
    }
}

Perhatikan bahwa saya membuat variabel nama pengguna dan kata sandi menjadi wajib dengan menggunakan tanda “!” di akhir jenisnya, sedangkan email bersifat opsional, dengan tidak menggunakan tanda “!” setelah jenisnya.

Pada akhirnya, saya mengembalikan objectId dari pengguna yang baru dibuat.

Dan karena kita sudah sampai di sini, mari kita juga membuat kode mutasi GraphQL kita untuk masuk ke pengguna yang sudah ada.
Dalam kasus ini, baik nama pengguna dan kata sandi adalah wajib, dan saya akan mengambil sessionToken untuk pengguna tersebut:

Parse 3.7.2

mutasi logInUser($username: String!, $password: String!){
  pengguna{
    logIn(username: $username, password: $password){
      sessionToken
    }
  }
}

Parse 3.8

mutasi logInPengguna($username: String!, $password: String!){
    logIn(username: $username, password: $password){
      sessionToken
    }
}

Parse 3.9

mutasi logInPengguna($username: String!, $password: String!){
    logIn(username: $username, password: $password){
      sessionToken
    }
}

Terakhir, sebuah mutasi bagi pengguna untuk keluar, yang tidak memerlukan parameter apa pun dan hanya mengembalikan sebuah Boolean:

Parse 3.7.2

mutasi logOutPengguna{
  pengguna{
    logOut
  }
}

Parse 3.8

mutasi logOutPengguna{
    logOut
}

Parse 3.9

mutasi logOutPengguna{ logOut
    logOut
}

Tambahkan semua itu ke file baru bernama UserMutations.graphql, dan juga, simpan file schema.graphql yang Anda pelajari cara mengunduhnya di artikel sebelumnya.

Simpan berkas-berkas tersebut dengan aman karena kita akan menambahkannya ke…

Proyek SwiftUI

Mari kita buat proyek SwiftUI kita.

Jalankan XCode 11 dan tekan “Create a new XCode Project” dari jendela Welcome to XCode.
Jika Anda tidak mendapatkan jendela tersebut, Anda bisa pergi ke File > New > Project.

Pilih Aplikasi iOS di bagian atas, lalu Aplikasi Tampilan Tunggal. Beri nama yang bagus dan jangan lupa untuk memilih Swift sebagai Bahasa dan SwiftUI sebagai Antarmuka Pengguna:

Jangan lupa untuk memilih SwiftUI sebagai Antarmuka Pengguna

Sekarang, instal Apollo Client seperti yang telah Anda pelajari di artikel web api kami, dan setelah itu, tambahkan file UserMutations.graphql dan schema.graphql ke dalam proyek Anda.
Kompilasi dan tambahkan file API.swift yang baru saja dibuat ke dalam proyek.

Pada titik ini, apa yang saya harapkan untuk Anda miliki adalah:

XCode 11 terinstal dan berjalan
Klien Apollo terinstal dan terintegrasi dalam Proyek XCode Anda
File UserMutations.graphql dan schema.graphql ditambahkan ke Proyek XCode Anda
File yang dihasilkan API.swift ditambahkan ke Proyek XCode Anda

Proyek Anda akan terlihat seperti ini:

Semuanya terintegrasi ke dalam XCode 11

Kita sekarang siap untuk memulai beberapa SwiftUI.

Daftar sekarang ke Back4App dan mulailah membangun Aplikasi Kloningan Instagram Anda.

Memutuskan Kontrol Kita

Sebelum kita dapat masuk atau keluar dari pengguna, kita harus membuat pengguna tersebut terlebih dahulu. Jadi kita akan membuat kode layar Pendaftaran kita terlebih dahulu.

Biasanya, kita dapat memiliki 4 hingga 5 kontrol di layar tersebut:

Beberapa jenis Teks untuk memberi tahu pengguna layar apa ini (teks)
Nama pengguna (kontrol entri teks)
Kata sandi (kontrol entri teks yang aman)
Konfirmasi Kata Sandi (opsional, tergantung platform, kontrol entri teks yang aman)
Email (kontrol entri teks yang diformat)
Tombol Daftar (tombol)

Karena ini akan menjadi aplikasi seluler, saya memutuskan untuk tidak meletakkan kontrol entri teks Konfirmasi Kata Sandi, karena sebagian besar platform seluler memungkinkan pengguna untuk melihat karakter yang terakhir diketik dan untuk sebagian besar kasus, hal itu sudah cukup bagi pengguna untuk menentukan apakah kata sandi diketik dengan benar.

Kontrol-kontrol tersebut akan ditampilkan sejajar secara vertikal, satu di bawah yang lain, sesuai urutan di atas, masing-masing dengan warnanya sendiri.

Sebenarnya membangun UI

Seperti yang saya sebutkan sebelumnya, saya tidak menggunakan macOS Catalina jadi saya tidak akan mengaktifkan Pratinjau, tetapi saya akan mengkompilasi dan menunjukkan hasilnya bersama dengan kode yang saya miliki.

Buat SwiftUI View baru dengan masuk ke File > New > File lalu pilih SwiftUI View di bagian User Interface.

Beri nama file tersebut SignUpView.swift dan file tersebut akan muncul terintegrasi ke dalam Project Anda.

Anda akan melihat bahwa tampilan yang baru dibuat telah memiliki kontrol Teks dengan string “Hello World!” di dalamnya.

Keindahan dari Swift adalah Anda dapat membuat beberapa tampilan sederhana, yang hanya berisi kontrol yang diperlukan untuk tampilan tersebut, dan kemudian menggabungkan beberapa tampilan menjadi tampilan yang lebih kompleks. Ini adalah Orientasi Objek yang terbaik.

Kami memutuskan untuk membuat kontrol kami sejajar secara vertikal dan SwiftUI memiliki kontrol khusus untuk itu bernama VStack (Vertical Stack): semua yang ada di dalam VStack akan secara otomatis ditumpuk secara vertikal, jadi, hanya untuk pengujian, mari kita tambahkan kontrol VStack ke ContentView.swift dan di dalamnya, tambahkan dua kali SignUpView:

Menambahkan SignUpView dua kali di VStack: ini menunjukkan dua kali sejajar secara vertikal

Sekarang, betapa kerennya itu! Jika kita membutuhkan lebih banyak kontrol, kita dapat terus menambahkannya!

Mari hapus VStack dan duplikasi dan hanya memiliki satu SignUpView() di View tersebut dan kemudian kembali ke SignUpView kita dan mulai mengubahnya, seperti yang telah kita lihat dari hasil pengujian kita. ContentView Anda seharusnya terlihat mirip dengan ini sekarang:

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

Kita sudah mengetahui bahwa kita akan membutuhkan VStack dengan Teks di bagian atas layar, jadi mari kita tambahkan VStack ke SignUpView dan ubah string “Hello World!” menjadi sesuatu yang berguna, seperti “Sign Up”. SignUpView kita akan terlihat seperti ini:

struct SignUpView: View {
    var body: beberapa View {
        VStack {
            Text("Mendaftar")
        }
    }
}

Dan karena kita sudah mengetahui kontrol mana yang harus kita tambahkan di bawahnya, kita dapat menambahkan:

sebuah TextField untuk Nama Pengguna
sebuah SecureField untuk Kata Sandi
sebuah TextField untuk Email
sebuah Tombol untuk mendaftar

TextField dan SecureField keduanya sangat mirip dengan UITextField lama, tetapi harus bergantung pada pengikatan ke state, jadi kita akan mendeklarasikannya sebagai:

Control(“Placeholder”, teks: stateValueToBindTo)

dan langkah pertama adalah mendeklarasikan state yang akan diikat:

@State var nama pengguna: String = ""
@State var kata sandi: String = ""
@State var email: String = ""

Setelah itu, kita dapat mulai menambahkan kontrol kita:

Text("Mendaftar")
TextField("Nama Pengguna", teks: $nama_pengguna)
SecureField("Kata Sandi", teks: $kata sandi)
TextField("Email (opsional)", teks: $email)

Terakhir, kita dapat menambahkan Button, yang memiliki struktur sebagai berikut:

Button(action: {
//Kode yang akan dijalankan ketika dipicu
}){
//Konten
}

Seperti yang mungkin Anda perhatikan, cara kerjanya hampir sama dengan UIButton, tetapi strukturnya jauh lebih fleksibel karena kita dapat menentukan isinya secara terprogram, menambahkan apa saja di sana: Teks, Gambar. Sebut saja.

Struktur target/tindakan yang lama sudah tidak ada, digantikan dengan struktur action:{} yang baru untuk menangani perilaku ketika diketuk.

Tombol kita akan memiliki Teks di dalamnya yang bertuliskan “Daftar!”, jadi mari kita tambahkan:

Tombol(action: {

}){
    Text("Daftar!")
}

Dan kode akhir Anda akan terlihat seperti ini:

struct SignUpView: View {
    @State var nama pengguna: String = ""
    @State var kata sandi: String = ""
    @State var email: String = ""
    
    var body: beberapa View {
        VStack {
            Text("Daftar")
            TextField("Nama Pengguna", teks: $nama_pengguna)
            SecureField("Kata Sandi", teks: $kata sandi)
            TextField("Email (opsional)", text: $email)
            Tombol (action: {
                
            }){
                Teks("Daftar!")
            }
        }
    }
}

Dan bagaimana dengan Pratinjau kami?

Terlihat menjanjikan, tetapi kita bisa meningkatkan banyak hal dengan mengatur beberapa properti visual.
Dan jika ada sesuatu yang sangat rapi tentang SwiftUI adalah Anda dapat menambahkan properti visual ke kode dan melihat perubahannya secara real-time juga!
Mari kita coba beberapa!

Pertama, mari kita deklarasikan warna yang akan kita gunakan

let lightGreyColor = Color(red: 239.0/255.0, green: 243.0/255.0, blue: 244.0/255.0, opacity: 1.0)
    let lightBlueColor = Color(red: 36.0/255.0, green: 158.0/255.0, blue: 235.0/255.0, opacity: 1.0)

kemudian mari kita tambahkan beberapa fitur yang bagus:

Beberapa Padding sehingga kita memiliki ruang di antara elemen-elemen tersebut.
Atur properti latar belakang dan latar depan sehingga kita memiliki kontrol yang konsisten dengan merek kita.
Beberapa cornerRadius sehingga kita dapat memiliki sudut yang membulat.
Dan mengatur font dan fontWeight untuk membuat semuanya lebih bagus.
Voila!

Apakah itu bagus atau tidak?
Supaya Anda tetap melacak kode kita pada titik ini:

struct SignUpView: View {
    @State var nama pengguna: String = ""
    @State var kata sandi: String = ""
    @State var email: String = ""
    
    let lightGreyColor = Color(red: 239.0/255.0, green: 243.0/255.0, blue: 244.0/255.0, opacity: 1.0)
    let lightBlueColor = Color(red: 36.0/255.0, green: 158.0/255.0, blue: 235.0/255.0, opacity: 1.0)

    
    var body: some View {
        VStack {
            Text("Daftar")
                .font(.largeTitle)
                .foregroundColor (warna biru muda)
                .fontWeight(.semibold)
                .padding(.bottom, 20)
            TextField("Nama Pengguna", text: $nama_pengguna)
                .padding()
                .background(lightGreyColor)
                .cornerRadius(5.0)
                .padding(.bottom, 20)
            SecureField("Kata Sandi", text: $kata sandi)
                .padding()
                .background(lightGreyColor)
                .cornerRadius(5.0)
                .padding(.bottom, 20)
            TextField("Email (opsional)", text: $email)
                .padding()
                .background(lightGreyColor)
                .cornerRadius(5.0)
                .padding(.bottom, 20)
            Tombol (action: {
                
            }){
                Text("Daftar!")
                 .font(.headline)
                 .foregroundColor(.white)
                 .padding()
                 .frame(width: 220, height: 60)
                 .background(lightBlueColor)
                 .cornerRadius(15.0)
            }
        } .padding()
    }
}

Jadi, layar mengkilap yang bagus sudah hampir siap.
Bagaimana dengan…

Beberapa Fungsionalitas

Sekarang setelah kita menyiapkan dan menyelesaikan UI kita, sekarang saatnya untuk menambahkan pemanggilan Apollo ke metode GraphQL.

Karena kita akan menggunakan pemanggilan tersebut di hampir semua View, kita harus membuat klien Apollo di tempat di mana semua view dapat mengaksesnya. Tempat tersebut adalah AppDelegate.swift.

Deklarasikan klien Apollo Anda di sana di bawah perintah

import UIKit

dan awal dari blok kode

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

seperti yang kami tunjukkan pada artikel sebelumnya, dan mulai sekarang semua View dapat melakukan query dan mutasi GraphQL.
Pertama-tama Anda harus mengimpor framework Apollo dan kemudian menginstansiasi klien Anda seperti ini:

import Apollo

// Inisialisasi Klien Apollo.
// Lebih lanjut tentang hal ini di sini: https://www.back4app.com/docs/ios/swift-graphql
let apollo: ApolloClient = {
    let configuration = URLSessionConfiguration.default
    configuration.httpAdditionalHeaders = [
        "X-Parse-Application-Id": "YourAppIdHere",
        "X-Parse-Kunci-Klien": "YourClientKeyHere"
    ]
    
    let url = URL(string: "https://parseapi.back4app.com/graphql")!
    
    return ApolloClient(
        networkTransport: HTTPNetworkTransport(
            url: url,
            konfigurasi: konfigurasi
        )
    )
}()

Cukup ganti string YourAppIdHere dan YourClientKeyHere dengan nilai yang ada saat ini dan kita dapat melanjutkan.

Seperti yang mungkin Anda duga, kita harus melakukan mutasi untuk SignUp ketika kita mengklik tombol SignUp, jadi, di blok aksi, mari kita panggil:

            // Lakukan mutasi SignUpUser, dengan mengoper parameter yang baru saja kita dapatkan dari TextFields kita
            apollo.perform(mutasi: SignUpUserMutation(username: self.username, password: self.password, email: self.email)){ menghasilkan
                // Mari kita alihkan hasilnya agar kita dapat memisahkan yang berhasil dari yang gagal
                switch hasil {
                    // Dalam kasus sukses
                    case .success(let graphQLResult):
                        // Kami mencoba untuk mem-parse hasil kami
                        if let objId = graphQLResult.data?.users?.signUp.objectId {
                            print ("Pengguna dibuat dengan ObjectId: " + objId)
                        }
                        // tetapi jika terjadi kesalahan GraphQL, kami menampilkan pesan tersebut
                        else if let errors = graphQLResult.errors {
                            // Kesalahan GraphQL
                            print(errors)
                            
                        }
                    // Jika terjadi kegagalan, kita menampilkan pesan tersebut
                    case .failure(let error):
                      // Kesalahan jaringan atau format respons
                      print(error)
                }
            }

Hal itu akan bekerja, namun metode print() tersebut hanya akan mencetak ke konsol. Kita perlu menampilkan Alert kepada pengguna kita, jadi mari kita ubah menjadi Alert, dengan struktur sebagai berikut:

Peringatan (judul: Text(“Judul”), message: Text(“Pesan”), dismissButton: .default(Text(“TextOfButton”)))

Karena kita perlu mengubah judul dan pesan pada saat runtime, kita harus mengatur sebuah Struct untuk menangani nilai-nilai tersebut, karena variabel self tidak dapat diubah pada saat runtime:

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

var myMessage = Message()

Dan juga membuat State sehingga View dapat mengetahui kapan harus menampilkan peringatan:

@State private var showingAlert = false

Dan kode lengkap untuk aksi Button kita seharusnya seperti ini:

Button(action: {
            // Lakukan mutasi SignUpUser, dengan mengoper parameter yang baru saja kita dapatkan dari TextField kita
            apollo.perform(mutasi: SignUpUserMutation(username: self.username, password: self.password, email: self.email)){ menghasilkan
                // Mari kita alihkan hasilnya agar kita dapat memisahkan yang berhasil dari yang gagal
                switch hasil {
                    // Dalam kasus sukses
                    case .success(let graphQLResult):
                        // Kami mencoba untuk mem-parse hasil kami
                        if let objId = graphQLResult.data?.users?.signUp.objectId {
                            myMessage.alertTitle = "Yay!"
                            myMessage.alertText = "Pengguna telah mendaftar!"
                            
                            self.showingAlert = true

                            print ("Pengguna dibuat dengan ObjectId: " + objId)
                        }
                        // tetapi jika terjadi kesalahan GraphQL, kami menampilkan pesan tersebut
                        else if let errors = graphQLResult.errors {
                            // Kesalahan GraphQL

                            myMessage.alertTitle = "Ups!"
                            myMessage.alertText = "Kami mendapatkan kesalahan GraphQL: " + errors.description
                            self.showingAlert = true

                            print(errors)
                        }
                    // Jika terjadi kegagalan, kita menampilkan pesan tersebut
                    case .failure(let error):
                        // Kesalahan jaringan atau format respons
                        myMessage.alertTitle = "Ups!"
                        myMessage.alertText = "Kami mengalami kesalahan: " + error.localizedDescription
                        self.showingAlert = true
                        
                        print(error)
                }
            }
           }){
               Text("Daftar!")
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .frame(width: 220, height: 60)
                .background(lightBlueColor)
                .cornerRadius(15.0)
           }
           .alert(isPresented: $showingAlert) {
                Peringatan (judul: Text(myMessage.alertTitle), pesan: Text(myMessage.alertText), dismissButton: .default(Text("OK")))
           }

Terlihat menjanjikan, ya?

Jadi iiiiiiiiiiiit’s tiiiiiime

Kompilasi dan jalankan. Coba daftarkan pengguna baru dan Anda akan mendapatkan…

Mari kita lihat apakah pengguna tersebut sudah dibuat di Dasbor Parse kita!

Kesimpulan

Anda telah membuat tampilan SwiftUI yang berfungsi penuh yang melakukan mutasi GraphQL menggunakan Apollo Client. Betapa mengagumkannya itu!

Kami akan terus bekerja pada Aplikasi kloningan Instagram kami! Langkah selanjutnya adalah Masuk dan keluar dan postingan sudah ada di dalam oven!

Nantikan terus!

Referensi

Bagian 1 dari seri ini adalah Klon Instagram.
Bagian 2 adalah Login Instagram.
Bagian 3 adalah Profil Instagram.
Bagian 4 adalah Tampilan Beranda Instagram.
Lihat backend aplikasi di iOS Instagram Clone Backend.
Unduh proyek Instagram Clone iOS dengan kode sumber dan mulai gunakan Back4App.

Daftar sekarang ke Back4App dan mulai membangun Aplikasi Instagram Clone Anda.