مرحبا!
تنشر مجلة Tinkoff مقالات لمدة 5 سنوات. خلال هذا الوقت ، من مدونة على WordPress ، نمت لتصبح نظامًا عصاميًا كبيرًا من عشرات المشاريع والأدوات. أنا أدير التطوير في T-Z ، وسأتحدث اليوم بعبارات عامة عن هندسة المجلة والخدمات التي تعمل عليها.
يعمل موقع T-Z بفضل الخدمات المختلفة:
- محرك الموقع - عطارد.
- مستودع أحادي في الخط الأمامي ، أو ببساطة واجهة أحادية.
- منصة اجتماعية.
- أورانيا هي منصة تعليمية.
- الميزات - الآلات الحاسبة والاختبارات والميزات التفاعلية الأخرى.
- تطبيقات الهاتف الجوال.
- Mediaservice.
كيف يعمل T-Z من الداخل
التالي - حول ما تفعله كل من هذه الخدمات وكيف تتفاعل مع بعضها البعض.
الزئبق
تطبيق الواجهة الخلفية الرئيسي T - Z هو محركه. كنا بحاجة إلى محركنا الخاص عندما انتقلت المجلة من WordPress في عام 2017. تم تسمية المحرك ميركوري تكريما لإله الثروة والتجارة الروماني القديم ، لأننا مجلة عن المال. كتب في Python + Django.
يجمع ميركوري الصفحات التي يراها قارئ المجلة. يترجم بعض مكونات الصفحة إلى ترميز وأنماط من قوالب django الخاصة به: محتوى المقالة ، وصفحة عن المجلة ، ونتائج البحث. بالنسبة للمكونات الأحدث - رأس وقبو وملف شخصي وما إلى ذلك - يذهب إلى طبقة الخدمة ، والتي تعطي بالفعل الترميز والأنماط من الأمام.
يقوم Mercury بتخزين ومعالجة محتوى حقوق النشر نفسه - الصور والمقالات والهيكل التحريري للمواد وإحصائيات المحتوى المنشور. يوفر للمحررين ومصممي التخطيط واجهة لإدارة كل هذه الأشياء - لوحة المشرف.
يقوم مصممو التخطيط بكتابة المقالات الصحفية في صيغة html. من أجل الراحة ، تدعم لوحة المشرف أيضًا الرموز القصيرة - فهي مثل العلامات ، إلا أنها تتوسع إلى تراكيب تركيب أكثر تعقيدًا مع أنماط خاصة. قائمة الخدمات من بداية المقالة في لوحة الإدارة مكتوبة بالرمز القصير [ol type = milchin] [/ ol].
الواجهة التي يعمل معها مصمم التخطيط وأحيانًا المحرر.
الشاشة الرئيسية للمشرف. يستخدم الزر نفسه لقطع البحث والتوصيات. ثم قمنا بتحسينها وتركنا الزر لأسباب الحنين إلى الماضي.
دليل لمواد التخطيط من الرموز القصيرة والمزيد. مصممو التخطيط لديهم أيضًا أدلة خاصة بهم في مستندات google.
عندما يتم حفظ مقال في منطقة الإدارة ، يمر بها كاتب مطبوع. هذا هو نص يغير بعض التركيبات في النص بحيث تتوافق مع سياسة الطباعة والتحرير الخاصة بالمجلة. على سبيل المثال ، يضع علامة الروبل والمسافات غير المكسورة. استخدمنا حلاً جاهزًا ، فقط نعيد كتابة بعض القواعد بحيث تكون النتيجة مناسبة لنا.
يقوم Mercury بتخزين معظم البيانات في ذاكرة التخزين المؤقت: المحتوى والمنزل والمقالات وغيرها من الصفحات التي نادرًا ما تتغير. وبهذه الطريقة نوفر في الحسابات والتكاليف باهظة التكلفة من أجل إبقاء المزيد من المستخدمين على الإنترنت في نفس الوقت.
هناك صفحات في المجلة تجمع بين مقالات أخرى ، على سبيل المثال:
يتم أيضًا معالجة القواعد التي يتم من خلالها جمع هذه الصفحات بواسطة Mercury: يمكن أن تكون هذه الصيغ أو تعيين إعدادات المحرر يدويًا أو مجموعاتها. لهذه الإعدادات ، لدينا أيضًا تكوينات منفصلة.
قسم التربية عن السفر. يتم رسم المقالات الجديدة مع هذا الموضوع تلقائيًا هنا ، ويقوم المحرر بإعداد مجموعة التحديدات.
عرض التحديد. قام المحرر بجمع مقالات لها.
نتائج البحث التي يتم جمعها تلقائيًا. يتم تنفيذ البحث نفسه أيضًا في Mercury.
في أبريل 2020 ، بدأنا في اختبار إصدار جديد من محركنا ، والذي أطلقنا عليه اسم Mercury Retrograde. قمنا بفرز الشفرة بالكامل ، وتقسيمها إلى عدة خدمات وجلبنا ميزات جديدة: مآخذ الويب في لوحة المشرف ، والبحث المحسن ، وغيرها. نكتب أيضًا في Python ، ولكن مع FastAPI - مثل خلفيات المجلات الكبيرة الأخرى.
أحادية الواجهة
عندما انتقلنا أخيرًا من WordPress إلى Mercury ، أردنا إضافة التفاعل إلى صفحات المجلة. إمكانيات قوالب django محدودة هنا ، لأنه فقط عليها لا يمكننا تغيير محتوى الصفحات في وقت التشغيل.
من أجل عدم تطوير مجموعة من الصفحات المخصصة ، قررنا الاستثمار في واجهة كاملة - Monofront.
أحادية - لأننا جمعنا في مشروع واحد:
- واجهة التسجيل والتفويض.
- تعليقات.
- تذييل.
- هيدر.
- عرض معلومات التعريف للمواد.
- ملف تعريفي للمستخدم.
- إعلان ترويجي.
- نماذج الاشتراك.
- صفحة إدارة الاشتراك.
- الدورات التعليمية.
كما يعالج منطق تتبع الويب لأحداث المستخدم: من أين أتى المستخدم إلى صفحة السجل ، ما الذي يفعله بالضبط على ذلك.
كيف تبدو في المستودع.
في عام 2020 ، نريد إنشاء العديد من التطبيقات المستقلة من واجهة أحادية ، وسحب أدوات بسيطة إلى حزم npm ، وأخرى معقدة في وقت التشغيل ورفع نظام التصميم. بينما قمنا بعمل ونشر النموذج الأمامي ، فإننا نستعد لنقل عرض المواد هناك. نكتب في React و Redux و TypeScript.
منصة اجتماعية
في T-Z لا يوجد فقط محتوى المؤلف ، ولكن أيضًا المحتوى من إنشاء المستخدم. يقوم المستخدمون بالتسجيل والتعليق على المقالات والاشتراك والاتصال بهيئة التحرير من خلال استبيانات خاصة. كل هذا يحدث بفضل المنصة الاجتماعية.
للتسجيل أو التصريح للمستخدم ، تتفاعل المنصة الاجتماعية مع واجهة برمجة التطبيقات للشبكات الاجتماعية. يحفظ بيانات المستخدم القيمة ، بما في ذلك البيانات الشخصية: الاسم واللقب والبريد.
نحن نعمل على تطوير واجهة لتحرير بيانات المستخدم في ملفه الشخصي. حتى يصبح جاهزًا ، قمنا بتحويل مسؤولية تعديل الاسم والصورة على الشبكة الاجتماعية. جزئيًا ، هذه هي الطريقة التي حللنا بها مشكلة برامج الروبوت ، لأن الشبكات الاجتماعية بدأت تطلب ربطًا برقم هاتف. لكن المشكلة تبقى مع حقيقة أن النظام يعتبر شخصًا واحدًا من شبكات اجتماعية مختلفة مستخدمًا مختلفًا.
عادة ما يكون لدى مؤلفي المجلة حسابين. واحد - في عطارد ، يحدد تأليف المقالات. والثاني على منصة اجتماعية للرد على التعليقات. أعتقد أنه في المستقبل سوف ننتقل إلى حساب مشترك واحد ، ولكن في الوقت الحالي ، جعلنا الحياة أسهل قليلاً بالنسبة للمحررين: عندما يتم ربط حساب Mercury بحساب مؤلف في منصة اجتماعية ، يتم سحب جميع مقالاته تلقائيًا من هناك.
لا يمكن تطوير المجتمع بدون قواعد. هناك مخالفين لكل قاعدة. لذلك ، توفر المنصة الاجتماعية للمحررين والمشرفين واجهة للتحقق من التعليقات وحظر المخالفين.
يمكن للمشرف حذف تعليق أو إخفاء جزء منه إذا كان يتعارض مع قوانين الاتحاد الروسي أو قواعد استخدام الموقع.
يخزن النظام الأساسي الاجتماعي جميع تعليقات المستخدمين والمعلومات ذات الصلة: الإعجابات وعدم الإعجاب ، سواء كان تعليقًا على مقال أو ردًا على مستخدم آخر في سلسلة المحادثات. يتم بث التعليقات نفسها إلى Telegram عبر روبوت خاص حتى يتمكن المشرفون من التفاعل بسرعة ، ويتلقى المحررون التعليقات.
غالبًا ما ندعو قرائنا لمشاركة شيء ما مع المحررين: التحدث عن مهنتهم ، وكيفية إدارة الميزانية ، أو ما يزعجهم. هنا عليك توجيه منطق حفظ الإجابات على أسئلة النموذج والتأكد من وصولها إلى المحررين. في السابق ، بدأنا نماذج Google يدويًا وقمنا بإعادة توجيه البيانات إليها في المقدمة ، ولكننا الآن قمنا بأتمتة هذا في منصة اجتماعية.
يمكن للمحرر نفسه إنشاء استطلاع جديد ، وتحرير الأسئلة التي يتكون منها ، وتجميع الاستطلاع من الرموز القصيرة.
أورانيا
في عام 2019 ، قررنا إطلاق منصتنا التعليمية الخاصة. ظهرت كيانات جديدة على الفور: طالب ، دورة ، درس ، امتحان. لإنشاءها وتعديلها ، قمنا بتطوير لوحة خلفية ولوحة إدارة منفصلة - أورانيا. لقد أرادوا فقط مواصلة موضوع الأساطير القديمة. لكن بشكل عام ، غالبًا ما نسمي أورانيا مجرد كتاب مدرسي.
عندما يسجل الطالب ، نستخدم نفس الحساب الموجود بالفعل في النظام الأساسي الاجتماعي مثل معرفه. أعلاه نضيف البريد الحالي ، والدورة التي يأخذها الطالب ، وتقدم التعلم. بهذه الطريقة لا نمزج البيانات ، ولكن في الوقت نفسه يمكننا ببساطة المزامنة مع النظام الأساسي الاجتماعي. في نفس التعليقات ، يتم استخدام البيانات من المنصة الاجتماعية والكتب الدراسية جنبًا إلى جنب - على سبيل المثال ، لرسم ميدالية لمستخدم الدورة التي أكملها. من المريح أخذ هذه البيانات معرف واحد في كل مرة.
محتوى الدورات نفسها لا تزال أورانيا تأخذ من عطارد. تتكون الدورة من دروس ، والدرس هو في الواقع مقالة مصممة بذكاء. مع صفحات الدورة الرئيسية وصفحة الدورة القادمة لجميع الدورات ، تعمل Urania من تلقاء نفسها.
الصفحة الرئيسية للدورة "كيف تستثمر".
جزء من الدرس حول كيفية اختيار وسيط.
في نهاية كل درس - اختبارات لتعزيز المادة. في نهاية الدورة - امتحان ، أيضا في شكل اختبار.
لا تعمل الاختبارات الدورية في المجلة إلا في المقدمة ، ولكن في الدورات التدريبية نتحقق أيضًا من الإجابات على الظهر. لا يخزن البرنامج التعليمي الأسئلة وخيارات الإجابة والإجابات الصحيحة فحسب ، بل يتفاعل مع الاختبارات لأنها تطبيقات منفصلة. سأخبركم المزيد عنها.
المميزات
في T - G ، يتم نشر الآلات الحاسبة والخرائط والاختبارات واستطلاعات الرأي وغيرها من المواد التفاعلية. هذه هي تطبيقات الخط الأمامي المنفصلة. نحن نطورهم كفريق منفصل ولا نسحبهم إلى Monofront. يتم جمع الميزات في حزم JavaScript ، ويدرجها Mercury في صفحات جنبًا إلى جنب مع معلومات حول التكوينات.
يحتوي ip-calendar.js على كل منطق التفاعلية ، مما يساعد SP على إرسال التقارير في الوقت المحدد. يحتوي العنوان الكامل للحزمة على CDN على التجزئة. هذه هي الطريقة التي ندعم بها إصدار تفاعلات.
يتم استخدام معظم المتفاعلات في مكانين كحد أقصى: في صفحة منفصلة وداخل مقال حول نفس الموضوع. لكن بعضها ترسخ كثيرًا لدرجة أننا نستخدمها عشرات المرات ، على سبيل المثال:
- الاختبارات التي تساعد القراء على معرفة نوع الثروة التي يستحقونها ، أو ترسيخ المعرفة في الدورات التعليمية.
- استطلاعات الرأي التي تثير النقاش في التعليقات.
- مبادل العملات الذي يحول السعر من العملة المحلية إلى روبل بسعر الصرف الحالي ويستبدل القيمة في المقالة.
- خدمة الرموز التعبيرية التي توفر الرموز التعبيرية من مجموعة واحدة لجميع المتصفحات وجميع الأجهزة.
يقوم برنامج تحويل العملات بتحويل جميع الأسعار إلى روبل بسعر الصرف الحالي. يطلق عليه المحررون ميزة العملة.
مسح عينة في نهاية المقال.
تطبيقات الهاتف الجوال
بينما تكون التطبيقات التي نقوم بها قيد التطوير أو اختبار بيتا مغلق. ولكن يمكنك بالفعل معرفة شيء ما.
أولاً ، تستخدم أجزاء العميل بنشاط جميع الخلفيات الموجودة بالفعل في المجلة: فهي تأخذ المحتوى من Mercury ، والمستخدمين من المنصة الاجتماعية ، وتقدم الطلاب من Urania. ثانيًا ، لديهم خلفياتهم الخاصة التي تتعامل مع محتوى التطبيق الخاص وحل الإشعارات الفورية.
التطبيقات نفسها مكتوبة في React Native و TypeScript. تستند الخلفيات إلى Node.js و TypeScript.
هذا ما يبدو عليه درس في الدورة حول الاستثمار في تطبيقات الهاتف المحمول. التطبيق يحتوي على خلفية منفصلة. نقوم بمعالجة المحتوى الموجود فقط في التطبيق: دروس صوتية ومقالات لقراءة إضافية بعد الدورة. نستخدم نفس الواجهة الخلفية لإشعارات الدفع.
هذه هي النسخة الأولى من تطبيق المجلة. الميزة الرئيسية حتى الآن هي الاشتراك في المجموعات. تقوم الواجهة الخلفية لهذا التطبيق بتخزين إعدادات المستخدم ومعالجتها وهي مسؤولة أيضًا عن دفع الإشعارات.
Mediaservice
ملفات الوسائط الرئيسية في المجلة هي الصور. تقوم خدمة الوسائط بفحص كل صورة ، وتحويلها إلى webp و png ، وتحسين الحجم ، واقتصاصها من القوالب من التكوين وتحميلها على شبكة CDN. ورداً على ذلك ، يتلقى روابط إلى نتيجة المعالجة - صور بتنسيقات وأحجام مختلفة ، تم الحصول عليها من النسخة الأصلية. تضع الخدمة بعناية بقية ملفات الوسائط على شبكة CDN.
تتميز Mediaservice بشكل خاص بنموذجها بدون خادم. إنها ليست خلفية كاملة تم نشرها على خادم أو في السحابة. لا يستخدم سوى ميزات السحاب من Google ونمط الحانة / الفرع.
تستخدم Mediaservice منصة اجتماعية للصور المخصصة في التعليقات والملف الشخصي. هذه الوظيفة ليست قيد الإنتاج بعد ، لكننا نعمل على ذلك.
ماذا بعد
في المقالات التالية ، سنخبرك بالمزيد عن الخدمات والبنية التحتية وعمليات الفريق.
وظائف شاغرة T - Zh .
Githab T - Zh .