ساخت ارائه با گوگل اسلایدز (Google Slides) — راهنمای گام به گام

بسیاری از افراد بر این باورند که گوگل اسلایدز (Google Slides) نسخه‌ای از پاورپوینت برای آنهایی است که نمی‌خواهند این نرم‌افزار را بخرند. البته این دیدگاه کمی خصمانه محسوب می‌شود، چون قابلیت‌های سرویس اسلایدز گوگل دست کمی از پاورپوینت ندارند. Google Slides برنامه‌ای عالی است که ایجاد همه چیز از ارائه‌های کاری تا تدوین یک کتاب آشپزی را ممکن می‌سازد. تنها لازمه این کار نیز داشتن یک حساب کاربری گوگل است.

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

گام 1: تنظیم اولیه سند

نخستین کاری که باید انجام دهیم، باز کردن اپلیکیشن گوگل اسلایدز (Google Slides) است. بدین منظور باید ابتدا یک حساب کاربری گوگل داشته باشید. اگر این حساب کاربری را ندارید، ساخت آن بسیار ساده و کافی است به این آدرس (+) مراجعه کنید. سپس باید به گوگل درایو رفته و به منوی New > Google Slides > From a template مراجعه کنید.

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

زمانی که روی From a template کلیک کنید، به گالری قالب‌ها می‌روید. گوگل این قالب‌ها را همانند ابزار Canva گروه‌بندی کرده است. یکی از رایج‌ترین کاربردهای یک اسلایدشو، طراحی یک ارائه‌ی کاری است، بنابراین در این راهنما از General Presentation یا همان قالب‌های مناسب ارائه‌های عمومی استفاده می‌کنیم.

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

گام 2: نوار ناوبری گوگل اسلایدز را بشناسید

گوگل اسلایدز (Google Slides) پیچیده است، اما یکی از مهم‌ترین چیزهایی که باید بشناسید نوار ناوبری است که در بخش فوقانی فضای کاری قرار دارد و باید با محتوای هر یک از این منوهای بازشدنی آشنا شوید.

در منوی File گزینه‌های ابتدایی کنترل ارائه‌های اسلاید گوگل را مشاهده می‌کنید. این موارد شامل اشتراک‌گذاری، ایمپورت کردن اسلایدها، دانلود کردن اسلایدها، تنظیمات مقدماتی اولیه، تنظیمات پرینت و زبان است. در منوی Edit ابزارهای ساده‌ای جهت کنترل هر یک از صفحه‌ها مشاهده می‌کنید. این موارد شامل گزینه‌هایی برای بازگردانی تغییرها، اجرای مجدد یک تغییر، برش، کپی کردن و چسباندن است.

در منوی View روش‌های مختلف مشاهده ارائه را می‌بینید. همچنین گزینه‌ای برای رفتن به بخش Animations مشاهده می‌شود. بدین ترتیب می‌توانید انیمیشن‌هایی را در ارائه خود بگنجانید.

در منوی Insert گزینه‌های مختلفی برای محتوایی که در ارائه جای داده می‌شوند وجود دارند. در منوی Format نیز ابزارهایی را می‌بینید که از گزینه‌های تنظیم متن، سبک‌های مختلف فونت و چیدمان تا لیست‌های گلوله‌ای و شماره‌گذاری را شامل می‌شود.

منوی Slide امکان ایجاد تغییرات بزرگ در ارائه را فراهم می‌سازد. منوی Arrange امکان سازمان‌دهی عناصر روی هر صفحه را فراهم می‌کند. منوی Tools امکان اصلاح غلط‌های املایی، بررسی واژه‌ها در دیکشنری و افزودن گزینه‌های دسترس‌پذیری به ارائه را فراهم کرده است.

منوی Add-on میانبری برای قابلیت‌های ویژه است که می‌توان به اسلایدهای گوگل اضافه کرد.

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

گام 3: تغییر دادن قالب (Theme)

زمانی که بررسی منوها را به پایان بردید و ایده‌ای کلی از کار هر کدام به دست آوردید، ممکن است بخواهید Theme-های مختلفی که برای اسلایدهای گوگل وجود دارند را مورد بررسی قرار دهید. همان طور که قبلاً اشاره کردیم گوگل اسلایدز (Google Slides) ارائه‌ها را بر مبنای هدفی که دارند گروه‌بندی می‌کند. درون هر گروه تم‌های دیداری را که می‌توان روی اسلاید شو اعمال کرد را مشاهده می‌کنید.

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

گام 4: تغییر فونت

پس از انتخاب تم می‌توانید شروع به وارد کردن اطلاعات خود در اسلاید شو بکنید. برای تغییر دادن متن Placeholder کافی است روی هر کادر کلیک کرده و شروع به نوشتن بکنید. همچنین می‌توانید فونت و رنگ فونت را نیز تغییر دهید.

برای تغییر دادن رنگ، باید مطمئن شوید که آن چه قرار است تغییر یابد انتخاب شده است. سپس روی گزینه رنگ فونت که در شکل فوق با کادر قرمز مشخص شده است کلیک کنید.

زمانی که روی آن کلیک کنید یک منوی بازشدنی مشاهده خواهید کرد که گزینه‌های زیادی دارد. در این منو می‌توانید رنگ‌هایی که در این پالت رنگ برای شما چیده شده‌اند را ببینید. همچنین می‌توانید با کلیک روی گزینه Custom رنگ جدیدی بسازید.

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

نکته: باید اطمینان حاصل کنید که فونت انتخاب شده موجب سهولت در خوانایی متن می‌شود، چون اغلب ارائه‌ها از فاصله‌ای نسبتاً دور دیده می‌شوند.

گام 5: تغییر دادن پس‌زمینه

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

برای تغییر دادن پس‌زمینه روی صفحه اسلاید راست-کلیک کنید. در این زمان باید مطمئن شوید که متن روی صفحه انتخاب نشده است. سپس گزینه Change Background را انتخاب کنید. زمانی که کادر محاوره‌ای باز می‌شود، می‌توانید رنگ پس‌زمینه خود را عوض کنید، یک تصویر روی آن قرار دهید یا پس‌زمینه را به حالت پیش‌فرض قبلی ریست کنید.

در بخش Color می‌توانید یک رنگ ثابت یا گرادیان رنگی برای پس‌زمینه انتخاب کنید. همچنین می‌توانید رنگ‌ها و گرادیان‌های سفارشی انتخاب کنید.

زمانی که پس‌زمینه نهایی شد، قادر هستید یکی از گزینه‌های Done یا Add to theme را انتخاب کنید؛ اگر این پس‌زمینه را به تم خود اضافه کنید، هر صفحه‌ای در ارائه که پس‌زمینه منطبق دارد، این تغییرها را در خود بازتاب می‌دهد. پس از اعمال شدن تغییرها روی Done کلیک کنید.

گام 6: تعویض تصویر

در برخی موارد یک تصویر placeholder (جانمایی) در قالب وجود دارد و می‌خواهیم آن را عوض کنیم. روی چنین تصویری که می‌خواهیم عوض شود، کلیک می‌کنیم تا یک کادر انتخاب آبی‌رنگ پیرامون آن ظاهر شود. سپس روی گزینه Replace Image که در تصویر فوق به رنگ قرمز دیده می‌شود کلیک می‌کنیم. در ادامه می‌توانید گزینه آپلود یک تصویر از رایانه، جستجوی وب برای یک تصویر یا درج یک تصویر از طریق URL را انتخاب کنید.

نکته مهم: مطمئن شوید که دسترسی استفاده از عکس‌هایی که می‌خواهید درج کنید را دارید. اگر در یافتن تصاویر دچار مشکل هستید، می‌توانید از برخی وب‌سایت‌های اشتراک رایگان عکس مانند unsplash (+) استفاده کنید.

گام 7: حذف اسلاید

زمانی که مشغول کار روی این اسلایدها هستید، ممکن است متوجه شوید که یک یا دو صفحه در قالب وجود دارد که مورد نیاز شما نیست. برای این که از شر این صفحه‌ها رها شوید باید به سمت چپ فضای کاری بروید و روی صفحه‌ای که می‌خواهید حذف کنید راست-کلیک کرده در ادامه روی Delete کلیک کنید.

گام 8: جابجایی یک اسلاید

برخی اوقات، اسلایدی را می‌بینیم که از طرح‌بندی آن واقعاً خوشمان می‌آید، اما در مکان نامناسبی از ارائه قرار دارد. برای نمونه، برای انتقال یک اسلاید به انتها روی صفحه‌ای که می‌خواهید جابجا کنید کلیک کرده و سپس گزینه Move slide to end را انتخاب کنید. کار به همین سادگی است.

گام 9: افزودن گذار

زمانی که کار تنظیم کردن ارائه را به پایان بردید، می‌توانید در مورد روش ارائه کردن این اسلاید شو نیز فکر کنید. برای نمونه می‌خواهید ارائه شما چگونه به پیش برود؟ آیا می‌خواهید بین هر یک از صفحه‌ها انیمیشن کوچکی باشد؟

برای افزودن یک «گذار» (transition) بین اسلایدها، روی صفحه‌ای که می‌خواهید تنظیم کنید راست کلیک کرده و گزینه Change Transition را انتخاب کنید.

در زمان انجام این کار، نوار ابزار سمت راست فضای کاری، گزینه‌های جدیدی را که می‌توانید استفاده کنید نمایش می‌دهد. گزینه‌ای که می‌خواهید را از منوی بازشدنی انتخاب کنید. همچنین می‌توانید این گذار را روی کل ارائه یا صرفاً روی یک اسلاید منفرد اعمال کنید.

سخن پایانی

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

منبع: فرادرس

ایجاد نوار ناوبری واکنش گرا با HTML ،CSS و جی کوئری – از صفر تا صد

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

در این مقاله همه مراحل مورد نیاز برای ساخت یک نوار ناوبری ساده را بررسی می‌کنیم و با روش واکنش‌گرا ساختن آن آشنا می‌شویم. ما قصد داریم یک نوار ناوبری برای یک صفحه پورتفولیو بسازیم که 4 بخشبه صورت About Me ،Projects ،CV و Contacts دارد. البته شما می‌توانید آن را بسته به میل خود تغییر دهید.

در نهایت چیزی مانند تصویر زیر خواهیم داشت:

ابتدا کد HTML

تگ مورد استفاده برای ایجاد نوار ناوبری <nav> است و از این رو کار خود را از همین اینجا آغاز می‌کنیم. کافی است تگ nav را باز کرده و ببندیم و فضایی بین دو تگ باقی بگذاریم تا تگ‌های دیگری در آن تعریف شوند.

1 2 3

<nav>    </nav>

اکنون که همه چیز آماده است، می‌توانیم لیست لینک‌های خود را اضافه کنیم. برای ایجاد یک لیست می‌توانیم از تگ <ul> استفاده کنیم که اختصاری برای unordered list است. این تگ کانتینری برای list items با تگ <li> خواهد بود. تگ ul نیز درون تگ nav قرار می‌گیرد.

1 2 3 4 5

<nav>   <ul>      </ul> </nav>

سپس می‌توانیم شروع به افزودن آیتم‌های لیست خود بکنیم که شامل لینک‌هایی به بخش‌های اصلی وب‌سایت ما خواهد بود. (4 بخش که قبلاً معرفی کردیم):

1 2 3 4 5 6 7 8 9 10 11 12

<nav>   <ul>     <!-- list item one -->     <li> </li>     <!-- list item two -->     <li> </li>     <!-- list item three -->     <li> </li>     <!-- list item four -->     <li> </li>   </ul> </nav>

برای هر لیست آیتم باید نام بخش متناظر را اضافه کنیم، اما همچنین باید اطمینان حاصل کنیم که وقتی کاربری روی آن کلیک می‌کند، صفحه به سمت پایین اسکرول می‌کند تا به بخش مرتبط برسد. این کار از طریق تگ <a> یا تگ anchor میسر خواهد بود. شما می‌توانید هر تگ دیگری را نیز درون آیتم لیست درج کنید و سپس نام بخش را درون تگ anchor بنویسید.

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

<nav>   <ul>     <li>       <!-- link one -->       <a> About Me </a>     </li>     <li>       <!-- link two -->        <a> Projects </a>     </li>     <li>       <!-- link three -->       <a> CV </a>     </li>     <li>       <!-- link four -->       <a> Contacts </a>     </li>   </ul> </nav>

در این مرحله صفحه ما چیزی مانند تصویر زیر است:

البته هنوز شباهت چندانی به یک نوار ناوبری ندارد، اما تقریباً همه کد HTML که برای اجرای آن نیاز داریم را نوشته‌ایم و در ادامه صرفاً باید آن را استایل‌دهی بکنیم.

اکنون برای این که این لینک‌های قابل کلیک باشند، باید یک خصوصیت href به تگ‌های anchor خود اضافه کنیم. این خصوصیت شامل id بخشی که لینک شده خواهد بود و دارای ساختار correspondingId# است.

تصور کنید که 4 بخش داریم که id متناظر آن‌ها به ترتیب aboutMe ،#projects ،#cv# و contacts# است و می‌خواهیم به این تگ‌های anchor با استفاده از خصوصیت href یک id انتساب دهیم.

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

<nav>   <ul>     <li>       <!-- link one -->       <a href="#aboutMe"> About Me </a>     </li>     <li>       <!-- link two -->        <a href="#projects"> Projects </a>     </li>     <li>       <!-- link three -->       <a href="#cv"> CV </a>     </li>     <li>       <!-- link four -->       <a href="#contacts"> Contacts </a>     </li>   </ul> </nav>

نوار ناوبری ما اینک مانند تصویر زیر شده است:

زمان آن رسیده است که آن را کمی استایل‌دهی کنیم.

استایل‌دهی CSS

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

1 2 3

li{   list-style-type: none; }

اکنون نوبت به رها شدن از آن زیرخط‌ها رسیده است. به این منظور 3 خط کد زیر را نیز به فایل CSS اضافه می‌کنیم:

1 2 3

a{   text-decoration: none; }

تصور کنید می‌خواهیم یک نوار ناوبری افقی بسازیم و می‌خواهیم کل عرض صفحه را بپوشاند. این کار را می‌توانیم با افزودن یک خصوصیت width: 100vw به تگ nav انجام دهیم. معنی 100 در این خصوصیت آن است که 100% صفحه را می‌پوشاند و nw نیز به این معنی است که عرض صفحه نمایش (viewport) را می‌پوشاند.

1 2 3

nav{   width: 100vw; }

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

1 2 3 4

nav{   width: 100vw;   background-color: #D6EFFF; }

بدین ترتیب تصویری مانند زیر می‌بینید:

دلیل این که چرا این فضای سفید کوچک در طرفین نوار ناوبری ظاهر می‌شوند این است که عناصری مانند body، یا ul دارای مقادیر پیش‌فرضی برای حاشیه هستند. این مقدار را با تعیین margin:0 به هر دوی این عناصر می‌توان حذف کرد. به علاوه اگر از تورفتگی لیست نیز خوشتان نمی‌آید، می‌توانید مقدار pdding:0 را نیز برای ul تنظیم کنید:

1 2 3 4 5 6 7 8

ul{   margin: 0;   padding: 0; }   body{   margin: 0; }

نوار ناوبری ما هم اینک کل عرض صفحه را می‌پوشاند:

زمان آن رسیده است که لینک‌ها را در یک ردیف قرار دهیم و این کار را می‌توان به روش‌های متفاوتی انجام داد. دو مورد از آن‌ها را در ادامه ملاحظه می‌کنید:

• افزودن مشخصه ;display: inline به li
• افزودن مشخصه display: flex به ul

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

1 2 3 4 5 6 7

ul{   margin: 0;   padding: 0;      /*this option by default dispose the elements in a row (flex-direction: row)*/   display: flex; }

اکنون باید بین این آیتم‌های لیست فاصله‌بندی کنیم و این کار از طریق تعیین margin برای هر یک میسر است. پیشنهاد می‌کنیم از مضربی از عرض viewport مانند آنچه در مورد عرض نوار ناوبری اجرا کردیم استفاده کنید. ما از margin به مقدار 2vw برای سمت راست و چپ استفاده می‌کنیم:

1 2 3 4 5 6

li{   list-style-type: none;        /*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/   margin: 0 2vw; }

همچنین می‌توانید اندازه فونت را به صورت مضربی از viewport تنظیم کنید. در این مورد ترجیح می‌دهیم از مضربی از ارتفاع ویوپورت استفاده کنیم که متناسب با عرض آن است و با vh نمایش پیدا می‌کند.

1 2 3 4 5 6

li{   list-style-type: none;     margin: 0 2vw;   /* our font-size will be 3% of the height of the viewport */   font-size: 3vh; }

اکنون اگر بخواهیم فاصله‌ای در بخش بالا و پایین نوار ناوبری خود نیز ایجاد کنیم می‌توانیم یک padding به عناصر <a> خود اضافه کنیم. همچنین می‌توانید آن رنگ آبی پیش‌فرض را حذف کنید. برای نمونه ما رنگ سیاه را ترجیح می‌دهیم.

1 2 3 4 5 6 7 8 9 10

a{   text-decoration: none;      /*below I changed the color*/   color: black;   /*I added some padding*/   padding: 2vw;   /*also changed the font family but that's totally irrelevant*/   font-family: monospace; }

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

element:hover{ /*property that will change when I move the mouse on the element here*/}.

کد مربوطه به صورت زیر است:

1 2 3

a:hover{   background-color: #C6E9FF; }

منوی واکنش‌گرا

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

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

قبل از هر چیز باید نوار ناوبری را عمودی کنیم. به این منظور باید از این واقعیت کمک بگیریم که در لیست نامرتب خود از مشخصه display: flex استفاده کرده‌ایم. بدین ترتیب کافی است یک مشخصه تعریف کرده و مقدار آن را column قرار دهیم. برای اطمینان از این که این کار تنها روی صفحه‌های کوچک صورت می‌گیرد می‌توانیم از مفهومی به نام media query استفاده کنیم.

همچنین باید مطمئن شویم که عنصر <a> کل عرض صفحه را می‌پوشاند به طوری که وقتی ماوس را روی آن می‌بریم می‌توانیم تغییر رنگ برای کل عرض صفحه ببینیم. به این منظور باید به عناصر a مشخصه‌ای به صورت display: block بدهیم.

بدین ترتیب هیچ فاصله‌ای در بخش فوقانی و تحتانی آن باقی نمی‌ماند (مقدار margin: 0 به li بدهید).

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

/*change the layout of the navigation bar for all the screens that have a width less or equal than 500px*/   @media only screen and (max-width: 500px) {   /*shows elements in a column*/   ul{     flex-direction: column;   }      /* deletes margin on top or bottom of the a tag*/   li{     margin: 0;   } /* makes sure that the a tag will take the entire screen*/   a{     display: block;   } }

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

1 2 3 4 5 6 7 8 9 10

<nav>   <ul>       <!-- button here -->       <button> مشاوره جمعه 28 تیر 1398 ساعت 15:50 از زمان ظهور رایانه‌ها، داستان کامپیوتر مبتنی بر یک واقعیت ساده بوده است: خطاهای کوچکی که منجر به مشکلات بزرگی می‌شوند. برخی اوقات مشکل پیش‌آمده یک وضعیت نسبتاً ساده است. در برخی موارد دیگر ممکن است این مشکل منجر به خراب شدن مدارگرد مریخ به ارزش 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–هایی ایجاد کنید که مقدار متغیرهای خاصی را ردگیری کنند و به بررسی پشته فراخوانی بپردازند تا مشخص شود که در کدهای تودرتو کجا قرار دارید و همچنین نقاط توقف شرطی ایجاد کنید تا تنها در صورتی که شرایط خاصی وجود داشتند کد را متوقف کنند. اما اجرای تک‌مرحله‌ای و بررسی متغیرها دو ابزار دیباگ هستند که هر کاری را میسر می‌سازند. با استفاده از این ابزارها هرگز نیازی به تسلیم شدن در هنگام مواجهه با مشکلات رازآلود نخواهد بود. به جای آن همواره می‌توان با کمک ابزارهای دیباگ به بررسی پشت صحنه اجرای کد پرداخت. منبع: فرادرس مشاوره جمعه 28 تیر 1398 ساعت 15:49 از زمان ظهور رایانه‌ها، داستان کامپیوتر مبتنی بر یک واقعیت ساده بوده است: خطاهای کوچکی که منجر به مشکلات بزرگی می‌شوند. برخی اوقات مشکل پیش‌آمده یک وضعیت نسبتاً ساده است. در برخی موارد دیگر ممکن است این مشکل منجر به خراب شدن مدارگرد مریخ به ارزش 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–هایی ایجاد کنید که مقدار متغیرهای خاصی را ردگیری کنند و به بررسی پشته فراخوانی بپردازند تا مشخص شود که در کدهای تودرتو کجا قرار دارید و همچنین نقاط توقف شرطی ایجاد کنید تا تنها در صورتی که شرایط خاصی وجود داشتند کد را متوقف کنند. اما اجرای تک‌مرحله‌ای و بررسی متغیرها دو ابزار دیباگ هستند که هر کاری را میسر می‌سازند. با استفاده از این ابزارها هرگز نیازی به تسلیم شدن در هنگام مواجهه با مشکلات رازآلود نخواهد بود. به جای آن همواره می‌توان با کمک ابزارهای دیباگ به بررسی پشت صحنه اجرای کد پرداخت. منبع: فرادرس مشاوره جمعه 28 تیر 1398 ساعت 15:49 رابط خط فرمان انگولار (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 در ساخت اپلیکیشن خود بکنید. منبع: فرادرس مشاوره جمعه 28 تیر 1398 ساعت 15:48 332 1 ... 45 46 صفحه 47 48 49 ... 67