آموزش ساخت و میزبانی وب سایت فول استک با React، Node.js و MongoDB

آموزش ساخت و میزبانی وب سایت فول استک با React، Node.js و MongoDB با عنوان اصلی React Creating and Hosting a Full-Stack Site یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم. در این آموزش یاد می گیرید چگونه با استفاده از React یک رابط کاربری بسازید، با Node.js و Express یک Back-End راه اندازی کنید و اطلاعات را در MongoDB ذخیره کنید. همچنین با نحوه اتصال Front-End و Back-End، پیاده سازی احراز هویت کاربران با Firebase Auth و در نهایت انتشار و میزبانی یک وب سایت فول استک آشنا خواهید شد.

وب سایت فول استک چیست و چگونه با React ساخته می شود؟

وب سایت فول استک به برنامه ای گفته می شود که هم بخش Front-End و هم بخش Back-End آن توسعه داده شده باشد. Front-End مسئول نمایش صفحات و تعامل با کاربران است، در حالی که Back-End پردازش درخواست ها، مدیریت اطلاعات و ارتباط با پایگاه داده را بر عهده دارد. برای ساخت چنین برنامه ای می توان از فناوری هایی مانند React، Node.js و MongoDB استفاده کرد که هر کدام بخش مشخصی از معماری برنامه را تشکیل می دهند.

React یکی از کتابخانه های محبوب JavaScript برای ساخت رابط کاربری است و امکان طراحی صفحات پویا و قابل استفاده مجدد را فراهم می کند. در این آموزش ابتدا با دلایل استفاده از React و راه اندازی یک پروژه آشنا می شوید. سپس نحوه ساخت صفحه اصلی، مدیریت مسیرها با React Router، استفاده از پارامترهای URL، ایجاد فهرست مقالات و طراحی صفحه 404 را یاد می گیرید. در ادامه نیز با اضافه کردن استایل، ظاهر برنامه را تکمیل می کنید.

ساخت Back-End با Node.js و Express

Node.js محیطی برای اجرای JavaScript در سمت سرور است و به توسعه دهندگان اجازه می دهد از این زبان برای پیاده سازی منطق Back-End نیز استفاده کنند. Express یک فریم ورک سبک برای Node.js است که ساخت سرور، تعریف مسیرها و مدیریت درخواست های HTTP را ساده تر می کند. ترکیب این دو فناوری به شما امکان می دهد سرویس هایی بسازید که درخواست های ارسال شده از رابط کاربری را دریافت و پردازش کنند.

در این بخش از آموزش با راه اندازی یک سرور Express و آزمایش آن با Postman آشنا می شوید. همچنین یاد می گیرید چگونه Route Parameters را مدیریت کنید و قابلیت هایی مانند ثبت رأی مثبت برای مقالات و افزودن دیدگاه کاربران را پیاده سازی کنید. ابزار Nodemon نیز معرفی می شود تا هنگام تغییر کدها، سرور به صورت خودکار به روزرسانی شود و نیازی به راه اندازی مجدد دستی آن نداشته باشید.

MongoDB چیست و چه کاربردی در توسعه وب دارد؟

MongoDB یک پایگاه داده NoSQL است که اطلاعات را در قالب اسناد مشابه JSON ذخیره می کند. برخلاف پایگاه داده های رابطه ای که معمولاً از جدول ها و سطرها استفاده می کنند، MongoDB ساختاری انعطاف پذیر برای نگهداری داده ها دارد. این ویژگی باعث می شود بتوان اطلاعات برنامه هایی مانند فهرست مقالات، تعداد رأی ها و دیدگاه کاربران را در قالب اسناد ذخیره و مدیریت کرد.

در این آموزش ابتدا با دلیل انتخاب MongoDB و نحوه دانلود و نصب آن آشنا می شوید. سپس یاد می گیرید چگونه MongoDB را به برنامه Express متصل کنید تا Back-End بتواند اطلاعات را در پایگاه داده ذخیره و بازیابی کند. در ادامه، Endpoint مربوط به ثبت رأی مثبت و همچنین Endpoint مدیریت دیدگاه ها را بازنویسی می کنید تا این قابلیت ها به جای استفاده از داده های موقت، با اطلاعات ذخیره شده در MongoDB کار کنند.

اتصال React به Node.js با Axios

برای ساخت یک برنامه فول استک، رابط کاربری و سرور باید بتوانند اطلاعات را بین یکدیگر مبادله کنند. این ارتباط معمولاً از طریق درخواست های HTTP و API انجام می شود. Axios یک کتابخانه JavaScript برای ارسال درخواست های HTTP است که استفاده از آن در برنامه های Front-End، برقراری ارتباط با سرویس های Back-End را ساده تر می کند. به کمک این روش، اطلاعات مورد نیاز صفحات از سرور دریافت می شوند و عملیات کاربران نیز به API ارسال می شود.

در این بخش یاد می گیرید چگونه Axios را به پروژه اضافه کنید و داده های مورد نیاز مسیرهای React Router را بارگذاری کنید. همچنین با Hook مربوط به useLoaderData و نحوه استفاده از پارامترهای مسیر در Loaderها آشنا می شوید. در ادامه، نمایش دیدگاه ها، ساخت دکمه ثبت رأی مثبت و طراحی فرم افزودن دیدگاه را پیاده سازی می کنید. به این ترتیب، قابلیت های Front-End به اطلاعات واقعی موجود در Back-End متصل می شوند.

احراز هویت کاربران با Firebase Auth

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

در این آموزش با ساخت یک پروژه Firebase و اضافه کردن Firebase Auth به React آشنا می شوید. سپس فرم ورود و صفحه ایجاد حساب کاربری را می سازید و رابط کاربری را متناسب با وضعیت احراز هویت کاربران تغییر می دهید. همچنین نحوه ایجاد یک Custom Hook برای مدیریت وضعیت Authentication را یاد می گیرید. در سمت سرور نیز Firebase Auth را به Node.js اضافه می کنید و با استفاده از Auth Tokenها، دسترسی به Endpointهای ثبت رأی مثبت و افزودن دیدگاه را محافظت می کنید.

میزبانی و انتشار وب سایت فول استک

پس از تکمیل قابلیت های یک برنامه، باید آن را برای استفاده در محیط واقعی آماده و روی یک سرویس میزبانی منتشر کنید. انتشار یک برنامه فول استک فقط به بارگذاری فایل های Front-End محدود نمی شود؛ سرور Back-End و پایگاه داده نیز باید در محیط مناسب اجرا شوند و امکان برقراری ارتباط میان آن ها وجود داشته باشد. همچنین تنظیمات محیط اجرا باید به شکلی مدیریت شوند که اطلاعات وابسته به محیط توسعه و انتشار از یکدیگر جدا باشند.

در بخش پایانی آموزش یاد می گیرید چگونه برنامه React را برای انتشار آماده کنید و برای MongoDB یک سرویس میزبانی راه اندازی کنید. سپس با تعریف Environment Variables و استفاده از آن ها در تنظیمات برنامه آشنا می شوید. در ادامه، فرآیند Deploy کردن یک برنامه فول استک را انجام می دهید و در پایان نیز نحوه خاموش کردن یک پروژه Google Cloud را بررسی می کنید. این مباحث دید کلی مناسبی از مراحل آماده سازی و انتشار یک برنامه واقعی در اختیار شما قرار می دهند.

این آموزش React و Node.js برای چه کسانی مناسب است؟

این آموزش برای توسعه دهندگانی مناسب است که می خواهند با استفاده از JavaScript یک برنامه وب کامل بسازند و با ارتباط میان بخش های مختلف یک پروژه فول استک آشنا شوند. اگر با مفاهیم اولیه توسعه وب آشنا هستید و قصد دارید React را در کنار Node.js، Express و MongoDB به کار بگیرید، مطالب این دوره می توانند مسیر مناسبی برای یادگیری این فناوری ها در قالب یک پروژه یکپارچه باشند.

همچنین توسعه دهندگان Front-End که می خواهند با ساختار Back-End و نحوه ارتباط آن با رابط کاربری آشنا شوند، می توانند از مباحث این آموزش استفاده کنند. افرادی که قصد دارند قابلیت هایی مانند مدیریت مقالات، ثبت دیدگاه، احراز هویت کاربران و انتشار یک برنامه وب را تجربه کنند نیز با دنبال کردن مباحث دوره، با مراحل اصلی ساخت یک وب سایت فول استک آشنا خواهند شد. این آموزش به زبان انگلیسی ارائه شده و دارای زیرنویس انگلیسی است.