ফায়ারবেস ডেটা কানেক্ট দিয়ে তৈরি করুন (ওয়েব), ফায়ারবেস ডেটা কানেক্ট দিয়ে তৈরি করুন (ওয়েব), ফায়ারবেস ডেটা কানেক্ট দিয়ে তৈরি করুন (ওয়েব)

১. শুরু করার আগে

FriendlyMovies অ্যাপ

এই কোডল্যাবে, আপনি একটি মুভি রিভিউ ওয়েব অ্যাপ তৈরি করতে Firebase Data Connect কে একটি ক্লাউড SQL ডাটাবেসের সাথে একীভূত করবেন। সম্পূর্ণ অ্যাপটি দেখায় যে Firebase Data Connect কীভাবে SQL-চালিত অ্যাপ্লিকেশন তৈরির প্রক্রিয়াটিকে সহজ করে তোলে। এতে এই বৈশিষ্ট্যগুলি অন্তর্ভুক্ত রয়েছে:

  • প্রমাণীকরণ: আপনার অ্যাপের প্রশ্ন এবং মিউটেশনের জন্য কাস্টম প্রমাণীকরণ বাস্তবায়ন করুন, যাতে শুধুমাত্র অনুমোদিত ব্যবহারকারীরা আপনার ডেটার সাথে ইন্টারঅ্যাক্ট করতে পারেন।
  • GraphQL স্কিমা: একটি মুভি রিভিউ ওয়েব অ্যাপের চাহিদা অনুসারে তৈরি একটি নমনীয় GraphQL স্কিমা ব্যবহার করে আপনার ডেটা স্ট্রাকচার তৈরি এবং পরিচালনা করুন।
  • SQL কোয়েরি এবং মিউটেশন: GraphQL দ্বারা চালিত কোয়েরি এবং মিউটেশন ব্যবহার করে ক্লাউড SQL-এ ডেটা পুনরুদ্ধার, আপডেট এবং পরিচালনা করুন।
  • আংশিক স্ট্রিং মিল সহ উন্নত অনুসন্ধান: শিরোনাম, বিবরণ, বা ট্যাগের মতো ক্ষেত্রের উপর ভিত্তি করে চলচ্চিত্রগুলি খুঁজে পেতে ফিল্টার এবং অনুসন্ধান বিকল্পগুলি ব্যবহার করুন।
  • (ঐচ্ছিক) ভেক্টর অনুসন্ধান ইন্টিগ্রেশন: ইনপুট এবং পছন্দের উপর ভিত্তি করে একটি সমৃদ্ধ ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য Firebase Data Connect এর ভেক্টর অনুসন্ধান ব্যবহার করে কন্টেন্ট অনুসন্ধান কার্যকারিতা যোগ করুন।

পূর্বশর্ত

আপনার জাভাস্ক্রিপ্ট সম্পর্কে প্রাথমিক ধারণা থাকা প্রয়োজন।

তুমি কি শিখবে

  • স্থানীয় এমুলেটরগুলির সাথে Firebase Data Connect সেট আপ করুন।
  • Data Connect এবং GraphQL ব্যবহার করে একটি ডেটা স্কিমা ডিজাইন করুন।
  • একটি মুভি রিভিউ অ্যাপের জন্য বিভিন্ন প্রশ্ন এবং মিউটেশন লিখুন এবং পরীক্ষা করুন।
  • অ্যাপটিতে Firebase Data Connect কীভাবে SDK তৈরি করে এবং ব্যবহার করে তা জানুন।
  • আপনার স্কিমা স্থাপন করুন এবং ডাটাবেসটি দক্ষতার সাথে পরিচালনা করুন।

তোমার যা লাগবে

  • গিট
  • ভিজ্যুয়াল স্টুডিও কোড
  • nvm-windows (Windows) অথবা nvm (macOS/Linux) ব্যবহার করে Node.js ইনস্টল করুন।
  • যদি আপনি ইতিমধ্যেই না করে থাকেন, তাহলে Firebase কনসোলে একটি Firebase প্রকল্প তৈরি করুন।
  • (ঐচ্ছিক) ভেক্টর অনুসন্ধানের জন্য, আপনার প্রকল্পটি পে-অ্যাজ-ইউ-গো ব্লেজ প্রাইসিং প্ল্যানে আপগ্রেড করুন।

2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন

কোডল্যাবের এই ধাপটি আপনাকে Firebase Data Connect ব্যবহার করে আপনার মুভি রিভিউ অ্যাপ তৈরি শুরু করার জন্য পরিবেশ সেট আপ করার ক্ষেত্রে নির্দেশনা দেবে।

  1. প্রকল্প সংগ্রহস্থলটি ক্লোন করুন এবং প্রয়োজনীয় নির্ভরতা ইনস্টল করুন: 
    git clone https://github.com/firebaseextended/codelab-dataconnect-web
cd codelab-dataconnect-web
cd ./app && npm i
npm run dev
  2. এই কমান্ডগুলি চালানোর পরে, আপনার ব্রাউজারে http://localhost:5173 খুলুন যাতে আপনি স্থানীয়ভাবে ওয়েব অ্যাপটি চালু দেখতে পারেন। এটি মুভি রিভিউ অ্যাপ তৈরি এবং এর বৈশিষ্ট্যগুলির সাথে ইন্টারঅ্যাক্ট করার জন্য আপনার ফ্রন্ট এন্ড হিসেবে কাজ করে। 93f6648a2532c606.png সম্পর্কে
  3. ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে ক্লোন করা codelab-dataconnect-web ফোল্ডারটি খুলুন । এখানে আপনি আপনার স্কিমা সংজ্ঞায়িত করবেন, কোয়েরি লিখবেন এবং অ্যাপটির কার্যকারিতা পরীক্ষা করবেন।
  4. ডেটা কানেক্ট বৈশিষ্ট্যগুলি ব্যবহার করতে, ফায়ারবেস ডেটা কানেক্ট ভিজ্যুয়াল স্টুডিও এক্সটেনশন ইনস্টল করুন।
    বিকল্পভাবে, আপনি ভিজ্যুয়াল স্টুডিও কোড মার্কেটপ্লেস থেকে এক্সটেনশনটি ইনস্টল করতে পারেন অথবা ভিএস কোডের মধ্যে এটি অনুসন্ধান করতে পারেন। b03ee38c9a81b648.png সম্পর্কে
  5. Firebase কনসোলে একটি নতুন Firebase প্রকল্প খুলুন বা তৈরি করুন।
  6. আপনার Firebase প্রকল্পটি Firebase Data Connect VSCode এক্সটেনশনের সাথে সংযুক্ত করুন। এক্সটেনশনে, নিম্নলিখিতগুলি করুন:
    1. সাইন ইন বোতামে ক্লিক করুন।
    2. Connect a Firebase Project-এ ক্লিক করুন এবং আপনার Firebase Project নির্বাচন করুন।
    অনুসরণ
  7. Firebase Data Connect VS Code এক্সটেনশন ব্যবহার করে Firebase এমুলেটরগুলি শুরু করুন:
    Start Emulators এ ক্লিক করুন, এবং তারপর নিশ্চিত করুন যে এমুলেটরগুলি টার্মিনালে চলছে। 6d3d95f4cb708db1.png সম্পর্কে

৩. স্টার্টার কোডবেস পর্যালোচনা করুন

এই বিভাগে, আপনি অ্যাপটির স্টার্টার কোডবেসের মূল ক্ষেত্রগুলি অন্বেষণ করবেন। যদিও অ্যাপটিতে কিছু কার্যকারিতা অনুপস্থিত, তবুও সামগ্রিক কাঠামোটি বোঝা সহায়ক।

ফোল্ডার এবং ফাইলের গঠন

নিম্নলিখিত উপ-বিভাগগুলি অ্যাপের ফোল্ডার এবং ফাইল কাঠামোর একটি সারসংক্ষেপ প্রদান করে।

dataconnect/ ডিরেক্টরি

Firebase Data Connect কনফিগারেশন, সংযোগকারী (যা কোয়েরি এবং মিউটেশন সংজ্ঞায়িত করে) এবং স্কিমা ফাইল ধারণ করে।

  • schema/schema.gql : GraphQL স্কিমা সংজ্ঞায়িত করে
  • connector/queries.gql : আপনার অ্যাপে প্রয়োজনীয় প্রশ্নাবলী
  • connector/mutations.gql : আপনার অ্যাপে প্রয়োজনীয় মিউটেশন
  • connector/connector.yaml : SDK তৈরির জন্য কনফিগারেশন ফাইল

app/src/ ডিরেক্টরি

অ্যাপ্লিকেশন লজিক এবং ফায়ারবেস ডেটা কানেক্টের সাথে মিথস্ক্রিয়া ধারণ করে।

  • firebase.ts : আপনার Firebase প্রকল্পে একটি Firebase অ্যাপের সাথে সংযোগ করার জন্য কনফিগারেশন।
  • lib/dataconnect-sdk/ : জেনারেটেড SDK ধারণ করে। আপনি connector/connector.yaml ফাইলে SDK জেনারেশনের অবস্থান সম্পাদনা করতে পারেন এবং আপনি যখনই কোনও কোয়েরি বা মিউটেশন সংজ্ঞায়িত করবেন তখনই SDK গুলি স্বয়ংক্রিয়ভাবে তৈরি হবে।

৪. সিনেমা পর্যালোচনার জন্য একটি স্কিমা নির্ধারণ করুন

এই বিভাগে, আপনি একটি স্কিমায় মুভি অ্যাপ্লিকেশনের মূল সত্তাগুলির মধ্যে কাঠামো এবং সম্পর্ক সংজ্ঞায়িত করবেন। Movie , User , Actor এবং Review মতো সত্তাগুলিকে ডাটাবেস টেবিলে ম্যাপ করা হয়, যেখানে ফায়ারবেস ডেটা কানেক্ট এবং গ্রাফকিউএল স্কিমা নির্দেশিকা ব্যবহার করে সম্পর্ক স্থাপন করা হয়। একবার এটি কার্যকর হয়ে গেলে, আপনার অ্যাপটি শীর্ষ-রেটেড সিনেমা অনুসন্ধান এবং ধরণ অনুসারে ফিল্টার করা থেকে শুরু করে ব্যবহারকারীদের পর্যালোচনা ছেড়ে দেওয়া, পছন্দসই চিহ্নিত করা, অনুরূপ সিনেমা অন্বেষণ করা বা ভেক্টর অনুসন্ধানের মাধ্যমে টেক্সট ইনপুটের উপর ভিত্তি করে প্রস্তাবিত সিনেমা খুঁজে পাওয়া পর্যন্ত সবকিছু পরিচালনা করতে প্রস্তুত থাকবে।

মূল সত্তা এবং সম্পর্ক

Movie টাইপে শিরোনাম, ধরণ এবং ট্যাগের মতো গুরুত্বপূর্ণ বিবরণ থাকে, যা অ্যাপটি অনুসন্ধান এবং মুভি প্রোফাইলের জন্য ব্যবহার করে। User টাইপ ব্যবহারকারীর মিথস্ক্রিয়া ট্র্যাক করে, যেমন পর্যালোচনা এবং পছন্দ। Reviews ব্যবহারকারীদের সিনেমার সাথে সংযুক্ত করে, অ্যাপটিকে ব্যবহারকারী-উত্পাদিত রেটিং এবং প্রতিক্রিয়া দেখাতে দেয়।

সিনেমা, অভিনেতা এবং ব্যবহারকারীদের মধ্যে সম্পর্ক অ্যাপটিকে আরও গতিশীল করে তোলে। MovieActor জয়েন টেবিলটি কাস্টের বিবরণ এবং অভিনেতাদের ফিল্মোগ্রাফি প্রদর্শন করতে সাহায্য করে। FavoriteMovie টাইপ ব্যবহারকারীদের পছন্দের সিনেমাগুলি দেখতে দেয়, তাই অ্যাপটি একটি ব্যক্তিগতকৃত পছন্দের তালিকা দেখাতে পারে এবং জনপ্রিয় পছন্দগুলি হাইলাইট করতে পারে।

Movie টেবিল সেট আপ করুন

Movie টাইপ একটি মুভি সত্তার মূল কাঠামো নির্ধারণ করে, যার মধ্যে রয়েছে title , genre , releaseYear এবং rating এর মতো ক্ষেত্র।

কোড স্নিপেটটি কপি করে আপনার 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]
}

মূল বিষয়গুলি:

  • id: প্রতিটি সিনেমার জন্য একটি অনন্য UUID, @default(expr: "uuidV4()") ব্যবহার করে তৈরি করা হয়।

MovieMetadata টেবিল সেট আপ করুন

MovieMetadata টাইপ Movie টাইপের সাথে এক-এক সম্পর্ক স্থাপন করে। এতে সিনেমার পরিচালকের মতো অতিরিক্ত ডেটা অন্তর্ভুক্ত থাকে।

কোড স্নিপেটটি কপি করে আপনার dataconnect/schema/schema.gql ফাইলে পেস্ট করুন:

type MovieMetadata
  @table {
  # @ref creates a field in the current table (MovieMetadata)
  # It is a reference that holds the primary key of the referenced type
  # In this case, @ref(fields: "movieId", references: "id") is implied
  movie: Movie! @ref
  # movieId: UUID <- this is created by the above @ref
  director: String
}

মূল বিষয়গুলি:

  • সিনেমা! @ref: Movie ধরণ উল্লেখ করে, একটি বিদেশী কী সম্পর্ক স্থাপন করে।

Actor টেবিল সেট আপ করুন

কোড স্নিপেটটি কপি করে আপনার dataconnect/schema/schema.gql ফাইলে পেস্ট করুন:

type Actor @table {
  id: UUID!
  imageUrl: String!
  name: String! @col(name: "name", dataType: "varchar(30)")
}

Actor ধরণটি মুভি ডাটাবেসে একজন অভিনেতাকে প্রতিনিধিত্ব করে, যেখানে প্রতিটি অভিনেতা একাধিক সিনেমার অংশ হতে পারে, যা বহু-থেকে-অনেকের সম্পর্ক তৈরি করে।

MovieActor টেবিল সেট আপ করুন

কোড স্নিপেটটি কপি করে আপনার dataconnect/schema/schema.gql ফাইলে পেস্ট করুন:

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"
}

মূল বিষয়গুলি:

  • মুভি: মুভি টাইপ উল্লেখ করে, পরোক্ষভাবে একটি বিদেশী কী মুভিআইডি তৈরি করে: UUID!।
  • actor: Actor টাইপ উল্লেখ করে, পরোক্ষভাবে একটি বিদেশী কী actorId: UUID! তৈরি করে।
  • ভূমিকা: সিনেমায় অভিনেতার ভূমিকা সংজ্ঞায়িত করে (যেমন, "প্রধান" বা "সহায়ক")।

User টেবিল সেট আপ করুন

User ধরণ এমন একটি ব্যবহারকারী সত্তাকে সংজ্ঞায়িত করে যারা পর্যালোচনা রেখে বা সিনেমা পছন্দ করে সিনেমার সাথে ইন্টারঅ্যাক্ট করে।

কোড স্নিপেটটি কপি করে আপনার dataconnect/schema/schema.gql ফাইলে পেস্ট করুন:

type User
  @table {
  id: String! @col
  username: String! @col(dataType: "varchar(50)")
  # The following are generated from the @ref in the Review table
  # reviews_on_user
  # movies_via_Review
}

FavoriteMovie টেবিল সেট আপ করুন

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!
}

মূল বিষয়গুলি:

  • মুভি: মুভি টাইপ উল্লেখ করে, পরোক্ষভাবে একটি বিদেশী কী movieId: UUID! ।
  • user: ব্যবহারকারীর ধরণ উল্লেখ করে, পরোক্ষভাবে একটি বিদেশী কী userId: UUID! তৈরি করে।

Review টেবিল সেট আপ করুন

Review টাইপটি রিভিউ এন্টিটিকে প্রতিনিধিত্ব করে এবং User এবং Movie ধরণগুলিকে বহু-থেকে-অনেক সম্পর্কে সংযুক্ত করে (একজন ব্যবহারকারী অনেকগুলি পর্যালোচনা লিখতে পারেন এবং প্রতিটি সিনেমার অনেকগুলি পর্যালোচনা থাকতে পারে)।

কোড স্নিপেটটি কপি করে আপনার dataconnect/schema/schema.gql ফাইলে পেস্ট করুন:

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")
}

মূল বিষয়গুলি:

  • ব্যবহারকারী: পর্যালোচনাটি ছেড়ে যাওয়া ব্যবহারকারীর উল্লেখ।
  • সিনেমা: পর্যালোচনা করা সিনেমার উল্লেখ।
  • reviewDate: @default(expr: "request.time") ব্যবহার করে পর্যালোচনা তৈরির সময় স্বয়ংক্রিয়ভাবে সেট করা হয়।

স্বয়ংক্রিয়ভাবে তৈরি ক্ষেত্র এবং ডিফল্ট

স্কিমাটি @default(expr: "uuidV4()") এর মতো এক্সপ্রেশন ব্যবহার করে স্বয়ংক্রিয়ভাবে অনন্য আইডি এবং টাইমস্ট্যাম্প তৈরি করে। উদাহরণস্বরূপ, যখন একটি নতুন রেকর্ড তৈরি করা হয় তখন Movie এবং Review ধরণের id ক্ষেত্রটি স্বয়ংক্রিয়ভাবে একটি UUID দিয়ে পূর্ণ হয়।

এখন যেহেতু স্কিমাটি সংজ্ঞায়িত করা হয়েছে, আপনার মুভি অ্যাপটির ডেটা স্ট্রাকচার এবং সম্পর্কের জন্য একটি শক্ত ভিত্তি রয়েছে!

৫. সেরা এবং সর্বশেষ সিনেমাগুলি পুনরুদ্ধার করুন

FriendlyMovies অ্যাপ

এই বিভাগে, আপনি স্থানীয় এমুলেটরগুলিতে মক মুভি ডেটা সন্নিবেশ করবেন, তারপর ওয়েব অ্যাপ্লিকেশনে এই সংযোগকারীগুলিকে কল করার জন্য সংযোগকারী (কোয়েরি) এবং টাইপস্ক্রিপ্ট কোড প্রয়োগ করবেন। শেষ পর্যন্ত, আপনার অ্যাপটি ডাটাবেস থেকে সরাসরি শীর্ষ-রেটেড এবং সর্বশেষ চলচ্চিত্রগুলি আনতে এবং প্রদর্শন করতে সক্ষম হবে।

মক মুভি, অভিনেতা এবং পর্যালোচনার ডেটা সন্নিবেশ করান

  1. VSCode-এ, dataconnect/moviedata_insert.gql খুলুন । নিশ্চিত করুন যে Firebase Data Connect এক্সটেনশনের এমুলেটরগুলি চলছে।
  2. ফাইলের উপরে আপনি একটি Run (local) বোতাম দেখতে পাবেন। আপনার ডাটাবেসে মক মুভি ডেটা সন্নিবেশ করতে এটিতে ক্লিক করুন।
    e424f75e63bf2e10.png সম্পর্কে
  3. ডেটা সফলভাবে যোগ করা হয়েছে কিনা তা নিশ্চিত করতে ডেটা কানেক্ট এক্সিকিউশন টার্মিনালটি পরীক্ষা করুন।
    e0943d7704fb84ea.png

সংযোগকারীটি প্রয়োগ করুন

  1. dataconnect/movie-connector/queries.gql খুলুন। মন্তব্যগুলিতে আপনি একটি মৌলিক ListMovies কোয়েরি পাবেন:
    query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    releaseYear
    genre
    rating
    tags
    description
  }
}
    এই কোয়েরিটি সমস্ত সিনেমা এবং তাদের বিবরণ (যেমন, id , title , releaseYear ) সংগ্রহ করে। তবে, এটি সিনেমাগুলিকে বাছাই করে না ।
  2. সাজানো এবং সীমা বিকল্প যোগ করতে বিদ্যমান ListMovies কোয়েরিটি নিম্নলিখিত কোয়েরি দিয়ে প্রতিস্থাপন করুন : 
    # List subset of fields for movies
query ListMovies($orderByRating: OrderDirection, $orderByReleaseYear: OrderDirection, $limit: Int) @auth(level: PUBLIC) {
  movies(
    orderBy: [
      { rating: $orderByRating },
      { releaseYear: $orderByReleaseYear }
    ]
    limit: $limit
  ) {
    id
    title
    imageUrl
    releaseYear
    genre
    rating
    tags
    description
  }
}
  3. আপনার স্থানীয় ডাটাবেসের বিরুদ্ধে কোয়েরিটি কার্যকর করতে রান (স্থানীয়) বোতামে ক্লিক করুন। রান করার আগে আপনি কনফিগারেশন প্যানে কোয়েরি ভেরিয়েবলগুলি ইনপুট করতে পারেন।
    c4d947115bb11b16.png সম্পর্কে

মূল বিষয়গুলি:

  • movies() : ডাটাবেস থেকে মুভি ডেটা আনার জন্য GraphQL কোয়েরি ক্ষেত্র।
  • orderByRating : রেটিং অনুসারে (আরোহী/অবরোহী) সিনেমা সাজানোর প্যারামিটার।
  • orderByReleaseYear : মুক্তির বছর (ঊর্ধ্বমুখী/অবরোহী) অনুসারে সিনেমা সাজানোর প্যারামিটার।
  • limit : ফেরত দেওয়া সিনেমার সংখ্যা সীমিত করে।

ওয়েব অ্যাপে কোয়েরিগুলি একীভূত করুন

কোডল্যাবের এই অংশে, আপনি আপনার ওয়েব অ্যাপের পূর্ববর্তী বিভাগে সংজ্ঞায়িত কোয়েরিগুলি ব্যবহার করবেন। Firebase Data Connect এমুলেটরগুলি .gql ফাইলের (বিশেষ করে, schema.gql , queries.gql , mutations.gql ) তথ্যের উপর ভিত্তি করে SDK তৈরি করে এবং connector.yaml ফাইল। এই SDK গুলি সরাসরি আপনার অ্যাপ্লিকেশনে কল করা যেতে পারে।

  1. MovieService ( app/src/lib/MovieService.tsx ) তে, উপরের ইম্পোর্ট স্টেটমেন্টটি আনকমেন্ট করুন :
    import { listMovies, ListMoviesData, OrderDirection } from "@movie/dataconnect";
    ফাংশন listMovies , রেসপন্স টাইপ ListMoviesData , এবং enum OrderDirection হল Firebase Data Connect এমুলেটর দ্বারা তৈরি SDK যা আপনার পূর্বে সংজ্ঞায়িত স্কিমা এবং কোয়েরির উপর ভিত্তি করে তৈরি করা হয়েছে।
  2. handleGetTopMovies এবং handleGetLatestMovies ফাংশনগুলি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন: 
    // Fetch top-rated movies
export const handleGetTopMovies = async (
  limit: number
): Promise<ListMoviesData["movies"] | null> => {
  try {
    const response = await listMovies({
      orderByRating: OrderDirection.DESC,
      limit,
    });
    return response.data.movies;
  } catch (error) {
    console.error("Error fetching top movies:", error);
    return null;
  }
};

// Fetch latest movies
export const handleGetLatestMovies = async (
  limit: number
): Promise<ListMoviesData["movies"] | null> => {
  try {
    const response = await listMovies({
      orderByReleaseYear: OrderDirection.DESC,
      limit,
    });
    return response.data.movies;
  } catch (error) {
    console.error("Error fetching latest movies:", error);
    return null;
  }
};

মূল বিষয়গুলি:

  • listMovies : একটি স্বয়ংক্রিয়ভাবে তৈরি ফাংশন যা listMovies কোয়েরিকে কল করে সিনেমার তালিকা পুনরুদ্ধার করে। এতে রেটিং বা মুক্তির বছর অনুসারে বাছাই এবং ফলাফলের সংখ্যা সীমিত করার বিকল্প রয়েছে।
  • ListMoviesData : অ্যাপের হোমপেজে সেরা ১০টি এবং সর্বশেষ সিনেমা প্রদর্শনের জন্য ব্যবহৃত ফলাফলের ধরণ।

এটিকে কাজে দেখুন

আপনার ওয়েব অ্যাপটি পুনরায় লোড করুন যাতে আপনি কোয়েরিটি কার্যকরভাবে দেখতে পারেন। হোমপেজটি এখন গতিশীলভাবে সিনেমার তালিকা প্রদর্শন করে, আপনার স্থানীয় ডাটাবেস থেকে সরাসরি ডেটা নিয়ে আসে। আপনি শীর্ষ-রেটেড এবং সর্বশেষ সিনেমাগুলি নির্বিঘ্নে প্রদর্শিত হতে দেখতে পাবেন, যা আপনার সেট আপ করা ডেটা প্রতিফলিত করে।

৬. সিনেমা এবং অভিনেতার বিবরণ প্রদর্শন করুন

এই বিভাগে, আপনি একটি চলচ্চিত্র বা অভিনেতার অনন্য আইডি ব্যবহার করে তাদের বিস্তারিত তথ্য পুনরুদ্ধার করার কার্যকারিতা বাস্তবায়ন করবেন। এর মধ্যে কেবল তাদের নিজ নিজ টেবিল থেকে ডেটা আনাই নয়, বরং চলচ্চিত্র পর্যালোচনা এবং অভিনেতার ফিল্মোগ্রাফির মতো বিস্তৃত বিবরণ প্রদর্শনের জন্য সম্পর্কিত টেবিলগুলিকে যুক্ত করাও অন্তর্ভুক্ত।

অনুসরণ

সংযোগকারী বাস্তবায়ন করুন

  1. আপনার প্রোজেক্টে dataconnect/movie-connector/queries.gql খুলুন ।
  2. সিনেমা এবং অভিনেতার বিবরণ পুনরুদ্ধার করতে নিম্নলিখিত প্রশ্নগুলি যোগ করুন : 
    # 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
    }
    reviews: reviews_on_movie {
      id
      reviewText
      reviewDate
      rating
      user {
        id
        username
      }
    }
  }
}

# Get actor by id
query GetActorById($id: UUID!) @auth(level: PUBLIC) {
  actor(id: $id) {
    id
    name
    imageUrl
    mainActors: movies_via_MovieActor(where: { role: { eq: "main" } }) {
      id
      title
      genre
      tags
      imageUrl
    }
    supportingActors: movies_via_MovieActor(
      where: { role: { eq: "supporting" } }
    ) {
      id
      title
      genre
      tags
      imageUrl
    }
  }
}
  3. আপনার পরিবর্তনগুলি সংরক্ষণ করুন এবং প্রশ্নগুলি পর্যালোচনা করুন।

মূল বিষয়গুলি:

  • movie() / actor() : Movies বা Actors টেবিল থেকে একটি একক সিনেমা বা অভিনেতা আনার জন্য GraphQL কোয়েরি ক্ষেত্র।
  • _on_ : এটি এমন একটি সংশ্লিষ্ট ধরণের ক্ষেত্রগুলিতে সরাসরি অ্যাক্সেসের অনুমতি দেয় যার একটি বিদেশী কী সম্পর্ক রয়েছে। উদাহরণস্বরূপ, reviews_on_movie একটি নির্দিষ্ট চলচ্চিত্রের সাথে সম্পর্কিত সমস্ত পর্যালোচনা সংগ্রহ করে।
  • _via_ : একটি জয়েন টেবিলের মাধ্যমে বহু-থেকে-বহু সম্পর্ক নেভিগেট করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, actors_via_MovieActor MovieActor জয়েন টেবিলের মাধ্যমে Actor টাইপ অ্যাক্সেস করে এবং where condition অভিনেতাদের তাদের ভূমিকার উপর ভিত্তি করে ফিল্টার করে (উদাহরণস্বরূপ, "প্রধান" বা "সহায়ক")।

মক ডেটা ইনপুট করে কোয়েরিটি পরীক্ষা করুন।

  1. ডেটা কানেক্ট এক্সিকিউশন প্যানে, আপনি মক আইডি ইনপুট করে কোয়েরিটি পরীক্ষা করতে পারেন, যেমন: 
    {"id": "550e8400-e29b-41d4-a716-446655440000"}
  2. "কোয়ান্টাম প্যারাডক্স" (উপরের আইডিটি যে মক মুভির সাথে সম্পর্কিত) সম্পর্কে বিস্তারিত জানতে GetMovieById এর জন্য Run (local) এ ক্লিক করুন।

1b08961891e44da2.png সম্পর্কে

ওয়েব অ্যাপে কোয়েরিগুলি একীভূত করুন

  1. MovieService ( app/src/lib/MovieService.tsx ) তে, নিম্নলিখিত আমদানিগুলি আনকমেন্ট করুন : 
    import { getMovieById, GetMovieByIdData } from "@movie/dataconnect";
import { GetActorByIdData, getActorById } from "@movie/dataconnect";
  2. handleGetMovieById এবং handleGetActorById ফাংশনগুলি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন : 
    // Fetch movie details by ID
export const handleGetMovieById = async (
  movieId: string
) => {
  try {
    const response = await getMovieById({ id: movieId });
    if (response.data.movie) {
      return response.data.movie;
    }
    return null;
  } catch (error) {
    console.error("Error fetching movie:", error);
    return null;
  }
};

// Calling generated SDK for GetActorById
export const handleGetActorById = async (
  actorId: string
): Promise<GetActorByIdData["actor"] | null> => {
  try {
    const response = await getActorById({ id: actorId });
    if (response.data.actor) {
      return response.data.actor;
    }
    return null;
  } catch (error) {
    console.error("Error fetching actor:", error);
    return null;
  }
};

মূল বিষয়গুলি:

  • getMovieById / getActorById : এগুলি স্বয়ংক্রিয়ভাবে তৈরি ফাংশন যা আপনার সংজ্ঞায়িত কোয়েরিগুলিকে কল করে, একটি নির্দিষ্ট সিনেমা বা অভিনেতার জন্য বিস্তারিত তথ্য পুনরুদ্ধার করে।
  • GetMovieByIdData / GetActorByIdData : এগুলি হল ফলাফলের ধরণ, যা অ্যাপে সিনেমা এবং অভিনেতার বিবরণ প্রদর্শন করতে ব্যবহৃত হয়।

এটিকে কাজে দেখুন

এখন, আপনার ওয়েব অ্যাপের হোমপেজে যান। একটি সিনেমার উপর ক্লিক করুন, এবং আপনি অভিনেতা এবং পর্যালোচনা সহ তার সমস্ত বিবরণ দেখতে সক্ষম হবেন - সম্পর্কিত টেবিল থেকে সংগৃহীত তথ্য। একইভাবে, একজন অভিনেতার উপর ক্লিক করলে তারা যে সিনেমাগুলির অংশ ছিল তা প্রদর্শিত হবে।

৭. ব্যবহারকারীর প্রমাণীকরণ পরিচালনা করুন

এই বিভাগে, আপনি Firebase প্রমাণীকরণ ব্যবহার করে ব্যবহারকারীর সাইন-ইন এবং সাইন-আউট কার্যকারিতা বাস্তবায়ন করবেন। আপনি Firebase DataConnect-এ ব্যবহারকারীর ডেটা সরাসরি পুনরুদ্ধার বা আপসার্ট করতে Firebase প্রমাণীকরণ ডেটাও ব্যবহার করবেন, যা আপনার অ্যাপের মধ্যে নিরাপদ ব্যবহারকারী ব্যবস্থাপনা নিশ্চিত করবে।

9890838045d5a00e.png সম্পর্কে

সংযোগকারী বাস্তবায়ন করুন

  1. dataconnect/movie-connector/ এ mutations.gql খুলুন ।
  2. বর্তমান প্রমাণিত ব্যবহারকারী তৈরি বা আপডেট করতে নিম্নলিখিত মিউটেশন যোগ করুন: 
    # Create or update the current authenticated user
mutation UpsertUser($username: String!) @auth(level: USER) {
  user_upsert(
    data: {
      id_expr: "auth.uid"
      username: $username
    }
  )
}

মূল বিষয়গুলি:

  • id_expr: "auth.uid" : এটি auth.uid ব্যবহার করে, যা ব্যবহারকারী বা অ্যাপ দ্বারা নয়, সরাসরি Firebase প্রমাণীকরণ দ্বারা সরবরাহ করা হয়, ব্যবহারকারী আইডি নিরাপদে এবং স্বয়ংক্রিয়ভাবে পরিচালনা করা নিশ্চিত করে নিরাপত্তার একটি অতিরিক্ত স্তর যোগ করে।

বর্তমান ব্যবহারকারী আনুন

  1. dataconnect/movie-connector/ queries.gql খুলুন ।
  2. বর্তমান ব্যবহারকারী আনতে নিম্নলিখিত কোয়েরিটি যোগ করুন : 
    # Get user by ID
query GetCurrentUser @auth(level: USER) {
  user(key: { id_expr: "auth.uid" }) {
    id
    username
    reviews: reviews_on_user {
      id
      rating
      reviewDate
      reviewText
      movie {
        id
        title
      }
    }
    favoriteMovies: favorite_movies_on_user {
      movie {
        id
        title
        genre
        imageUrl
        releaseYear
        rating
        description
        tags
        metadata: movieMetadatas_on_movie {
          director
        }
      }
    }
  }
}

মূল বিষয়গুলি:

  • auth.uid : এটি সরাসরি Firebase Authentication থেকে পুনরুদ্ধার করা হয়, যা ব্যবহারকারী-নির্দিষ্ট ডেটাতে নিরাপদ অ্যাক্সেস নিশ্চিত করে।
  • _on_ ক্ষেত্র: এই ক্ষেত্রগুলি জয়েন টেবিলগুলিকে প্রতিনিধিত্ব করে:
    • reviews_on_user : ব্যবহারকারীর সাথে সম্পর্কিত সমস্ত পর্যালোচনা সংগ্রহ করে, যার মধ্যে সিনেমার id এবং title অন্তর্ভুক্ত।
    • favorite_movies_on_user : ব্যবহারকারীর পছন্দের হিসেবে চিহ্নিত সমস্ত সিনেমা পুনরুদ্ধার করে, যার মধ্যে রয়েছে genre , releaseYear , rating এবং metadata মতো বিস্তারিত তথ্য।

ওয়েব অ্যাপে কোয়েরিগুলি একীভূত করুন

  1. MovieService ( app/src/lib/MovieService.tsx ) তে, নিম্নলিখিত আমদানিগুলি আনকমেন্ট করুন: 
    import { upsertUser } from "@movie/dataconnect";
import { getCurrentUser, GetCurrentUserData } from "@movie/dataconnect";
  2. handleAuthStateChange এবং handleGetCurrentUser ফাংশনগুলি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন: 
    // Handle user authentication state changes and upsert user
export const handleAuthStateChange = (
  auth: any,
  setUser: (user: User | null) => void
) => {
  return onAuthStateChanged(auth, async (user) => {
    if (user) {
      setUser(user);
      const username = user.email?.split("@")[0] || "anon";
      await upsertUser({ username });
    } else {
      setUser(null);
    }
  });
};

// Fetch current user profile
export const handleGetCurrentUser = async (): Promise<
  GetCurrentUserData["user"] | null
> => {
  try {
    const response = await getCurrentUser();
    return response.data.user;
  } catch (error) {
    console.error("Error fetching user profile:", error);
    return null;
  }
};

মূল বিষয়গুলি:

  • handleAuthStateChange : এই ফাংশনটি প্রমাণীকরণের অবস্থার পরিবর্তনগুলি শোনে। যখন কোনও ব্যবহারকারী সাইন ইন করেন, তখন এটি ব্যবহারকারীর ডেটা সেট করে এবং ডাটাবেসে ব্যবহারকারীর তথ্য তৈরি বা আপডেট করার জন্য upsertUser মিউটেশনকে কল করে।
  • handleGetCurrentUser : getCurrentUser কোয়েরি ব্যবহার করে বর্তমান ব্যবহারকারীর প্রোফাইল সংগ্রহ করে, যা ব্যবহারকারীর পর্যালোচনা এবং প্রিয় সিনেমাগুলি পুনরুদ্ধার করে।

এটিকে কাজে দেখুন

এখন, নেভবারে "সাইন ইন উইথ গুগল" বোতামে ক্লিক করুন। আপনি ফায়ারবেস অথেনটিকেশন এমুলেটর ব্যবহার করে সাইন ইন করতে পারেন। সাইন ইন করার পরে, "মাই প্রোফাইল" এ ক্লিক করুন। এটি আপাতত খালি থাকবে, তবে আপনি আপনার অ্যাপে ব্যবহারকারী-নির্দিষ্ট ডেটা হ্যান্ডলিং এর ভিত্তি স্থাপন করেছেন।

৮. ব্যবহারকারীর মিথস্ক্রিয়া বাস্তবায়ন করুন

কোডল্যাবের এই বিভাগে, আপনি মুভি রিভিউ অ্যাপে ব্যবহারকারীর ইন্টারঅ্যাকশন বাস্তবায়ন করবেন, বিশেষ করে ব্যবহারকারীদের তাদের প্রিয় সিনেমা পরিচালনা করতে এবং পর্যালোচনাগুলি ছেড়ে দিতে বা মুছে ফেলতে পারবেন।

b3d0ac1e181c9de9.png সম্পর্কে

ব্যবহারকারীকে একটি সিনেমা পছন্দ করতে দিন

এই বিভাগে, আপনি ব্যবহারকারীদের একটি সিনেমা পছন্দ করার সুযোগ দেওয়ার জন্য ডাটাবেস সেট আপ করবেন।

সংযোগকারী বাস্তবায়ন করুন

  1. dataconnect/movie-connector/ এ mutations.gql খুলুন ।
  2. পছন্দের সিনেমাগুলি পরিচালনা করতে নিম্নলিখিত মিউটেশনগুলি যোগ করুন : 
    # 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 })
}

মূল বিষয়গুলি:

  • userId_expr: "auth.uid" : auth.uid ব্যবহার করে, যা সরাসরি Firebase Authentication দ্বারা সরবরাহ করা হয়, এটি নিশ্চিত করে যে শুধুমাত্র প্রমাণিত ব্যবহারকারীর ডেটা অ্যাক্সেস বা পরিবর্তন করা হয়েছে।

কোনও সিনেমা পছন্দের কিনা তা পরীক্ষা করুন

  1. dataconnect/movie-connector/ queries.gql খুলুন ।
  2. কোনও সিনেমা পছন্দের কিনা তা পরীক্ষা করতে নিম্নলিখিত কোয়েরিটি যোগ করুন : 
    query GetIfFavoritedMovie($movieId: UUID!) @auth(level: USER) {
  favorite_movie(key: { userId_expr: "auth.uid", movieId: $movieId }) {
    movieId
  }
}

মূল বিষয়গুলি:

  • auth.uid : Firebase প্রমাণীকরণ ব্যবহার করে ব্যবহারকারী-নির্দিষ্ট ডেটাতে নিরাপদ অ্যাক্সেস নিশ্চিত করে।
  • favorite_movie : বর্তমান ব্যবহারকারীর দ্বারা একটি নির্দিষ্ট সিনেমা প্রিয় হিসেবে চিহ্নিত হয়েছে কিনা তা দেখার জন্য favorite_movies যোগদানের টেবিলটি পরীক্ষা করে।

ওয়েব অ্যাপে কোয়েরিগুলি একীভূত করুন

  1. MovieService ( app/src/lib/MovieService.tsx ) তে, নিম্নলিখিত আমদানিগুলি আনকমেন্ট করুন : 
    import { addFavoritedMovie, deleteFavoritedMovie, getIfFavoritedMovie } from "@movie/dataconnect";
  2. handleAddFavoritedMovie , handleDeleteFavoritedMovie , এবং handleGetIfFavoritedMovie ফাংশনগুলি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন : 
    // Add a movie to user's favorites
export const handleAddFavoritedMovie = async (
  movieId: string
): Promise<void> => {
  try {
    await addFavoritedMovie({ movieId });
  } catch (error) {
    console.error("Error adding movie to favorites:", error);
    throw error;
  }
};

// Remove a movie from user's favorites
export const handleDeleteFavoritedMovie = async (
  movieId: string
): Promise<void> => {
  try {
    await deleteFavoritedMovie({ movieId });
  } catch (error) {
    console.error("Error removing movie from favorites:", error);
    throw error;
  }
};

// Check if the movie is favorited by the user
export const handleGetIfFavoritedMovie = async (
  movieId: string
): Promise<boolean> => {
  try {
    const response = await getIfFavoritedMovie({ movieId });
    return !!response.data.favorite_movie;
  } catch (error) {
    console.error("Error checking if movie is favorited:", error);
    return false;
  }
};

মূল বিষয়গুলি:

  • handleAddFavoritedMovie এবং handleDeleteFavoritedMovie : ব্যবহারকারীর পছন্দের তালিকা থেকে নিরাপদে একটি সিনেমা যোগ করতে বা সরাতে মিউটেশনগুলি ব্যবহার করুন।
  • handleGetIfFavoritedMovie : ব্যবহারকারীর দ্বারা কোনও সিনেমা প্রিয় হিসেবে চিহ্নিত হয়েছে কিনা তা পরীক্ষা করার জন্য getIfFavoritedMovie কোয়েরি ব্যবহার করে।

এটিকে কাজে দেখুন

এখন, আপনি মুভি কার্ড এবং মুভির বিবরণ পৃষ্ঠায় হার্ট আইকনে ক্লিক করে মুভিগুলিকে পছন্দ বা পছন্দ থেকে বাদ দিতে পারেন। এছাড়াও, আপনি আপনার প্রোফাইল পৃষ্ঠায় আপনার পছন্দের মুভিগুলি দেখতে পারেন।

ব্যবহারকারীদের পর্যালোচনা ছেড়ে দিতে বা মুছে ফেলতে দিন

এরপর, আপনি অ্যাপে ব্যবহারকারীর পর্যালোচনা পরিচালনার জন্য বিভাগটি বাস্তবায়ন করবেন।

সংযোগকারী বাস্তবায়ন করুন

mutations.gql ( dataconnect/movie-connector/mutations.gql ) তে: নিম্নলিখিত মিউটেশনগুলি যোগ করুন: 

# Add a review for a movie
mutation AddReview($movieId: UUID!, $rating: Int!, $reviewText: String!)
@auth(level: USER) {
  review_insert(
    data: {
      userId_expr: "auth.uid"
      movieId: $movieId
      rating: $rating
      reviewText: $reviewText
      reviewDate_date: { today: true }
    }
  )
}

# Delete a user's review for a movie
mutation DeleteReview($movieId: UUID!) @auth(level: USER) {
  review_delete(key: { userId_expr: "auth.uid", movieId: $movieId })
}

মূল বিষয়গুলি:

  • userId_expr: "auth.uid" : নিশ্চিত করে যে পর্যালোচনাগুলি প্রমাণিত ব্যবহারকারীর সাথে সম্পর্কিত।
  • reviewDate_date: { today: true } : DataConnect ব্যবহার করে স্বয়ংক্রিয়ভাবে পর্যালোচনার বর্তমান তারিখ তৈরি করে, ম্যানুয়াল ইনপুটের প্রয়োজন হয় না।

ওয়েব অ্যাপে কোয়েরিগুলি একীভূত করুন

  1. MovieService ( app/src/lib/MovieService.tsx ) তে, নিম্নলিখিত আমদানিগুলি আনকমেন্ট করুন : 
    import { addReview, deleteReview } from "@movie/dataconnect";
  2. handleAddReview এবং handleDeleteReview ফাংশনগুলি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন : 
    // Add a review to a movie
export const handleAddReview = async (
  movieId: string,
  rating: number,
  reviewText: string
): Promise<void> => {
  try {
    await addReview({ movieId, rating, reviewText });
  } catch (error) {
    console.error("Error adding review:", error);
    throw error;
  }
};

// Delete a review from a movie
export const handleDeleteReview = async (movieId: string): Promise<void> => {
  try {
    await deleteReview({ movieId });
  } catch (error) {
    console.error("Error deleting review:", error);
    throw error;
  }
};

মূল বিষয়গুলি:

  • handleAddReview : নির্দিষ্ট মুভির জন্য একটি পর্যালোচনা যোগ করার জন্য addReview মিউটেশনকে কল করে, এটিকে নিরাপদে প্রমাণিত ব্যবহারকারীর সাথে লিঙ্ক করে।
  • handleDeleteReview : প্রমাণিত ব্যবহারকারীর দ্বারা একটি সিনেমার পর্যালোচনা সরাতে deleteReview মিউটেশন ব্যবহার করে।

এটিকে কাজে দেখুন

ব্যবহারকারীরা এখন মুভির বিবরণ পৃষ্ঠায় মুভির পর্যালোচনা দিতে পারবেন। তারা তাদের প্রোফাইল পৃষ্ঠায় তাদের পর্যালোচনা দেখতে এবং মুছে ফেলতে পারবেন, যার ফলে অ্যাপের সাথে তাদের মিথস্ক্রিয়ার উপর পূর্ণ নিয়ন্ত্রণ তাদের থাকবে।

৯. উন্নত ফিল্টার এবং আংশিক টেক্সট ম্যাচিং

এই বিভাগে, আপনি উন্নত অনুসন্ধান ক্ষমতা বাস্তবায়ন করবেন, যার ফলে ব্যবহারকারীরা বিভিন্ন রেটিং এবং মুক্তির বছরের উপর ভিত্তি করে সিনেমা অনুসন্ধান করতে পারবেন, জেনার এবং ট্যাগ অনুসারে ফিল্টার করতে পারবেন, শিরোনাম বা বর্ণনায় আংশিক পাঠ্য মিল করতে পারবেন এবং এমনকি আরও সুনির্দিষ্ট ফলাফলের জন্য একাধিক ফিল্টার একত্রিত করতে পারবেন।

অনুসরণ

সংযোগকারী বাস্তবায়ন করুন

  1. dataconnect/movie-connector/ queries.gql খুলুন।
  2. বিভিন্ন অনুসন্ধান ক্ষমতা সমর্থন করার জন্য নিম্নলিখিত কোয়েরিটি যোগ করুন : 
    # Search for movies, actors, and reviews
query SearchAll(
  $input: String
  $minYear: Int!
  $maxYear: Int!
  $minRating: Float!
  $maxRating: Float!
  $genre: String!
) @auth(level: PUBLIC) {
  moviesMatchingTitle: movies(
    where: {
      _and: [
        { releaseYear: { ge: $minYear } }
        { releaseYear: { le: $maxYear } }
        { rating: { ge: $minRating } }
        { rating: { le: $maxRating } }
        { genre: { contains: $genre } }
        { title: { contains: $input } }
      ]
    }
  ) {
    id
    title
    genre
    rating
    imageUrl
  }
  moviesMatchingDescription: movies(
    where: {
      _and: [
        { releaseYear: { ge: $minYear } }
        { releaseYear: { le: $maxYear } }
        { rating: { ge: $minRating } }
        { rating: { le: $maxRating } }
        { genre: { contains: $genre } }
        { description: { contains: $input } }
      ]
    }
  ) {
    id
    title
    genre
    rating
    imageUrl
  }
  actorsMatchingName: actors(where: { name: { contains: $input } }) {
    id
    name
    imageUrl
  }
  reviewsMatchingText: reviews(where: { reviewText: { contains: $input } }) {
    id
    rating
    reviewText
    reviewDate
    movie {
      id
      title
    }
    user {
      id
      username
    }
  }
}

মূল বিষয়গুলি:

  • _and অপারেটর: একটি একক কোয়েরিতে একাধিক শর্ত একত্রিত করে, অনুসন্ধানটিকে releaseYear , rating এবং genre এর মতো বিভিন্ন ক্ষেত্র দ্বারা ফিল্টার করার অনুমতি দেয়।
  • contains operator: ক্ষেত্রের মধ্যে আংশিক টেক্সট মিল খুঁজে বের করে। এই কোয়েরিতে, এটি title , description , name , অথবা reviewText মধ্যে মিল খুঁজে বের করে।
  • where clause: ডেটা ফিল্টার করার শর্তাবলী নির্দিষ্ট করে। প্রতিটি বিভাগ (চলচ্চিত্র, অভিনেতা, পর্যালোচনা) অনুসন্ধানের জন্য নির্দিষ্ট মানদণ্ড নির্ধারণ করতে একটি where clause ব্যবহার করে।

ওয়েব অ্যাপে কোয়েরিগুলি একীভূত করুন

  1. MovieService ( app/src/lib/MovieService.tsx ) তে, নিম্নলিখিত আমদানিগুলি আনকমেন্ট করুন : 
    import { searchAll, SearchAllData } from "@movie/dataconnect";
  2. handleSearchAll ফাংশনটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন : 
    // Function to perform the search using the query and filters
export const handleSearchAll = async (
  searchQuery: string,
  minYear: number,
  maxYear: number,
  minRating: number,
  maxRating: number,
  genre: string
): Promise<SearchAllData | null> => {
  try {
    const response = await searchAll({
      input: searchQuery,
      minYear,
      maxYear,
      minRating,
      maxRating,
      genre,
    });

    return response.data;
  } catch (error) {
    console.error("Error performing search:", error);
    return null;
  }
};

মূল বিষয়গুলি:

  • handleSearchAll : এই ফাংশনটি ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে অনুসন্ধান সম্পাদনের জন্য searchAll কোয়েরি ব্যবহার করে, বছর, রেটিং, ধরণ এবং আংশিক পাঠ্য মিলের মতো পরামিতি অনুসারে ফলাফল ফিল্টার করে।

এটিকে কাজে দেখুন

ওয়েব অ্যাপের নেভবার থেকে "অ্যাডভান্সড সার্চ" পৃষ্ঠায় যান। আপনি এখন বিভিন্ন ফিল্টার এবং ইনপুট ব্যবহার করে সিনেমা, অভিনেতা এবং পর্যালোচনা অনুসন্ধান করতে পারেন, বিস্তারিত এবং উপযুক্ত অনুসন্ধান ফলাফল পেতে পারেন।

১০. ঐচ্ছিক: ক্লাউডে স্থাপন করুন (বিলিং প্রয়োজন)

এখন যেহেতু আপনি লোকাল ডেভেলপমেন্ট ইটারেশনের কাজ শেষ করেছেন, এখন আপনার স্কিমা, ডেটা এবং কোয়েরিগুলি সার্ভারে স্থাপন করার সময়। এটি Firebase Data Connect VS Code এক্সটেনশন অথবা Firebase CLI ব্যবহার করে করা যেতে পারে।

আপনার Firebase মূল্য পরিকল্পনা আপগ্রেড করুন

PostgreSQL-এর জন্য ক্লাউড SQL-এর সাথে Firebase Data Connect ইন্টিগ্রেট করার জন্য, আপনার Firebase প্রকল্পটি pay-as-you go (Blaze) মূল্য পরিকল্পনায় থাকা প্রয়োজন, যার অর্থ এটি একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

আপনার প্রকল্পটিকে ব্লেজ প্ল্যানে আপগ্রেড করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. Firebase কনসোলে, আপনার প্ল্যান আপগ্রেড করতে নির্বাচন করুন।
  2. ব্লেজ প্ল্যানটি নির্বাচন করুন। আপনার প্রকল্পের সাথে একটি ক্লাউড বিলিং অ্যাকাউন্ট লিঙ্ক করতে অন-স্ক্রিন নির্দেশাবলী অনুসরণ করুন।
    এই আপগ্রেডের অংশ হিসেবে যদি আপনার একটি ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করার প্রয়োজন হয়, তাহলে আপগ্রেড সম্পূর্ণ করার জন্য আপনাকে Firebase কনসোলে আপগ্রেড ফ্লোতে ফিরে যেতে হতে পারে।

আপনার ওয়েব অ্যাপটিকে আপনার Firebase প্রোজেক্টের সাথে সংযুক্ত করুন

  1. Firebase কনসোল ব্যবহার করে আপনার Firebase প্রকল্পে আপনার ওয়েব অ্যাপটি নিবন্ধন করুন:
    1. আপনার প্রকল্পটি খুলুন, এবং তারপর অ্যাপ যোগ করুন এ ক্লিক করুন।
    2. আপাতত SDK সেটআপ এবং কনফিগারেশন সেটআপ উপেক্ষা করুন, তবে জেনারেট করা firebaseConfig অবজেক্টটি কপি করতে ভুলবেন না।
    7030822793e4d75b.png সম্পর্কে
  2. app/src/lib/firebase.tsx এ বিদ্যমান firebaseConfig Firebase কনসোল থেকে কপি করা কনফিগারেশন দিয়ে প্রতিস্থাপন করুন । 
    const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID"
};
  3. ওয়েব অ্যাপ তৈরি করুন: VS কোডে ফিরে, app ফোল্ডারে, হোস্টিং স্থাপনের জন্য ওয়েব অ্যাপ তৈরি করতে Vite ব্যবহার করুন: 
    cd app
npm run build

আপনার Firebase প্রকল্পে Firebase প্রমাণীকরণ সেট আপ করুন

  1. গুগল সাইন-ইন দিয়ে ফায়ারবেস প্রমাণীকরণ সেট আপ করুন। 62af2f225e790ef6.png সম্পর্কে
  2. (ঐচ্ছিক) Firebase কনসোল ব্যবহার করে Firebase প্রমাণীকরণের জন্য ডোমেনগুলিকে অনুমতি দিন (উদাহরণস্বরূপ, http://127.0.0.1 )।
    1. প্রমাণীকরণ সেটিংসে, অনুমোদিত ডোমেনগুলিতে যান।
    2. "ডোমেইন যোগ করুন" এ ক্লিক করুন এবং তালিকায় আপনার স্থানীয় ডোমেইন অন্তর্ভুক্ত করুন।

c255098f12549886.png সম্পর্কে

Firebase CLI এর সাথে স্থাপন করুন

  1. dataconnect/dataconnect.yaml এ, নিশ্চিত করুন যে আপনার ইনস্ট্যান্স আইডি, ডাটাবেস এবং সার্ভিস আইডি আপনার প্রোজেক্টের সাথে মেলে: 
    specVersion: "v1alpha"
serviceId: "your-service-id"
location: "us-central1"
schema:
  source: "./schema"
  datasource:
    postgresql:
      database: "your-database-id"
      cloudSql:
        instanceId: "your-instance-id"
connectorDirs: ["./movie-connector"]
  2. আপনার প্রকল্পের সাথে Firebase CLI সেট আপ আছে কিনা তা নিশ্চিত করুন: 
    npm i -g firebase-tools
firebase login --reauth
firebase use --add
  3. আপনার টার্মিনালে, স্থাপনের জন্য নিম্নলিখিত কমান্ডটি চালান: 
    firebase deploy --only dataconnect,hosting
  4. আপনার স্কিমার পরিবর্তনগুলির তুলনা করতে এই কমান্ডটি চালান: 
    firebase dataconnect:sql:diff
  5. যদি পরিবর্তনগুলি গ্রহণযোগ্য হয়, তাহলে সেগুলি নিম্নলিখিত উপায়ে প্রয়োগ করুন: 
    firebase dataconnect:sql:migrate

আপনার ক্লাউড SQL for PostgreSQL ইনস্ট্যান্স চূড়ান্ত ডিপ্লয় করা স্কিমা এবং ডেটা সহ আপডেট করা হবে। আপনি Firebase কনসোলে স্থিতি পর্যবেক্ষণ করতে পারেন।

এখন তুমি তোমার অ্যাপটি your-project.web.app/ ওয়েবসাইটে লাইভ দেখতে পাবে। এছাড়াও, তুমি Firebase Data Connect প্যানেলে Run (Production) এ ক্লিক করে উৎপাদন পরিবেশে ডেটা যোগ করতে পারো, ঠিক যেমনটা তুমি স্থানীয় এমুলেটরগুলির সাথে করেছিলে।

১১. ঐচ্ছিক: ফায়ারবেস ডেটা কানেক্টের সাহায্যে ভেক্টর অনুসন্ধান (বিলিং প্রয়োজন)

এই বিভাগে, আপনি Firebase Data Connect ব্যবহার করে আপনার মুভি রিভিউ অ্যাপে ভেক্টর অনুসন্ধান সক্ষম করবেন। এই বৈশিষ্ট্যটি কন্টেন্ট-ভিত্তিক অনুসন্ধানের অনুমতি দেয়, যেমন ভেক্টর এম্বেডিং ব্যবহার করে অনুরূপ বর্ণনা সহ সিনেমা খুঁজে বের করা।

এই ধাপে গুগল ক্লাউডে স্থাপনের জন্য আপনাকে এই কোডল্যাবের শেষ ধাপটি সম্পন্ন করতে হবে।

4b5aca5a447d2feb.png সম্পর্কে

একটি ক্ষেত্রের জন্য এম্বেডিং অন্তর্ভুক্ত করার জন্য স্কিমা আপডেট করুন

dataconnect/schema/schema.gql এ, Movie টেবিলে descriptionEmbedding ক্ষেত্রটি যোগ করুন: 

type Movie
  # The below parameter values are generated by default with @table, and can be edited manually.
  @table {
  # implicitly calls @col to generates a column name. ex: @col(name: "movie_id")
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  releaseYear: Int
  genre: String
  rating: Float
  description: String
  tags: [String]
  descriptionEmbedding: Vector @col(size:768) # Enables vector search
}

মূল বিষয়গুলি:

  • descriptionEmbedding: Vector @col(size:768) : এই ক্ষেত্রটি সিনেমার বর্ণনার অর্থপূর্ণ এম্বেডিং সংরক্ষণ করে, যা আপনার অ্যাপে ভেক্টর-ভিত্তিক কন্টেন্ট অনুসন্ধান সক্ষম করে।

ভার্টেক্স এআই সক্রিয় করুন

  1. গুগল ক্লাউড থেকে ভার্টেক্স এআই এপিআই সেট আপ করার জন্য পূর্বশর্ত নির্দেশিকা অনুসরণ করুন। এম্বেডিং জেনারেশন এবং ভেক্টর অনুসন্ধান কার্যকারিতা সমর্থন করার জন্য এই পদক্ষেপটি অপরিহার্য।
  2. ফায়ারবেস ডেটা কানেক্ট ভিএস কোড এক্সটেনশন ব্যবহার করে "ডিপ্লোয় টু প্রোডাকশন" এ ক্লিক করে pgvector এবং ভেক্টর অনুসন্ধান সক্রিয় করতে আপনার স্কিমা পুনরায় স্থাপন করুন ।

এম্বেডিং দিয়ে ডাটাবেস পূরণ করুন

  1. VS কোডে dataconnect ফোল্ডারটি খুলুন ।
  2. আপনার ডাটাবেসে মুভির জন্য এম্বেডিং যোগ করতে optional_vector_embed.gql এ Run(local) এ ক্লিক করুন।

b858da780f6ec103.png সম্পর্কে

একটি ভেক্টর অনুসন্ধান কোয়েরি যোগ করুন

dataconnect/movie-connector/queries.gql তে, ভেক্টর অনুসন্ধান করতে নিম্নলিখিত কোয়েরিটি যোগ করুন: 

# Search movie descriptions using L2 similarity with Vertex AI
query SearchMovieDescriptionUsingL2Similarity($query: String!)
@auth(level: PUBLIC) {
  movies_descriptionEmbedding_similarity(
    compare_embed: { model: "textembedding-gecko@003", text: $query }
    method: L2
    within: 2
    limit: 5
  ) {
    id
    title
    description
    tags
    rating
    imageUrl
  }
}

মূল বিষয়গুলি:

  • compare_embed : তুলনার জন্য এম্বেডিং মডেল ( textembedding-gecko@003 ) এবং ইনপুট টেক্সট ( $query ) নির্দিষ্ট করে।
  • method : সাদৃশ্য পদ্ধতি ( L2 ) নির্দিষ্ট করে, যা ইউক্লিডীয় দূরত্বকে প্রতিনিধিত্ব করে।
  • within : ঘনিষ্ঠ কন্টেন্ট মিলের উপর দৃষ্টি নিবদ্ধ করে, L2 দূরত্ব 2 বা তার কম সহ সিনেমাগুলিতে অনুসন্ধান সীমাবদ্ধ করে।
  • limit : প্রত্যাবর্তিত ফলাফলের সংখ্যা ৫-এ সীমাবদ্ধ করে।

আপনার অ্যাপে ভেক্টর অনুসন্ধান ফাংশনটি প্রয়োগ করুন

এখন স্কিমা এবং কোয়েরি সেট আপ হয়ে গেছে, ভেক্টর সার্চকে আপনার অ্যাপের সার্ভিস লেয়ারে ইন্টিগ্রেট করুন। এই ধাপটি আপনাকে আপনার ওয়েব অ্যাপ থেকে সার্চ কোয়েরি কল করতে দেয়।

  1. app/src/lib/ MovieService.ts এ, SDK গুলি থেকে নিম্নলিখিত আমদানিগুলি আনকমেন্ট করুন , এটি অন্য যেকোনো কোয়েরির মতোই কাজ করবে। 
    import {
  searchMovieDescriptionUsingL2similarity,
  SearchMovieDescriptionUsingL2similarityData,
} from "@movie/dataconnect";
  2. অ্যাপটিতে ভেক্টর-ভিত্তিক অনুসন্ধান সংহত করতে নিম্নলিখিত ফাংশনটি যুক্ত করুন : 
    // Perform vector-based search for movies based on description
export const searchMoviesByDescription = async (
  query: string
): Promise<
  | SearchMovieDescriptionUsingL2similarityData["movies_descriptionEmbedding_similarity"]
  | null
> => {
  try {
    const response = await searchMovieDescriptionUsingL2similarity({ query });
    return response.data.movies_descriptionEmbedding_similarity;
  } catch (error) {
    console.error("Error fetching movie descriptions:", error);
    return null;
  }
};

মূল বিষয়গুলি:

  • searchMoviesByDescription : এই ফাংশনটি searchMovieDescriptionUsingL2similarity কোয়েরিকে কল করে, ভেক্টর-ভিত্তিক কন্টেন্ট অনুসন্ধান করার জন্য ইনপুট টেক্সটটি পাস করে।

এটিকে কাজে দেখুন

নেভিগেশন বারে "ভেক্টর সার্চ" বিভাগে যান এবং "রোমান্টিক এবং আধুনিক" এর মতো বাক্যাংশ টাইপ করুন। আপনি যে কন্টেন্টটি অনুসন্ধান করছেন তার সাথে মেলে এমন সিনেমার একটি তালিকা দেখতে পাবেন, অথবা, যেকোনো সিনেমার সিনেমার বিবরণ পৃষ্ঠায় যান এবং পৃষ্ঠার নীচে একই রকম সিনেমা বিভাগটি দেখুন।

7b71f1c75633c1be.png সম্পর্কে

১২. উপসংহার

অভিনন্দন, তুমি ওয়েব অ্যাপ ব্যবহার করতে পারবে! যদি তুমি তোমার নিজের মুভি ডেটা দিয়ে খেলতে চাও, তাহলে চিন্তা করো না, _insert.gql ফাইলগুলি অনুকরণ করে Firebase Data Connect এক্সটেনশন ব্যবহার করে তোমার নিজস্ব ডেটা সন্নিবেশ করাও, অথবা VS Code-এর Data Connect এক্সিকিউশন প্যানের মাধ্যমে সেগুলো যোগ করো।

আরও জানুন