معرفی بازخورد زنده – انجمن DEV

به ویدیوی دمو در اینجا نگاهی بیندازید.

امروز قصد دارم یک برنامه افزودنی جدید گوگل را معرفی کنم که در چند هفته گذشته روی آن کار کرده ام.

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

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

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

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

چه کار میکند؟

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

هر کسی که به مخزن دسترسی داشته باشد حباب بازخورد را می بیند و می تواند در مورد آن نظر دهد. این کار همکاری با تیم خود و بهبود وب سایت خود را آسان می کند. فقط مطمئن شوید که هر دو افزونه را با یک مخزن نصب و پیکربندی کرده اید (زیرا برنامه افزودنی از مشکلات Github به عنوان پشتیبان استفاده می کند).

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

چگونه کار می کند؟

1. برنامه افزودنی یک اسکریپت کوچک را به صفحه ای که مشاهده می کنید تزریق می کند.
2. یک نوار ابزار در پایین صفحه نمایش داده می شود.
3. روی نوار ابزار کلیک کنید + برای شروع اضافه کردن بازخورد.
4. یک عنصر را در صفحه انتخاب کنید.
5. پیام بگذارید.
6. بازخورد را ارسال کنید.
7. 2 اسکرین شات گرفته می شود: یکی از کل صفحه و یکی از عنصر انتخاب شده. آنها در شعبه اصلی مخزن Github شما در داخل آپلود خواهند شد .github/feedback پوشه
8. یک شماره جدید در مخزن Github شما با بازخورد و تصاویر پیوست شده ایجاد شده است.
9. در شماره، می توانید بازخورد، اسکرین شات ها و نظرات را مشاهده کنید. می‌توانید در نظرات موضوع، بازخورد را با تیم خود در میان بگذارید.

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

چگونه آن را نصب کنیم؟

این مراحل ساده را برای نصب و پیکربندی افزونه دنبال کنید.

امکانات

• ردیابی عنصر HTML هوشمند: بازخورد شما به عنصر خاصی در صفحه پیوند داده می شود.
• نظر دادن: برای ارائه زمینه بیشتر می توانید نظراتی را به بازخورد اضافه کنید.
• اسکرین شات: هنگام ارسال بازخورد، اسکرین شات ها به صورت خودکار گرفته می شوند.
• بدون نیاز به پشتیبان: برنامه افزودنی از مشکلات Github به عنوان پشتیبان استفاده می کند، بنابراین نیازی به راه اندازی سرور ندارید.
• منبع باز: برنامه افزودنی متن باز است، بنابراین می توانید در توسعه آن مشارکت داشته باشید.
• Trusthworthy: برنامه افزودنی فقط به مجوزهایی نیاز دارد که برای کار کردن نیاز دارد، و هیچ داده شخصی را جمع آوری نمی کند. هر داده جمع آوری شده در مخزن Github شما ذخیره می شود. می‌توانید هر درخواستی را که افزونه ارائه می‌کند در تب شبکه ابزارهای توسعه‌دهنده ببینید.

چک لیست

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

به زودی نقشه راه را به مخزن اضافه خواهم کرد تا بتوانید ببینید چه ویژگی هایی برنامه ریزی شده اند و چه ویژگی هایی قبلاً با جزئیات پیاده سازی شده اند.

در حال حاضر، افزونه دارای ویژگی های زیر است:

• [x] ردیابی عناصر HTML
  • [x] سیستم انتخابگر CSS: فهرست انتخابگرها برای یافتن عنصر و نوع معیارهای اجماع برای یافتن عنصر.
  • [x] ویژگی های نمایش معمولی: نمایش، دید، کدورت و رویدادهای اشاره گر.
  • [x] مختصات بازخورد: مختصات x و y عنصر و موقعیت اسکرول درگاه دید.
  • [] ردیابی کارآمد: استفاده از نظرسنجی را متوقف کنید و به جای آن از MutationObserver استفاده کنید. اگرچه این مشکل بزرگی نیست زیرا برنامه افزودنی همیشه در حال اجرا نیست و هیچ مشکلی در عملکرد ندارد.
  • [] تطابق ضعیف URL: از مقایسه === خودداری کنید و از مقایسه با دامنه بیشتری استفاده کنید.
  • [] بازیابی عرض و ارتفاع: بازیابی عرض و ارتفاع نمای هر کسی که بازخورد ارسال کرده است.
  • [] بازیابی موقعیت اسکرول: بازیابی موقعیت اسکرول نمای هر کسی که بازخورد ارسال کرده است.
• [x] بازخورد در مورد عنصر: کلیک کردن بر روی یک عنصر.
• [x] بازخورد در انتخاب متن: انتخاب متن.
• [x] نوار ابزار
  • [x] موقعیت نوار ابزار: پایین صفحه.
  • [x] سبک های نوار ابزار: ساده و تمیز.
  • [x] نوار ابزار قابل کشیدن: نوار ابزار را به هر موقعیتی در صفحه بکشید.
  • [x] ویژگی های نوار ابزار:
  • [x] دکمه افزودن بازخورد: اضافه کردن بازخورد در مورد یک عنصر.
  • [x] دکمه انتخاب متن را اضافه کنید: در انتخاب متن بازخورد اضافه کنید.
  • [x] نمایش سمافورهای وظایف ناهمگام: وضعیت وظایف ناهمگام را نشان می دهد.
  • [] دکمه بستن نوار ابزار: نوار ابزار را ببندید.
• [x] وضعیت وظایف ناهمگام: وضعیت کارهای غیرهمگامی را که برنامه افزودنی اجرا می کند نشان می دهد.
  • [x] بارگذاری: زمانی که برنامه افزودنی در حال بارگیری است.
  • [x] موفقیت: زمانی که برنامه افزودنی با موفقیت به پایان رسید.
  • [x] خطا: زمانی که برنامه افزودنی با یک خطا به پایان رسید.
  • [] پیام های وضعیت را بهبود بخشید.
  • [] یک مهلت زمانی به وظایف همگام اضافه کنید.
• [] افزودن صفحه تنظیمات
• [] اشاره می کند
  • [] وقتی مردم در نظرات از من نام بردند.
  • [] وقتی مردم در این شماره از من نام بردند.
  • [] مسائل مربوط به من.
• [] موضوعات
  • [] موضوعات را حل کنید.
  • [] لیست تمام موضوعات
• [x] اظهار نظر
• [x] اسکرین شات های خودکار
• [x] بدون Backend مورد نیاز است
• [x] ادغام Github
  • [x] مسئله ایجاد کنید
  • [x] اسکرین شات ها را آپلود کنید
  • [x] پیوند مشکل برای کشیدن درخواست
  • [x] نظرات موضوع را دریافت کنید
  • [x] مشاهده مخزن را دریافت کنید
  • [] اشاره می کند
  • [] دریافت نام کاربری
  • [] دریافت اعلان های خوانده نشده