Firebase Data Connect ile geliştirme yapma (Android)

1. Genel Bakış

ddc52cd46f923cf1.png

Bu codelab'de, film yorumu Android uygulaması oluşturmak için Firebase Data Connect'i bir Cloud SQL veritabanına entegre edeceksiniz. Aşağıdakileri nasıl yapacağınızı öğreneceksiniz:

  • Firebase Data Connect için GraphQL şeması yazma
  • Sorgu ve mutasyon yazma
  • Verilerinizin güvenliğini sağlamak için kullanıcı kimlik doğrulamasını uygulama

Ön koşullar

  • Android Studio'nun en son sürümü
  • API düzeyi 23 veya sonraki sürümlere sahip Android emülatörü

Neler öğreneceksiniz?

  • Firebase Data Connect'i yerel emülatörlerle ayarlama.
  • Data Connect ve GraphQL'i kullanarak veri şeması tasarlama.
  • Film yorumu uygulaması için sorgu ve mutasyon yazma.
  • Kotlin SDK'sını oluşturma ve Android uygulamasında kullanma.
  • (İsteğe bağlı) Data Connect hizmetini üretime dağıtma.

2. Örnek projeyi oluşturma

Firebase projesi oluşturma

  1. Google Hesabınızla Firebase konsolunda oturum açın.
  2. Firebase konsolunda Proje ekle'yi tıklayın.
  3. Firebase projeniz için bir ad girin (örneğin, "Film İncelemesi") ve Devam'ı tıklayın.
  4. Google Analytics'i etkinleştirmeniz istenebilir. Bu kod laboratuvarının amacı açısından seçiminiz önemli değildir.
  5. Yaklaşık bir dakika sonra Firebase projeniz hazır olur. Devam et'i 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-android adlı bir dizin oluşturur:

git clone https://github.com/firebaseextended/codelab-dataconnect-android.git

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

Firebase yapılandırması ekleme

  1. Firebase konsolunda, sol gezinme menüsünden Projeye Genel Bakış'ı seçin. Platformu seçmek için Android düğmesini tıklayın. Paket adı istendiğinde com.google.firebase.example.dataconnect
  2. Uygulamayı Kaydet'i tıklayın ve google-services.json dosyasını indirme talimatlarını uygulayarak yeni indirdiğiniz kodun app/ dizinine taşıyın. Ardından Sonraki'yi tıklayın.

3. Data Connect'i ayarlama

Kurulum

Otomatik yükleme

codelab-dataconnect-android 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.

Not: VS Code'un masaüstü sürümü zaten yüklüyse komut dosyası VS Code'u otomatik olarak açar. Komut dosyası başarısız olursa aşağıdaki manuel yükleme adımlarını uygulayın.

Manuel yükleme

  1. Visual Studio Code'u yükleme
  2. Node.js'yi yükleyin
  3. VS Code'da codelab-dataconnect-android dizinini açın.
  4. 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:

  1. 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. ef59f25a9e9cbfff.png
  2. Firebase projesi bağla düğmesini tıklayın ve konsolda daha önce oluşturduğunuz projeyi seçin. 951a836ba0682494.png

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. Bu codelab'de kod oluşturma işlemini görselleştirmeyi kolaylaştırmak için connectorId değerini movies, package değerini ise com.google.firebase.example.dataconnect.generated olarak değiştirin:

connectorId: movies
generate:
  kotlinSdk:
    outputDir: ../../app/src/main/java
    package: com.google.firebase.example.dataconnect.generated

Bu durumların ne anlama geldiğini öğrenmek için:

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

Firebase emülatörlerini başlatma

VS Code'da Emülatörleri başlat düğmesini tıklayın.

93fb67962e96a7cb.png

Emülatörün, entegre terminalde başlatıldığını görürsünüz. Doğru şekilde başlarsa aşağıdaki gibi bir çıkış görürsünüz:

8504ae0080923823.png

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

  1. Android Studio'yu açın.
  2. Android Studio'nun karşılama ekranında Aç düğmesini tıklayın ve codelab-dataconnect-android dizinini seçin. Gradle'ın senkronize edilmesini bekleyin.
  3. Gradle senkronizasyonu tamamlandıktan sonra app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt dosyasını açın ve useEmulator() işlevini çağırın:
import com.google.firebase.example.dataconnect.generated.MoviesConnector
import com.google.firebase.example.dataconnect.generated.instance

class MainActivity : ComponentActivity() {
  ...

  // Initialize Firebase Data Connect
  MoviesConnector.instance.dataConnect.useEmulator("10.0.2.2", 9399)

  ...
}

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, User ve Review gibi varlıklar, Firebase Data Connect ve GraphQL şeması yönergeleri kullanılarak kurulan ilişkilerle veritabanı tablolarıyla eşlenir.

Temel Varlıklar ve İlişkiler

Movie türü, uygulamanın aramalar ve film profilleri için kullandığı başlık, tür ve etiketler gibi önemli ayrıntıları içerir. User türü, yorumlar ve favoriler gibi kullanıcı etkileşimlerini izler. Review, kullanıcıları filmlere bağlar ve uygulamanın kullanıcı tarafından oluşturulan puanları ve geri bildirimleri göstermesine olanak tanır.

Kullanıcı Tablosu

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

VS Code'da dataconnect/schema/schema.gql dosyasını açın ve User tablo tanımının yorumunu kaldırın (veya ekleyin):

# Users
# Suppose 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)")
  # The following are generated by the user: User! field in the Review table
  # reviews_on_user 
  # movies_via_Review
}

Film tablosu

Film türü, başlık, tür, gösterimYılı ve derecelendirme gibi alanlar da dahil olmak üzere bir film öğesinin ana yapısını tanımlar.

VS Code'da dataconnect/schema/schema.gql dosyasını açın ve Movie tablo tanımının yorumunu kaldırın (veya ekleyin):

# Movies
type Movie @table {
  # The below parameter values are generated by default with @table, and can be edited manually.
  # implies directive `@col(name: "movie_id")`, generating a column name
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata Tablosu

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

VS Code'da dataconnect/schema/schema.gql dosyasını açın ve MovieMetadata tablo tanımının yorumunu kaldırın (veya ekleyin):

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # @unique indicates a 1-1 relationship
  movie: Movie! @unique 
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

İnceleme Tablosu

Yorum türü, yorum öğesini temsil eder ve Kullanıcı ile Film türlerini çoklu ilişkiyle birbirine bağlar (bir kullanıcı çok sayıda yorum yazabilir ve her filmin çok sayıda yorumu olabilir).

VS Code'da dataconnect/schema/schema.gql dosyasını açın ve Review tablo tanımının yorumunu kaldırın (veya ekleyin):

# Reviews
type Review @table(name: "Reviews", key: ["movie", "user"]) {
  id: UUID! @default(expr: "uuidV4()")
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

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 Film ve Yorum türlerindeki kimlik alanı otomatik olarak bir UUID ile doldurulur.

Sahte veri ekleme

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

  1. 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.
  2. 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.

b070f025e573ab9b.png

  1. Verilerin başarıyla eklendiğini onaylamak için Veri Bağlantısı Çalıştırma terminalini kontrol edin.

e2058cb4db857058.png

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

5. Filmleri listelemek için sorgu oluşturma

Filmleri listelemek için bir sorgu oluşturarak başlayın. Her film için kimliği, başlığı, imageUrl değerini ve türünü alırsınız.

Sorguyu tanımlama

VS Code'de dataconnect/connector/queries.gql dosyasını açın ve ListMovies sorgusunun yorumunu kaldırın (veya ekleyin):

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

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, Data Connect Execution terminalinin "result" (sonuç) bölümünde gösterilir.

822bf32321df4716.png

Android uygulamasından arama yapma

Sorguyu Data Connect Emülatör'ünde test ettiğinize göre artık uygulamaya ekleme zamanı.

Android Studio'da app/src/main/java/com/google/firebase/example/dataconnect/MoviesScreen.kt dosyasını açın ve film listesini ızgara biçiminde görüntülemek için aşağıdaki kodu ekleyin:

import com.google.firebase.example.dataconnect.generated.ListMoviesQuery
import com.google.firebase.example.dataconnect.generated.MoviesConnector
import com.google.firebase.example.dataconnect.generated.execute
import com.google.firebase.example.dataconnect.generated.instance

@Composable
fun MoviesScreen(
    onMovieClicked: (id: String) -> Unit
) {
    var movies by remember { mutableStateOf(emptyList<ListMoviesQuery.Data.MoviesItem>()) }
    LaunchedEffect(Unit) {
        // Queries need to be executed in a coroutine context
        try {
          movies = MoviesConnector.instance.listMovies.execute().data.movies
        } catch (e: Exception) {
          // Will be done at a later step
        }
    }
    LazyVerticalGrid(GridCells.Adaptive(150.dp)) {
        items(movies) { movie ->
            MovieCard(
                movieId = movie.id.toString(),
                movieTitle = movie.title,
                movieImageUrl = movie.imageUrl,
                movieGenre = movie.genre,
                onMovieClicked = {
                    onMovieClicked(movie.id.toString())
                }
            )
        }
    }
}

Uygulamayı çalıştırma

Android Studio'da, uygulamayı Android emülatöründe 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:

ddc52cd46f923cf1.png

6. Film ayrıntıları sorgusunu oluşturma

Uygulama artık filmleri listeleyebilir. Şimdi her filmin ayrıntılarını gösterecek bir sorgu oluşturalım.

Sorguyu tanımlama

VS Code'da dataconnect/connector/queries.gql dosyasını açın ve GetMovieById sorgusunun yorumunu kaldırın (veya ekleyin):

# Get movie by id
query GetMovieById($id: UUID!) @auth(level: PUBLIC) {
  movie(id: $id) {
    id
    title
    imageUrl
    genre
    metadata: movieMetadata_on_movie {
      rating
      releaseYear
      description
    }
    reviews: reviews_on_movie {
      id
      reviewText
      reviewDate
      rating
      user {
        id
        username
      }
    }
  }
}

Android uygulamasından arama yapma

Android Studio'da app/src/main/java/com/google/firebase/example/dataconnect/MovieDetailScreen.kt dosyasını açın ve aşağıdaki kodu ekleyin:

importcom.google.firebase.example.dataconnect.generated.GetMovieByIdQuery
importcom.google.firebase.example.dataconnect.generated.MoviesConnector
importcom.google.firebase.example.dataconnect.generated.execute
importcom.google.firebase.example.dataconnect.generated.instance

@Composable
fun MovieDetailScreen(
    movieId: String
) {
    var movie by remember { mutableStateOf<GetMovieByIdQuery.Data.Movie?>(null) }
    LaunchedEffect(Unit) {
        movie = MoviesConnector.instance.getMovieById.execute(
            UUID.fromString(movieId)
        ).data.movie
    }
    if (movie == null) {
        LoadingScreen()
    } else {
        MovieDetails(
            movieTitle = movie!!.title,
            movieImageUrl = movie!!.imageUrl,
            movieGenre = movie!!.genre,
            movieRating = movie!!.metadata?.rating,
            movieReleaseYear = movie!!.metadata?.releaseYear,
            movieDescription = movie!!.metadata?.description,
        )
    }
}

Uygulamayı çalıştırma

Android Studio'da, uygulamayı Android emülatöründe başlatmak için Çalıştır düğmesini tıklayın.

7. Kullanıcı eklemek için bir mutasyon oluşturma

Uygulama artık veri gösterebiliyor. Şimdi uygulamadan yeni veri ekleme zamanı. Bunu güvenli bir şekilde yapmak için Firebase Authentication'i kullanmanız gerekir.

Bu kod laboratuvarının amacı doğrultusunda uygulama, kullanıcıların oturum açması için anonim kimlik doğrulamayı kullanır ancak daha güvenli bir uygulama için e-posta/şifre kimlik doğrulaması veya birleşik kimlik sağlayıcı gibi farklı bir kimlik doğrulama yöntemi kullanmayı düşünebilirsiniz.

Mutasyonu tanımlama

VS Code'de dataconnect/connector/mutations.gql dosyasını açın ve UpsertUser sorgusunun yorumunu kaldırın (veya ekleyin):

# Upsert (update or insert) a user's username based on their auth.uid
mutation UpsertUser($username: String!) @auth(level: USER) {
  user_upsert(
    data: {
      id_expr: "auth.uid"
      username: $username
    }
  )
}

Android uygulamasından arama yapma

Android Studio'da app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt dosyasını açın ve mutasyonu çağırın:

import com.google.firebase.example.dataconnect.generated.execute

LaunchedEffect(Unit) {
  // If there's no user signed in, sign in an anonymous user
  if (firebaseAuth.currentUser == null) {
    firebaseAuth.signInAnonymously().await()
    val newUsername = getRandomUsername()
    MoviesConnector.instance.upsertUser.execute(newUsername)
  }
}

Uygulamayı çalıştırma

Android Studio'da, uygulamayı Android emülatöründe başlatmak için Çalıştır düğmesini tıklayın.

8. Tebrikler

Tebrikler, Firebase Data Connect'i Android 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.

Sonraki Adımlar

İ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.

9. (İ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 ve sağlayıcılar arasından Anonim Oturum Açma seçeneğini belirleyin.

Anonim oturum açma yöntemini etkinleştirin ve Kaydet'i tıklayın.

Firebase Data Connect şemasını dağıtma

Ö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 inceleme
    • 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.