با Firebase Extensions به سرعت قابلیت جدیدی را به برنامه وب خود اضافه کنید

۱. مقدمه

اهداف

در این آزمایشگاه کد، با کمک افزونه‌های فایربیس، قابلیت‌هایی را به یک برنامه فروشگاه آنلاین اضافه خواهید کرد. از طریق این آزمایشگاه کد، خواهید فهمید که چگونه افزونه‌ها می‌توانند به شما کمک کنند تا زمان کمتری را صرف توسعه و مدیریت برنامه کنید.

آنچه خواهید ساخت

در این آزمایشگاه کد، ویژگی‌های زیر را به یک برنامه وب فروشگاه آنلاین اضافه خواهید کرد:

• بارگذاری سریع‌تر تصاویر برای افزایش ماندگاری کاربر
• ورودی‌های پایگاه داده خود را محدود کنید تا عملکرد را بهبود بخشیده و صورتحساب خود را کاهش دهید
• پیاده‌سازی حذف خودکار داده‌های قدیمی کاربر برای افزایش حفاظت از داده‌های کاربر

آنچه یاد خواهید گرفت

• نحوه کشف افزونه‌ها برای موارد استفاده رایج
• نحوه نصب و پیکربندی یک افزونه در پروژه شما
• نحوه نگهداری (نظارت، به‌روزرسانی و حذف) افزونه‌ها در پروژه شما

این آزمایشگاه کد بر افزونه‌های فایربیس تمرکز دارد. برای اطلاعات بیشتر در مورد سایر محصولات فایربیس که در این آزمایشگاه کد ذکر شده‌اند، به مستندات فایربیس و سایر آزمایشگاه‌های کد مراجعه کنید.

آنچه نیاز دارید

• یک رایانه با یک مرورگر وب مدرن نصب شده (کروم توصیه می‌شود)
• یک حساب گوگل

۲. ایجاد و راه‌اندازی یک پروژه Firebase

ایجاد یک پروژه فایربیس

1. با استفاده از حساب گوگل خود وارد کنسول فایربیس شوید.
2. برای ایجاد یک پروژه جدید، روی دکمه کلیک کنید و سپس نام پروژه را وارد کنید (برای مثال، FriendlyMarket ).
   
3. روی ادامه کلیک کنید.
4. در صورت درخواست، شرایط Firebase را مرور و قبول کنید و سپس روی ادامه کلیک کنید.
5. (اختیاری) دستیار هوش مصنوعی را در کنسول Firebase (با نام "Gemini در Firebase") فعال کنید.
6. برای این codelab، به گوگل آنالیتیکس نیاز ندارید ، بنابراین گزینه گوگل آنالیتیکس را غیرفعال کنید .
7. روی ایجاد پروژه کلیک کنید، منتظر بمانید تا پروژه شما آماده شود و سپس روی ادامه کلیک کنید.

برنامه‌ای که خواهید ساخت از چند محصول Firebase موجود برای برنامه‌های وب استفاده می‌کند:

• احراز هویت فایربیس برای شناسایی آسان کاربران شما
• پایگاه داده Firebase Realtime برای ذخیره داده‌های ساختاریافته در فضای ابری و دریافت اعلان فوری هنگام به‌روزرسانی داده‌ها
• فضای ذخیره‌سازی ابری برای فایربیس جهت ذخیره تصاویر در فضای ابری

اکنون می‌توانید با استفاده از کنسول Firebase، محصولات Firebase را فعال و پیکربندی کنید.

طرح قیمت‌گذاری فایربیس خود را ارتقا دهید

برای استفاده از افزونه‌های فایربیس و سرویس‌های ابری زیربنایی آنها و همچنین فضای ذخیره‌سازی ابری برای فایربیس، پروژه فایربیس شما باید در طرح قیمت‌گذاری پرداخت در محل (Blaze) باشد، به این معنی که به یک حساب پرداخت ابری متصل باشد.

• یک حساب Cloud Billing به یک روش پرداخت، مانند کارت اعتباری، نیاز دارد.
• اگر در استفاده از فایربیس و گوگل کلود تازه‌کار هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار ۳۰۰ دلاری و یک حساب کاربری رایگان ابری هستید یا خیر.
• اگر این codelab را به عنوان بخشی از یک رویداد انجام می‌دهید، از برگزارکننده خود بپرسید که آیا امکان استفاده از فضای ابری (Cloud credits) وجود دارد یا خیر.

برای ارتقاء پروژه خود به طرح Blaze، مراحل زیر را دنبال کنید:

1. در کنسول Firebase، گزینه ارتقاء پلن خود را انتخاب کنید.
2. طرح Blaze را انتخاب کنید. دستورالعمل‌های روی صفحه را دنبال کنید تا یک حساب Cloud Billing به پروژه شما متصل شود.
   اگر به عنوان بخشی از این ارتقا نیاز به ایجاد یک حساب Cloud Billing داشتید، ممکن است لازم باشد برای تکمیل ارتقا، به روند ارتقا در کنسول Firebase برگردید.

فعال کردن ورود با ایمیل

اگرچه تمرکز این آزمایشگاه کد روی احراز هویت نیست، اما داشتن نوعی احراز هویت در برنامه شما مهم است تا هر کسی که از آن استفاده می‌کند را به طور منحصر به فرد شناسایی کنید. شما از ورود با ایمیل استفاده خواهید کرد.

1. در کنسول Firebase، در پنل سمت چپ روی Develop کلیک کنید.
2. روی تأیید هویت کلیک کنید و سپس روی برگه روش ورود کلیک کنید (یا برای رفتن مستقیم به برگه روش ورود اینجا کلیک کنید ).
3. در فهرست ارائه‌دهندگان ورود ، روی ایمیل/رمز عبور کلیک کنید، کلید فعال‌سازی را روی حالت روشن قرار دهید و سپس روی ذخیره کلیک کنید.

فعال کردن پایگاه داده بلادرنگ

این برنامه از پایگاه داده Firebase Realtime برای ذخیره اقلام برای فروش استفاده می‌کند.

1. در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Realtime Database را انتخاب کنید.
2. روی ایجاد پایگاه داده کلیک کنید.
3. مکانی را برای پایگاه داده خود انتخاب کنید، سپس روی Next کلیک کنید.
   برای یک اپلیکیشن واقعی، شما می‌خواهید مکانی را انتخاب کنید که به کاربرانتان نزدیک باشد.
4. روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
   در مراحل بعدی این آزمایشگاه کد، شما قوانین امنیتی را برای ایمن‌سازی داده‌های خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای پایگاه داده خود، برنامه را به صورت عمومی توزیع یا افشا نکنید .
5. روی ایجاد کلیک کنید.

قوانین امنیتی را برای پایگاه داده خود تنظیم کنید

اکنون، قوانین امنیتی مورد نیاز برای این برنامه را تنظیم خواهید کرد. اینها چند نمونه از قوانین اساسی برای کمک به ایمن‌سازی برنامه شما هستند. این قوانین به هر کسی اجازه می‌دهد اقلام فروشی را مشاهده کند، اما این قوانین فقط به کاربران وارد شده اجازه می‌دهد خواندن و نوشتن‌های دیگر را انجام دهند. نگران جزئیات این قوانین نباشید؛ فقط آنها را کپی و پیست می‌کنید تا برنامه شما راه‌اندازی و اجرا شود.

1. در بالای داشبورد Realtime Database، روی تب Rules کلیک کنید.

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. روی انتشار کلیک کنید.

راه‌اندازی فضای ذخیره‌سازی ابری برای فایربیس

این برنامه از فضای ذخیره‌سازی ابری برای فایربیس استفاده می‌کند تا تصاویر اقلام فروشی را ذخیره کند.

در اینجا نحوه تنظیم فضای ذخیره‌سازی ابری برای فایربیس در پروژه فایربیس شما آورده شده است:

1. در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Storage را انتخاب کنید.
2. روی شروع به کار کلیک کنید.
3. مکانی را برای سطل ذخیره‌سازی پیش‌فرض خود انتخاب کنید.
   کاربران در US-WEST1 ، US-CENTRAL1 و US-EAST1 می‌توانند از ردیف «همیشه رایگان» برای Google Cloud Storage بهره‌مند شوند. کاربران در سایر مناطق ، از قیمت‌ها و میزان استفاده از Google Cloud Storage پیروی می‌کنند.
4. روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
   در مراحل بعدی این آزمایشگاه کد، شما قوانین امنیتی را برای ایمن‌سازی داده‌های خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای مخزن ذخیره‌سازی خود، برنامه را به صورت عمومی توزیع یا در معرض نمایش قرار ندهید .
5. روی ایجاد کلیک کنید.

قوانین امنیتی را برای مخزن ذخیره‌سازی خود تنظیم کنید

اکنون، قوانین امنیتی مورد نیاز برای این برنامه را تنظیم خواهید کرد. این قوانین فقط به کاربران احراز هویت شده اجازه ارسال تصاویر جدید را می‌دهند، اما به هر کسی اجازه می‌دهند تصویر مربوط به یک مورد فهرست شده را مشاهده کند.

1. در بالای داشبورد Storage ، روی تب Rules کلیک کنید.

2. مجموعه قوانین زیر را کپی کرده و در قسمت قوانین در تب قوانین قرار دهید:

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

3. روی انتشار کلیک کنید.

۳. برنامه نمونه را اجرا کنید

پروژه StackBlitz را منشعب کنید

در این آزمایشگاه کد، شما با استفاده از StackBlitz ، یک برنامه را می‌سازید و مستقر می‌کنید، یک ویرایشگر آنلاین که چندین گردش کار Firebase را در خود جای داده است. Stackblitz نیازی به نصب نرم‌افزار یا حساب کاربری StackBlitz خاصی ندارد.

StackBlitz به شما امکان می‌دهد پروژه‌ها را با دیگران به اشتراک بگذارید. افراد دیگری که URL پروژه StackBlitz شما را دارند می‌توانند کد شما را ببینند و پروژه شما را منشعب کنند، اما نمی‌توانند پروژه StackBlitz شما را ویرایش کنند.

1. برای کد شروع به این آدرس اینترنتی بروید: https://stackblitz.com/edit/friendlymarket-codelab .
2. در بالای صفحه StackBlitz، روی Fork کلیک کنید.

اکنون یک کپی از کد اولیه به عنوان پروژه StackBlitz خود دارید. از آنجا که وارد سیستم نشده‌اید، "حساب" شما @anonymous نامیده می‌شود، اما اشکالی ندارد. این پروژه دارای یک نام منحصر به فرد و یک URL منحصر به فرد است. تمام فایل‌ها و تغییرات شما در این پروژه StackBlitz ذخیره می‌شوند.

یک برنامه وب Firebase به پروژه اضافه کنید

1. در StackBlitz، فایل src/firebase-config.js خود را مشاهده کنید. اینجا جایی است که شیء پیکربندی Firebase را اضافه خواهید کرد.
2. به کنسول فایربیس برگردید، با کلیک روی نمای کلی پروژه در بالا سمت چپ، به صفحه نمای کلی پروژه خود بروید.
3. در مرکز صفحه نمای کلی پروژه خود، روی نماد وب کلیک کنید برای ایجاد یک برنامه وب Firebase جدید.
4. برنامه را با نام مستعار FriendlyMarket Codelab ثبت کنید.
5. برای این codelab، کادر کنار Also set up Firebase Hosting for this app را علامت نزنید . در عوض، از پنجره پیش‌نمایش StackBlitz استفاده خواهید کرد.
6. روی ثبت برنامه کلیک کنید.
7. شیء پیکربندی Firebase برنامه خود را در کلیپ‌بورد کپی کنید. تگ‌های <script> را کپی نکنید. توجه: اگر بعداً نیاز به یافتن پیکربندی دارید، دستورالعمل‌های اینجا را دنبال کنید.

8. برای کنسول کردن، روی ادامه کلیک کنید.

پیکربندی پروژه خود را به برنامه خود اضافه کنید:

1. به StackBlitz برگردید و به فایل src/firebase-config.js بروید.
2. قطعه کد پیکربندی خود را در فایل قرار دهید. پس از انجام این کار، باید به شکل زیر باشد (اما با مقادیر پروژه خودتان در شیء پیکربندی):

نقطه شروع این برنامه چیست؟

به پیش‌نمایش تعاملی در سمت راست صفحه StackBlitz نگاهی بیندازید:

این آزمایشگاه کدنویسی کار شما را با کدنویسی برای یک اپلیکیشن فروشگاهی ساده شروع می‌کند. هر کاربری می‌تواند لیستی از اقلام برای فروش را مشاهده کند و روی لینکی کلیک کند تا صفحه جزئیات کالا را مشاهده کند. اگر کاربری وارد سیستم شده باشد، اطلاعات تماس فروشنده را مشاهده می‌کند تا بتواند در مورد قیمت مذاکره کند و کالا را خریداری کند.

برنامه را امتحان کنید:

1. با دکمه بالای صفحه اصلی وارد شوید. می‌توانید از آدرس ایمیل، نام و رمز عبور جعلی استفاده کنید.
2. برای ایجاد آگهی، روی دکمه «فروش چیزی» در گوشه پایین سمت راست کلیک کنید.
3. برای عنوان ، Xylophone را وارد کنید .
4. برای استعلام قیمت ، 50 را وارد کنید .
5. برای توضیحات کالا ، موارد زیر را وارد کنید: This high quality xylophone can be used to play music.
6. این تصویر از یک زایلوفون را به رایانه خود دانلود کنید و آن را با دکمه «تصویر کالای خود» بارگذاری کنید.

file_download تصویر

7. پس از پر کردن تمام فیلدها و آپلود تصویر، روی «ارسال» کلیک کنید.
8. لیست جدید خود را پیدا کنید. برای مشاهده جزئیات محصول، روی آن کلیک کنید و سپس پنل اطلاعات تماس فروشنده را باز کنید.
9. به کنسول فایربیس برگردید. در داشبورد پایگاه داده ، اکنون ورودی مربوط به کالایی که در زیر گره forsale ارسال کرده‌اید را مشاهده خواهید کرد. در داشبورد Storage ، تصویری را که در مسیر friendlymarket آپلود کرده‌اید نیز خواهید یافت.

۴. یک افزونه پیدا کنید و نصب کنید

مشکل

بعد از انجام تحقیقات کاربری برای اپلیکیشن خود، متوجه می‌شوید که اکثر کاربران از طریق تلفن هوشمند خود به سایت شما مراجعه می‌کنند، نه از طریق دسکتاپ. با این حال، آمار شما همچنین نشان می‌دهد که کاربران موبایل تمایل دارند سایت شما را تنها پس از چند ثانیه ترک کنند ("ریزش").

کنجکاوانه، شما سایت خود را با سرعت اتصال موبایل آزمایش می‌کنید. (یاد بگیرید چگونه این کار را اینجا انجام دهید.) متوجه می‌شوید که تصاویر زمان بسیار زیادی برای بارگذاری نیاز دارند و اصلاً در مرورگر ذخیره نمی‌شوند. این زمان بارگذاری طولانی در هر بازدید از صفحه ایجاد می‌شود!

راه حل

بعد از مطالعه در مورد نحوه بهینه سازی تصاویر ، تصمیم می‌گیرید دو مرحله برای بهبود عملکرد بارگذاری تصویر انجام دهید:

• تصاویر را فشرده کنید. حتی تلفن‌های همراه نیز تصاویری با وضوح بسیار بالاتر از آنچه برای نیازهای این برنامه لازم است، می‌گیرند. کاهش حجم فایل، سرعت بارگذاری را بدون کاهش محسوس وضوح در برنامه افزایش می‌دهد.
• ذخیره سازی . به طور پیش فرض، اشیاء Cloud Storage دارای هدرهایی هستند که به مرورگرها می‌گویند تصاویر را ذخیره نکنند، به این معنی که مرورگر کاربر بارها و بارها همان تصویر را دوباره دانلود می‌کند! خوشبختانه، می‌توانید این هدرها را تغییر دهید تا امکان ذخیره سازی فراهم شود. هم Cloud Storage SDK سمت کلاینت و هم Firebase Admin SDK به شما امکان تنظیم این هدرها را می‌دهند.

برای فشرده‌سازی تصاویر، یا باید کیفیت آپلود را محدود کنید یا یک فرآیند سمت سرور داشته باشید که اندازه تصاویر را تغییر دهد. بیایید به بررسی این موارد بپردازیم:

• سمت کلاینت . برای یک فرآیند سمت کلاینت، می‌توانید فقط اندازه فایل تصاویر آپلود شده را محدود کنید. این بدان معناست که نیازی به نوشتن یا نگهداری هیچ منطق سرور جدیدی ندارید. با این حال، این بدان معناست که فروشندگان شما باید نحوه تغییر اندازه تصاویر خود را بفهمند، که یک مانع دردناک و غیرشهودی برای ایجاد یک لیست جدید است.
• سمت سرور . اگر از توابع ابری برای فایربیس استفاده می‌کنید، می‌توانید تابعی را فعال کنید که به طور خودکار اندازه تصویر را هنگام آپلود تغییر می‌دهد. این بدان معناست که فروشندگان می‌توانند هر اندازه تصویری را که دوست دارند آپلود کنند (بدون هیچ کار اضافی برای آنها)، و تابع backend شما می‌تواند به طور یکپارچه اندازه تصویر را تغییر دهد. حتی یک نمونه برای این تابع موجود است!

به نظر می‌رسد که سمت سرور راه حل مناسبی باشد. اما این ایده هنوز شامل کلون کردن نمونه ، دنبال کردن دستورالعمل‌های راه‌اندازی آن و سپس استقرار تابع با Firebase CLI است. تغییر اندازه تصاویر به نظر یک مورد استفاده رایج می‌رسد. آیا راه حل آسان‌تری وجود ندارد؟

یک راه حل آسان تر

شما خوش شانس هستید. یک راه حل آسان تر هم وجود دارد: افزونه های فایربیس! بیایید کاتالوگ افزونه های موجود در وب سایت فایربیس را بررسی کنیم.

ببین! یه افزونه به اسم «تغییر اندازه تصاویر» هست. به نظر امیدوارکننده میاد.

بیایید از این افزونه در برنامه شما استفاده کنیم!

نصب یک افزونه

1. برای مشاهده اطلاعات بیشتر در مورد این افزونه، روی «مشاهده جزئیات» کلیک کنید. در قسمت «آنچه می‌توانید پیکربندی کنید» ، این افزونه به شما امکان می‌دهد ابعادی را که می‌خواهید تغییر اندازه دهید تنظیم کنید و حتی می‌توانید هدر حافظه پنهان را تنظیم کنید. عالی!
2. روی دکمه نصب در کنسول در صفحه جزئیات افزونه کلیک کنید. به صفحه کنسول فایربیس هدایت خواهید شد که تمام پروژه‌های شما را فهرست می‌کند.
3. پروژه FriendlyMarket را که برای این آزمایشگاه کد ایجاد کرده‌اید، انتخاب کنید.
4. دستورالعمل‌های روی صفحه را دنبال کنید تا به مرحله پیکربندی افزونه برسید. این دستورالعمل‌ها خلاصه‌ای از افزونه و همچنین منابعی که ایجاد می‌کند و نقش‌های مورد نیاز برای دسترسی به آنها را نشان می‌دهند.
5. در فیلد **سربرگ Cache-Control **برای تصاویر تغییر اندازه یافته **، موارد زیر را وارد کنید:

public, max-age=31536000

6. پارامترهای دیگر را در مقادیر پیش‌فرض خود رها کنید.
7. روی نصب افزونه کلیک کنید.

در حالی که منتظر اتمام نصب هستید...

نصب با رابط خط فرمان Firebase

اگر با ابزارهای خط فرمان راحت‌تر هستید، افزونه‌ها را می‌توان با استفاده از Firebase CLI نیز نصب و مدیریت کرد! فقط از دستور firebase ext که در آخرین نسخه CLI موجود است استفاده کنید. اطلاعات بیشتر را می‌توانید اینجا بیابید.

(اختیاری) درباره هدرهای Cache-Control بیشتر بدانید

مقدار هدر Cache-Control public, max-age=31536000 است که به این معنی است که تصویر تا ۱ سال در حافظه پنهان (cache) ذخیره خواهد شد. برای کسب اطلاعات بیشتر در مورد هدر Cache-Control، به این مستندات مراجعه کنید.

کد کلاینت را به‌روزرسانی کنید

افزونه‌ای که نصب کرده‌اید، یک تصویر تغییر اندازه داده شده را در همان پوشه‌ای که تصویر اصلی قرار دارد، ذخیره می‌کند. تصویر تغییر اندازه داده شده، ابعاد پیکربندی شده‌ای دارد که به نام فایل آن اضافه شده است. بنابراین، اگر مسیر فایل اصلی مانند 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. در داشبورد توابع در کنسول Firebase، روی برگه Logs کلیک کنید. باید گزارش‌هایی از تابع ببینید که نشان می‌دهد اجرا شده است.

9. به داشبورد Storage بروید تا هم تصویر اصلی قهوه و هم نسخه تغییر اندازه داده شده آن را در مسیر friendlymarket ببینید.
10. در پنل پیش‌نمایش StackBlitz، صفحه اصلی برنامه خود را چند بار بارگذاری مجدد کنید. باید متوجه شوید که تصویر قهوه به طور قابل توجهی سریع‌تر از تصویر زیلوفون بارگذاری می‌شود.

تصویر در صفحه اول بارگذاری سریع‌تر بارگذاری می‌شود زیرا کوچک‌تر است و در صفحه بعدی به جای ایجاد درخواست شبکه، از حافظه پنهان مرورگر بارگذاری می‌شود.

۵. پیکربندی مجدد یک افزونه

مشکل

برنامه شما به طور خودکار نسخه‌های پیش‌نویس فهرست فروشنده را ذخیره می‌کند. کاربران شما این ویژگی را دوست دارند، اما آمار شما کمی نگران‌کننده است. گزارش‌های شما می‌گوید که فقط حدود ۱۰٪ از پیش‌نویس‌ها واقعاً ارسال می‌شوند و ۹۰٪ دیگر فقط فضای پایگاه داده شما را اشغال می‌کنند.

راه حل

بعد از کمی محاسبات سرانگشتی، متوجه می‌شوید که در هر زمان فقط باید حدود پنج پیش‌نویس ذخیره کنید.

فهرست افزونه‌های فایربیس را که یادتان هست؟ شاید برای این مشکل از قبل راه‌حلی وجود داشته باشد. بیایید افزونه‌ی Limit Child Nodes را نصب کنیم تا تعداد پیش‌نویس‌های ذخیره‌شده به‌طور خودکار پنج یا کمتر نگه داشته شود. این افزونه هر زمان که پیش‌نویس جدیدی اضافه شود، قدیمی‌ترین پیش‌نویس را حذف می‌کند.

1. روی دکمه نصب در صفحه جزئیات افزونه کلیک کنید.
2. پروژه Firebase مورد استفاده برای برنامه وب فروشگاه خود را انتخاب کنید.
3. دستورالعمل‌های روی صفحه را دنبال کنید تا به مرحله پیکربندی افزونه برسید.
4. برای مسیر پایگاه داده‌ی Realtime ، drafts را وارد کنید. این مسیری در پایگاه داده است که پیش‌نویس‌ها در آن ذخیره می‌شوند.
5. برای حداکثر تعداد گره‌هایی که باید نگه داشته شوند ، 5 را وارد کنید. این به این معنی است که پنج پیش‌نویس برای هر فهرست کالا ذخیره می‌شود و اگر پیش‌نویس دیگری اضافه شود، قدیمی‌ترین پیش‌نویس به طور خودکار حذف می‌شود.
6. روی نصب افزونه کلیک کنید.

در حالی که منتظر اتمام نصب هستید...

نظارت بر افزونه‌ها

وقتی یک افزونه نصب می‌کنید، این فرآیند چندین تابع ایجاد می‌کند. شاید بخواهید بررسی کنید که این توابع چند وقت یکبار اجرا می‌شوند یا گزارش‌ها و میزان خطا را مشاهده کنید. برای اطلاعات دقیق در مورد نحوه نظارت بر افزونه خود، به مدیریت افزونه‌های نصب شده مراجعه کنید. برای مشاهده توابع ایجاد شده توسط افزونه تغییر اندازه تصاویر در مرحله قبل، دستورالعمل‌های موجود در مستندات را دنبال کنید.

حذف افزونه‌ها

برای حذف یک افزونه از پروژه‌تان، ممکن است وسوسه شوید که توابع تکی ایجاد شده توسط آن افزونه را حذف کنید، اما این کار می‌تواند منجر به رفتار غیرمنتظره‌ای شود، زیرا یک افزونه ممکن است چندین تابع ایجاد کند. برای یادگیری نحوه حذف نصب افزونه به مستندات مراجعه کنید.

حذف نصب، تمام منابع (مانند توابع مربوط به افزونه) و حساب سرویس ایجاد شده برای آن نمونه از افزونه را حذف می‌کند. با این حال، هرگونه مصنوعات ایجاد شده توسط افزونه (مانند تصاویر تغییر اندازه داده شده) پس از حذف نصب افزونه در پروژه شما باقی خواهد ماند.

نصب چندین کپی از یک افزونه در یک پروژه واحد

شما محدود به نصب یک نمونه از یک افزونه مشخص در یک پروژه نیستید. اگر می‌خواستید ورودی‌ها را در مسیر دیگری محدود کنید، می‌توانستید نمونه دیگری از این افزونه را نصب کنید. با این حال، برای اهداف این آزمایشگاه کد، فقط یک بار افزونه را نصب خواهید کرد.

آن را در عمل ببینید

1. مطمئن شوید که با حسابی که برای ارسال زایلوفون یا لاته استفاده کرده‌اید، وارد سیستم شده‌اید
2. چند پیش‌نویس تهیه کنید:
3. روی دکمه «فروش چیزی» در گوشه پایین سمت راست برنامه کلیک کنید
4. عنوان را به «پیش‌نویس ۱» تغییر دهید.
5. به بخش پیش‌نویس‌ها (Drafts) بروید و تعداد پیش‌نویس‌ها را مشاهده کنید. حداقل باید دو پیش‌نویس وجود داشته باشد.
6. روی دکمه‌ی «بازار دوستانه» در نوار بالای برنامه کلیک کنید. به این ترتیب، یک پیش‌نویس ذخیره شده خواهید داشت اما نیازی به ارسال آن نیست.
7. این کار را برای «پیش‌نویس ۲»، «پیش‌نویس ۳» و به همین ترتیب تا «پیش‌نویس ۶» تکرار کنید.
8. وقتی «پیش‌نویس ۶» را ایجاد می‌کنید، توجه داشته باشید که «پیش‌نویس ۱» از بخش پیش‌نویس‌های شما ناپدید می‌شود.
9. همانطور که با افزونه‌ی تغییر اندازه‌ی تصاویر (Resize Images) انجام دادید، می‌توانید لاگ‌های توابع را بررسی کنید تا ببینید چه توابعی فعال شده‌اند.

اوه، محدودیت تعداد پیش‌نویس‌ها برای نگه‌داشتن خیلی کمه

تیم پشتیبانی مشتریان شما با شما تماس می‌گیرد و به شما اطلاع می‌دهد که برخی از پرکارترین فروشندگان شما شکایت دارند که پیش‌نویس‌هایشان قبل از ارسال، حذف می‌شوند. شما محاسبات خود را با هم‌تیمی‌تان بررسی می‌کنید و متوجه می‌شوید که محاسبات شما 10000 برابر اشتباه بوده است!

چگونه می‌توانید این مشکل را حل کنید؟ بیایید افزونه نصب شده را دوباره پیکربندی کنیم!

1. در پنل سمت چپ کنسول Firebase، روی Extensions کلیک کنید.
2. در کارت افزونه‌ی نصب‌شده، روی مدیریت کلیک کنید.
3. در گوشه بالا سمت راست، روی «پیکربندی مجدد افزونه» کلیک کنید.
4. حداکثر تعداد گره‌ها را به 50000 تغییر دهید.
5. روی ذخیره کلیک کنید.

و این تمام کاری است که باید انجام دهید! در مدت زمانی که افزونه برای به‌روزرسانی نیاز دارد، می‌توانید با تیم پشتیبانی خود صحبت کنید و به آنها اطلاع دهید که یک راه‌حل در حال پیاده‌سازی است.

۶. حذف خودکار داده‌های کاربر

مشکل

تیم پشتیبانی مشتریان شما دوباره با شما تماس گرفته است. فروشندگانی که حساب‌های خود را حذف کرده‌اند، هنوز از سایر کاربران ایمیل دریافت می‌کنند و آنها عصبانی هستند! این فروشندگان انتظار داشتند که هنگام حذف حساب‌هایشان، آدرس‌های ایمیلشان از سیستم‌های شما حذف شود.

در حال حاضر، پشتیبانی به صورت دستی داده‌های هر کاربر را حذف می‌کند، اما باید راه بهتری وجود داشته باشد! شما در مورد آن فکر می‌کنید و به نوشتن یک کار دسته‌ای خودتان فکر می‌کنید که به صورت دوره‌ای اجرا می‌شود و آدرس‌های ایمیل را از حساب‌های حذف شده پاک می‌کند. اما حذف داده‌های کاربر به نظر یک مشکل نسبتاً رایج می‌رسد. شاید افزونه‌های Firebase بتوانند به حل این مشکل نیز کمک کنند.

راه حل

افزونه‌ی Delete User Data را طوری پیکربندی خواهید کرد که وقتی کاربری حساب کاربری خود را حذف می‌کند، گره users/uid را به طور خودکار در پایگاه داده حذف کند.

1. روی دکمه نصب در صفحه جزئیات افزونه کلیک کنید.
2. پروژه Firebase مورد استفاده برای برنامه وب فروشگاه خود را انتخاب کنید.
3. دستورالعمل‌های روی صفحه را دنبال کنید تا به مرحله پیکربندی افزونه برسید.
4. برای مسیرهای پایگاه داده‌ی بلادرنگ ، sellers/{UID} را وارد کنید. بخش sellers گره‌ای است که فرزندان آن شامل آدرس‌های ایمیل کاربر هستند و {UID} یک wildcard است. با این پیکربندی، افزونه می‌داند که وقتی کاربری با UID 1234 حساب خود را حذف می‌کند، افزونه باید sellers/1234 از پایگاه داده حذف کند.
5. روی نصب افزونه کلیک کنید.

در حالی که منتظر اتمام نصب هستید...

بیایید در مورد قابلیت شخصی‌سازی صحبت کنیم

در این آزمایشگاه کد، مشاهده کردید که افزونه‌های فایربیس می‌توانند به حل موارد استفاده رایج کمک کنند و افزونه‌ها برای تطبیق با نیازهای برنامه شما قابل تنظیم هستند.

با این حال، افزونه‌ها نمی‌توانند هر مشکلی را حل کنند و مسئله حذف داده‌های کاربر نمونه خوبی از آن است. اگرچه افزونه Delete User Data به شکایت فعلی مبنی بر اینکه ایمیل‌ها پس از حذف حساب کاربری کاربر همچنان در معرض دید قرار می‌گیرند، پاسخ می‌دهد، اما این افزونه همه چیز را حذف نمی‌کند. به عنوان مثال، لیست اقلام هنوز در دسترس است و هر تصویری در Cloud Storage نیز باقی می‌ماند. افزونه Delete User Data به ما امکان می‌دهد مسیر Cloud Storage را برای حذف پیکربندی کنیم، اما از آنجایی که کاربران می‌توانند فایل‌های مختلف زیادی را با نام‌های مختلف آپلود کنند، شما نمی‌توانید این افزونه را برای حذف خودکار این مصنوعات پیکربندی کنید. برای موقعیت‌هایی مانند این، Cloud Functions for Firebase ممکن است مناسب‌تر باشد تا بتوانید کدی بنویسید که مختص مدل داده برنامه شما باشد.

افزونه‌ها و صورتحساب

خود افزونه‌های فایربیس رایگان هستند (فقط برای منابع زیربنایی که استفاده می‌کنید هزینه دریافت می‌شود)، اما برخی از منابع زیربنایی مورد نیاز یک افزونه ممکن است نیاز به پرداخت هزینه داشته باشند. این آزمایشگاه کد طوری طراحی شده است که بدون نیاز به حساب کاربری قابل تکمیل باشد. با این حال، راه‌اندازی یک طرح Flame یا Blaze بسیاری از افزونه‌های واقعاً جالب فایربیس را در دسترس قرار می‌دهد.

برای مثال، می‌توانید URLها را کوتاه کنید ، ایمیل ارسال کنید ، مجموعه‌ها را به BigQuery صادر کنید و موارد دیگر! فهرست کامل افزونه‌ها را اینجا ببینید.

اگر افزونه‌ای هست که دوست دارید داشته باشید، اما در حال حاضر در دسترس نیست، خوشحال می‌شویم از آن مطلع شویم! برای پیشنهاد یک افزونه جدید، درخواستی را به پشتیبانی فایربیس ارسال کنید.

آن را در عمل ببینید

پس از اتمام نصب افزونه، یک کاربر را حذف کنید و ببینید چه اتفاقی می‌افتد:

1. در کنسول Firebase، به داشبورد Realtime Database خود بروید.
2. گره sellers را گسترش دهید.
3. اطلاعات هر فروشنده روی شناسه کاربری او ثبت شده است. شناسه کاربری یک کاربر را انتخاب کنید.
4. در کنسول فایربیس، به داشبورد احراز هویت خود بروید و شناسه کاربری (UID) مورد نظر را پیدا کنید.
5. منوی سمت راست UID را باز کنید و گزینه «حذف حساب» را انتخاب کنید.

6. به داشبورد پایگاه داده Realtime خود برگردید. اطلاعات فروشنده از بین خواهد رفت!

۷. تبریک می‌گویم!

با اینکه کد زیادی در این آزمایشگاه کد ننوشته‌اید، ویژگی‌های مهمی را به اپلیکیشن فروشگاه خود اضافه کرده‌اید.

شما یاد گرفتید که چگونه افزونه‌ها را کشف، پیکربندی، نصب و پیکربندی مجدد کنید. علاوه بر این، نحوه نظارت بر افزونه‌های نصب شده و نحوه حذف آنها در صورت لزوم را نیز آموختید.

بعدش چی؟

برخی از این افزونه‌های دیگر را بررسی کنید:

• ترجمه رشته‌های متنی در Cloud Firestore (نیاز به حساب صورتحساب)
• اضافه کردن کاربران جدید به لیست ایمیل Mailchimp (نیاز به حساب کاربری)
• کوتاه کردن URL ها (نیاز به حساب صورتحساب)

به کد سمت سرور سفارشی بیشتری نیاز دارید؟

• توابع ابری برای فایربیس کدلب را بررسی کنید

سایر اسناد مفید

مدیریت افزونه‌ها:

• مدیریت افزونه‌ها را با Firebase CLI امتحان کنید
• هشدارهای بودجه را تنظیم کنید
• بررسی کنید که یک افزونه نصب شده چند وقت یکبار اجرا می‌شود
• افزونه نصب شده را به نسخه جدید به‌روزرسانی کنید
• حذف نصب یک افزونه

یادگیری جزئیات دقیق‌تر در مورد افزونه‌ها:

• کد منبع و اسناد مربوط به هر افزونه را در GitHub مشاهده کنید
• درباره مجوزها و دسترسی‌های اعطا شده به یک افزونه اطلاعات کسب کنید