SwiftUI ve GraphQL kullanan bir Instagram klonu
Bugün size kendi Sosyal Ağınızı oluşturmak için birçok harika aracı nasıl kullanacağınızı öğretecek bir dizi blog yazısına başlıyoruz: Instagram’a benzeyen bir uygulama.
Teknolojiden tasarruf etmeyeceğiz ve en son ve en iyisini kullanacağız: Parse, GraphQL, biraz NodeJS ve özellikle Apple’ın (henüz piyasaya sürülmemiş) en yeni çerçevesi SwiftUI.
Bunun tamamen işlevsel olması için birkaç gönderi gerekecek, ancak oraya ulaştığımızda, Back4app’ta fikirlerinizi çok az çabayla çalıştırmanın ne kadar basit olabileceğini fark edeceksiniz.
Daha iyi öğrenmek için iOS Instagram Clone projesini kaynak koduyla birlikte indirin.
Görünüşe göre zamanı geldi…
Contents
Hızlı bir başlangıç mı istiyorsunuz?
Bu Uygulamayı Hub’ ımızdan klonlayın ve herhangi bir güçlük çekmeden kullanmaya başlayın!
Bazı Giriş
Muhtemelen Parse’ın geliştirme sürecinize getirdiği büyük faydaları zaten biliyorsunuzdur, özellikle de Back4app’ta barındırılıyorsa, araç setimiz üretkenliği büyük miktarlarda artırır.
GraphQL hakkındaki son yazılarımız da, eğer kullanırsanız API geliştirmeyi zaman içinde sürdürmenin ne kadar kolay olabileceğini gösterdi. Bu yazıları kaçırdıysanız, zaman ayırmanızı ve okumanızı şiddetle tavsiye ederim, çünkü ilerledikçe anlayışınızı büyük ölçüde geliştireceklerdir.
GraphQL hakkında daha fazla bilgi edinebilirsiniz ve ayrıca Web API makalesinde nasıl kullanılacağı hakkında tam bir yazımız var.
Ayrıca GraphQL ve NodeJS’i okuyarak Cloud Code Functions’da NodeJS ile bazı entegrasyonları görebilirsiniz.
Bu bizi SwiftUI ile baş başa bırakıyor.
SwiftUI, Apple’a göre “Swift’in gücüyle tüm Apple platformlarında kullanıcı arayüzleri oluşturmanın yenilikçi ve son derece basit bir yolu”.
Ben SwiftUI’nin bundan daha fazlası olduğunu düşünüyorum.
Eğer siz de benim gibi bir süredir yazılım geliştiriyorsanız, geliştirici topluluğunun her zaman Apple’ın sürükle bırak kullanıcı arayüzü oluşturma arayüzü olan Storyboards’u kullanmanın rahatlığı ya da programatik kullanıcı arayüzünün gücü arasında bölündüğünü biliyorsunuzdur.
SwiftUI her iki dünyanın da en iyisini sunmaya geliyor: yeni başlayanların öğrenmesi için yeterince kolayken, kodlanmış bir kullanıcı arayüzünün sürdürülebilirliğini koruyor.
Bunu gerçek zamanlı oluşturma ile birleştirin, böylece geliştiriciler kodladıkları şeyin görsel çıktısını kolayca görebilir ve iki yönlü hale getirin, böylece kodu değiştirirseniz, kullanıcı arayüzüne yansıyacak ve kullanıcı arayüzünü grafik olarak değiştirirseniz koda yansıyacaktır ve elde ettiğiniz şey, güzel tasarlanmış, ancak zaman içinde korunabilir kullanıcı arayüzleri sunmanın en güçlü ama kolay yollarından biridir.
Peki, neye ihtiyacınız olacak?
Bu yazının yazıldığı sırada Apple hala yeni macOS Catalina, XCode 11, iOS 13 ve yakında raflarda yerini alacak diğer birkaç ürünün beta testlerini sürdürüyordu.
XCode 11’i macOS Mojave ile kullanabilseniz de, SwiftUI’nin önizlemelerini gerçek zamanlı olarak oluşturmak için Catalina’ya ihtiyacınız olacak.
Catalina yok mu? Sizin için Önizleme yok!
Catalina’da resmi macOS kabuğu olarak Bash’ten ZSH’ye geçişin günlük iş akışım için kullandığım birçok araç ve komut dosyamı bozduğunu gördüğümden, bir süre Mojave’de kalmaya karar verdim. Güncelleme yapıp yapmayacağınıza karar vermek size kalmış.
Ayrıca, bir Uygulama oluşturulmuş bir Back4app hesabına ihtiyacınız olacak. İlk Uygulamanızı nasıl oluşturacağınızı Back4app’in dokümantasyonundan öğrenebilirsiniz.
Son olarak, GraphQL’i projemize entegre etmek için Apollo Client kullanacağız. Eğer bu konuda deneyiminiz yoksa, Web Authentication‘ın nasıl yapılandırılacağı ve kullanılacağı hakkında çok detaylı bir yazı yazdım.
Yani, başlamadan önce şunlara ihtiyacınız olacak:
- XCode 11 yüklü (Önizlemeleri görmek istiyorsanız macOS Catalina ile)
- Back4app’te oluşturulan yeni Uygulamanız
- Apollo İstemcisi kuruldu ve yapılandırıldı
Uygulamamın adı Instagram’a benzeyeceği için Back4Gram olacak.
İlk Sınıfımız
Sizlere her zaman Parse’ın yeni kullanıcılar kaydedebilmeniz ve mevcut kullanıcıların kimliklerini doğrulayabilmeniz için Kullanıcı sınıfını ve benzer ayrıcalıklara sahip kullanıcıları gruplayabilmeniz için Rol sınıfını nasıl oluşturduğunu anlatıyorum. Bu harika bir şey çünkü en azından kimlik doğrulama için herhangi bir sınıf oluşturmamız gerekmiyor.
User sınıfı, ikisi zorunlu ve biri isteğe bağlı olmak üzere otomatik olarak oluşturulan üç özelliğe sahiptir:
- kullanıcı adı (zorunlu)
- şifre (zorunlu)
- e-posta (isteğe bağlı)
Bunlar Uygulamamızın kullanıcıları kaydetmesi ve yönetmesi için yeterlidir.
Muhtemelen bildiğiniz gibi, Apple’ın kullanıcıların e-postalarını saklama politikası çok katıdır, bu nedenle bu bilgileri istememenizi veya saklamamanızı öneririm, aksi takdirde onaylanmayabilirsiniz.
Bu sadece bir eğitim olduğu için, nasıl çalıştığını görebilmeniz için kullanıcıdan bu bilgileri girmesini isteyeceğim.
Otomatik olarak oluşturulan Kullanıcı ve Rol sınıfları
Sanki bu yeterince yardımcı olmamış gibi, yeni oluşturduğunuz Uygulama zaten bizim için otomatik olarak oluşturulmuş GraphQL Sorgularına ve Mutasyonlarına sahiptir. Bu, otomatik olarak oluşturulan sınıflarımız ve zaman içinde oluşturduğunuz diğer sınıflar için de geçerlidir. Sizi dokümantasyonla da destekliyoruz!
Otomatik Tamamlama özelliğimiz olduğunu söylemiş miydim? Evet var!
İlk Mutasyonum yukarıdaki gibi olacak ve yeni bir kullanıcı oluşturmak için özel mutasyonumuz signUp()’ı kullanacak:
Sorgu, kullandığınız Parse sürümüne bağlı olacaktır:
Parse 3.7.2:
mutation signUpUser($kullanıcıadı: String!, $şifre: String!, $e-posta: String) {
kullanıcılar {
signUp(
fields: {kullanıcıadı: $kullanıcıadı, şifre: $şifre, e-posta: $email }
) {
objectId
}
}
}
Parse 3.8:
mutation signUpUser($kullanıcıadı: String!, $şifre: String!, $e-posta: String) {
signUp(
fields: {kullanıcıadı: $kullanıcıadı, şifre: $şifre, e-posta: $email }
) {
objectId
}
}
Parse 3.9:
mutation signUpUser($kullanıcıadı: String!, $şifre: String!, $e-posta: String) {
signUp(
fields: {kullanıcıadı: $kullanıcıadı, şifre: $şifre, e-posta: $email }
) {
id
}
}
Kullanıcı adı ve parola değişkenlerimi türlerinin sonuna “!” koyarak zorunlu hale getirdiğime dikkat edin, e-posta ise türünden sonra “!” koymayarak isteğe bağlıdır.
Sonunda, yeni oluşturulan kullanıcının objectId’sini döndürüyorum.
Ve hazır buradayken, zaten var olan bir kullanıcıya giriş yapmak için GraphQL mutasyonumuzu da kodlayalım.
Bu durumda, hem kullanıcı adı hem de şifre zorunludur ve kullanıcı için sessionToken’ı alacağım:
Parse 3.7.2
mutation logInUser($kullanıcıadı: String!, $parola: String!){
kullanıcılar{
logIn(username: $kullanıcıadı, password: $parola){
sessionToken
}
}
}
Parse 3.8
mutasyon logInUser($kullanıcıadı: String!, $parola: String!){
logIn(username: $kullanıcıadı, password: $parola){
sessionToken
}
}
Parse 3.9
mutasyon logInUser($kullanıcıadı: String!, $parola: String!){
logIn(username: $kullanıcıadı, password: $parola){
sessionToken
}
}
Son olarak, kullanıcının oturumu kapatması için herhangi bir parametre gerektirmeyen ve yalnızca bir Boolean döndüren bir mutasyon:
Parse 3.7.2
mutasyon logOutUser{
kullanıcılar{
logOut
}
}
Parse 3.8
mutasyon logOutUser{
logOut
}
Parse 3.9
mutasyon logOutUser{
logOut
}
Tüm bunları UserMutations.graphql adlı yeni bir dosyaya ekleyin, ayrıca önceki makalemizde nasıl indireceğinizi öğrendiğiniz schema .graphql dosyanızı kaydedin.
Bu dosyaları projemize ekleyeceğimiz için güvende tutun…
SwiftUI Projesi
SwiftUI projemizi oluşturalım.
XCode 11’i başlatın ve XCode’a Hoş Geldiniz penceresinden “Yeni bir XCode Projesi Oluştur” seçeneğine basın.
Eğer bu pencere karşınıza çıkmazsa, File > New > Project yolunu izleyebilirsiniz.
En üstte iOS App’i, ardından Single View App’i seçin. İyi bir isim verin ve Dil olarak Swift’i ve Kullanıcı Arayüzü olarak SwiftUI’yi seçmeyi unutmayın:
Kullanıcı Arayüzü olarak SwiftUI’yi seçmeyi unutmayın
Şimdi web api yazımızda öğrendiğiniz gibi Apollo Client ‘ı kurun ve sonrasında UserMutations.graphql ve schema . graphql dosyalarını projenize ekleyin.
Yeni oluşturulan API.swift dosyasını derleyin ve projeye ekleyin.
Bu noktada sahip olmanızı beklediğim şey:
- XCode 11 yüklü ve çalışıyor
- Apollo istemcisi XCode Projenize yüklenmiş ve entegre edilmiştir
- XCode Projenize eklenen UserMutations.graphql ve schema.graphql dosyaları
- API.swift oluşturulan dosya XCode Projenize eklendi
Projeniz buna benzer görünmelidir:
XCode 11’e entegre edilen her şey
Artık bazı SwiftUI’lere başlamaya hazırız.
Back4App’a şimdi kaydolun ve Instagram Klon Uygulamanızı oluşturmaya başlayın.
Kontrollerimize Karar Verme
Bir kullanıcıya giriş ya da çıkış yapabilmemiz için öncelikle o kullanıcının yaratılmış olması gerekir. Bu yüzden ilk olarak SignUp ekranımızı kodlayacağız.
Genellikle, bu ekranda 4 ila 5 kontrolümüz olabilir:
- Kullanıcıya bunun hangi ekran olduğunu söylemek için bir tür Metin (metin)
- Kullanıcı adı (metin giriş kontrolü)
- Şifre (güvenli metin giriş kontrolü)
- Şifreyi Onayla (isteğe bağlı, platforma bağlıdır, güvenli metin girişi kontrolü)
- E-posta (biçimlendirilmiş metin girişi kontrolü)
- Kaydol düğmesi (düğme)
Bu bir mobil uygulama olacağından, Şifre Onayla metin girişi kontrolünü koymamaya karar verdim, çünkü çoğu mobil platform kullanıcının son yazılan karakteri görmesine izin verir ve çoğu durumda bu, kullanıcının şifrenin doğru yazılıp yazılmadığını belirlemesi için yeterlidir.
Bu kontroller dikey olarak hizalanmış, alt alta, yukarıdaki sırada ve her biri kendi rengiyle gösterilecektir.
Aslında kullanıcı arayüzünü oluşturma
Daha önce de belirttiğim gibi, macOS Catalina kullanmıyorum, bu nedenle Önizlemeleri etkinleştirmeyeceğim, ancak kodumla birlikte derleyip sonuçları size göstereceğim.
Dosya > Yeni > Dosya yolunu izleyerek ve ardından Kullanıcı Arayüzü bölümünden SwiftUI Görünümü’nü seçerek yeni bir SwiftUI Görünümü oluşturun.
Bu dosyaya SignUpView.swift adını verin ve projenize entegre edilmiş olarak görünecektir.
Yeni oluşturulan görünümde, içinde “Hello World!” dizesi bulunan bir Metin kontrolü olduğunu fark edeceksiniz.
Swift’in güzelliği, yalnızca o görünüm için gerekli kontrolleri içeren birden fazla basit görünüm oluşturabilmeniz ve ardından birden fazla görünümü daha karmaşık bir görünümde birleştirebilmenizdir. Bu, Nesne Yöneliminin en iyi halidir.
Kontrollerimizi dikey olarak hizalamaya karar verdik ve SwiftUI’nin bunun için VStack (Dikey Yığın) adında özel bir kontrolü var: bir VStack içindeki her şey otomatik olarak dikey olarak istiflenecektir, bu nedenle, sadece test etmek için, VStack kontrolümüzü ContentView.swift dosyamıza ekleyelim ve içine iki kez SignUpView ekleyelim:
SignUpView VStack’e iki kez eklendi: iki kez dikey olarak hizalanmış olarak gösterilir
Şimdi, bu ne kadar havalı! Daha fazla kontrole ihtiyacımız olursa, eklemeye devam edebiliriz!
VStack’i ve çiftliği kaldıralım ve bu Görünümde sadece bir SignUpView() olsun ve sonra SignUpView’ımıza geri dönelim ve testimizin sonuçlarını zaten gördüğümüz gibi değiştirmeye başlayalım. ContentView’iniz şimdi buna benzer görünmelidir:
struct ContentView: Görüntüle {
var body: some View {
SignUpView()
}
}
Ekranın üst kısmında Metin içeren VStack’e ihtiyacımız olacağını zaten biliyoruz, bu yüzden VStack’i SignUpView’e ekleyelim ve “Merhaba Dünya!” dizesini “Kaydol” gibi kullanışlı bir şeyle değiştirelim. SignUpView’ımız şu şekilde görünmelidir:
struct SignUpView: Görüntüle {
var body: some View {
VStack{
Text("Kaydol")
}
}
}
Ve bunun altına hangi kontrolleri eklememiz gerektiğini zaten bildiğimizden, ekleyebiliriz:
- Kullanıcı Adı için bir TextField
- Parola için bir SecureField
- E-posta için bir TextField
- kaydolmak için bir Düğme
TextFields ve SecureField’ın her ikisi de eski UITextField’a oldukça benzer, ancak state’e bağlanmaya dayanmak zorundadır, bu yüzden bunları şu şekilde bildireceğiz:
Control(“Placeholder”, text: stateValueToBindTo)
ve ilk adım, bağlanmak için bu durumları bildirmektir:
@State var kullanıcı adı: String = "" @State var password: String = "" @Devlet var e-posta: String = ""
Bunu aradan çıkardıktan sonra kontrollerimizi eklemeye başlayabiliriz:
Text("Kaydol")
TextField("Kullanıcı Adı", text: $kullanıcıadı)
SecureField("Password", text: $password)
TextField("E-posta (isteğe bağlı)", text: $email)
Son olarak, bu yapıya sahip olan Button’ımızı ekleyebiliriz:
Button(action: {
//Tetiklendiğinde çalışacak kod
}){
//İçerik
}
Muhtemelen fark ettiğiniz gibi, bir UIButton kadar çalışır, ancak içeriğini programlı olarak tanımlayabildiğimiz için yapısı çok daha esnektir, içine hemen hemen her şeyi ekleyebiliriz: bir Metin, bir Resim. Adını siz koyun.
Eski target/action yapısı gitmiş, yerine dokunulduğunda davranışı işlemek için yeni bir action:{} yapısı gelmiştir.
Düğmemizin içinde “Kaydolun!” yazan bir Metin olacak, o halde bunu ekleyelim:
Button(action: {
}){
Text("Kaydol!")
}
Ve son kodunuz aşağıdaki gibi görünmelidir:
struct SignUpView: Görüntüle {
@State var kullanıcı adı: String = ""
@State var password: String = ""
@Devlet var e-posta: String = ""
var body: some View {
VStack{
Text("Kaydol")
TextField("Kullanıcı Adı", text: $kullanıcıadı)
SecureField("Password", text: $password)
TextField("E-posta (isteğe bağlı)", text: $email)
Button(action: {
}){
Text("Kaydol!")
}
}
}
}
Peki ya Önizlememiz?
Umut verici görünüyor, ancak birkaç görsel özellik ayarlayarak çok şey geliştirebiliriz.
SwiftUI ile ilgili süper güzel bir şey varsa o da koda görsel özellikler ekleyebilmeniz ve değişiklikleri gerçek zamanlı olarak görebilmenizdir!
Hadi biraz deneyelim!
İlk olarak, kullanacağımız renkleri bildirelim
lightGreyColor = Color(red: 239.0/255.0, green: 243.0/255.0, blue: 244.0/255.0, opacity: 1.0)
lightBlueColor = Renk(kırmızı: 36.0/255.0, yeşil: 158.0/255.0, mavi: 235.0/255.0, opaklık: 1.0)
sonra birkaç güzel özellik ekleyelim:
Bu öğeler arasında biraz boşluk olması için biraz Dolgu.
Background ve foregroundColor özelliklerini ayarlayın, böylece markamızla tutarlı kontrollere sahip oluruz.
Köşeleri yuvarlatabilmek için biraz cornerRadius.
Ve işleri daha güzel hale getirmek için font ve fontWeight ayarlarını yapın.
İşte bu!
Güzel mi, değil mi?
Bu noktada kodumuzu takip edebilmeniz için:
struct SignUpView: Görüntüle {
@State var kullanıcı adı: String = ""
@State var password: String = ""
@Devlet var e-posta: String = ""
lightGreyColor = Color(red: 239.0/255.0, green: 243.0/255.0, blue: 244.0/255.0, opacity: 1.0)
lightBlueColor = Renk(kırmızı: 36.0/255.0, yeşil: 158.0/255.0, mavi: 235.0/255.0, opaklık: 1.0)
var body: some View {
VStack{
Text("Kaydol")
.font(.largeTitle)
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.bottom, 20)
TextField("Kullanıcı Adı", text: $kullanıcıadı)
.padding()
.background(lightGreyColor)
.cornerRadius(5.0)
.padding(.bottom, 20)
SecureField("Password", text: $password)
.padding()
.background(lightGreyColor)
.cornerRadius(5.0)
.padding(.bottom, 20)
TextField("E-posta (isteğe bağlı)", text: $email)
.padding()
.background(lightGreyColor)
.cornerRadius(5.0)
.padding(.bottom, 20)
Button(action: {
}){
Text("Kaydolun!")
.font(.headline)
.foregroundColor(.white)
.padding()
.frame(genişlik: 220, yükseklik: 60)
.background(lightBlueColor)
.cornerRadius(15.0)
}
}.padding()
}
}
Güzel, parlak ekranımız neredeyse hazır.
Peki ya…
Biraz İşlevsellik
Artık kullanıcı arayüzümüzü hazırladığımıza göre, Apollo çağrılarımızı GraphQL metotlarımıza eklemenin zamanı geldi.
Bu çağrıları neredeyse tüm Görünümlerde kullanacağımız için, tüm görünümlerin erişebileceği bir yerde bir Apollo istemcisi oluşturmalıyız. Bu yer AppDelegate.swift‘tir.
Apollo istemcinizi burada
import UIKit
ve kod bloğunun başlangıcı
UIApplicationMain
sınıf AppDelegate: UIResponder, UIApplicationDelegate {
...
Tıpkı bir önceki makalemizde gösterdiğimiz gibi ve bundan böyle tüm Görünümler GraphQL sorguları ve mutasyonları gerçekleştirebilir.
Önce Apollo çerçevesini içe aktarmanız ve ardından istemcinizi aşağıdaki gibi örneklemeniz gerekir:
Apollo'yu içe aktar
// Apollo İstemci başlatma.
// Daha fazla bilgi için: https://www.back4app.com/docs/ios/swift-graphql
apollo olsun: ApolloClient = {
let configuration = URLSessionConfiguration.default
configuration.httpAdditionalHeaders = [
"X-Parse-Application-Id": "YourAppIdHere",
"X-Parse-Client-Key": "YourClientKeyHere"
]
url = URL(string: "https://parseapi.back4app.com/graphql") olsun!
return ApolloClient(
networkTransport: HTTPNetworkTransport(
url: url,
yapılandırma: yapılandırma
)
)
}()
Sadece YourAppIdHere ve YourClientKeyHere dizelerini mevcut değerlerinizle değiştirin ve devam edebiliriz.
Muhtemelen tahmin ettiğiniz gibi, Sign Up düğmesine tıkladığımızda SignUp için Mutasyonumuzu gerçekleştirmeliyiz, bu yüzden eylem bloğunda bunu çağıralım:
// SignUpUser mutasyonunu gerçekleştirin, TextFields'lerimizden aldığımız parametreleri geçirin
apollo.perform(mutation: SignUpUserMutation(username: self.username, password: self.password, email: self.email)){ result in
// Başarılı bir sonucu hatadan ayırabilmek için sonucu değiştirelim
switch sonuç {
// Başarı durumunda
case .success(let graphQLResult):
// Sonucumuzu Parse çalışıyoruz
if let objId = graphQLResult.data?.users?.signUp.objectId {
print ("Kullanıcı ObjectId: " + objId ile oluşturuldu)
}
// ancak herhangi bir GraphQL hatası durumunda bu mesajı sunuyoruz
else if let errors = graphQLResult.errors {
// GraphQL hataları
print(hatalar)
}
// Başarısızlık durumunda, bu mesajı sunarız
case .failure(let error):
// Ağ veya yanıt biçimi hataları
print(hata)
}
}
Bu işe yarayacaktır ancak bu print() metotları sadece konsola yazdıracaktır. Kullanıcımıza bir Uyarı sunmamız gerekiyor, bu yüzden aşağıdaki yapıya sahip bir Uyarı için değiştirelim:
Alert(title: Text(“Başlık”), message: Text(“Message”), dismissButton: .default(Text(“TextOfButton”))
Çalışma zamanında başlığı ve mesajı değiştirmemiz gerekeceğinden, self değişkenler çalışma zamanında değiştirilemeyeceğinden, bu değerleri işlemek için bir Struct ayarlamalıyız:
struct Mesaj {
var alertTitle: String = ""
var alertText: String = ""
}
var myMessage = Message()
Ayrıca bir State oluşturun, böylece View uyarıyı ne zaman göstereceğini bilebilir:
@State private var showingAlert = false
Ve Button eylemimiz için tam kodumuz şu şekilde olmalıdır:
Button(action: {
// SignUpUser mutasyonunu gerçekleştirin, TextFields'lerimizden aldığımız parametreleri geçirin
apollo.perform(mutation: SignUpUserMutation(username: self.username, password: self.password, email: self.email)){ result in
// Başarılı bir sonucu hatadan ayırabilmek için sonucu değiştirelim
switch sonuç {
// Başarı durumunda
case .success(let graphQLResult):
// Sonucumuzu Parse çalışıyoruz
if let objId = graphQLResult.data?.users?.signUp.objectId {
myMessage.alertTitle = "Yaşasın!"
myMessage.alertText = "Kullanıcı kaydoldu!"
self.showingAlert = true
print ("Kullanıcı ObjectId: " + objId ile oluşturuldu)
}
// ancak herhangi bir GraphQL hatası durumunda bu mesajı sunuyoruz
else if let errors = graphQLResult.errors {
// GraphQL hataları
myMessage.alertTitle = "Oops!"
myMessage.alertText = "Bir GraphQL hatası aldık: " + errors.description
self.showingAlert = true
print(hatalar)
}
// Başarısızlık durumunda, bu mesajı sunarız
case .failure(let error):
// Ağ veya yanıt biçimi hataları
myMessage.alertTitle = "Oops!"
myMessage.alertText = "Bir hata aldık: " + error.localizedDescription
self.showingAlert = true
print(hata)
}
}
}){
Text("Kaydolun!")
.font(.headline)
.foregroundColor(.white)
.padding()
.frame(genişlik: 220, yükseklik: 60)
.background(lightBlueColor)
.cornerRadius(15.0)
}
.alert(isPresented: $showingAlert) {
Alert(title: Text(myMessage.alertTitle), message: Text(myMessage.alertText), dismissButton: .default(Text("OK"))
}
Umut verici görünüyor, ha?
Şimdi tam zamanı.
Derleyin ve çalıştırın. Yeni bir kullanıcı kaydetmeyi deneyin ve şunu elde etmelisiniz…
Bakalım Parse Dashboard’umuzda kullanıcı oluşturulmuş mu!
Sonuç
Apollo Client kullanarak GraphQL mutasyonları gerçekleştiren tamamen çalışan bir SwiftUI görünümü yaptınız. Bu ne kadar harika!
Instagram klon uygulamamız üzerinde çalışmaya devam edeceğiz! Sonraki adımlar Giriş ve çıkış yapmak ve yazı zaten fırında!
Bizi izlemeye devam edin!
Referans
- Bu serinin 1. Bölümü Instagram Clone.
- Bölüm 2 Instagram Girişi.
- Bölüm 3 Instagram Profili.
- Bölüm 4 Instagram Ana Sayfa Görünümü.
- Uygulama arka ucunu iOS Instagram Clone Backend‘de görün.
- Kaynak kodlu bir iOS Instagram Clone projesi indirin ve Back4App kullanmaya başlayın.
Back4App’a şimdi kaydolun ve Instagram Klon Uygulamanızı oluşturmaya başlayın.
