เกี่ยวกับ Codelab นี้
1 ภาพรวม
โค้ดแล็บนี้จะแนะนำขั้นตอนในการผสานรวม Firebase Data Connect กับฐานข้อมูล Cloud SQL เพื่อสร้างแอปรีวิวภาพยนตร์สำหรับ iOS โดยใช้ SwiftUI
คุณจะได้เรียนรู้วิธีเชื่อมต่อแอปพลิเคชัน iOS กับฐานข้อมูล Cloud SQL โดยใช้ Firebase Data Connect ซึ่งช่วยให้ซิงค์ข้อมูลรีวิวภาพยนตร์ได้อย่างราบรื่น
เมื่อจบ Codelab นี้ คุณจะมีแอป iOS ที่ใช้งานได้ซึ่งช่วยให้ผู้ใช้เรียกดูภาพยนตร์และทําเครื่องหมายภาพยนตร์เป็นรายการโปรดได้ โดยทั้งหมดนี้ได้รับการสนับสนุนจากฐานข้อมูล Cloud SQL โดยใช้ความสามารถของ Firebase Data Connect
สิ่งที่คุณจะได้เรียนรู้
โค้ดแล็บนี้จะสอนวิธีต่อไปนี้
- ตั้งค่า Firebase Data Connect โดยใช้ชุดโปรแกรมจำลอง Firebase เพื่อดำเนินการได้อย่างรวดเร็ว
- ออกแบบสคีมาฐานข้อมูลโดยใช้ Data Connect และ GraphQL
- สร้าง Swift SDK ที่ปลอดภัยตามประเภทจากสคีมาฐานข้อมูล แล้วเพิ่มลงในแอปพลิเคชัน Swift
- ใช้การตรวจสอบสิทธิ์ผู้ใช้และผสานรวมกับ Firebase Data Connect เพื่อรักษาความปลอดภัยให้ข้อมูลของผู้ใช้
- เรียกดู อัปเดต ลบ และจัดการข้อมูลใน Cloud SQL โดยใช้การค้นหาและการดัดแปลงที่ทำงานด้วย GraphQL
- (ไม่บังคับ) ทำให้ใช้งานได้จริงบริการเชื่อมต่อข้อมูลในเวอร์ชันที่ใช้งานจริง
ข้อกำหนดเบื้องต้น
- Xcode เวอร์ชันล่าสุด
- โค้ดตัวอย่างของ Codelab คุณจะดาวน์โหลดโค้ดตัวอย่างในขั้นตอนแรกของ Codelab
2 ตั้งค่าโปรเจ็กต์ตัวอย่าง
สร้างโปรเจ็กต์ Firebase
- ลงชื่อเข้าใช้คอนโซล Firebase ด้วยบัญชี Google
- ในคอนโซล Firebase ให้คลิกสร้างโปรเจ็กต์ Firebase
- ป้อนชื่อโปรเจ็กต์ Firebase (เช่น "Friendly Flix") แล้วคลิกต่อไป
- ระบบอาจขอให้คุณเปิดใช้ความช่วยเหลือจาก AI สําหรับโปรเจ็กต์ Firebase การเลือกของคุณไม่สำคัญสำหรับวัตถุประสงค์ของโค้ดแล็บนี้
- ระบบอาจขอให้คุณเปิดใช้ Google Analytics การเลือกของคุณไม่สำคัญสำหรับวัตถุประสงค์ของโค้ดแล็บนี้
- หลังจากผ่านไปประมาณ 1 นาที โปรเจ็กต์ Firebase จะพร้อมใช้งาน คลิกต่อไป
ดาวน์โหลดรหัส
เรียกใช้คําสั่งต่อไปนี้เพื่อโคลนโค้ดตัวอย่างสําหรับโค้ดแล็บนี้ ซึ่งจะสร้างไดเรกทอรีชื่อ codelab-dataconnect-ios ในเครื่อง
git clone https://github.com/peterfriese/codelab-dataconnect-ios`
หากไม่มี git ในเครื่อง คุณก็ดาวน์โหลดโค้ดจาก GitHub ได้โดยตรง
เพิ่มการกําหนดค่า Firebase
Firebase SDK ใช้ไฟล์กําหนดค่าเพื่อเชื่อมต่อกับโปรเจ็กต์ Firebase ในแพลตฟอร์ม Apple ไฟล์นี้เรียกว่า GoogleServices-Info.plist ในขั้นตอนนี้ คุณจะดาวน์โหลดไฟล์การกําหนดค่าและเพิ่มลงในโปรเจ็กต์ Xcode
- ในคอนโซล Firebase ให้เลือกภาพรวมโปรเจ็กต์ในการนําทางด้านซ้าย
- คลิกปุ่ม iOS+ เพื่อเลือกแพลตฟอร์ม เมื่อระบบขอรหัสชุด Apple ให้ใช้
com.google.firebase.samples.FriendlyFlix - คลิกลงทะเบียนแอป แล้วทําตามวิธีการเพื่อดาวน์โหลดไฟล์
GoogleServices-Info.plist - ย้ายไฟล์ที่ดาวน์โหลดไปยังไดเรกทอรี
start/FriendlyFlix/app/FriendlyFlix/FriendlyFlix/ของโค้ดที่เพิ่งดาวน์โหลดมา โดยแทนที่ไฟล์GoogleServices-Info.plistที่มีอยู่ - จากนั้นคลิกถัดไป 2-3 ครั้งเพื่อตั้งค่าโปรเจ็กต์ในคอนโซล Firebase ให้เสร็จสมบูรณ์ (คุณไม่จําเป็นต้องเพิ่ม SDK ลงในแอป เนื่องจากระบบได้ดำเนินการให้คุณแล้วในโปรเจ็กต์เริ่มต้น)
- สุดท้าย ให้คลิกไปยังคอนโซลเพื่อตั้งค่าให้เสร็จสมบูรณ์
3 ตั้งค่า Data Connect
การติดตั้ง
การติดตั้งอัตโนมัติ
เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรี codelab-dataconnect-ios/FriendlyFlix
curl -sL https://firebase.tools/dataconnect | bash
สคริปต์นี้จะพยายามตั้งค่าสภาพแวดล้อมการพัฒนาให้คุณและเปิด IDE บนเบราว์เซอร์ IDE นี้จัดเตรียมเครื่องมือต่างๆ รวมถึงส่วนขยาย VS Code ที่รวมไว้ล่วงหน้า เพื่อช่วยคุณจัดการสคีมา รวมถึงกำหนดการค้นหาและการดัดแปลงที่จะใช้ในแอปพลิเคชัน และสร้าง SDK แบบประเภทที่แน่นอน
หลังจากเรียกใช้สคริปต์แล้ว VS Code ควรเปิดขึ้นโดยอัตโนมัติ
หลังจากดำเนินการนี้ 1 ครั้งแล้ว คุณจะเริ่มต้น VS Code ได้โดยเรียกใช้ VS Code ในไดเรกทอรีในเครื่อง โดยทำดังนี้
code .
การติดตั้งด้วยตนเอง
- ติดตั้ง Visual Studio Code
- ติดตั้ง Node.js
- เปิดไดเรกทอรี
codelab-dataconnect-ios/FriendlyFlixใน VS Code - ติดตั้งส่วนขยาย Firebase Data Connect จาก Visual Studio Code Marketplace
เริ่มต้นใช้งาน Data Connect ในโปรเจ็กต์
ในแผงด้านซ้ายมือ ให้คลิกไอคอน Firebase เพื่อเปิด UI ของส่วนขยาย Data Connect ใน VS Code
- คลิกปุ่มลงชื่อเข้าใช้ด้วย Google หน้าต่างเบราว์เซอร์จะเปิดขึ้น ให้ทำตามวิธีการเพื่อลงชื่อเข้าใช้ส่วนขยายด้วยบัญชี Google
- คลิกปุ่มเชื่อมต่อโปรเจ็กต์ Firebase แล้วเลือกโปรเจ็กต์ที่คุณสร้างไว้ก่อนหน้านี้ในคอนโซล
- คลิกปุ่ม Run firebase init แล้วทําตามขั้นตอนในเทอร์มินัลแบบรวม
กำหนดค่าการสร้าง SDK
เมื่อคลิกปุ่ม Run firebase init ส่วนขยาย Firebase Data Connect ควรเริ่มต้นไดเรกทอรี dataconnect ให้คุณ
ใน VS Code ให้เปิดไฟล์ dataconnect/connector/connector.yaml แล้วคุณจะเห็นการกําหนดค่าเริ่มต้น
โปรดอัปเดตการกําหนดค่าและใช้การตั้งค่าต่อไปนี้เพื่อให้แน่ใจว่าโค้ดที่สร้างขึ้นทํางานกับโค้ดแล็บนี้ได้ กล่าวโดยละเอียดคือ ตรวจสอบว่าได้ตั้งค่า connectorId เป็น friendly-flix และแพ็กเกจ Swift เป็น FriendlyFlixSDK
connectorId: "friendly-flix"
generate:
swiftSdk:
outputDir: "../../app"
package: "FriendlyFlixSDK"
observablePublisher: observableMacro
การตั้งค่าเหล่านี้มีความหมายดังนี้
connectorId- ชื่อที่ไม่ซ้ำกันสำหรับเครื่องมือเชื่อมต่อนี้outputDir- เส้นทางที่จะจัดเก็บ Data Connect SDK ที่สร้างขึ้น เส้นทางนี้สัมพันธ์กับไดเรกทอรีที่มีไฟล์connector.yamlpackage- ชื่อแพ็กเกจที่จะใช้สำหรับแพ็กเกจ Swift ที่สร้างขึ้น
เมื่อบันทึกไฟล์นี้แล้ว Firebase Data Connect จะสร้างแพ็กเกจ Swift ชื่อ FriendlyFlixSDK ให้คุณ และวางไว้ข้างโฟลเดอร์โปรเจ็กต์ FriendlyFlix
เริ่มโปรแกรมจำลอง Firebase
ใน VS Code ให้เปลี่ยนไปใช้มุมมอง Firebase แล้วคลิกปุ่มเริ่มโปรแกรมจำลอง
ซึ่งจะเป็นการเริ่มโปรแกรมจำลอง Firebase ในเทอร์มินัลแบบรวม เอาต์พุตควรมีลักษณะดังนี้
npx -y firebase-tools@latest emulators:start --project <your-project-id>
เพิ่มแพ็กเกจที่สร้างขึ้นลงในแอป Swift
- เปิด
FriendlyFlix/app/FriendlyFlix/FriendlyFlix.xcodeprojใน Xcode - เลือก File > Add Package Dependencies...
- คลิกเพิ่มในเครื่อง... แล้วเพิ่มแพ็กเกจ
FriendlyFlixSDKจากโฟลเดอร์FriendlyFlix/app - รอให้ Xcode แก้ปัญหาการพึ่งพาแพ็กเกจ
- ในกล่องโต้ตอบเลือกผลิตภัณฑ์แพ็กเกจสำหรับ FriendlyFlixSDK ให้เลือก
FriendlyFlixเป็นเป้าหมาย แล้วคลิกเพิ่มแพ็กเกจ
กำหนดค่าแอป iOS ให้ใช้โปรแกรมจำลองในเครื่อง
- เปิด
FriendlyFlixApp.swift(คุณสามารถกด CMD + Shift + O เพื่อเปิดกล่องโต้ตอบเปิดด่วน แล้วพิมพ์ "FriendlyFlixApp" เพื่อค้นหาไฟล์อย่างรวดเร็ว) - นําเข้า Firebase, Firebase Auth, Firebase Data Connect และ SDK ที่สร้างขึ้นสําหรับสคีมา
- กำหนดค่า Firebase ในตัวแปรเริ่มต้น
- ตรวจสอบว่า DataConnect และ Firebase Auth ใช้โปรแกรมจำลองภายใน
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()
}
...
}
- เลือกโปรแกรมจำลอง iOS ในเมนูแบบเลื่อนลงปลายทาง
- กด CMD+R (หรือคลิกปุ่มเรียกใช้) ใน Xcode เพื่อเรียกใช้แอปบนเครื่องจำลอง
4 กําหนดสคีมาและป้อนข้อมูลฐานข้อมูลล่วงหน้า
ในส่วนนี้ คุณจะต้องกำหนดโครงสร้างและความสัมพันธ์ระหว่างเอนทิตีหลักในแอปพลิเคชันภาพยนตร์ในสคีมา เอนทิตี เช่น Movie, MovieMetaData และอื่นๆ จะแมปกับตารางฐานข้อมูล โดยมีการสร้างความสัมพันธ์โดยใช้คำสั่ง Firebase Data Connect และคำสั่งสคีมา GraphQL
เอนทิตีและความสัมพันธ์หลัก
โมเดลข้อมูลสําหรับแอปติดตามภาพยนตร์นี้ประกอบด้วยเอนทิตีหลายรายการที่คุณจะต้องสร้างในหลักสูตรของ Codelab นี้ คุณจะต้องสร้างเอนทิตีหลักก่อน แล้วจึงเพิ่มเอนทิตีที่จําเป็นสําหรับฟีเจอร์ต่างๆ เมื่อคุณใช้งานฟีเจอร์มากขึ้น
ในขั้นตอนนี้ คุณจะได้สร้างประเภท Movie และ MovieMetadata
ภาพยนตร์
ประเภท Movie จะกำหนดโครงสร้างหลักสำหรับเอนทิตีภาพยนตร์ ซึ่งรวมถึงช่องต่างๆ เช่น title, genre, releaseYear และ rating
ใน VS Code ให้เพิ่มการกําหนดประเภท Movie ลงใน dataconnect/schema/schema.gql ดังนี้
type Movie @table {
id: UUID! @default(expr: "uuidV4()")
title: String!
imageUrl: String!
releaseYear: Int
genre: String
rating: Float
description: String
tags: [String]
}
MovieMetadata
ประเภท MovieMetadata จะสร้างความสัมพันธ์แบบ 1:1 กับประเภท Movie ซึ่งรวมถึงข้อมูลเพิ่มเติม เช่น ผู้กำกับภาพยนตร์
เพิ่มคําจํากัดความของตาราง MovieMetadata ลงในไฟล์ dataconnect/schema/schema.gql
type MovieMetadata @table {
movie: Movie! @ref
director: String
}
ช่องและค่าเริ่มต้นที่สร้างขึ้นโดยอัตโนมัติ
สคีมาใช้นิพจน์อย่าง @default(expr: "uuidV4()") เพื่อสร้างรหัสที่ไม่ซ้ำกันและการประทับเวลาโดยอัตโนมัติ ตัวอย่างเช่น ระบบจะป้อนข้อมูล UUID ลงในช่อง id ของประเภท Movie โดยอัตโนมัติเมื่อสร้างระเบียนใหม่
แทรกข้อมูลจำลองสำหรับภาพยนตร์และข้อมูลเมตาของภาพยนตร์
เมื่อกําหนดสคีมาแล้ว คุณสามารถป้อนข้อมูลจําลองลงในฐานข้อมูลล่วงหน้าเพื่อทดสอบได้
- ใน Finder ให้คัดลอก
finish/FriendlyFlix/dataconnect/moviedata_insert.gqlไปยังโฟลเดอร์start/FriendlyFlix/dataconnect - เปิด
dataconnect/moviedata_insert.gqlใน VS Code - ตรวจสอบว่าโปรแกรมจําลองในส่วนขยาย Firebase Data Connect ทํางานอยู่
- คุณควรเห็นปุ่มเรียกใช้ (ในเครื่อง) ที่ด้านบนของไฟล์ คลิกเพื่อแทรกข้อมูลภาพยนตร์จำลองลงในฐานข้อมูล
- ตรวจสอบเทอร์มินัลการดำเนินการเชื่อมต่อข้อมูลเพื่อยืนยันว่าเพิ่มข้อมูลเรียบร้อยแล้ว
เมื่อป้อนข้อมูลแล้ว ให้ไปยังขั้นตอนถัดไปเพื่อดูวิธีสร้างการค้นหาใน Data Connect
5 เรียกข้อมูลและแสดงภาพยนตร์
ในส่วนนี้ คุณจะใช้ฟีเจอร์สำหรับแสดงรายการภาพยนตร์
ก่อนอื่น คุณจะได้เรียนรู้วิธีสร้างการค้นหาที่ดึงข้อมูลภาพยนตร์ทั้งหมดจากตาราง movies Firebase Data Connect จะสร้างโค้ดสําหรับ SDK ที่ปลอดภัยตามประเภท ซึ่งคุณใช้เพื่อเรียกใช้การค้นหาและแสดงภาพยนตร์ที่ดึงข้อมูลมาได้ใน UI ของแอปได้
กำหนดการค้นหา ListMovies
การค้นหาใน Firebase Data Connect เขียนด้วย GraphQL ซึ่งช่วยให้คุณระบุช่องที่จะดึงข้อมูลได้ ใน FriendlyFlix หน้าจอที่แสดงภาพยนตร์ต้องมีช่องต่อไปนี้ title, description, releaseYear, rating และ imageUrl นอกจากนี้ เนื่องจากเป็นแอป SwiftUI คุณจะต้องมี id เพื่อช่วยระบุตัวตนของมุมมอง SwiftUI
ใน VS Code ให้เปิดไฟล์ dataconnect/connector/queries.gql แล้วเพิ่มการค้นหา ListMovies ดังนี้
query ListMovies @auth(level: PUBLIC) {
movies {
id
title
imageUrl
releaseYear
genre
rating
tags
description
}
}
หากต้องการทดสอบการค้นหาใหม่ ให้คลิกปุ่มเรียกใช้ (ในเครื่อง) เพื่อเรียกใช้การค้นหากับฐานข้อมูลในเครื่อง รายการภาพยนตร์จากฐานข้อมูลควรแสดงในส่วนผลลัพธ์ของเทอร์มินัลการดําเนินการของการเชื่อมต่อข้อมูล
เชื่อมต่อการค้นหา ListMovies กับหน้าจอหลักของแอป
เมื่อทดสอบการค้นหาในโปรแกรมจำลองการเชื่อมต่อข้อมูลแล้ว คุณจะเรียกใช้การค้นหาจากภายในแอปได้
เมื่อบันทึก queries.gql แล้ว Firebase Data Connect จะสร้างโค้ดที่สอดคล้องกับการค้นหา ListMovies ในแพ็กเกจ FriendlyFlixSDK
ใน Xcode ให้เปิด Movie+DataConnect.swift แล้วเพิ่มโค้ดต่อไปนี้เพื่อแมปจาก ListMoviesQuery.Data.Movie ไปยัง Movie
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 และอัปเดตโดยใช้ข้อมูลโค้ดต่อไปนี้
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) ?? []
}
...
}
การค้นหา |
เรียกใช้แอป
ใน Xcode ให้คลิกปุ่มเรียกใช้เพื่อเปิดแอปในเครื่องจำลอง iOS
เมื่อแอปเปิดขึ้น คุณควรเห็นหน้าจอที่มีลักษณะดังนี้
คุณอาจสังเกตเห็นว่าทุกส่วนในแอป (ส่วนฮีโร่ ภาพยนตร์ยอดนิยม และรายการที่อยากดู) แสดงรายการเดียวกัน เนื่องจากคุณใช้การค้นหาเดียวกันกับข้อมูลพร็อพเพอร์ตี้ทั้งหมดเหล่านั้น ในส่วนถัดไป คุณจะใช้ข้อความค้นหาที่กําหนดเอง |
6 แสดงภาพยนตร์แนะนำและภาพยนตร์ยอดนิยม
ในขั้นตอนนี้ คุณจะต้องมุ่งเน้นที่การอัปเดตวิธีแสดงภาพยนตร์ในส่วนฮีโร่ ซึ่งเป็นภาพสไลด์ที่โดดเด่นที่ด้านบนของหน้าจอหลัก และในส่วนภาพยนตร์ยอดนิยมด้านล่าง
ปัจจุบันการค้นหา ListMovies จะดึงข้อมูลภาพยนตร์ทั้งหมด หากต้องการเพิ่มประสิทธิภาพการแสดงผลสำหรับส่วนเหล่านี้ คุณจะจำกัดจำนวนภาพยนตร์ที่การค้นหาแต่ละรายการแสดง การใช้งานปัจจุบันของคําค้นหา ListMovies ยังไม่รองรับการจํากัดผลการค้นหาในตัว การเพิ่มการรองรับการจํากัดและการจัดลําดับเป็นสิ่งที่คุณจะเพิ่มในส่วนนี้
ปรับปรุงการค้นหา ListMovies
เปิด queries.gql และอัปเดต ListMovies ดังนี้เพื่อเพิ่มการรองรับการสั่งซื้อและการจำกัด
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
}
}
ซึ่งจะช่วยให้คุณจำกัดจำนวนภาพยนตร์ที่การค้นหาแสดงผล และจัดเรียงชุดผลลัพธ์ตามทั้งการจัดประเภทและปีที่เผยแพร่ได้
เมื่อบันทึกไฟล์นี้แล้ว Firebase Data Connect จะสร้างโค้ดขึ้นมาใหม่ภายใน FriendlyFlixSDK โดยอัตโนมัติ ในขั้นตอนถัดไป คุณสามารถอัปเดตโค้ดใน HomeScreen.swift เพื่อใช้ประโยชน์จากฟีเจอร์เพิ่มเติมเหล่านี้
ใช้การค้นหาที่ปรับปรุงแล้วใน UI
กลับไปที่ Xcode เพื่อทำการเปลี่ยนแปลงที่จำเป็นใน HomeScreen.swift
ก่อนอื่น ให้อัปเดต heroMoviesRef เพื่อดึงข้อมูลภาพยนตร์ 3 เรื่องล่าสุดที่เผยแพร่
struct HomeScreen {
...
init() {
heroMoviesRef = connector.listMoviesQuery
.ref { optionalVars in
optionalVars.limit = 3
optionalVars.orderByReleaseYear = .DESC
}
}
}
ถัดไป ให้ตั้งค่าการอ้างอิงการค้นหาอีกรายการสำหรับภาพยนตร์ยอดนิยม และตั้งค่าตัวกรองเป็นภาพยนตร์ที่มีคะแนนสูงสุด 5 อันดับแรก
struct HomeScreen {
...
let topMoviesRef: QueryRefObservation<ListMoviesQuery.Data, ListMoviesQuery.Variables>
init() {
heroMoviesRef = ...
topMoviesRef = connector.listMoviesQuery
.ref { optionalVars in
optionalVars.limit = 5
optionalVars.orderByRating = .DESC
}
}
}
สุดท้าย ให้อัปเดตพร็อพเพอร์ตี้ที่คำนวณแล้วซึ่งเชื่อมต่อผลลัพธ์ของการค้นหานี้กับ UI
extension HomeScreen {
...
private var topMovies: [Movie] {
topMoviesRef.data?.movies.map(Movie.init) ?? []
}
}
ดูการใช้งานจริง
เรียกใช้แอปอีกครั้งเพื่อดูภาพยนตร์ 3 เรื่องล่าสุดในส่วนฮีโร่ และภาพยนตร์ 5 เรื่องที่ได้รับคะแนนสูงสุดในส่วนภาพยนตร์ยอดนิยม
7 แสดงรายละเอียดภาพยนตร์และนักแสดง
ตอนนี้ผู้ใช้เรียกดูภาพยนตร์ได้แล้ว เมื่อแตะการ์ดภาพยนตร์ การ์ดจะแสดงรายละเอียดบางอย่างเกี่ยวกับภาพยนตร์ แต่คุณอาจสังเกตเห็นว่ารายละเอียดนั้นขาดรายละเอียดไปบ้าง
เนื่องจากเราดึงข้อมูลรายละเอียดเกี่ยวกับภาพยนตร์แต่ละเรื่องเพียงเท่าที่จำเป็นในการแสดงผลส่วนภาพยนตร์เด่นและส่วนภาพยนตร์ยอดนิยม ได้แก่ ชื่อภาพยนตร์ คำอธิบายสั้นๆ และ URL รูปภาพ
ในหน้ารายละเอียดภาพยนตร์ เราต้องการแสดงข้อมูลเพิ่มเติมเกี่ยวกับภาพยนตร์ ในส่วนนี้ คุณจะปรับปรุงแอปเพื่อให้แสดงนักแสดงและรีวิวของภาพยนตร์ในหน้ารายละเอียดได้
โดยคุณจะต้องดำเนินการ 2 อย่างต่อไปนี้
- ปรับปรุงสคีมาเพื่อรองรับนักแสดงและรีวิวภาพยนตร์
- เขียนการค้นหา Firebase Data Connect เพื่อดึงข้อมูลรายละเอียดเกี่ยวกับภาพยนตร์ที่ระบุ
- การแสดงผลลัพธ์ในหน้าจอรายละเอียดภาพยนตร์
ปรับปรุงสคีมา
ใน VS Code ให้เปิด dataconnect/schema/schema.gql แล้วเพิ่มคำจำกัดความสคีมาสำหรับ Actor และ MovieActor
## 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"
}
เพิ่มข้อมูลจำลองสำหรับนักแสดง
เมื่อสคีมาได้รับการอัปเดตแล้ว คุณจะป้อนข้อมูลจำลองเพิ่มเติมลงในฐานข้อมูลเพื่อทดสอบได้
- ใน Finder ให้คัดลอก
finish/FriendlyFlix/dataconnect/moviededetails_insert.gqlไปยังโฟลเดอร์start/FriendlyFlix/dataconnect - เปิด
dataconnect/moviededetails_insert.gqlใน VS Code - ตรวจสอบว่าโปรแกรมจําลองในส่วนขยาย Firebase Data Connect ทํางานอยู่
- คุณควรเห็นปุ่มเรียกใช้ (ในเครื่อง) ที่ด้านบนของไฟล์ คลิกเพื่อแทรกข้อมูลภาพยนตร์จำลองลงในฐานข้อมูล
- ตรวจสอบเทอร์มินัลการดําเนินการของ Data Connect เพื่อยืนยันว่าเพิ่มข้อมูลสําเร็จ
เมื่อข้อมูลพร้อมแล้ว ให้ไปยังขั้นตอนถัดไปเพื่อกำหนดการค้นหาเพื่อดึงข้อมูลรายละเอียดภาพยนตร์
กำหนดการค้นหา GetMovieById
ใน VS Code ให้เปิดไฟล์ dataconnect/connector/queries.gql แล้วเพิ่มการค้นหา GetMovieById ดังนี้
## 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 กับ MovieDetailsView
ใน Xcode ให้เปิดไฟล์ MovieDetailsView.swift และอัปเดตพร็อพเพอร์ตี้ที่คำนวณแล้ว movieDetails ให้ตรงกับโค้ดต่อไปนี้
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
}
}
เรียกใช้แอป
ใน Xcode ให้คลิกปุ่มเรียกใช้เพื่อเปิดแอปในเครื่องจำลอง iOS
เมื่อแอปเปิดขึ้น ให้แตะการ์ดภาพยนตร์เพื่อแสดงรายละเอียดภาพยนตร์ ซึ่งควรมีลักษณะดังนี้
8 ใช้การตรวจสอบสิทธิ์ของผู้ใช้
ปัจจุบันแอปแสดงข้อมูลภาพยนตร์และนักแสดงที่ไม่ได้ปรับตามโปรไฟล์ของผู้ใช้ ในขั้นตอนต่อไปนี้ คุณจะใช้ฟีเจอร์ที่เชื่อมโยงข้อมูลกับผู้ใช้ที่ลงชื่อเข้าใช้ คุณจะเริ่มด้วยการอนุญาตให้ผู้ใช้เพิ่มภาพยนตร์ลงในรายการที่อยากดูส่วนตัว
คุณต้องสร้างตัวตนผู้ใช้ก่อนจึงจะใช้ฟีเจอร์รายการติดตามได้ หากต้องการเปิดใช้ฟีเจอร์นี้ คุณต้องผสานรวมการตรวจสอบสิทธิ์ Firebase ซึ่งจะช่วยให้ผู้ใช้ลงชื่อเข้าใช้แอปได้
คุณอาจเห็นปุ่มรูปโปรไฟล์ผู้ใช้ที่ด้านขวาบนของหน้าจอหลักแล้ว การแตะตัวเลือกนี้จะนําคุณไปยังหน้าจอที่ผู้ใช้ลงชื่อสมัครใช้หรือลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่านได้
เมื่อผู้ใช้ลงชื่อเข้าใช้สำเร็จแล้ว แอปของคุณจะต้องจัดเก็บรายละเอียดที่สำคัญของผู้ใช้ โดยเฉพาะอย่างยิ่งรหัสผู้ใช้ที่ไม่ซ้ำกันและชื่อผู้ใช้ที่เลือก
เปิดใช้การตรวจสอบสิทธิ์ Firebase
ในคอนโซล Firebase ของโปรเจ็กต์ ให้ไปที่ส่วนการตรวจสอบสิทธิ์ แล้วเปิดใช้การตรวจสอบสิทธิ์ Firebase จากนั้นเปิดใช้ผู้ให้บริการตรวจสอบสิทธิ์อีเมล/รหัสผ่าน
ในโฟลเดอร์โปรเจ็กต์ในเครื่อง ให้ค้นหา firebase.json แล้วอัปเดตตามวิธีการต่อไปนี้เพื่อเปิดใช้โปรแกรมจำลองการตรวจสอบสิทธิ์ Firebase
{
"emulators": {
"dataconnect": {
},
"auth": {
}
},
"dataconnect": {
"source": "dataconnect"
}
}
หลังจากนั้น คุณต้องหยุดและรีสตาร์ทโปรแกรมจำลอง Firebase เพื่อให้การเปลี่ยนแปลงมีผล
ใช้ตัวแฮนเดิลการตรวจสอบสิทธิ์
ในส่วนต่อไปนี้ คุณจะใช้ตรรกะที่เชื่อมต่อการตรวจสอบสิทธิ์ผู้ใช้กับฐานข้อมูล ซึ่งเกี่ยวข้องกับการสร้างตัวแฮนเดิลการตรวจสอบสิทธิ์ที่คอยฟังการเข้าสู่ระบบที่สำเร็จ
เมื่อตรวจสอบสิทธิ์ผู้ใช้แล้ว แฮนเดิลนี้จะทริกเกอร์การสร้างบัญชีที่เกี่ยวข้องในฐานข้อมูลโดยอัตโนมัติ
ใน Xcode ให้เปิดไฟล์ AuthenticationService.swift แล้วเพิ่มโค้ดต่อไปนี้
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
}
}
นี่เป็นตัวแฮนเดิลการตรวจสอบสิทธิ์ทั่วไปที่ให้คุณใช้ onSignUp เพื่อลงทะเบียนการปิดที่ระบบจะเรียกใช้เมื่อผู้ใช้ลงชื่อเข้าใช้
จากนั้นคุณก็สร้างบัญชีผู้ใช้ใหม่ในฐานข้อมูลได้ แต่ก่อนอื่นคุณต้องสร้างการดัดแปลงที่ให้คุณสร้างหรืออัปเดตผู้ใช้ใหม่ในฐานข้อมูลได้
เพิ่มเอนทิตีผู้ใช้ลงในสคีมา
ประเภท User จะกําหนดเอนทิตีผู้ใช้ ผู้ใช้สามารถโต้ตอบกับภาพยนตร์ได้โดยเขียนรีวิวหรือเพิ่มภาพยนตร์เป็นรายการโปรด
ใน VS Code ให้เปิดไฟล์ dataconnect/schema/schema.gql แล้วเพิ่มคําจํากัดความตาราง User ต่อไปนี้
## 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)")
}
กำหนดการกลายพันธุ์สำหรับการแทรกหรืออัปเดตผู้ใช้
ใน VS Code ให้เปิดไฟล์ dataconnect/connector/mutations.gql แล้วเพิ่มการกลายพันธุ์ UpsertUser ดังนี้
mutation UpsertUser($username: String!) @auth(level: USER) {
user_upsert(
data: {
id_expr: "auth.uid"
username: $username
}
)
}
สร้างผู้ใช้ใหม่หลังจากเข้าสู่ระบบสำเร็จ
ใน Xcode ให้เปิด FriendlyFlixApp.swift แล้วเพิ่มโค้ดต่อไปนี้ลงในตัวเริ่มต้น
@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 {
...
}
}
โค้ดนี้ใช้ upsertUserMutation Firebase Data Connect ที่สร้างขึ้นสําหรับคุณเพื่อแทรกผู้ใช้ใหม่ (หรืออัปเดตผู้ใช้ที่มีอยู่ด้วยรหัสเดียวกัน) เมื่อใดก็ตามที่ผู้ใช้ลงชื่อสมัครใช้โดยใช้ Firebase Authentication เรียบร้อยแล้ว
ดูการใช้งานจริง
หากต้องการยืนยันว่าวิธีนี้ใช้งานได้ ให้ลงชื่อสมัครใช้ในแอป iOS ก่อน โดยทำดังนี้
- หากยังไม่ได้ดำเนินการ ให้หยุดและรีสตาร์ทโปรแกรมจำลอง Firebase เพื่อให้แน่ใจว่าโปรแกรมจำลองการตรวจสอบสิทธิ์ Firebase ทำงานอยู่
- ใน Xcode ให้คลิกปุ่มเรียกใช้เพื่อเปิดแอปในเครื่องจำลอง iOS
- คลิกไอคอนรูปโปรไฟล์ที่มุมขวาบนของหน้าจอ
- เปลี่ยนไปใช้ขั้นตอนการลงชื่อสมัครใช้และลงชื่อสมัครใช้แอป
จากนั้นค้นหาฐานข้อมูลเพื่อยืนยันว่าแอปสร้างบัญชีผู้ใช้ใหม่ให้กับผู้ใช้แล้ว
- ใน VS Code ให้เปิด
dataconnect/schema/schema.gqlแล้วคลิกอ่านข้อมูลบนเอนทิตีUser - ซึ่งจะสร้างไฟล์การค้นหาใหม่ชื่อ
User_read.gql - คลิกเรียกใช้แบบภายในเพื่อดูผู้ใช้ทั้งหมดในตารางผู้ใช้
- ในแผงการดำเนินการของ Data Connect คุณควรเห็นบัญชีของผู้ใช้ที่เพิ่งลงชื่อสมัครใช้ด้วย
9 จัดการภาพยนตร์เรื่องโปรด
ในส่วนนี้ของโค้ดแล็บ คุณจะใช้การโต้ตอบของผู้ใช้ในแอปรีวิวภาพยนตร์ โดยเฉพาะอย่างยิ่งการอนุญาตให้ผู้ใช้จัดการภาพยนตร์ที่ชอบ ภาพยนตร์ที่ทำเครื่องหมายว่าเป็นรายการโปรดจะปรากฏในส่วนรายการที่อยากดูของแอป
ปรับปรุงสคีมาเพื่อรองรับรายการโปรด
ประเภท FavoriteMovie คือตารางการรวมที่จัดการความสัมพันธ์หลายต่อหลายรายการระหว่างผู้ใช้กับภาพยนตร์ที่ชอบ แต่ละตารางจะลิงก์ User กับ Movie
คัดลอกและวางข้อมูลโค้ดต่อไปนี้ลงในไฟล์ dataconnect/schema/schema.gql
type FavoriteMovie
@table(name: "FavoriteMovies", singular: "favorite_movie", plural: "favorite_movies", key: ["user", "movie"]) {
## @ref is implicit
user: User!
movie: Movie!
}
กำหนดการกลายพันธุ์สำหรับการเพิ่มและนำรายการโปรดออก
ผู้ใช้ต้องระบุว่าภาพยนตร์ใดเป็นภาพยนตร์โปรดก่อนแอปจะแสดงภาพยนตร์โปรดของผู้ใช้ โดยก่อนอื่นคุณต้องเพิ่มการกลายพันธุ์ 2 รายการเพื่อทําเครื่องหมายภาพยนตร์ว่าเป็นหนึ่งในรายการโปรดของผู้ใช้ หรือนําภาพยนตร์ออกจากรายการโปรดอีกครั้งตามลําดับ
- ใน VS Code ให้เปิด
mutations.gqlในdataconnect/connector/mutations.gql - เพิ่มการกลายพันธุ์ต่อไปนี้เพื่อจัดการกับการทำให้ภาพยนตร์เป็นรายการโปรด
## 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 })
}
เชื่อมต่อการกลายพันธุ์กับ UI ของแอป
ผู้ใช้สามารถทําเครื่องหมายภาพยนตร์เป็นรายการโปรดได้โดยคลิกไอคอนหัวใจในหน้าจอรายละเอียดของภาพยนตร์
หากต้องการเชื่อมต่อการกลายพันธุ์ที่คุณเพิ่งสร้างขึ้นกับ UI ของแอป ให้ทําการเปลี่ยนแปลงต่อไปนี้ใน MovieCardView
- นําเข้า
FriendlyFlixSDKและตั้งค่าตัวเชื่อมต่อ
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ระบบจะเรียกใช้ฟีเจอร์นี้ทุกครั้งที่ผู้ใช้แตะไอคอนหัวใจในMovieCardView
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)
}
}
}
}
ซึ่งจะเป็นการอัปเดตสถานะรายการโปรดของภาพยนตร์ปัจจุบันในฐานข้อมูล ขั้นตอนสุดท้ายที่ขาดหายไปคือการตรวจสอบว่าสถานะ UI แสดงผลอย่างถูกต้อง
กําหนดคําค้นหาเพื่อดูว่าภาพยนตร์ได้รับการทําเครื่องหมายเป็นรายการโปรดหรือไม่
- ใน VS Code ให้เปิด
queries.gqlในdataconnect/connector - เพิ่มการค้นหาต่อไปนี้เพื่อตรวจสอบว่าภาพยนตร์ได้รับการทำเครื่องหมายว่าชื่นชอบหรือไม่
query GetIfFavoritedMovie($movieId: UUID!) @auth(level: USER) {
favorite_movie(key: { userId_expr: "auth.uid", movieId: $movieId }) {
movieId
}
}
- ใน Xcode ให้สร้างอินสแตนซ์การอ้างอิงคำค้นหา
GetIfFavoritedMovieและใช้พร็อพเพอร์ตี้ที่คำนวณแล้วซึ่งจะกำหนดว่าภาพยนตร์ที่แสดงในMovieCardViewนี้ได้รับการทําเครื่องหมายว่าชื่นชอบสําหรับผู้ใช้ปัจจุบันหรือไม่
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
}
...
}
- อัปเดตโค้ดใน
toggleFavouriteเพื่อเรียกใช้การค้นหาทุกครั้งที่ผู้ใช้แตะปุ่ม วิธีนี้ช่วยให้มั่นใจว่าพร็อพเพอร์ตี้ที่คำนวณแล้วisFavouriteจะแสดงผลลัพธ์ที่ถูกต้องเสมอ
private func toggleFavourite() {
Task {
if isFavourite {
...
}
let _ = try await isFavouriteRef.execute()
}
}
ดึงข้อมูลภาพยนตร์เรื่องโปรด
ขั้นตอนสุดท้ายของฟีเจอร์นี้คือการใช้การดึงข้อมูลภาพยนตร์ที่ผู้ใช้ชื่นชอบเพื่อให้ผู้ใช้เห็นภาพยนตร์เหล่านั้นในรายการที่อยากดู
- ใน VS Code ให้เปิด
queries.gqlในdataconnect/connector/queries.gqlแล้ววางคําค้นหาต่อไปนี้
## 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
}
}
}
}
รายการภาพยนตร์โปรดของผู้ใช้จะแสดงใน LibraryScreen หน้าจอนี้ควรแสดงข้อมูลเฉพาะในกรณีที่ผู้ใช้ลงชื่อเข้าใช้ ดังนั้นคุณจะต้องเชื่อมต่อสถานะการตรวจสอบสิทธิ์ของหน้าจอกับ AuthenticationService ของแอปก่อน
- เพิ่มโค้ดเพื่อแมปจาก
FavoriteMovieFavoriteMoviesไปMovieไปMovie+DataConnect.swift
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 ให้เปิด
LibraryScreenแล้วอัปเดตisSignedInดังนี้
struct LibraryScreen: View {
...
private var isSignedIn: Bool {
authenticationService.user != nil
}
}
- จากนั้นนําเข้า Firebase Data Connect และ FriendlyFlixSDK และรับข้อมูลอ้างอิงสำหรับคําค้นหา
GetUserFavoriteMoviesดังนี้
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) ?? []
}
...
}
- ตรวจสอบว่าระบบเรียกใช้การค้นหา
watchListRefเมื่อมุมมองปรากฏขึ้น
extension LibraryScreen: View {
var body: some View {
...
MovieListSection(namespace: namespace, title: "Watch List", movies: watchList)
.onAppear {
Task {
try await watchListRef.execute()
}
...
ดูการใช้งานจริง
ตอนนี้คุณเรียกใช้แอปและลองใช้ฟีเจอร์รายการโปรดที่เพิ่งติดตั้งใช้งานได้แล้ว สิ่งที่ควรคำนึงถึงมีดังนี้
- ตรวจสอบว่าโปรแกรมจำลอง Firebase ทำงานอยู่
- ตรวจสอบว่าคุณได้เพิ่มข้อมูลจำลองสำหรับภาพยนตร์และรายละเอียดภาพยนตร์แล้ว
- ตรวจสอบว่าคุณได้ลงชื่อสมัครใช้ในฐานะผู้ใช้แล้ว
- ใน Xcode ให้คลิกปุ่มเรียกใช้เพื่อเปิดแอปในเครื่องจำลอง iOS
- เมื่อแอปเปิดขึ้น ให้แตะการ์ดภาพยนตร์เพื่อแสดงรายละเอียดภาพยนตร์
- แตะไอคอนหัวใจเพื่อทําเครื่องหมายภาพยนตร์เป็นรายการโปรด หัวใจควรเปลี่ยนเป็นสีแดง
- ทำซ้ำกับภาพยนตร์ 2-3 เรื่อง
- ไปที่แท็บคลัง จากนั้นคุณจะเห็นรายการภาพยนตร์ทั้งหมดที่ทำเครื่องหมายเป็นรายการโปรด
10 ขอแสดงความยินดี
ขอแสดงความยินดี คุณได้เพิ่ม Firebase Data Connect ลงในแอป iOS เรียบร้อยแล้ว ตอนนี้คุณทราบขั้นตอนสําคัญที่จําเป็นสําหรับการตั้งค่าการต่อเชื่อมข้อมูล สร้างการค้นหาและการดัดแปลง และจัดการการตรวจสอบสิทธิ์ผู้ใช้แล้ว
ไม่บังคับ: ติดตั้งใช้งานในเวอร์ชันที่ใช้งานจริง
จนถึงตอนนี้แอปนี้ใช้เพียงโปรแกรมจำลอง Firebase หากต้องการดูวิธีทําให้แอปนี้ใช้งานได้ในโปรเจ็กต์ Firebase จริง ให้ไปที่ขั้นตอนถัดไป
11 (ไม่บังคับ) เผยแพร่แอป
จนถึงตอนนี้แอปนี้ทำงานแบบภายในทั้งหมด โดยข้อมูลทั้งหมดอยู่ในชุดโปรแกรมจำลอง Firebase ในส่วนนี้ คุณจะได้เรียนรู้วิธีกำหนดค่าโปรเจ็กต์ Firebase เพื่อให้แอปนี้ทํางานในเวอร์ชันที่ใช้งานจริง
เปิดใช้การตรวจสอบสิทธิ์ Firebase
- ในคอนโซล Firebase ให้ไปที่ส่วนการตรวจสอบสิทธิ์ แล้วคลิกเริ่มต้นใช้งาน
- ไปที่แท็บวิธีการลงชื่อเข้าใช้
- เลือกตัวเลือกอีเมล/รหัสผ่านจากส่วนผู้ให้บริการเดิม
- เปิดใช้ผู้ให้บริการอีเมล/รหัสผ่าน แล้วคลิกบันทึก
เปิดใช้ Firebase Data Connect
สำคัญ: หากนี่เป็นการใช้งานสคีมาครั้งแรกในโปรเจ็กต์ กระบวนการนี้จะสร้างอินสแตนซ์ Cloud SQL PostgreSQL ซึ่งอาจใช้เวลาประมาณ 15 นาที คุณจะไม่สามารถทําให้การเผยแพร่ใช้งานได้จนกว่าอินสแตนซ์ Cloud SQL จะพร้อมใช้งานและผสานรวมกับ Firebase Data Connect แล้ว
1. ใน UI ของส่วนขยาย Firebase Data Connect ใน VS Code ให้คลิกทำให้ใช้งานได้จริง 2. คุณอาจต้องตรวจสอบการเปลี่ยนแปลงสคีมาและอนุมัติการแก้ไขที่อาจก่อให้เกิดความเสียหาย ระบบจะแจ้งให้คุณตรวจสอบการเปลี่ยนแปลงสคีมาโดยใช้ firebase dataconnect:sql:diff เมื่อพอใจกับการเปลี่ยนแปลงแล้ว ให้ใช้การเปลี่ยนแปลงโดยใช้ขั้นตอนที่เริ่มต้นด้วย firebase dataconnect:sql:migrate
อินสแตนซ์ Cloud SQL for PostgreSQL จะอัปเดตด้วยสคีมาและข้อมูลที่ติดตั้งใช้งานแล้วในขั้นสุดท้าย คุณสามารถตรวจสอบสถานะได้ในคอนโซล Firebase
ตอนนี้คุณสามารถคลิก "เรียกใช้ (เวอร์ชันที่ใช้งานจริง)" ในแผง Firebase Data Connect ได้ เช่นเดียวกับที่ทำกับโปรแกรมจำลองในเครื่อง เพื่อเพิ่มข้อมูลลงในสภาพแวดล้อมเวอร์ชันที่ใช้งานจริง
ก่อนเรียกใช้แอป iOS อีกครั้ง ให้ตรวจสอบว่าแอปเชื่อมต่อกับอินสแตนซ์เวอร์ชันที่ใช้งานจริงของโปรเจ็กต์แล้ว โดยทำดังนี้
- เปิดเมนูผลิตภัณฑ์ > รูปแบบ > แก้ไขรูปแบบ...
- ในส่วนเรียกใช้ ให้ยกเลิกการเลือกอาร์กิวเมนต์การเริ่ม
-useEmulator YES