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

1. مقدمه

اهداف

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

چیزی که خواهی ساخت

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

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

چیزی که یاد خواهید گرفت

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

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

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

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

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

یک پروژه Firebase ایجاد کنید

1. در کنسول Firebase ، روی افزودن پروژه کلیک کنید و نام پروژه Firebase را FriendlyMarket بگذارید.
2. روی گزینه های ایجاد پروژه کلیک کنید. شرایط Firebase را بپذیرید. از تنظیم Google Analytics صرفنظر کنید، زیرا از Analytics در این برنامه استفاده نخواهید کرد.
3. منتظر بمانید تا پروژه آماده شود و سپس روی Continue کلیک کنید.

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

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

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

طرح قیمت گذاری Firebase خود را ارتقا دهید

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

• حساب Cloud Billing به یک روش پرداخت مانند کارت اعتباری نیاز دارد.
• اگر تازه وارد Firebase و Google Cloud هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار 300 دلاری و یک حساب آزمایشی رایگان Cloud Billing هستید یا خیر.
• اگر این نرم‌افزار کد را به‌عنوان بخشی از یک رویداد انجام می‌دهید، از سازمان‌دهنده خود بپرسید که آیا اعتبارات Cloud موجود است یا خیر.

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

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

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

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

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

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

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

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

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

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

1. در بالای داشبورد پایگاه داده بیدرنگ، روی برگه قوانین کلیک کنید.

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

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

Cloud Storage را برای Firebase تنظیم کنید

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

در اینجا نحوه راه اندازی Cloud Storage برای Firebase در پروژه Firebase آمده است:

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

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

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

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

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

   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 ، یک ویرایشگر آنلاین که چندین جریان کاری Firebase در آن یکپارچه شده است، یک برنامه را ایجاد و اجرا می کنید. Stackblitz نیازی به نصب نرم افزار یا حساب StackBlitz خاصی ندارد.

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

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

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

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

1. در StackBlitz، فایل src/firebase-config.js خود را مشاهده کنید. اینجاست که شما شیء پیکربندی Firebase را اضافه می‌کنید.
2. در کنسول Firebase، با کلیک بر روی Project Overview در بالا سمت چپ، به صفحه نمای کلی پروژه خود بروید.
3. در مرکز صفحه نمای کلی پروژه خود، روی نماد وب کلیک کنید برای ایجاد یک برنامه وب Firebase جدید.
4. برنامه را با نام مستعار FriendlyMarket Codelab ثبت کنید.
5. برای این کد لبه، کادر کنار « همچنین میزبانی Firebase را برای این برنامه تنظیم کنید» علامت نزنید . به جای آن از صفحه پیش نمایش StackBlitz استفاده خواهید کرد.
6. روی ثبت برنامه کلیک کنید.
7. شی پیکربندی Firebase برنامه خود را در کلیپ بورد خود کپی کنید. تگ های <script> را کپی نکنید. توجه: اگر بعداً باید پیکربندی را پیدا کنید، دستورالعمل‌های اینجا را دنبال کنید.

8. برای کنسول روی Continue کلیک کنید.

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

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. این تصویر از زیلوفون را در رایانه خود بارگیری کنید و آن را با دکمه PICTURE OF YOUR ITEM آپلود کنید.

file_download دانلود تصویر

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

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

مشکل

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

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

راه حل

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

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

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

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

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

راه حل ساده تر

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

به آن نگاه کن! افزونه ای به نام "تغییر اندازه تصاویر" وجود دارد. که امیدوار کننده به نظر می رسد.

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

یک افزونه نصب کنید

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

public, max-age=31536000

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

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

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

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

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

مقدار هدر Cache-Control public, max-age=31536000 به این معنی است که تصویر تا 1 سال در کش ذخیره می شود. برای کسب اطلاعات بیشتر در مورد هدر Cache-Control، این مستندات را بررسی کنید.

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

افزونه ای که نصب کرده اید یک تصویر تغییر اندازه در همان سطل تصویر اصلی می نویسد. اندازه تصویر تغییر یافته دارای ابعاد پیکربندی شده است که به نام فایل آن اضافه شده است. بنابراین، اگر مسیر فایل اصلی شبیه friendlymarket/user1234-car.png باشد، مسیر فایل تصویر تغییر اندازه شبیه friendlymarket/user1234-car_200x200.png خواهد بود.

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

1. در StackBlitz، فایل src/firebase-refs.js را باز کنید.
2. تابع getImageRef موجود را با کد زیر جایگزین کنید تا یک ref برای تصویر تغییر اندازه ایجاد کنید:

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. این تصویر از یک فنجان قهوه را در رایانه خود بارگیری کنید و آن را با دکمه PICTURE OF YOUR ITEM آپلود کنید. file_download دانلود تصویر
7. پس از پر کردن تمام فیلدها و آپلود تصویر، روی ارسال کلیک کنید. می بینید که لیست قهوه در زیر Xylophone ظاهر می شود!
8. در داشبورد Functions در کنسول Firebase، روی زبانه Logs کلیک کنید. باید گزارش هایی را از تابع ببینید که نشان می دهد اجرا شده است.

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

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

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

مشکل

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

راه حل

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

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

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

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

نظارت بر برنامه های افزودنی

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

در حال حذف برنامه های افزودنی

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

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

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

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

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

1. مطمئن شوید که با حسابی که برای پست کردن زیلوفون یا لاته استفاده کرده‌اید، وارد شده باشید
2. ایجاد چند پیش نویس:
3. روی دکمه فروش چیزی در گوشه سمت راست پایین برنامه کلیک کنید
4. عنوان را ویرایش کنید تا بگویید "پیش نویس 1".
5. به قسمت پیش نویس ها بروید و تعداد پیش نویس ها را مشاهده کنید. حداقل باید دو تا باشد.
6. روی دکمه FRIENDLY MARKET در نوار بالای برنامه کلیک کنید. به این ترتیب، پیش نویس ذخیره شده ای خواهید داشت اما نیازی به ارسال آن ندارید.
7. برای "پیش نویس 2"، "پیش نویس 3" و غیره تا "پیش نویس 6" تکرار کنید.
8. وقتی «پیش‌نویس 6» را ایجاد می‌کنید، توجه کنید که «پیش‌نویس 1 از بخش پیش‌نویس‌های شما ناپدید می‌شود.
9. همانطور که با افزونه تغییر اندازه تصاویر انجام دادید، می‌توانید گزارش‌های توابع را بررسی کنید تا ببینید چه عملکردهایی فعال شده‌اند.

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

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

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

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

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

6. به طور خودکار داده های کاربر را حذف کنید

مشکل

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

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

راه حل

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

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

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

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

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

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

برنامه های افزودنی و صورتحساب

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

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

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

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

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

1. در کنسول Firebase، به داشبورد Realtime Database خود بروید.
2. گره sellers را گسترش دهید.
3. اطلاعات هر فروشنده در UID کاربر آنها کلید زده می شود. UID کاربر را انتخاب کنید.
4. در کنسول Firebase، به داشبورد احراز هویت خود بروید و آن UID کاربر را پیدا کنید.
5. منوی سمت راست UID را باز کرده و Delete Account را انتخاب کنید.

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

7. تبریک می گویم!

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

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

بعدش چی؟

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

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

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

• Cloud Functions for Firebase codelab را بررسی کنید

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

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

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

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

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