دیباگ کردن در ویژوال استودیو کد — به زبان ساده

از زمان ظهور رایانه‌ها، داستان کامپیوتر مبتنی بر یک واقعیت ساده بوده است: خطاهای کوچکی که منجر به مشکلات بزرگی می‌شوند. برخی اوقات مشکل پیش‌آمده یک وضعیت نسبتاً ساده است. در برخی موارد دیگر ممکن است این مشکل منجر به خراب شدن مدارگرد مریخ به ارزش 125 میلیون دلار شود که در این صفحه (+) توضیح داده شده است. در هر صورت، ارزشمندترین برنامه‌نویس آن کسی نیست که سریع‌ترین کد یا هوشمندانه‌ترین الگوریتم را می‌نویسد، بلکه کسی است که خطرناک‌ترین باگ‌ها را پیش از ایجاد مشکلات بزرگ کشف می‌کند. در این مقاله با مبانی دیباگ کردن در ویژوال استودیو کد آشنا خواهیم شد.

شکاف بین فرضیات و واقعیات

زمانی که شروع به یادگیری برنامه‌نویسی می‌کنید، اغلب مراحل عمده یادگیری در زمان پس از پایان کلاس درس و هنگام سروکله زدن عملی با کد رخ می‌دهد. به طور معمول، یک برنامه‌نویس با تجربه می‌تواند یک خطای ساده را در تمرین کدنویسی با یک نگاه گذرا پیدا کند. هنر معلم خوب این است که از ارائه پاسخ‌های سریع و آماده به دانشجویان اجتناب کند و به جای آن دانشجویان را راهنمایی کند تا مشکل را خودشان حل کنند. زمانی که نوبت به کدنویسی می‌رسد، هیچ راه‌حلی بهتر از دیباگ کردن کد وجود ندارد.

دیباگ کردن نیاز به موارد زیادی دارد، اما آن را عموماً می‌توان «هنر آزمودن فرضیات» نام گذاشت. به صورت معمول یک مسئله چنین آغاز می‌شود که یک قطعه کد خوب را می‌نویسید، آن را اجرا می‌کنید و متوجه می‌شوید که این کد چیزی به جز آن چه انتظار دارید اجرا می‌کند. در اینجا یک انقطاع وجود دارد، شما می‌دانید که از کد چه چیزی خواسته‌اید؛ اما به نظر می‌رسد کد این کار را انجام نمی‌دهد.

به بیان دیگر، شما فرضیاتی دارید که در عمل رخ نمی‌دهند. این فرضیات شامل کدهایی هستند که اجرا می‌شوند، مسیری است که کد از میان شرط‌ها و حلقه‌ها طی می‌کند و داده‌هایی که متغیرها در خود نگهداری می‌کند. نکته اینجاست که دست‌کم یکی از این فرضیات نادرست بوده‌اند. بهترین روش برای ردگیری نقطه‌ای که انتظارهای شما از کد، از واقعیت واگرا می‌شوند، استفاده از ابزارهای دیباگ کردن است.

دیباگ کردن در ویژوال استودیو کد

ویژوال استودیو به خاطر ابزارهای دیباگ خوبی که دارد دست‌کم در میان یک نسل از برنامه‌نویسان محبوب بوده است. برخی از ابزارهای دیباگ کردن که در VS Code می‌بینید به زمان ویژوال‌بیسیک 6 بازمی‌گردند که نزدیک به بیست سال پیش منتشر شده است. VS Code نسخه سبک و متن‌باز ویژوال استودیو محسوب می‌شود.

در این مقاله روش استفاده از ابزارهای دیباگ کردن را به همراه یک وب اپلیکیشن ساده متنی بر جاوا اسکریپت بررسی می‌کنیم. البته می‌توانید از بخش DevTools کروم استفاده کنید و به دیباگ کردن در مرورگر وب بپردازید، اما VS Code امکان دیباگ را مستقیماً در ویرایشگر کد به همراه اعمال اصلاحیه‌ها فراهم می‌سازد. VS Code یکپارچه است و به همین دلیل به پلتفرم مناسبی برای افراد نوجوان و مبتدی که تازه شروع به یادگیری کدنویسی کرده‌اند تبدیل شده است.

ابزارهای دیباگ کردن VS Code تقریباً منسجم هستند. برای نمونه اگر مشغول کدنویسی در C# هستید، ممکن است متوجه شوید که همه قابلیت‌های توصیف‌شده در اینجا دقیقاً مشابه هستند. اما اگر می‌خواهید کد جاوا اسکریپت را دیباگ کنید، باید ابتدا دیباگر کروم را نصب و پروژه را پیکربندی کنید. مراحل این کار در این مقاله (+) توضیح داده شده است. سپس می‌توانید به مطالعه ادامه این مقاله بپردازید.

ماشین حساب نادرست

در این مثال یک صفحه را داریم که چندین خطای رایج جاوا اسکریپت را شامل می‌شود.

این صفحه طوری طراحی شده است که دو عدد را در دو کادر متنی بگیرد و آن‌ها را با هم جمع کرده و نتیجه را نمایش بدهد. متأسفانه محاسبات اجرا شده در اینجا معنی‌دار نیست. به طور مشخص شکافی بین آن چه انتظار داریم و آنچه عملاً رخ می‌دهد مشاهده می‌شود.

در ادامه کدی را که عمل جمع را در زمان فشردن کلید انجام می‌دهد می‌بینید:

1 2 3 4 5 6 7 8 9

function addNumbers() {   // Get the numbers out of the text boxes.   var numberA = document.getElementById("numA").value;   var numberB = document.getElementById("numA").value;   // Perform the calculation.   var result = numberA + numberB;   // Show the result on the page.   document.getElementById("result").innerHTML = result; }

اگر اندکی سابقه برنامه‌نویسی داشته باشید، احتمالاً به سرعت می‌توانید هر دو مشکل را شناسایی کنید. اما ما قصد داریم به بررسی کد با ابزارهای دیباگ VS Code بپردازیم.

ابتدا فایل کد «ماشین حساب نادرست» را از این آدرس (+) دانلود کنید. این بار نیز به دیباگر کروم (+) نیاز داریم، اما در این پروژه یک فایل.json تعریف شده است که به دیباگ محلی سوئیچ می‌کند.

اجرای تک‌ مرحله‌ای

یکی از بزرگ‌ترین ابزارهای هر زبان برنامه‌نویسی توانایی اجرای «گام به گام» (step through) کد است. این قابلیت امکان تماشای برنامه را در زمان اجرا و به صورت هر بار یک خط فراهم می‌سازد.

برای استفاده از این قابلیت باید مکانی را که می‌خواهید کد مکث کند مشخص کنید. این کار با تعیین «نقطه توقف» (breakpoint) انجام می‌یابد. نقطه توقف اساساً یک فلگ است که به VS Code اعلام می‌کند باید در آن نقطه از کد توقف کند. در مثال ماشین حساب نادرست، کد به قدر کافی ساده است به طوری که شاید بخواهید کل تابع را به صورت یک‌باره اجرا کنید. و در موقعیت‌های دیگر ممکن است بخواهید با تعیین نقطه توقف در بخش‌های متأخرتر برنامه از روی بخش‌های نامرتبط یا زمان‌بر اجرای کد رد شوید.

برای تعیین نقطه توقف، روی حاشیه سمت چپ کد و اعداد خطوط کلیک کنید. برای نمونه برای تعیین یک نقطه توقف در ابتدای تابع ()addNumbers در کنار خط 2 که به صورت زیر است کلیک کنید:

1	var numberA = document.getElementById("numA").value;

اکنون یک دایره قرمز می‌بینید که در کنار خطی که نشانه‌گذاری کرده‌اید نمایان می‌شود:

حذف نقاط توقف

برای حذف یک نقطه توقف، روی دایره قرمز کلیک کنید.

برخلاف برخی محیط‌های توسعه دیگر، VS Code امکان درج نقطه توقف را در هر کجا می‌دهد حتی می‌توان در اعلان متغیر، کامنت و یا خطوط خالی نیز نقطه توقف تعریف کرد. با این وجود در اعلان تابع (برای مثال در خط 1 نمونه کد فوق) امکان تعیین نقطه توقف وجود ندارد.

اکنون برنامه خود را در حالت دیباگ اجرا کنید (مسیر Debug→Start Debugging را از منو انتخاب کنید یا دکمه F5 را بزنید). با فرض این که از پروژه نمونه معرفی شده استفاده می‌کنید و یا اگر از پروژه خود استفاده می‌کنید، در صورتی که فایل json. را به درستی پیکربندی کرده باشید، VS Code کروم را اجرا می‌کند و صفحه را نمایش می‌دهد.

در ماشین حساب نادرست، همه چیز به صورت نرمال آغاز به کار می‌کند، اما زمانی که روی دکمه Add Numbers کلیک کنیم، VS Code با نقطه توقف تعیین شده مواجه می‌شود و اجرای کد را متوقف می‌کند. در اغلب موارد (و نه همه آن‌ها)، VS Code سایه‌ای روی پنجره مرورگر قرار داده و یک پیام زردرنگ نمایش می‌دهد که نشانگر توقف اجرای کد از سوی نقطه توقف است.

اینک زمان آن رسیده است به ویرایشگر VS Code بازگردیم.

زمانی که VS Code به یک نقطه توقف می‌رسد، آن خط کد را اجرا نمی‌کند. به جای آن یک فلش زردرنگ در خط کناری نمایش می‌دهد که نشانگر این است که دستورالعمل بعدی زمانی اجرا خواهد شد که برنامه از سر گرفته شود. همچنین شما یک نوار ابزار کوچک می‌بینید که دسترسی سریعی به برخی دستورهای کلیدی دیباگ فراهم می‌کند.

با این که برنامه متوقف شده است، اما می‌توان از دستورهای توضیح داده شده در بخش بعدی استفاده کرد. همه این دستورها کلیدهای میانبر مفیدی دارند. همچنین در نوار ابزار دیباگ کردن حضور دارند.

دستور Continue (با میانبر F5)

این دستور برنامه را از سر می‌گیرد و به اجرای نرمال آن بدون ایجاد مکث ادامه می‌دهد، مگر این که نقطه توقف دیگری وجود داشته باشد.

دستور Step Over (با میانبر F11)

دستور Step Over یک گام منفرد را اجرا می‌کند. بدین ترتیب خطی که هم اینک هایلایت شده است اجرا خواهد شد و سپس مجدداً متوقف می‌شود. اگر آن را روی مثال مورد بررسی اجرا کنید، VS Code خط 2 را اجرا می‌کند و مقدار را از کادر متنی اول می‌گیرد. سپس درست پیش از اجرای خط 3 متوقف می‌شود. این همان خطی است که برای دریافت مقدار از کادر متنی دوم طراحی شده است.

اینک VS Code در خط 3 متوقف شده است.

اکنون با زدن F11 می‌توانید گام دیگری بردارید و همین طور تا آخر بروید تا این که همه تابع را به صورت خط به خط اجرا کنید.

واژه Over در نام این دستور Step Over به معنی روش کار این دستور با فراخوانی‌های تابع است. اگر یک خط کد را که یک تابع را فراخوانی می‌کند، Step Over کنید، VS Code کل تابع را اجرا می‌کند و در خط زیر آن متوقف می‌شود.

دستور Step Into (با میانبر F10)

دستور Step Into عملکردی مشابه Step Over دارند به جز این که وقتی با یک تابع برخورد می‌کند رفتار متفاوتی دارد. در این حالت دستور Step Into وارد آن تابع می‌شود و در خط نخست آن متوقف می‌شود.

نکته اینجا است که دستور Step Into زمانی کار می‌کند که آن تابع بخشی از کد شما باشد. شما نمی‌توانید درون چیزی مانند تابع ()getElementById به صورت Step Into بروید، زیرا بخش داخلی مدل صفحه وب مرورگر است.

در واقع در این مثال هیچ تفاوتی بین استفاده از دستورهای Step Into و Step Over وجود ندارد. اما اگر می‌خواهید تابعی بنویسید که تابع دیگری را فراخوانی می‌کند، می‌توانید از Step Into برای انتقال به مکانی در آن کد استفاده کنید و بدین ترتیب هیچ جزییاتی از دست نمی‌رود.

دستور Step Out (با میانبر Shift+F11)

دستور Step Out همه کدهایی را که در تابع کنونی قرار دارند اجرا می‌کند و سپس در خط بعدی متوقف می‌شود. به بیان دیگر این گزاره امکان خروج از تابع کنونی را در یک گام فراهم می‌سازد. در مثال ماشین حساب نادرست دستور Step Out تقریباً معادل دستور Continue است، زیرا تابع ()addNumbers هیچ تابع دیگری را فراخوانی نمی‌کند. به جای آن ()addNumbers مستقیماً از سوی رویداد onClick در نشانه‌گذاری HTML فراخوانی می‌شود.

اگر از دستور Step Out در این مثال استفاده کنیم، VS Code شما را به صفحه نشانه‌گذاری HTML می‌برد تا نشان دهد که دستگیره رویداد کجا الحاق یافته است:

پس از آن کار دیگری نمی‌ماند که انجام دهیم، بنابراین می‌توانید با زدن F5 به ادامه اجرای نرمال برنامه بپردازید.

دستور Stop (با میانبر Shift+F5)

نام دستور Stop کاملاً گویا است. این دستور دیباگ کردن را متوقف می‌کند و مرورگر را می‌بندد. بدین ترتیب می‌توانید ویرایش‌های کد خود را در VS Code ادامه دهید.

بررسی متغیرها

اجرای تک‌مرحله‌ای روشی عالی برای پیگیری منطق پیچیده است. برای نمونه، می‌توانید دریابید که چند بار کد شما وارد یک حلقه شده است یا در یک بلوک منطق شرطی کدام مسیر را طی نموده است. اما اگر بخواهید دریابید که در یک برنامه حاوی باگ چه چیزی به خطا رفته است، باید حالت (State) اپلیکیشن را نیز مورد بررسی قرار دهید. به بیان دیگر باید بدانید که چیزی در حافظه نگهداری می‌شود.

حالت دیباگ این کار را آسان می‌سازد. زمانی که کد متوقف می‌شود می‌توانید کرسر ماوس را روی هر متغیری که دارید ببرید تا مقدار کنونی آن را ببینید. برای نمونه اگر کرسر ماوس را روی متغیر numberA که بلافاصله پس از نقطه توقف قرار دارد ببرید با تصویر زیر مواجه می‌شوید:

به خاطر داشته باشید که نقطه توقف اجرای خود را درست پیش از این خط متوقف می‌کند. در این مثال، هنوز هیچ اتفاقی نیفتاده است بنابراین جای شگفتی است که numberA به صورت «تعریف نشده» (undefined) است.

اکنون روی F11 بزنید (Step Over) تا یک خط از کد اجرا شود و این بار numberA را بررسی کنید. این بار می‌بینیم که مقدار آن “12” است:

لازم است بدانید که وقتی یک متغیر را بررسی می‌کنیم، همواره مقدار کنونی آن را می‌بینید و مهم نیست که در کجای کد قرار دارید. برای نمونه فرقی نمی‌کند که در خط 2 روی numbrA بروید و یا در خط 5 چون در هر صورت VS Code مقداری که این متغیر هم اینک نگهداری می‌کند را نمایش می‌دهد. به طور مشابه، اگر ماوس را روی متغیر result در خط 5 ببرید، خالی خواهد بود زیرا این خط از کد هنوز اجرا نشده است.

اصلاح ماشین حساب نادرست

چنان که می‌بینیم بررسی متغیر، راز کشف نخستین مشکل در مثال «ماشین حسابِ نادرست» است. با زدن دکمه F11 یک خط دیگر را نیز اجرا می‌کنیم و به بررسی متغیر numberB می‌پردازیم. بدین ترتیب خواهید دید که همان مقدار numbrA را دارد.

واضح است که خط 3 دارای مشکل است، چون این کد مقدار را از کادر ورودی اشتباهی می‌گیرد. بدین ترتیب کافی است نام کادر متنی را اصلاح و به جای numA عبارت numb را وارد کنید:

1	var numberB = document.getElementById("numB").value;

زمانی که این اصلاح را انجام دهید باید برنامه را متوقف (Shift+F5) کنید و بار دیگر دیباگ را اجرا کنید (F5).  کد تغییر یافته را به صورت خودکار در زمان راه‌اندازی مجدد به جای شما ذخیره می‌کند.

اگر به اجرای گام به گام کد ادامه بدهید، با مشکل دوم مواجه می‌شوید. نتیجه افزودن دو عدد (در این مثال 12 و 19) مقدار متنی long bit 1219 را به جای مقدار صحیح 31 ارائه می‌کند. با استفاده از بررسی متغیر پس از اجرای محاسبات در VS Code می‌توانید به سرعت ریشه مشکل را پیدا کنید:

پنل VARIABLES

البته VS Code مقدار متغیرهای محلی را در پنل VARIABLES در سمت چپ نیز نمایش می‌دهد و می‌توان با یک نگاه از آنجا نیز متوجه شد.

به لطف ابزارهای دیباگ می‌توانید ببینید که مشکل از کجا ناشی می‌شود. مشکل این است که کد به جای عدد 12 روی مقدار متنی آن “12” کار می‌کند. زمانی که از علامت جمع روی بیت‌های تست استفاده کنیم، جاوا اسکریپت آن‌ها را با هم الحاق می‌کند. برای حل این مشکل باید هر دو مقدار را به نوع عددی ترجمه کنیم و سپس این دو مقدار را با هم جمع بزنیم.

چندین روش برای تبدیل متن به عدد در جاوا اسکریپت وجود دارد که هر کدام تفاوت‌های ظریفی درروش کار با اعداد بد (متن‌هایی که واقعاً حاوی عدد نیستند) دارند. اما یک مثال برای روش اصلاح سریع این مثال استفاده از تابع ()Number در جاوا اسکریپت است:

1	var result = Number(numberA) + Number(numberB);

البته در این مثال، اصلاح کد چندان اهمیتی ندارد، مزیت اصلی این مثال، توسعه مهارت‌های دیباگ کردن شما بوده است.

سخن پایانی

VS Code چند ابزار دیباگ پیشرفته‌تر نیز دارد. برای نمونه، می‌توانید watch–هایی ایجاد کنید که مقدار متغیرهای خاصی را ردگیری کنند و به بررسی پشته فراخوانی بپردازند تا مشخص شود که در کدهای تودرتو کجا قرار دارید و همچنین نقاط توقف شرطی ایجاد کنید تا تنها در صورتی که شرایط خاصی وجود داشتند کد را متوقف کنند.

اما اجرای تک‌مرحله‌ای و بررسی متغیرها دو ابزار دیباگ هستند که هر کاری را میسر می‌سازند. با استفاده از این ابزارها هرگز نیازی به تسلیم شدن در هنگام مواجهه با مشکلات رازآلود نخواهد بود. به جای آن همواره می‌توان با کمک ابزارهای دیباگ به بررسی پشت صحنه اجرای کد پرداخت.

منبع: فرادرس

دیباگ کردن در ویژوال استودیو کد — به زبان ساده

از زمان ظهور رایانه‌ها، داستان کامپیوتر مبتنی بر یک واقعیت ساده بوده است: خطاهای کوچکی که منجر به مشکلات بزرگی می‌شوند. برخی اوقات مشکل پیش‌آمده یک وضعیت نسبتاً ساده است. در برخی موارد دیگر ممکن است این مشکل منجر به خراب شدن مدارگرد مریخ به ارزش 125 میلیون دلار شود که در این صفحه (+) توضیح داده شده است. در هر صورت، ارزشمندترین برنامه‌نویس آن کسی نیست که سریع‌ترین کد یا هوشمندانه‌ترین الگوریتم را می‌نویسد، بلکه کسی است که خطرناک‌ترین باگ‌ها را پیش از ایجاد مشکلات بزرگ کشف می‌کند. در این مقاله با مبانی دیباگ کردن در ویژوال استودیو کد آشنا خواهیم شد.

شکاف بین فرضیات و واقعیات

زمانی که شروع به یادگیری برنامه‌نویسی می‌کنید، اغلب مراحل عمده یادگیری در زمان پس از پایان کلاس درس و هنگام سروکله زدن عملی با کد رخ می‌دهد. به طور معمول، یک برنامه‌نویس با تجربه می‌تواند یک خطای ساده را در تمرین کدنویسی با یک نگاه گذرا پیدا کند. هنر معلم خوب این است که از ارائه پاسخ‌های سریع و آماده به دانشجویان اجتناب کند و به جای آن دانشجویان را راهنمایی کند تا مشکل را خودشان حل کنند. زمانی که نوبت به کدنویسی می‌رسد، هیچ راه‌حلی بهتر از دیباگ کردن کد وجود ندارد.

دیباگ کردن نیاز به موارد زیادی دارد، اما آن را عموماً می‌توان «هنر آزمودن فرضیات» نام گذاشت. به صورت معمول یک مسئله چنین آغاز می‌شود که یک قطعه کد خوب را می‌نویسید، آن را اجرا می‌کنید و متوجه می‌شوید که این کد چیزی به جز آن چه انتظار دارید اجرا می‌کند. در اینجا یک انقطاع وجود دارد، شما می‌دانید که از کد چه چیزی خواسته‌اید؛ اما به نظر می‌رسد کد این کار را انجام نمی‌دهد.

به بیان دیگر، شما فرضیاتی دارید که در عمل رخ نمی‌دهند. این فرضیات شامل کدهایی هستند که اجرا می‌شوند، مسیری است که کد از میان شرط‌ها و حلقه‌ها طی می‌کند و داده‌هایی که متغیرها در خود نگهداری می‌کند. نکته اینجاست که دست‌کم یکی از این فرضیات نادرست بوده‌اند. بهترین روش برای ردگیری نقطه‌ای که انتظارهای شما از کد، از واقعیت واگرا می‌شوند، استفاده از ابزارهای دیباگ کردن است.

دیباگ کردن در ویژوال استودیو کد

ویژوال استودیو به خاطر ابزارهای دیباگ خوبی که دارد دست‌کم در میان یک نسل از برنامه‌نویسان محبوب بوده است. برخی از ابزارهای دیباگ کردن که در VS Code می‌بینید به زمان ویژوال‌بیسیک 6 بازمی‌گردند که نزدیک به بیست سال پیش منتشر شده است. VS Code نسخه سبک و متن‌باز ویژوال استودیو محسوب می‌شود.

در این مقاله روش استفاده از ابزارهای دیباگ کردن را به همراه یک وب اپلیکیشن ساده متنی بر جاوا اسکریپت بررسی می‌کنیم. البته می‌توانید از بخش DevTools کروم استفاده کنید و به دیباگ کردن در مرورگر وب بپردازید، اما VS Code امکان دیباگ را مستقیماً در ویرایشگر کد به همراه اعمال اصلاحیه‌ها فراهم می‌سازد. VS Code یکپارچه است و به همین دلیل به پلتفرم مناسبی برای افراد نوجوان و مبتدی که تازه شروع به یادگیری کدنویسی کرده‌اند تبدیل شده است.

ابزارهای دیباگ کردن VS Code تقریباً منسجم هستند. برای نمونه اگر مشغول کدنویسی در C# هستید، ممکن است متوجه شوید که همه قابلیت‌های توصیف‌شده در اینجا دقیقاً مشابه هستند. اما اگر می‌خواهید کد جاوا اسکریپت را دیباگ کنید، باید ابتدا دیباگر کروم را نصب و پروژه را پیکربندی کنید. مراحل این کار در این مقاله (+) توضیح داده شده است. سپس می‌توانید به مطالعه ادامه این مقاله بپردازید.

ماشین حساب نادرست

در این مثال یک صفحه را داریم که چندین خطای رایج جاوا اسکریپت را شامل می‌شود.

این صفحه طوری طراحی شده است که دو عدد را در دو کادر متنی بگیرد و آن‌ها را با هم جمع کرده و نتیجه را نمایش بدهد. متأسفانه محاسبات اجرا شده در اینجا معنی‌دار نیست. به طور مشخص شکافی بین آن چه انتظار داریم و آنچه عملاً رخ می‌دهد مشاهده می‌شود.

در ادامه کدی را که عمل جمع را در زمان فشردن کلید انجام می‌دهد می‌بینید:

1 2 3 4 5 6 7 8 9

function addNumbers() {   // Get the numbers out of the text boxes.   var numberA = document.getElementById("numA").value;   var numberB = document.getElementById("numA").value;   // Perform the calculation.   var result = numberA + numberB;   // Show the result on the page.   document.getElementById("result").innerHTML = result; }

اگر اندکی سابقه برنامه‌نویسی داشته باشید، احتمالاً به سرعت می‌توانید هر دو مشکل را شناسایی کنید. اما ما قصد داریم به بررسی کد با ابزارهای دیباگ VS Code بپردازیم.

ابتدا فایل کد «ماشین حساب نادرست» را از این آدرس (+) دانلود کنید. این بار نیز به دیباگر کروم (+) نیاز داریم، اما در این پروژه یک فایل.json تعریف شده است که به دیباگ محلی سوئیچ می‌کند.

اجرای تک‌ مرحله‌ای

یکی از بزرگ‌ترین ابزارهای هر زبان برنامه‌نویسی توانایی اجرای «گام به گام» (step through) کد است. این قابلیت امکان تماشای برنامه را در زمان اجرا و به صورت هر بار یک خط فراهم می‌سازد.

برای استفاده از این قابلیت باید مکانی را که می‌خواهید کد مکث کند مشخص کنید. این کار با تعیین «نقطه توقف» (breakpoint) انجام می‌یابد. نقطه توقف اساساً یک فلگ است که به VS Code اعلام می‌کند باید در آن نقطه از کد توقف کند. در مثال ماشین حساب نادرست، کد به قدر کافی ساده است به طوری که شاید بخواهید کل تابع را به صورت یک‌باره اجرا کنید. و در موقعیت‌های دیگر ممکن است بخواهید با تعیین نقطه توقف در بخش‌های متأخرتر برنامه از روی بخش‌های نامرتبط یا زمان‌بر اجرای کد رد شوید.

برای تعیین نقطه توقف، روی حاشیه سمت چپ کد و اعداد خطوط کلیک کنید. برای نمونه برای تعیین یک نقطه توقف در ابتدای تابع ()addNumbers در کنار خط 2 که به صورت زیر است کلیک کنید:

1	var numberA = document.getElementById("numA").value;

اکنون یک دایره قرمز می‌بینید که در کنار خطی که نشانه‌گذاری کرده‌اید نمایان می‌شود:

حذف نقاط توقف

برای حذف یک نقطه توقف، روی دایره قرمز کلیک کنید.

برخلاف برخی محیط‌های توسعه دیگر، VS Code امکان درج نقطه توقف را در هر کجا می‌دهد حتی می‌توان در اعلان متغیر، کامنت و یا خطوط خالی نیز نقطه توقف تعریف کرد. با این وجود در اعلان تابع (برای مثال در خط 1 نمونه کد فوق) امکان تعیین نقطه توقف وجود ندارد.

اکنون برنامه خود را در حالت دیباگ اجرا کنید (مسیر Debug→Start Debugging را از منو انتخاب کنید یا دکمه F5 را بزنید). با فرض این که از پروژه نمونه معرفی شده استفاده می‌کنید و یا اگر از پروژه خود استفاده می‌کنید، در صورتی که فایل json. را به درستی پیکربندی کرده باشید، VS Code کروم را اجرا می‌کند و صفحه را نمایش می‌دهد.

در ماشین حساب نادرست، همه چیز به صورت نرمال آغاز به کار می‌کند، اما زمانی که روی دکمه Add Numbers کلیک کنیم، VS Code با نقطه توقف تعیین شده مواجه می‌شود و اجرای کد را متوقف می‌کند. در اغلب موارد (و نه همه آن‌ها)، VS Code سایه‌ای روی پنجره مرورگر قرار داده و یک پیام زردرنگ نمایش می‌دهد که نشانگر توقف اجرای کد از سوی نقطه توقف است.

اینک زمان آن رسیده است به ویرایشگر VS Code بازگردیم.

زمانی که VS Code به یک نقطه توقف می‌رسد، آن خط کد را اجرا نمی‌کند. به جای آن یک فلش زردرنگ در خط کناری نمایش می‌دهد که نشانگر این است که دستورالعمل بعدی زمانی اجرا خواهد شد که برنامه از سر گرفته شود. همچنین شما یک نوار ابزار کوچک می‌بینید که دسترسی سریعی به برخی دستورهای کلیدی دیباگ فراهم می‌کند.

با این که برنامه متوقف شده است، اما می‌توان از دستورهای توضیح داده شده در بخش بعدی استفاده کرد. همه این دستورها کلیدهای میانبر مفیدی دارند. همچنین در نوار ابزار دیباگ کردن حضور دارند.

دستور Continue (با میانبر F5)

این دستور برنامه را از سر می‌گیرد و به اجرای نرمال آن بدون ایجاد مکث ادامه می‌دهد، مگر این که نقطه توقف دیگری وجود داشته باشد.

دستور Step Over (با میانبر F11)

دستور Step Over یک گام منفرد را اجرا می‌کند. بدین ترتیب خطی که هم اینک هایلایت شده است اجرا خواهد شد و سپس مجدداً متوقف می‌شود. اگر آن را روی مثال مورد بررسی اجرا کنید، VS Code خط 2 را اجرا می‌کند و مقدار را از کادر متنی اول می‌گیرد. سپس درست پیش از اجرای خط 3 متوقف می‌شود. این همان خطی است که برای دریافت مقدار از کادر متنی دوم طراحی شده است.

اینک VS Code در خط 3 متوقف شده است.

اکنون با زدن F11 می‌توانید گام دیگری بردارید و همین طور تا آخر بروید تا این که همه تابع را به صورت خط به خط اجرا کنید.

واژه Over در نام این دستور Step Over به معنی روش کار این دستور با فراخوانی‌های تابع است. اگر یک خط کد را که یک تابع را فراخوانی می‌کند، Step Over کنید، VS Code کل تابع را اجرا می‌کند و در خط زیر آن متوقف می‌شود.

دستور Step Into (با میانبر F10)

دستور Step Into عملکردی مشابه Step Over دارند به جز این که وقتی با یک تابع برخورد می‌کند رفتار متفاوتی دارد. در این حالت دستور Step Into وارد آن تابع می‌شود و در خط نخست آن متوقف می‌شود.

نکته اینجا است که دستور Step Into زمانی کار می‌کند که آن تابع بخشی از کد شما باشد. شما نمی‌توانید درون چیزی مانند تابع ()getElementById به صورت Step Into بروید، زیرا بخش داخلی مدل صفحه وب مرورگر است.

در واقع در این مثال هیچ تفاوتی بین استفاده از دستورهای Step Into و Step Over وجود ندارد. اما اگر می‌خواهید تابعی بنویسید که تابع دیگری را فراخوانی می‌کند، می‌توانید از Step Into برای انتقال به مکانی در آن کد استفاده کنید و بدین ترتیب هیچ جزییاتی از دست نمی‌رود.

دستور Step Out (با میانبر Shift+F11)

دستور Step Out همه کدهایی را که در تابع کنونی قرار دارند اجرا می‌کند و سپس در خط بعدی متوقف می‌شود. به بیان دیگر این گزاره امکان خروج از تابع کنونی را در یک گام فراهم می‌سازد. در مثال ماشین حساب نادرست دستور Step Out تقریباً معادل دستور Continue است، زیرا تابع ()addNumbers هیچ تابع دیگری را فراخوانی نمی‌کند. به جای آن ()addNumbers مستقیماً از سوی رویداد onClick در نشانه‌گذاری HTML فراخوانی می‌شود.

اگر از دستور Step Out در این مثال استفاده کنیم، VS Code شما را به صفحه نشانه‌گذاری HTML می‌برد تا نشان دهد که دستگیره رویداد کجا الحاق یافته است:

پس از آن کار دیگری نمی‌ماند که انجام دهیم، بنابراین می‌توانید با زدن F5 به ادامه اجرای نرمال برنامه بپردازید.

دستور Stop (با میانبر Shift+F5)

نام دستور Stop کاملاً گویا است. این دستور دیباگ کردن را متوقف می‌کند و مرورگر را می‌بندد. بدین ترتیب می‌توانید ویرایش‌های کد خود را در VS Code ادامه دهید.

بررسی متغیرها

اجرای تک‌مرحله‌ای روشی عالی برای پیگیری منطق پیچیده است. برای نمونه، می‌توانید دریابید که چند بار کد شما وارد یک حلقه شده است یا در یک بلوک منطق شرطی کدام مسیر را طی نموده است. اما اگر بخواهید دریابید که در یک برنامه حاوی باگ چه چیزی به خطا رفته است، باید حالت (State) اپلیکیشن را نیز مورد بررسی قرار دهید. به بیان دیگر باید بدانید که چیزی در حافظه نگهداری می‌شود.

حالت دیباگ این کار را آسان می‌سازد. زمانی که کد متوقف می‌شود می‌توانید کرسر ماوس را روی هر متغیری که دارید ببرید تا مقدار کنونی آن را ببینید. برای نمونه اگر کرسر ماوس را روی متغیر numberA که بلافاصله پس از نقطه توقف قرار دارد ببرید با تصویر زیر مواجه می‌شوید:

به خاطر داشته باشید که نقطه توقف اجرای خود را درست پیش از این خط متوقف می‌کند. در این مثال، هنوز هیچ اتفاقی نیفتاده است بنابراین جای شگفتی است که numberA به صورت «تعریف نشده» (undefined) است.

اکنون روی F11 بزنید (Step Over) تا یک خط از کد اجرا شود و این بار numberA را بررسی کنید. این بار می‌بینیم که مقدار آن “12” است:

لازم است بدانید که وقتی یک متغیر را بررسی می‌کنیم، همواره مقدار کنونی آن را می‌بینید و مهم نیست که در کجای کد قرار دارید. برای نمونه فرقی نمی‌کند که در خط 2 روی numbrA بروید و یا در خط 5 چون در هر صورت VS Code مقداری که این متغیر هم اینک نگهداری می‌کند را نمایش می‌دهد. به طور مشابه، اگر ماوس را روی متغیر result در خط 5 ببرید، خالی خواهد بود زیرا این خط از کد هنوز اجرا نشده است.

اصلاح ماشین حساب نادرست

چنان که می‌بینیم بررسی متغیر، راز کشف نخستین مشکل در مثال «ماشین حسابِ نادرست» است. با زدن دکمه F11 یک خط دیگر را نیز اجرا می‌کنیم و به بررسی متغیر numberB می‌پردازیم. بدین ترتیب خواهید دید که همان مقدار numbrA را دارد.

واضح است که خط 3 دارای مشکل است، چون این کد مقدار را از کادر ورودی اشتباهی می‌گیرد. بدین ترتیب کافی است نام کادر متنی را اصلاح و به جای numA عبارت numb را وارد کنید:

1	var numberB = document.getElementById("numB").value;

زمانی که این اصلاح را انجام دهید باید برنامه را متوقف (Shift+F5) کنید و بار دیگر دیباگ را اجرا کنید (F5).  کد تغییر یافته را به صورت خودکار در زمان راه‌اندازی مجدد به جای شما ذخیره می‌کند.

اگر به اجرای گام به گام کد ادامه بدهید، با مشکل دوم مواجه می‌شوید. نتیجه افزودن دو عدد (در این مثال 12 و 19) مقدار متنی long bit 1219 را به جای مقدار صحیح 31 ارائه می‌کند. با استفاده از بررسی متغیر پس از اجرای محاسبات در VS Code می‌توانید به سرعت ریشه مشکل را پیدا کنید:

پنل VARIABLES

البته VS Code مقدار متغیرهای محلی را در پنل VARIABLES در سمت چپ نیز نمایش می‌دهد و می‌توان با یک نگاه از آنجا نیز متوجه شد.

به لطف ابزارهای دیباگ می‌توانید ببینید که مشکل از کجا ناشی می‌شود. مشکل این است که کد به جای عدد 12 روی مقدار متنی آن “12” کار می‌کند. زمانی که از علامت جمع روی بیت‌های تست استفاده کنیم، جاوا اسکریپت آن‌ها را با هم الحاق می‌کند. برای حل این مشکل باید هر دو مقدار را به نوع عددی ترجمه کنیم و سپس این دو مقدار را با هم جمع بزنیم.

چندین روش برای تبدیل متن به عدد در جاوا اسکریپت وجود دارد که هر کدام تفاوت‌های ظریفی درروش کار با اعداد بد (متن‌هایی که واقعاً حاوی عدد نیستند) دارند. اما یک مثال برای روش اصلاح سریع این مثال استفاده از تابع ()Number در جاوا اسکریپت است:

1	var result = Number(numberA) + Number(numberB);

البته در این مثال، اصلاح کد چندان اهمیتی ندارد، مزیت اصلی این مثال، توسعه مهارت‌های دیباگ کردن شما بوده است.

سخن پایانی

VS Code چند ابزار دیباگ پیشرفته‌تر نیز دارد. برای نمونه، می‌توانید watch–هایی ایجاد کنید که مقدار متغیرهای خاصی را ردگیری کنند و به بررسی پشته فراخوانی بپردازند تا مشخص شود که در کدهای تودرتو کجا قرار دارید و همچنین نقاط توقف شرطی ایجاد کنید تا تنها در صورتی که شرایط خاصی وجود داشتند کد را متوقف کنند.

اما اجرای تک‌مرحله‌ای و بررسی متغیرها دو ابزار دیباگ هستند که هر کاری را میسر می‌سازند. با استفاده از این ابزارها هرگز نیازی به تسلیم شدن در هنگام مواجهه با مشکلات رازآلود نخواهد بود. به جای آن همواره می‌توان با کمک ابزارهای دیباگ به بررسی پشت صحنه اجرای کد پرداخت.

منبع: فرادرس

آشنایی با Angular CLI – به زبان ساده

رابط خط فرمان انگولار (CLI) کمک می‌کند که سازماندهی کد بیشتری داشته باشیم و اپلیکیشن‌ها را به روشی سریع‌تر بسازیم. اگر به تازگی با انگولار آشنا شده‌اید، یا اگر مدتی است که مشغول کد زدن در انگولار هستید، اما اولین بار است که می‌خواهید از Angular CLI در یک پروژه استفاده کنید، زمان آن فرا رسیده است که شروع به استفاده از برخی قابلیت‌های آن بکنید که به تسهیل فرایند توسعه کمک می‌کند.

چرا باید از Angular CLI استفاده کرد؟

روش‌های مختلفی برای معماری اپلیکیشن‌های انگولار وجود دارد، اما برای اغلب توسعه‌دهندگان آغاز کار از صفر، دشوار است و در اغلب موارد می‌تواند موجب پدید آمدن ساختار پروژه‌ای شود که پشتیبانی از آن به کابوسی تبدیل می‌شود. راهنماهای سبک کدنویسی و قراردادهای رایج در مورد نوشتن کد، موجب می‌شوند که خوانایی و نگهداری از کد آسان باشد. تولید کد مبنا و ساختار پروژه با Angular CLI روشی عالی برای آغاز یک اپلیکیشن محسوب می‌شود.

نصب Angular CLI

برای نصب Angular CLI باید Node 8.x یا بالاتر و NPM 5.x یا بالاتر را داشته باشید. نسخه‌های این نرم‌افزارها را می‌توانید با دستورهای node –v و npm –v بررسی کنید.

برای نصب جدیدترین نسخه از Angular CLI به صورت سراسری دستور زیر را اجرا کنید:

npm install -g

اگر می‌خواهید آن را به صورت محلی نصب کنید، می‌توانید فلگ g- را حذف کرده و در یک دایرکتوری خاص نصب کنید:

npm install

اگر قبلاً Angular CLI را نصب کرده باشید، می‌توانید نسخه آن را با دستور ng –v بررسی کنید.

با انتشار انگولار 6، نسخه CLI نیز از 1.7 به 6.0.0 تغییر یافت تا با انتشار انگولار تطبیق یابد. نسخه 7.0.0 نیز با انتشار انگولار 7 همراه شد. برای دریافت جدیدترین نسخه به این آدرس (+) مراجعه کنید.

برای ملاحظه جزییات بیشتر در مورد راه‌اندازی کامپیوتر جهت توسعه انگولار به این مقاله (+) مراجعه کنید.

دستور ng new

از این دستور برای ایجاد یک اپلیکیشن جدید در Angular CLI استفاده می‌شود. برای آغاز یک اپلیکیشن دموی جدید باید از دستور ng new demo-app استفاده کنیم. در ادامه کارهایی که این دستور اجرا می‌کند را توضیح می‌دهیم.

ng در واقع خود CLI است.

New عملی است که می‌خواهیم CLI برای ما اجرا کند.

demo-app نام اپلیکیشنی است که می‌خواهیم بسازیم.

با اجرای این دستور، CLI یک اپلیکیشن جدید به نام demo-app می‌سازد و همه فایل‌ها و دایرکتوری‌های فرعی را در یک دایرکتوری به نام demo-app قرار می‌دهد. ما قصد داریم از این دستور استفاده کنیم، اما قبل از آن باید به بررسی فلگ‌های Angular CLI بپردازیم.

فلگ‌های Angular CLI

فلگ‌ها گزینه‌هایی هستند که در دستورهای CLI مورد استفاده قرار می‌گیرند. برای نمونه به دستور زیر توجه کنید:

--dry-run

dry-run– فلگی است که نشان می‌دهد دستور باید اَعمال خود را بدون ایجاد هیچ دایرکتوری یا فایل واقعی اجرا کند. ترمینال را باز کنید و دستور زیر را وارد کنید:

ng new demo-app --dry-run

Angular CLI همه فایل‌ها و دایرکتوری‌هایی که از روی دستور تولید شده‌اند را نمایش می‌دهد و در انتها یک هشدار نمایش می‌دهد که پیام زیر را اعلام می‌کند:

NOTE: Run with “dry run” no changes were made.

یعنی توجه: اجرای دستور با فلگ dry run موجب شده هیچ تغییری ایجاد نشود.

در هر دستور CLI می‌توان از چند فلگ استفاده کرد، بنابراین در ادامه آن‌ها را بررسی می‌کنیم. به صورت پیش‌فرض دایرکتوری ایجاد شده از سوی دستور ng new همان نام اپلیکیشن را دارد. اما می‌توان از فلگ دایرکتوری برای تعیین نام متفاوت برای دایرکتوری استفاده کرد. دستور زیر را امتحان کنید:

ng new demo-app --directory=./my-awesome-app --dry-run

این بار فلگ dry run نشان می‌دهد که همه فایل‌ها در دایرکتوری با نام تعیین شده در فلگ directory– قرار می‌گیرند.

اپلیکیشن دموی ما قرار است بیش از یک صفحه داشته باشد. بنابراین باید از «مسیریابی» (Routnig) استفاده کنیم. دستور ng new به صورت پیش‌فرض مسیریابی را به پروژه اضافه نمی‌کند بنابراین باید دوباره dry run را اجرا کنیم اما این بار فلگ routing– را نیز اضافه می‌کنیم.

ng new demo-app --directory=./my-awesome-app --routing --dry-run

اکنون می‌بینید که فایل app-rouitng.module.ts به لیست فایل‌هایی که باید ایجاد شوند اضافه می‌شود. برای دیدن لیستی از همه فلگ‌های موجود برای دستور ng new می‌توانید از فلگ help- استفاده کنید:

ng new –help

دقت کنید که اغلب فلگ‌ها یک حرف میانبر دارند که می‌توان استفاده کرد. برای نمونه به جای dry-run– می‌توان صرفاً از d– استفاده کرد. نام‌های طولانی همگی با دو خط تیره آغاز می‌شوند و نام‌های کوتاه دارای یک خط تیره هستند.

ساخت اپلیکیشن جدید

اکنون دیگر کار با dry run کافی است، در این مرحله یک اپلیکیشن جدید را واقعاً می‌سازیم. در ترمینال به آن دایرکتوری بروید که می‌خواهید پوشه اپلیکیشن دمو را در آن قرار دهید.

ما در مورد اپلیکیشن دموی خود به مسیریابی نیاز داریم و از این رو از فلگ routing- استفاده می‌کنیم. همچنین از فلگ skip-install– در این دستور استفاده می‌کنیم تا با شیوه کار آن آشنا شویم. بدین ترتیب از نصب پکیج‌های وابستگی برای اپلیکیشن جلوگیری می‌کند.

در صورتی که بخواهید چیزی را سریعاً تست کنید و شروع به ایجاد یک پروژه آفلاین روی اتصال‌های با سرعت اینترنت کم بکنید، فلگ skip-install– گزینه‌ای عالی محسوب می‌شود. در ترمینال دستور زیر را وارد کنید:

ng new demo-app — routing — skip-install

اکنون اپلیکیشن جدیداً ایجاد شده را در ویرایشگر کد خود باز کنید. ویرایشگرهای کد بسیار زیادی وجود دارند. ما در این راهنما از ویژوال استودیو کد استفاده می‌کنیم. با دستور زیر به یک دایرکتوری جدید بروید.

cd demo-app

وی‌اس کد را با دستور زیر باز کنید:

code.

اکنون در Vs Code فایل package.json را باز کنید و به بررسی همه خطوط پیچیده وابستگی‌ها بکنید. اگر ماوس خود را روی یکی از خطوط نگه دارید، پیامی را می‌بینید که وابستگی npm نصب نشده است. این وضعیت نتیجه فلگ kip-install– است که در دستور CLI ما مورد استفاده قرار گرفته است.

ابتدا روی یکی از وابستگی‌های زیرخط‌دار و سپس روی آیکون حباب لامپ کلیک کنید تا اکشن‌های کد پیشنهادی از سوی VS Code را ببینید.

در ادامه پا را فراتر گذارده و گزینه دوم را انتخاب می‌کنیم:

run: npm install

بدین ترتیب وابستگی‌های مفقود نصب می‌شوند. این کار ممکن است چند دقیقه طول بکشد. این همان چند دقیقه زمانی است که با استفاده از فلگ skip-install– صرفه‌جویی کرده بودید.

دستور ng serve

برای مشاهده اپلیکیشن دمو در مرورگر باید به CLI بازگردیم. برای آغاز یک سرور محلی در حافظه و مشاهده اپلیکیشن می‌توانیم از دستور CLI به نام ng serve استفاده کنیم.

زمانی که این دستور کامل شود می‌توانید اپلیکیشن را در مرورگر و در پورت 4200 مشاهده کنید. اما با افزودن فلگ o- به دستور موجب می‌شویم که CLI اپلیکیشن را در زمان آماده شدن در مرورگر بارگذاری کند.

ng serve –o

بدین ترتیب صفحه پیش‌فرض را در مرورگر ملاحظه خواهید کرد:

دستور ng add

یکی از دستورهایی که در نسخه 6 Angular CLI به آن اضافه شده، دستور ng add است. این دستور قابلیت‌های زیادی به اپلیکیشن اضافه می‌کند و موجب صرفه‌جویی زیادی در زمان می‌شود. از این دستور برای افزودن Angular Material استفاده می‌کنیم تا استایل‌های مختلفی به اپلیکیشن دموی خود اضافه کنیم.

در نسخه‌های قبلی CLI برای نصب Angular Material باید دستور زیر را اجرا می‌کردیم:

npm install — save @angular/material
npm install — save @angular/animations

و سپس ایمپورت‌های آن را به فایل src/app/app.module.ts/ اضافه می‌کردیم، اما دیگر چنین کاری لازم نیست. در ادامه Angular Material را با دستور ng add نصب می‌کنیم. پنجره ترمینال را باز کرده و یا از ترمینال VS Code برای اجرای دستور زیر استفاده کنید:

ng add @angular/material

به همین سادگی CLI همه کارهای فوق را اجرا می‌کند و اینک انگولار متریال نصب و در اپلیکیشن نیز پیکربندی شده است. در ادامه اپلیکیشن دمو را در مرورگر بررسی می‌کنیم تا تغییرات در فونت و فاصله‌بندی را که انگولار متریال به صفحه اضافه کرده است ببینیم:

دستور ng generate

اکنون که انگولار متریال را نصب کردیم، به بررسی یک دستور CLI می‌پردازیم که آن را در زمان توسعه کدهای انگولار بسیار مفید خواهید یافت.

دستور ng generate شماتیکی برای بسیاری از قابلیت‌هایی که به اپلیکیشن اضافه می‌شوند می‌سازد. در اغلب موارد از آن برای ایجاد کلاس، کامپوننت، ماژول و سرویس استفاده می‌شود.

از این دستور برای افزودن چند کامپوننت به اپلیکیشن دموی خود استفاده می‌کنیم. ما یک کامپوننت به نام first-page می‌سازیم و از ng generate می‌خواهیم که آن را در یک دایرکتوری فرعی به نام containers ایجاد کند. در ترمینال دستور زیر را اجرا می‌کنیم:

ng generate component containers/first-page

در VS Code دایرکتوری فرعی containers را زیر شاخه src/app می‌بینید، دایرکتوری فرعی irst-page به همراه فایل‌های کامپوننت‌های مبنا از سوی ng generate ایجاد شده است.

در ادامه دو کامپوننت دیگر نیز به اپلیکیشن خود اضافه می‌کنیم، اما این بار با وارد کردن g به جای generate و c به جای component از میانبرها بهره می‌گیریم. دستورهای زیر را در ترمینال وارد کنید:

ng g c containers/second-page
ng g c containers/third-page

اینک ما سه کامپوننت مبنا داریم که آماده استفاده در اپلیکیشن هستند:

افزودن منو

اکنون که چند کامپوننت به دست آوردیم، باید روشی برای وارد کردن آن‌ها در اپلیکیشن بیابیم. از ng generate برای افزودن منوی ناوبری استفاده می‌کنیم. از آنجا که قبلاً انگولار متریال را به پروژه اضافه کرده‌ایم، از دستور ng generate برای افزودن منو با استفاده از انگولار متریال استفاده می‌کنیم. در ترمینال دستور زیر را وارد کنید:

ng g @angular/material

اکنون می‌توانید در VS Code دایرکتوری فرعی myNav و فایل‌هایی که CLI برای منوی ناوبری ایجاد کرده است را ببینید:

برای افزودن منوی Nav به اپلیکیشن، فایل app.component.html را باز کنید و همه کدهای مبنا را در فایل حذف کرده و با کد زیر جایگزین کنید:

1	<app-my-nav></app-my-nav>

فایل را ذخیره کنید. اکنون به مرورگر بروید و منوی ناوبری جدید را بررسی کنید:

توجه داشته باشید که این منو واکنش‌گرا است و زمانی که در اندازه‌های موبایل باز می‌شود، منوی همبرگری سه خط را نمایش می‌دهد.

ساختن لینک‌ها

این وضعیت مناسبی است، اما اگر لینک‌های منو را امتحان کنید، متوجه می‌شوید که هیچ کاری انجام نمی‌دهند. در ادامه آن را طوری تنظیم می‌کنیم که بین سه کامپوننتی که قبلاً ایجاد کردیم حرکت کند.

هنگامی که دستور CLI را برای ایجاد یک اپلیکیشن جدید اجرا می‌کنیم، همانند حالتی که در مورد ایجاد فایل app.routing.module.ts عمل کردیم، از فلگ routing- استفاده می‌کنیم. آن را در VS Code باز کرده و کد زیر را درون براکت های const routes اضافه کنید:

1	{ path: ‘first-page’، component: FirstPageComponent }

به خط موج‌دار قرمز رنگ زیر FirstPageComponent توجه کنید:

روی آن کلیک کنید تا یک حباب ظاهر شود که اکشن کدی را که VS Code پیشنهاد می‌کند نمایش دهد. سپس روی عمل پیشنهادی کلیک کنید تا VS Code ایمپورت را اضافه کند:

ما باید دو مسیر دیگر به کامپوننت‌های second-page و third-page اضافه کنیم. بنابراین از یک میانبر صفحه‌کلید در VS Code استفاده می‌کنیم که خطوط کد را کپی می‌کند. کرسر خود را روی مسیر first-page قرار دهید و یا بسته به سیستم عامل خود با توجه به فهرست زیر کلیدهای ترکیبی مربوطه را بزنید:

• Windows: SHIFT + ALT + DOWN
• Mac: SHIFT + OPTION + DOWN
• Linux: SHIFT + CTRL + ALT + DOWN

این کار را دو بار انجام دهید و سپس خطوط جدید را برای کامپوننت‌های second-page و third-page ویرایش کنید. فراموش نکنید که کاماهایی به انتهای دو خط اول اضافه کنید، چون میانبر ایجاد کد تکراری این کار را برای شما انجام نمی‌دهد.

1 2 3

{ path: 'first-page', component: FirstPageComponent }, { path: 'second-page', component: SecondPageComponent }, { path: 'third-page', component: ThirdPageComponent }

می‌توانید از حباب‌ها برای افزودن کامپوننت به دو مسیر دیگر و ذخیره فایل استفاده کنید.

افزودن مسیریابی

اینک می‌توانیم مسیریابی را به منوی ناوبری خود اضافه کنیم. فایل my-nav.component.html را در دایرکتوری فرعی my-nav باز کنید.

در قطعه کد مربوطه سه آیتم ناوبری زیر را ویرایش کنید. بخش HREF را حذف و لینک روتری را مانند زیر اضافه کنید:

1	<a mat-list-item [routerLink]="['/first-page']" routerLinkActive="router-link-active">First Page</a>

اینک می‌توانید دو خط بعدی را حذف کرده و از ترفند تکرار کردن کد استفاده کنید و کد را برای second-page و third-page به صورت زیر ویرایش کنید:

پیش از آن که فایل را ذخیره کنیم، باید خروجی روتر خود را به آن اضافه کنیم. در بخشی که عبارت Add Content وجود دارد کد زیر را اضافه کنید:

<router-outlet></router-outlet>

در ادامه فایل را ذخیره کرده و اپلیکیشن را در مرورگر بررسی کنید. اکنون می‌توانید بین سه کامپوننت با استفاده از لینک‌های ناوبری حرکت کنید.

سخن پایانی

ما در این مقاله برای شروع استفاده از Angular CLI از دستورهای زیر استفاده کردیم:

• از ng new برای ایجاد چند دستور dry run و بررسی گزینه‌ها با استفاده از Flag بهره گرفتیم.
• از ng new در Angular CLI برای ایجاد اپلیکیشن دموی جدی استفاده کردیم.
• از ng serve برای مشاهده اپلیکیشن مبنا در مرورگر استفاده کردیم.
• انگولار متریال را با استفاده از ng add به پروژه اضافه کردیم.
• سه کامپوننت با استفاده از ng generate اضافه کردیم.
• با بهره‌گیری از ng generate منوی ناوبری ساختیم.
• در نهایت فایل‌های app.component.html و app.routing.module.ts را ویرایش کردیم تا از منوی ناوبری ایجاد شده در CLI بهره بگیرند.

سادگی و راحتی استفاده از Angular CLI موجب شد که همگی این وظایف سریع‌تر و راحت‌تر با استفاده از قطعه کدهای کوتاه یا کپی و چسباندن کد در پروژه درج شوند. شما می‌توانید با بهره‌گیری از مزیت این ابزارها شروع به استفاده از Angular CLI در ساخت اپلیکیشن خود بکنید.

منبع: فرادرس

الگوریتم های مهم پایتون که باید آنها را بدانید — راهنمای کاربردی

برخی الگوریتم‌های خاص هستند که استفاده زیادی در زمان برنامه‌نویسی دارند. در این راهنما به بررسی چند الگوریتم مهم پایتون که جزء رایج‌ترین انواع این الگوریتم‌ها هستند به همراه مثال می‌پردازیم. این الگوریتم‌ها شامل جستجو، مرتب‌سازی و افزودن/حذف کردن آیتم به لیست پیوندی هستند. ایده‌های پیرامون این مثال‌ها در مورد الگوریتم‌های زیاد دیگری نیز صدق می‌کند. درک این سه مثال و الگوریتم به شما کمک می‌کنند تا اطلاعات خوبی در مورد روش برخورد با مسائل مرتبط با الگوریتم‌های دیگر نیز کسب کنید و در این زمینه اعتماد به نفس داشته باشید.

جستجوی دودویی

«جستجوی دودویی» (Binary Search) یک الگوریتم ضروری جستجو است که روی آرایه‌های مرتب اجرا می‌شود و اندیس یک مقدار را که به دنبالش هستیم بازگشت می‌دهد. این کار به صورت زیر اجرا می‌شود:

1. نقطه میانی آرایه مرتب را پیدا کنید.
2. نقطه میانی را با مقدار مورد نظر مقایسه کنید.
3. اگر نقطه میانی بزرگ‌تر از مقدار مورد نظر باشد، جستجوی باینری در نیمه راست آرایه تکرار می‌شود.
4. اگر نقطه میانی کوچک‌تر از مقدار مورد جستجو باشد، جستجوی باینری روی نیمه چپ آرایه تکرار می‌شود.
5. این مراحل را تا زمانی که نقطه میانی برابر با مقدار مورد نظر باشد یا این که بدانیم مقدار مورد جستجو در آرایه وجود ندارد تکرار می‌کنیم.

از روی مراحل فوق مشخص است که راه‌حل ما می‌تواند به صورت «بازگشتی» (recursive) باشد. ما در هر تکرار یک آرایه کوچک‌تر را به متد خود ارسال می‌کنیم تا این که تنها یک مقدار که مورد نظر ما است باقی بماند. بخش‌های دشوار این راه‌حل اندیس‌گذاری صحیح آرایه و ردگیری افست اندیس در هر تکرار است به طوری که بتوان اندیس مقدار مورد جستجو را در آرایه اصلی پیدا کرد. در کد زیر نسخه‌ای از الگوریتم جستجوی دودویی را مشاهده می‌کنید:

1 2 3 4 5 6 7 8 9 10

def binary_search(arr, value, offset=0)   mid =  (arr.length) / 2      if value < arr[mid] binary_search(arr[0...mid], value, offset) elsif value > arr[mid]      binary_search(arr[(mid + 1)..-1], value, offset + mid + 1)      else      return offset + mid   end end

جستجوی دودویی پیچیدگی زمانی برابر با (O(logn دارد. می‌دانیم که در این حالت وقتی اندازه آرایه ورودی را دو برابر کنیم، باید یک تکرار بیشتر برای یافتن مقدار مطلوب در الگوریتم خود اضافه کنیم. به همین دلیل است که جستجوی باینری چنین الگوریتم کارآمدی در علوم رایانه محسوب می‌شود.

مرتب‌سازی ادغامی

«مرتب‌سازی ادغامی» (Merge Sort) از روش‌شناسی مشابه «تقسیم و حل» (divide and conquer) برای مرتب‌سازی کارآمد آرایه‌ها بهره می‌گیرد. مراحل زیر در مورد شیوه پیاده‌سازی مرتب‌سازی ادغامی است.

1. اگر آرایه تنها یک عنصر داشته باشد، بازگرد زیرا چنین آرایه‌ای مرتب محسوب می‌شود.
2. آرایه را به طور متوالی دو نیمه تقسیم کن، تا این که دیگر نتوان بیش از آن تقسیم کرد.
3. آرایه‌های کوچک‌تر را به صورت مرتب با هم ادغام کن تا این که به آرایه اصلی مرتب‌سازی شده برسی.

برای پیاده‌سازی مرتب‌سازی ادغامی، دو متد را تعریف خواهیم کرد. یکی از متدها اختصاص به افراز کردن آرایه دارد و دیگری وظیفه ادغام کردن مجدد دو آرایه مرتب را به صورت یک آرایه مرتب‌سازی شده بر عهده دارد. متد تقسیم کردن (merge_sort) به صورت بازگشتی فراخوانی می‌شود تا این که آرایه تنها یک عنصر طول داشته باشد. سپس این آرایه‌های فرعی با هم ترکیب می‌شوند تا نهایتاً یک آرایه مرتب بازگشت یابد. به مثال زیر توجه کنید:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

def merge_sort(array)   return array if array.length == 1   mid_point = array.length / 2   left = array[0...mid_point]   right = array[mid_point..-1]   merge(merge_sort(left), merge_sort(right)) end def merge(left, right)     merged_arr = []     until left.empty? && right.empty?       if left.length == 0         merged_arr << right.shift       elsif right.length == 0         merged_arr << left.shift       elsif left[0] <= right[0]         merged_arr << left.shift       elsif right[0] <= left[0]         merged_arr << right.shift       end     end     merged_arr end

مرتب‌سازی ادغامی دارای پیچیدگی زمانی (O(nlog n است که بهترین پیچیدگی زمانی برای یک الگوریتم مرتب‌سازی محسوب می‌شود. ما می‌توانیم با بهره‌گیری از تقسیم و حل کردن، کارآیی مرتب‌سازی را که اصولاً یک پردازش پرهزینه از نظر محاسباتی است به میزان زیادی افزایش دهیم.

افزودن و حذف کردن آیتم از لیست پیوندی

لیست پیوندی یکی از ساختمان‌های داده بنیادی در علوم کامپیوتر محسوب می‌شود که دلیل آن به خاطر زمان ثابت درج و حذف است. با استفاده از گره‌ها و اشاره‌گرها می‌توانیم برخی پردازش‌ها را به روشی کارآمدتر از زمانی که از آرایه استفاده می‌کردیم اجرا کنیم. به نمودار شماتیک زیر توجه کنید:

یک لیست پیوندی از گره‌هایی تشکیل یافته است که هر یک بخشی از داده‌ها و یک اشاره‌گر به گره بعدی دارند. این وضعیت در Ruby با یک struct به نام Node نمایش پیدا می‌کند که دو آرگومان به نام‌های data: و:next_node دارد. اینک کافی است دو متد به نام‌های insert_node و delete_node تعریف کنیم که یک گره head و یک location برای مکانی که حذف/درج رخ می‌دهد می‌پذیرد.

متد insert_node یک آرگومان دیگر به نام node نیز دارد که همان struct گرهی است که می‌خواهیم درج کنیم. سپس حلقه‌ای تعریف می‌کنیم تا موقعیتی را که می‌خواهیم آیتمی را در آن درج یا حذف کنیم بیابیم. زمانی که به مکان مطلوب برسیم، اشاره‌گرها را طوری مجدداً چیدمان می‌کنیم تا عملیات درج/حذف ما را بازتاب دهند.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

Node = Struct.new(:data, :next_node) def insert_node(head, node, location)   current_node = head   current_location = 0   until current_location == location     previous_node = current_node     current_node = current_node.next_node     current_location += 1   end   if previous_node     previous_node.next_node = node     node.next_node = current_node   else     node.next_node = current_node   end   head end def delete_node(head, location)   current_node = head   current_location = 0   until current_location == location     previous_node = current_node     current_node = current_node.next_node     current_location += 1   end   if previous_node     previous_node.next_node = current_node.next_node   else     head = current_node.next_node   end   head end

در یک لیست پیوندی می‌توان آیتم‌ها را از میانه یک مجموعه بدون نیاز به تغییر دادن بقیه ساختمان داده در حافظه حذف کرد و این وضعیت کارایی بیشتری نسبت به ساختمان داده آرایه ‌ایجاد می‌کند. بدین ترتیب می‌بینیم که با انتخاب بهترین ساختمان داده بر اساس نیازها می‌توان به کارایی مناسبی دست یافت.

سخن پایانی

سه نسخه الگوریتمی که در این مقاله معرفی کردیم، تنها جزء کوچکی از الگوریتم‌های بنیادی هستند که باید برای خلق برنامه‌های کارآمد و موفقیت در مصاحبه‌های فنی بدانید. لیستی از الگوریتم‌های دیگر که در این زمینه توصیه می‌شود مطالعه کنید به شرح زیر هستند:

• الگوریتم Quicksort
• پیمایش یک درخت جستجوی دودویی
• درخت کمینه پوشا
• الگوریتم Heapsort
• معکوس سازی یک رشته به صورت درجا

البته مفاهیم دیگری نیز وجود دارند که باید بیاموزید، بنابراین توصیه می‌کنیم به تمرین کردن و درک مثال‌های بیشتری از الگوریتم‌ها ادامه بدهید.

منبع: فرادرس

همه چیز درباره Git LFS — به زبان ساده

اغلب ما نخستین باری که با LFS در Git مواجه شدیم، در زمان کار روی پروژه‌های علوم داده بوده است. شاید با خود بپرسید Git خود به اندازه کافی دشوار است، آیا باید یکی دیگر از قابلیت‌های آن را نیز یاد بگیریم؟ شاید هم کنجکاو هستید که Git LFS چیست و چرا باید آن را بیاموزید. در این صورت توصیه می‌کنیم، در ادامه این مقاله با ما همراه باشید تا به پاسخ سؤال‌هایتان برسید.

ابتدا مقدمه کوتاهی در مورد اهمیت LFS و کاربرد آن بیان می‌کنیم. تصور کنید مشغول کار روی یک پروژه تحلیل داده‌های فیلم برای نمونه از وب‌سایت OMDB ،Rotten Tomatoes و IMDB هستید. اما زمانی که کارها را روی گیت‌هاب می‌برید در زمان آپلود کردن مجموعه داده IMDB با خطایی مانند زیر مواجه می‌شوید:

در این زمان است که متوجه می‌شوید گیت و گیت‌هاب محدودیت اندازه فایل 100 مگابایت دارند. فایل‌هایی با اندازه‌های بزرگ‌تر از 50 مگابایت پیام هشدار دریافت می‌کنند، اما می‌توان آن‌ها را push کرد.

نخستین راهکاری که در این حالت به صورت طبیعی به ذهن می‌رسد این است که کار را با ارسال تک به تک فایل‌ها ادامه دهد. اما اگر این راهکار به هر دلیلی ممکن نباشد، باید گزینه بعدی یعنی ذخیره‌سازی به روش Large File Storage را در گیت بررسی کنیم. برای این که Git LFS را درک کنیم باید ابتدا گیت را بشناسیم. بنابراین قبل از بررسی LFS اندکی در مورد گیت توضیح می‌دهیم.

گیت چیست؟

گیت یک سیستم کنترل نسخه توزیع یافته است، یعنی کل سابقه ریپازیتوری در طی فرایند کلون کردن به کلاینت انتقال می‌یابد.

اگر بخواهیم این موضوع را کمی بیشتر باز کنیم، باید ابتدا سیستم کنترل نسخه را توضیح دهیم. «سیستم کنترل نسخه» (Version Control System) ابزاری است که به مدیریت تغییرها در کد منبع، فایل‌ها و دیگر اَشکال اطلاعات می‌پردازد. بدین ترتیب تغییرها به صورت commit ردگیری می‌شوند. Commit در واقع تصاویری از ویرایش‌ها در نقاط زمانی مشخص هستند. در سوی دیگر یک سیستم کنترل نسخه توزیع یافته نوعی از سیستم کنترل نسخه است که امکان انتقال همه کدبیس شامل همه سوابق (و همه تغییرها) به رایانه هر توسعه‌دهنده را فراهم می‌سازد. بدین ترتیب هر توسعه‌دهنده می‌تواند روی پروژه‌ای کار کند و همزمان کل تایملاین ویرایش‌های انجام یافته روی پروژه را ببیند.

تاریخچه گیت

گیت نخستین بار در سال 2005 از سوی «لینوس تروالدز» (Linus Torvalds) و در نتیجه توقف استفاده از سیستم کنترل نسخه Bitkeeper خلق شد. دلیل توقف لینوس و همکارانش نیز این بود که Bitkeeper دیگر رایگان نبود و پولی شده بود. بر اساس گزارش‌ها لینوس پس از تلاش برای یافتن یک سیستم کنترل نسخه رایگان جایگزین برای Bitkeeper تصمیم گرفت تا سیستم کنترل نسخه خود را بسازد که کوچک و سریع (کمتر از سه ثانیه زمان بگیرد) باشد و از انشعاب پشتیبانی کند. همچنین این سیستم باید کاملاً مخالف سیستم‌های کنترل نسخه همزمان و شامل safeguards برای صحت داده‌ها می‌بود.

از آنجا که گیت ساخته شده است تا کوچک و سریع باشد، در ابتدا صرفاً برای پشتیبانی از سورس کد ساخته شد و از فایل‌های بزرگ پشتیبانی نمی‌کرد. توجه کنید که گیت یک سیستم کنترل نسخه است یعنی هر بار که پروژه‌ای کلون یا pull می‌شود همه سابقه کامل تغییرهای یک پروژه انتقال می‌یابد. زمانی که یک کامیت اضافه می‌شود، به سوابق افزوده می‌شود و موجب افزایش اندازه فایل کلی پروژه می‌شود و در طی زمان این مقدار بسیار افزایش می‌یابد.

با این وجود، رشته‌های زیادی وجود دارند که در آن پروژه‌هایی با فایل‌های بزرگ ایجاد می‌شوند و این حالت شامل حوزه فایل‌های موسیقی، تصویر و مجموعه‌های داده‌های علمی نیز می‌شود. بنابراین اینک سؤال این است که در چنین موقعیت‌هایی چه باید کرد؟ این همان نقطه‌ای است که Git LFS به کارمی آید.

«ذخیره‌سازی فایل بزرگ» Git یا LFS به چه معنا است؟

Git LFS یک اکستنشن گیت است که در Go برنامه‌نویسی شده و از سوی توسعه‌دهندگانی در Atlassian و Github و همچنین مشارکت‌کنندگان اوپن‌سورس جهت دور زدن محدودیت اندازه فایل در گیت ساخته شده است. این کار از طریق ذخیره‌سازی فایل‌های بزرگ در یک مکان مجزا از ریپازیتوری و قرار دادن اشاره‌گرهای فایل در ریپازیتوری که مستقیماً به محل فایل اشاره می‌کنند صورت می‌پذیرد.

بهترین روش برای درک طرز کار LFS این است که ابتدا برای لحظه‌ای همه چیز را در مورد Github ،Bitbucket ،Gitlab و همه ریپازیتوری‌های ریموت فراموش کنیم. در این مرحله صرفاً روی رایانه محلی تمرکز می‌کنیم که در تصویر زیر با شکل یک نمایشگر با سه بخش Working Copy ،Local Repository و LFS Cache نمایش یافته است.

ریپازیتوری محلی

«ریپازیتوری محلی» (local repository) آن دایرکتوری یا پوشه‌ای است که روی رایانه خود می‌بینید و با استفاده از دستور git init به عنوان ریپازیتوری گیت مقداردهی شده و یا از ریپازیتوری ریموت کلون شده است. «کپیِ کاری» (Working Copy) یک بازنمایی از فایل‌ها و پوشه‌هایی است که در ریپازیتوری محلی ویرایش می‌شوند. LFS Cache مکان ذخیره‌سازی مجزایی است که در ریپازیتوری محلی ویرایش می‌شود. LFS Cache فضای ذخیره‌سازی مجزایی برای فایل‌های بزرگ است که از طریق گیت push می‌شوند. این اصطلاح‌ها را به ذهن خود بسپارید، چون در زمان توضیح طرز کار Git LFS در بخش بعدی به کار خواهند آمد.

کار با Git LFS

نکته مهم در مورد Git LFS این است که می‌توان در آن همچنان از دستورهای عادی و گردش کار معمولی گیت که کاملاً شناخته شده هستند استفاده کرد. تنها تغییر در این مورد برخی دستورهای اضافی و مکان ذخیره‌سازی مجزایی هستند که باید در خاطر داشت.

اکنون که اطلاعاتی در مورد گیت و Git LFS داریم، در ادامه به بررسی روش استفاده از آن می‌پردازیم. دو سناریو در این خصوص وجود دارد، اما ابتدا باید Git LFS را از طریق Homebrew با دستور زیر دانلود کنیم:

brew install git-lfs

در مورد سیستم‌های غیر مَک نیز امکان دانلود از طریق وب‌سایت (+) وجود دارد.

سناریوی اول

در این سناریو از Git LFS پس از دریافت پیام خطایی در زمان استفاده از دستورهای معمولی گیت استفاده می‌کنیم.

در این مثال یک ریپازیتوری جدید داریم که یک فایل داده بزرگ (1.9 گیگابایت) در آن قرار داده‌ایم. ما می‌خواهیم مطمئن شویم که هر تغییری در مورد فایل‌های داده ردگیری می‌شود و در نهایت به صورت ریموت پشتیبان‌گیری خواهد شد. ابتدا از دستورهای معمولی گیت برای stage کردن فایل (git add) استفاده می‌کنیم، یک کپی از تغییرها را در ریپازیتوری محلی (git commit) ذخیره می‌کنیم و کپی را به ریپازیتوری ریموت ارسال می‌کنیم (git push). خروجی این دستورها به صورت زیر است:

پیام خطایی که پس از استفاده از دستورهای معمول گیت دریافت می‌کنیم؛ دقت کنید که دلیل خطا بزرگ بودن فایل بوده است.

این خطا را چگونه می‌توان حل کرد؟ یک راه‌حل این است که تغییرها را با استفاده از git reset بازگردانی کنیم و یا از ذخیره فایل صرف‌نظر کنیم و آن را به صورت zip و با اندازه کوچک‌تر دربیاوریم و یا این که مسیر خود را با Git LFS ادامه دهیم. گزینه دیگر این است که از همان جایی که کار متوقف شده اقدام به یکپارچه‌سازی Git LFS بکنیم و بدین ترتیب امکان ادامه فرایند وجود خواهد داشت. ما در این بخش این مسیر را دنبال می‌کنیم.

گام 1

نخستین گام در این مسیر آن است که Git LFS را نصب کرده و از طریق اجرای دستور زیر، ریپازیتوری خاصی را برای آن فعال‌سازی کنیم:

git lfs install

با این که قبلاً Git LFS را روی سیستم خود نصب کرده‌ایم، اما باید به آن اعلام کنیم که کدام ریپازیتوری ها به خدماتش نیاز دارند. برای قیاس یک شرکت ارائه‌دهنده سرویس ذخیره‌سازی را در نظر بگیرید. چنین شرکت‌هایی در دسترس ما هستند تا آیتم‌هایی را در آن‌ها ذخیره کنیم، اما به صورت خودکار به سراغ ما نمی‌آیند تا فایل‌هایمان را ذخیره‌سازی کنند. بلکه ما باید ابتدا با عقد قرارداد یک رابطه با این شرکت برقرار کنیم. همین حالت در اینجا نیز صدق می‌کند. برای فعال‌سازی سرویس‌های Git LFS در یک ریپازیتوری خاص یا اعلام این که سرویس‌های Git LFS برای کدام ریپازیتوری باید فعال شود از دستور زیر استفاده می‌کنیم:

git lfs install

گام 2

با دستور زیر به Git LFS اعلام کنید که کدام فایل‌ها باید ردگیری شوند:

git lfs track “*.file_extension”

در این مورد نیز باید به Git LFS اعلام کنیم که کدام فایل‌ها و یا کدام انواع فایل‌ها را می‌خواهیم ردگیری کند، بدین ترتیب فایل‌ها می‌توانند در مکان دیگری به جز ساختار گیت خیره شوند تا از دریافت پیام خطای قبلی جلوگیری شود. به این منظور دستور فوق را اجرا کنید.

برای مثال اگر لازم است همه فایل‌های CSV ردگیری شوند دستور زیر را اجرا کنید:

git lfs track “*.csv”

یا اگر لازم است همه فایل‌های jpeg ردگیری شوند، دستور زیر را وارد کنید:

git lfs track “*.jpg”

کاراکتر ستاره (*) نشان‌دهنده همه فایل‌ها است. استفاده از گیومه نیز برای اجرای این کد ضروری است. بدون وجود گیومه با خطای زیر مواجه می‌شویم:

همان طور که وقتی از یک شرکت ذخیره‌سازی می‌خواهیم شروع به ذخیره‌سازی آیتم بکند، یک صورتحساب برای ما ارسال می‌کند، در این مورد نیز وقتی یک فایل را با Git LFS ردگیری کنیم، یک فایل gitattributes. ایجاد خواهد شد. اگر فایل gitattributes. از قبل موجود باشد، این فایل به صورت یک خط جدید در آن اضافه می‌شود.

گام 3

در این بخش با دستورهای Git add ،commit و push فایل gitattributes. را در ریپازیتوری خود قرار می‌دهیم.

Git LFS نیز همانند فایل gitattributes.، فایل‌های جدید را ردگیری می‌کند، و تغییرهای صورت گرفته به صورت خودکار در فایل gitattributes. به‌روزرسانی می‌شوند. برای این که مطمئن شویم تغییرها ردگیری می‌شوند، هر بار که فایل gitattributes. به‌روزرسانی می‌شود، باید stage و commit شود چون در غیر این صورت ممکن است در ادامه با خطایی مواجه شویم.

گام 4

اینک می‌خواهیم با رمز اصلی این سناریو که استفاده از git LFS برای انتقال کامیت‌ها از گیت به Git LFS است آشنا شویم.

آنچه موجب می‌شود بتوانیم در حالت کنونی و بدون نیاز به undo کردن کامیت‌ها و راه‌اندازی مجدد فرایند از Git LFS استفاده کنیم، یک خط کد جالب است که امکان انتقال یا «migrate» کامیت‌ها از گیت به Git LFS را فراهم می‌سازد. برای این که بتوانیم کامیت‌ها را انتقال دهیم باید دستور زیر را اجرا کنیم:

git lfs migrate import — include “*.file_extension”

برای دیدن انواع فایلی که در کامیت‌ها هستند و می‌توانند از سوی Git LFS ردگیری شوند، می‌توانیم دستور زیر را اجرا کنیم:

git lfs migrate info

با انتقال دادن کامیت‌ها، می‌توانیم به مرحله بعدی برویم و تغییرها را به گیت‌هاب push کنیم. در این خصوص در بخش بعدی بیشتر توضیح می‌دهیم:

نکته مهم: انتقال کامیت‌ها شامل بازنویسی سابقه هستند. می‌توان یک تگ اضافه کرد تا از بازنویسی تغییرهای لیست شده در سابقه جلوگیری کرد، اما این کار از اجرا شدن آن خط کد جلوگیری خواهد کرد.

گام 5

در نهایت دستور git push را اجرا می‌کنیم تا تغییرها را به گیت‌هاب پوش کنیم و کامیت بزرگ (یعنی فایل‌های بزرگ) نیز به Gif LFS کامیت شوند.

پس از انتقال کامیت‌ها به Git LFS در حال حاضر یک ریپازیتوری محلی گیت داریم که با یک تغییر به‌روزرسانی شده است. در این مورد یک فایل داده جدید اضافه شده است که به وسیله اشاره‌گر فایل به Git LFS اشاره دارد. همچنین یک کش Git LFS محلی وجود دارد که اینک به ذخیره سای فایل داده می‌پردازد. در مرحله بعدی تغییرها را به گیت‌هاب پوش می‌کنیم. ریپازیتوری گیت محلی که دارای فایل‌هایی در چارچوب محدودیت اندازه تعیین شده باشند (یعنی فایل‌های کد منبع و فایل اشاره‌گر) در گیت‌هاب ذخیره می‌شوند که میزبان گیت مشخص شده در تصویر زیر است و کش Git LFS در فضای ذخیره‌سازی Git LFS روی کلود ذخیره می‌شود.

سناریوی دوم: استفاده از Git LFS از ابتدا

اگر بدانیم که فایل‌های بزرگی در ریپازیتوری وجود دارند، می‌توانیم از Git LFS از همان ابتدا استفاده کنیم و مراحل 1 تا 3 بررسی شده فوق را طی کنیم. پس از طی این مراحل به دستورهای معمولی گیت به صورت git add ،git commit بازمی‌گردیم تا تغییرها را در ریپوی محلی stage و ذخیره کنیم. سپس گام 5 فوق را اجرا می‌کنیم تا تغییرها را به گیت‌هاب و دیگر میزبان‌های گیت و فضای ذخیره ریموت Git LFS پوش کنیم.

سخن پایانی

چنانکه مشاهده کردید روش Git LFS برای دور زدن مشکل ذخیره‌سازی فایل‌های بزرگ در سیستم کنترل نسخه گیت کاملاً سرراست است. کافی است پنج گام فوق را به خاطر بسپارید تا این فرایند را طی کنید. pull کردن تغییرها از یک ریپاریتوزی ریموت نیز کاملاً سر راست است. در این حالت همان دستورهای گیت که معمولاً استفاده می‌کنیم، یعنی git pull یا git fetch و git merge مورد نیاز هستند.

با استفاده از git pull می‌توان تغییرها را که شامل فایل داده ذخیره شده در Git LFS می‌شود، روی سیستم محلی بارگذاری کرد. زمانی که تغییرها را از ریپازیتوری ریموت pull می‌کنیم، تغییرهای ریپازیتوری ریموت و هر شیء دیگری که در Git LFS ذخیره شده باشد، نیز روی رایانه محلی pull می‌شوند.

شاید همه موارد فوق در مواجهه نخست کمی سردرگم‌کننده به نظر برسند، بنابراین در ادامه نکاتی را که می‌توان در این مقاله جمع‌بندی کرد، ارائه کرده‌ایم.

• افرادی که به نظرشان گیت پیچیده می‌آید، باید بدانند که این مطلب بر پیچیدگی موضوع می‌افزاید. این مهم‌ترین چالش این افراد در زمان یادگیری Git LFS خواهد بود. یادگیری دقیق دستورهای گیت، گردش کار گیت و شیوه تطبیق آن با Git LFS کلید یادگیری گام‌های طرح‌شده در این آموزش است.
• حتی در زمان استفاده از Git LFS نیز محدودیت اندازه فایل 2 گیگابایت وجود دارد که از سوی گیت‌هاب تعیین شده است. هر چیزی بزرگ‌تر از این، باید روی فضای ذخیره‌سازی ابری دیگری قرار گیرد.
• Git LFS یک پروژه فعال اپن‌سورس است که به صورت مداوم بهبود می‌یابد. در گیت‌هاب این پروژه لیستی از issue-های جاری وجود دارد (+) که در حال حل هستند.
• همچنین برخی issue-ها وجود دارند که در زمان تلاش برای ادغام تداخل‌ها بروز می‌یابند. بنابراین بهتر است پیش از push کردن تغییرها و ادغام آن‌ها یک مشورت درون تیمی وجود داشته باشد.
• توجه داشته باشید که فایل‌های بزرگ‌تر در زمان push شدن به ریپازیتوری ریموت ممکن است کمی ‌کند باشند.

منبع: فرادرس