1
00:00:04,070 --> 00:00:07,050
حسناً، حسناً، أسمعك تقولين

2
00:00:07,050 --> 00:00:08,280
دعونا نمضي في ذلك،

3
00:00:08,280 --> 00:00:09,835
أرني بعض التعليمات البرمجية.

4
00:00:09,835 --> 00:00:13,440
في الواقع، سنبدأ في إنشاء

5
00:00:13,440 --> 00:00:17,770
تطبيق Angular الخاص بنا في هذا التمرين الأول.

6
00:00:17,770 --> 00:00:21,145
سوف نستخدم واجهة سطر الأوامر الزاوي،

7
00:00:21,145 --> 00:00:28,020
و كلي الزاوي للسقالات خارج التطبيق الزاوي لدينا في هذا التمرين.

8
00:00:28,020 --> 00:00:31,690
ثم، ونحن نذهب من خلال بقية التدريبات في هذه الدورة،

9
00:00:31,690 --> 00:00:36,180
ونحن سوف بناء لدينا تطبيق الزاوي خطوة بخطوة.

10
00:00:36,180 --> 00:00:44,195
و كلي الزاوي هو وسيلة مريحة للغاية لإنشاء تطبيق الزاوي.

11
00:00:44,195 --> 00:00:48,620
يتبع تطبيق Angular الذي تم إنشاؤه بواسطة CLI Angular

12
00:00:48,620 --> 00:00:53,290
أدلة الأنماط التي اقترحها مطورو إطار العمل Angular.

13
00:00:53,290 --> 00:00:56,405
يمكننا استخدام كلي الزاوي لسقالة

14
00:00:56,405 --> 00:01:00,980
العديد من أجزاء التطبيق الزاوي لدينا بما في ذلك المكونات،

15
00:01:00,980 --> 00:01:04,275
وخدمات التطبيق الزاوي لدينا.

16
00:01:04,275 --> 00:01:08,480
كما يأتي Angular CLI مع خادم مدمج خاص به،

17
00:01:08,480 --> 00:01:14,405
والذي يمكننا استخدامه لخدمة تطبيق Angular أثناء بنائه،

18
00:01:14,405 --> 00:01:17,930
ثم عرض تطبيقنا Angular في

19
00:01:17,930 --> 00:01:22,870
المتصفح كمعاينة مباشرة لتطبيقنا.

20
00:01:22,870 --> 00:01:24,805
كما هو الحال عندما نجري

21
00:01:24,805 --> 00:01:28,940
تغييرات، سوف تنعكس التغييرات على الفور إلى المتصفح.

22
00:01:28,940 --> 00:01:33,650
هذا هو السبب في أنني اخترت استخدام CLI Angular

23
00:01:33,650 --> 00:01:39,365
كنهج لبناء تطبيق Angular الخاص بنا في هذه الدورة.

24
00:01:39,365 --> 00:01:43,100
للبدء، انتقل إلى موقع مناسب على

25
00:01:43,100 --> 00:01:46,490
جهاز الكمبيوتر الخاص بك وإنشاء مجلد باسم Angular.

26
00:01:46,490 --> 00:01:52,065
لذلك، أنا ذاهب لبدء الانتقال إلى بلدي الوثائق مجلد كورسيرا.

27
00:01:52,065 --> 00:01:58,260
هذا هو المكان الذي أقوم بتخزين جميع ملفاتي لدورة Coursera الخاصة بي،

28
00:01:58,260 --> 00:02:03,230
وبعد ذلك سأقوم بإنشاء مجلد

29
00:02:03,230 --> 00:02:08,955
باسم Angular ثم الانتقال إلى المجلد Angular.

30
00:02:08,955 --> 00:02:15,505
الآن، سنقوم بإنشاء تطبيق Angular الخاص بنا داخل هذا المجلد.

31
00:02:15,505 --> 00:02:21,080
الخطوة الأولى التي نقوم بها في هذا التمرين هي تثبيت CLI Angular.

32
00:02:21,080 --> 00:02:22,525
لذلك، في موجه،

33
00:02:22,525 --> 00:02:32,700
اكتب npm install -g @angular /cli @ 6.2.1.

34
00:02:32,700 --> 00:02:35,430
الآن، كلما قمت بتثبيت وحدة NPM،

35
00:02:35,430 --> 00:02:39,725
سأحدد أيضًا الإصدار الدقيق لوحدة NPM التي أقوم بتثبيتها.

36
00:02:39,725 --> 00:02:41,720
وأود أن أحثكم بشدة

37
00:02:41,720 --> 00:02:44,930
على تثبيت نفس الإصدار بالضبط من وحدة الآلية الوقائية الوطنية بحيث يمكنك الذهاب من خلال

38
00:02:44,930 --> 00:02:50,680
بقية التدريبات دون وجود أي مشكلة مع التدريبات.

39
00:02:50,680 --> 00:02:55,700
لذلك، في هذه الحالة، أقوم بتثبيت الإصدار 6.2.1 من CLI الزاوي.

40
00:02:55,700 --> 00:02:58,310
الآن، إذا كنت تقوم بذلك على جهاز Mac أو Linux،

41
00:02:58,310 --> 00:03:02,565
فلا تنس sudo أمام تثبيت npm.

42
00:03:02,565 --> 00:03:05,095
سيستغرق التثبيت بعض الوقت.

43
00:03:05,095 --> 00:03:08,095
لذلك، بمجرد الانتهاء من تثبيت،

44
00:03:08,095 --> 00:03:13,655
ثم الزاوي كلي سوف تكون متاحة على سطر الأوامر الخاص بك.

45
00:03:13,655 --> 00:03:15,750
بمجرد اكتمال التثبيت،

46
00:03:15,750 --> 00:03:18,885
يمكنك التحقق من تثبيت CLI الزاوي ونرى ذلك.

47
00:03:18,885 --> 00:03:20,295
بمجرد تثبيت ذلك،

48
00:03:20,295 --> 00:03:25,190
قد تحتاج إلى إعادة تشغيل الجهاز الطرفي الخاص بك

49
00:03:25,190 --> 00:03:30,835
لكي تكون أدوات Angular CLI متاحة في المطالبة.

50
00:03:30,835 --> 00:03:35,390
يتوفر CLI Angular عن طريق كتابة ng

51
00:03:35,390 --> 00:03:39,910
في الموجه متبوعًا بمجموعة من الإرشادات الإضافية.

52
00:03:39,910 --> 00:03:46,105
لذا، فإن الأمر الأول الذي سنجربه هو مساعدة ng،

53
00:03:46,105 --> 00:03:49,820
وسيدرج هذا مجموعة من جميع الأوامر الأخرى

54
00:03:49,820 --> 00:03:53,855
التي يسمح لنا Angular CLI بتنفيذها.

55
00:03:53,855 --> 00:03:56,720
Ng كما ترى سيكون البادئة

56
00:03:56,720 --> 00:04:02,040
لجميع أوامر CLI Angular التي ستستخدمها في هذه الدورة.

57
00:04:02,840 --> 00:04:09,685
سيدرج هذا مجموعة من جميع الخيارات التي يوفرها لنا Angular CLI.

58
00:04:09,685 --> 00:04:15,895
سوف نتعلم الكثير من هذه الأوامر ونحن نذهب من خلال بقية هذه الدورة.

59
00:04:15,895 --> 00:04:18,930
لإنشاء تطبيق Angular جديد،

60
00:04:18,930 --> 00:04:21,545
سأقوم بإنشاء هذا التطبيق في

61
00:04:21,545 --> 00:04:25,660
المجلد Angular في مجلد فرعي باسم الارتباك.

62
00:04:25,660 --> 00:04:29,210
إذا كنت قد أخذت الدورة السابقة على Bootstrap أربعة،

63
00:04:29,210 --> 00:04:33,500
فستفهم لماذا أسمي هذا التطبيق على أنه الارتباك.

64
00:04:33,500 --> 00:04:35,000
لذلك، في موجه،

65
00:04:35,000 --> 00:04:40,905
اكتب ng الارتباك الجديد،

66
00:04:40,905 --> 00:04:45,945
وبعد ذلك سأستخدم sass

67
00:04:45,945 --> 00:04:53,080
كإطار تصميم CSS لتطبيق Angular الخاص بي.

68
00:04:53,080 --> 00:04:58,015
لذا، أقوم بتحديد نمط ناقص ناقص يساوي SCSS،

69
00:04:58,015 --> 00:05:01,610
واضغط على Return وسيستغرق الأمر بعض الوقت

70
00:05:01,610 --> 00:05:05,750
حتى يتم إنشاء التطبيق Angular في المجلد الحالي.

71
00:05:05,750 --> 00:05:08,330
بمجرد تثبيت التطبيق الخاص بك،

72
00:05:08,330 --> 00:05:10,850
دعنا نستخدم الخادم المدمج من

73
00:05:10,850 --> 00:05:16,100
Angular CLI لتجميع تطبيقنا Angular والبدء في خدمته.

74
00:05:16,100 --> 00:05:18,650
انتقل إلى مجلد الارتباك،

75
00:05:18,650 --> 00:05:22,495
وعند المطالبة، اكتب ng service،

76
00:05:22,495 --> 00:05:27,470
وانتظر حتى

77
00:05:27,470 --> 00:05:33,115
يبدأ خادم Angular Live Development ويبني تطبيقنا Angular والبدء في خدمة التطبيق.

78
00:05:33,115 --> 00:05:35,175
بمجرد الانتهاء من

79
00:05:35,175 --> 00:05:39,920
ذلك، ستلاحظ أن هذا التطبيق سيكون متاحًا عن طريق كتابة

80
00:05:39,920 --> 00:05:50,425
http://localhost:4200 في شريط العناوين في متصفحنا.

81
00:05:50,425 --> 00:05:53,975
يمكنك ترك خادم التطوير قيد التشغيل بشكل مستمر.

82
00:05:53,975 --> 00:05:57,020
عند إجراء تغييرات على تطبيق Angular الخاص بك،

83
00:05:57,020 --> 00:06:01,520
سيقوم الخادم تلقائيًا بإعادة ترجمة التغييرات ثم

84
00:06:01,520 --> 00:06:06,320
يبدأ في تقديم تطبيق Angular المحدث داخل متصفحك.

85
00:06:06,320 --> 00:06:13,370
لذا، ستكون هذه طريقة جيدة جدًا لمشاهدة التغييرات التي تجريها

86
00:06:13,370 --> 00:06:16,760
داخل تطبيق Angular الخاص بك والتي تنعكس على الفور

87
00:06:16,760 --> 00:06:21,265
في المتصفح حيث تقوم بعرض تطبيق Angular الخاص بك.

88
00:06:21,265 --> 00:06:28,610
إذا ذهبت إلى المتصفح والوصول إلى تطبيق Angular في localhost: 4200،

89
00:06:28,610 --> 00:06:31,135
ترى أن التطبيق يبدأ في العمل،

90
00:06:31,135 --> 00:06:36,835
وسوف تخدم هذه المجموعة من الكلمات في متصفحنا.

91
00:06:36,835 --> 00:06:42,140
لذلك، هذا هو تطبيق بسيط جدا أن العظام العارية تطبيق الزاوي

92
00:06:42,140 --> 00:06:47,490
لتحصل على البدء مع تطوير التطبيق الزاوي الخاص بك.

93
00:06:47,490 --> 00:06:52,460
سنقوم ببناء على رأس هذا التطبيق السقالات بواسطة Angular CLI،

94
00:06:52,460 --> 00:06:57,420
من خلال تنفيذ ميزات مختلفة كجزء من هذه الدورة.

95
00:06:57,420 --> 00:07:01,710
إذا كنت تخطط لاستخدام Git لتطبيق Angular الخاص بك لتعيين الإصدار،

96
00:07:01,710 --> 00:07:03,680
ففي هذه المرحلة،

97
00:07:03,680 --> 00:07:06,980
قد تكون فكرة جيدة لتهيئة مستودع Git الخاص بك.

98
00:07:06,980 --> 00:07:12,620
يقوم Angular CLI تلقائيًا بتهيئة مستودع Git الخاص بك،

99
00:07:12,620 --> 00:07:18,765
وبالتالي الالتزام الأول بالرسالة الأولية بمستودع Git.

100
00:07:18,765 --> 00:07:23,610
دعونا نتحقق من حالة مستودع Git الخاص بنا.

101
00:07:23,610 --> 00:07:28,310
يتيح التحقق من خلال كتابة git log

102
00:07:28,310 --> 00:07:29,600
سطر واحد وسترى أن

103
00:07:29,600 --> 00:07:33,020
الإعداد الأولي قد تم الالتزام به لمستودع Git الخاص بنا.

104
00:07:33,020 --> 00:07:36,920
الآن، يمكننا البدء في العمل على تطبيق Angular الخاص بنا الذي

105
00:07:36,920 --> 00:07:41,020
قمنا بسقالات في هذا المجلد هنا.

106
00:07:41,020 --> 00:07:46,800
إذا اخترت مزامنة مستودع Git الخاص بك مع مستودع عبر الإنترنت

107
00:07:46,800 --> 00:07:52,160
، فيرجى التأكد من أن المستودع الخاص بك عبر الإنترنت هو مستودع خاص.

108
00:07:52,160 --> 00:07:56,835
يسمح لك Bitbucket بإنشاء مستودعات خاصة مجانية.

109
00:07:56,835 --> 00:08:01,580
لذا، قم بإعداد مستودع Git الخاص بك على Bitbucket.

110
00:08:01,580 --> 00:08:04,350
مع هذا، نكمل ممارستنا.

111
00:08:04,350 --> 00:08:06,395
في هذا التمرين الأول،

112
00:08:06,395 --> 00:08:08,635
قمنا بتثبيت CLI الزاوي.

113
00:08:08,635 --> 00:08:14,060
بعد ذلك، قمنا بسقالات تطبيقنا الزاوي الذي

114
00:08:14,060 --> 00:08:22,150
سنعمل على تطويره بشكل أكبر كجزء من بقية التمارين في هذه الدورة.