نقشه راه مبتدیان برای شروع توسعهی وب
۲۰ تیر ۱۳۹۹
در این نقشه راه اصول اولیه توسعهی وب را مورد بررسی قرارمیدهیم و مراحل مورد نیاز را باهم طی خواهیمکرد. مانند:
- ویرایشگر کد چیست؟
- چرا فریمورک جاوااسکریپت؟
- کدام زبانها را برای بخش بکاند (backend) میتوانید انتخاب کنید؟
همچنین منابعی را به شما معرفی خواهیمکرد که به کمک آنها میتوانید مهارتهای خود را افزایش دهید.
در حقیقت اگر شما یک تازه کار باشید، اول از همه باید مفاهیم پایه را بیاموزید. واقعاً لازم نیست از هر فناوری، ابزار یا زبان موجود بدانید.
تا پایان این راهنما، شما از اصول اولیه توسعهی وب، مهارتهایی که باید بدانید و از کجا آنها را فرا بگیرید، مطلع میشوید!
- چیستیهای توسعهی وب: وبسایتها چگونه کار میکنند؟ تفاوت فرانتاند و بکاند در چیست؟ ویرایشگر کد چیست؟
- اساس فرانتاند: HTML، CSS، JavaScript
- ابزارها: پکیجمنیجر، ابزار ساخت (build tools)، ورژن کنترل
- فرانتاند در ادامه: Sass، طراحی واکنشگرا، فریمورکهای جاوااسکریپتی
- اساس بکاند: مدیریت سرور و پایگاهداده، زبانهای برنامهنویسی
در این نقشه راه به شما توصیه میشود قدمهای ۱، ۲ و ۳ را پیش ببرید. سپس براساس آنچه که میخواهید روی آن متمرکز شوید (فرانتاند یا بکاند)، میتوانید قدمهای ۴ و ۵ را به ترتیب انجامدهید.
یک ایده خوب برای توسعه دهندگان فرانتاند، دانستن اندکی از بکاند است، و برعکس. حداقل، دانستن اصول اولیه هر دو به شما کمک میکند، تا بفهمید که آیا فرانتاند را بیشتر دوستدارید یا بکاند را ?
۱: توسعهی وب چیست؟
قبل از ورود به برنامهنویسی واقعی، باید برخی اطلاعات کلی، در مورد توسعهی وب را بررسی کنیم: وبسایتها چگونه کار میکنند؟ تفاوت میان فرانتاند و بکاند در چیست؟ چگونه از ویرایشگر کد استفاده کنیم؟
وبسایتها چگونه کار میکنند؟
همه وبسایتها، اساسا فقط دستهای از فایلها هستند که در رایانهای به نام سرور ذخیره میشوند و آن سرور به اینترنت متصل است. شما میتوانید وبسایت را از طریق مرورگر (مانند: کروم، فایرفاکس یا سیری) در گوشی یا کامپیوتر بازکنید. در این شرایط مرورگر شما، کلاینت (client) نامیده میشود.
بنابراین، هر بار که در اینترنت هستید، شما اطلاعاتی مانند عکس گربه را از سرور دریافت میکنید. همچنین ارسال دادهها به سرور و ارتباط بین مشتری (کلاینت) و سرور، اساس اینترنت است.
هرچیزی که در مرورگر شما در دسترس است، توسط توسعه دهندگان وب ساخته شدهاست. برخی مثالهای کوچک مانند وبلاگهای تجاری و برخی دیگر میتوان فیسبوک، AirBnb و توییتر را نام برد.
تفاوت بین فرانتاند و بکاند چیست؟
اصطلاحهای “فرانتاند”، “بکاند” و “فولاستک”، توصیف کننده وظایف توسعه دهنده است.
“فرانتاند” به این معنی است، که شما فقط با سمت کلاینت سر و کار دارید. زیرا این همان چیزی است که میتوانید در مرورگر مشاهده کنید (بخش ظاهری).
برعکس، “بکاند” بخشی از وبسایت است، که شما واقعاً نمیتوانید ببینید، اما منطق و کارایی زیادی را برای کار در اختیار شما قرار میدهد.
یکی از راههایی که میتوانید در این باره فکر کنید این است که، توسعه فرانتاند مانند “قسمت جلوی ساختمان یک رستوران است”. این بخش برای دیدن رستوران و دکوراسیون داخلی، گذاشتن صندلی و البته خوردن غذا برای مشتریان است.
از طرف دیگر، توسعه بکاند مانند بخش “پشت ساختمان رستوران” است. در اینجا مدیریت تحویلها و موجودیها انجام میشود و روند پخت موادغذایی اتفاق میافتد. در پشت صحنه چیزهایی زیادی وجود دارد که مشتریان نمیتوانند ببینند، اما آنها محصول نهایی را تجربه میکنند (امیدوارم از آن لذت ببرند) – یک غذای خوشمزه!
استفاده از ویرایشگر کد
هنگام ساختن یک وبسایت، مهمترین ابزاری که استفاده خواهید کرد ویرایشگر کد یا IDE (محیط توسعه یکپارچه) است. این ابزار به شما امکان میدهد تا کدهایی که وب سایت را میسازند، بنویسید.
گزینههای بسیار خوبی وجود دارد، اما در حال حاضر محبوبترین ویرایشگر کد، VS Code است. VS Code نسخه سبک تر Visual Studio، اصلی ترین IDE مایکروسافت است. این نرم افزار سریع، رایگان و آسان است، میتوانید با تمها و اکستنشنهای مختلف، آن را سفارشی سازی کنید.
دیگر ویرایشگرهای کد Sublime Text، Atom و Vim هستند.
اگر تازه، کار را شروع کردهاید، توصیه میکنم VS Code را بررسیکنید، میتوانید از وب سایت رسمی این برنامه را دانلود کنید. اکنون که ما برخی از مفاهیم گسترده تر را در مورد توسعهی وب پوشش دادهایم، باید جزئیات بیشتری از فرانتاند کسب کنیم.
۲: فرانتاند مقدماتی
فرانتاند وبسایت، از سه نوع فایل تشکیل شده است: HTML، CSS و JavaScript. این فایلها همان چیزی است که در مرورگر کلاینت، لود (load) میشود. بیایید نگاهی دقیق تر به هر یک از آنها بیندازیم.
HTML
HTML، یا HyperText Markup Language، پایه و اساس همه وب سایتها است. این نوع فایل همان فایلی است که هنگام مرور وبسایت، در مرورگر شما بارگذاری میشود.
به عنوان مثال، میتوانید از تگها برای ایجاد عناوین، پاراگرافها، لیستهای بولت، تصاویر و غیره استفاده کنید. تگهای HTML به خودی خود دارای ظاهر سادهای هستند، اما کاملاً اساسی! مانند آنچه در یک فایل Word میبینید.
CSS
CSS (Cascading Style Sheets)، به شما امکان میدهد که کدهای HTML را استایلدهی کنید، تا زیبا و فانتزی بنظر برسند. میتوانید رنگها و فونتهای دلخواه را اضافه کنید یا عناصر وبسایت خود را چیدمان کنید. شما حتی میتوانید با CSS انیمیشن و شکل ایجاد کنید.
اگر میخواهید در بخش فرانتاند متخصص شوید، یادگیری CSS بسیار ضروری است.
JavaScript
JavaScript یک زبان برنامه نویسی است که برای اجرا در مرورگر طراحی شده. با استفاده از JavaScript، میتوانید وبسایت خود را پویا کنید، به این معنی که به ورودیهای مختلف کاربر یا منابع دیگر پاسخ خواهد داد.
به عنوان مثال، میتوانید یک دکمه “بازگشت به بالا” بسازید که وقتی کاربر روی آن کلیک کرد، به بالای صفحه حرکت کند. یا میتوانید یک ویجت (widget) آب و هوا بسازید که هوای امروز را بر اساس موقعیت کاربر در جهان نمایش دهد.
به خصوص اگر میخواهید مهارتهای خود را بعداً با یک فریمورک JavaScript مانند React توسعه دهید، زمان بیشتری برروی یادگیری پایههای JavaScript بگذارید.
یادگیری این یک زبان واقعا سرگرم کننده است، و کارهای بسیاری وجود دارد که میتوانید با آن انجام دهید!
از کجا میتوان HTML، CSS و JavaScript را یاد گرفت؟
freeCodeCamp
یکی از مکانهای مورد علاقه من برای یادگیری freeCodeCamp است، یک بوتکمپ کدنویسی آنلاین، غیر انتفاعی و کاملاً رایگان است! اگر شما یک مبتدی باشید و کاملاً مطمئن نیستید که کدنویسی برای شما مناسب است، یک روش بدون ریسک، برای ارزیابی این مورد در مقابل شما قراردارد.
نکته منفی freeCodeCamp این است که آموزشهای ویدئویی ندارند. بنابراین اگر شما واقعاً دوست دارید از طریق آموزش ویدئویی یاد بگیرید، چند گزینه دیگر وجود دارد:
Team Treehouse
Team Treehouse یک پلتفرم یادگیری آنلاین، مبتنی بر آموزش ویدئویی است. همچنین آنها یک برنامه آموزشی آنلاین همراه با ارائه مدرک هم دارند که متوسط زمان دوره ۴ الی ۵ ماه میباشد.
اگر از طرفداران دورههای ویدیویی یک طرفه هستید، گزینههای رایگان و پولی وجود دارد:
Wes Bos
Wes Bos دورههای رایگانی در زمینه Flexbox، CSS Grid و JavaScript دارد، که بسیار عالی هستند.
Udemy
Udemy یک پلتفرم یادگیری آنلاین با بسیاری از دورههای عالی هست. یک مورد خاص که ممکن است شما دوست داشته باشید دوره پیشرفته CSS و Sass توسط Jonas Schmedtmann است – این دوره پولی شامل CSS grid, flexbox, responsive design و سایر مباحث CSS میشود!
و در آخر، برخی از وب سایتهایی که دارای مقالات عالی و منابع دیگری هستند:
? در ایران:
برخی از منابع آموزشی، نیاز به پرداخت ارزی دارند و این امکان برای شما ایرانیان عزیز در دسترس نیست. اما با کمی جستجو در گوگل میتوانید به این منابع آموزشی بهصورت رایگان در سایتهای ایرانی دست پیدا کنید.
۳: ابزارها
اکنون برخی دیگر از فناوریهای فرانتاند را بررسی میکنیم. همانطور که گفتیم، HTML، CSS و JavaScript اساس توسعه فرانتاند وب هستند. علاوه بر آنها چند ابزار دیگر برای یادگیری وجود دارد.
پکیج منیجر (package managers)
پکیج منیجرها، مجموعه ای از نرم افزارهای آنلاین هستند که بخش اعظم آنها از منابع آزاد است. هر قطعه نرمافزاری به نام پکیج، برای نصب و استفاده در پروژههایتان در دسترس شماست.
معروفترین پکیجمنیجر npm یا Node Package Manager نام دارد اما میتوانید از پکیجمنیجر دیگری مانند Yarn نیز استفاده کنید. هر دوی اینها گزینه خوبی برای یادگیری و استفاده هستند، اگرچه احتمالاً بهتر است با npm شروع کنید.
ابزار ساخت (build tools)
Module bundlerها و ابزارهایی مانند Webpack، Gulp یا Parcel، بخش اصلی دیگری از فرانتاند هستند.
این ابزارها وظایف را انجام داده و پروندهها را پردازش میکنند. میتوانید از آنها برای کامپایل کردن فایلهای Sass به CSS استفاده کنید، برای پشتیبانی بهتر مرورگر، پروندههای JavaScript ES6 خود را به ES5 تبدیل کنید، یک سرور وب محلی را اجرا کنید و همچنین بسیاری از کارهای مفید دیگر را میتوان به کمک این ابزار انجام داد.
Gulp، از لحاظ فنی یک اجرا کننده است، مجموعه ای از بستههای npm را دارد که میتوانید برای تهیه و پردازش پروندههای خود از آنها استفاده کنید.
Webpack یک bundler فوقالعاده قدرتمند است که علاوه بر قابلیتهای Gulp، کارهای دیگری هم انجام میدهد. درجاوااسکریپت به ویژه در فریمورکها بسیار مورد استفاده قرار میگیرد. یکی از نقاط ضعف این ابزار زمانبر بودن پیکربندیش است.
Parcel یک bundler جدید مانند webpack است. اما نقطه قوت این ابزار نسبت به webpack، در نوع تنظیم آن است که میتوانید در چند دقیقه به سادگی آن را آماده سازی کنید.
اگر به Gulp یا Parcel علاقهمند هستید:
اگر میخواهید در مورد Webpack اطلاعات بیشتری کسب کنید، ویدیوهای YouTube زیر را مشاهده کنید:
ورژنکنترل
ورژنکنترل ( Source Control – نیز نامیده میشود) سیستمی است که هر تغییر کدی را که در فایلهای پروژه خود ایجاد میکنید، دنبال میکند. حتی اگر اشتباه کنید میتوانید به تغییر قبلی برگردید. این تقریباً شبیه به صرفه جویی در امتیازات نامحدود برای پروژه شماست و بگذارید به شما بگویم، میتواند یک نجات دهنده بزرگ باشد.
محبوب ترین سیستم کنترل نسخه، سیستم منبع باز به نام Git است. با استفاده از Git، میتوانید تمام پروندههای خود و تاریخ تغییر آنها را در مجموعههایی به نام مخزن ذخیره کنید.
شاید شما نیز از GitHub شنیده باشید، که یک شرکت میزبانی آنلاین متعلق به مایکروسافت است که در آن میتوانید تمام مخازن Git خود را ذخیره کنید.
برای یادگیری Git میتوانید از مقاله آموزش Git در سرویس ابری لیارا کمک بگیرید.
۴: فرانتاند در ادامه
هنگامی که مقدمات ابتدایی را به اتمام رساندید، مهارتهای میانی بیشتری وجود دارد که میخواهید یاد بگیرید. توصیه میکنم موارد زیر را بررسی کنید: Sass، طراحی واکنشگرا و یک فریمورک JavaScript.
Sass
Sass یک افزونه CSS است که به نوشتن کدهای modular کمک میکند. این ابزار واقعا قدرتمند است. برای سازماندهی بهتر، با Sass میتوانید استایلهای خود را به چندین پرونده تقسیم کنید، متغیرهایی را برای ذخیره رنگها و فونتها ایجاد کنید و همچنین از ترکیبات و متغیرها برای استفاده مجدد در استایلها استفاده کنید.
حتی اگر شما فقط با برخی از ویژگیهایی مانند nesting کار میکنید، میتوانید استایلهای خود را سریعتر و با دردسر کمتر بنویسید.
طراحی واکنشگرا
طراحی واکنشگرا باعث میشود که استایلهای شما در تمامی دستگاهها مانند تبلتها، تلفنهای همراه و همچنین کامپیوترهای دسکتاپ، عالی بنظر برسد. روشهای اصلی طراحی واکنشگرا شامل استفاده از flexible sizing برای عناصر و استفاده از media query برای دستگاههایی با اندازههای مختلف است.
برای مثال، بجای استفاده از عرض ثابت ۴۰۰px شما از media query استفاده میکنید که عرض آن محتوا را در تلفن همراه ۱۰۰% و در سیستم دسکتاپ ۵۰% نشان میدهد.
ساختن وبسایتهایی با طراحی واکنشگرا امری ضروری است، زیرا ترافیک تلفن همراه در بسیاری موارد از ترافیک دسکتاپ پیشی گرفته است.
فریمورکهای JavaScript
در صورتی که مقدمات این زبان را فرا گرفته باشید، شاید وقت آن رسیده باشد که به سراغ فریمورکها بروید (مخصوصا اگر بخواهید یک توسعه دهنده فول-استک JavaScript باشید).
این فریمورکها با سازهها و مؤلفههایی از پیش ساخته شده وجود دارند که به شما امکان میدهند برنامه مورد نظرتان را سریعتر بسازید.
در حال حاضر، شما سه انتخاب اصلی دارید: React، Angular و Vue.
React (از نظر فنی یک کتابخانه محسوب میشود)، که توسط Facebook ساختهشده و یکی از مشهورترین فریمورکهای حال حاضر دنیاست. برای شروع یادگیری میتوانید به وبسایت React.js مراجعه کنید. اگر به دنبال یک آموزش حرفهای هستید، Tyler McGinnis و Wes Bos این نیاز شمارا برطرف میکنند.
Angular اولین فریمورک بزرگی بود که توسط Google ایجاد شد. این فریمورک هنوز هم مشهور و اخیرا از React هم پیشیگرفته است. میتوانید یادگیری Angular را از وبسایت مرجع شروع کنید. همچنین Gary از Design Course آموزشی مربوط به Angular در یوتیوب خود دارد.
Vue یک فریمورک جدید است که توسط Evan You ساختهشده، او یکی از توسعه دهندگان پیشین Angular بوده است. حجم این فریمورک بسیار کمتر از React و Angular بوده و سرعت رشد بالایی هم داشته است. شما میتوانید برای شروع از مستندات وبسایت Vue استفاده کنید.
کدام فریمورک را باید یادبگیرید؟
شاید برایتان سوال پیشآمده باشد، کدام فریمورک بهتر است؟
در حقیقت هر ۳ آنها عالی هستند. در توسعهی وب، هیچ پاسخ ۱۰۰% وجود ندارد و انتخاب برای هر شخص و موقعیتش متفاوت است.
شاید بر اساس نیاز شغلی یا بر اساس علایق خود یکی از آنها را انتخاب کنید. زیاد نگران انتخاب فریمورک نباشید و سعی کنید مفاهیم اصلی را درک کنید. همچنین شما با یادگرفتن یک فریمورک خیلی سریعتر بقیه را یاد میگیرید.
۵: مقدمات بکاند
بکاند یا همان توسعهی وب در سمت سرور، از ۳ مولفه اصلی تشکیل شدهاست: سرور، زبان برنامهنویسی سمت سرور و در آخر، پایگاه داده
سرور
همانطور که در ابتدای مقاله اشاره کردیم، سرور رایانهای است که تمام فایلهای وبسایت، اطلاعات و سایر مؤلفهها، در آن ذخیره میشوند.
سرورهای مرسوم با سیستم عاملهایی مانند Linux یا Windows کار میکنند. امروزه همچنین معماریهای بدون سرور (server less) نیز وجود دارد که به نوعی غیر متمرکزتر است. این نوع برنامه، آن اجزای سازنده را تقسیم میکند و به فروشندگان شخص ثالث میسپرد تا هرکدام از آنها را اداره کنند.
زبان برنامهنویسی
در سرور، برای نوشتن توابع و منطق برنامه خود باید از یک زبان برنامه نویسی استفاده کنید. سپس سرور کد شما را کامپایل و نتیجه را به client منتقل میکند.
زبانهای رایج برنامهنویسی وب شامل: PHP, Python, Ruby, C#, Java است. همچنین نوعی از JavaScript با نام Node.js در برنامهنویسی سمت سرور وجود دارد که یک محیط Run-time است و کدهای جاوااسکریپت را اجرا میکند.
همچنین فریمورکهایی برای کار در سمت سرور مانند فرانتاند وجود دارند، که به توسعه سریع برنامه شما کمک میکنند.
C#
این زبان توسط مایکروسافت برای رقابت با زبان جاوا ساخته شده، به کمک فریمورک .Net میتوانید اپلیکیشنهای تحت وب بسازید.حتی میتوان از این زبان برای ایجاد برنامههای تلفن همراه و همچنین توسعه بازی استفاده کرد
Java
جاوا یکی از محبوب ترین زبانهای برنامه نویسی است و در برنامههای وب و همچنین برای ساخت برنامههای اندرویدی مورد استفاده قرار میگیرد.
Node.Js
Node.Js یک فناوری بسیار محبوب است، JavaScript از نظر فنی یک زبان سمت سرور نیست اما به کمک فریمورک Express.js میتوانیم کدهای خود را برروی سرور اجرا کنیم.
PHP
وردپرس با زبان PHP نوشته شده است، بنابراین اگر فکر میکنید با وبسایتهای تجاری کوچک کار میکنید، گزینه خوبی است زیرا بسیاری از آنها از وردپرس استفاده میکنند. همچنین میتوانید با فریمورک Laravel برنامههای وب بسازید.
Python
پایتون، زبان برنامهنویسی بسیار مشهوری است، بخصوص که این زبان در علوم داده (data science) و یادگیری ماشین (machine learning) کاربرد دارد. یکی دیگر از ویژگیهای بینظیر این زبان، سادگی نحوه (syntax) کدنویسی با آن، نسبت به دیگر زبانها است. همچنین در توسعهی وب دو فریمورک Django و Flask ب شما کمک میکنند.
Ruby
روبی هم مانند پایتون، نحوه کدنویسی جالبی دارد و برای توسعهی وب شما میتوانید از فریمورک Ruby on Rails استفاده کنید.
میتوان گفت هیچ زبان برتری وجود ندارد، شما براساس علایق خود نسبت به ویژگیهای هر زبان و درنظر گرفتن مشاغل موجود بایست یکی از آنها را انتخاب کنید.
دیتابیسها
همانطور که از نامش پیداست، دیتابیس جایی برای ذخیره اطلاعات کاربران وبسایت شماست. بیشتر دیتابیسها از زبان SQL یا “Structured Query Language” استفاده میکنند. اطلاعات در جداول (Tables) با ردیف (rows)های مختلف، مانند فایلهای excel ذخیره میشوند و به کمک دستورهای SQL میتوانید اطلاعات را ذخیره یا حذف کنید، همچنین میتوانید اطلاعات موجود را بخوانید و آنها را بروزرسانی کنید.
دیتابیسها را روی سرور اجرا میشوند واز Microsoft SQL Server روی سرورهای ویندوزی و MySQL برای لینوکس استفاده میکنند.
همچنین دیتابیسهای NoSQL هم وجود دارند که برخلاف مدل سنتی (SQL)، اطلاعات را درون فایلهای JSON ذخیره میکنند. یک نوع از این دیتابیسها MongoDB است که همراه با برنامههای React, Angular و Vue مورد استفاده قرار میگیرد.
چند مورد که در ادامه به شما کمک میکنند:
- سعی نکنید مهارتها را یکباره یاد بگیرید! زمانهای مشخصی تعیین کنید و در بازههای زمانی به یادگیری مهارتها بپردازید.
- در زمان یادگیری، تکنولوژیهای مختلف را بررسی کنید و یکی از آنها را نسبت به هدفتان انتخاب کنید.
- توسعهی وب یک سفر طولانی در بین تکنولوژیهای مختلف و فراگیری آنهاست، شاید شنیده باشید که بعضی افراد در ۳ ماه به هدف خود رسیده و اولین برنامه تحتوب خود را ساختهاند اما این زمان برای هر فرد متفاوت است.
- خواندن کتابها و دیدن آموزشهای مختلف، شما را تبدیل به یک متخصص نمیکند. یادگیری قدم اول است و درمراحل بعد باید از آموختههای خود برنامههایی را توسعه دهید تا آموزشهایتان تثبیت شود.
منبع: https://www.freecodecamp.org/news/beginners-roadmap-web-development
همچنین بخوانید: معرفی هاست رایگان جنگو