دورة في تعلم Bootstrap 4 و Angular 4 مسار تطوير تطبيقات الويب والموبايل ويكيلوجيا هاكاثون - Wikilogia Hackathon

1. ‫املستخدم‬ ‫قسم‬ ‫تطوير‬ ‫و‬
‫باستخدام‬
‫الجلسة‬‫الثالثة‬

2. ‫منصات‬‫للمستخدم‬ ‫الويب‬ ‫واجهة‬ ‫لتصميم‬
1

3. ‫هي؟‬ ‫ما‬
‫مجموعة‬‫قوالب‬ ‫من‬HTML،CSS‫و‬JavaScript‫شكل‬ ‫ىلع‬ ‫لالستخدام‬ ‫جاهزة‬
‫لواجهة‬ ‫مكونات‬‫املستخدم‬:
‫إرسال‬ ‫قوالب‬(Forms)‫أزرار‬ ،(Buttons)‫الجداول‬ ،(Tables)‫املالحة‬ ،(Navigations)،
‫املنسدلة‬(Dropdowns)‫تنبيهات‬ ،(Alerts)‫منبثقة‬ ‫لوائح‬ ،(Modals)‫عالمات‬ ،
‫التبويب‬(Tabs)،‫دائري‬ ‫شريط‬(Carousel)‫الخ‬.

4. ‫مشهورة‬ ‫تصميم‬ ‫منصات‬
1. Bootstrap
2. Semantic-UI
3. Foundation
4. Materialize
5. Material UI
6. Pure
7. Skeleton
8. UIKit
9. Milligram
10. Susy

5. ‫استخدامها؟‬ ‫يتم‬ ‫ملاذا‬
•‫متجاوب‬ ‫ويب‬ ‫تصميم‬‫الشاشة‬ ‫حجم‬ ‫حسب‬:
‫اللوحية‬ ‫لألجهزة‬ ‫أولوية‬ ‫إعطاء‬
•‫املتصفحات‬ ‫أنواع‬ ‫كافة‬ ‫مع‬ ‫متالئم‬.
•‫االنتاجية‬ ‫زيادة‬.
•‫املجتمع‬ ‫دعم‬:
‫قوالب‬‫ل‬‫ويب‬ ‫صفحات‬

6. ‫إلى‬ ‫مقدمة‬
2

7. ‫عن‬ ‫ملحة‬Bootstrap
Bootstrap‫إطار‬ ‫أول‬ ‫هو‬‫لتطوير‬‫تستجيب‬ ‫اإلنترنت‬ ‫شبكة‬ ‫ىلع‬ ‫مشاريع‬
‫املحمولة‬ ‫األجهزة‬ ‫وتراعي‬ ‫الشاشة‬ ‫بحجم‬ ‫ُّر‬‫للتغي‬

8. ‫تاريخ‬Bootstrap
•‫صدرت‬‫عام‬ ‫يف‬ ‫مرة‬ ‫ألول‬2011
-‫قبل‬ ‫من‬Mark Otto‫و‬Jacob Thornton
•‫اإلصدار‬‫الحالي‬‫لها‬3.3.7
•‫اإلصدار‬4.0‫قريبًا‬ ‫سيصدر‬
-‫حاليا‬‫نسخة‬،‫ألفا‬‫ولكنها‬‫مستقرة‬ ‫الغالب‬ ‫يف‬
-‫هذا‬ ‫يغطي‬‫النسخة‬ ‫املساق‬4.0،
‫ولكن‬‫الصفوف‬ ‫معظم‬‫ىلع‬ ‫تنطبق‬ ‫تزال‬ ‫ال‬3.3.7
•‫اإلطار‬‫األول‬ ‫الشامل‬
-‫بسرعة‬ ‫شعبية‬ ‫اكتسب‬‫كبيرة‬

9. ‫املتجاوب‬ ‫التصميم‬
3

10. ‫املتجاوب‬ ‫التصميم‬ ‫ملاذا‬
•‫طريق‬ ‫عن‬ ‫اإلنترنت‬ ‫مواقع‬ ‫إلى‬ ‫متزايد‬ ‫بشكل‬ ‫يصلون‬ ‫املستخدمون‬
‫بحجوم‬ ‫تختلف‬ ‫والتي‬ ‫اللوحية‬ ‫األجهزة‬‫شاشاتها‬
•‫اآلن‬ ‫بعد‬ ‫صالحًا‬ ‫يكون‬ ‫لن‬ ‫الواحد‬ ‫الحجم‬ ‫ىلع‬ ‫يعتمد‬ ‫الذي‬ ‫الحل‬
•‫ّف‬‫ي‬‫التك‬‫مع‬"‫العرض‬ ‫إطار‬"‫باملستخدم‬ ‫الخاص‬
‫املوقع‬ ‫نواة‬ ‫ضمن‬ ‫ذلك‬ ‫بناء‬

11. ‫اللوحية‬ ‫لألجهزة‬ ‫التصميم‬ ‫أولوية‬
Mobile First Design
‫التقليدي‬ ‫األسلوب‬
‫اللوحية‬ ‫باألجهزة‬ ‫البدء‬
ً‫ال‬‫أو‬ ‫الجوال‬ ‫قيود‬ ‫مراعاة‬ ‫يتم‬

12. ‫املتجاوب‬ ‫التصميم‬ ‫أسس‬
•‫الشبكة‬ ‫نظام‬(Grid System)
‫سنقوم‬‫ب‬‫التعامل‬‫الشبكة‬ ‫نظام‬ ‫مع‬‫سيأتي‬ ‫فيما‬
•Fluid images
‫دعم‬ ‫نشاهد‬ ‫سوف‬Bootstrap‫الحق‬ ‫لها‬
•‫الوسائط‬ ‫استعالمات‬(Media Queries)

13. ‫ا‬‫ستعالمات‬‫الوسائط‬(Media Queries)
‫سبيل‬ ‫ىلع‬ ،‫العرض‬ ‫إطار‬ ‫حجم‬ ‫ىلع‬ ‫باالعتماد‬ ‫التصاميم‬ ‫لتطبيق‬ ‫تقنية‬
‫املثال‬:
@media (min-width: 992px) {
/* CSS styles customized for desktop */
}

14. ‫بذلك؟‬ ‫القيام‬ ‫يمكننا‬ ‫كيف‬
‫مبنية‬ ‫املستخدم‬ ‫واجهات‬ ‫لتصميم‬ ‫منصة‬ ‫ىلع‬ ‫باالعتماد‬ ‫بالتصميم‬ ‫البدء‬
‫املتجاوب‬ ‫التصميم‬ ‫أساس‬ ‫ىلع‬

15. ‫الشبكي‬ ‫النظام‬
4

16. ‫العرض‬ ‫إطار‬(Viewport)
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
•‫الوصفي‬ ‫الوسم‬‫العرض‬ ‫إلطار‬:
-‫الشاشة‬ ‫عرض‬ ‫تعيين‬ ‫يضمن‬‫يساوي‬ ‫بما‬‫عرض‬‫الجهاز‬
‫هذا‬ ‫أخذ‬ ‫مع‬ ‫املحتوى‬ ‫إظهار‬ ‫ويتم‬‫العرض‬‫االعتبار‬ ‫بعين‬.
-‫لتكون‬ ‫املواقع‬ ‫تصميم‬‫العرض‬ ‫إطار‬ ‫لحجم‬ ‫استجابة‬ ‫ذات‬
-‫شبكة‬ ‫نظام‬Bootstrap

17. CSS Flexbox Layout
•‫يف‬ ‫وأبسط‬ ‫أسهل‬ ‫خيارات‬CSS
•‫الحجم‬ ‫معالجة‬ ‫بسهولة‬ ‫يمكنها‬(‫الديناميكي‬/‫ثابت‬ ‫الغير‬)
‫املحتوى‬ ‫لحاويات‬
•‫االتجاه‬ ‫عن‬ ‫مستقلة‬ ‫عرض‬ ‫بنية‬(‫يساري‬ ‫أم‬ ‫يميني‬)

18. ‫بنية‬ ‫ملاذا‬Flexbox‫لـ‬bootstrap
•‫األب‬ ‫العنصر‬ ‫ضمن‬ ‫للمحتوى‬ ‫األفقية‬ ‫املحاذاة‬ ‫تطبيق‬ ‫سهولة‬
•‫بمساعدة‬ ‫الشاشات‬ ‫ودقة‬ ‫األجهزة‬ ‫حسب‬ ‫العناصر‬ ‫ترتيب‬ ‫إعادة‬ ‫سهولة‬Media Queries
•‫االتجاه‬ ‫عن‬ ‫مستقلة‬ ‫عرض‬ ‫بنية‬(‫يساري‬ ‫أم‬ ‫يميني‬)
•‫ىلع‬ ‫فقط‬ ‫باالعتماد‬ ‫األعمدة‬ ‫أطوال‬ ‫مساواة‬ ‫سهولة‬CSS‫العرض‬ ‫لبنى‬ ‫وذلك‬
‫الشبكة‬ ‫ىلع‬ ‫املعتمدة‬

19. ‫شبكة‬Bootstrap

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. ‫شبكة‬Bootstrap

22. ‫شبكة‬ ‫خصائص‬Bootstrap

23. Push and Pull
Extra Small Screens Small, Medium, Large and Extra Large Screens

24. ‫املحتوى‬ ‫ترتيب‬ ‫إعادة‬
Extra Small Screens Small, Medium, Large and Extra Large Screens

25. ‫املتداخلة‬ ‫األعمدة‬

26. ‫مع‬ ‫الربط‬Bootstrap
‫ملفات‬ ‫تضمين‬ ‫يتم‬Bootstrap‫التالية‬ ‫الطرق‬ ‫بإحدى‬:
•‫موقع‬ ‫من‬ ‫امللفات‬ ‫تحميل‬http://getbootstrap.com/
‫الويب‬ ‫صفحة‬ ‫مع‬ ‫امللفات‬ ‫هذه‬ ‫وربط‬
•‫م‬ ‫الويب‬ ‫صفحة‬ ‫ربط‬‫ع‬‫من‬ ‫امللفات‬ ‫من‬ ‫خارجية‬ ‫نسخة‬
CDN (Content Delivery Network)‫وأحد‬‫لها‬ ‫املزودات‬‫هو‬MaxCDN
•‫تحميل‬‫للحزم‬ ‫مدير‬ ‫خالل‬ ‫من‬ ‫امللفات‬(‫هو‬ ‫حالتنا‬ ‫يف‬npm)
‫لذلك‬ ‫سنتطرق‬‫الحقًا‬.

27. ‫قالب‬Bootstrap

28. ‫عملي‬ ‫تطبيق‬!
‫السابقة‬ ‫األدوات‬ ‫باستخدام‬‫امللف‬ ‫يف‬ ‫التمرين‬ ‫أكمل‬
‫الصفحة‬ ‫بربط‬ ‫قم‬‫مع‬‫تنسيقها‬ ‫أعد‬ ‫ثم‬
‫باستخدام‬‫املرفقة‬ ‫الصورة‬ ‫لتشابه‬

29. ‫مكونات‬ ‫بعض‬
5

30. Navigation

31. Icon Fonts (Font Awesome)

32. ‫املستخدم‬ ‫مدخالت‬(User Input)

33. ‫املستخدم‬ ‫مدخالت‬(User Input)

34. ‫الجداول‬(Tables)

35. ‫الجداول‬(Tables)

36. Bootstrap Cards

37. Images & Media

38. Responsive Embed

39. Alerting User (Badges)

40. Alerting User (Alter)

41. Alerting User (Progress Bar)

42. ‫مكونات‬
6

43. Bootstrap‫مع‬JS
‫دعم‬bootstrap‫لـ‬JavaScript‫إضافات‬ ‫خالل‬ ‫من‬(plugins)
‫ىلع‬ ً‫ء‬‫بنا‬ ‫مكتوبة‬ ‫اإلضافات‬Jquery
‫حدة‬ ‫ىلع‬ ٌ‫ل‬‫ك‬ ‫اإلضافات‬ ‫تضمين‬ ‫يمكن‬

44. Bootstrap‫مع‬JS

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. ‫مكونات‬Bootstrap JS
•‫مكونات‬JS‫سطر‬ ‫أي‬ ‫كتابة‬ ‫بدون‬ ‫تستخدم‬ ‫أن‬ ‫يمكن‬JS:
-data-* attributes(،‫املثال‬ ‫سبيل‬ ‫ىلع‬data-toggle, data-spy)
-‫استخدام‬ ‫يف‬ ‫جدًا‬ ‫واضح‬ ‫منهج‬‫اإلضافات‬
-‫هذا‬ ‫نستكشف‬ ‫سوف‬‫املنهج‬‫يف‬‫الجلسة‬ ‫هذه‬
•‫متاحة‬ ‫كاملة‬ ‫برمجية‬ ‫واجهة‬‫األمر‬ ‫لزم‬ ‫إذا‬
-‫إلى‬ ‫تحتاج‬‫كتابة‬ ‫بقواعد‬ ‫إملام‬JavaScript‫و‬JQuery

47. Collapse

48. Collapse

49. Tooltips

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. Modals

52. Modals

53. Carousel

54. Carousel

55. ‫عملي‬ ‫تطبيق‬!
‫السابقة‬ ‫األدوات‬ ‫باستخدام‬‫امللف‬ ‫يف‬ ‫التمرين‬ ‫أكمل‬
‫بإضافة‬ ‫قم‬‫املرف‬ ‫بامللفات‬ ‫باالستعانة‬ ‫الويب‬ ‫صفحة‬ ‫إلى‬‫قة‬

56. ‫و‬
7

57. JQuery
•‫للـ‬ ‫خفيفة‬ ‫مكتبة‬JavaScript
•‫بها‬ ‫تتميز‬ ‫التي‬ ‫املزايا‬:
-‫مع‬ ‫التعامل‬HTML/DOM
-‫مع‬ ‫التعامل‬CSS
-‫لألحداث‬ ‫توابع‬(Events)‫بالـ‬ ‫خاصة‬HTML
-‫وتحريك‬ ‫تأثيرات‬ ‫إضافة‬
-AJAX
•‫مكونات‬Bootstrap JavaScript‫ىلع‬ ‫مبنية‬JQuery

58. ‫بـ‬ ‫التكابة‬ ‫بنية‬JQuery
•$(selector).action()
-$:‫تعريف‬/‫لـ‬ ‫الوصول‬Jquery
-(selector:)‫عنصر‬ ‫إليجاد‬ ‫بأمر‬ ‫القيام‬HTML
-action():‫سابق‬ ‫عناصر‬ ‫من‬ ‫تحديده‬ ‫تم‬ ‫ما‬ ‫ىلع‬ ‫تنفيذه‬ ‫سيتم‬ ‫الذي‬ ‫الحدث‬‫ًا‬
-‫املثال‬ ‫سبيل‬ ‫ىلع‬:$(“p”).hide(), $(“#mycarousel”).carousel(‘pause’)

59. ‫عن‬ ‫مثال‬Bootstrap JQuery
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

60. ‫محددات‬(JQuery Selectors)
•‫عنصر‬ ‫تحديد‬HTMLً‫ال‬‫مث‬ ،:“P”،“button”
•‫الفريد‬ ‫املعرف‬ ‫باستخدام‬ ‫تحدد‬(Id#)،ً‫ال‬‫مث‬:“#myCarousel”
•ً‫ال‬‫مث‬ ،‫صف‬ ‫تحديد‬:“.btn”،“.btn.btn-default”
•ً‫ال‬‫مث‬ ،‫معامل‬ ‫تحديد‬:“[href]”،“[data-toggle=“tooltip”]”
•‫الحالي‬ ‫العنصر‬ ‫تحديد‬:$(this)
•‫غيرها‬ ‫وطرق‬..

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. ‫للـ‬ ‫األسبقية‬ ‫املعالجات‬
8

63. CSS
•‫تعد‬CSS‫ع‬ ‫ىلع‬ ‫متكرر‬ ‫بشكل‬ ‫وتطبيقها‬ ‫تصاميم‬ ‫لتعريف‬ ‫األمثل‬ ‫الحل‬‫ناصر‬
HTML
•CSS‫متحوالت‬ ‫تعريف‬ ‫نوع‬ ‫من‬ ‫مزايا‬ ‫تغطي‬ ‫ال‬(defining variables)‫تحديدات‬ ،
‫متداخلة‬(nesting selectors)‫تعابير‬ ،(expressions)‫توابع‬ ،(functions)
-‫التعديل‬ ‫أو‬ ‫التصليح‬ ‫عملية‬ ‫يف‬ ‫معاناة‬ ‫إلى‬ ‫يؤدي‬ ‫هذا‬

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. ‫لـ‬ ‫نمطية‬ ‫مزايا‬CSS Preprocessors
•‫املتحوالت‬
•‫متداخلة‬ ‫تحديدات‬(nesting selectors)
•Mixins(‫عن‬ ‫تصريح‬ ‫من‬ ‫أكثر‬ ‫عن‬ ‫تعبر‬ ‫أن‬ ‫يمكنها‬CSS‫املتحوالت‬ ‫عكس‬ ‫ىلع‬)
•‫تعابير‬(expressions)‫و‬‫توابع‬(functions)

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. ‫التعشيش‬(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. Mixins
‫مالحظة‬:‫استخدم‬.zero-margin() { … }‫إذا‬
‫تريد‬ ‫ال‬ ‫كنت‬.zero-margin‫يتم‬ ‫أن‬ ‫نفسها‬
‫الترجمة‬ ‫عملية‬ ‫يف‬ ‫تضمينها‬

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. ‫متحوالت‬ ‫مع‬ 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. ‫رياضية‬ ‫عمليات‬
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. ‫منصات‬‫املستخدم‬ ‫لقسم‬
9

73. ‫بحاجتها؟‬ ‫نحن‬ ‫ملاذا‬
•‫الـ‬ ‫بنية‬ ‫مع‬ ‫التعامل‬ ‫إدارة‬ ‫يف‬ ‫التعقيد‬ ‫حجم‬DOM‫وتحديثات‬‫البيانات‬‫يدويًا‬
•‫جيد‬ ‫بشكل‬ ‫معرفة‬ ‫تطبيقات‬ ‫بنى‬ ‫إلى‬ ‫الحاجة‬:
-Model View Controller / Model View View Model / Model View Whatever
-‫النموذج‬ ‫ربط‬(Model)‫الواجهة‬ ‫مع‬(View:)controllers, view models

74. ‫البرمجية‬ ‫املكتبة‬(Library)
‫مجموعة‬‫من‬‫واجهة‬ ‫خالل‬ ‫من‬ ‫معين‬ ‫سلوك‬ ‫لتنفيذ‬ ‫اإلجرائيات‬
‫املطلوب‬ ‫السلوك‬ ‫تنفيذ‬ ‫يتم‬ ‫خاللها‬ ‫من‬ ‫والتي‬ ‫برمجية‬.
•‫السلوك‬ ‫استخدام‬ ‫إعادة‬
•‫منفصلة‬ ‫وحدات‬ ‫إلى‬ ‫التجزيء‬
•‫املثال‬ ‫سبيل‬ ‫ىلع‬:JQuery

75. ‫البرمجية‬ ‫العمل‬ ‫أطر‬(Frameworks)
•‫عامة‬ ‫إجرائيات‬ ‫البرنامج‬ ‫يقدم‬ ‫خالله‬ ‫من‬ ‫والذي‬ ‫معين‬ ‫تجريد‬
‫برمجية‬ ‫أسطر‬ ‫خالل‬ ‫من‬ ‫خاص‬ ‫بشكل‬ ‫تعديلها‬ ‫يمكن‬ ‫والتي‬
‫املستخدم‬ ‫قبل‬ ‫من‬ ‫مكتوبة‬ ‫إضافية‬.
•‫تؤمن‬ ‫والتي‬ ‫االستخدام‬ ‫إلعادة‬ ‫قابلة‬ ‫عاملية‬ ‫عمل‬ ‫بيئة‬
‫كبيرة‬ ‫برمجية‬ ‫منصة‬ ‫من‬ ‫كجزء‬ ‫معينة‬ ‫إجرائيات‬.
•‫املثال‬ ‫سبيل‬ ‫ىلع‬:Angular, Ember, Backbone

76. ‫البرمجية‬ ‫املنصة‬
•‫مبدأ‬Hollywood:
-Don’t call us, we’ll call you!
•‫التحكم‬ ‫آلية‬ ‫عكس‬
•‫التصريحية‬ ‫البرمجة‬ ‫أم‬ ‫باألوامر‬ ‫البرمجة‬(Imperative vs
Declarative Programming)

77. ‫منصات‬JavaScript‫البرمجية‬
•‫الصفحة‬ ‫تطبيقات‬‫الواحدة‬
•Model-View-Controller (MVC) / Model-View-ViewModel
(MVVM) / Model-View-Whatever
-‫البيانات‬ ‫ربط‬(Data binding)‫التوجيه‬ ،(Routing)
•‫بالـ‬ ‫برمجية‬ ‫أسطر‬JS،‫التوسع‬ ،‫االستخدام‬ ‫إلعادة‬ ‫قابلة‬
‫التصحيح‬
•‫باالختبار‬ ‫املقادة‬ ‫البرمجة‬(Test driven development)

78. ‫منصات‬JavaScript‫البرمجية‬
• Angular
• Ember
• Backbone
• React
• Aurelia
• Meteor
• Polymer
• Knockout
• Vue
• Mercury

79. ‫إلى‬ ‫مقدمة‬
9

80. ‫تاريخ‬Angular
•AngularJS
-‫قبل‬ ‫من‬ ‫صممت‬Misko Hevery
-‫يف‬ ‫أطلقت‬ ‫ما‬ ‫أول‬June 2012
-‫منصات‬ ‫أشهر‬ ‫من‬ ‫واحدة‬JS‫املستخدم‬ ‫جزء‬ ‫ىلع‬ ‫للعمل‬
•Angular
-‫كامل‬ ‫بشكل‬ ‫املنصة‬ ‫كتابة‬ ‫إعادة‬ ‫تم‬
-‫املكونات‬ ‫ىلع‬ ‫تعتمد‬(Component)
-‫اللوحية‬ ‫األجهزة‬ ‫تدعم‬
-‫الخادم‬ ‫جزء‬ ‫ىلع‬ ‫الحالة‬ ‫تحديث‬(Server-side rendering)
-‫قوالب‬(template)‫عالية‬ ‫كفاءة‬ ‫ذات‬

81. ‫هي‬ ‫ما‬Angular‫؟‬
•‫فعالة‬ ‫ويب‬ ‫تطبيقات‬ ‫بناء‬ ‫يف‬ ‫مساعدة‬ ‫بنية‬ ‫لها‬ ‫منصة‬(dynamic:)
-HTML‫متغيرة‬ ‫الغير‬ ‫املستندات‬ ‫تعالج‬ ‫فقط‬
-Angular‫الفعالة‬ ‫التطبيقات‬ ‫وتدعم‬ ‫الثغرة‬ ‫هذه‬ ‫تعالج‬
-‫تعالج‬‫التخزين‬ ‫بنية‬ ‫بين‬ ‫التوافق‬ ‫عدم‬ ‫مشكلة‬‫العالقاتي‬‫ة‬
‫العمل‬ ‫وبنية‬‫الغرضية‬(Impedance mismatch)
-‫صممت‬‫مع‬‫التطبيقات‬ ‫مراعاة‬‫بالبيانات‬ ‫املقادة‬(CRUD Applications)
-‫منهج‬‫تصريحي‬(Declarative approach)

82. ‫مفردات‬Angular
• One-way/Two-way Data
• Binding
• Components
• Directives
• Templates
• Routing
• Modules
• Service
• Provider
• Testing

83. Angular
•‫هي‬ ‫هل‬Angular 2‫فقط‬ ‫أم‬Angular‫؟‬
•‫لإلصدارات‬ ‫داللي‬ ‫تعيين‬(Semantic Versioning)
-<Major Version>.<Minor Version>.<Patch>

84. ‫عملي‬ ‫تطبيق‬!
‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬

85. ‫بنية‬
10

86. ‫بنية‬Angular
•‫البرمجية‬ ‫الوحدة‬(Modular)
•‫واالعتمادية‬ ‫القوالب‬‫ىلع‬‫املكونات‬
(Component-based with Templates)
•‫الخدمات‬(Services)

87. ‫البرمجية‬ ‫الوحدة‬ ‫بنية‬(Modular)

88. ‫البرمجية‬ ‫الوحدة‬(Modular)

89. ‫عملي‬ ‫تطبيق‬!
‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬

90. ‫املكون‬(Component)

91. ‫املكون‬ ‫هرمية‬(Component)

92. ‫عملي‬ ‫تطبيق‬!
‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬

93. ‫املوجهات‬Directives
•‫قوالب‬Angular‫فعالية‬ ‫ذات‬(dynamic.)
•‫املوجهات‬(Directives)‫لـ‬ ‫أوامر‬ ‫تعطي‬Angular‫إرسال‬ ‫بكيفية‬
‫إلى‬ ‫القوالب‬ ‫حالة‬ ‫تحديث‬DOM.
•‫يف‬ ‫تعريفها‬ ‫يمكن‬ ‫املوجهات‬Angular‫الترميز‬ ‫خالل‬ ‫من‬ ‫كصف‬:
@Directive
•‫املكون‬(Component)‫املوجهات‬ ‫من‬ ‫خاص‬ ‫نوع‬ ‫هو‬(Directives)
‫مرتبط‬‫بقالب‬(Template.)
•‫يف‬ ‫املوجهات‬ ‫من‬ ‫آخران‬ ‫نوعان‬Angular‫هما‬:
‫البنيوي‬(Structural)‫والوصفي‬(Attribute)

94. ‫البنيوية‬ ‫املوجهات‬Structural Directives
•‫حذف‬ ‫أو‬ ‫تعديل‬ ،‫إضافة‬ ‫طريق‬ ‫عن‬ ‫العرض‬ ‫بنية‬ ‫تعديل‬ ‫لك‬ ‫تتيح‬
‫الـ‬ ‫من‬ ‫عناصر‬DOM
•‫الـ‬ ‫بنية‬ ‫يف‬ ‫وأحفاده‬ ‫مضيف‬ ‫عنصر‬ ‫ىلع‬ ‫بنيوي‬ ‫موجه‬ ‫تطبيق‬DOM

95. ‫بنيوية‬ ‫موجهات‬‫مشهورة‬
• NgIf
<div *ngIf=“selectedDish”> . . . </div>
• NgFor
<md-list-item *ngFor="let dish of dishes">
• NgSwitch

96. ‫عملي‬ ‫تطبيق‬!
‫امللف‬ ‫ضمن‬ ‫التعليمات‬ ‫طبق‬

97. ‫القادمة‬ ‫للجلسة‬ ‫الواجب‬

98. ‫شكرًا‬!