هذه المقال وغيرها تحت وسم أفضل تدوينة تعبر عن أراء اصحابها
في السنوات القليلة الماضية ، سمحت العديد من الابتكارات في مجال تكنولوجيا الويب لمصممي البرمجيات والمهندسين بسرعة تطوير التطبيقات سريعة الاستجابة للهاتف المحمول. وتشمل هذه التحسينات أطر الويب والمكتبات التي تسمح بتطوير تطبيق سريع وسهل الاستخدام لأجهزة سطح المكتب والأجهزة المحمولة. ستتبنى شركات البرمجيات الناجحة هذه التقنيات بسرعة لتظل في طليعة منافسيها من خلال تقديم منتجات جديدة ومعدلة بمعدل أسرع بكثير.يتم وصف محتوى صفحة الويب بواسطة لغة توصيف النص التشعبي (HTML). HTML5 يتطور من HTMLويتضمن سمات . 5 ،
تتضمن التطبيقات JavaScript (JS) و Cascading Style Sheets (CSS3).التطبيقات أحادية الصفحة (SPA) هي تطبيقات قائمة على الويب تقوم بتحميل صفحة HTML واحدة وبشكل ديناميكي بتحديث محتوى الصفحة حيث يتفاعل المستخدم مع التطبيق من خلال القوائم والأشرطة الجانبية. هذه التطبيقات تقدم تجربة أكثر تشابه مقارنة مع التطبيق الأصلي للمستخدم. يتم إنشاء تطبيقات ويب تتسم بالسلاسة والاستجابة ، دون إعادة تحميل للصفحة بشكل مستمر ، باستخدام تقنية AJAX (JavaScript غير متزامن و XML) ، والتي تتصل مع جانب خادم البرامج النصية لتلقي وكذلك إرسال المعلومات في مجموعة متنوعة من الأشكال (عادة من / إلى تخزين مستمر مثل قاعدة البيانات).التطبيقات التي تستخدم الوظائف الأساسية للتخزين الثابت وهي إنشاء ، قراءة ، تحديث ، حذف (CRUD) تدعى تطبيقات . CRUD هي العمليات الأساسية التي يتعين القيام بها في مستودع البيانات. في أحد أعمالنا السابقة (1) ، قمنا بمراجعة بعض تقنيات الويب الحديثة والمكتبات والأطر التابعة لأطراف الأخرى التي يمكن استخدامها للوفاء بوعد تطبيقات التصور المخصص القائم على المتصفح التفاعلي. هؤلاء تُستخدم المكتبات التقنيات المستندة إلى العميل لإلحاق عناصر Scalable Vector Graphics (SVG) ومعالجتها ،وهو معتمد في جميع المتصفحات الحديثة والهواتف الذكية والأجهزة اللوحية.
وآخرون قدمت al.2 بعض الأدوات الحديثة والمكتبات المستندة إلى الويب من أجل التصور المرتكز على جانب العميل.قدموا متخيل شبكة على شبكة الإنترنت وتطبيق محاكاة التي تستخدم HTML ،جافا سكريبت و Bootstrap.تتضمن بعض مساهمة هذا العمل وصفًا موجزًا لأحدث الأدوات والأطر الأساسية من تطبيقات الويب الحديثة ووصف بسيط للهندسة المعمارية لتطبيق الويب الحديث.بقية هذه الورقة تم تنظيمها كما يلي. في القسم 2 ، نقدم بعض المعلومات الأساسية المتعلقة بالويب الحديث تطوير وقائمة لبعض أحدث إطار والمكتبات. نحن نقدم بنية تطبيق الويب الحديثة في القسم3. نقدم مثالاً للتطبيق في القسم 4. تم توفير خاتمة عملنا في القسم الأخير
أحدث إطار الويب والمكتبات
في هذا القسم، نقوم بمراجعة بعض مكتبات JavaScript المصممة للمتصفحات الحديثة والأجهزة الذكية. استغلت هذه المكتبات التقدم في HTML5 و CSS3 وجافا سكريبت وتوفر تطبيقًا واجهة برمجية (API) للمطور لإنشاء تطبيقات صديقة للهواتف المحمولة. بالاضاقة الى أطر خفيفة الوزن و بنية تطبيق ويب وتقديم طريقة للتعامل مع التنقل بين طرق العرض المختلفة ، وعادةً قسّم التطبيق إلى طبقات تنفذ نمط تصميم Model-View-Controller (MVC). هذه المكتبات وتم تطوير أطر العمل باستخدام جافا سكريبت ، بحيث يحصل المستخدمون على التفاعل دون الحاجة إلى رحلات ذهابًا وإيابًا إلى الخوادم ودون أي ملحقات إضافية :
• مسج مكتبة شعبية "JavaScript3". يساعد jQuery في العثور على طراز كائن المستند ومعالجته عناصر (DOM) ، ومعالجة أحداث المتصفح ، والتعامل مع عدم توافق المتصفح. مسج هو الموسعة المكتبية ، وقد تم إنشاء الآلاف من الإضافات من قبل المطورين من جميع أنحاء العالم.
• AngularJS هي مجموعة أدوات لبناء الإطار الأكثر ملاءمة لتطوير التطبيقات. هو الموسعة بالكامل ويعمل بشكل جيد مع المكتبات الأخرى. كل ميزة يمكن تعديلها أو استبدالها لتناسب التطوير الفريدسير العمل وميزة الاحتياجات 4. غالبًا ما يتم استخدام AngularJS لإنشاء تطبيقات من صفحة واحدة ، حيث تكون معينة فقط يتم تحديث أجزاء الصفحة (المشاهدات الفرعية) كنتيجة لإجراءات المستخدم أو البيانات المرسلة من الخادم.تشتمل الميزات الأخرى على ربط بيانات ثنائي الاتجاه ، ومكونات قابلة لإعادة الاستخدام ، وربط عميق ، وخدمات مدمجة للواجهة الخلفية دعم التواصل والتوطين. Mobile Angular هو إطار عمل آخر لواجهة المستخدم (UI) تم إنشاؤه على AngularJS و Bootstrap لتطوير التطبيقات الصديقة للجوال.
• Angular Angular 2 (أو مجرد Angular) هو إطار جافا سكريبت مفتوح المصدر تحتفظ به Google. إنه لتطور سلفها الشعبي ، AngularJS. بصرف النظر عن جافا سكريبت ، يمكن تطوير التطبيقات الزاويةفي دارت ، أو TypeScript5. يجعل إطار العمل من الأسهل إنشاء مكونات مخصصة يمكن إضافتهاإلى مستندات HTML ولتطبيق منطق التطبيق. يستخدم الزاوي ربط البيانات على نطاق واسع ، ويشملوحدة حقن التبعية ، تدعم modularization ، وتوفر آلية التوجيه. بينما AngularJSكان القائم على MVC ، الزاوي ليست كذلك. لا يشمل هذا الإطار مكونات واجهة المستخدم.
• Bootstrap هو إطار HTML و CSS و JS الأكثر شيوعًا لتطوير أول مشاريع متحركة ومتجاوبةعلى web6. إنها مكتبة مفتوحة المصدر لمكونات واجهة المستخدم التي طورها تويتر. تم بناء المكونات باستخدام مبادئ تصميم الويب سريعة الاستجابة ، مما يجعل هذه المكتبة ذات قيمة كبيرة لتطبيقات الويب يحتاج إلى ضبط تخطيطه تلقائيًا وفقًا لدقة الشاشة.
• React هي مكتبة مفتوحة المصدر بواسطة Facebook لبناء واجهات المستخدم 8. انها غير تدخلية ويمكن أن تستخدم مع أي مكتبة أخرى أو إطار عمل. React ينشئ كائن DOM الظاهري الخاص به ، مما يقلل الوصول إلى متصفح DOM ، وبالتالي أداء أفضل. لتقديم المحتوى ، يقدم React تنسيق JSX ،وهو ملحق بناء جملة JavaScript يشبه XML. يوصى باستخدام JSX لكن اختياري.
• Node.js (أو Node) هو إطار عمل أو مكتبة ، وكذلك بيئة وقت تشغيل 9. هذا الإطار يمكن أن يكونتستخدم لتطوير برامج جافا سكريبت التي تعمل خارج المتصفح. يتضمن إطار عمل Node.js واجهة برمجة تطبيقات إلىالعمل مع نظام الملفات ، والوصول إلى قواعد البيانات ، والاستماع إلى طلبات HTTP ، وأكثر من ذلك.
هندسة تطبيقات الويب الحديثة
الشكل 1 أ يمثل بنية تطبيق الويب الحديثة. من الناحية المثالية ، لا يتم قراءة البيانات من DOM ولكن التطبيق من مخرجات HTML وتنفيذ عمليات عنصر حسب الحاجة. لا يتم تخزين البيانات في كائنات عشوائية أو في DOM. مجموعة من النماذج تمثل جميع البيانات في التطبيق. المشاهدات تلقي إعلامات التغيير (عبر الأحداث) من النماذج والتعامل مع إعادة رسم حسب الاقتضاء. تستخدم طرق العرض قالبًا لتقديم المعلومات وفقًا لتصميم واجهة المستخدم. نموذج أيضًا يقرأ ويكتب من / إلى التخزين (عادةً قاعدة بيانات) باستخدام أجاكس والبرامج النصية من جانب الخادم. هذه النصوص مكتوبة بلغات ديناميكية من جانب الخادم مثل PHP أو ASP.يعرض الشكل 1 ب بنية تطبيق AngularJS نموذجي. مكتوبة وحدات تحكم في جافا سكريبت وهي السلوك وراء عناصر DOM .. هذا يجعل من السهل اختبار التعليمات البرمجية والمحافظة عليها وإعادة استخدامها. مكتوبة الخدمات أيضاJavaScript والوصول إلى البيانات أو المعلومات من النموذج عبر طلبات AJAX (اتصالات الخادم). وجهات النظر عادة يستند إلى HTML (بما في ذلك أي CSS) ويتلقى معلومات من النموذج عبر وحدة التحكم (كما هي أو بعد بعض عمليات ما بعد المعالجة).ربط البيانات هو طريقة تلقائية لتحديث العرض كلما تغير النموذج ، وكذلك التحديث النموذج كلما تغير العرض. طرق العرض / القالب توفر أيضًا التحقق من صحة النموذج من جانب العميل. AngularJS يتيح للمطور قواعد التحقق من صحة النموذج دون الحاجة إلى كتابة رمز JavaScript. نماذج توفر القراءات ويكتب الوصول إلى التخزين الثابت ، مثل قاعدة البيانات ، ويكتب في بعض لغات البرمجة النصية من جانب الخادم (مثل PHP).تحتوي التطبيقات ذات الصفحة الواحدة (SPA) على حالات انتقال أكثر تعقيدًا من التطبيقات من جانب الخادم نظرًا لوجودها هي:
• أحداث DOM التي تسبب تغييرات في حالة صغيرة في طرق العرض ،
• أحداث النموذج عندما يتم تغيير قيم النموذج ،
 |
الشكل 1: هندسة التطبيقات لتطبيقات الويب الحديثة
|
مثال:
1. لقد استخدمنا التقنيات والمكتبات المقدمة في القسم السابق وقمنا بتطوير عدد قليل من التطبيقات المخصصة.
2. سنقدم أحد التطبيقات التفاعلية التي تم تصميمها وتطويرها في غضون أسبوع.
3. خرائط الوئام العائلي هي تفاعلية. اللون القائم. طريقة الأبوة التشخيصية التي تسمح للآباء و الأسرة لملء خرائط الحاجة المناسبة للعمر لاستخدامها كمدخلات للتحليل والتسجيل. تم تحويل الطريقةإلى أداة عبر الإنترنت تقوم بتحليل بيانات الإدخال، وتحسب درجة الأبوة وتوفر نوعًا خاصًا بالعائلة وجنسياً خرائط الوئام لتكون بمثابة مؤشرات مباشرة لكيفية انسجام العلاقة بين الآباء والأمهات حيث يتم احتساب نقاط الأبوة والأمومة ودرجة الوئام العائلي من خلال مقارنة الخرائط التي أدخلها المستخدم مع خريطة الأبوة والأمومة مثالية.
4. يختار المستخدم / الوالد لونًا (أخضر ، أصفر ، أحمر بتكرار النقر على المربع) الذي يصف بشكل أفضل نمط الأبوة والأمومة (أقل من خمس سمات مختلفة) خلال كل فترة من فترات العمر المحددة للطفل. يتم عرض خريطة إدخال الأصل باللغة يتم عرض الشكل 2 أ والخيارات المقابلة على هيئة أساطير (الشكل 2 ب). خرائط دخول مماثلة متاحة للأطفال لملئها (خريطة منفصلة للبنين والبنات). تحتوي الخرائط على ستة (6) صفوف تقابل ست فئات عمرية وخمسة (5) أعمدة
5. المقابلة لخمسة سمات تصف الجوانب الهامة الأبوة والأمومة.
6. يظهر الشكل 3 أ عينة من خرائط الإدخال النهائية المملوءة من قبل المستخدم للوالدين والأطفال. يتم إدخال هذه الخرائط بواسطة الوالد وأطفالهم (خرائط منفصلة للفتيات والفتيان). تتم مقارنة هذه الخرائط بخريطة مثالية لحسابها يتم احتساب عشرات الوئام الخاصة بالوالدين والأطفال وخرائط الانسجام المقابلة وعرضها كمخرجات.
7. يظهر الشكل 3 ب عينة من خرائط الوئام الأسري المحسوبة للآباء والأمهات والأطفال. الأساطير المقابلة هي هو مبين في الشكل 2C. ثم يتم جمع البيانات المقدمة من مختلف الأسر بغض النظر عن بلد المنشأ أو الدين أو العرق وتخزينها في قاعدة بيانات لمزيد من المعالجة والتحليل. يتم تقييم عدد من المعلمات لتقييم وئام الأسرة أو مجموعة من الأسر داخل المجتمع كدالة لبلد الوالدين والأطفال الإقامة والعمر والعرق والدين لرسم بعض الموضوعات والاتجاهات والأساليب الأبوة والأمومة.
 |
الشكل 2: يقوم المستخدم بإدخال البيانات بالنقر فوق كل مربع من الخريطة
|
 |
الشكل 3: خرائط الوئام المحسوبة التي أدخلها المستخدم والأخير
|
___________________________________________________
استنتاج
قدمنا بعضًا من أحدث الأطر والأدوات والمكتبات المتاحة على الويب والمتاحة للهواتف المحمولة التطبيقات المستندة إلى المستعرض استجابة. قدمنا أيضًا صفحة واحدة تفاعلية وخفيفة الوزن قائمة على تطبيق الويب الاجتماعي. ونحن نعتقد أن شركات البرمجيات الناجحة سوف تعتمد هذه التقنيات بسرعة لالبقاء في صدارة منافسيهم. تسمح أطر الويب والمكتبات المبتكرة بتطوير منتجات البرمجيات بشكل متواصل.كعمل مستقبلي ، سوف نستمر في البناء على التطبيقات المقدمة وغيرها من التطبيقات لتحسين سهولة الأداء. يسمح استخدام إطار التطوير المقدم بالتحول السريع مع مرور الوقت وستكون ميزات جديدة أسهل في التنفيذ.
__________________________________________________
المراجع
1. Shahzad, F., Sheltami, T.R., Shakshuki, E.M., Shaikh, O.. A Review of Latest Web Tools and Libraries for State-of-the-art Visualiza-tion. Procedia Computer Science 2016;98:100–106. URL: http://linkinghub.elsevier.com/retrieve/pii/S187705091632138X. doi:10.1016/j.procs.2016.09.017. 2. Shaikh, O., Shahzad, F.. Visual-netsim: Development of an interactive browser based network simulator. In: 2016 Future Technologies Conference (FTC). IEEE. ISBN 978-1-5090-4171-8; 2016, p. 718–724. URL: http://ieeexplore.ieee.org/document/7821684/. doi:10.1109/FTC.2016.7821684. 3. jQuery: The Write Less, Do More, JavaScript Library. ???? URL: https://jquery.com/. 4. AngularJS: Superheroic JavaScript MVW Framework. ????. URL: https://angularjs.org/.
______________________________________________________
______________________________________________________
By Ahmed Touahria
Algeria.
___________________________________________________________
ليست هناك تعليقات:
إرسال تعليق