في هذه المقالة ، أتابع سلسلة المنشورات التي أريد أن أتحدث فيها عن تجربتي في كتابة امتداد الويب للمتصفحات. لدي بالفعل خبرة في إنشاء امتداد الويب ، والذي تم تثبيته بواسطة حوالي 100000 من مستخدمي Chrome ، الذين عملوا بشكل مستقل ، ولكن في هذه السلسلة من المقالات قررت الخوض في عملية تطوير امتداد الويب من خلال دمجها بإحكام مع جانب الخادم.
الجزء الأول ،
الجزء الثالث ،
الجزء الرابعاختيار إطار لجانب الخادم
في بداية فكرتي ، كنت أفكر في كيفية حفظ البيانات التي تم الحصول عليها نتيجة للبرنامج النصي. تتبادر إلى الذهن إمكانية استخدام locaStorage أو حلول مماثلة لقاعدة بيانات من جانب العميل. مع تقدم تخطيط التعليمات البرمجية على هذا المسار ، اتضح أن تنزيل الملفات وتخزينها على جهاز الكمبيوتر الخاص بالمستخدم ليس فكرة جيدة ، حيث سيتم ربط المستخدم بجهاز كمبيوتر واحد.
لذلك ، من الضروري حفظ البرامج النصية للمستخدم والبيانات التي تم الحصول عليها نتيجة لتشغيل البرامج النصية على جانب الخادم. يجب أيضًا تحميل ملفات المستخدم من خلال الخادم. يجب على المستخدم التسجيل وإعادة تعيين كلمة المرور وما إلى ذلك مباشرة من خلال واجهة امتداد الويب ، لأن التسجيل من خلال صفحة منفصلة لن يسمح بالتفاعل المريح مع امتداد الويب.
وبالتالي ، تم اختيار طريقة استخدام XHR مع RESTful API. يسمح هذا الخيار أيضًا بالاستخدام المستقبلي لنفس الشفرة لإنشاء نظام توصيل بيانات مدرج في خطوط الأنابيب. على سبيل المثال ، يمكن جدولة الحصول على مواقع موارد الويب في نتائج محرك البحث في دورة يومية. بعد ذلك ، يطلب تطبيق تابع لجهة خارجية الحصول على البيانات التي تم الحصول عليها نتيجة للنص البرمجي باستخدام واجهة برمجة التطبيقات وإنشاء رسم بياني يوضح اتجاه الموضع للتغيير في نتائج البحث.
تحتوي العديد من الإطارات بلغات برمجة مختلفة على مكتبات ووحدات نمطية وحزم للتطوير السريع لتطبيقات خادم RESTful. منذ حوالي 12 عامًا ، كنت أعمل مع العديد من الأطر المستندة إلى PHP ، وعلى مدار السنوات الثلاث الماضية ، كنت أعمل أيضًا مع Meteor.js. يعمل هذا الإطار أعلى node.js ، لذلك اخترت ذلك لجزء الخادم بسبب أدائه العالي (في المتوسط 112 مللي ثانية لكتابة سطر واحد من البيانات المستلمة من البرنامج النصي) ومجموعة غنية من الحزم الجاهزة لإنشاء التطبيق.
كمكتبة RESTful ، اخترت الحزمة
github.com/kahmali/meteor-restivus ، والتي تحتاج ، من بين أمور أخرى ، إلى تصحيحها ، لأنها لا تعمل بشكل صحيح مع تخويل الخطاف والحماية من تقنية التخمين غير المحدود لكلمة المرور.
يمتلك Restivus وظائف جيدة لوصف RESTful API ويدعم العمل بطريقة معتمدة أو مجهولة. يتم استخدام الرمز المميز و userId كتأكيد للسلطة لتنفيذ طريقة معرفة من قبل المستخدم على عنوان RESTful. يمكن تخزين هذه المعلمات في أذونات ويب localStorage واستخدامها عند استدعاء XHR.
بالنسبة للمنطقة الإدارية ، اخترت حزمة
github.com/yogiben/meteor-admin القابلة للتوسعة
والقابلة للتكوين بدرجة عالية ، مما سمح لي بتقليل الوقت لإنشاء العديد من الصفحات من نفس النوع لاحتياجات فريق الأمان.
تصميم واجهة لإضافات الويب
تلعب الواجهة دورًا حاسمًا في اختيار المنتج من قبل المستخدم. تم اختيار الراحة والبساطة كمعيار رئيسي لواجهة امتداد الويب. بعد ذلك ، تمت إضافة جانب جمالي لإكمال التطبيق بالكامل.
تم اختيار واجهة المستخدم الدلالية كإطار css / html. في الوقت نفسه ، رفضت حزم npm إضافية وآليات التجميع مثل حزمة الويب لتقليل التبعيات وحجم امتداد الويب. تتم كتابة الشفرة بأكبر قدر ممكن من الشفافية ، وذلك باستخدام ثلاث مكتبات js وملفات تابعة لجهات خارجية فقط.
لبدء العملية ، تم تجميع قائمة بالصفحات الضرورية. تم تجميع صفحات العمل مع حساب مستخدم في هذه القائمة.
- صفحة تسجيل الدخول
- صفحة التسجيل
- صفحة إعادة تعيين كلمة المرور
عند هذه النقطة ، كانت هناك مشكلة في كلمة مرور إعادة تعيين الرابط لمرة واحدة. في التطبيق العادي ، يمكن للمستخدم اتباع الرابط ، وإعادة تعيين كلمة المرور ، ثم إدخال التطبيق. يمكن أن تعمل "إضافة الويب" على "اعتراض" الروابط باستخدام navigator.registerProtocolHandler وتفويض مستخدم في إضافة ويب ، ولكن لا تدعم جميع المتصفحات ذلك. لذلك ، تقرر إعادة تعيين كلمة المرور عن طريق الرابط ، وبعد ذلك يمكن للمستخدم إدخال امتداد الويب باستخدام كلمة المرور الجديدة.
فيما يلي نموذج لتسجيل مستخدم جديد في امتداد الويب.
هنا يمكنك رؤية عناصر للتسويق الاجتماعي ، مثل رمز الدعوة وروابط للتوزيع على الشبكات الاجتماعية بجوار العنصر لإرسال سؤال إلى خدمة الدعم.
بعد التسجيل ، أو بعد التفويض ، يمكن للمستخدم تعديل ملفه الشخصي مباشرة في امتداد الويب. يؤدي هذا إلى تحسين الحل الحالي نوعيًا ، لأنه يلغي الحاجة إلى العمل مع موقع ويب منفصل. يمكن للمستخدم تنفيذ جميع الإجراءات في مكان واحد.
تنقسم جميع الشاشات إلى علامات تبويب ، مما يسمح لك بالتنقل بسرعة بين الشاشات ويلعب دور نوع من القائمة. في بعض الحالات ، للحصول على تمثيل مرئي أكثر ، يتم تقليل العناصر للتكرار الحالي. على سبيل المثال ، يتم وضع تواقيع الأزرار على الأزرار نفسها ، على الرغم من أنه من المخطط في المستقبل استبدال القائمة الرأسية للأزرار بأخرى أفقية وإزالة التوقيعات في تلميحات الأدوات. يتم ذلك لزيادة عرض ملحقات الويب للمستخدمين الجدد. هذه هي الطريقة التي يتم بها إنشاء الشاشة الرئيسية مع قائمة البرامج النصية للتكرار الحالي.
يجب إنشاء كل نص برمجي للمستخدم من قبل شخص ما. كما ذكرنا سابقًا في امتداد الويب ، يمكن أن يكون هناك نصوص عامة وكذلك نصوص خاصة. لإضافة نصوص ، استخدم النموذج البسيط التالي.
علاوة على ذلك ، يمكن للمستخدم تعيين علامة الدعاية النصية ، والتي ستمكن المستخدمين الآخرين من استخدام تجربة مجتمع ملحق الويب.
النصوص العامة لها قيود عديدة. على سبيل المثال ، لا يمكن استخدامها لبدء التشغيل على الصفحة ، في برنامج جدولة المهام ولها مفاتيح تشغيل سريعة. علاوة على ذلك ، فإن كل نص عام لديه القدرة على "التحرير" ، حيث يمكن للمستخدم إزالة علامة الدعاية وحفظها في حالة خاصة كنص خاص به. هذه الخطوات الإضافية ضرورية للحماية من المطورين عديمي الضمير. عند "تعديل" نص برمجي عام ، سيُطلب من المستخدم مراجعة الرمز والبت في استخدامه لاحتياجاته.
يتم تنزيل الملفات في امتداد الويب من خلال قراءة محتويات الملف في المخزن المؤقت ، والتشفير وإرسال المزيد عبر قناة XHR إلى الخادم. على خادم POST ، تتم معالجة الطلب وإرسال الملف إلى التخزين السحابي. في البرامج النصية ، يمكن للمستخدمين قراءة الملفات التي تم تنزيلها من خلال
GC.loadFile ('filename.ext') ؛ ، وظيفة من المكتبة الداخلية التي سيتم كتابة مقال منفصل عنها.
يمكن لكل برنامج نصي كتابة البيانات من الحسابات عن طريق استدعاء وظيفة المكتبة الداخلية. ستسجل كل مكالمة صفًا واحدًا في خلية بنفس الاسم لجميع الصفوف. بهذه الطريقة يمكنك كتابة ملفات csv. توضح الشاشة أدناه واجهة التعامل مع بيانات الإخراج. يمكن للمستخدم تنزيل البيانات مباشرة من امتداد الويب أو إرسال الملف الذي تم إنشاؤه إلى بريده الإلكتروني أو الحصول على رابط إلى واجهة برمجة التطبيقات لاستخدامه في تطبيق تابع لجهة خارجية أو حذف البيانات.
تتطلب جميع الإجراءات التي تغير حالة البرنامج النصي ، مثل إجراء الحذف ، تأكيدًا. تحتوي إضافة الويب على قيود على استخدام النوافذ المنبثقة أو تأكيد النوافذ ، حيث إن لها واجهة تعمل في النوافذ المنبثقة. لذلك ، يتم استخدام آلية إدخال كلمة التأكيد.
في المقالة التالية سأتحدث عن
"المآزق في تنفيذ تفاعل ملحقات الويب وجانب الخادم .
"