Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap 4 وتطوير قسم المستخدم باستخدام Angular 4

173 views

Published on

دورة في تعلم Bootstrap 4 و Angular 4
مسار تطوير تطبيقات الويب والموبايل

ويكيلوجيا هاكاثون - Wikilogia Hackathon

Published in: Education
  • Login to see the comments

Bootstrap 4 وتطوير قسم المستخدم باستخدام Angular 4

  1. 1. ‫املستخدم‬ ‫قسم‬ ‫تطوير‬ ‫و‬ ‫باستخدام‬ ‫الجلسة‬‫الثالثة‬
  2. 2. ‫منصات‬‫للمستخدم‬ ‫الويب‬ ‫واجهة‬ ‫لتصميم‬ 1
  3. 3. ‫هي؟‬ ‫ما‬ ‫مجموعة‬‫قوالب‬ ‫من‬HTML،CSS‫و‬JavaScript‫شكل‬ ‫ىلع‬ ‫لالستخدام‬ ‫جاهزة‬ ‫لواجهة‬ ‫مكونات‬‫املستخدم‬: ‫إرسال‬ ‫قوالب‬(Forms)‫أزرار‬ ،(Buttons)‫الجداول‬ ،(Tables)‫املالحة‬ ،(Navigations)، ‫املنسدلة‬(Dropdowns)‫تنبيهات‬ ،(Alerts)‫منبثقة‬ ‫لوائح‬ ،(Modals)‫عالمات‬ ، ‫التبويب‬(Tabs)،‫دائري‬ ‫شريط‬(Carousel)‫الخ‬.
  4. 4. ‫مشهورة‬ ‫تصميم‬ ‫منصات‬ 1. Bootstrap 2. Semantic-UI 3. Foundation 4. Materialize 5. Material UI 6. Pure 7. Skeleton 8. UIKit 9. Milligram 10. Susy
  5. 5. ‫استخدامها؟‬ ‫يتم‬ ‫ملاذا‬ •‫متجاوب‬ ‫ويب‬ ‫تصميم‬‫الشاشة‬ ‫حجم‬ ‫حسب‬: ‫اللوحية‬ ‫لألجهزة‬ ‫أولوية‬ ‫إعطاء‬ •‫املتصفحات‬ ‫أنواع‬ ‫كافة‬ ‫مع‬ ‫متالئم‬. •‫االنتاجية‬ ‫زيادة‬. •‫املجتمع‬ ‫دعم‬: ‫قوالب‬‫ل‬‫ويب‬ ‫صفحات‬
  6. 6. ‫إلى‬ ‫مقدمة‬ 2
  7. 7. ‫عن‬ ‫ملحة‬Bootstrap Bootstrap‫إطار‬ ‫أول‬ ‫هو‬‫لتطوير‬‫تستجيب‬ ‫اإلنترنت‬ ‫شبكة‬ ‫ىلع‬ ‫مشاريع‬ ‫املحمولة‬ ‫األجهزة‬ ‫وتراعي‬ ‫الشاشة‬ ‫بحجم‬ ‫ُّر‬‫للتغي‬
  8. 8. ‫تاريخ‬Bootstrap •‫صدرت‬‫عام‬ ‫يف‬ ‫مرة‬ ‫ألول‬2011 -‫قبل‬ ‫من‬Mark Otto‫و‬Jacob Thornton •‫اإلصدار‬‫الحالي‬‫لها‬3.3.7 •‫اإلصدار‬4.0‫قريبًا‬ ‫سيصدر‬ -‫حاليا‬‫نسخة‬،‫ألفا‬‫ولكنها‬‫مستقرة‬ ‫الغالب‬ ‫يف‬ -‫هذا‬ ‫يغطي‬‫النسخة‬ ‫املساق‬4.0، ‫ولكن‬‫الصفوف‬ ‫معظم‬‫ىلع‬ ‫تنطبق‬ ‫تزال‬ ‫ال‬3.3.7 •‫اإلطار‬‫األول‬ ‫الشامل‬ -‫بسرعة‬ ‫شعبية‬ ‫اكتسب‬‫كبيرة‬
  9. 9. ‫املتجاوب‬ ‫التصميم‬ 3
  10. 10. ‫املتجاوب‬ ‫التصميم‬ ‫ملاذا‬ •‫طريق‬ ‫عن‬ ‫اإلنترنت‬ ‫مواقع‬ ‫إلى‬ ‫متزايد‬ ‫بشكل‬ ‫يصلون‬ ‫املستخدمون‬ ‫بحجوم‬ ‫تختلف‬ ‫والتي‬ ‫اللوحية‬ ‫األجهزة‬‫شاشاتها‬ •‫اآلن‬ ‫بعد‬ ‫صالحًا‬ ‫يكون‬ ‫لن‬ ‫الواحد‬ ‫الحجم‬ ‫ىلع‬ ‫يعتمد‬ ‫الذي‬ ‫الحل‬ •‫ّف‬‫ي‬‫التك‬‫مع‬"‫العرض‬ ‫إطار‬"‫باملستخدم‬ ‫الخاص‬ ‫املوقع‬ ‫نواة‬ ‫ضمن‬ ‫ذلك‬ ‫بناء‬
  11. 11. ‫اللوحية‬ ‫لألجهزة‬ ‫التصميم‬ ‫أولوية‬ Mobile First Design ‫التقليدي‬ ‫األسلوب‬ ‫اللوحية‬ ‫باألجهزة‬ ‫البدء‬ ً‫ال‬‫أو‬ ‫الجوال‬ ‫قيود‬ ‫مراعاة‬ ‫يتم‬
  12. 12. ‫املتجاوب‬ ‫التصميم‬ ‫أسس‬ •‫الشبكة‬ ‫نظام‬(Grid System) ‫سنقوم‬‫ب‬‫التعامل‬‫الشبكة‬ ‫نظام‬ ‫مع‬‫سيأتي‬ ‫فيما‬ •Fluid images ‫دعم‬ ‫نشاهد‬ ‫سوف‬Bootstrap‫الحق‬ ‫لها‬ •‫الوسائط‬ ‫استعالمات‬(Media Queries)
  13. 13. ‫ا‬‫ستعالمات‬‫الوسائط‬(Media Queries) ‫سبيل‬ ‫ىلع‬ ،‫العرض‬ ‫إطار‬ ‫حجم‬ ‫ىلع‬ ‫باالعتماد‬ ‫التصاميم‬ ‫لتطبيق‬ ‫تقنية‬ ‫املثال‬: @media (min-width: 992px) { /* CSS styles customized for desktop */ }
  14. 14. ‫بذلك؟‬ ‫القيام‬ ‫يمكننا‬ ‫كيف‬ ‫مبنية‬ ‫املستخدم‬ ‫واجهات‬ ‫لتصميم‬ ‫منصة‬ ‫ىلع‬ ‫باالعتماد‬ ‫بالتصميم‬ ‫البدء‬ ‫املتجاوب‬ ‫التصميم‬ ‫أساس‬ ‫ىلع‬
  15. 15. ‫الشبكي‬ ‫النظام‬ 4
  16. 16. ‫العرض‬ ‫إطار‬(Viewport) <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> •‫الوصفي‬ ‫الوسم‬‫العرض‬ ‫إلطار‬: -‫الشاشة‬ ‫عرض‬ ‫تعيين‬ ‫يضمن‬‫يساوي‬ ‫بما‬‫عرض‬‫الجهاز‬ ‫هذا‬ ‫أخذ‬ ‫مع‬ ‫املحتوى‬ ‫إظهار‬ ‫ويتم‬‫العرض‬‫االعتبار‬ ‫بعين‬. -‫لتكون‬ ‫املواقع‬ ‫تصميم‬‫العرض‬ ‫إطار‬ ‫لحجم‬ ‫استجابة‬ ‫ذات‬ -‫شبكة‬ ‫نظام‬Bootstrap
  17. 17. CSS Flexbox Layout •‫يف‬ ‫وأبسط‬ ‫أسهل‬ ‫خيارات‬CSS •‫الحجم‬ ‫معالجة‬ ‫بسهولة‬ ‫يمكنها‬(‫الديناميكي‬/‫ثابت‬ ‫الغير‬) ‫املحتوى‬ ‫لحاويات‬ •‫االتجاه‬ ‫عن‬ ‫مستقلة‬ ‫عرض‬ ‫بنية‬(‫يساري‬ ‫أم‬ ‫يميني‬)
  18. 18. ‫بنية‬ ‫ملاذا‬Flexbox‫لـ‬bootstrap •‫األب‬ ‫العنصر‬ ‫ضمن‬ ‫للمحتوى‬ ‫األفقية‬ ‫املحاذاة‬ ‫تطبيق‬ ‫سهولة‬ •‫بمساعدة‬ ‫الشاشات‬ ‫ودقة‬ ‫األجهزة‬ ‫حسب‬ ‫العناصر‬ ‫ترتيب‬ ‫إعادة‬ ‫سهولة‬Media Queries •‫االتجاه‬ ‫عن‬ ‫مستقلة‬ ‫عرض‬ ‫بنية‬(‫يساري‬ ‫أم‬ ‫يميني‬) •‫ىلع‬ ‫فقط‬ ‫باالعتماد‬ ‫األعمدة‬ ‫أطوال‬ ‫مساواة‬ ‫سهولة‬CSS‫العرض‬ ‫لبنى‬ ‫وذلك‬ ‫الشبكة‬ ‫ىلع‬ ‫املعتمدة‬
  19. 19. ‫شبكة‬Bootstrap
  20. 20. ‫شبكة‬Bootstrap •‫تتيح‬Bootstrap‫خمسة‬‫صفوف‬: sm for small, md for medium, lg for large, and xl for extra large screen sizes •‫يف‬ ‫سطر‬ ‫كل‬Bootstrap‫مقسم‬‫إلى‬12‫عمودًا‬ •‫الصفوف‬ ‫تستخدم‬col-*, .col-sm-*, col-md-*, and .col-lg-* ‫لتعريف‬‫حجوم‬ ‫ملختلف‬ ‫املناسبة‬ ‫العرض‬ ‫بنية‬‫الشاشات‬ •‫املحتوى‬ ‫من‬ ‫قطعة‬ ‫كل‬ ‫ستشغله‬ ‫الذي‬ ‫األعمدة‬ ‫عدد‬ ‫تحدد‬ ‫يتم‬ ‫هو‬ ‫مجموعها‬ ‫يكون‬ ‫بحيث‬ ‫السطر‬ ‫ضمن‬12‫مضاعفاته‬ ‫من‬ ‫أو‬
  21. 21. ‫شبكة‬Bootstrap
  22. 22. ‫شبكة‬ ‫خصائص‬Bootstrap
  23. 23. Push and Pull Extra Small Screens Small, Medium, Large and Extra Large Screens
  24. 24. ‫املحتوى‬ ‫ترتيب‬ ‫إعادة‬ Extra Small Screens Small, Medium, Large and Extra Large Screens
  25. 25. ‫املتداخلة‬ ‫األعمدة‬
  26. 26. ‫مع‬ ‫الربط‬Bootstrap ‫ملفات‬ ‫تضمين‬ ‫يتم‬Bootstrap‫التالية‬ ‫الطرق‬ ‫بإحدى‬: •‫موقع‬ ‫من‬ ‫امللفات‬ ‫تحميل‬http://getbootstrap.com/ ‫الويب‬ ‫صفحة‬ ‫مع‬ ‫امللفات‬ ‫هذه‬ ‫وربط‬ •‫م‬ ‫الويب‬ ‫صفحة‬ ‫ربط‬‫ع‬‫من‬ ‫امللفات‬ ‫من‬ ‫خارجية‬ ‫نسخة‬ CDN (Content Delivery Network)‫وأحد‬‫لها‬ ‫املزودات‬‫هو‬MaxCDN •‫تحميل‬‫للحزم‬ ‫مدير‬ ‫خالل‬ ‫من‬ ‫امللفات‬(‫هو‬ ‫حالتنا‬ ‫يف‬npm) ‫لذلك‬ ‫سنتطرق‬‫الحقًا‬.
  27. 27. ‫قالب‬Bootstrap
  28. 28. ‫عملي‬ ‫تطبيق‬! ‫السابقة‬ ‫األدوات‬ ‫باستخدام‬‫امللف‬ ‫يف‬ ‫التمرين‬ ‫أكمل‬ ‫الصفحة‬ ‫بربط‬ ‫قم‬‫مع‬‫تنسيقها‬ ‫أعد‬ ‫ثم‬ ‫باستخدام‬‫املرفقة‬ ‫الصورة‬ ‫لتشابه‬
  29. 29. ‫مكونات‬ ‫بعض‬ 5
  30. 30. Navigation
  31. 31. Icon Fonts (Font Awesome)
  32. 32. ‫املستخدم‬ ‫مدخالت‬(User Input)
  33. 33. ‫املستخدم‬ ‫مدخالت‬(User Input)
  34. 34. ‫الجداول‬(Tables)
  35. 35. ‫الجداول‬(Tables)
  36. 36. Bootstrap Cards
  37. 37. Images & Media
  38. 38. Responsive Embed
  39. 39. Alerting User (Badges)
  40. 40. Alerting User (Alter)
  41. 41. Alerting User (Progress Bar)
  42. 42. ‫مكونات‬ 6
  43. 43. Bootstrap‫مع‬JS ‫دعم‬bootstrap‫لـ‬JavaScript‫إضافات‬ ‫خالل‬ ‫من‬(plugins) ‫ىلع‬ ً‫ء‬‫بنا‬ ‫مكتوبة‬ ‫اإلضافات‬Jquery ‫حدة‬ ‫ىلع‬ ٌ‫ل‬‫ك‬ ‫اإلضافات‬ ‫تضمين‬ ‫يمكن‬
  44. 44. Bootstrap‫مع‬JS
  45. 45. ‫إضافات‬ ‫استخدام‬Bootstrap JS ‫ملفات‬ ‫تضمين‬JavaScript‫الوسم‬ ‫نهاية‬ ‫يف‬<body> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/tether/dist/js/tether.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  46. 46. ‫مكونات‬Bootstrap JS •‫مكونات‬JS‫سطر‬ ‫أي‬ ‫كتابة‬ ‫بدون‬ ‫تستخدم‬ ‫أن‬ ‫يمكن‬JS: -data-* attributes(،‫املثال‬ ‫سبيل‬ ‫ىلع‬data-toggle, data-spy) -‫استخدام‬ ‫يف‬ ‫جدًا‬ ‫واضح‬ ‫منهج‬‫اإلضافات‬ -‫هذا‬ ‫نستكشف‬ ‫سوف‬‫املنهج‬‫يف‬‫الجلسة‬ ‫هذه‬ •‫متاحة‬ ‫كاملة‬ ‫برمجية‬ ‫واجهة‬‫األمر‬ ‫لزم‬ ‫إذا‬ -‫إلى‬ ‫تحتاج‬‫كتابة‬ ‫بقواعد‬ ‫إملام‬JavaScript‫و‬JQuery
  47. 47. Collapse
  48. 48. Collapse
  49. 49. Tooltips
  50. 50. Popover <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data- placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button>
  51. 51. Modals
  52. 52. Modals
  53. 53. Carousel
  54. 54. Carousel
  55. 55. ‫عملي‬ ‫تطبيق‬! ‫السابقة‬ ‫األدوات‬ ‫باستخدام‬‫امللف‬ ‫يف‬ ‫التمرين‬ ‫أكمل‬ ‫بإضافة‬ ‫قم‬‫املرف‬ ‫بامللفات‬ ‫باالستعانة‬ ‫الويب‬ ‫صفحة‬ ‫إلى‬‫قة‬
  56. 56. ‫و‬ 7
  57. 57. JQuery •‫للـ‬ ‫خفيفة‬ ‫مكتبة‬JavaScript •‫بها‬ ‫تتميز‬ ‫التي‬ ‫املزايا‬: -‫مع‬ ‫التعامل‬HTML/DOM -‫مع‬ ‫التعامل‬CSS -‫لألحداث‬ ‫توابع‬(Events)‫بالـ‬ ‫خاصة‬HTML -‫وتحريك‬ ‫تأثيرات‬ ‫إضافة‬ -AJAX •‫مكونات‬Bootstrap JavaScript‫ىلع‬ ‫مبنية‬JQuery
  58. 58. ‫بـ‬ ‫التكابة‬ ‫بنية‬JQuery •$(selector).action() -$:‫تعريف‬/‫لـ‬ ‫الوصول‬Jquery -(selector:)‫عنصر‬ ‫إليجاد‬ ‫بأمر‬ ‫القيام‬HTML -action():‫سابق‬ ‫عناصر‬ ‫من‬ ‫تحديده‬ ‫تم‬ ‫ما‬ ‫ىلع‬ ‫تنفيذه‬ ‫سيتم‬ ‫الذي‬ ‫الحدث‬‫ًا‬ -‫املثال‬ ‫سبيل‬ ‫ىلع‬:$(“p”).hide(), $(“#mycarousel”).carousel(‘pause’)
  59. 59. ‫عن‬ ‫مثال‬Bootstrap JQuery <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>
  60. 60. ‫محددات‬(JQuery Selectors) •‫عنصر‬ ‫تحديد‬HTMLً‫ال‬‫مث‬ ،:“P”،“button” •‫الفريد‬ ‫املعرف‬ ‫باستخدام‬ ‫تحدد‬(Id#)،ً‫ال‬‫مث‬:“#myCarousel” •ً‫ال‬‫مث‬ ،‫صف‬ ‫تحديد‬:“.btn”،“.btn.btn-default” •ً‫ال‬‫مث‬ ،‫معامل‬ ‫تحديد‬:“[href]”،“[data-toggle=“tooltip”]” •‫الحالي‬ ‫العنصر‬ ‫تحديد‬:$(this) •‫غيرها‬ ‫وطرق‬..
  61. 61. ‫أحداث‬(JQuery Events) •‫بنية‬ ‫ىلع‬ ‫أحداث‬ ‫يسبب‬ ‫الويب‬ ‫صفحة‬ ‫مع‬ ‫املستخدم‬ ‫تفاعل‬DOM -‫الفأرة‬:click, dblclick, mouseenter, mouseleave -‫املفاتيح‬ ‫لوحة‬:keypress, keydown, keyup -‫اإلرسال‬ ‫قوالب‬:submit, change, focus, blur -‫النافذة‬ ،‫املستند‬:load, resize, scroll, unload •‫أحداث‬ ‫توابع‬Jquery:ً‫ال‬‫مث‬:ready(), click(), dblclick(), mousedown(), on()
  62. 62. ‫للـ‬ ‫األسبقية‬ ‫املعالجات‬ 8
  63. 63. CSS •‫تعد‬CSS‫ع‬ ‫ىلع‬ ‫متكرر‬ ‫بشكل‬ ‫وتطبيقها‬ ‫تصاميم‬ ‫لتعريف‬ ‫األمثل‬ ‫الحل‬‫ناصر‬ HTML •CSS‫متحوالت‬ ‫تعريف‬ ‫نوع‬ ‫من‬ ‫مزايا‬ ‫تغطي‬ ‫ال‬(defining variables)‫تحديدات‬ ، ‫متداخلة‬(nesting selectors)‫تعابير‬ ،(expressions)‫توابع‬ ،(functions) -‫التعديل‬ ‫أو‬ ‫التصليح‬ ‫عملية‬ ‫يف‬ ‫معاناة‬ ‫إلى‬ ‫يؤدي‬ ‫هذا‬
  64. 64. CSS Preprocessors •‫مشهور‬ ‫منها‬ ‫العديد‬: -Less -Sass(Syntactically Awesome Style Sheets) (Sassy CSS) syntax examined in this course Scss -stylus •‫إلى‬ ‫جميعها‬ ‫ترجمتها‬ ‫يتم‬CSS‫استخدامه‬ ‫قبل‬ ‫تلقائي‬ ‫بشكل‬ ‫التقليدية‬‫ا‬ ‫الويب‬ ‫صفحة‬ ‫يف‬ •‫إلى‬ ‫سنتطرق‬Less‫و‬Sass‫مختصر‬ ‫بشكل‬ •Bootstrap 3‫تستخدم‬ ‫كانت‬Less‫انتقلت‬ ‫بينما‬Bootstrap 4‫إلى‬Sass
  65. 65. ‫لـ‬ ‫نمطية‬ ‫مزايا‬CSS Preprocessors •‫املتحوالت‬ •‫متداخلة‬ ‫تحديدات‬(nesting selectors) •Mixins(‫عن‬ ‫تصريح‬ ‫من‬ ‫أكثر‬ ‫عن‬ ‫تعبر‬ ‫أن‬ ‫يمكنها‬CSS‫املتحوالت‬ ‫عكس‬ ‫ىلع‬) •‫تعابير‬(expressions)‫و‬‫توابع‬(functions)
  66. 66. ‫املتحوالت‬ Less @lt-gray: #ddd; @background-dark: #512DA8; @carousel-item-height: 300px; .navbar-inverse { background:@background-dark; } .carousel .carousel-item { height: @carousel-item-height; } Scss $lt-gray: #ddd; $background-dark: #512DA8; $carousel-item-height: 300px; .navbar-inverse { background:$background-dark; } .carousel .item { height: $carousel-item-height; }
  67. 67. ‫التعشيش‬(Nesting) Less @background-dark: #512DA8; @carousel-item-height: 300px; .carousel { background:@background-dark; .carousel-item { height: @carousel-item-height; img { position: absolute; top: 0; left: 0; min-height: 300px; } } } Scss $background-dark: #512DA8; $carousel-item-height: 300px; .carousel { background:$background-dark; .carousel-item { height: $carousel-item-height; img { position: absolute; top: 0; left: 0; min-height: 300px; } } }
  68. 68. Mixins ‫مالحظة‬:‫استخدم‬.zero-margin() { … }‫إذا‬ ‫تريد‬ ‫ال‬ ‫كنت‬.zero-margin‫يتم‬ ‫أن‬ ‫نفسها‬ ‫الترجمة‬ ‫عملية‬ ‫يف‬ ‫تضمينها‬
  69. 69. Mixins with Parameters Less .zero-margin (@pad-up-dn: 0px, @pad-left-right: 0px) { margin:0px auto; padding: @pad-up-dn @pad-left-right; } .row-header { .zero-margin(); padding:0px auto; } .row-content { .zero-margin (50px, 0px); border-bottom: 1px ridge; min-height:400px; } Scss @ mixin zero-margin ($pad-up-dn, $pad-left-right) { margin:0px auto; padding: $pad-up-dn $pad-left-right; } .row-header { @include zero-margin(0px, 0px); padding:0px auto; } .row-content { @include zero-margin (50px, 0px); border-bottom: 1px ridge; min-height:400px; }
  70. 70. ‫متحوالت‬ ‫مع‬ Mixins Less .zero-margin (@pad-up-dn: 0px, @pad-left-right: 0px) { margin:0px auto; padding: @pad-up-dn @pad-left-right; } .row-header { .zero-margin(); padding:0px auto; } .row-content { .zero-margin (50px, 0px); border-bottom: 1px ridge; min-height:400px; } Scss @ mixin zero-margin ($pad-up-dn, $pad-left-right) { margin:0px auto; padding: $pad-up-dn $pad-left-right; } .row-header { @include zero-margin(0px, 0px); padding:0px auto; } .row-content { @include zero-margin (50px, 0px); border-bottom: 1px ridge; min-height:400px; }
  71. 71. ‫رياضية‬ ‫عمليات‬ Less @carousel-item-height: 300px; .carousel-item { height: @carousel-item-height; } .carousel-item .item-large{ height: @carousel-item-height *2; } Scss $carousel-item-height: 300px; .carousel-item { height: $carousel-item-height; } .carousel-item .item-large{ height: $carousel-item-height *2; }
  72. 72. ‫منصات‬‫املستخدم‬ ‫لقسم‬ 9
  73. 73. ‫بحاجتها؟‬ ‫نحن‬ ‫ملاذا‬ •‫الـ‬ ‫بنية‬ ‫مع‬ ‫التعامل‬ ‫إدارة‬ ‫يف‬ ‫التعقيد‬ ‫حجم‬DOM‫وتحديثات‬‫البيانات‬‫يدويًا‬ •‫جيد‬ ‫بشكل‬ ‫معرفة‬ ‫تطبيقات‬ ‫بنى‬ ‫إلى‬ ‫الحاجة‬: -Model View Controller / Model View View Model / Model View Whatever -‫النموذج‬ ‫ربط‬(Model)‫الواجهة‬ ‫مع‬(View:)controllers, view models
  74. 74. ‫البرمجية‬ ‫املكتبة‬(Library) ‫مجموعة‬‫من‬‫واجهة‬ ‫خالل‬ ‫من‬ ‫معين‬ ‫سلوك‬ ‫لتنفيذ‬ ‫اإلجرائيات‬ ‫املطلوب‬ ‫السلوك‬ ‫تنفيذ‬ ‫يتم‬ ‫خاللها‬ ‫من‬ ‫والتي‬ ‫برمجية‬. •‫السلوك‬ ‫استخدام‬ ‫إعادة‬ •‫منفصلة‬ ‫وحدات‬ ‫إلى‬ ‫التجزيء‬ •‫املثال‬ ‫سبيل‬ ‫ىلع‬:JQuery
  75. 75. ‫البرمجية‬ ‫العمل‬ ‫أطر‬(Frameworks) •‫عامة‬ ‫إجرائيات‬ ‫البرنامج‬ ‫يقدم‬ ‫خالله‬ ‫من‬ ‫والذي‬ ‫معين‬ ‫تجريد‬ ‫برمجية‬ ‫أسطر‬ ‫خالل‬ ‫من‬ ‫خاص‬ ‫بشكل‬ ‫تعديلها‬ ‫يمكن‬ ‫والتي‬ ‫املستخدم‬ ‫قبل‬ ‫من‬ ‫مكتوبة‬ ‫إضافية‬. •‫تؤمن‬ ‫والتي‬ ‫االستخدام‬ ‫إلعادة‬ ‫قابلة‬ ‫عاملية‬ ‫عمل‬ ‫بيئة‬ ‫كبيرة‬ ‫برمجية‬ ‫منصة‬ ‫من‬ ‫كجزء‬ ‫معينة‬ ‫إجرائيات‬. •‫املثال‬ ‫سبيل‬ ‫ىلع‬:Angular, Ember, Backbone
  76. 76. ‫البرمجية‬ ‫املنصة‬ •‫مبدأ‬Hollywood: -Don’t call us, we’ll call you! •‫التحكم‬ ‫آلية‬ ‫عكس‬ •‫التصريحية‬ ‫البرمجة‬ ‫أم‬ ‫باألوامر‬ ‫البرمجة‬(Imperative vs Declarative Programming)
  77. 77. ‫منصات‬JavaScript‫البرمجية‬ •‫الصفحة‬ ‫تطبيقات‬‫الواحدة‬ •Model-View-Controller (MVC) / Model-View-ViewModel (MVVM) / Model-View-Whatever -‫البيانات‬ ‫ربط‬(Data binding)‫التوجيه‬ ،(Routing) •‫بالـ‬ ‫برمجية‬ ‫أسطر‬JS،‫التوسع‬ ،‫االستخدام‬ ‫إلعادة‬ ‫قابلة‬ ‫التصحيح‬ •‫باالختبار‬ ‫املقادة‬ ‫البرمجة‬(Test driven development)
  78. 78. ‫منصات‬JavaScript‫البرمجية‬ • Angular • Ember • Backbone • React • Aurelia • Meteor • Polymer • Knockout • Vue • Mercury
  79. 79. ‫إلى‬ ‫مقدمة‬ 9
  80. 80. ‫تاريخ‬Angular •AngularJS -‫قبل‬ ‫من‬ ‫صممت‬Misko Hevery -‫يف‬ ‫أطلقت‬ ‫ما‬ ‫أول‬June 2012 -‫منصات‬ ‫أشهر‬ ‫من‬ ‫واحدة‬JS‫املستخدم‬ ‫جزء‬ ‫ىلع‬ ‫للعمل‬ •Angular -‫كامل‬ ‫بشكل‬ ‫املنصة‬ ‫كتابة‬ ‫إعادة‬ ‫تم‬ -‫املكونات‬ ‫ىلع‬ ‫تعتمد‬(Component) -‫اللوحية‬ ‫األجهزة‬ ‫تدعم‬ -‫الخادم‬ ‫جزء‬ ‫ىلع‬ ‫الحالة‬ ‫تحديث‬(Server-side rendering) -‫قوالب‬(template)‫عالية‬ ‫كفاءة‬ ‫ذات‬
  81. 81. ‫هي‬ ‫ما‬Angular‫؟‬ •‫فعالة‬ ‫ويب‬ ‫تطبيقات‬ ‫بناء‬ ‫يف‬ ‫مساعدة‬ ‫بنية‬ ‫لها‬ ‫منصة‬(dynamic:) -HTML‫متغيرة‬ ‫الغير‬ ‫املستندات‬ ‫تعالج‬ ‫فقط‬ -Angular‫الفعالة‬ ‫التطبيقات‬ ‫وتدعم‬ ‫الثغرة‬ ‫هذه‬ ‫تعالج‬ -‫تعالج‬‫التخزين‬ ‫بنية‬ ‫بين‬ ‫التوافق‬ ‫عدم‬ ‫مشكلة‬‫العالقاتي‬‫ة‬ ‫العمل‬ ‫وبنية‬‫الغرضية‬(Impedance mismatch) -‫صممت‬‫مع‬‫التطبيقات‬ ‫مراعاة‬‫بالبيانات‬ ‫املقادة‬(CRUD Applications) -‫منهج‬‫تصريحي‬(Declarative approach)
  82. 82. ‫مفردات‬Angular • One-way/Two-way Data • Binding • Components • Directives • Templates • Routing • Modules • Service • Provider • Testing
  83. 83. Angular •‫هي‬ ‫هل‬Angular 2‫فقط‬ ‫أم‬Angular‫؟‬ •‫لإلصدارات‬ ‫داللي‬ ‫تعيين‬(Semantic Versioning) -<Major Version>.<Minor Version>.<Patch>
  84. 84. ‫عملي‬ ‫تطبيق‬! ‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬
  85. 85. ‫بنية‬ 10
  86. 86. ‫بنية‬Angular •‫البرمجية‬ ‫الوحدة‬(Modular) •‫واالعتمادية‬ ‫القوالب‬‫ىلع‬‫املكونات‬ (Component-based with Templates) •‫الخدمات‬(Services)
  87. 87. ‫البرمجية‬ ‫الوحدة‬ ‫بنية‬(Modular)
  88. 88. ‫البرمجية‬ ‫الوحدة‬(Modular)
  89. 89. ‫عملي‬ ‫تطبيق‬! ‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬
  90. 90. ‫املكون‬(Component)
  91. 91. ‫املكون‬ ‫هرمية‬(Component)
  92. 92. ‫عملي‬ ‫تطبيق‬! ‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬
  93. 93. ‫املوجهات‬Directives •‫قوالب‬Angular‫فعالية‬ ‫ذات‬(dynamic.) •‫املوجهات‬(Directives)‫لـ‬ ‫أوامر‬ ‫تعطي‬Angular‫إرسال‬ ‫بكيفية‬ ‫إلى‬ ‫القوالب‬ ‫حالة‬ ‫تحديث‬DOM. •‫يف‬ ‫تعريفها‬ ‫يمكن‬ ‫املوجهات‬Angular‫الترميز‬ ‫خالل‬ ‫من‬ ‫كصف‬: @Directive •‫املكون‬(Component)‫املوجهات‬ ‫من‬ ‫خاص‬ ‫نوع‬ ‫هو‬(Directives) ‫مرتبط‬‫بقالب‬(Template.) •‫يف‬ ‫املوجهات‬ ‫من‬ ‫آخران‬ ‫نوعان‬Angular‫هما‬: ‫البنيوي‬(Structural)‫والوصفي‬(Attribute)
  94. 94. ‫البنيوية‬ ‫املوجهات‬Structural Directives •‫حذف‬ ‫أو‬ ‫تعديل‬ ،‫إضافة‬ ‫طريق‬ ‫عن‬ ‫العرض‬ ‫بنية‬ ‫تعديل‬ ‫لك‬ ‫تتيح‬ ‫الـ‬ ‫من‬ ‫عناصر‬DOM •‫الـ‬ ‫بنية‬ ‫يف‬ ‫وأحفاده‬ ‫مضيف‬ ‫عنصر‬ ‫ىلع‬ ‫بنيوي‬ ‫موجه‬ ‫تطبيق‬DOM
  95. 95. ‫بنيوية‬ ‫موجهات‬‫مشهورة‬ • NgIf <div *ngIf=“selectedDish”> . . . </div> • NgFor <md-list-item *ngFor="let dish of dishes"> • NgSwitch
  96. 96. ‫عملي‬ ‫تطبيق‬! ‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬
  97. 97. ‫القادمة‬ ‫للجلسة‬ ‫الواجب‬
  98. 98. ‫شكرًا‬!

×