Bu sayfa, Cloud Translation API ile çevrilmiştir.

Firebase Data Connect ile geliştirme yapma (iOS / Swift)

1. Genel Bakış

Bu codelab, SwiftUI'yi kullanarak iOS için bir film yorumu uygulaması oluşturmak amacıyla Firebase Data Connect'i bir Cloud SQL veritabanı ile entegrasyon sürecinde size yol gösterir.

Firebase Data Connect'i kullanarak iOS uygulamanızı bir Cloud SQL veritabanına nasıl bağlayacağınızı öğreneceksiniz. Böylece, film yorumları için sorunsuz veri senkronizasyonu sağlayabilirsiniz.

Bu codelab'in sonunda, kullanıcıların filmlere göz atmasına ve filmleri favori olarak işaretlemesine olanak tanıyan, Firebase Data Connect'in gücünü kullanan bir Cloud SQL veritabanı tarafından desteklenen işlevsel bir iOS uygulamasına sahip olacaksınız.

Neler öğreneceksiniz?

Bu kod laboratuvarında şunları öğreneceksiniz:

Hızlı bir şekilde Firebase Data Connect'i kurmak için Firebase Emulator paketini kullanın.
Data Connect ve GraphQL'i kullanarak veritabanı şeması tasarlayın.
Veritabanı şemanızdan tür güvenli bir Swift SDK'sı oluşturun ve bunu bir Swift uygulamasına ekleyin.
Kullanıcılarınızın verilerini güvence altına almak için kullanıcı kimlik doğrulamasını uygulayın ve Firebase Data Connect ile entegre edin.
GraphQL tarafından desteklenen sorguları ve mutasyonları kullanarak Cloud SQL'deki verileri alın, güncelleyin, silin ve yönetin.
(İsteğe bağlı) Bir Data Connect hizmetini üretime dağıtın.

Ön koşullar

Xcode'un en son sürümü
Codelab örnek kodu. Örnek kodu, codelab'in ilk adımlarından birinde indirirsiniz.

2. Örnek projeyi oluşturma

Firebase projesi oluşturma

Google Hesabınızla Firebase konsolunda oturum açın.
Firebase konsolunda Firebase projesi oluştur'u tıklayın.
Firebase projeniz için bir ad girin (örneğin, "Arkadaşça Filmler") ve Devam'ı tıklayın.
Firebase projeniz için yapay zeka yardımını etkinleştirmeniz istenebilir. Bu codelab'in amacı açısından seçiminiz önemli değildir.
Google Analytics'i etkinleştirmeniz istenebilir. Bu codelab'in amacı açısından seçiminiz önemli değildir.
Yaklaşık bir dakika sonra Firebase projeniz hazır olur. Devam'ı tıklayın.

Kodu indirme

Bu kod alanının örnek kodunu klonlamak için aşağıdaki komutu çalıştırın. Bu işlem, makinenizde codelab-dataconnect-ios adlı bir dizin oluşturur:

git clone https://github.com/peterfriese/codelab-dataconnect-ios`

Makinenizde git yoksa kodu doğrudan GitHub'dan da indirebilirsiniz.

Firebase yapılandırması ekleme

Firebase SDK'sı, Firebase projenize bağlanmak için bir yapılandırma dosyası kullanır. Apple platformlarında bu dosyanın adı GoogleServices-Info.plist. Bu adımda, yapılandırma dosyasını indirip Xcode projenize ekleyeceksiniz.

Firebase konsolunda, sol gezinme menüsünden Projeye Genel Bakış'ı seçin.
Platformu seçmek için iOS+ düğmesini tıklayın. Apple paket kimliği istendiğinde com.google.firebase.samples.FriendlyFlix
Uygulamayı kaydet'i tıklayın ve GoogleServices-Info.plist dosyasını indirme talimatlarını uygulayın.
İndirilen dosyayı, mevcut GoogleServices-Info.plist dosyasını yerine koyarak az önce indirdiğiniz kodun start/FriendlyFlix/app/FriendlyFlix/FriendlyFlix/ dizinine taşıyın.
Ardından, Firebase konsolunda kurulum projesini tamamlamak için birkaç kez İleri'yi tıklayın (başlangıç projesinde bu işlem sizin için zaten yapılmış olduğundan SDK'yı uygulamaya eklemeniz gerekmez).
Son olarak, kurulum işlemini tamamlamak için Konsola devam et'i tıklayın.

3. Data Connect'i ayarlama

Kurulum

Otomatik yükleme

codelab-dataconnect-ios/FriendlyFlix dizininde aşağıdaki komutu çalıştırın:

curl -sL https://firebase.tools/dataconnect | bash

Bu komut dosyası, geliştirme ortamını sizin için kurmaya ve tarayıcı tabanlı bir IDE'yi başlatmaya çalışır. Bu IDE, şemanızı yönetmenize, uygulamanızda kullanılacak sorguları ve mutasyonları tanımlamanıza ve güçlü şekilde yazılmış SDK'lar oluşturmanıza yardımcı olmak için önceden paketlenmiş bir VS Code uzantısı da dahil olmak üzere araçlar sağlar.

Komut dosyası çalıştırıldıktan sonra VS Code otomatik olarak açılır.

Bu işlemi bir kez yaptıktan sonra VS Code'u yerel dizinde çalıştırarak başlatabilirsiniz:

code .

Manuel yükleme

Visual Studio Code'u yükleme
Node.js'yi yükleme
VS Code'da codelab-dataconnect-ios/FriendlyFlix dizinini açın.
Visual Studio Code Marketplace'ten Firebase Data Connect uzantısını yükleyin.

Projede Data Connect'i başlatma

Data Connect VS Code uzantısı kullanıcı arayüzünü açmak için sol panelde Firebase simgesini tıklayın.

Google ile oturum aç düğmesini tıklayın. Bir tarayıcı penceresi açılır. Uzantıda Google Hesabınızla oturum açmak için talimatları uygulayın.
Firebase projesi bağla düğmesini tıklayın ve konsolda daha önce oluşturduğunuz projeyi seçin.
firebase init'i çalıştır düğmesini tıklayın ve entegre terminaldeki adımları uygulayın.

SDK oluşturma işlemini yapılandırma

Firebase init'i çalıştır düğmesini tıkladığınızda Firebase Data Connect uzantısı sizin için bir dataconnect dizini başlatır.

VS Code'da dataconnect/connector/connector.yaml dosyasını açın. Varsayılan yapılandırmayı burada bulabilirsiniz.

Oluşturulan kodun bu codelab ile çalıştığından emin olmak için lütfen yapılandırmayı güncelleyin ve aşağıdaki ayarları kullanın. Özellikle, connectorId değerinin friendly-flix, Swift paketinin ise FriendlyFlixSDK olarak ayarlandığından emin olun.

connectorId: "friendly-flix"
generate:
  swiftSdk:
    outputDir: "../../app"
    package: "FriendlyFlixSDK"
    observablePublisher: observableMacro

Bu ayarların ne anlama geldiği aşağıda açıklanmıştır:

connectorId: Bu bağlayıcı için benzersiz bir ad.
outputDir: Oluşturulan Data Connect SDK'sının saklanacağı yol. Bu yol, connector.yaml dosyasını içeren dizinle ilgilidir.
package: Oluşturulan Swift paketi için kullanılacak paket adı.

Bu dosyayı kaydettikten sonra Firebase Data Connect, sizin için FriendlyFlixSDK adlı bir Swift paketi oluşturur ve bu paketi FriendlyFlix proje klasörünün yanına yerleştirir.

Firebase emülatörlerini başlatma

VS Code'da Firebase görünümüne geçin ve ardından Emülatörleri başlat düğmesini tıklayın.

Bu işlem, entegre terminalde Firebase Emülatör'ü başlatır. Çıkış şu şekilde görünmelidir:

npx -y firebase-tools@latest emulators:start --project <your-project-id>

Oluşturulan paketi Swift uygulamanıza ekleme

FriendlyFlix/app/FriendlyFlix/FriendlyFlix.xcodeproj dosyasını Xcode'da açma
Dosya > Paket Bağımlılıkları Ekle...'yi seçin.
Yerel ekle...'yi tıklayın ve ardından FriendlyFlix/app klasöründen FriendlyFlixSDK paketini ekleyin
Xcode'un paket bağımlılıkları çözmesini bekleyin.
FriendlyFlixSDK için Paket Ürünleri Seçin iletişim kutusunda hedef olarak FriendlyFlix'yi seçin ve Paket Ekle'yi tıklayın.

iOS uygulamasını yerel emülatör kullanacak şekilde yapılandırma

FriendlyFlixApp.swift adlı görüşmeyi açın. (CMD + Üst Karakter + O tuşlarına basarak Hızlı Aç iletişim kutusunu açabilir ve dosyayı hızlıca bulmak için "FriendlyFlixApp" yazabilirsiniz)
Şemanız için Firebase, Firebase Auth, Firebase Data Connect ve oluşturulan SDK'yı içe aktarma
Başlatıcıda Firebase'i yapılandırın.
DataConnect ve Firebase Auth'un yerel emülatörü kullandığından emin olun.

import SwiftUI
import os
import Firebase
import FirebaseAuth
import FriendlyFlixSDK
import FirebaseDataConnect

@main
struct FriendlyFlixApp: App {
  ...

  init() {
    FirebaseApp.configure()
    if useEmulator {
      DataConnect.friendlyFlixConnector.useEmulator(port: 9399)
      Auth.auth().useEmulator(withHost: "localhost", port: 9099)
    }

    authenticationService = AuthenticationService()
  }

  ...

}

Hedef açılır menüsünden bir iOS simülasyon cihazı seçin.
Uygulamayı bir simülatörde çalıştırmak için Xcode'da CMD+R tuşlarına basın (veya Çalıştır düğmesini tıklayın).

4. Şemayı tanımlama ve veritabanını önceden doldurma

Bu bölümde, film uygulamasındaki temel öğeler arasındaki yapıyı ve ilişkileri bir şemada tanımlayacaksınız. Movie, MovieMetaData gibi varlıklar veritabanı tablolarıyla eşlenir ve ilişkiler Firebase Data Connect ve GraphQL şeması yönergeleri kullanılarak kurulur.

Temel Varlıklar ve İlişkiler

Bu film takip uygulamasının veri modeli, bu codelab sırasında oluşturacağınız çeşitli öğelerden oluşur. Öncelikle temel varlıkları oluşturursunuz ve daha fazla özellik uyguladıkça bu özellikler için gereken varlıkları eklersiniz.

Bu adımda Movie ve MovieMetadata türlerini oluşturacaksınız.

Film

Movie türü, title, genre, releaseYear ve rating gibi alanlar da dahil olmak üzere bir film öğesinin ana yapısını tanımlar.

VS Code'da Movie tür tanımını dataconnect/schema/schema.gql dosyasına ekleyin:

type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  releaseYear: Int
  genre: String
  rating: Float
  description: String
  tags: [String]
}

MovieMetadata

MovieMetadata türü, Movie türüyle bire bir ilişki kurar. Filmin yönetmeni gibi ek verileri içerir.

MovieMetadata tablo tanımını dataconnect/schema/schema.gql dosyasına ekleyin:

type MovieMetadata @table {
  movie: Movie! @ref
  director: String
}

Otomatik Oluşturulan Alanlar ve Varsayılanlar

Şema, benzersiz kimlikler ve zaman damgaları otomatik olarak oluşturmak için @default(expr: "uuidV4()") gibi ifadeleri kullanır. Örneğin, yeni bir kayıt oluşturulduğunda Movie türündeki id alanı otomatik olarak bir UUID ile doldurulur.

Filmler ve film meta verileri için örnek veriler ekleme

Şema tanımlandığında, test için veritabanını örnek verilerle önceden doldurabilirsiniz.

Finder'da finish/FriendlyFlix/dataconnect/moviedata_insert.gql klasörünü start/FriendlyFlix/dataconnect klasörüne kopyalayın.
VS Code'da dataconnect/moviedata_insert.gql dosyasını açın.
Firebase Data Connect uzantısındaki emülatörlerin çalıştığından emin olun.
Dosyanın üst kısmında Çalıştır (yerel) düğmesini görürsünüz. Sahte film verilerini veritabanınıza eklemek için bunu tıklayın.
Verilerin başarıyla eklendiğini onaylamak için Veri Bağlantısı Çalıştırma terminalini kontrol edin.

Veriler eklendikten sonra, Data Connect'te nasıl sorgu oluşturacağınızı öğrenmek için bir sonraki adıma geçin.

5. Filmleri alma ve görüntüleme

Bu bölümde, filmlerin listesini görüntüleme özelliğini uygulayacaksınız.

Öncelikle, movies tablosundaki tüm filmleri alan bir sorgu oluşturmayı öğreneceksiniz. Firebase Data Connect, sorguyu yürütmek ve alınan filmleri uygulamanızın kullanıcı arayüzünde görüntülemek için kullanabileceğiniz tür güvenli bir SDK için kod oluşturur.

ListMovies sorgusunu tanımlama

Firebase Data Connect'teki sorgular GraphQL ile yazılmıştır. Bu sayede hangi alanların getirileceğini belirtebilirsiniz. FriendlyFlix'te filmlerin gösterildiği ekranlarda şu alanlar gereklidir: title, description, releaseYear, rating ve imageUrl. Ayrıca, bu bir SwiftUI uygulaması olduğundan SwiftUI görünüm kimliğine yardımcı olması için id öğesine ihtiyacınız olacaktır.

VS Code'da dataconnect/connector/queries.gql dosyasını açın ve ListMovies sorgusunu ekleyin:

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    releaseYear
    genre
    rating
    tags
    description
  }
}

Yeni sorguyu test etmek için Çalıştır (yerel) düğmesini tıklayarak sorguyu yerel veritabanınızda çalıştırın. Veritabanında bulunan filmlerin listesi, Veri Bağlantısı Yürütme terminalinin Sonuçlar bölümünde gösterilir.

ListMovies sorgusunu uygulamanın ana ekranına bağlama

Sorguyu Veri Bağlantısı Emülatör'ünde test ettiğinize göre sorguyu uygulamanızdan çağırabilirsiniz.

queries.gql dosyasını kaydettiğinizde Firebase Data Connect, FriendlyFlixSDK paketindeki ListMovies sorgusuna karşılık gelen kodu oluşturur.

Xcode'da Movie+DataConnect.swift dosyasını açın ve ListMoviesQuery.Data.Movie ile Movie arasında eşleme yapmak için aşağıdaki kodu ekleyin:

import FirebaseDataConnect
import FriendlyFlixSDK

extension Movie {
  init(from: ListMoviesQuery.Data.Movie) {
    id = from.id
    title = from.title
    description = from.description ?? ""
    releaseYear = from.releaseYear
    rating = from.rating
    imageUrl = from.imageUrl
  }
}

HomeScreen.swift dosyasını açıp aşağıdaki kod snippet'ini kullanarak güncelleyin.

import SwiftUI
import FirebaseDataConnect
import FriendlyFlixSDK

struct HomeScreen: View {
  ...

  private var connector = DataConnect.friendlyFlixConnector
  let heroMoviesRef: QueryRefObservation<ListMoviesQuery.Data, ListMoviesQuery.Variables>

  init() {
    heroMoviesRef = connector.listMoviesQuery.ref()
  }
}

extension HomeScreen {
  ...

  private var heroMovies: [Movie] {
    heroMoviesRef.data?.movies.map(Movie.init) ?? []
  }

 private var topMovies: [Movie] {
    heroMoviesRef.data?.movies.map(Movie.init) ?? []
  }

  private var watchList: [Movie] {
    heroMoviesRef.data?.movies.map(Movie.init) ?? []
  }

  ...
}

listMoviesQuery() sorgusu, queries.gql'u kaydettiğinizde Veri Bağlantısı tarafından oluşturuldu. Swift uygulamasını görmek için FriendlyFlixSDK paketindeki FriendlyFlixOperations.swift dosyasına bakın.

Uygulamayı çalıştırma

Xcode'da, uygulamayı iOS simülasyon aracında başlatmak için Çalıştır düğmesini tıklayın.

Uygulama açıldığında aşağıdaki gibi bir ekran görürsünüz:

Uygulamanın tüm alanlarında (kahramanlar bölümü, en popüler filmler ve izleme listesi) aynı listenin gösterildiğini fark edebilirsiniz. Bunun nedeni, tüm bu görünümler için aynı sorguyu kullanmanızdır. Sonraki bölümlerde özel sorgular uygulayacaksınız.

6. Hero ve en iyi filmleri gösterme

Bu adımda, filmlerin ana ekranın üst kısmındaki belirgin bantta (hero) ve altındaki en popüler filmler bölümünde gösterilme şeklini güncellemeye odaklanacaksınız.

Şu anda ListMovies sorgusu tüm filmleri getirir. Bu bölümlerin görüntülenmesini optimize etmek için her sorgunun döndürdüğü film sayısını sınırlarsınız. ListMovies sorgusunun mevcut uygulamasında, sonuçları sınırlama için henüz yerleşik destek sunulmamaktadır. Sınırlama ve sıralama desteğini bu bölüme eklemeniz gerekir.

ListMovies sorgusunu geliştirme

Sıralama ve sınırlama desteği eklemek için queries.gql dosyasını açıp ListMovies dosyasını aşağıdaki gibi güncelleyin:

query ListMovies(
  $orderByRating: OrderDirection
  $orderByReleaseYear: OrderDirection
  $limit: Int
) @auth(level: PUBLIC) {
  movies(
    orderBy: [{ rating: $orderByRating }, { releaseYear: $orderByReleaseYear }]
    limit: $limit
  ) {
    id
    title
    description
    releaseYear
    rating
    imageUrl
  }
}

Bu sayede, sorgunun döndürdüğü film sayısını sınırlayabilir ve sonuç kümesini hem derecelendirmeye hem de gösterim yılına göre sıralayabilirsiniz.

Bu dosyayı kaydettikten sonra Firebase Data Connect, kodu FriendlyFlixSDK içinde otomatik olarak yeniden oluşturur. Sonraki adımda, bu ek özellikleri kullanmak için HomeScreen.swift kodunda güncelleme yapabilirsiniz.

Kullanıcı arayüzünde gelişmiş sorguyu kullanma

HomeScreen.swift'te gerekli değişiklikleri yapmak için Xcode'a geri dönün.

Öncelikle, en son yayınlanan 3 filmi almak için heroMoviesRef değerini güncelleyin:

struct HomeScreen {
  ...

  init() {
    heroMoviesRef = connector.listMoviesQuery
      .ref { optionalVars in
        optionalVars.limit = 3
        optionalVars.orderByReleaseYear = .DESC
      }

  }
}

Ardından, en iyi filmler için başka bir sorgu referansı oluşturun ve filtreyi en yüksek puan alan 5 filme ayarlayın:

struct HomeScreen {
  ...

  let topMoviesRef: QueryRefObservation<ListMoviesQuery.Data, ListMoviesQuery.Variables>

  init() {
    heroMoviesRef = ...

    topMoviesRef = connector.listMoviesQuery
      .ref { optionalVars in
        optionalVars.limit = 5
        optionalVars.orderByRating = .DESC
      }
  }
}

Son olarak, bu sorgunun sonucunu kullanıcı arayüzüne bağlayan hesaplanmış özelliği güncelleyin:

extension HomeScreen {
  ...

  private var topMovies: [Movie] {
    topMoviesRef.data?.movies.map(Movie.init) ?? []
  }

}

Kullanım örnekleri

Kahramanlar bölümünde en son yayınlanan 3 filmi ve en iyi filmler bölümünde en yüksek puan alan 5 filmi görmek için uygulamayı tekrar çalıştırın:

7. Film ve oyuncu ayrıntılarını gösterme

Kullanıcı artık filmlere göz atabilir. Film kartına dokunduğunuzda filmle ilgili bazı ayrıntılar gösterilir. Ancak bu ayrıntıların yeterli olmadığını fark etmiş olabilirsiniz.

Bunun nedeni, her filmle ilgili yalnızca film hero bölümünü ve en popüler filmler bölümünü oluşturmak için gereken ayrıntıları (film adı, kısa açıklama ve resim URL'si) getirmemizdir.

Film ayrıntıları sayfasında filmle ilgili daha fazla bilgi göstermek isteriz. Bu bölümde, uygulamayı ayrıntılar sayfasında filmin oyuncularını ve yorumlarını gösterecek şekilde geliştireceksiniz.

Bunun için birkaç işlem yapmanız gerekir:

Şemayı, film aktörlerini ve yorumlarını destekleyecek şekilde geliştirme
Belirli bir filmle ilgili ayrıntıları almak için Firebase Data Connect sorguları yazma
Sonuçları film ayrıntıları ekranında gösterme

Şemayı geliştirme

VS Code'da dataconnect/schema/schema.gql dosyasını açın ve Actor ile MovieActor için şema tanımlarını ekleyin.

## Actors
## An actor can participate in multiple movies; movies can have multiple actors
## Movie - Actors (or vice versa) is a many to many relationship
type Actor @table {
  id: UUID!
  imageUrl: String!
  name: String! @col(name: "name", dataType: "varchar(30)")
}

## Join table for many-to-many relationship for movies and actors
## The 'key' param signifies the primary key(s) of this table
## In this case, the keys are [movieId, actorId], the generated fields of the reference types [movie, actor]
type MovieActor @table(key: ["movie", "actor"]) {
  ## @ref creates a field in the current table (MovieActor) that holds the primary key of the referenced type
  ## In this case, @ref(fields: "id") is implied
  movie: Movie!
  ## movieId: UUID! <- this is created by the implied @ref, see: implicit.gql

  actor: Actor!
  ## actorId: UUID! <- this is created by the implied  @ref, see: implicit.gql

  role: String! ## "main" or "supporting"
}

Aktörler için örnek veriler ekleme

Şema güncellendikten sonra, test için veritabanını daha fazla örnek veri ile doldurabilirsiniz.

Finder'da finish/FriendlyFlix/dataconnect/moviededetails_insert.gql klasörünü start/FriendlyFlix/dataconnect klasörüne kopyalayın.
VS Code'da dataconnect/moviededetails_insert.gql dosyasını açın.
Firebase Data Connect uzantısındaki emülatörlerin çalıştığından emin olun.
Dosyanın üst kısmında Çalıştır (yerel) düğmesini görürsünüz. Sahte film verilerini veritabanınıza eklemek için bunu tıklayın.
Verilerin başarıyla eklendiğini onaylamak için Veri Bağlantısı Çalıştırma terminalini kontrol edin.

Veriler hazır olduğunda, film ayrıntılarını almak için sorguyu tanımlamak üzere bir sonraki adıma geçin.

GetMovieById sorgusunu tanımlama

VS Code'da dataconnect/connector/queries.gql dosyasını açın ve GetMovieById sorgusunu ekleyin:

## Get movie by id
query GetMovieById($id: UUID!) @auth(level: PUBLIC) {
  movie(id: $id) {
    id
    title
    imageUrl
    releaseYear
    genre
    rating
    description
    tags
    metadata: movieMetadatas_on_movie {
      director
    }
    mainActors: actors_via_MovieActor(where: { role: { eq: "main" } }) {
      id
      name
      imageUrl
    }
    supportingActors: actors_via_MovieActor(
      where: { role: { eq: "supporting" } }
    ) {
      id
      name
      imageUrl
    }
  }
}

GetMovieById sorgusunu MovieDetailsView'a bağlayın

Xcode'da MovieDetailsView.swift dosyasını açın ve movieDetails hesaplanmış mülkünü aşağıdaki kodla eşleşecek şekilde güncelleyin:

import NukeUI
import SwiftUI
import FirebaseDataConnect
import FriendlyFlixSDK

@MainActor
struct MovieDetailsView: View {
  private var movie: Movie

  private var movieDetails: MovieDetails? {
    DataConnect.friendlyFlixConnector
      .getMovieByIdQuery
      .ref(id: movie.id)
      .data?.movie.map { movieDetails in
        MovieDetails(
          title: movieDetails.title,
          description: movieDetails.description ?? "",
          releaseYear: movieDetails.releaseYear,
          rating: movieDetails.rating ?? 0,
          imageUrl: movieDetails.imageUrl,
          mainActors: movieDetails.mainActors.map { mainActor in
            MovieActor(id: mainActor.id,
                       name: mainActor.name,
                       imageUrl: mainActor.imageUrl)
          },
          supportingActors: movieDetails.supportingActors.map{ supportingActor in
            MovieActor(id: supportingActor.id,
                       name: supportingActor.name,
                       imageUrl: supportingActor.imageUrl)
          },
          reviews: []
        )
      }
  }

  public init(movie: Movie) {
    self.movie = movie
  }
}

Uygulamayı çalıştırma

Xcode'da Çalıştır düğmesini tıklayarak uygulamayı iOS simülasyon aracında başlatın.

Uygulama açıldığında, film ayrıntılarını görüntülemek için bir film kartına dokunun. Aşağıdaki gibi görünmelidir:

8. Kullanıcı kimlik doğrulamasını uygulama

Uygulama şu anda kişiselleştirilmemiş film ve aktör bilgilerini sunmaktadır. Aşağıdaki adımlarda, verileri oturum açmış kullanıcıyla ilişkilendiren özellikleri uygulayacaksınız. Kullanıcıların kişisel izleme listelerine film eklemesine izin vererek başlayın.

İzleme listesi özelliğini uygulayabilmek için önce kullanıcı kimliğini oluşturmanız gerekir. Bunu etkinleştirmek için Firebase Authentication'ı entegre ederek kullanıcıların uygulamada oturum açmasına izin verirsiniz.

Ana ekranın sağ üst kısmındaki kullanıcı avatarı düğmesini daha önce fark etmiş olabilirsiniz. Buna dokunduğunuzda kullanıcıların e-posta ve şifrelerini kullanarak kaydolabilecekleri veya oturum açabilecekleri bir ekrana yönlendirilirsiniz.

Bir kullanıcı başarıyla oturum açtığında, uygulamanızın öncelikle benzersiz kullanıcı kimliklerini ve seçtikleri kullanıcı adlarını olmak üzere temel bilgilerini depolaması gerekir.

Firebase Authentication'ı etkinleştirme

Projenizin Firebase konsolunda Kimlik Doğrulama bölümüne gidin ve Firebase Authentication'i etkinleştirin. Ardından, E-posta/Şifre kimlik doğrulama sağlayıcısını etkinleştirin.

Yerel proje klasörünüzde firebase.json dosyasını bulun ve Firebase Authentication emülatörünü etkinleştirmek için aşağıdaki şekilde güncelleyin.

{
  "emulators": {
    "dataconnect": {
    },
    "auth": {
    }
  },
  "dataconnect": {
    "source": "dataconnect"
  }
}

Ardından, değişikliğin geçerli olması için Firebase Emulator'u durdurup yeniden başlatmanız gerekir.

Kimlik doğrulama işleyicisi uygulama

Aşağıdaki bölümde, kullanıcı kimlik doğrulamasını veritabanınıza bağlayan mantığı uygulayacaksınız. Bu işlem, başarılı oturum açmaları dinleyen bir kimlik doğrulama işleyicisi oluşturmayı içerir.

Bir kullanıcının kimliği doğrulandıktan sonra bu işleyici, veritabanınızda ilgili hesabın oluşturulmasını otomatik olarak tetikler.

Xcode'da AuthenticationService.swift dosyasını açın ve aşağıdaki kodu ekleyin:

import Foundation
import Observation
import os
import FirebaseAuth

enum AuthenticationState {
  case unauthenticated
  case authenticating
  case authenticated
}

@Observable
class AuthenticationService {
  private let logger = Logger(subsystem: "FriendlyFlix", category: "auth")

  var presentingAuthenticationDialog = false
  var presentingAccountDialog = false

  var authenticationState: AuthenticationState = .unauthenticated
  var user: User?
  private var authenticationListener: AuthStateDidChangeListenerHandle?

  init() {
    authenticationListener = Auth.auth().addStateDidChangeListener { auth, user in
      if let user {
        self.authenticationState = .authenticated
        self.user = user
      } else {
        self.authenticationState = .unauthenticated
      }
    }
  }

  private var onSignUp: ((User) -> Void)?
  public func onSignUp(_ action: @escaping (User) -> Void) {
    onSignUp = action
  }

  func signInWithEmailPassword(email: String, password: String) async throws {
    try await Auth.auth().signIn(withEmail: email, password: password)
    authenticationState = .authenticated
  }

  func signUpWithEmailPassword(email: String, password: String) async throws {
    try await Auth.auth().createUser(withEmail: email, password: password)

    if let onSignUp, let user = Auth.auth().currentUser {
      logger
        .debug(
          "User signed in \(user.displayName ?? "(no fullname)") with email \(user.email ?? "(no email)")"
        )
      onSignUp(user)
    }

    authenticationState = .authenticated
  }

  func signOut() throws {
    try Auth.auth().signOut()
    authenticationState = .unauthenticated
  }
}

Bu, kullanıcı oturum açtığında çağrılacak bir kapatma işlemini kaydetmek için onSignUp kullanmanıza olanak tanıyan genel bir kimlik doğrulama işleyicisidir.

Bu kapatma içinde, veritabanında yeni bir kullanıcı hesabı oluşturabilirsiniz. Ancak bunu yapabilmek için veritabanında yeni kullanıcılar oluşturmanıza veya mevcut kullanıcıları güncellemenize olanak tanıyan bir mutasyon oluşturmanız gerekir.

Şemaya bir User öğesi ekleme

User türü, bir kullanıcı öğesini tanımlar. Kullanıcılar yorum bırakarak veya filmleri favorilere ekleyerek filmlerle etkileşim kurabilir.

VS Code'de dataconnect/schema/schema.gql dosyasını açın ve aşağıdaki User tablo tanımını ekleyin:

## Users
## A user can leave reviews for movies
## user-reviews is a one to many relationship, movie-reviews is a one to many relationship, movie:user is a many to many relationship
type User @table {
  id: String! @col(name: "user_auth")
  username: String! @col(name: "username", dataType: "varchar(50)")
}

Kullanıcı ekleme veya güncelleme için bir mutasyon tanımlama

VS Code'da dataconnect/connector/mutations.gql dosyasını açın ve UpsertUser mutasyonunu ekleyin:

mutation UpsertUser($username: String!) @auth(level: USER) {
  user_upsert(
    data: {
      id_expr: "auth.uid"
      username: $username
    }
  )
}

Başarılı bir şekilde giriş yaptıktan sonra yeni kullanıcı oluşturma

Xcode'da FriendlyFlixApp.swift dosyasını açın ve başlatıcıya aşağıdaki kodu ekleyin:

@main
struct FriendlyFlixApp: App {

  ...

  init() {
    ...
    authenticationService = AuthenticationService()
    authenticationService?.onSignUp { user in
      let userName = String(user.email?.split(separator: "@").first ?? "(unknown)")
      Task {
        try await DataConnect.friendlyFlixConnector
          .upsertUserMutation.execute(username: userName)
      }
    }
  }

  var body: some Scene {
    ...
  }
}

Bu kod, bir kullanıcı Firebase Authentication'i kullanarak başarıyla kaydolduğunda yeni bir kullanıcı eklemeniz (veya aynı kimliğe sahip mevcut bir kullanıcıyı güncellemeniz) için sizin için oluşturulan upsertUserMutation Firebase Data Connect'i kullanır.

Kullanım örnekleri

Bu yöntemin işe yaradığını doğrulamak için önce iOS uygulamasında kaydolun:

Henüz yapmadıysanız Firebase Authentication Emulator'un çalıştığından emin olmak için Firebase Emulator'u durdurup yeniden başlatın.
Xcode'da Çalıştır düğmesini tıklayarak uygulamayı iOS simülasyon aracında başlatın.
Ekranın sağ üst köşesindeki avatar simgesini tıklayın.
Kaydol akışına geçin ve uygulamaya kaydolun.

Ardından, uygulamanın kullanıcı için yeni bir kullanıcı hesabı oluşturduğunu doğrulamak üzere veritabanını sorgulayın:

VS Code'da dataconnect/schema/schema.gql öğesini açın ve User öğesinde Verileri oku'yu tıklayın.
Bu işlem, User_read.gql adlı yeni bir sorgu dosyası oluşturur.
Kullanıcı tablosundaki tüm kullanıcıları görmek için Yerel olarak çalıştır'ı tıklayın.
Veri Bağlantısı Yürütme bölmesinde, yeni kaydolduğunuz kullanıcının hesabı gösterilir

9. Favori filmleri yönetme

Codelab'in bu bölümünde, film yorumu uygulamasına kullanıcı etkileşimlerini uygulayarak özellikle kullanıcıların favori filmlerini yönetmelerine olanak tanıyacaksınız. Favori olarak işaretlenen filmler, uygulamanın izleme listesi bölümünde gösterilir.

Şemayı, favorileri destekleyecek şekilde geliştirme

FavoriteMovie türü, kullanıcılar ile en sevdikleri filmler arasındaki çok-çok ilişkilerini işleyen bir birleştirme tablosudur. Her tablo bir User'ü bir Movie'a bağlar.

Kod snippet'ini kopyalayıp dataconnect/schema/schema.gql dosyanıza yapıştırın:

type FavoriteMovie
  @table(name: "FavoriteMovies", singular: "favorite_movie", plural: "favorite_movies", key: ["user", "movie"]) {
  ## @ref is implicit
  user: User!
  movie: Movie!
}

Favori ekleme ve kaldırma için mutasyonları tanımlama

Uygulamanın kullanıcının favori filmlerini gösterebilmesi için kullanıcının favori filmlerini belirtmesi gerekir. Bunu yapmak için önce bir filmi kullanıcının favorilerinden biri olarak işaretlemek veya sırasıyla favorilerinden kaldırmak için iki mutasyon eklemeniz gerekir.

VS Code'da mutations.gql dosyasını dataconnect/connector/mutations.gql içinde açın
Filmleri favorilere ekleme işlemini gerçekleştirmek için aşağıdaki mutasyonları ekleyin:

## Add a movie to the user's favorites list
mutation AddFavoritedMovie($movieId: UUID!) @auth(level: USER) {
  favorite_movie_upsert(data: { userId_expr: "auth.uid", movieId: $movieId })
}

## Remove a movie from the user's favorites list
mutation DeleteFavoritedMovie($movieId: UUID!) @auth(level: USER) {
  favorite_movie_delete(key: { userId_expr: "auth.uid", movieId: $movieId })
}

Mutasyonları uygulamanızın kullanıcı arayüzüne bağlama

Kullanıcılar, filmin ayrıntılar ekranındaki kalp simgesini tıklayarak filmi favori olarak işaretleyebilir.

Yeni oluşturduğunuz mutasyonları uygulamanın kullanıcı arayüzüne bağlamak için MovieCardView dosyasında aşağıdaki değişiklikleri yapın:

FriendlyFlixSDK dosyasını içe aktarma ve bağlayıcıyı ayarlama

import NukeUI
import os
import SwiftUI
import FirebaseDataConnect
import FriendlyFlixSDK

struct MovieCardView: View {
  private let logger = Logger(subsystem: "FriendlyFlix", category: "moviecard")
  @Environment(\.dismiss) private var dismiss
  private var connector = DataConnect.friendlyFlixConnector

  ...
}

toggleFavourite yöntemini uygulayın. Kullanıcı MovieCardView'teki kalp simgesine dokunduğunda çağrılır:

struct MovieCardView {

  ...

  private func toggleFavourite() {
    Task {
      if isFavourite {
        let _ = try await connector.deleteFavoritedMovieMutation.execute(movieId: movie.id)
      } else {
        let _ = try await connector.addFavoritedMovieMutation.execute(movieId: movie.id)
      }
    }
  }
}

Bu işlem, veritabanındaki mevcut filmin favori durumunu günceller. Kullanıcı arayüzü durumunun buna göre yansıtıldığından emin olmak için atlamanız gereken son bir adım daha var.

Bir filmin favori olarak işaretlenip işaretlenmediğini öğrenmek için sorgu tanımlama

VS Code'ta dataconnect/connector içinde queries.gql dosyasını açın.
Bir filmin favori olarak işaretlenip işaretlenmediğini kontrol etmek için aşağıdaki sorguyu ekleyin:

query GetIfFavoritedMovie($movieId: UUID!) @auth(level: USER) {
  favorite_movie(key: { userId_expr: "auth.uid", movieId: $movieId }) {
    movieId
  }
}

Xcode'da GetIfFavoritedMovie sorgusuna referans oluşturun ve bu MovieCardView'da gösterilen filmin mevcut kullanıcı için favori olarak işaretlenip işaretlenmediğini belirleyen hesaplanmış özelliği uygulayın.

struct MovieCardView: View {

  ...

  public init(showDetails: Bool, movie: Movie) {
    self.showDetails = showDetails
    self.movie = movie

    isFavouriteRef = connector.getIfFavoritedMovieQuery.ref(movieId: movie.id)
  }

  // MARK: - Favourite handling

  private let isFavouriteRef: QueryRefObservation<
    GetIfFavoritedMovieQuery.Data,
    GetIfFavoritedMovieQuery.Variables
  >
  private var isFavourite: Bool {
    isFavouriteRef.data?.favorite_movie?.movieId != nil
  }

  ...

}

Kullanıcı düğmeye her dokunduğunda sorguyu yürütmek için toggleFavourite alanındaki kodu güncelleyin. Bu sayede isFavourite hesaplanmış mülkü her zaman doğru değeri döndürür.

  private func toggleFavourite() {
    Task {
      if isFavourite {
        ...
      }

      let _ = try await isFavouriteRef.execute()
    }
  }

Favori filmleri getirme

Bu özelliğin son adımı olarak, kullanıcının favori filmlerini getirerek izleme listesinde görmesini sağlayacaksınız.

VS Code'da dataconnect/connector/queries.gql içinde queries.gql dosyasını açın ve aşağıdaki sorguyu yapıştırın:

## Get favorite movies by user ID
query GetUserFavoriteMovies @auth(level: USER) {
  user(id_expr: "auth.uid") {
    favoriteMovies: favorite_movies_on_user {
      movie {
        id
        title
        genre
        imageUrl
        releaseYear
        rating
        description
      }
    }
  }
}

Kullanıcının favori filmleri listesi LibraryScreen'te gösterilir. Bu ekran yalnızca kullanıcı oturum açmışsa veri göstermelidir. Bu nedenle, önce ekranın kimlik doğrulama durumunu uygulamanın AuthenticationService özelliğine bağlarsınız.

FavoriteMovieFavoriteMovies - Movie - Movie+DataConnect.swift rotasını haritalamak için kod ekleyin:

import FirebaseDataConnect
import FriendlyFlixSDK

extension Movie {

  ...

  init(from: GetUserFavoriteMoviesQuery.Data.User.FavoriteMovieFavoriteMovies) {
    id = from.movie.id
    title = from.movie.title
    description = from.movie.description ?? ""
    releaseYear = from.movie.releaseYear
    rating = from.movie.rating
    imageUrl = from.movie.imageUrl
  }
}

Xcode'da LibraryScreen dosyasını açın ve ardından isSignedIn dosyasını aşağıdaki gibi güncelleyin:

struct LibraryScreen: View {
  ...

  private var isSignedIn: Bool {
    authenticationService.user != nil
  }

}

Ardından Firebase Data Connect ve FriendlyFlixSDK'yı içe aktarın ve GetUserFavoriteMovies sorgusunun referansını alın:

import SwiftUI
import FirebaseDataConnect
import FriendlyFlixSDK

struct LibraryScreen {

 ...

  private var connector = DataConnect.friendlyFlixConnector

  ...

  init() {
    watchListRef = connector.getUserFavoriteMoviesQuery.ref()
  }

  private let watchListRef: QueryRefObservation<
    GetUserFavoriteMoviesQuery.Data,
    GetUserFavoriteMoviesQuery.Variables
  >
  private var watchList: [Movie] {
    watchListRef.data?.user?.favoriteMovies.map(Movie.init) ?? []
  }

  ...

}

Görünüm göründüğünde watchListRef sorgusunun yürütüldüğünden emin olun:

extension LibraryScreen: View {
  var body: some View {
    ...
            MovieListSection(namespace: namespace, title: "Watch List", movies: watchList)
              .onAppear {
                Task {
                  try await watchListRef.execute()
                }
  ...

Kullanım örnekleri

Artık uygulamayı çalıştırıp yeni eklediğiniz favoriler özelliğini deneyebilirsiniz. Göz önünde bulundurulması gereken bazı noktalar:

Firebase Emulator'un çalıştığından emin olun
Filmler ve film ayrıntıları için örnek veriler eklediğinizden emin olun
Kullanıcı olarak kaydolduğunuzdan emin olun

Xcode'da Çalıştır düğmesini tıklayarak uygulamayı iOS simülasyon aracında başlatın.
Uygulama açıldığında, film ayrıntılarını görüntülemek için bir film kartına dokunun.
Filmi favori olarak işaretlemek için kalp simgesine dokunun. Kalp, dolu bir renge döner.
Bu işlemi birkaç film için tekrarlayın.
Kitaplık sekmesine gidin. Artık favori olarak işaretlediğiniz tüm filmlerin listesini göreceksiniz.

10. Tebrikler

Tebrikler, Firebase Data Connect'i iOS uygulamasına başarıyla eklediniz. Artık Data Connect'i ayarlamak, sorgu ve mutasyon oluşturmak ve kullanıcı kimlik doğrulamasını yönetmek için gereken temel adımları biliyorsunuz.

İsteğe bağlı: Üretime dağıtma

Bu uygulama şu ana kadar yalnızca Firebase emülatörlerini kullanıyor. Bu uygulamayı gerçek bir Firebase projesine nasıl dağıtacağınızı öğrenmek istiyorsanız bir sonraki adıma geçin.

11. (İsteğe bağlı) Uygulamanızı dağıtma

Bu uygulama şu ana kadar tamamen yereldir ve tüm veriler Firebase Emulator Suite'te bulunur. Bu bölümde, Firebase projenizi bu uygulamanın üretimde çalışacağı şekilde nasıl yapılandıracağınızı öğreneceksiniz.

Firebase Authentication'ı etkinleştirme

Firebase konsolunda Kimlik doğrulama bölümüne gidin ve Başlayın'ı tıklayın.
Oturum açma yöntemi sekmesine gidin .
Yerel sağlayıcılar bölümünde E-posta/Şifre seçeneğini belirleyin.
E-posta/Şifre sağlayıcıyı etkinleştirin ve ardından Kaydet'i tıklayın.

Firebase Data Connect'i etkinleştirme

Önemli: Projenizde ilk kez bir şema dağıtıyorsanız bu işlem bir Cloud SQL PostgreSQL örneği oluşturur. Bu işlem yaklaşık 15 dakika sürebilir. Cloud SQL örneği hazır ve Firebase Data Connect ile entegre olana kadar dağıtım yapamazsınız.

1. Firebase Data Connect VS Code uzantısı kullanıcı arayüzünde Üretime dağıt'ı tıklayın. 2. Şema değişikliklerini incelemeniz ve zararlı olabilecek değişiklikleri onaylamanız gerekebilir. Sizden şunlar istenir: - firebase dataconnect:sql:diff'ü kullanarak şema değişikliklerini inceleyin - Değişikliklerden memnun kaldığınızda firebase dataconnect:sql:migrate tarafından başlatılan akışı kullanarak değişiklikleri uygulayın

PostgreSQL için Cloud SQL örneğiniz, dağıtılan nihai şema ve verilerle güncellenir. Durumu Firebase Konsolu'nda izleyebilirsiniz.

Artık üretim ortamına veri eklemek için Firebase Data Connect panelinde, yerel emülatörlerde yaptığınız gibi Çalıştır (Üretim)'ı tıklayabilirsiniz.

iOS uygulamasını tekrar çalıştırmadan önce uygulamanın projenizin üretim örneğine bağlandığından emin olun:

Ürün > Şema > Şemayı Düzenle... menüsünü açın.
Çalıştır bölümünde -useEmulator YES başlatma bağımsız değişkeninin işaretini kaldırın.