ফায়ারবেস ওয়েব কোডল্যাব

এই codelab, আপনি কীভাবে ব্যবহার করবেন তা জানতে পারবেন Firebase সহজে বাস্তবায়ন এবং Firebase পণ্য এবং পরিষেবার ব্যবহার করে একটি চ্যাট ক্লায়েন্ট মোতায়েন করার মাধ্যমে ওয়েব অ্যাপ্লিকেশন তৈরি করতে।

3b1284f5144b54f6.png

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

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

আপনার যা দরকার

  • আইডিই / পাঠ্য যেমন আপনার পছন্দের এডিটর, WebStorm , অ্যাটম , সাবলাইম বা বনাম কোড
  • প্যাকেজ ম্যানেজার এনপিএম , যা সাধারণত নোড.জেএস সহ আসে
  • একটি টার্মিনাল / কনসোল
  • আপনার পছন্দসই ব্রাউজার, যেমন ক্রোম
  • কোডল্যাবের নমুনা কোড (কোডটি কীভাবে পাবেন তার জন্য কোডবেলের পরবর্তী পদক্ষেপটি দেখুন))

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

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

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

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

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

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

  1. ফায়ারবেসে সাইন ইন করুন।
  2. ফায়ারবেস কনসোলে, প্রকল্প যুক্ত করুন ক্লিক করুন এবং তারপরে আপনার ফায়ারবেস প্রকল্পটির নাম বন্ধুত্বপূর্ণ করুন hat আপনার ফায়ারবেস প্রকল্পের জন্য প্রকল্পের আইডি মনে রাখবেন।
  3. এই প্রকল্পের জন্য গুগল অ্যানালিটিকগুলি আনচেক করুন
  4. প্রকল্প তৈরি করুন ক্লিক করুন

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

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

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

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

  1. ওয়েব আইকন ক্লিক করুন 58d6543a156e56f9.png একটি নতুন ফায়ারবেস ওয়েব অ্যাপ্লিকেশন তৈরি করতে।
  2. বন্ধুত্বপূর্ণ চ্যাট ডাকনাম দিয়ে অ্যাপটি নিবন্ধ করুন, তারপরে এই অ্যাপ্লিকেশনের জন্য ফায়ারবেস হোস্টিং সেটআপের পাশের বক্সটি চেক করুনঅ্যাপ্লিকেশন রেজিস্টার ক্লিক করুন
  3. অবশিষ্ট পদক্ষেপের মাধ্যমে ক্লিক করুন। আপনাকে এখনই নির্দেশাবলী অনুসরণ করার দরকার নেই; এগুলি এই কোডল্যাবের পরবর্তী ধাপগুলিতে আচ্ছাদিত হবে।

ea9ab0db531a104c.png

ফায়ারবেস প্রমাণীকরণের জন্য গুগল সাইন ইন সক্ষম করুন

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

আপনাকে গুগল সাইন ইন সক্ষম করতে হবে:

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

d89fb3873b5d36ae.png

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

ওয়েব অ্যাপ্লিকেশন চ্যাট বার্তাগুলি সংরক্ষণ করতে এবং নতুন চ্যাট বার্তাগুলি পাওয়ার জন্য ক্লাউড ফায়ারস্টোর ব্যবহার করে।

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

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

729991a081e7cd5.png

  1. স্টার্ট ইন টেস্ট মোড বিকল্পটি নির্বাচন করুন, তারপরে সুরক্ষা বিধি সম্পর্কে অস্বীকৃতি পড়ার পরে Next ক্লিক করুন।

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

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

ওয়েব অ্যাপ্লিকেশন স্টোরেজ আপলোড এবং ছবি ভাগ করতে ফায়ারবেসের জন্য ক্লাউড স্টোরেজ ব্যবহার করে।

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

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

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

  1. নিম্নলিখিত এনপিএম কমান্ডটি চালিয়ে সিএলআই ইনস্টল করুন:
02 বি 7580 এ 90
  1. নিম্নলিখিত কমান্ডটি চালিয়ে সিএলআই সঠিকভাবে ইনস্টল করা হয়েছে তা যাচাই করুন:
0d0eeeeeeee

নিশ্চিত করুন যে ফায়ারবেস সিএলআই এর সংস্করণটি v4.1.0 বা তার পরে আছে।

  1. নিম্নলিখিত কমান্ডটি চালিয়ে ফায়ারবেস সিএলআইকে অনুমোদন দিন:
firebase login

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

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

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

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

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

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

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

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

আপনার আপনার ফ্রেন্ডলিচ্যাট অ্যাপ্লিকেশনটির ইউআই দেখতে পাওয়া উচিত, যা (এখনও!) কার্যকর নয়:

4c23f9475228cef4.png

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

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

ফায়ারবেস এসডিকে আমদানি করুন

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

যেহেতু আমরা আমাদের অ্যাপ্লিকেশনটি পরিবেশন করতে ফায়ারবেস হোস্টিং ব্যবহার করছি, তাই আমরা ফাইলের সূচক index.html এ থাকা স্থানীয় ইউআরএলগুলি (আপনার web-start/public/ ডিরেক্টরিতে অবস্থিত) আমদানি করতে যাচ্ছি। এই codelab জন্য, আমরা ইতিমধ্যে নীচে আপনার জন্য নিম্নলিখিত পংক্তিগুলি যোগ করেছি index.html ফাইল, কিন্তু আপনি চেক যে তারা আছে দ্বিগুণ করতে পারেন।

index.html

<script src="/__/firebase/8.6.7/firebase-app.js"></script>
<script src="/__/firebase/8.6.7/firebase-auth.js"></script>
<script src="/__/firebase/8.6.7/firebase-storage.js"></script>
<script src="/__/firebase/8.6.7/firebase-messaging.js"></script>
<script src="/__/firebase/8.6.7/firebase-firestore.js"></script>
<script src="/__/firebase/8.6.7/firebase-performance.js"></script>

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

ফায়ারবেস কনফিগার করুন

আমাদের কোন ফায়ারবেস প্রকল্পটি ব্যবহার করা হচ্ছে তা জানাতে আমাদের ফায়ারবেস এসডিকেও কনফিগার করতে হবে। যেহেতু আমরা ফায়ারবেস হোস্টিং ব্যবহার করছি, আপনি একটি বিশেষ স্ক্রিপ্ট আমদানি করতে পারেন যা আপনার জন্য এই কনফিগারেশনটি করবে। আবার, এই কোডল্যাবের জন্য, আমরা ইতিমধ্যে আপনার জন্য public/index.html ফাইলের নীচে নীচের লাইনটি যুক্ত করেছি, তবে এটি সেখানে রয়েছে তা ডাবল-পরীক্ষা করে দেখুন।

index.html

<script src="/__/firebase/init.js"></script>

এই স্ক্রিপ্টটিতে ফায়ারবেস প্রকল্পের উপর ভিত্তি করে আপনার ফায়ারবেস প্রকল্প কনফিগারেশন রয়েছে যা আপনি আগে নির্দিষ্ট করেছেন firebase use --add সময় specified

আপনার প্রকল্পের কনফিগারেশনটি কেমন দেখাচ্ছে তা দেখতে init.js ফাইলটি নির্দ্বিধায় নির্দ্বিধায় init.js । এটি করতে, আপনার ব্রাউজারে http: // লোকালহোস্ট: 5000 / __ / ফায়ারবেস / init.js খুলুন । নীচের মতো দেখতে এমন কিছু আপনার দেখা উচিত:

/__/firebase/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

ফায়ারবেস এসডিকে এখন ব্যবহারের জন্য প্রস্তুত হওয়া উচিত, যেহেতু এটি সূচক। index.html আমদানি করা এবং আরম্ভ করা হয়েছে। আমরা এখন ফায়ারবেস প্রমাণীকরণ ব্যবহার করে ব্যবহারকারীর সাইন ইন প্রয়োগ করতে যাচ্ছি।

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

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

  1. web-start ডিরেক্টরিতে, সাব web-start ডাইরেক্টরিতে public/scripts/ খুলুন main.js
  2. ফাংশন সাইন signIn
  3. নিম্নলিখিত কোডটি দিয়ে পুরো ফাংশনটি প্রতিস্থাপন করুন।

main.js

09 বি 8 বি 61440

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

  1. public/scripts/main.js ফাইলটিতে ফিরে যান।
  2. ফাংশন signOut
  3. নিম্নলিখিত কোডটি দিয়ে পুরো ফাংশনটি প্রতিস্থাপন করুন।

main.js

// Signs-out of Friendly Chat.
function signOut() {
  // Sign out of Firebase.
  firebase.auth().signOut();
}

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

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

  1. public/scripts/main.js ফাইলটিতে ফিরে যান।
  2. initFirebaseAuth ফাংশনটি initFirebaseAuth
  3. নিম্নলিখিত কোডটি দিয়ে পুরো ফাংশনটি প্রতিস্থাপন করুন।

main.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(authStateObserver);
}

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

সাইন ইন থাকা ব্যবহারকারীর তথ্য প্রদর্শন করুন

আমরা আমাদের অ্যাপের উপরের বারে সাইন ইন থাকা ব্যবহারকারীর প্রোফাইল চিত্র এবং ব্যবহারকারীর নাম প্রদর্শন করতে চাই। ফায়ারবেসে, সাইন ইন থাকা ব্যবহারকারীর ডেটা সর্বদা firebase.auth().currentUser অবজেক্টে উপলব্ধ। এর আগে, যখন ব্যবহারকারী সাইন ইন করে তখন আমাদের ইউআই সেই অনুযায়ী আপডেট হয় তখন আমরা ট্রিগার করতে authStateObserver ফাংশন সেট আপ করি। এটি ট্রিগার করা হলে getProfilePicUrl এবং getUserName কল করবে।

  1. public/scripts/main.js ফাইলটিতে ফিরে যান।
  2. getProfilePicUrl এবং getUserName ফাংশনগুলি getUserName
  3. উভয় ফাংশন নিম্নলিখিত কোডের সাথে প্রতিস্থাপন করুন।

main.js

// Returns the signed-in user's profile pic URL.
function getProfilePicUrl() {
  return firebase.auth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return firebase.auth().currentUser.displayName;
}

ব্যবহারকারী সাইন ইন না থাকা অবস্থায় ব্যবহারকারী বার্তা প্রেরণের চেষ্টা করলে আমরা একটি ত্রুটি বার্তা প্রদর্শন করি ((আপনি এটি চেষ্টা করতে পারেন, যদিও!) সুতরাং, ব্যবহারকারীটি আসলে সাইন ইন হয়েছে কিনা তা আমাদের সনাক্ত করা দরকার।

  1. public/scripts/main.js ফাইলটিতে ফিরে যান।
  2. ব্যবহারকারীর সাইন isUserSignedIn
  3. নিম্নলিখিত কোডটি দিয়ে পুরো ফাংশনটি প্রতিস্থাপন করুন।

main.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!firebase.auth().currentUser;
}

অ্যাপটিতে সাইন ইন পরীক্ষা করুন

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

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

তথ্য মডেল

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

688d7bc5fb662b57.png

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

ব্যবহারকারীদের দ্বারা লিখিত চ্যাট বার্তাগুলি সঞ্চয় করতে আমরা ক্লাউড ফায়ারস্টোর ব্যবহার করব।

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

  1. public/scripts/main.js ফাইলটিতে ফিরে যান।
  2. saveMessage ফাংশনটি saveMessage
  3. নিম্নলিখিত কোডটি দিয়ে পুরো ফাংশনটি প্রতিস্থাপন করুন।

main.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to database', error);
  });
}

বার্তা প্রেরণ পরীক্ষা

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

6812efe7da395692.png

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

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

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

  1. public/scripts/main.js ফাইলটিতে ফিরে যান।
  2. ফাংশন loadMessages
  3. নিম্নলিখিত কোডটি দিয়ে পুরো ফাংশনটি প্রতিস্থাপন করুন।

main.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                       message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

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

.onSnapshot একটি প্যারামিটার লাগে: একটি কলব্যাক ফাংশন। ক্যোরির সাথে মেলে এমন নথিতে কোনও পরিবর্তন হলে কলব্যাক ফাংশনটি ট্রিগার করা হবে। এটি কোনও বার্তা মুছে ফেলা, সংশোধন করা, বা যুক্ত হয়ে গেলে হতে পারে। আপনি ক্লাউড ফায়ার স্টোর ডকুমেন্টেশনে এটি সম্পর্কে আরও পড়তে পারেন।

বার্তাগুলি সিঙ্ক্রোনাইজ করছে

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

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

2168dec79b573d07.png

আমরা এখন একটি বৈশিষ্ট্য যুক্ত করব যা ছবিগুলি ভাগ করে নেবে।

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

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

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

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

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

  1. public/scripts/main.js ফাইলটিতে ফিরে যান।
  2. saveImageMessage ফাংশনটি saveImageMessage
  3. নিম্নলিখিত কোডটি দিয়ে পুরো ফাংশনটি প্রতিস্থাপন করুন।

main.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  });
}

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

  1. যদি আপনার অ্যাপ্লিকেশনটি এখনও পরিবেশিত হচ্ছে তবে ব্রাউজারে আপনার অ্যাপটি রিফ্রেশ করুন। অন্যথায়, http: // লোকালহস্ট: 5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে firebase serve --only hosting করুন এবং তারপরে এটি আপনার ব্রাউজারে খুলুন।
  2. সাইন ইন করার পরে, চিত্র আপলোড বোতামটি ক্লিক করুন 13734cb66773e5a3.png এবং ফাইল চয়নকারী ব্যবহার করে একটি চিত্র ফাইল নির্বাচন করুন। আপনি যদি কোনও চিত্র খুঁজছেন তবে একটি কফি কাপের দুর্দান্ত ছবিটি নির্দ্বিধায় ব্যবহার করুন।
  3. আপনার নির্বাচিত চিত্র সহ অ্যাপের ইউআইতে একটি নতুন বার্তা উপস্থিত হওয়া উচিত: 3b1284f5144b54f6.png

সাইন ইন না করে আপনি যদি কোনও চিত্র যুক্ত করার চেষ্টা করেন তবে আপনাকে একটি টোস্ট বিজ্ঞপ্তি দেখতে হবে যাতে আপনাকে চিত্র যুক্ত করতে সাইন ইন করতে হবে।

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

জিসিএম প্রেরক আইডি শ্বেত তালিকাভুক্ত করুন

ওয়েব অ্যাপ্লিকেশনটিতে আপনাকে gcm_sender_id নির্দিষ্ট করতে হবে যা একটি হার্ড-কোডেড মান যা এফসিএম এই অ্যাপ্লিকেশনটিতে বার্তা প্রেরণে অনুমোদিত বলে ইঙ্গিত করে।

  1. web-start ডিরেক্টরি থেকে, public ডিরেক্টরিতে, খুলুন manifest.json
  2. নীচে দেখানো ঠিক ঠিক মতো gcm_sender_id বৈশিষ্ট্যে ব্রাউজার প্রেরক আইডি মান যুক্ত করুন। নীচে প্রদর্শিত যা থেকে মান পরিবর্তন করবেন না।

manifest.json

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

এফসিএম পরিষেবা কর্মী যুক্ত করুন

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

  1. web-start ডিরেক্টরি থেকে, public ডিরেক্টরিতে, firebase-messaging-sw.js নামে একটি নতুন ফাইল তৈরি করুন।
  2. নিম্নলিখিত নতুন ফাইলে নিম্নলিখিত সামগ্রী যুক্ত করুন Add

ফায়ারবেস-মেসেজিং-sw.js

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

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

এফসিএম ডিভাইস টোকেন পান

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

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

  1. public/scripts/main.js ফাইলটিতে ফিরে যান।
  2. saveMessagingDeviceToken ফাংশনটি saveMessagingDeviceToken
  3. নিম্নলিখিত কোডটি দিয়ে পুরো ফাংশনটি প্রতিস্থাপন করুন।

main.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(error){
    console.error('Unable to get messaging token.', error);
  });
}

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

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

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

8b9d0c66dc36153d.png

  1. public/scripts/main.js ফাইলটিতে ফিরে যান।
  2. ফাংশন requestNotificationsPermissions
  3. নিম্নলিখিত কোডটি দিয়ে পুরো ফাংশনটি প্রতিস্থাপন করুন।

main.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

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

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

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

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

  1. ডিভাইস টোকেন ছাড়াও, আপনার ফায়ারবেস অ্যাপের সার্ভার কীও দরকার need এই কীটি পেতে, ফায়ারবেস কনসোল> প্রকল্প সেটিংস> ক্লাউড মেসেজিং এ যান , তারপরে সার্ভার কীটি অনুলিপি করুন।

একটি বিজ্ঞপ্তি পাঠাতে, আপনাকে নিম্নলিখিত HTTP অনুরোধটি প্রেরণ করতে হবে:

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}
  1. কমান্ড লাইনে, নিম্নলিখিত সিআরএল কমান্ডটি চালান।
curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

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

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

de79e8638a45864c.png

ডাটাবেস সুরক্ষা বিধি দেখুন

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

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

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

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

ডেটাবেস সুরক্ষা বিধি আপডেট করুন

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

ফায়ারবেস কনসোলে সুরক্ষা বিধি আপডেট করতে:

  1. বাম প্যানেল থেকে ডাটাবেস বিভাগে যান, এবং তারপরে নিয়ম ট্যাবটি ক্লিক করুন।
  2. উপরে প্রদর্শিত নিয়মগুলি ইতিমধ্যে কনসোলে থাকা ডিফল্ট নিয়মগুলি প্রতিস্থাপন করুন।
  3. প্রকাশ ক্লিক করুন

স্থানীয় ফাইল থেকে সুরক্ষা বিধিগুলি আপডেট করতে:

  1. web-start ডিরেক্টরি থেকে, firestore.rules খুলুন।
  2. উপরে প্রদর্শিত বিধি দ্বারা ফাইলে থাকা ডিফল্ট নিয়মগুলি প্রতিস্থাপন করুন।
  3. web-start ডিরেক্টরি থেকে, firebase.json খুলুন।
  4. যোগ firestore.rules নির্দেশিত আরোপ firestore.rules , নিচের দেখানো হয়েছে। ( hosting বৈশিষ্ট্যটি ফাইলে থাকা উচিত))

ফায়ারবেস.জসন

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. নিম্নলিখিত কমান্ডটি চালিয়ে ফায়ারবেস সিএলআই ব্যবহার করে সুরক্ষা বিধিগুলি প্রয়োগ করুন:
firebase deploy --only firestore
  1. আপনার কমান্ড লাইনে নিম্নলিখিত প্রতিক্রিয়া প্রদর্শন করা উচিত:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

ক্লাউড স্টোরেজ সুরক্ষা বিধিগুলি দেখুন

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

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

rules_version = '2';

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

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

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

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

store.rules

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

ক্লাউড স্টোরেজ সুরক্ষা বিধি আপডেট করুন

আপনার স্টোরেজ সুরক্ষা নিয়মগুলি সম্পাদনা করার দুটি উপায় রয়েছে: ফায়ারবেস কনসোল বা ফায়ারবেস সিএলআই ব্যবহার করে একটি স্থানীয় নিয়ম ফাইল থেকে।

ফায়ারবেস কনসোলে সুরক্ষা বিধি আপডেট করতে:

  1. বাম প্যানেল থেকে স্টোরেজ বিভাগে যান এবং তারপরে নিয়ম ট্যাবটি ক্লিক করুন।
  2. উপরে প্রদর্শিত নিয়মগুলি ইতিমধ্যে কনসোলে থাকা ডিফল্ট নিয়মটি প্রতিস্থাপন করুন।
  3. প্রকাশ ক্লিক করুন

স্থানীয় ফাইল থেকে সুরক্ষা বিধিগুলি আপডেট করতে:

  1. web-start ডিরেক্টরি থেকে, storage.rules খুলুন।
  2. উপরে প্রদর্শিত বিধি দ্বারা ফাইলে থাকা ডিফল্ট নিয়মগুলি প্রতিস্থাপন করুন।
  3. web-start ডিরেক্টরি থেকে, firebase.json খুলুন।
  4. নীচে দেখানো হয়েছে বলে storage.rules ফাইলের দিকে নির্দেশ করে storage.rules অ্যাট্রিবিউট যুক্ত করুন। ( hosting এবং database বৈশিষ্ট্যটি ফাইলে থাকা উচিত))

ফায়ারবেস.জসন

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. নিম্নলিখিত কমান্ডটি চালিয়ে ফায়ারবেস সিএলআই ব্যবহার করে সুরক্ষা বিধিগুলি প্রয়োগ করুন:
firebase deploy --only storage
  1. আপনার কমান্ড লাইনে নিম্নলিখিত প্রতিক্রিয়া প্রদর্শন করা উচিত:
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

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

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

স্বয়ংক্রিয় ট্রেস

যেহেতু আমরা init.js আগের পদক্ষেপে init.js firebase-performance.js এবং init.js অন্তর্ভুক্ত করেছি, ব্যবহারকারীরা যখন আপনার মোতায়েন করা সাইটটিতে যান তখন আপনার জন্য স্বয়ংক্রিয়ভাবে পৃষ্ঠা লোড এবং নেটওয়ার্ক রিকোয়েস্ট মেট্রিকগুলি সংগ্রহ করতে পারফরম্যান্স মনিটরিংকে আমাদের বলতে একটি লাইন যুক্ত করা দরকার!

  1. ইন public/scripts/main.js , বিদ্যমান নিচের লাইন যোগ TODO কর্মক্ষমতা নিরীক্ষণের আরম্ভ করতে।

main.js

// TODO: Enable Firebase Performance Monitoring.
firebase.performance();

প্রথম ইনপুট বিলম্ব পরিমাপ করুন (alচ্ছিক)

প্রথম ইনপুট বিলম্ব কার্যকর যেহেতু ব্রাউজার কোনও ব্যবহারকারীর মিথস্ক্রিয়াকে প্রতিক্রিয়া জানায় আপনার ব্যবহারকারীদের আপনার অ্যাপের প্রতিক্রিয়াশীলতা সম্পর্কে তাদের প্রথম প্রভাব দেয়।

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

আপনি যদি প্রথম ইনপুট বিলম্ব পরিমাপ করতে চান তবে আপনাকে নীচের কোডটি সরাসরি অন্তর্ভুক্ত করতে হবে।

  1. public/index.html খুলুন।
  2. নিম্নলিখিত লাইনে script ট্যাগটি মন্তব্য করুন।

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

প্রথম ইনপুট বিলম্ব পলফিল সম্পর্কে আরও পড়তে, ডকুমেন্টেশনটি একবার দেখুন।

পারফরম্যান্স ডেটা দেখুন

যেহেতু আপনি এখনও আপনার সাইটটি মোতায়েন করেন নি (আপনি এটি পরবর্তী পদক্ষেপে স্থাপন করবেন), এখানে একটি পৃষ্ঠা শৃঙ্খলে পৃষ্ঠার লোড সম্পাদন সম্পর্কে মেট্রিকগুলি দেখানো হবে যা আপনি ফায়ারবেস কনসোলে দেখবেন যে ব্যবহারকারীরা আপনার মোতায়েন করা সাইটের সাথে কথা বলার 30 মিনিটের মধ্যেই থাকবে? :

29389131150f33d7.png

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

আপনি নিজের অ্যাপ্লিকেশনের নির্দিষ্ট দিকগুলি পরিমাপ করতে কাস্টম ট্রেস, মেট্রিক এবং বৈশিষ্ট্যগুলিও সেট আপ করতে পারেন। কাস্টম ট্রেস এবং ম্যাট্রিক্স এবং কাস্টম বৈশিষ্ট্যগুলি সম্পর্কে আরও জানতে ডকুমেন্টেশন দেখুন।

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

ফায়ারবেস.জসন

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

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

  1. আপনার কমান্ড লাইনটি আপনার অ্যাপ্লিকেশানের স্থানীয় web-start ডিরেক্টরিতে অ্যাক্সেস করছে তা নিশ্চিত করুন।
  2. Deploy your files to your Firebase project by running the following command:
firebase deploy --except functions
  1. The console should display the following:
=== 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. Visit your web app that's now fully hosted using Firebase Hosting at two of your very own Firebase subdomains:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app .

Alternatively, you can run firebase open hosting:site in the command line.

Visit the documentation to learn more about how Firebase Hosting works .

Go to your project's Firebase console Hosting section to view useful hosting information and tools, including the history of your deploys, the functionality to roll back to previous versions of your app, and the workflow to set up a custom domain.

You've used Firebase to build a real-time chat web application!

What we've covered

  • Firebase Authentication
  • Cloud Firestore
  • Firebase SDK for Cloud Storage
  • Firebase Cloud Messaging
  • ফায়ারবেস পারফরম্যান্স মনিটরিং
  • Firebase Hosting

Next steps

Learn more