قدم بنك واحد نظام جديد لوظائف المشغل. هذا هو أي واجهة جديدة بالنسبة لنا - بسيطة. وبالنسبة لبعض الناس ، حتى تحول زر يسبب الذعر. كان كل شيء جديد على الفور. نتيجة لذلك ، نهض العمل. كما يحدث في كثير من الأحيان ، لم يرغب الناس في دراسة الأدلة بمفردهم. في كثير من الأحيان اتصلوا بالدعم الفني وطلبوا من الزملاء إظهار الأزرار التي يجب الضغط عليها. واستغرق إنشاء التعليمات الكثير من الوقت.
ذات مرة ، واجه منشئو الخدمة التي سنتحدث عنها اليوم نفس المشكلة. قرروا نقل التعليمات إلى شكل مطالبات تفاعلية مباشرة في النظام. أنت تعرف كيف عندما تقوم بتشغيل تطبيق أو لعبة لأول مرة ، فإنها تظهر لك: هذا هو زر إطلاق النار ، وكيفية تشغيل هذا ، واضغط على "كراوتش" للرابض ، وهلم جرا.
فقط على المستوى العالمي ، بحيث يمكنك التهيئة على أي واجهة ويمكن لأي شخص القيام بذلك ، حتى بعيدًا عن البرمجة.
هذا كيف فعلوا ذلك.
تم استدعاء الخدمة HintEd. إنه يعمل كطبقة منفصلة على واجهة أي تطبيقات ويب: يمكن أن يكون موقع ويب ، بوابة للشركات ، نوعًا من نظام العمل. تتضمن الخطط مكونات للتطبيقات وين والتطبيقات الأصلية لأجهزة iOS / Android.
المحرر في امتداد المتصفح. يقوم المستخدم بتسجيل الدخول إليه مرة واحدة عند التثبيت ، ثم يضغط على الزر الموجود في الصفحة المطلوبة وينتقل إلى وضع مطالبات الترميز. يتم دعم Chrome و Firefox و Opera و Edge و Yandex.Browser و Vivaldi.
يقوم المسؤول ، باستخدام المحرر ، بإنشاء سلسلة من المطالبات ، وربطها بعناصر الواجهة ووصف ما يجب على المستخدم فعله: النقر ، إدخال نص ، قراءة شيء مهم.
يتم تخزين تلميحات على الخادم السحابي الخاص بنا ، وفي أي وقت يمكن تحريرها أو تغيير التسلسل بسرعة.
لجعله مناسبًا للمستخدم ، يكتشف المطور عناصر التحكم في الصفحة ويربطها. بمعنى أنه عند تغيير العرض (مع نفس منطق العناصر) ، لن يتعين إعادة صياغة المطالبات.
عندما يزور أحد المستخدمين صفحة ما ، يرى تلميحات الأدوات من عنصر الطبقة الخاص بنا حسب العنصر.
اكتشاف عنصر معقد بعض الشيء. للحساب ، استخدم المشروع ما يصل إلى ثلاث مكتبات. لم تعد صفحات الويب ثابتة وتستخدم بنشاط AJAX لتحميل البيانات: على سبيل المثال ، في جدول واحد ، يمكنك رؤية المئات من العناصر المتطابقة التي تحل محل بعضها البعض. نادراً ما يمكنك العثور على تطبيقات العلامات التي تستخدم معرفات فريدة أو حتى فئات CSS فريدة من نوعها ، عندما تكون هناك مكتبات تعمل مع شجرة DOM افتراضية ، وتقوم بعض الأُطر بإنشاء معرفات وسمات بناءً على نموذج البيانات الذي يستخدمونه.
تبدأ عملية الحساب بنقرة المستخدم ، ويتم اعتراضها في document.addEventListener مرحلة الانغماس ('click'، (e) => {...}، true)؛. بعد ذلك ، يتم تمرير هدفها (e.target) إلى المكتبة الأولى للمعالجة ، وهي واحدة من وحدات مفتش تصحيح Chromium.
الإخراج هو محدد CSS و / أو xPath ، مع وجود احتمال بنسبة 97 في المئة سيحدد عنصرًا فريدًا في كل مرة. لماذا لا 100 ولماذا في الوقت الراهن؟ لا تقوم هذه الأداة المساعدة بتعيين مهمة العثور على صف فريد في جدول أو عنصر قائمة للتركيز عليه ، فمهمته بسيطة: حساب المحدد الأكثر دقة لعنصر حتى يمكن الحصول عليه في الوقت الحالي. ستتم إضافة كل شيء يتحدث عن التفرد إلى محدد CSS (الإدخال بالنوع ، والمعرف ، والفئة): سيعمل هذا السلوك على معظم العناصر الثابتة ، لكن النصائح تلميحًا تعمل في الغالب مع عناصر ديناميكية ، وبالتالي يتم نقل العملية إلى المكتبة الثانية.
والثاني هو مكتبة تقوم بإنشاء محدد CSS لعنصر ، ولكن في نفس الوقت يحتوي على عدد كبير من معلمات الإدخال التي تسمح بالتحكم المرن في نتيجة المخرجات. باستخدام هذه المكتبة ، نقوم بإنشاء عدة محددات مرة واحدة: المسار الكامل في شجرة DOM للعنصر والمسار الأكثر تجريدًا الذي يتجاهل جميع التفاصيل ، بما في ذلك السمات "id" و "class" و "href" و "src" و "data- *" ، وكذلك قائمة بالسمات المدربة والعلامات التي تستخدمها الأطر. يتيح لك ذلك الحصول على محدد CSS في حالة الحواف ، على عكس DOMPresentationUtils ، والذي يتصرف بشكل أكثر استقرارًا عند تغيير السمات أو حتى نقل عنصر في شجرة DOM.
والمكتبة الثالثة التي تضيف أنواعًا خاصة من المختارين بناءً على:
- الموضع النسبي للعنصر بالنسبة للخطوة السابقة ، والعناصر الأصلية وحواف الشاشة ؛
- محتوى العنصر: نصه ، عدد أحفاد وخصائصها الفريدة ؛
- الميزات الخارجية: العمق في شجرة DOM ، العنصر الرئيسي ، والذي يحتوي على أكثر من اثنين من المتحدرين ، إلخ.
يؤدي هذا إلى إنهاء مرحلة الحساب ، ويتم حفظ البيانات في البرنامج النصي ، ويتم نقل التحكم مرة أخرى إلى المتصفح وإيقافه فورًا بعد اكتمال الحدث لإجراء التحقق من الصحة.
التحقق من الصحة هو خطوة ضرورية ، يتم إجراؤها في تكررتين ، الأولى هي مباشرة بعد الحدث ، في هذه اللحظة يمكن لمعالجات جافا سكريبت إضافة أو إزالة السمات أو فئات العنصر الهدف أو العنصر نفسه. حدد المحددون بالتناوب عنصرًا من شجرة DOM وقارن النتيجة مع ارتباط محفوظ مسبقًا للعنصر في الكود. يتم فرز المُحددات أولاً حسب سرعة التنفيذ ، ثم تلك التي تنتج نتائج غير صحيحة تقع في أسفل القائمة ، ويتم تجديد المحددات لها. التكرار الثاني يكرر تصرفات الإجراء السابق ويبدأ قبل بداية الخطوة التالية. هذا التكرار ضروري للتأكد من أن المحدد يعمل عندما لا تعمل المعدلات الخارجية عليه (لا توجد أحداث تحوم ، نقرات ، تركيز) وأنها في سلام نسبي - تمامًا كما كان قبل تحديد العنصر.
تعمل المكتبات أيضًا بشكل جيد مع iframe ، حيث تتشابه العملية بالنسبة لها فيما عدا إنشاء محدد حتى iframe نفسه (وحتى iframe داخل iframe الأخرى) ، والذي يتكون من الجيل المتكرر من المسارات الفرعية داخل كل iframe والاتحاد من الخارج.
كيف يتم عرضها؟
لإظهار المطالبات لمستخدمي النظام ، يمكنك استخدام نفس المكون الإضافي للمتصفح أو تضمين عنصر واجهة المستخدم في الصفحة.
يتم اختيار الثانية في كثير من الأحيان ولا يتطلب أي إجراء من المستخدم لتثبيت أي شيء إضافي.
لدى HintEd العديد من التطبيقات المصغّرة واللاعبين لتضمينها في الأنظمة. يمكن أن يكون هذا اللاعب خفيف الوزن يقوم ببساطة بتشغيل تلميحات لمشغلات معينة ، أو عنصر واجهة تعامل مستخدم مع زر ، وذلك بالنقر فوق المستخدم الذي سيقوم بإعداد قائمة بالتلميحات المتاحة ويكون قادرًا على تشغيلها عندما يحتاج إلى ذلك. كل هذه الوحدات يمكن استخدامها في التفاعل / الزاوي ، في تطبيقات الويب ، أو ككائن عالمي على الصفحة.
وبالتالي ، يمكنك تقديم نصائح لأي نظام: مغلق للمطورين الخارجيين أو لتطوير الشركة. ويمكن للمطورين استخدام واجهات برمجة التطبيقات لتشغيل البرامج النصية وتلميحات الأدوات مع المنطق المعقّد ، على سبيل المثال ، بالمرور فوق عنصر معين.
واجهة الإدخال السريع هي اللغة الروسية والإنجليزية ، لأن المطور يركز أيضًا على السوق الغربية (من الصعب جدًا تعليم الأشخاص لأنظمتهم بسبب حاجز اللغة والحاجة إلى توجيه كل شيء بإصبعك عن بُعد).
من بين عملاء HintEd ، هناك العديد من الشركات من الخدمات المصرفية للأفراد ، و HoReCa ، وبناء النفط والغاز ، حيث لا يميز المستخدمون النهائيون دائمًا مبرمج عن مسؤول النظام ووحدة النظام من المعالج. لذلك ، سيكون مفيدًا في كل من الدمج وكنظام يمكن تقديمه للعميل كخدمة.
بالنسبة إلى الإصدار التجريبي للبنك ، قمنا بعمل 10 سيناريوهات كبيرة إلى حد ما غطت الواجهة بأكملها تقريبًا وشرحت للمستخدمين كيفية العمل في النظام. في العملية المعتادة ، سوف يستغرق الأمر عدة أشهر لتطوير مثل هذه المساعدة التفاعلية ، وسوف يستغرق الأمر بنفس المقدار لكتابة التعليمات. وهنا يمكنك الرسم مباشرة أعلى الواجهات.
تم تنفيذ الأداة المصغّرة لمدة ثلاثة أسابيع (وقضى جزء كبير من الوقت في الاتفاق مع البنك ، بما في ذلك مع موظفي الأمن). حقن المستخدمين ، بكى ، ولكن درس النظام. كانت هناك مجموعة تحكم درست بالطريقة القديمة: مع أربعة مرشدين شخصيًا أو على Skype. لقد توقعوا تسريع التدريب بنسبة 20 في المائة ، لكن تصنيف العميل هو 43.9 في المائة. معدل الخطأ في العمليات انخفض أيضا. انخفضت تكلفة التدريب بنحو 20 ٪.
حتى السلام والصداقة ومضغ العلكة! لقد اجتاز المنتج مسرعنا مؤخرًا ، لمدة ثلاثة أشهر من البرنامج الذي انغمسنا فيه بعمق ونقوم الآن بتوزيعه على عملائنا. إذا كان لديك برنامج مخيف وتحتاج إلى معرفة ذلك - إليك بريدي: SZinkevich@croc.ru.