اگر بخوایم برنامه نویسی یاد بگیریم باید از کجا شروع کنیم؟
پیدا کردن توصیه های مناسب بدون غرق شدن در حجم زیادی از اطلاعات بسیار سخت است و همین باعث شد که ما تصمیم بگیریم یک نقشه راه برای تازه واردهای این عرصه ترسیم کنیم.
این نقشه راه تمام اصولی را که شما برای یادگیری توسعه وب نیاز دارید در اختیارتان قرار می دهد.

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

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

و همینطور برعکس اگر دوست دارید در زمینه ی بک اند فعالیت کنید اندکی هم با فرانت اند آشنا باشید چرا که دانستن اصول هر دو رویکرد به برنامه نویسی وب به شما کمک می کند تصمیم بگیرید واقعا به کدام یک علاقه مند هستید.

• برنامه نویسی چیست؟

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

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

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

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

در این شرایط مرورگر شما با نام کاربر شناخته می شود.

پس هر بار که شما مشغول جستجو در اینترنت هستید شما یک کاربرهستید که اطلاعات را از سرور دریافت می کنید اطلاعاتی را نیز به آن می فرستید و این تبادل اطلاعات متقابل بین سرور و کاربر پایه های اینترنت هستند.

مشاغل مربوط به توسعه ی وب معمولا به سه دسته تقسیم می شوند که شامل: فرانت اند, بک اند و فول استک می شود.

این سه واژه تعیین می کنند که شما در کدام بخش از ارتباط کاربر و سرور نقش دارید.

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

در نقطه ی مقابل بک اند یعنی اینکه شما با بخشی سر و کار دارید که نمیشود آن را در مرورگر دید اما در واقع بخش عظیمی از اطلاعات و کارکرد های ضروری را کننترل می کند.

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

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

بسیاری از اتفاقات هستند که مشتریان آن ها را نمی بینند و فقط از غذا استفاده کرده و اگر خوب بوده باشد از آن لذت می برند.

از بخش لذت بخش ماجرا که بگذریم هم فرانت اند و هم بک اند کار های مختص خود و مهمی را در ساخت یک وب سایت بر عهده شما می گذارند.

در طراحی وب سایت مهم ترین ابزاری که از آن استفاده می کنید ویرایشگر کد یا IDE  شماست.

این ابزار به شما این امکان را می دهد که کد وعلامت گذاری های خود را که منجر به ایجاد وبسایت می شوند را بنویسید و انجام دهید.

IDEهای بسیار متنوعی وجود دارند که می توانید از آن ها استفاده کنید ولی محبوب ترین آن ها VS code است

که در واقع نسخه ی سبک تر از IDE اصلی Microsoft یعنی Visual Studio است که کار با آن رایگان ,سریع و آسان است.

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

از میان سایر IDE ها می توان sublime text Adam و Vim را نام برد.

اگر تازه کار خود را شروع کرده اید توصیه می شود از vs code  استفاده کنید که می توانید از وبسایت رسمی آن دانلودش کنید.

• اصول فرانت اند

بخش فرانت اند یک وب سایت سه نوع فایل HTML, CSS و JavaScript تشکیل شده است

که این سه نوع فایل آن چیزی هستند که بر روی مرورگر دیده می شوند.

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

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

تگ های HTML  به صورت پیش فرض یک سری استایل دارند اما آنها در واقع شکل ابتدایی محتوا هستند مثل آن چیزی که در فایل های ورد دیده می شود.

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

مبحث CSS بسیار عمیق است و گاهی برنامه نویسان از آن صرف نظر کرده و به زبان هایی مانند JavaScript روی می آورند به هر حال بسیار مهم است که شما بتوانید یک طراحی فرانت اند را با استفاده از css ایجاد کنید.

JavaScript یک زبان برنامه نویسی است که طراحی شده که در مرورگر اجرا شود.

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

 

• ابزار ها

همان طور که گفته شد HTML, CSS و JavaScript بخش های اساسی در بخش فرانت اند در برنامه نویسی وب هستند و علاوه بر آنها چند ابزار دیگر وجود دارد که در این مرحله از آموزش باید با آنها آشنا شوید.

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

شما می توانید این نرم افزارها را چیزی شبیه لوازم جانبی در نظر بگیرید.

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

محبوب ترین برنامه ی مدیریت پکیج NPM نام دارد  شما می توانید از yarn هم استفاده کنید که هر دوی این برنامه ها گزینه های خوبی محسوب می شوند اگرچه شاید بهتر باشد با NPM شروع کنید.

علاوه بر مدیریت پکیج شما باید با ابزار های ساخت یا build tool ها هم آشنا باشید که بخش مهمی از توسعه ی فرانت اند را تشکیل می دهند.

این ابزار ها عموما به شما کمک میکنند که عملکرد ها را اجرا کنید و فایل های sass خود را در css کامپایل کنید, یک سرور داخلی را مدیریت کنید و یا کارهای دیگری انجام دهید که میتوانید باعث صرفه جویی زیادی در وقت شما بشود.

سه ابزار دیگری که زیاد با آنها مواجه می شوید gulp, web pack و  parcel  هستند.

آخرین ابزاری که در این مرحله با آن آشنا می شوید version control است که هر تغییری که در کد های خود می دهید را ذخیره و کنترل می کند

شما حتی می توانید به نسخه های قبلی تغییرات خود برگردید تا اشتباهات خود را تصحیح کنید.

این در واقع مثل داشتن یک منبع تمام نشدنی از ذخیره ی نسخه های قبلی اطلاعات است که بسیار کاربردی ست و محبوب ترین برنامه در این زمینه git است که شما با استفاده از آن می توانید تمام فایل های خود را ذخیره کنید و بعدا در مجموعه هایی به نام repository تاریخچه ی این تغییرات را ویرایش کنید.

ممکن است نام github  به گوشتان خورده باشد که در واقع یک شرکت میزبان آنلاین است که توسط مایکروسافت اداره می شود و شما میتوانید دورریز های خود را در آن ذخیره کنید.

برای مسب اطلاعات بیشتر درباره ی توسعه ی فرانت اند شما می توانید به یادگیری درباره ی SAS, responsive design و JavaScript بپردازید.

SAS یک مورد اضافه شده به CSS است که بسیار قدرتمند بوده و به شما اجازه می دهد استایل های خود را بسیار خلاقانه تر کنید و با جدا کردن استایل های خود آن ها را سازمان دهی کنید, برای ذخیره ی رنگ ها متغیر ایجاد کنید و یا با استفاده از mix-in ها و placeholder ها از استایل های خود دوباره استفاده کنید.

Responsive design باعث می شود محصول شما بر روی تمام دستگاه ها قابل اجرا باشد.

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

مثلا به جای اینکه عرض محتوای خود را برای نمایش 400 پیکسل در نظر بگیرید می توانید خروجی ای داشته باشید که سایز آن روی صفحه نمایش کامپیوتر به یک شکل و بر روی موبایل به شکل دیگری باشد.

ساختن وبسایت با CSS انطباق پذیر این روزها یک ضرورت است مخصوصا با توجه به اینکه استفاده از موبایل در جهان امروز در حال پیشی گرفتن از کاربری دسکتاپ است.

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

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

حالا شما سه گزینه ی اصلی دارید که react, angular و VUE هستند.

React که اصولا یک کتابخانه است که توسط فیسبوک ایجاد شده محبوب ترین فریمورک حال حاضر است.

Angular اولین فریمورک بزرگ بود که توسط گوگل ایجاد شد و هنوز هم بسیار محبوب است.

VUE یک فریمورک جدید است که توسط Evan You طراحی شده که یکی از توسعه دهندگان انگولار بوده است.

ممکن است از خود بپرسید حالا کدام یک را باید انتخاب کنم؟

که باید بدانید همه ی این انتخاب ها می توانند مناسب باشند چرا که در برنامه نویسی هیچوقت یک انتخاب مطلق الزامی نیست.

انتخاب شما تحت تاثیر شغلتان و یا اینکه با کدام ابزار راحت ترید خواهد بود.

اگر میخواهید در یک شرکت کار کنید باید تحقیق کرده و ببینید کدام فریمورک ها بیشترین متقاضی را دارند.

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

4. توسعه ی وب در بک اند

توسعه ی بک اند یا سمت سرور از سه بخش اصلی تشکیل شده است که شامل سرور, زبان برنامه نویسی سمت سرور و پایگاه داده ها.

همانطور که در ابتدای بحث توضیح دادیم سرور کامپیوتری است که تمام فایل های وبسایت, پایگاه داده ها و بخش های دیگر وبسایت در آن قرار دارند.

سرور های سنتی با سیستم عامل هایی مانند لینوکس یا ویندوز کار می کنند و مرکزی محسوب می شوند چرا که همه چیز از جمله فایل ها, کد های بک اند و دیتا در آن قرار دارند.

امروزه ساختارهای بدون سرور نیز ایجاد شده اند که ساختارهایی غیرمتمرکز شمرده می شوند.

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

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

برخی از ارائه دهنده های وب بدون سرور شامل AWS, Amazon Web Services یا Netlify هستند.

ساختارهای بدون سرور به امروزه بسیار محبوب هستند چرا که سریع و ارزان هستند و نیازی نیست در آنها نگران نگهداری سرور ها باشید.

برای وبسایت های ساده که نیازی به یک زبان سمت سرور مرسوم ندارند بسیار کاربردی هستند اگرچه برای اپلیکیشن های پیچیده تر بهتر است از از سرور استفاده شود.

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

سپس سرور کد های شما را کمپایل کرده و خروجی مورد نظر شما را به سمت کاربر می فرستد.

زبان های برنامه نویسی محبوب برای PHP, Python, Ruby, C#, Java  و NodeJS می شوند.

در نهایت شما باید در مورد پایگاه داده ها اطلاعات کسب کنید.

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

بیشتر دیتابیس ها از زبانی استفاده می کنند که SQL  نامیده می شوند.

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

پس از این مرحله شما می توانید ورودی هایی را در SQL ایجاد کنید که به خواندن, به روز رسانی و پاک کردن داده ها منجر می شود.

پایگاه داده ها روی سرور اجرا می شود و برای این کار از سرور هایی مانند SQL  سرور مایکروسافت روی سرور های ویندوز و my SQL برای لینوکس استفاده میکنند.

پایگاه های داده no SQL هم وجود دارند که داده ها را به صورت فایل های JSON ذخیره می کنند.

یکی از انواع سرور های no SQL, MongoDB اس که معمولا با react, angular یا VUE استفاده می شود.​