Firebase এক্সটেনশনের সাথে আপনার ওয়েব অ্যাপে দ্রুত নতুন কার্যকারিতা যোগ করুন

1। পরিচিতি

গোল

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

আপনি কি নির্মাণ করবেন

এই কোডল্যাবে, আপনি একটি অনলাইন মার্কেটপ্লেস ওয়েব অ্যাপে নিম্নলিখিত বৈশিষ্ট্যগুলি যোগ করবেন:

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

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

• সাধারণ ব্যবহারের ক্ষেত্রে এক্সটেনশনগুলি কীভাবে আবিষ্কার করবেন
• কিভাবে আপনার প্রকল্পে একটি এক্সটেনশন ইনস্টল এবং কনফিগার করবেন
• আপনার প্রকল্পে এক্সটেনশনগুলি কীভাবে বজায় রাখা যায় (মনিটর, আপডেট এবং আনইনস্টল)

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

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

• একটি আধুনিক ওয়েব ব্রাউজার ইনস্টল করা একটি কম্পিউটার (Chrome প্রস্তাবিত)
• একটি Google অ্যাকাউন্ট

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

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

1. Firebase কনসোলে , প্রকল্প যোগ করুন ক্লিক করুন, এবং Firebase প্রকল্পের নাম দিন FriendlyMarket ।
2. যদিও প্রকল্প তৈরির বিকল্পগুলিতে ক্লিক করুন। Firebase শর্তাবলী স্বীকার করুন. Google Analytics সেট আপ করা এড়িয়ে যান, কারণ আপনি এই অ্যাপে Analytics ব্যবহার করবেন না।
3. প্রজেক্টের প্রভিশন হওয়া পর্যন্ত অপেক্ষা করুন এবং তারপর Continue এ ক্লিক করুন।

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

• আপনার ব্যবহারকারীদের সহজেই সনাক্ত করতে Firebase প্রমাণীকরণ
• ফায়ারবেস রিয়েলটাইম ডেটাবেস ক্লাউডে স্ট্রাকচার্ড ডেটা সংরক্ষণ করতে এবং ডেটা আপডেট হলে তাত্ক্ষণিক বিজ্ঞপ্তি পান
• ক্লাউডে ছবি সংরক্ষণ করতে Firebase-এর জন্য ক্লাউড স্টোরেজ

আপনি এখন Firebase কনসোল ব্যবহার করে সেই Firebase পণ্যগুলিকে সক্ষম এবং কনফিগার করবেন৷

ইমেল লগইন সক্ষম করুন

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

1. Firebase কনসোলে, বাম প্যানেলে বিকাশে ক্লিক করুন।
2. প্রমাণীকরণ ক্লিক করুন, এবং তারপর সাইন-ইন পদ্ধতি ট্যাবে ক্লিক করুন (বা সরাসরি সাইন-ইন পদ্ধতি ট্যাবে যেতে এখানে ক্লিক করুন )।
3. সাইন-ইন প্রদানকারীর তালিকায় ইমেল/পাসওয়ার্ডে ক্লিক করুন, সক্ষম সুইচটি অন অবস্থানে সেট করুন এবং তারপর সংরক্ষণ করুন ক্লিক করুন।

রিয়েলটাইম ডেটাবেস সক্ষম করুন

অ্যাপটি বিক্রির জন্য আইটেম সংরক্ষণ করতে Firebase রিয়েলটাইম ডেটাবেস ব্যবহার করে।

1. ফায়ারবেস কনসোলের বাম প্যানেলের বিকাশ বিভাগে, ডেটাবেস ক্লিক করুন।
2. ক্লাউড ফায়ারস্টোর ফলকে পৃষ্ঠাটি নীচে স্ক্রোল করুন এবং রিয়েলটাইম ডেটাবেস ফলকে ডেটাবেস তৈরি করুন ক্লিক করুন।

3. লকড মোডে স্টার্ট নির্বাচন করুন এবং তারপর সক্ষম করুন ক্লিক করুন।

নিরাপত্তা নিয়ম সেট করুন

এখন, আপনি এই অ্যাপের জন্য প্রয়োজনীয় নিরাপত্তা নিয়ম সেট করবেন। আপনার অ্যাপকে সুরক্ষিত করতে সাহায্য করার জন্য এই কয়েকটি মৌলিক উদাহরণ নিয়ম। এই নিয়মগুলি যে কেউ বিক্রয়ের জন্য আইটেমগুলি দেখতে দেয়, কিন্তু এই নিয়মগুলি শুধুমাত্র সাইন-ইন করা ব্যবহারকারীদের অন্যান্য পঠন এবং লেখাগুলি সম্পাদন করার অনুমতি দেয়৷ এই নিয়মের সুনির্দিষ্ট বিষয়ে চিন্তা করবেন না; আপনি শুধু কপি এবং আপনার অ্যাপ্লিকেশন পেতে পেস্ট করতে যাচ্ছেন.

1. রিয়েলটাইম ডেটাবেস ড্যাশবোর্ডের শীর্ষে, নিয়ম ট্যাবে ক্লিক করুন।

2. নিয়ম ট্যাবের নিয়ম ক্ষেত্রে নিচের নিয়মটি কপি করে পেস্ট করুন:

{
  "rules": {
    ".read": false,
    ".write": false,
      "drafts": {
        ".indexOn": "seller",
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
    "sellers": {
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
      "forsale": {
        ".read": true,
        ".write": "auth.uid !== null"
      }
  }
}

3. প্রকাশ করুন ক্লিক করুন.

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

অ্যাপটি বিক্রির জন্য আইটেমগুলির ছবি সংরক্ষণ করতে Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করে।

1. Firebase কনসোলের বাম প্যানেলের বিকাশ বিভাগে, স্টোরেজ ক্লিক করুন।
2. শুরু করুন ক্লিক করুন।

3. আপনার ডিফল্ট স্টোরেজ বালতি তৈরি করার জন্য ডিফল্টগুলি গ্রহণ করুন ( পরবর্তীতে ক্লিক করুন, ডিফল্ট অবস্থানটি রাখুন এবং সম্পন্ন ক্লিক করুন)।

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

1. স্টোরেজ ড্যাশবোর্ডের উপরে, নিয়ম ট্যাবে ক্লিক করুন।

2. নিয়ম ট্যাবের নিয়ম ক্ষেত্রে নিচের নিয়মটি কপি করে পেস্ট করুন:

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

3. প্রকাশ করুন ক্লিক করুন.

3. নমুনা অ্যাপ চালান

StackBlitz প্রজেক্ট ফোর্ক করুন

এই কোডল্যাবে, আপনি StackBlitz ব্যবহার করে একটি অ্যাপ তৈরি এবং স্থাপন করেন, একটি অনলাইন সম্পাদক যেটিতে একাধিক ফায়ারবেস ওয়ার্কফ্লো সমন্বিত রয়েছে। Stackblitz এর জন্য কোন সফ্টওয়্যার ইনস্টলেশন বা বিশেষ StackBlitz অ্যাকাউন্টের প্রয়োজন নেই।

StackBlitz আপনাকে অন্যদের সাথে প্রকল্প শেয়ার করতে দেয়। আপনার StackBlitz প্রোজেক্ট URL আছে এমন অন্যান্য লোকেরা আপনার কোড দেখতে এবং আপনার প্রোজেক্টকে ফর্ক করতে পারে, কিন্তু তারা আপনার StackBlitz প্রোজেক্ট এডিট করতে পারে না।

1. প্রারম্ভিক কোডের জন্য এই URL এ যান: https://stackblitz.com/edit/friendlymarket-codelab ।
2. StackBlitz পৃষ্ঠার শীর্ষে, Fork-এ ক্লিক করুন।

আপনার কাছে এখন আপনার নিজের স্ট্যাকব্লিটজ প্রকল্প হিসাবে প্রারম্ভিক কোডের একটি অনুলিপি রয়েছে। যেহেতু আপনি সাইন ইন করেননি, আপনার "অ্যাকাউন্ট" বলা হয় @anonymous , কিন্তু এটা ঠিক আছে। একটি অনন্য URL সহ প্রকল্পটির একটি অনন্য নাম রয়েছে৷ আপনার সমস্ত ফাইল এবং পরিবর্তনগুলি এই StackBlitz প্রকল্পে সংরক্ষিত হয়।

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

1. StackBlitz-এ, আপনার src/firebase-config.js ফাইলটি দেখুন। এখানে আপনি Firebase কনফিগারেশন অবজেক্ট যোগ করবেন।
2. Firebase কনসোলে ফিরে, উপরের বাম দিকে প্রজেক্ট ওভারভিউ- এ ক্লিক করে আপনার প্রকল্পের ওভারভিউ পৃষ্ঠায় নেভিগেট করুন।
3. আপনার প্রকল্পের ওভারভিউ পৃষ্ঠার কেন্দ্রে, ওয়েব আইকনে ক্লিক করুন একটি নতুন ফায়ারবেস ওয়েব অ্যাপ তৈরি করতে।
4. FriendlyMarket Codelab ডাকনাম দিয়ে অ্যাপটি নিবন্ধন করুন।
5. এই কোডল্যাবের জন্য, এই অ্যাপের জন্য Firebase হোস্টিং সেট আপ করুন এর পাশের বাক্সে টিক চিহ্ন দেবেন না । আপনি পরিবর্তে StackBlitz পূর্বরূপ ফলক ব্যবহার করতে যাচ্ছেন.
6. রেজিস্টার অ্যাপে ক্লিক করুন।
7. আপনার ক্লিপবোর্ডে আপনার অ্যাপের Firebase কনফিগারেশন অবজেক্ট কপি করুন। <script> ট্যাগ কপি করবেন না। দ্রষ্টব্য: আপনি যদি পরে কনফিগারেশন খুঁজে পেতে চান তবে এখানে নির্দেশাবলী অনুসরণ করুন।

8. কনসোল করতে অবিরত ক্লিক করুন।

আপনার অ্যাপে আপনার প্রকল্পের কনফিগারেশন যোগ করুন:

1. StackBlitz এ ফিরে যান, src/firebase-config.js ফাইলে যান।
2. ফাইলটিতে আপনার কনফিগারেশন স্নিপেট পেস্ট করুন। আপনি করার পরে, এটি এইরকম হওয়া উচিত (কিন্তু কনফিগারেশন অবজেক্টে আপনার নিজস্ব প্রকল্পের মানগুলির সাথে):

এই অ্যাপ্লিকেশনের জন্য শুরু বিন্দু কি?

স্ট্যাকব্লিটজ স্ক্রিনের ডানদিকে ইন্টারেক্টিভ প্রিভিউটি দেখুন:

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

অ্যাপটি ব্যবহার করে দেখুন:

1. হোম স্ক্রিনের উপরের বোতামটি দিয়ে সাইন ইন করুন। আপনি একটি জাল ইমেল ঠিকানা, নাম, এবং পাসওয়ার্ড ব্যবহার করতে পারেন.
2. একটি তালিকা তৈরি করতে নীচের ডানদিকে কোণায় কিছু বিক্রি করুন বোতামে ক্লিক করুন৷
3. শিরোনামের জন্য, Xylophone লিখুন ।
4. মূল্য জিজ্ঞাসা করার জন্য, 50 লিখুন ।
5. আইটেম বর্ণনার জন্য, নিম্নলিখিত লিখুন: This high quality xylophone can be used to play music.
6. আপনার কম্পিউটারে একটি জাইলোফোনের এই ছবিটি ডাউনলোড করুন এবং এটি আপনার আইটেম বোতামের ছবি দিয়ে আপলোড করুন৷

file_download ইমেজ ডাউনলোড করুন

7. আপনি সমস্ত ক্ষেত্র পূরণ করার পরে এবং একটি ছবি আপলোড করার পরে, পোস্টে ক্লিক করুন।
8. আপনার নতুন তালিকা খুঁজুন. আপনার আইটেমটির বিস্তারিত স্ক্রীন দেখতে ক্লিক করুন এবং তারপর বিক্রেতার যোগাযোগের তথ্য প্যানেলটি প্রসারিত করুন।
9. Firebase কনসোলে ফিরে যান। ডাটাবেস ড্যাশবোর্ডে, আপনি এখন forsale নোডের অধীনে পোস্ট করা আইটেমের জন্য একটি এন্ট্রি দেখতে পাবেন। স্টোরেজ ড্যাশবোর্ডে, আপনি friendlymarket পথে আপলোড করা ছবিও পাবেন।

4. একটি এক্সটেনশন খুঁজুন এবং ইনস্টল করুন

সমস্যাটি

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

কৌতূহলী, আপনি মোবাইল সংযোগের গতি দিয়ে আপনার সাইট পরীক্ষা করুন। (এটা কিভাবে করতে হয় তা এখানে শিখুন।) আপনি দেখতে পাচ্ছেন যে ছবিগুলি লোড হতে অনেক বেশি সময় নেয় এবং ব্রাউজারে ক্যাশে করা হয় না। যে দীর্ঘ লোড সময় প্রতিটি পৃষ্ঠা দৃশ্য ব্যয় করা হয়!

সমাধান

কিভাবে ইমেজ অপ্টিমাইজ করা যায় তা পড়ার পরে, আপনি ইমেজ লোডিং পারফরম্যান্স উন্নত করতে দুটি পদক্ষেপ নেওয়ার সিদ্ধান্ত নেন:

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

ছবিগুলিকে সংকুচিত করতে, আপনাকে হয় আপলোডের গুণমান সীমিত করতে হবে বা একটি সার্ভার-সাইড প্রক্রিয়া থাকতে হবে যা চিত্রগুলির আকার পরিবর্তন করে৷ চলুন ট্রেডঅফ বিবেচনা করা যাক:

• মক্কেলের পক্ষে . একটি ক্লায়েন্ট-সাইড প্রক্রিয়ার জন্য, আপনি আপলোড করা চিত্রগুলির জন্য ফাইলের আকার সীমাবদ্ধ করতে পারেন। এর মানে হল যে আপনাকে কোনো নতুন সার্ভার লজিক লিখতে বা বজায় রাখতে হবে না। যাইহোক, এর মানে হল যে আপনার বিক্রেতাদের তাদের নিজস্ব চিত্রের আকার পরিবর্তন করতে হবে তা খুঁজে বের করতে হবে, যা একটি নতুন তালিকা তৈরি করার জন্য একটি বেদনাদায়ক এবং অজ্ঞাত বাধা।
• সার্ভার-সাইড । আপনি যদি Firebase-এর জন্য ক্লাউড ফাংশন ব্যবহার করেন, তাহলে আপনি একটি ফাংশন ট্রিগার করতে পারেন যা আপলোডের সময় স্বয়ংক্রিয়ভাবে একটি চিত্রের আকার পরিবর্তন করে। এর মানে হল যে বিক্রেতারা তাদের পছন্দমত যে আকারের ইমেজ আপলোড করতে পারে (তাদের জন্য কোন অতিরিক্ত কাজ নেই), এবং আপনার ব্যাকএন্ড ফাংশন নির্বিঘ্নে ইমেজ রিসাইজ করতে পারে। এই ফাংশনের জন্য এমনকি একটি নমুনা উপলব্ধ আছে!

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

একটি সহজ সমাধান

তোমার ভাগ্য ভাল. একটি সহজ সমাধান আছে: ফায়ারবেস এক্সটেনশন! ফায়ারবেস ওয়েবসাইটে উপলব্ধ এক্সটেনশনের ক্যাটালগ পরীক্ষা করা যাক।

ঐ দিকে তাকান! "রিসাইজ ইমেজ" নামে একটি এক্সটেনশন আছে। যে প্রতিশ্রুতিশীল দেখায়.

আসুন আপনার অ্যাপে এই এক্সটেনশনটি ব্যবহার করি!

একটি এক্সটেনশন ইনস্টল করুন

1. এই এক্সটেনশন সম্পর্কে আরও তথ্য দেখতে বিস্তারিত দেখুন ক্লিক করুন. আপনি যা কনফিগার করতে পারেন এর অধীনে, এক্সটেনশনটি আপনাকে সেই মাত্রাগুলি সেট করতে দেয় যার আকার আপনি পুনরায় আকার দিতে চান এবং আপনি ক্যাশে হেডারও সেট করতে পারেন৷ নিখুঁত!
2. এক্সটেনশনের বিশদ পৃষ্ঠায় কনসোলে ইনস্টল করুন বোতামে ক্লিক করুন। আপনাকে একটি ফায়ারবেস কনসোল পৃষ্ঠায় নিয়ে যাওয়া হবে যেখানে আপনার সমস্ত প্রকল্পের তালিকা রয়েছে।
3. এই কোডল্যাবের জন্য আপনার তৈরি করা FriendlyMarket প্রকল্পটি বেছে নিন।
4. আপনি কনফিগার এক্সটেনশন ধাপে না পৌঁছা পর্যন্ত অন-স্ক্রীন নির্দেশাবলী অনুসরণ করুন। নির্দেশাবলী এক্সটেনশনের একটি প্রাথমিক সারাংশ দেখাবে, সেইসাথে এটি যেকোন সংস্থান তৈরি করবে এবং এটির প্রয়োজনীয় ভূমিকাগুলি অ্যাক্সেস করবে।
5. রিসাইজ করা ইমেজ ফিল্ডের জন্য ** Cache-Control ** হেডারে, নিম্নলিখিতটি লিখুন:

public, max-age=31536000

6. অন্যান্য পরামিতিগুলিকে তাদের ডিফল্ট মানগুলিতে ছেড়ে দিন।
7. ইনস্টল এক্সটেনশন ক্লিক করুন.

যখন আপনি ইনস্টলেশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করছেন...

Firebase কমান্ড-লাইন ইন্টারফেসের সাথে ইনস্টল করা হচ্ছে

আপনি যদি কমান্ড-লাইন সরঞ্জামগুলির সাথে আরও স্বাচ্ছন্দ্যবোধ করেন তবে Firebase CLI ব্যবহার করে এক্সটেনশনগুলি ইনস্টল এবং পরিচালনা করা যেতে পারে! শুধুমাত্র firebase ext কমান্ড ব্যবহার করুন, CLI এর সর্বশেষ সংস্করণে উপলব্ধ। আরো তথ্য পাওয়া যাবে এখানে .

(ঐচ্ছিক) ক্যাশে-কন্ট্রোল হেডার সম্পর্কে আরও জানুন

ক্যাশে-কন্ট্রোল হেডার মান public, max-age=31536000 এর অর্থ হল ছবিটি 1 বছর পর্যন্ত ক্যাশে করা হবে। ক্যাশে-কন্ট্রোল হেডার সম্পর্কে আরও জানতে, এই ডকুমেন্টেশনটি দেখুন।

ক্লায়েন্ট কোড আপডেট করুন

আপনি যে এক্সটেনশনটি ইনস্টল করেছেন সেটি মূল চিত্রের মতো একই বালতিতে একটি পুনরায় আকারের চিত্র লেখে। রিসাইজ করা চিত্রটির ফাইলের নামের সাথে কনফিগার করা মাত্রা যুক্ত করা হয়েছে। সুতরাং, যদি আসল ফাইলের পাথ friendlymarket/user1234-car.png এর মত হয়, তাহলে রিসাইজ করা ছবির ফাইল পাথ friendlymarket/user1234-car_200x200.png এর মত দেখাবে।

আসুন অ্যাপটিকে আপডেট করি যাতে এটি পূর্ণ আকারের চিত্রগুলির পরিবর্তে পুনরায় আকারের চিত্রগুলি নিয়ে আসে।

1. StackBlitz-এ, src/firebase-refs.js ফাইলটি খুলুন।
2. রিসাইজ করা ছবির জন্য একটি রেফ তৈরি করতে নিম্নলিখিত কোড দিয়ে বিদ্যমান getImageRef ফাংশনটি প্রতিস্থাপন করুন:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

এটা পরীক্ষা করে দেখুন

যেহেতু এই এক্সটেনশনটি নতুন ছবি আপলোডের জন্য দেখছে, তাই আপনার বিদ্যমান ছবির আকার পরিবর্তন করা হবে না।

এক্সটেনশনটি কার্যকর দেখতে একটি নতুন পোস্ট তৈরি করুন:

1. হোম স্ক্রিনে নেভিগেট করতে আপনার অ্যাপের উপরের বারে Friendly Market-এ ক্লিক করুন।
2. একটি তালিকা তৈরি করতে অ্যাপের নীচে-ডান কোণে কিছু বিক্রি করুন বোতামে ক্লিক করুন।
3. শিরোনামের জন্য, Coffee লিখুন
4. মূল্য জিজ্ঞাসা করার জন্য, 1 লিখুন
5. আইটেমের বিবরণের জন্য, নিম্নলিখিতটি লিখুন: Selling one cafe latte. It has foam art in the shape of a bear ।
6. আপনার কম্পিউটারে এক কাপ কফির এই ছবিটি ডাউনলোড করুন এবং এটি আপনার আইটেম বোতামের ছবি দিয়ে আপলোড করুন৷ file_download ইমেজ ডাউনলোড করুন
7. আপনি সমস্ত ক্ষেত্র পূরণ করার পরে এবং একটি ছবি আপলোড করার পরে, পোস্টে ক্লিক করুন। আপনি জাইলফোনের নিচে কফির তালিকা দেখতে পাবেন!
8. ফায়ারবেস কনসোলের ফাংশন ড্যাশবোর্ডে, লগ ট্যাবে ক্লিক করুন। আপনি ফাংশন থেকে লগগুলি দেখতে পাবেন যা দেখায় যে এটি কার্যকর হয়েছে।

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

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

5. একটি এক্সটেনশন পুনরায় কনফিগার করুন

সমস্যাটি

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

সমাধান

খামের পিছনের কিছু গণনার পরে, আপনি বুঝতে পারেন যে যেকোন সময়ে আপনাকে শুধুমাত্র পাঁচটি খসড়া সংরক্ষণ করতে হবে।

Firebase এক্সটেনশনের সেই ক্যাটালগটি মনে আছে? সম্ভবত এই পরিস্থিতির জন্য ইতিমধ্যেই একটি সমাধান তৈরি করা হয়েছে। আসুন স্বয়ংক্রিয়ভাবে সংরক্ষিত ড্রাফ্টের সংখ্যা পাঁচ বা তার কম রাখতে লিমিট চাইল্ড নোড এক্সটেনশনটি ইনস্টল করি। যখনই একটি নতুন খসড়া যোগ করা হবে তখন এক্সটেনশনটি পুরানো খসড়াটিকে মুছে ফেলবে৷

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

আপনি যখন ইনস্টলেশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করছেন...

নিরীক্ষণ এক্সটেনশন

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

এক্সটেনশন আনইনস্টল করা হচ্ছে

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

আনইনস্টল করা সমস্ত সংস্থান মুছে দেয় (যেমন এক্সটেনশনের জন্য ফাংশন) এবং এক্সটেনশনের সেই উদাহরণের জন্য তৈরি পরিষেবা অ্যাকাউন্ট। যাইহোক, এক্সটেনশনটি আনইনস্টল করার পরে এক্সটেনশন দ্বারা তৈরি যেকোন শিল্পকর্ম (যেমন পুনঃআকারিত চিত্র) আপনার প্রকল্পে থাকবে।

একটি একক প্রকল্পে একটি এক্সটেনশনের একাধিক কপি ইনস্টল করা

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

কর্ম এটি দেখুন

1. নিশ্চিত করুন যে আপনি জাইলোফোন বা ল্যাটে পোস্ট করার জন্য যে অ্যাকাউন্টটি ব্যবহার করেছেন সেটি দিয়ে আপনি লগ ইন করেছেন৷
2. কিছু খসড়া তৈরি করুন:
3. অ্যাপের নিচের ডানদিকে কোণায় Sell something বোতামে ক্লিক করুন
4. "খসড়া 1" বলার জন্য শিরোনাম সম্পাদনা করুন।
5. খসড়া বিভাগে স্ক্রোল করুন এবং খসড়া সংখ্যা দেখুন। কমপক্ষে দুটি হওয়া উচিত।
6. উপরের অ্যাপ বারে FRIENDLY MARKET বোতামে ক্লিক করুন। এইভাবে, আপনার কাছে একটি সংরক্ষিত খসড়া থাকবে তবে এটি পোস্ট করার দরকার নেই৷
7. "খসড়া 2", "খসড়া 3" এবং "খসড়া 6" এর জন্য পুনরাবৃত্তি করুন।
8. আপনি যখন "খসড়া 6" তৈরি করেন, তখন লক্ষ্য করুন যে "খসড়া 1 আপনার খসড়া বিভাগ থেকে অদৃশ্য হয়ে গেছে।
9. আপনি রিসাইজ ইমেজ এক্সটেনশনের সাথে যেমনটি করেছেন, আপনি কোন ফাংশনগুলি ট্রিগার হয়েছে তা দেখতে ফাংশন লগগুলি পরীক্ষা করতে পারেন।

ওহো, রাখার জন্য খসড়ার সীমা খুবই ছোট৷

আপনার গ্রাহক সহায়তা দল পৌঁছায় এবং আপনাকে জানাতে পারে যে আপনার কিছু সর্বাধিক বিক্রেতা অভিযোগ করছেন যে তাদের ড্রাফ্টগুলি পোস্ট করার আগেই মুছে ফেলা হচ্ছে। আপনি আপনার সতীর্থের সাথে আপনার গণিত পরীক্ষা করেন এবং আপনি বুঝতে পারেন যে আপনার গণিত 10,000 এর একটি ফ্যাক্টর দ্বারা বন্ধ ছিল!

কিভাবে আপনি এটি ঠিক করতে পারেন? এর ইনস্টল করা এক্সটেনশন পুনরায় কনফিগার করা যাক!

1. Firebase কনসোলের বাম ফলকে, এক্সটেনশনে ক্লিক করুন।
2. ইনস্টল করা এক্সটেনশনের কার্ডে, পরিচালনা ক্লিক করুন।
3. উপরের-ডান কোণে, এক্সটেনশন পুনরায় কনফিগার করুন ক্লিক করুন।
4. 50000 রাখতে নোডের সর্বাধিক সংখ্যা পরিবর্তন করুন।
5. Save এ ক্লিক করুন।

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

6. ব্যবহারকারীর ডেটা স্বয়ংক্রিয়ভাবে মুছে দিন

সমস্যাটি

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

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

সমাধান

যখন কোনো ব্যবহারকারী তাদের অ্যাকাউন্ট মুছে ফেলবে তখন আপনি ডাটাবেসের users/uid নোড স্বয়ংক্রিয়ভাবে মুছে ফেলার জন্য ব্যবহারকারীর ডেটা মুছুন এক্সটেনশনটি কনফিগার করবেন।

1. এক্সটেনশনের বিবরণ পৃষ্ঠায় ইনস্টল বোতামে ক্লিক করুন।
2. আপনার মার্কেটপ্লেস ওয়েব অ্যাপের জন্য আপনি যে Firebase প্রকল্পটি ব্যবহার করছেন সেটি বেছে নিন।
3. আপনি কনফিগার এক্সটেনশন ধাপে না পৌঁছা পর্যন্ত অন-স্ক্রীন নির্দেশাবলী অনুসরণ করুন।
4. রিয়েলটাইম ডাটাবেস পাথের জন্য, sellers/{UID} লিখুন। sellers অংশ হল সেই নোড যার বাচ্চাদের মধ্যে ব্যবহারকারীর ইমেল ঠিকানা থাকে এবং {UID} হল একটি ওয়াইল্ডকার্ড৷ এই কনফিগারেশনের মাধ্যমে, এক্সটেনশন জানতে পারবে যে যখন 1234-এর UID-এর ব্যবহারকারী তাদের অ্যাকাউন্ট মুছে ফেলবে, তখন এক্সটেনশনটি ডাটাবেস থেকে sellers/1234 মুছে দেবে।
5. ইনস্টল এক্সটেনশন ক্লিক করুন.

আপনি যখন ইনস্টলেশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করছেন...

আসুন কাস্টমাইজযোগ্যতা সম্পর্কে কথা বলি

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

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

এক্সটেনশন এবং বিলিং

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

উদাহরণস্বরূপ, আপনি URL ছোট করতে পারেন, ইমেল ট্রিগার করতে পারেন , BigQuery-এ সংগ্রহ রপ্তানি করতে পারেন এবং আরও অনেক কিছু করতে পারেন! এখানে এক্সটেনশনের সম্পূর্ণ ক্যাটালগ দেখুন।

যদি এমন একটি এক্সটেনশন থাকে যা আপনি পেতে চান, কিন্তু এটি এখনই উপলব্ধ না হয়, আমরা এটি সম্পর্কে শুনতে চাই! একটি নতুন এক্সটেনশনের পরামর্শ দিতে Firebase সহায়তার সাথে একটি বৈশিষ্ট্য অনুরোধ ফাইল করুন।

কর্ম এটি দেখুন

আপনার এক্সটেনশনের ইনস্টলেশন সম্পূর্ণ হওয়ার পরে, একটি ব্যবহারকারী মুছুন এবং দেখুন কি হয়:

1. Firebase কনসোলে, আপনার রিয়েলটাইম ডেটাবেস ড্যাশবোর্ডে যান।
2. sellers নোড প্রসারিত করুন.
3. প্রতিটি বিক্রেতার তথ্য তাদের ব্যবহারকারীর ইউআইডিতে চাবি করা হয়। একটি ব্যবহারকারীর UID চয়ন করুন.
4. Firebase কনসোলে, আপনার প্রমাণীকরণ ড্যাশবোর্ডে যান এবং সেই ব্যবহারকারী UID খুঁজুন।
5. UID এর ডানদিকে মেনুটি প্রসারিত করুন এবং অ্যাকাউন্ট মুছুন নির্বাচন করুন।

6. আপনার রিয়েলটাইম ডেটাবেস ড্যাশবোর্ডে ফিরে যান। বিক্রেতার তথ্য চলে যাবে!

7. অভিনন্দন!

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

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

এরপর কি?

এই অন্য কিছু এক্সটেনশন দেখুন:

• ক্লাউড ফায়ারস্টোরে টেক্সট স্ট্রিং অনুবাদ করুন (বিলিং অ্যাকাউন্ট প্রয়োজন)
• Mailchimp ইমেল তালিকায় নতুন ব্যবহারকারীদের যোগ করুন (বিলিং অ্যাকাউন্ট প্রয়োজন)
• URL ছোট করুন (বিলিং অ্যাকাউন্ট প্রয়োজন)

আরো কাস্টম সার্ভার-সাইড কোড প্রয়োজন?

• ফায়ারবেস কোডল্যাবের জন্য ক্লাউড ফাংশনগুলি দেখুন

অন্যান্য সহায়ক নথি

এক্সটেনশন পরিচালনা:

• Firebase CLI দিয়ে এক্সটেনশন পরিচালনা করার চেষ্টা করুন
• বাজেট সতর্কতা সেট করুন
• একটি ইনস্টল করা এক্সটেনশন কত ঘন ঘন চলছে তা পরীক্ষা করুন
• একটি নতুন সংস্করণে একটি ইনস্টল করা এক্সটেনশন আপডেট করুন৷
• একটি এক্সটেনশন আনইনস্টল করুন

এক্সটেনশন সম্পর্কে সূক্ষ্ম বিবরণ শেখা:

• GitHub-এ প্রতিটি এক্সটেনশনের জন্য সোর্স কোড এবং ডক্স দেখুন
• একটি এক্সটেনশনে দেওয়া অনুমতি এবং অ্যাক্সেস সম্পর্কে জানুন