آنچه در این مقاله میخوانید
نقشه راه مبتدیان برای شروع توسعهی وب
۲۰ تیر ۱۳۹۹
وبسایتها چیزی فراتر از ظاهرشان هستند. پشت هر صفحهای که کاربر میبیند، ساختاری فنی قرار دارد که وظیفه دارد دادهها را مدیریت کند، درخواستها را پردازش کند و تجربهای روان فراهم آورد. برای درک بهتر این ساختار، باید دو مفهوم کلیدی را بشناسیم: فرانتاند و بکاند. فرانتاند مسئول نمایش و تعامل با کاربر است، در حالی که بکاند تمام فرآیندهای پشتصحنه را مدیریت میکند.
اگر تازه با دنیای توسعه وب آشنا شدهاید، احتمالاً این سؤال برایتان پیش آمده که هرکدام از این بخشها دقیقاً چه نقشی دارند، چه زبانها و ابزارهایی برای آنها استفاده میشود و چطور میتوان وارد این مسیر شد. این متن، تصویری شفاف از مفهوم توسعه وب و تفاوتهای بین فرانتاند و بکاند ارائه میدهد و مسیر یادگیری را برای افراد تازهکار هموار میکند.
در ادامه خواهید خواند:
- توسعهی وب چیست؟
- فرانتاند مقدماتی
- ابزارها
- فرانتاند در ادامه
- فریمورکهای JavaScript
- مقدمات بکاند
- دیتابیسها
- جمع بندی

توسعهی وب چیست؟
قبل از ورود به برنامهنویسی واقعی، باید برخی اطلاعات کلی، در مورد توسعهی وب را بررسی کنیم: وبسایتها چگونه کار میکنند؟ تفاوت میان فرانتاند و بکاند در چیست؟ چگونه از ویرایشگر کد استفاده کنیم؟
وبسایتها چگونه کار میکنند؟
همه وبسایتها، اساسا فقط دستهای از فایلها هستند که در رایانهای به نام سرور ذخیره میشوند و آن سرور به اینترنت متصل است. شما میتوانید وبسایت را از طریق مرورگر (مانند: کروم، فایرفاکس یا سیری) در گوشی یا کامپیوتر بازکنید. در این شرایط مرورگر شما، کلاینت (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 میبینید.
معرفی ۱۰ تگ معنادار در HTML5
۱۰ تگ HTML5
CSS
CSS (Cascading Style Sheets)، به شما امکان میدهد که کدهای HTML را استایلدهی کنید، تا زیبا و فانتزی بنظر برسند. میتوانید رنگها و فونتهای دلخواه را اضافه کنید یا عناصر وبسایت خود را چیدمان کنید. شما حتی میتوانید با CSS انیمیشن و شکل ایجاد کنید.
اگر میخواهید در بخش فرانتاند متخصص شوید، یادگیری CSS بسیار ضروری است.
JavaScript
JavaScript یک زبان برنامه نویسی است که برای اجرا در مرورگر طراحی شده. با استفاده از JavaScript، میتوانید وبسایت خود را پویا کنید، به این معنی که به ورودیهای مختلف کاربر یا منابع دیگر پاسخ خواهد داد.
به عنوان مثال، میتوانید یک دکمه “بازگشت به بالا” بسازید که وقتی کاربر روی آن کلیک کرد، به بالای صفحه حرکت کند. یا میتوانید یک ویجت (widget) آب و هوا بسازید که هوای امروز را بر اساس موقعیت کاربر در جهان نمایش دهد.
به خصوص اگر میخواهید مهارتهای خود را بعداً با یک فریمورک JavaScript مانند React توسعه دهید، زمان بیشتری برروی یادگیری پایههای JavaScript بگذارید.
یادگیری این یک زبان واقعا سرگرم کننده است، و کارهای بسیاری وجود دارد که میتوانید با آن انجام دهید!
۱۰ کتابخانه برتر React Component در 2020
۱۰ کتابخانه React Component
از کجا میتوان 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 میشود!
با هاست پایتون لیارا، پروژههای خود را در کمترین زمان و بدون پیچیدگی راهاندازی کنید.
✅ مقیاسپذیری بالا ✅ دسترسی به منابع ✅ مدیریت ساده و بدون دردسر از طریق پنل کاربری لیارا
خرید و راهاندازی هاست Python
ابزارها
اکنون برخی دیگر از فناوریهای فرانتاند را بررسی میکنیم. همانطور که گفتیم، 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، در نوع تنظیم آن است که میتوانید در چند دقیقه به سادگی آن را آماده سازی کنید.
ورژنکنترل
ورژنکنترل ( Source Control – نیز نامیده میشود) سیستمی است که هر تغییر کدی را که در فایلهای پروژه خود ایجاد میکنید، دنبال میکند. حتی اگر اشتباه کنید میتوانید به تغییر قبلی برگردید. این تقریباً شبیه به صرفه جویی در امتیازات نامحدود برای پروژه شماست و بگذارید به شما بگویم، میتواند یک نجات دهنده بزرگ باشد.
محبوب ترین سیستم کنترل نسخه، سیستم منبع باز به نام Git است. با استفاده از Git، میتوانید تمام پروندههای خود و تاریخ تغییر آنها را در مجموعههایی به نام مخزن ذخیره کنید.
شاید شما نیز از GitHub شنیده باشید، که یک شرکت میزبانی آنلاین متعلق به مایکروسافت است که در آن میتوانید تمام مخازن Git خود را ذخیره کنید.
مقایسه Git و GitHub
Git و GitHub
فرانتاند در ادامه
هنگامی که مقدمات ابتدایی را به اتمام رساندید، مهارتهای میانی بیشتری وجود دارد که میخواهید یاد بگیرید. توصیه میکنم موارد زیر را بررسی کنید: 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 استفاده کنید.
با پلتفرم PHP لیارا، سایت خود را بدون دردسر، با سرعت بالا و امنیت تضمینشده اجرا کنید.
✅ استقرار آسان ✅ منابع اختصاصی ✅ بهینهسازی خودکار
خرید هاست PHP
کدام فریمورک را باید یادبگیرید؟
شاید برایتان سوال پیشآمده باشد، کدام فریمورک بهتر است؟
در حقیقت هر ۳ آنها عالی هستند. در توسعهی وب، هیچ پاسخ ۱۰۰% وجود ندارد و انتخاب برای هر شخص و موقعیتش متفاوت است.
شاید بر اساس نیاز شغلی یا بر اساس علایق خود یکی از آنها را انتخاب کنید. زیاد نگران انتخاب فریمورک نباشید و سعی کنید مفاهیم اصلی را درک کنید. همچنین شما با یادگرفتن یک فریمورک خیلی سریعتر بقیه را یاد میگیرید.
مقدمات بکاند
بکاند یا همان توسعهی وب در سمت سرور، از ۳ مولفه اصلی تشکیل شدهاست: سرور، زبان برنامهنویسی سمت سرور و در آخر، پایگاه داده
سرور
همانطور که در ابتدای مقاله اشاره کردیم، سرور رایانهای است که تمام فایلهای وبسایت، اطلاعات و سایر مؤلفهها، در آن ذخیره میشوند.
سرورهای مرسوم با سیستم عاملهایی مانند 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 میتوانیم کدهای خود را برروی سرور اجرا کنیم.
با پلتفرم Node.js لیارا، سایت خود را بدون دردسر، با سرعت بالا و امنیت تضمینشده اجرا کنید.
✅ استقرار آسان ✅ منابع اختصاصی ✅ بهینهسازی خودکار
خرید و راهاندازی هاست Node.js
PHP
وردپرس با زبان PHP نوشته شده است، بنابراین اگر فکر میکنید با وبسایتهای تجاری کوچک کار میکنید، گزینه خوبی است زیرا بسیاری از آنها از وردپرس استفاده میکنند. همچنین میتوانید با فریمورک Laravel برنامههای وب بسازید.
Python
پایتون، زبان برنامهنویسی بسیار مشهوری است، بخصوص که این زبان در علوم داده (data science) و یادگیری ماشین (machine learning) کاربرد دارد. یکی دیگر از ویژگیهای بینظیر این زبان، سادگی نحوه (syntax) کدنویسی با آن، نسبت به دیگر زبانها است. همچنین در توسعهی وب دو فریمورک Django و Flask ب شما کمک میکنند.
Ruby
روبی هم مانند پایتون، نحوه کدنویسی جالبی دارد و برای توسعهی وب شما میتوانید از فریمورک Ruby on Rails استفاده کنید.
میتوان گفت هیچ زبان برتری وجود ندارد، شما براساس علایق خود نسبت به ویژگیهای هر زبان و درنظر گرفتن مشاغل موجود بایست یکی از آنها را انتخاب کنید.
چگونه یک پایگاه داده ریموت را برای بهینهسازی عملکرد سایت با MySQL روی سرور مجازی اوبونتو راهاندازی کنیم؟
پایگاه داده ریموت MySQL
دیتابیسها
همانطور که از نامش پیداست، دیتابیس جایی برای ذخیره اطلاعات کاربران وبسایت شماست. بیشتر دیتابیسها از زبان SQL یا “Structured Query Language” استفاده میکنند. اطلاعات در جداول (Tables) با ردیف (rows)های مختلف، مانند فایلهای excel ذخیره میشوند و به کمک دستورهای SQL میتوانید اطلاعات را ذخیره یا حذف کنید، همچنین میتوانید اطلاعات موجود را بخوانید و آنها را بروزرسانی کنید.
دیتابیسها را روی سرور اجرا میشوند واز Microsoft SQL Server روی سرورهای ویندوزی و MySQL برای لینوکس استفاده میکنند.
همچنین دیتابیسهای NoSQL هم وجود دارند که برخلاف مدل سنتی (SQL)، اطلاعات را درون فایلهای JSON ذخیره میکنند. یک نوع از این دیتابیسها MongoDB است که همراه با برنامههای React, Angular و Vue مورد استفاده قرار میگیرد.
با پایگاه داده MySQL لیارا، در کمترین زمان، یک دیتابیس پرسرعت و امن راهاندازی کنید.
✅ پشتیبانگیری خودکار ✅ امنیت بالا ✅ عملکرد بهینه
خرید و راهاندازی هاست MySQL
جمع بندی
فرانتاند و بکاند هر دو نقش حیاتی در توسعهی وب ایفا میکنند و هیچکدام بر دیگری برتری ندارد؛ بلکه مکمل یکدیگرند. شناخت تفاوتهای این دو بخش، اولین قدم برای ورود حرفهای به دنیای برنامهنویسی وب است. اگر به طراحی و تجربهی کاربر علاقهمندید، فرانتاند مسیر مناسبی برای شماست. اما اگر به منطق، پایگاهداده و پردازش اطلاعات گرایش دارید، بکاند میتواند انتخاب بهتری باشد. مهمتر از همه این است که با علاقه شروع کنید، مسیر یادگیری خود را بهخوبی بچینید و بهمرور با تمرین، دانش و مهارت خود را در این زمینه گسترش دهید.
منبع: https://www.freecodecamp.org/news/beginners-roadmap-web-development