دراسة حالة · تطبيق ويب للاستماع المشترك
افتح غرفة، وشارك رابطها، واستمع مع من تحب. بنينا YouTogether حول التشغيل المتزامن، وقائمة تشغيل يشارك الجميع في إعدادها، وكلمات الأغاني المباشرة، والمحادثة، مع خيارات شخصية تمنح كل مستمع تجربة تناسبه.
المنتج
شارك رابطًا وابدأ الاستماع كضيف. يضيف تسجيل الدخول الاختياري عبر Google الغرف المحفوظة والمفضلة وسجل الاستماع. تعود قوائم التشغيل المحفوظة مع الغرفة، ويبقى التشغيل متوقفًا عند استعادة الحالة حتى يختار المستمعون وقت بدء الموسيقى.
تتشارك الغرفة نسخة كلمات الأغنية وتعديلات توقيتها. ويختار كل مستمع لغة الترجمة ومستوى الصوت والمظهر وطريقة العرض، بالكلمات أو الفيديو. تحافظ الترجمة الاختيارية على ترتيب الأسطر والتوقيتات الأصلية.
تمنح الدردشة وستة تفاعلات سريعة وثماني شخصيات مدمجة الغرفة حضورًا اجتماعيًا. تقع أدوات التشغيل بجوار مساحة الاستماع، مع ترتيب قائمة التشغيل والمحادثة بما يناسب الحاسوب والجوال.
تتشارك الغرفة الأغنية وقائمة التشغيل وأدوات التحكم وتوقيت الكلمات والمحادثة. ويحتفظ كل مستمع بالتحكم في مستوى الصوت واللغة والمظهر وطريقة عرض الموسيقى.
تُنفَّذ الترجمة عند الطلب وتظل خاصة بالمستمع. وتبقى ملفات الكلمات المستوردة محليًا على جهازه ما لم يختر ترجمتها. تظل المكتبات المتصلة خاصة، ولا تدخل الغرفة إلا الأغاني التي يختارها.
تكامل المكتبة
يستخدم الوصول إلى مكتبة YouTube اتصالًا مستقلًا للقراءة فقط، منفصلًا عن تسجيل الدخول عبر Google. يستطيع المستمعون تصفح الفيديوهات التي أعجبتهم وقوائم التشغيل، والتبديل بين الموسيقى وجميع الفيديوهات، وإضافة الأغاني المختارة إلى قائمة الغرفة المشتركة.
تتابع عمليات الاستيراد الجماعي صفحات النتائج، وتتجاوز الأغاني قيد التشغيل أو الموجودة في القائمة، وتعرض التقدم، وتتيح الإلغاء. ويساعد الالتزام بسعة الغرفة وتقسيم العمل إلى دفعات محددة على إدارة المكتبات الكبيرة.
مصمم ليجمعكم
تمنح ثماني شخصيات المستمعين هوية منذ لحظة انضمامهم. تُبقي الدردشة والتفاعلات السريعة المحادثة قريبة من الموسيقى، بينما يرتب تصميم الجوال قائمة التشغيل والمحادثة أسفل مساحة الاستماع.
تحافظ الرسائل الواردة على موضع القراءة عند التمرير. وتبقى المسودات محفوظة عندما تحتاج الرسالة إلى إعادة إرسال. تظل دردشة الغرفة مؤقتة، مع الاحتفاظ بأحدث 100 رسالة في الذاكرة.
بنية النظام
تعمل واجهة المتصفح باستخدام React وTypeScript. ويعمل Express وSocket.IO ضمن عملية Node.js واحدة مستمرة، لتنسيق الغرف النشطة في الذاكرة. تخزّن SQLite الحسابات والمفضلة وسجل الاستماع ونقاط حفظ حالة الغرف. ويُشغَّل المحتوى مباشرة عبر مشغّل YouTube المضمّن لدى كل مستمع.
اختر الحجم الكامل لقراءة المخطط والتمرير أفقيًا. تبقى غرف الضيوف والمستمعون المتصلون والدردشة في الذاكرة، بينما تُحفظ الغرف المحفوظة وبيانات الحسابات في SQLite.
React · TypeScript · مشغّل YouTube المضمّن
Node.js · Express · Socket.IO
SQLite · الغرف المحفوظة · سجل الاستماع
مصادقة Google عبر OAuth · واجهة بيانات YouTube البرمجية
LRCLIB · lyrics.ovh · صور الأغلفة من Apple
OpenAI · كلمات مترجمة تحافظ على توقيتها
القرارات الهندسية
ينسق الخادم الأغنية الحالية وموضع التشغيل والطابع الزمني. يشغّل كل متصفح الموسيقى عبر مشغّل YouTube الرسمي المضمّن، بينما تحدد ساعة المشغّل المحلية السطر المميز من الكلمات. يحافظ تصحيح فروق التوقيت على التزامن دون انتقالات غير ضرورية داخل الأغنية.
قد يظهر الفيديو نفسه أكثر من مرة في قائمة التشغيل. ولكل ظهور هوية تشغيل مستقلة تربط أحداث الانتهاء ونتائج الكلمات بالجلسة الصحيحة. وتعيد تغييرات الأغنية ضبط عرض الكلمات قبل تحديث الشاشة التالي.
استمرار الموسيقى إعداد اختياري للغرفة. يعالج الخادم اختيارًا واحدًا قيد الانتظار في كل مرة، ويتحقق من حالة الغرفة قبل إضافته. تحظى الأغنية المختارة يدويًا بالأولوية، ويُلغي إيقاف التشغيل مؤقتًا أو مغادرة آخر مستمع للغرفة العمليات التي تجاوزتها الحالة الحالية.
تعتمد الاقتراحات الشخصية على مفضلة المستمع وسجل استماعه، بينما يعتمد التشغيل التلقائي المشترك على الاستماع الأخير في الغرفة. يرتب كلاهما أغاني فعلية من YouTube باستخدام خوارزمية تقييم. أما تكامل OpenAI المنفصل، فيتولى الترجمة الاختيارية لكلمات الأغاني.
تحتفظ البيانات الوصفية بمصدرها ووقت جلبها الأصلي عبر عمليات الاستيراد والنسخ المحفوظة. وتشمل إجراءات قطع الاتصال والحذف البيانات المؤقتة والعمليات المعلقة. تحمي علامة زمنية للحذف وتنقية النسخ الاحتياطية هذه القرارات عند الاستعادة، بينما يحافظ الرجوع إلى إصدار سابق على قاعدة البيانات الحالية.
اجتازت فحوصات إصدار 15 أكتوبر 2026 الموثقة 161 اختبارًا آليًا وبناء الإنتاج باستخدام TypeScript وVite. وشملت فحوصات المتصفح عدة مستمعين، وكلمات الأغاني، والدردشة، والتفاعلات، والمظهرين الفاتح والداكن، وتصميمي الحاسوب والجوال.
جرى التحقق من التشغيل المباشر في بيئة الإنتاج. واختُبرت صفحات المكتبة والاستيراد الجماعي باستخدام بيانات اختبار محلية واستجابات محاكاة من OAuth وYouTube.
ابنِ منتجك مع جيس تك
يجمع YouTogether تصميم المنتج والهندسة اللحظية وتكامل الواجهات البرمجية في تجربة واحدة. ونمنح الاهتمام نفسه لتطبيقات الويب التي نبنيها لعملائنا.
