به آدرس زیر برید و Visual Studio Code رو دانلود کنید.
فکر می کنم حجمش حدودا 50 مگ باشه:
کلیک
بعد از اینکه VS Code رو نصب کردید واردش بشید و دکمه های Ctrl+Shilt+` رو همزمان بزنید!
دقیت کنید که منظورم از دکمه ی ` همون دکمه ی بالای tab هست !
خب.
بعدش از اینکه سه تا دکمه روز زدید منویی شبیه عکس زیر باز میشه:
کلیک
متن زیر رو کپی کنید و داخل اون منو منتق کنید. همین.
با این کار ابزار های خوبی روی Vs Code اضافه میشه که روند کارتون رو ساده تر می کنه.(کم کم توضیح میدم چکار می کنن)
اگه نخواستید هم می تونید فعلا این اکستنشن ها رو نصب نکنید.
قبل از اینکه کارمون رو شروع کنیم، اول چند تا سوالو جواب میدیم که بفهمیم قراره چکار کنیم ((:
* :مخطب این آموزش چه کسایی هستن؟؟
خب !
این آموزش برای افرادی ایجاد شده که تازه میخوان برنامه نویسی رو یاد بگیرن (:
(خوش به حالشوووون !! )
بذارید اینم بگم که تقریبا هیچ جا، توی هیچ آموزشی توصیه نمی کنن که شما برای یاد گرفتن برنامه نویسی از زبان های تحت وب شروع کنید! می پرسید چرا؟!
خب چون کار خیلی سختیه !! شما در برنامه نویسی تحت وب باید چند زبان برنامه نویسی رو یاد بگیرید و مسلط بشید و از طرف دیگه زبان های تحت وب جزو کثیف ترین و نامرتب ترین زبان های برنامه نویسی هستن و فهمیدن شون کار خیلی مشکلیه !
ولی حالا چون مربی شما من هستم (خوشحال باشید از این بابت !!) و می خوام خیلی سریع شما رو با برنامه نویسی و با جدید ترین ابزار های برنامه نویسی آشنا کنم، می برمتون سر اصل مطلب و کار رو با جاوا اسکریپ و انگولار شروع می کنم ((:
امیدوارم شما هم توی این مسیر از خودتون سخت کوشی نشون بدین و در نهایت به یه برنامه نویس واقعی تبدیل بشین !
* : ما قرار هست دقیقا چه چیزی رو یاد بگیریم؟؟
شما HTML رو به عنوان پایه برنامه نویسی تحت وب یاد می گیرید و این آموزش رو با HTML شروع می کنیم . البته قرار نیست تمام جزئیات HTML رو اینجا یاد بگیرید . (چون هم وقت نمیشه و هم ممکنه خیلی از مطالب HTML الان برای شما کاربردی نداشته باشه)
لابه لای HTML یه گریزی هم به دستورات مهم و کاربردی CSS می زنیم (که برای قشنگ سازی HTML استفاده میشه! )
و بعد از اون کارمون رو زبان با JavaScript شروع می کنیم که بخش اصلی و مهم این وبلاگ محسوب میشه.
بعد از یادگیری جاوا اسکریپت، با فریم ورک قدرتمند Angular آشنا می شید و یاد می گیرید چطور به جای JavaScript (که یک زبان نامرتب و شه است!) از TypeScript استفاده کنید و بتونید برنامه نویسی تحت وب رو به شکل حرفه ای و مدرن تر یاد بگیرید (:
*: چه مدت طول میکشه که ما بتونیم یه برنامه نویسی واقعی بشیم؟
اگه تا به حال هیچی از زبان های برنامه نویسی به گوشتون نخورده باشه شاید تا دو سه سال زمان ببره
ولی خب اگه زبان انگلیسی تون قوی باشه و علاقه زیادی به کامپیوتر داشته باشید می تونید خیلی زود تر این مسیرو طی کنید !
*: چه مدت طول میکشه که بتونیم توی برنامه نویسی گلیم خودمون رو از آب بکشیم بیرون؟
یاد گرفتن مطالبی که بالا گفتم شاید حدودا 6 ماه طول بکشه (:
*: مواد لازم؟!
چیزی که شما لازم دارید در درجه اول یه لپ تاپ یا کامپیوتر رو میزیه (:
فرقی نمی کنه سیستم تون قدیمیه یا جدیده یا چقدر قدرت داره
تنها چیزی که لازم دارید در اختیار داشتن دائم یه سیستم کامپیوتریه و بهتره تایید کنم که اگر خودتون کامپیوتر ندارید حتمن تهیه کنید !
* (سوال آخر!)
چه تکنولوژی های دیگه ای در زمینه توسعه نرم افزارهای تحت وب هستن و چرا اصلا اون ها رو یاد نمی گیریم؟
اگه از تکنولوژی های دیگه بخوایم بگیم مهم ترین شون کتابخونه های JQuery و AngularJs هستند (:
AngularJs نسخه قدیمی تره Angular هست که توسط Google در سال 2009 ساخته شده بود.
Jquery هم مثل َAngularJs یک کتابخونه سبک وزن و بسیار محبوب و جا افتاده توی دنیای وب هست که در سال 2006 توسط آقای John Resig طراحی شد
آقای John Resig !
هر دو تای این کتابخونه ها تا امروز پرطرفدارترین و مورد استفاده ترین تکنولوژی ها توی دنیای وب بودن و هستن (:
به طوری که تا همین الان هفتاد درصد صفحات وب توی دنیا به کمک Jquery ساخته شدن
ولی خب در سال 2016، Google یک نسخه جدید تر از کتابخونه AngularJs خودش رو ارائه کرد به نام Angular.
(حروف Js رو از آخرش برداشتن!)
Angular در مقایسه با AngularJs از یک زبان برنامه نویسی پیشرفته تر و با قوام تر استفاده می کرد که باعث می شد برنامه های نوشته شده تمیز تر، خوانا تر و قابل اعتماد تر بشن . و همین طور یک سری امکانات پیشرفته تر ارائه داد که قبل از اون توی AngularJs و Jquery وجود نداشت.
بنابراین با رسیدن نسخه جدیدتر Angular استفاده از Jquery و َAngularJs رفته رفته رو به کم تر شدن هست تا زمانی که این تکنولوژی ها جای خودشون رو به تکنولوژی های جدید تر مثل Angular بدن.
حالا این وسط َAngular یه رقیب سر سخت هم داره به نام React ! ری اکت، سال 2013 توسط آقای Jordan Walke، که اون زمان کارمند FaceBook بود، ساخته شد و هنوز هم نگهداری و پشتیبانی اش توسط FaceBook انجام میشه.
از نظر ساختاری React خیلی شبیه AngularJs (و نه Angular!) بود ولی نسبتا قابلیت های بیشتری ارئه میداد.
بنابراین توی دنیای وب امروز دو تا رقیب سر سخت به نام Angular و React داریم که اولی ساخته و پرداخته ی Google هست و دومی محصول FaceBook عه.
اگه از نظر محبوبیت بخوایم بررسی کنیم، React تا به امروز بیشتر از Angular مورد استفاده قرار گرفته و تعداد نصب هاش توسط برنامه نویس ها حدود 6 برابر بیشتر از Angular بوده.
و همین طور تعداد شغل هایی که توی دنیا برای React وجود داره تقریبا 4 برابر بیشتر از Angular هست.
نسبت شغل های React و Angular در سایت Indeed.com
ولی خب از نظر فنی و تخصصی اگر بخوایم بررسی کنیم، React یک "کتابخونه ی فسقلی! " به حساب میاد اما Angular یک فریم ورک تمام و کمال و پیشرفته است که در واقع یک چارچوب تمام عیار برای ساخت صفحات وب با قدرت زیاد و بیشترین امکانات ممکن هست.
مفاهیم بسیار پیشرفته ای مثل :
TwoWay Binding
StronglyTyped Language
Advanced Routing System
Object Oriented
Services
Dependency Injection
Pipes
Css Styles Encapsulation
به طور ذاتی توی Angular پشتیبانی میشه که این موارد توی React وجود ندارن. و به طور خیلی خیلی ساده تر هیچ کاری نیست که React بتونه انجام بده و Angular قادر نباشه ! اما ! خیلی کارا هست که Angular می تونه انجام بده ولی React به هیچ وجه قادر به انجام دادن شون نیست.
و نکته ی خیلی خیلی مهم که وجه تمایز اصلی Angular و React هست و باعث میشه ما به سمت Angular حرکت کنیم این هست که کد های نوشته شده در Angular به طرز غیر قابل رقابتی با همه تکنولوژی های تحت وب، تمیز تر و خوانا تر هست که به خاطر همین Angular رو یک انتخاب بسیار مناسب برای اجرای معماری های مهندسی نرم افزار و پروژه های بسیار بزرگ تجاری می کنه.
با همه این مزیت ها، یادگیری Angular به خاطر امکانات بیشتری که در اختیارمون میذاره نسبت به React سخت تره ولی تحمل کردن این سختی ها به شیرینی بهتر انجام شدن پروژه هامون کاملا می ارزه 
خب !
تقریبا یک سالو . یک ماهو. بیست رووووز! از زمانی که تصمیم داشتم یه وبلاگ "آموزشِ برنامه نویسی" درست کنم گذشت !
تا بلاخره موفق شدم امشب! این کارو انجام بدم (:
تو این مدتی که سپری شد و من موفق نشده بودم این وبلاگو بزنم، کلی اتفاقات جالب افتاد و تجربه های خوبی بدست اومد (:
شاید . اگر قرار بود پارسال این وبلاگ تاسیس بشه، اسمش اسمی که الان هست نمی بود .
و شاید مطالب اش درباره انگولار نمی بود .
راستش من پارسال تصمیم داشتم وبلاگی که می زنم راجع به زبان برنامه نویسی "سی شارپ" باشه.
"سی شارپ" یه زبان برنامه نویسی "قدرتمند" و "همه منظوره" است که توسط شرکت مایکروسافت در سال 2000 طراحی و ساخته شده.
خب . با تجربه هایی که توی این یک سالِ گذشته به دست اومد، متوجه شدم زبان سی شارپ با تمام قابلیت های عالی و گاهی منحصر به فردی که داره، وقتی وسط میدون و کارزار پروژه ها قرار می گیره و با انبوهی از کدها مواجه میشه . اونقدرام عالی عمل نمی کنه
می پرسید چرا؟! اینو بعدا بهتون میگم ((:
در هر حال . میشه گفت این تغییرات جزء ذات تکنولوژیه که نمیشه بهش ایراد گرفت ! ابزار ها هر روز متنوع تر و جدید تر میشن .
ابزار های کهنه جاشون رو به ابزار های جدیدتر و سریع تر می دن .
و ما می بایست برای بهتر انجام دادن کارهامون به سمت ابزار های جدید و مناسب تر بریم و یادشون بگیرم
و گرنه عقب می مونیم . و این خیلی بده.
چیزی که ما باید متوجه اش باشیم این هست که زبان های برنامه نویسی، فقط ابزار هایی هستند که قراره ما رو توی بهتر انجام دادن کارها مون کمک بکنند.
پس بهتره قبل از اینکه بخوایم دست به انتخاب یک ابزار مناسب و خوب بزنیم و کار کردن باهاش رو یاد بگیرم، مشخص کنیم که کاری که قراره انجام بدیم چی هست و قراره چه کار بکنیم .
** پست بعدی درباره زبان برنامه نویسی جاوا اسکریپ یعنی موضوع این وبلاگ خواهد بود و یک مقدمه ای درباره زبان های برنامه نویسی تحت وب خواهم گفت (:
به آدرس زیر برید و Visual Studio Code رو دانلود کنید.
فکر می کنم حجمش حدودا 50 مگ باشه:
بعد از اینکه VS Code رو نصب کردید واردش بشید و دکمه های Ctrl+Shilt+` رو همزمان بزنید تا ترمینال باز بشه!
دقت کنید که منظورم از دکمه ی ` همون دکمه ی بالای tab هست !
خب.
بعد از اینکه سه تا دکمه روز زدید یک ترمینال شبیه عکس زیر باز میشه:
متنی که توی لینک زیر گذاشتم رو کپی کنید و داخل ترمینال پیست کنید.
با این کار ابزار های خوبی روی Vs Code اضافه میشه که روند کارتون رو ساده تر می کنه.(کم کم توضیح میدم چکار می کنن)
اگه نخواستید هم می تونید فعلا این اکستنشن ها رو نصب نکنید.
نرم افزار Node رو از لینک زیر دانلود و نصب کنید. حدودا 10 مگابایته.
وقتی نصب Node تموم شد باید مطمئن بشیم که Node درست نصب شده. برای اینکار وارد VS Code بشید و دکمه های Ctrl+Shilt+` بزنید تا ترمینال باز بشه.
داخل ترمینال دستور زیر رو بزنید:
node -v
node یعنی دارم نرم افزار node رو صدا می زنم.
-v هم ینی آقای نرم افزار node ! اگر اونجا هستی نسخه ی خودتو بهم نشون بده !
با این کار نسخه نرم افزار Node ای که نصب کردید رو به شما نشون میده.
خب داخل همون ترمینال دستور زیر رو بزنید تا انگولار نصب بشه:
npm install -g @angular/cli
npm یعنی من دارم نرم افزار npm رو صدا می زنم.
install یعنی آقای نرم افزار npm ! لطفا برام نصب کن!
-g یعنی به طور globaly این کارو انجام بده!نه فقط تو پوشه ی جاری!
@angular/cli هم یعنی رابط دستوری انگولار.
و همه این ها باهم یعنی انگولار رو به طور کامل نصب کن.
یه کم ممکنه طول بکشه .
بعد از اینکه نصب انگولار تموم شد باید یک پروژه بسازیم.
داخل نرم افزار Vs Code به منوی File برید. OpenFolder رو بزنید و یک
وشه رو انتخاب کنید تا پروژه جدید رو داخلش بسازه.
بعد از انتخاب فولدر، برای ساخت پروژه جدید کار دستور زیر رو توی ترمینال بزنید :
ng new my-app
اسم پروژه شما my-app هست.
new یعنی پروژه جدید
ng هم یعنی انگولار.
و همه اینها با هم یعنی یک پروژه جدید انگولار به نام my-app برای من بساز!
بعد از اینکه دستور رو وارد کردید دو تا سوال ازتون می پرسه. اولی رو با y جواب بدید. دومی رو از توی گزینه ها ، scss انتخاب کنید.
یه کمی صبر کنید تا پروژه جدید رو بسازه.
بعد از اینکه ساخت دستور زیر رو توی ترمینال بزنید که بره توی مسیر پروژه جدید :
cd my-app
cd یعنی Change Directory. یعنی مسیر پوشه رو عوض کن.
my-app هم اسم پروژه شماست. که در حقیقت یه پوشه به نام پروژه شما ساخته و میگه برو تو اون پوشه.
حالا دستور زیر رو توی ترمینال بزنید تا اولین پروژه شما تو مرورگر نشون داده بشه (:
ng serve --open
ng یعنی انگولار
serve یعنی انگولار رو روی Node راه اندازی کن.
--open هم یعنی بعد از اینکه راه اندازی کردی، از توی مرورگر بازش کن تا ببینیم اش (:
اینجوری!
درباره این سایت