AngularFire ওয়েব কোডল্যাব

1। সংক্ষিপ্ত বিবরণ

এই কোডল্যাবে, আপনি ফায়ারবেস পণ্য এবং পরিষেবাগুলি ব্যবহার করে একটি চ্যাট ক্লায়েন্ট বাস্তবায়ন এবং স্থাপন করে ওয়েব অ্যাপ্লিকেশন তৈরি করতে AngularFire ব্যবহার করতে শিখবেন।

angularfire-2.png

আপনি কি শিখবেন

  • Angular এবং Firebase ব্যবহার করে একটি ওয়েব অ্যাপ তৈরি করুন।
  • ফায়ারবেসের জন্য ক্লাউড ফায়ারস্টোর এবং ক্লাউড স্টোরেজ ব্যবহার করে ডেটা সিঙ্ক করুন।
  • Firebase প্রমাণীকরণ ব্যবহার করে আপনার ব্যবহারকারীদের প্রমাণীকরণ করুন।
  • Firebase হোস্টিং-এ আপনার ওয়েব অ্যাপ স্থাপন করুন।
  • Firebase ক্লাউড মেসেজিং এর মাধ্যমে বিজ্ঞপ্তি পাঠান।
  • আপনার ওয়েব অ্যাপের কর্মক্ষমতা ডেটা সংগ্রহ করুন।

আপনি কি প্রয়োজন হবে

  • আপনার পছন্দের IDE/টেক্সট এডিটর, যেমন WebStorm , Atom , Sublime , বা VS Code
  • প্যাকেজ ম্যানেজার npm , যা সাধারণত Node.js এর সাথে আসে
  • একটি টার্মিনাল/কনসোল
  • আপনার পছন্দের একটি ব্রাউজার, যেমন Chrome
  • কোডল্যাবের নমুনা কোড (কোডটি কীভাবে পেতে হয় তার জন্য কোডল্যাবের পরবর্তী ধাপটি দেখুন।)

2. নমুনা কোড পান

কমান্ড লাইন থেকে কোডল্যাবের গিটহাব সংগ্রহস্থল ক্লোন করুন:

git clone https://github.com/firebase/codelab-friendlychat-web

বিকল্পভাবে, যদি আপনার গিট ইনস্টল না থাকে, আপনি একটি ZIP ফাইল হিসাবে সংগ্রহস্থল ডাউনলোড করতে পারেন।

স্টার্টার অ্যাপ আমদানি করুন

আপনার IDE ব্যবহার করে, ক্লোন করা সংগ্রহস্থল থেকে 📁 angularfire-start ডিরেক্টরি খুলুন বা আমদানি করুন। এই 📁 angularfire-start ডিরেক্টরিতে কোডল্যাবের শুরুর কোড রয়েছে, যা একটি সম্পূর্ণ কার্যকরী চ্যাট ওয়েব অ্যাপ হবে।

3. একটি ফায়ারবেস প্রকল্প তৈরি এবং সেট আপ করুন৷

একটি ফায়ারবেস প্রকল্প তৈরি করুন

  1. Firebase এ সাইন ইন করুন।
  2. Firebase কনসোলে, Add Project এ ক্লিক করুন এবং তারপর আপনার Firebase প্রোজেক্টের নাম দিন FriendlyChat । আপনার ফায়ারবেস প্রকল্পের জন্য প্রজেক্ট আইডি মনে রাখবেন।
  3. এই প্রকল্পের জন্য Google Analytics সক্ষম করুন থেকে টিক চিহ্ন সরিয়ে দিন
  4. প্রকল্প তৈরি করুন ক্লিক করুন।

আপনি যে অ্যাপ্লিকেশনটি তৈরি করতে যাচ্ছেন সেটি ফায়ারবেস পণ্য ব্যবহার করে যা ওয়েব অ্যাপের জন্য উপলব্ধ:

  • Firebase প্রমাণীকরণ সহজেই আপনার ব্যবহারকারীদের আপনার অ্যাপে সাইন ইন করার অনুমতি দেয়।
  • ক্লাউড ফায়ারস্টোর ক্লাউডে স্ট্রাকচার্ড ডেটা সংরক্ষণ করতে এবং ডেটা পরিবর্তন হলে তাৎক্ষণিক বিজ্ঞপ্তি পেতে।
  • ক্লাউডে ফাইল সংরক্ষণ করার জন্য ফায়ারবেসের জন্য ক্লাউড স্টোরেজ ।
  • Firebase হোস্টিং হোস্ট এবং আপনার সম্পদ পরিবেশন.
  • ফায়ারবেস ক্লাউড মেসেজিং পুশ বিজ্ঞপ্তি পাঠাতে এবং ব্রাউজার পপআপ বিজ্ঞপ্তিগুলি প্রদর্শন করতে।
  • আপনার অ্যাপের জন্য ব্যবহারকারীর কর্মক্ষমতা ডেটা সংগ্রহ করতে Firebase পারফরম্যান্স মনিটরিং ।

এই পণ্যগুলির মধ্যে কিছু বিশেষ কনফিগারেশন প্রয়োজন বা Firebase কনসোল ব্যবহার করে সক্ষম করা প্রয়োজন।

প্রকল্পে একটি Firebase ওয়েব অ্যাপ যোগ করুন

  1. ওয়েব আইকনে ক্লিক করুন 58d6543a156e56f9.png একটি নতুন Firebase ওয়েব অ্যাপ তৈরি করতে।
  2. Friendly Chat ডাকনাম দিয়ে অ্যাপটিকে নিবন্ধন করুন, তারপর এই অ্যাপের জন্য Firebase হোস্টিং সেট আপ করুন এর পাশের বাক্সে টিক চিহ্ন দিন। রেজিস্টার অ্যাপে ক্লিক করুন।
  3. পরবর্তী ধাপে, আপনি একটি কনফিগারেশন অবজেক্ট দেখতে পাবেন। Firebase-config.js- এ শুধু JS অবজেক্ট (আশেপাশের HTML নয়) কপি করুন

ওয়েব অ্যাপের স্ক্রিনশট নিবন্ধন করুন

Firebase প্রমাণীকরণের জন্য Google সাইন-ইন সক্ষম করুন

ব্যবহারকারীদের তাদের Google অ্যাকাউন্ট দিয়ে ওয়েব অ্যাপে সাইন ইন করার অনুমতি দিতে, আপনি Google সাইন-ইন পদ্ধতি ব্যবহার করবেন।

আপনাকে Google সাইন-ইন সক্ষম করতে হবে:

  1. Firebase কনসোলে, বাম প্যানেলে বিল্ড বিভাগটি সনাক্ত করুন।
  2. প্রমাণীকরণ ক্লিক করুন, তারপর সাইন-ইন পদ্ধতি ট্যাবে ক্লিক করুন (বা সরাসরি সেখানে যেতে এখানে ক্লিক করুন )।
  3. Google সাইন-ইন প্রদানকারী সক্ষম করুন, তারপর সংরক্ষণ করুন ক্লিক করুন৷
  4. আপনার অ্যাপের সর্বজনীন-মুখী নামটি বন্ধুত্বপূর্ণ চ্যাটে সেট করুন এবং ড্রপডাউন মেনু থেকে একটি প্রকল্প সমর্থন ইমেল চয়ন করুন৷
  5. Google ক্লাউড কনসোলে আপনার OAuth সম্মতি স্ক্রীন কনফিগার করুন এবং একটি লোগো যোগ করুন:

d89fb3873b5d36ae.png

ক্লাউড ফায়ারস্টোর সক্ষম করুন

ওয়েব অ্যাপ ক্লাউড ফায়ারস্টোর ব্যবহার করে চ্যাট মেসেজ সেভ করতে এবং নতুন চ্যাট মেসেজ পেতে।

আপনাকে ক্লাউড ফায়ারস্টোর সক্ষম করতে হবে:

  1. Firebase কনসোলের বিল্ড বিভাগে, Firestore Database-এ ক্লিক করুন।
  2. ক্লাউড ফায়ারস্টোর ফলকে ডেটাবেস তৈরি করুন ক্লিক করুন।

729991a081e7cd5.png

  1. স্টার্ট ইন টেস্ট মোড বিকল্পটি নির্বাচন করুন, তারপর নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ার পর পরবর্তী ক্লিক করুন।

টেস্ট মোড নিশ্চিত করে যে আপনি বিকাশের সময় অবাধে ডাটাবেসে লিখতে পারেন। আপনি পরবর্তীতে এই কোডল্যাবে আমাদের ডাটাবেসকে আরও সুরক্ষিত করে তুলবেন।

77e4986cbeaf9dee.png

  1. আপনার ক্লাউড ফায়ারস্টোর ডেটা যেখানে সংরক্ষিত আছে সেটি সেট করুন। আপনি এটিকে ডিফল্ট হিসাবে ছেড়ে যেতে পারেন বা আপনার কাছাকাছি একটি অঞ্চল বেছে নিতে পারেন৷ ফায়ারস্টোরের ব্যবস্থা করতে সম্পন্ন ক্লিক করুন।

9f2bb0d4e7ca49c7.png

ক্লাউড স্টোরেজ সক্ষম করুন

ওয়েব অ্যাপটি ছবি সংরক্ষণ, আপলোড এবং শেয়ার করতে Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করে।

আপনাকে ক্লাউড স্টোরেজ সক্ষম করতে হবে:

  1. Firebase কনসোলের বিল্ড বিভাগে, স্টোরেজ ক্লিক করুন।
  2. যদি কোনও শুরু করার বোতাম না থাকে, তাহলে এর মানে হল যে ক্লাউড স্টোরেজ ইতিমধ্যেই সক্ষম করা আছে এবং আপনাকে নীচের পদক্ষেপগুলি অনুসরণ করতে হবে না৷
  3. শুরু করুন ক্লিক করুন।
  4. আপনার ফায়ারবেস প্রকল্পের নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন, তারপর পরবর্তী ক্লিক করুন।

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

62f1afdcd1260127.png

  1. ক্লাউড স্টোরেজ অবস্থানটি আপনার ক্লাউড ফায়ারস্টোর ডাটাবেসের জন্য আপনি যে অঞ্চলটি বেছে নিয়েছেন তার সাথে পূর্বনির্বাচিত। সেটআপ সম্পূর্ণ করতে সম্পন্ন ক্লিক করুন।

1d7f49ebaddb32fc.png

4. Firebase কমান্ড-লাইন ইন্টারফেস ইনস্টল করুন

Firebase কমান্ড-লাইন ইন্টারফেস (CLI) আপনাকে স্থানীয়ভাবে আপনার ওয়েব অ্যাপ পরিবেশন করতে, সেইসাথে আপনার Firebase প্রকল্পে আপনার ওয়েব অ্যাপ স্থাপন করতে Firebase হোস্টিং ব্যবহার করতে দেয়।

  1. নিম্নলিখিত npm কমান্ডটি চালিয়ে CLI ইনস্টল করুন:
npm -g install firebase-tools
  1. নিম্নলিখিত কমান্ডটি চালিয়ে সিএলআই সঠিকভাবে ইনস্টল করা হয়েছে তা যাচাই করুন:
firebase --version

নিশ্চিত করুন যে Firebase CLI-এর সংস্করণ v4.1.0 বা তার পরের।

  1. নিম্নলিখিত কমান্ড চালানোর মাধ্যমে Firebase CLI অনুমোদন করুন:
firebase login

আপনি আপনার অ্যাপের স্থানীয় ডিরেক্টরি (কোডল্যাবে আগে যে সংগ্রহস্থলটি ক্লোন করেছিলেন) থেকে Firebase হোস্টিংয়ের জন্য আপনার অ্যাপের কনফিগারেশন টেনে আনতে ওয়েব অ্যাপ টেমপ্লেট সেট আপ করেছেন। কিন্তু কনফিগারেশন টানতে, আপনাকে আপনার অ্যাপটিকে আপনার Firebase প্রকল্পের সাথে সংযুক্ত করতে হবে।

  1. নিশ্চিত করুন যে আপনার কমান্ড লাইন আপনার অ্যাপের স্থানীয় angularfire-start ডিরেক্টরি অ্যাক্সেস করছে।
  2. নিম্নলিখিত কমান্ডটি চালিয়ে আপনার ফায়ারবেস প্রকল্পের সাথে আপনার অ্যাপটি সংযুক্ত করুন:
firebase use --add
  1. প্রম্পট করা হলে, আপনার প্রোজেক্ট আইডি নির্বাচন করুন, তারপর আপনার ফায়ারবেস প্রোজেক্টকে একটি উপনাম দিন।

আপনার একাধিক পরিবেশ (উৎপাদন, মঞ্চায়ন, ইত্যাদি) থাকলে একটি উপনাম দরকারী। যাইহোক, এই কোডল্যাবের জন্য, default উপনাম ব্যবহার করা যাক।

  1. আপনার কমান্ড লাইনে অবশিষ্ট নির্দেশাবলী অনুসরণ করুন।

5. AngularFire ইনস্টল করুন

প্রকল্প চালানোর আগে, নিশ্চিত করুন যে আপনার Angular CLI এবং AngularFire সেট আপ আছে।

  1. একটি কনসোলে, নিম্নলিখিত কমান্ডটি চালান:
npm install -g @angular/cli
  1. তারপর, angularfire-start ডিরেক্টরি থেকে একটি কনসোলে, নিম্নলিখিত Angular CLI কমান্ডটি চালান:
ng add @angular/fire

এটি আপনার প্রকল্পের জন্য সমস্ত প্রয়োজনীয় নির্ভরতা ইনস্টল করবে।

  1. অনুরোধ করা হলে, Firebase কনসোলে সেট আপ করা বৈশিষ্ট্যগুলি নির্বাচন করুন ( ng deploy -- hosting , Authentication , Firestore , Cloud Functions (callable) , Cloud Messaging , Cloud Storage ), এবং কনসোলে প্রম্পটগুলি অনুসরণ করুন৷

6. স্থানীয়ভাবে স্টার্টার অ্যাপ চালান

এখন যেহেতু আপনি আপনার প্রকল্প আমদানি এবং কনফিগার করেছেন, আপনি প্রথমবারের জন্য ওয়েব অ্যাপ চালানোর জন্য প্রস্তুত৷

  1. angularfire-start ডিরেক্টরি থেকে একটি কনসোলে, নিম্নলিখিত Firebase CLI কমান্ডটি চালান:
firebase emulators:start
  1. আপনার কমান্ড লাইন নিম্নলিখিত প্রতিক্রিয়া প্রদর্শন করা উচিত:
✔  hosting: Local server: http://localhost:5000

আপনি স্থানীয়ভাবে আমাদের অ্যাপ পরিবেশন করতে Firebase হোস্টিং এমুলেটর ব্যবহার করছেন। ওয়েব অ্যাপটি এখন http://localhost:5000 থেকে পাওয়া উচিত। src সাবডিরেক্টরির অধীনে থাকা সমস্ত ফাইল পরিবেশন করা হয়।

  1. আপনার ব্রাউজার ব্যবহার করে, http://localhost:5000 এ আপনার অ্যাপ খুলুন।

আপনি আপনার FriendlyChat অ্যাপের UI দেখতে পাবেন, যা (এখনও!) কাজ করছে না:

angularfire-2.png

অ্যাপটি এখনই কিছু করতে পারে না, তবে আপনার সাহায্যে, এটি শীঘ্রই হবে! আপনি এখন পর্যন্ত আপনার জন্য শুধুমাত্র UI নির্ধারণ করেছেন।

আসুন এখন একটি রিয়েল-টাইম চ্যাট তৈরি করি!

7. Firebase আমদানি এবং কনফিগার করুন

Firebase কনফিগার করুন

আপনি কোন ফায়ারবেস প্রকল্পটি ব্যবহার করছেন তা জানাতে আপনাকে Firebase SDK কনফিগার করতে হবে।

  1. Firebase কনসোলে আপনার প্রজেক্ট সেটিংসে যান
  2. "আপনার অ্যাপস" কার্ডে, অ্যাপটির ডাকনাম নির্বাচন করুন যার জন্য আপনার একটি কনফিগার অবজেক্ট প্রয়োজন।
  3. Firebase SDK স্নিপেট ফলক থেকে "কনফিগ" নির্বাচন করুন।

আপনি দেখতে পাবেন যে একটি পরিবেশ ফাইল /angularfire-start/src/environments/environment.ts আপনার জন্য তৈরি করা হয়েছে।

  1. কনফিগার অবজেক্ট স্নিপেটটি অনুলিপি করুন, তারপর এটি angularfire-start/src/firebase-config.js এ যোগ করুন।

পরিবেশ

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    databaseURL: "https://PROJECT_ID.firebaseio.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
    measurementId: "G-MEASUREMENT_ID",
  },
};

AngularFire আমদানি করুন

আপনি দেখতে পাবেন যে কনসোলে আপনি যে বৈশিষ্ট্যগুলি নির্বাচন করেছেন তা স্বয়ংক্রিয়ভাবে /angularfire-start/src/app/app.module.ts ফাইলে রাউট করা হয়েছে৷ এটি আপনার অ্যাপকে Firebase বৈশিষ্ট্য এবং কার্যকারিতা ব্যবহার করার অনুমতি দেয়। যাইহোক, একটি স্থানীয় পরিবেশে বিকাশ করতে, আপনাকে এমুলেটর স্যুট ব্যবহার করার জন্য তাদের সংযোগ করতে হবে।

  1. /angularfire-start/src/app/app.module.ts এ, imports বিভাগটি খুঁজুন, এবং অ-উৎপাদন পরিবেশে এমুলেটর স্যুটের সাথে সংযোগ করতে প্রদত্ত ফাংশনগুলি সংশোধন করুন।
// ...

import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';

// ...

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
    const auth = getAuth();
    if (location.hostname === 'localhost') {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }
    return auth;
}),
provideFirestore(() => {
    const firestore = getFirestore();
    if (location.hostname === 'localhost') {
        connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
    }
    return firestore;
}),
provideFunctions(() => {
    const functions = getFunctions();
    if (location.hostname === 'localhost') {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001);
    }
    return functions;
}),
provideStorage(() => {
    const storage = getStorage();
    if (location.hostname === 'localhost') {
        connectStorageEmulator(storage, '127.0.0.1', 5001);
    }
    return storage;
}),
provideMessaging(() => {
    return getMessaging();
}),

// ...

app.module.ts

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

8. ব্যবহারকারী সাইন-ইন সেট আপ করুন৷

AngularFire এখন ব্যবহারের জন্য প্রস্তুত হওয়া উচিত যেহেতু এটি আমদানি করা হয়েছে এবং app.module.ts এ আরম্ভ করা হয়েছে। আপনি এখন Firebase প্রমাণীকরণ ব্যবহার করে ব্যবহারকারী সাইন-ইন বাস্তবায়ন করতে যাচ্ছেন।

Google সাইন-ইন দিয়ে আপনার ব্যবহারকারীদের প্রমাণীকরণ করুন

অ্যাপে, যখন একজন ব্যবহারকারী সাইন ইন উইথ গুগল বোতামে ক্লিক করেন, তখন login ফাংশনটি ট্রিগার হয়। (আপনি ইতিমধ্যে আপনার জন্য এটি সেট আপ করেছেন!) এই কোডল্যাবের জন্য, আপনি পরিচয় প্রদানকারী হিসাবে Google ব্যবহার করার জন্য Firebaseকে অনুমোদন করতে চান৷ আপনি একটি পপআপ ব্যবহার করবেন, তবে Firebase থেকে অন্যান্য বেশ কয়েকটি পদ্ধতি উপলব্ধ।

  1. angularfire-start ডিরেক্টরিতে, সাবডিরেক্টরিতে /src/app/services/ , chat.service.ts খুলুন।
  2. ফাংশন login খুঁজুন.
  3. নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

ব্যবহারকারী লগ আউট বোতামে ক্লিক করলে logout ফাংশনটি ট্রিগার হয়।

  1. src/app/services/chat.service.ts ফাইলে ফিরে যান।
  2. ফাংশন logout খুঁজুন.
  3. নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

প্রমাণীকরণ অবস্থা ট্র্যাক করুন

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

  1. src/app/services/chat.service.ts ফাইলে ফিরে যান।
  2. পরিবর্তনশীল অ্যাসাইনমেন্ট user$ খুঁজুন।
  3. নিম্নলিখিত কোড দিয়ে পুরো অ্যাসাইনমেন্টটি প্রতিস্থাপন করুন।

chat.service.ts

// Observable user
user$ = user(this.auth);

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

অ্যাপে লগ ইন করে পরীক্ষা করুন

  1. যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, তাহলে ব্রাউজারে আপনার অ্যাপ রিফ্রেশ করুন। অন্যথায়, firebase emulators:start http://localhost:5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে স্টার্ট করুন এবং তারপর আপনার ব্রাউজারে খুলুন।
  2. সাইন-ইন বোতাম এবং আপনার Google অ্যাকাউন্ট ব্যবহার করে অ্যাপে লগ ইন করুন। আপনি যদি auth/operation-not-allowed একটি ত্রুটির বার্তা দেখতে পান, তাহলে নিশ্চিত করুন যে আপনি Firebase কনসোলে একটি প্রমাণীকরণ প্রদানকারী হিসাবে Google সাইন-ইন সক্ষম করেছেন।
  3. লগ ইন করার পরে, আপনার প্রোফাইল ছবি এবং ব্যবহারকারীর নাম প্রদর্শিত হবে: angularfire-3.png

9. ক্লাউড ফায়ারস্টোরে বার্তা লিখুন

এই বিভাগে, আপনি ক্লাউড ফায়ারস্টোরে কিছু ডেটা লিখবেন যাতে আপনি অ্যাপের UI পূরণ করতে পারেন। এটি Firebase কনসোলের সাথে ম্যানুয়ালি করা যেতে পারে, কিন্তু আপনি একটি বেসিক ক্লাউড ফায়ারস্টোর লেখা প্রদর্শন করতে অ্যাপেই এটি করবেন।

তথ্য মডেল

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

688d7bc5fb662b57.png

ক্লাউড ফায়ারস্টোরে বার্তা যোগ করুন

ব্যবহারকারীদের দ্বারা লেখা চ্যাট বার্তা সংরক্ষণ করতে, আপনি Cloud Firestore ব্যবহার করবেন।

এই বিভাগে, আপনি ব্যবহারকারীদের আপনার ডাটাবেসে নতুন বার্তা লেখার জন্য কার্যকারিতা যোগ করবেন। একজন ব্যবহারকারী পাঠান বোতামে ক্লিক করলে নিচের কোড স্নিপেটটি ট্রিগার করবে। এটি messages সংগ্রহে আপনার ক্লাউড ফায়ারস্টোর দৃষ্টান্তে বার্তা ক্ষেত্রের বিষয়বস্তু সহ একটি বার্তা বস্তু যুক্ত করে। add() পদ্ধতি সংগ্রহে একটি স্বয়ংক্রিয়ভাবে তৈরি আইডি সহ একটি নতুন নথি যোগ করে।

  1. src/app/services/chat.service.ts ফাইলে ফিরে যান।
  2. ফাংশন addMessage খুঁজুন.
  3. নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
    let data: any;
    try {
      this.user$.subscribe(async (user) => 
      { 
        if(textMessage && textMessage.length > 0) {
          data =  await addDoc(collection(this.firestore, 'messages'), {
            name: user?.displayName,
            text: textMessage,
            profilePicUrl: user?.photoURL,
            timestamp: serverTimestamp(),
            uid: user?.uid
          })}
          else if (imageUrl && imageUrl.length > 0) {
            data =  await addDoc(collection(this.firestore, 'messages'), {
              name: user?.displayName,
              imageUrl: imageUrl,
              profilePicUrl: user?.photoURL,
              timestamp: serverTimestamp(),
              uid: user?.uid
            });
          }
          return data;
        }
      );
    }
    catch(error) {
      console.error('Error writing new message to Firebase Database', error);
      return;
    }
}

বার্তা পাঠানোর পরীক্ষা করুন

  1. যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, তাহলে ব্রাউজারে আপনার অ্যাপ রিফ্রেশ করুন। অন্যথায়, firebase emulators:start http://localhost:5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে স্টার্ট করুন এবং তারপর আপনার ব্রাউজারে খুলুন।
  2. লগ ইন করার পরে, একটি বার্তা লিখুন যেমন "আরে আছে!", এবং তারপরে পাঠান ক্লিক করুন। এটি ক্লাউড ফায়ারস্টোরে বার্তাটি লিখবে। যাইহোক, আপনি এখনও আপনার প্রকৃত ওয়েব অ্যাপে ডেটা দেখতে পাবেন না কারণ আপনাকে এখনও ডেটা পুনরুদ্ধার বাস্তবায়ন করতে হবে (কোডল্যাবের পরবর্তী বিভাগ)।
  3. আপনি আপনার Firebase কনসোলে নতুন যোগ করা বার্তা দেখতে পাবেন। আপনার এমুলেটর স্যুট UI খুলুন। বিল্ড বিভাগের অধীনে ফায়ারস্টোর ডেটাবেস ক্লিক করুন (অথবা এখানে ক্লিক করুন এবং আপনার নতুন যোগ করা বার্তা সহ বার্তা সংগ্রহ দেখতে হবে:

6812efe7da395692.png

10. বার্তা পড়ুন

বার্তা সিঙ্ক্রোনাইজ করুন

অ্যাপে বার্তাগুলি পড়ার জন্য, আপনাকে একটি পর্যবেক্ষণযোগ্য যোগ করতে হবে যা ডেটা পরিবর্তন হলে ট্রিগার করবে এবং তারপরে একটি UI উপাদান তৈরি করবে যা নতুন বার্তাগুলি দেখায়।

আপনি এমন কোড যোগ করবেন যা অ্যাপ থেকে নতুন যোগ করা বার্তাগুলির জন্য শোনে। এই কোডে, আপনি messages সংগ্রহের স্ন্যাপশট পুনরুদ্ধার করবেন। আপনি চ্যাটের শেষ 12টি বার্তা প্রদর্শন করবেন যাতে লোড করার পরে খুব দীর্ঘ ইতিহাস প্রদর্শন না হয়।

  1. src/app/services/chat.service.ts ফাইলে ফিরে যান।
  2. loadMessages ফাংশন খুঁজুন।
  3. নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

ডাটাবেসের বার্তাগুলি শোনার জন্য, আপনি collection ফাংশনটি ব্যবহার করে কোন সংগ্রহে একটি ক্যোয়ারী তৈরি করেন যেটি আপনি শুনতে চান তা নির্দিষ্ট করতে৷ উপরের কোডে, আপনি messages মধ্যে পরিবর্তনগুলি শুনছেন৷ সংগ্রহ, যেখানে চ্যাট বার্তা সংরক্ষণ করা হয়। আপনি limit(12) ব্যবহার করে শুধুমাত্র শেষ 12টি বার্তা শুনে এবং 12টি নতুন বার্তা পেতে orderBy('timestamp', 'desc') ব্যবহার করে তারিখ অনুসারে বার্তাগুলি অর্ডার করার মাধ্যমে একটি সীমা প্রয়োগ করছেন৷

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

সিঙ্ক্রোনাইজিং বার্তা পরীক্ষা করুন

  1. যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, তাহলে ব্রাউজারে আপনার অ্যাপ রিফ্রেশ করুন। অন্যথায়, firebase emulators:start http://localhost:5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে স্টার্ট করুন এবং তারপর আপনার ব্রাউজারে খুলুন।
  2. ডাটাবেসে আপনার তৈরি করা বার্তাগুলি FriendlyChat UI-তে প্রদর্শিত হওয়া উচিত (নীচে দেখুন)। নতুন বার্তা লিখতে নির্দ্বিধায়; তারা অবিলম্বে উপস্থিত করা উচিত.
  3. (ঐচ্ছিক) আপনি এমুলেটর স্যুটের Firestore বিভাগে সরাসরি ম্যানুয়ালি মুছে ফেলা, পরিবর্তন বা নতুন বার্তা যোগ করার চেষ্টা করতে পারেন; কোনো পরিবর্তন UI এ প্রতিফলিত হওয়া উচিত।

অভিনন্দন! আপনি আপনার অ্যাপে ক্লাউড ফায়ারস্টোর ডকুমেন্ট পড়ছেন!

angularfire-2.png

11. ছবি পাঠান

আপনি এখন একটি বৈশিষ্ট্য যোগ করবেন যা ছবি শেয়ার করে।

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

ক্লাউড স্টোরেজে ছবি সংরক্ষণ করুন

এই কোডল্যাবের জন্য, আপনি ইতিমধ্যে আপনার জন্য একটি বোতাম যোগ করেছেন যা একটি ফাইল পিকার ডায়ালগ ট্রিগার করে। একটি ফাইল নির্বাচন করার পরে, saveImageMessage ফাংশন বলা হয়, এবং আপনি নির্বাচিত ফাইলের একটি রেফারেন্স পেতে পারেন। saveImageMessage ফাংশন নিম্নলিখিতগুলি সম্পন্ন করে:

  1. চ্যাট ফিডে একটি "প্লেসহোল্ডার" চ্যাট বার্তা তৈরি করে, যাতে ব্যবহারকারীরা ছবি আপলোড করার সময় "লোড হচ্ছে" অ্যানিমেশন দেখতে পান।
  2. এই পাথে ক্লাউড স্টোরেজে ইমেজ ফাইল আপলোড করে: /<uid>/<file_name>
  3. চিত্র ফাইলের জন্য একটি সর্বজনীনভাবে পাঠযোগ্য URL তৈরি করে।
  4. অস্থায়ী লোডিং চিত্রের পরিবর্তে নতুন আপলোড করা চিত্র ফাইলের URL দিয়ে চ্যাট বার্তা আপডেট করে।

এখন আপনি একটি চিত্র পাঠাতে কার্যকারিতা যোগ করবেন:

  1. src/index.js ফাইলে ফিরে যান।
  2. saveImageMessage ফাংশন খুঁজুন।
  3. নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - You add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

ইমেজ পাঠানো পরীক্ষা

  1. যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, তাহলে ব্রাউজারে আপনার অ্যাপ রিফ্রেশ করুন। অন্যথায়, firebase emulators:start http://localhost:5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে স্টার্ট করুন এবং তারপর আপনার ব্রাউজারে খুলুন।
  2. লগ ইন করার পরে, নীচে বাম দিকে ইমেজ আপলোড বোতামে ক্লিক করুন angularfire-4.png এবং ফাইল পিকার ব্যবহার করে একটি ইমেজ ফাইল নির্বাচন করুন। আপনি যদি একটি ছবি খুঁজছেন, একটি কফি কাপের এই সুন্দর ছবি ব্যবহার করতে দ্বিধা বোধ করুন৷
  3. আপনার নির্বাচিত চিত্র সহ অ্যাপের UI-তে একটি নতুন বার্তা উপস্থিত হওয়া উচিত: angularfire-2.png

আপনি সাইন ইন না থাকা অবস্থায় একটি ছবি যোগ করার চেষ্টা করলে, আপনি একটি ত্রুটি দেখতে পাবেন যা আপনাকে বলছে যে ছবিগুলি যোগ করতে আপনাকে অবশ্যই সাইন ইন করতে হবে৷

12. বিজ্ঞপ্তি দেখান

আপনি এখন ব্রাউজার বিজ্ঞপ্তির জন্য সমর্থন যোগ করবেন। চ্যাটে নতুন বার্তা পোস্ট করা হলে অ্যাপটি ব্যবহারকারীদের অবহিত করবে। Firebase ক্লাউড মেসেজিং (FCM) হল একটি ক্রস-প্ল্যাটফর্ম মেসেজিং সলিউশন যা আপনাকে বিনা খরচে নির্ভরযোগ্যভাবে বার্তা এবং বিজ্ঞপ্তি প্রদান করতে দেয়।

FCM পরিষেবা কর্মী যোগ করুন

ওয়েব অ্যাপটির একজন পরিষেবা কর্মী প্রয়োজন যে ওয়েব বিজ্ঞপ্তিগুলি গ্রহণ করবে এবং প্রদর্শন করবে৷

AngularFire যোগ করার সময় মেসেজিং প্রদানকারী ইতিমধ্যেই সেট আপ করা উচিত ছিল, নিশ্চিত করুন যে নিম্নলিখিত কোডটি /angularfire-start/src/app/app.module.ts এর আমদানি বিভাগে বিদ্যমান রয়েছে

provideMessaging(() => {
    return getMessaging();
}),

app/app.module.ts

পরিষেবা কর্মীকে কেবল Firebase ক্লাউড মেসেজিং SDK লোড এবং আরম্ভ করতে হবে, যা বিজ্ঞপ্তিগুলি প্রদর্শনের যত্ন নেবে৷

FCM ডিভাইস টোকেন পান

যখন একটি ডিভাইস বা ব্রাউজারে বিজ্ঞপ্তিগুলি সক্ষম করা হয়, তখন আপনাকে একটি ডিভাইস টোকেন দেওয়া হবে৷ এই ডিভাইস টোকেন যা আপনি একটি নির্দিষ্ট ডিভাইস বা নির্দিষ্ট ব্রাউজারে একটি বিজ্ঞপ্তি পাঠাতে ব্যবহার করেন।

ব্যবহারকারী সাইন ইন করলে, আপনি saveMessagingDeviceToken ফাংশন কল করুন। সেখানেই আপনি ব্রাউজার থেকে এফসিএম ডিভাইস টোকেন পাবেন এবং ক্লাউড ফায়ারস্টোরে সংরক্ষণ করবেন।

chat.service.ts

  1. saveMessagingDeviceToken ফাংশন খুঁজুন।
  2. নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
 
        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

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

বিজ্ঞপ্তি দেখানোর জন্য অনুমতির অনুরোধ করুন

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

8b9d0c66dc36153d.png

  1. src/app/services/chat.service.ts ফাইলে ফিরে যান।
  2. ফাংশনটি খুঁজুন requestNotificationsPermissions .
  3. নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

chat.service.ts

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

আপনার ডিভাইস টোকেন পান

  1. যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, তাহলে ব্রাউজারে আপনার অ্যাপ রিফ্রেশ করুন। অন্যথায়, firebase emulators:start http://localhost:5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে স্টার্ট করুন এবং তারপর আপনার ব্রাউজারে খুলুন।
  2. লগ ইন করার পরে, বিজ্ঞপ্তি অনুমতি ডায়ালগ উপস্থিত হওয়া উচিত: bd3454e6dbfb6723.png
  3. Allow এ ক্লিক করুন।
  4. আপনার ব্রাউজারের জাভাস্ক্রিপ্ট কনসোল খুলুন। আপনি নিম্নলিখিত বার্তাটি দেখতে পাবেন: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. আপনার ডিভাইস টোকেন কপি করুন. কোডল্যাবের পরবর্তী পর্যায়ে আপনার এটির প্রয়োজন হবে।

আপনার ডিভাইসে একটি বিজ্ঞপ্তি পাঠান

এখন আপনার ডিভাইস টোকেন আছে, আপনি একটি বিজ্ঞপ্তি পাঠাতে পারেন।

  1. Firebase কনসোলের ক্লাউড মেসেজিং ট্যাবটি খুলুন।
  2. "নতুন বিজ্ঞপ্তি" ক্লিক করুন
  3. একটি বিজ্ঞপ্তি শিরোনাম এবং বিজ্ঞপ্তি পাঠ্য লিখুন।
  4. স্ক্রিনের ডানদিকে, "একটি পরীক্ষা বার্তা পাঠান" ক্লিক করুন
  5. আপনার ব্রাউজারের জাভাস্ক্রিপ্ট কনসোল থেকে কপি করা ডিভাইস টোকেনটি লিখুন, তারপর প্লাস ("+") চিহ্নে ক্লিক করুন
  6. "পরীক্ষা" ক্লিক করুন

আপনার অ্যাপটি ফোরগ্রাউন্ডে থাকলে, আপনি JavaScript কনসোলে বিজ্ঞপ্তি দেখতে পাবেন।

যদি আপনার অ্যাপটি পটভূমিতে থাকে, তাহলে এই উদাহরণের মতো আপনার ব্রাউজারে একটি বিজ্ঞপ্তি উপস্থিত হওয়া উচিত:

de79e8638a45864c.png

13. ক্লাউড ফায়ারস্টোর নিরাপত্তা নিয়ম

ডাটাবেস নিরাপত্তা নিয়ম দেখুন

ক্লাউড ফায়ারস্টোর অ্যাক্সেসের অধিকার, নিরাপত্তা এবং ডেটা যাচাইকরণের জন্য একটি নির্দিষ্ট নিয়মের ভাষা ব্যবহার করে।

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

এই মুহূর্তে, আপনার ডিফল্ট নিয়মগুলি দেখতে হবে, যা ডেটাস্টোরে অ্যাক্সেস সীমাবদ্ধ করে না। এর মানে হল যে কোনও ব্যবহারকারী আপনার ডেটাস্টোরের যেকোনো সংগ্রহ পড়তে এবং লিখতে পারে।

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

আপনি নিম্নলিখিত নিয়মগুলি ব্যবহার করে জিনিসগুলিকে সীমাবদ্ধ করতে নিয়মগুলি আপডেট করবেন:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

নিরাপত্তা নিয়মগুলি আপনার এমুলেটর স্যুটে স্বয়ংক্রিয়ভাবে আপডেট হওয়া উচিত।

ক্লাউড স্টোরেজ নিরাপত্তা নিয়ম দেখুন

ফায়ারবেসের জন্য ক্লাউড স্টোরেজ অ্যাক্সেসের অধিকার, নিরাপত্তা এবং ডেটা যাচাইকরণের জন্য একটি নির্দিষ্ট নিয়মের ভাষা ব্যবহার করে।

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

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

আপনি নিম্নলিখিতগুলি করতে নিয়মগুলি আপডেট করবেন:

  • প্রতিটি ব্যবহারকারীকে শুধুমাত্র তাদের নিজস্ব নির্দিষ্ট ফোল্ডারে লিখতে অনুমতি দিন
  • ক্লাউড স্টোরেজ থেকে যে কাউকে পড়ার অনুমতি দিন
  • নিশ্চিত করুন যে আপলোড করা ফাইলগুলি ছবি
  • সর্বাধিক 5 MB পর্যন্ত আপলোড করা যেতে পারে এমন চিত্রগুলির আকার সীমাবদ্ধ করুন

এটি নিম্নলিখিত নিয়মগুলি ব্যবহার করে প্রয়োগ করা যেতে পারে:

স্টোরেজ.নিয়ম

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

14. Firebase হোস্টিং ব্যবহার করে আপনার অ্যাপ স্থাপন করুন

Firebase আপনার সম্পদ এবং ওয়েব অ্যাপ পরিবেশন করার জন্য একটি হোস্টিং পরিষেবা অফার করে। আপনি Firebase CLI ব্যবহার করে আপনার ফাইলগুলি Firebase হোস্টিং-এ স্থাপন করতে পারেন। স্থাপন করার আগে, আপনাকে আপনার firebase.json ফাইলে নির্দিষ্ট করতে হবে কোন স্থানীয় ফাইলগুলি স্থাপন করা উচিত। এই কোডল্যাবের জন্য, আপনি ইতিমধ্যেই আপনার জন্য এটি করেছেন কারণ এই কোডল্যাবের সময় আমাদের ফাইলগুলি পরিবেশন করার জন্য এই পদক্ষেপটি প্রয়োজন ছিল৷ হোস্টিং সেটিংস hosting বৈশিষ্ট্যের অধীনে নির্দিষ্ট করা হয়েছে:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

এই সেটিংস CLI কে বলে যে আপনি ./public ডিরেক্টরিতে সমস্ত ফাইল স্থাপন করতে চান ( "public": "./public" )।

  1. নিশ্চিত করুন যে আপনার কমান্ড লাইন আপনার অ্যাপের স্থানীয় angularfire-start ডিরেক্টরি অ্যাক্সেস করছে।
  2. নিম্নলিখিত কমান্ডটি চালিয়ে আপনার ফায়ারবেস প্রকল্পে আপনার ফাইলগুলি স্থাপন করুন:
ng deploy

তারপর Firebase বিকল্পটি নির্বাচন করুন এবং কমান্ড লাইনে প্রম্পটগুলি অনুসরণ করুন।

  1. কনসোল নিম্নলিখিত প্রদর্শন করা উচিত:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. আপনার নিজস্ব দুটি Firebase সাবডোমেনে Firebase হোস্টিং ব্যবহার করে একটি গ্লোবাল CDN-এ সম্পূর্ণরূপে হোস্ট করা আপনার ওয়েব অ্যাপটি দেখুন:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

বিকল্পভাবে, আপনি কমান্ড লাইনে firebase open hosting:site চালাতে পারেন।

ফায়ারবেস হোস্টিং কীভাবে কাজ করে সে সম্পর্কে আরও জানতে ডকুমেন্টেশন দেখুন।

আপনার স্থাপনার ইতিহাস, আপনার অ্যাপের পূর্ববর্তী সংস্করণে ফিরে যাওয়ার কার্যকারিতা এবং একটি কাস্টম ডোমেন সেট আপ করার জন্য কর্মপ্রবাহ সহ দরকারী হোস্টিং তথ্য এবং সরঞ্জামগুলি দেখতে আপনার প্রকল্পের Firebase কনসোল হোস্টিং বিভাগে যান৷

15. অভিনন্দন!

আপনি একটি রিয়েল-টাইম চ্যাট ওয়েব অ্যাপ্লিকেশন তৈরি করতে Firebase ব্যবহার করেছেন!

আপনি কভার করেছেন কি

  • ফায়ারবেস প্রমাণীকরণ
  • ক্লাউড ফায়ারস্টোর
  • ক্লাউড স্টোরেজের জন্য Firebase SDK
  • ফায়ারবেস ক্লাউড মেসেজিং
  • ফায়ারবেস পারফরম্যান্স মনিটরিং
  • ফায়ারবেস হোস্টিং

পরবর্তী পদক্ষেপ

আরও জানুন

16. [ঐচ্ছিক] অ্যাপ চেক দিয়ে প্রয়োগ করুন

ফায়ারবেস অ্যাপ চেক আপনার পরিষেবাগুলিকে অবাঞ্ছিত ট্র্যাফিক থেকে সুরক্ষিত করতে সাহায্য করে এবং আপনার ব্যাকএন্ডকে অপব্যবহার থেকে রক্ষা করতে সহায়তা করে। এই ধাপে, আপনি শংসাপত্রের বৈধতা যোগ করবেন এবং অ্যাপ চেক এবং reCAPTCHA এন্টারপ্রাইজের মাধ্যমে অননুমোদিত ক্লায়েন্টদের ব্লক করবেন।

প্রথমে, আপনাকে অ্যাপ চেক এবং রিক্যাপচা সক্ষম করতে হবে।

reCaptcha এন্টারপ্রাইজ সক্ষম করা হচ্ছে

  1. ক্লাউড কনসোলে, নিরাপত্তার অধীনে reCaptcha এন্টারপ্রাইজ খুঁজুন এবং নির্বাচন করুন।
  2. প্রম্পট হিসাবে পরিষেবাটি সক্ষম করুন এবং কী তৈরি করুন ক্লিক করুন।
  3. প্রম্পট হিসাবে একটি প্রদর্শন নাম ইনপুট করুন, এবং আপনার প্ল্যাটফর্মের ধরন হিসাবে ওয়েবসাইট নির্বাচন করুন।
  4. ডোমেন তালিকায় আপনার স্থাপন করা URL যোগ করুন এবং নিশ্চিত করুন যে "চেকবক্স চ্যালেঞ্জ ব্যবহার করুন" বিকল্পটি অনির্বাচিত ।
  5. কী তৈরি করুন ক্লিক করুন, এবং নিরাপদ রাখার জন্য তৈরি করা কীটি কোথাও সংরক্ষণ করুন। আপনি এই ধাপে পরে এটি প্রয়োজন হবে.

অ্যাপ চেক সক্ষম করা হচ্ছে

  1. Firebase কনসোলে, বাম প্যানেলে বিল্ড বিভাগটি সনাক্ত করুন।
  2. অ্যাপ চেক-এ ক্লিক করুন, তারপর অ্যাপ চেক- এ নেভিগেট করতে সাইন-ইন পদ্ধতি ট্যাবে ক্লিক করুন।
  3. রেজিস্টার ক্লিক করুন এবং অনুরোধ করা হলে আপনার reCaptcha এন্টারপ্রাইজ কী লিখুন, তারপর সংরক্ষণ করুন ক্লিক করুন।
  4. APIs ভিউতে, স্টোরেজ নির্বাচন করুন এবং প্রয়োগ করুন ক্লিক করুন। ক্লাউড ফায়ারস্টোরের জন্যও একই কাজ করুন।

অ্যাপ চেক এখন প্রয়োগ করা উচিত! আপনার অ্যাপ রিফ্রেশ করুন এবং চ্যাট মেসেজ দেখতে বা পাঠানোর চেষ্টা করুন। আপনি ত্রুটি বার্তা পেতে হবে:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

এর মানে হল অ্যাপ চেক ডিফল্টরূপে অবৈধ অনুরোধগুলিকে ব্লক করছে। এখন আপনার অ্যাপে বৈধতা যোগ করা যাক।

আপনার environment.ts ফাইলে নেভিগেট করুন এবং environment অবজেক্টে reCAPTCHAEnterpriseKey যোগ করুন।

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.appspot.com',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

আপনার reCaptcha এন্টারপ্রাইজ টোকেন দিয়ে key এর মান প্রতিস্থাপন করুন।

তারপর, app.module.ts ফাইলে নেভিগেট করুন এবং নিম্নলিখিত আমদানি যোগ করুন:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

একই app.module.ts ফাইলে, নিম্নলিখিত বৈশ্বিক পরিবর্তনশীল ঘোষণা যোগ করুন:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

আমদানিতে, ReCaptchaEnterpriseProvider এর সাথে অ্যাপ চেকের সূচনা যোগ করুন এবং টোকেনগুলিকে স্বয়ংক্রিয়-রিফ্রেশ করার অনুমতি দিতে isTokenAutoRefreshEnabled কে true সেট করুন।

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

স্থানীয় পরীক্ষার অনুমতি দিতে, স্বয়ং সেট করুন self.FIREBASE_APPCHECK_DEBUG_TOKEN true । আপনি যখন localhost আপনার অ্যাপটি রিফ্রেশ করবেন, তখন এটি কনসোলে একটি ডিবাগ টোকেন লগ করবে অনুরূপ:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

এখন, ফায়ারবেস কনসোলে অ্যাপ চেকের অ্যাপস ভিউতে যান।

ওভারফ্লো মেনুতে ক্লিক করুন এবং ডিবাগ টোকেন পরিচালনা করুন নির্বাচন করুন।

তারপরে, ডিবাগ টোকেন যোগ করুন ক্লিক করুন এবং অনুরোধ অনুযায়ী আপনার কনসোল থেকে ডিবাগ টোকেন পেস্ট করুন।

chat.service.ts ফাইলে নেভিগেট করুন এবং নিম্নলিখিত আমদানি যোগ করুন:

import { AppCheck } from '@angular/fire/app-check';

একই chat.service.ts](angularfire-start/src/app/services/chat.service.ts) ফাইলে, অন্যান্য ফায়ারবেস পরিষেবার পাশাপাশি অ্যাপ চেক ইনজেক্ট করুন।

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

অভিনন্দন! অ্যাপ চেক এখন আপনার অ্যাপে কাজ করা উচিত।