تحليلات إعلامية · تقارير طويلة التنفيذ
Adam Radar
منتج لرصد وسائل التواصل والإعلام يضم لوحات تحليل واستكشاف محتوى وإنشاء تقارير مخصصة.
الدور
مهندس واجهة أمامية عبر تجربة التحليلات والتقارير المخصصة وتسجيل الدخول والإشعارات وحالات التطبيق المرنة.
النطاق
مؤشرات KPI والمشاعر والسلاسل الزمنية والكلمات وسحابة الكلمات · إنشاء التقارير وتتبع التقدم والإلغاء والنتائج المكتملة · حالة URL والتاريخ والتصفح اللانهائي والإشعارات وتنسيق cache الاستعلامات · تصدير CSV خلفي واعٍ بالفلاتر
الفريق
طُوّر ضمن شركة مسراج للتقنية
التحدي
تحويل التعقيد إلى حالة مفهومة.
التحدي
التقارير المخصصة مهام خلفية طويلة. كان على الواجهة أن تبقى دقيقة عبر الإرسال والاستطلاع كل خمس ثوان والحالات الجزئية والإلغاء والإشعارات والتصفح والفلاتر والتصدير.
النهج
نمذجت سير العمل كحالات UI صريحة، ونسقت إبطال React Query cache مع فلاتر محفوظة في URL، وشغلت الاستطلاع فقط أثناء نشاط التقرير، ومنعت الفلاتر والتصدير حتى اكتماله.
النتيجة
يمكن للمستخدم بدء التقرير ومراقبته وإلغاؤه والعودة إليه واستكشافه دون غموض، مع بقاء مجموعات النتائج الكبيرة قابلة للتصفح والتصدير من الخادم.
أبرز المساهمات
- 01بنيت لوحات رئيسية ومخصصة ورسومات متعددة وحالات تحميل وفراغ وخطأ متجاوبة.
- 02نفذت تقدم التقرير بالاستطلاع، وليس WebSockets أو server-sent events.
- 03ربطت إشعارات Firebase Cloud Messaging باكتمال التقارير.
- 04حفظت سياق التاريخ والفلاتر ضمن URL لمشاركته.
التقنيات
لقطة من سجل المستودع
نُسب 210 من 245 التزاماً في سجل المستودع المفحوص إلى هوياتي المعروفة في Git.
تابع الاستكشاف
مصحف اقرأ
تكامل واجهة لجلسات التلاوة المباشرة، وصوت المتصفح، والملاحظات على مستوى الآية، وقارئ قرآن بست لغات.
عرض دراسة الحالة
Univerta
تدفقات إدارة وتعلم واسعة، مع معالجة اعتماديات Nx أعادت التحديث الفوري ورفعت اختبار Lighthouse مضبوطاً من 78 إلى 92.
عرض دراسة الحالة
إدارة متون
منصة إدارة طورتها منذ إعدادها الأول، وتشمل مجالس التسميع المباشرة وGraphQL والحضور والشهادات.
عرض دراسة الحالة