5 پروژه جاوا اسکریپت که باید به عنوان توسعه دهنده فرانت اند مبتدی بسازید

زهرا آقایی

بعنوان یک توسعه دهنده فرانت اند چه مهارت هایی را باید در خود تقویت کنید؟

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

در ادامه برخی از مهارتهایی که شما بدان نیاز دارید تا بتوانید بعنوان یک توسعه دهنده فرانت اند پذیرفته شوید را معرفی می کنیم

باید متداول ترین عناصر HTML و نحوه تأثیر آنها بر SEO را بشناسید

باید بیشتر خصوصیات CSS را بدانید.همچنین شما باید بدانید که چگونه می توان عناصر مشترک UI مانند Modalیا پیمایش چندسطحی را ساخت.

بر نحوه پیاده سازی انیمیشن های CSS و استفاده از Flexbox و CSS Grid نیز باید مسلط باشید.

توانایی طراحی ریسپانسیو و تنظیم روشهای درست توسعه برای صفحه های کوچکتر تبلت و موبایل را داشته باشید

در پروژه های تجاری به ندرت یک پرونده ساده CSS دیده میشود. آنچه بدان نیاز دارید دانش پیش پردازنده های CSS مانند SCSS ، روش BEM و CSS-in-JS است.

شما باید قادر به درک کدهای نوشته شده در JavaScript و نوشتن ویژگی های ساده باشید.

شما باید نحوه تعامل با RIE API های خارجی ، مدیریت و ارسال داده های فرم ، پیاده سازی عناصر ساده UI مانند مودال، حالت کشویی ، برگه ها یا همان تب ها و اسلایدرها را بدانید.

خوب است که تکنیک های تست کد را نیز بدانید تا حداقل بتوانید در مورد آنها صحبت کنید.

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

یک نمونه وبلاگ را با HTML و CSS بسازید.

هنگامی که شما تازه شروع به یادگیری توسعه front-end می کنید ، مهم است که بتوانید دانش خود را در مورد HTML و CSS ادغام کنید و همزمان از این دو در کنار هم استفاده کنید. ساختن یک وبلاگ ایده خوبی برای اولین پروژه بزرگ شماست. در مورد طراحی و پیاده سازی وبلاگ نگران نباشید ، منابع بسیاری به صورت آنلاین در دسترس هستند که از جمله بهترین این منابع وب سایت w3school است. مزیتی که ساخت یک وبلاگ به شما می دهد این است که علاوه براینکه از نحوه ادغام کدهای html و css اطلاع پیدا می کنید، با ساختار کلی یک پروژه و برنامه نیز درگیر می شوید و ذهن خود را برای شناخت معماری یک وبسایت و برنامه آماده می کنید.

شرح پروژه: یک وبلاگ بسازید و امکان قرار دادن پست در آن را داشته باشید و مدیر وبلاگ بتواند براحتی سینگل پست های خود را در آن قرار دهد. این وبلاگ باید اطلاعاتی برای "تماس با شما" را نیز داشته باشد. صفحه اول یا همان صفحه اصلی باید هدر مناسبی داشته باشد و ظاهر سایت شما را زیبا کند. همچنین شما باید بتوانید در دستگاه های مختلف نمایش درستی از این وبلاگ داشته باشید.

آنچه که شما بدان نیاز دارید:

ایجاد یک صفحه اصلی ، صفحه تک پست  یا همان سینگل پست و صفحه تماس

سعی کنید از CSS Grid استفاده کنید

صفحه شما باید ریسپانسیو(RWD) باشد یعنی برای دستگاه های مختلف مثل لپتاب تبلت و گوشی قابل نمایش باشد.

آنچه که بهتر است داشته باشید:

یک اسلایدر اضافه کنید

به جای Lorem Ipsum از مطالب واقعی استفاده کنید

تنها با استفاده از JavaScript یک بازی Tic-tac-toe بسازید

ساخت یک بازی در یک مرورگر می تواند تمرین خوبی برای آزمایش مهارت های JavaScript شما باشد. شما باید به رویدادهای کاربر واکنش نشان دهید ، با DOM تعامل کنید و داده های بازی را ذخیره کنید. این سه نیاز باعث درگیر شدن شما با قسمت های مختلف در این برنامه نویسی می شود و تجربه کاری بسیار خوبی برای شما می باشد. ضمن این که این یک پروژه عالی برای نشان دادن به همکاران و همینطور خانواده شما است!

شرح پروژه: در این پروژه شما باید یک صفحه بازی تیک تاک تو را پیاده سازی کنید. این بازی میان دو نفر انجام می شود که هر یک باید نماد خاص خود را داشته باشند و در بازی از آن استفاده کنند. بدیهی است که زمان آغاز و پایان بازی باید مشخص باشد و نفر شروع کننده بازی نیز تعیین شود و هر بازیکن تنها در نوبت خود اجازه بازی داشته باشد.

آنچه شما بدان نیاز دارید:

صفحه خوش آمدید با نام و نماد ورودی برای هر بازیکن

وقتی کاربر روی سلول خالی کلیک می کند ، یک نماد ارائه می شود

تأیید برنده شدن

آنچه که بهتر است داشته باشید:

ایجاد یک جدول امتیاز و ذخیره آن در حافظه محلی

بازی با کامپیوتر ، با استفاده از الگوریتم سابق minmax یا راه حل خودتان

اشتراک گذاری موقعیت مکانی با دستورات JavaScript و استفاده از سرویس Maps

یک برنامه ساده که در آن می توانید مکان خود را با دوست خود به اشتراک بگذارید می تواند هم یک پروژه پر مخاطب و کارفرما پسند باشد و هم یک ابزار بسیار مفید که خودتان می توانید استفاده کنید. در این پروژه ، از JavaScript برای تعامل با سرویس های خارجی نقشه (از قبیل Google Maps یا OpenStreetMap) استفاده کنید. این پروژه مهارت هماهنگی و استفاده از قابلیت های موجود را در شما تقویت می کند.

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

آنچه که بدان نیاز دارید :

نمایش مکان فعلی شما روی نقشه

دکمه "اشتراک" که لینکی با مکان فعلی شما ایجاد می کند

صفحه ای که موقعیت مکانی تعبیه شده در URL را نمایش می دهد

آنچه که بهتر است داشته باشید:

با به اشتراک گذاشتن مکان فعلی خود ، باید آن را ذخیره کرده و هر چند ثانیه یک بار از یک پایگاه داده خارجی بخوانید (به عنوان مثال Firebase)

نمایش موقعیت مکانی فعلی دوست شما هنگامی که به صفحه دسترسی پیدا میکند.

ساخت دنبال کننده سریال های تلویزیونی با استفاده از فریم ورک (JS ، React ، Vue ، Angular یا موارد دیگر)

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

شرح پروژه: شما باید یک دنبال کننده سریال های تلویزیونی مختلف طراحی کنید. یک صفحه وب که برنامه های تلویزیونی را نمایش می دهد. این صفحه سریال ها را با استفاده از یک api خارجی پیدا می کند و در لیست پیگیری خود قرار می دهد. آنچه باید در نظر داشته باشید با کلیک روی هر سریال شما به صفحه آن سریال هدایت می شوید که درباره سریال توضیحات لازم داده شده است. در صورتی که پروژه شما قابلیت اعلان افزوده شدن سریال جدید را نیز داشته باشد کار شما بسیار جذاب تر خواهد بود.

آنچه که بدان نیاز دارید:

جستجوی مجموعه های تلویزیونی با استفاده از API خارجی (به عنوان مثال TVMaze API)

اضافه کردن این مجموعه های تلویزیونی به لیست پیگیری

نمایش لیست دنبال شده سریال های تلویزیونی همراه با تاریخ پخش جدیدترین قسمت

نمای تک صفحه با جزئیات بیشتر درباره تک تک سریال های تلویزیونی

ذخیره لیست پیگیری در حافظه محلی

آنچه بهتر است داشته باشید:

ارسال ایمیل یا اعلان های فشاری هنگام فرا رسیدن قسمت های جدید سریال ها

برنامه بودجه خانگی با JS Framework ، React ، Vue ، Angular یا سایر موارد

ایجاد یک برنامه بودجه خانگی یک بررسی نهایی برای مهارت های شما به عنوان یک توسعه دهنده Junior Front-end خواهد بود. این پروژه توانایی شما در ایجاد فرم ها و ذخیره اطلاعات را ارزیابی و تقویت می کند ، اما همچنین می تواند به شما در صرفه جویی در هزینه کمک کند!

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

آنچه که بدان نیاز دارید:

افزودن یک دسته بندی

اضافه کردن هزینه با نام ، مقدار و دسته

جمع بندی هزینه های ماهانه تقسیم شده به دسته ها

ذخیره داده ها در یک پایگاه داده خارجی (به عنوان مثال Firebase)

آنچه که بهتر است داشته باشید:

ثبت نام کنید ، وارد شوید و چندین کاربر را مدیریت کنید

خلاصه

پروژه های جانبی یک روش عالی برای نشان دادن مهارت های شما برای به دست آوردن شغل به عنوان Junior Front-end Developer است. به کارفرمای آینده خود بگویید که تاکنون چه چیزی ساخته اید. آنها نه تنها به صفحه وب نگاه می کنند بلکه کد شما را نیز تجزیه و تحلیل می کنند ، بنابراین از تمیز بودن آن اطمینان حاصل کنید.

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

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