مخصوص اعضای ویژه 
قیمت این دوره: رایگانــ
- مدرس دوره : محمدمهدی صائبی ( رزومه )
- تعداد ویدیوها : 18 ویدیو
- مدت زمان دوره : 1:52:00
- سطح دوره : پیشرفته
- وضعیت دوره : در حال برگزاری
- تاریخ آخرین بروزرسانی : 1404/11/27
ترکیب React js ، Next js و Node js برای ساخت سایت
این دوره برای افرادی طراحی شده که React ، Next و Node را میشناسند اما نمیدانند چگونه این سه تکنولوژی را کنار هم قرار دهند و یک پروژه واقعی بسازند.
در این دوره از صفر تا اجرای کامل، یاد میگیرید چطور فرانتاند و بکاند را بهصورت اصولی ترکیب کنید، ساختار درست پروژه بسازید، امنیت را رعایت کنید و دادهها را استاندارد و رمزنگاریشده منتقل کنید.
ما باهم چند پروژه کاملاً واقعی و قابل ارائه در نمونهکار میزنیم؛ از جمله یک سایت مستنداتی حرفهای و یک صرافی کامل که کمتر کسی آموزش میدهد. سپس پروژههای ارزشمند دیگر را نیز باهم پیادهسازی خواهیم کرد.
اگر میخواهید React، Next و Node را در کنار هم واقعاً یاد بگیرید، این دوره بهترین نقطه شروع است.
سرفصل های دوره |
ساخت پروژه با next js |
بیس و ساختاری بندی درست پروژه |
استفاده از sass داخل پروژه |
استفاده از mui داخل پروژه |
استفاده از redux داخل پروژه |
استفاده از ماژول ها و کتابخانه های مورد نیاز در هر پروژه |
شروع کار با node js |
اتصال فرانت با بک اند |
رمزگزاری کردن دیتا ها در بک اند |
بازگشایی رمز دیتا ها در فرانت |
استفاده از next-cookie |
استفاده از next-seo |
استفاده از ngnix و pm2 برای نصب کردن پروژه روی سرور |
پیش نیاز های دوره :
- React js , next js, node js, redux, sass, mu
فهرستـــ ویدیوها
مدت زمان دوره 1:52:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
1
ملزومات قبل از شروع دوره
00:05:08
در این بخش با پیشنیازهای لازم برای شروع دوره آشنا میشویم تا بدون مشکل بتوانید مباحث آموزشی را دنبال کنید.
2
بررسی و راهاندازی پروژه Documentation
00:04:27
در این جلسه اولین پروژه دوره را بررسی میکنیم و با ساختار کلی پروژه داکیومنت آشنا میشویم.
3
شروع فرانتاند و پیادهسازی Sass روی پروژه
00:07:45
ر این قسمت وارد بخش فرانتاند میشویم و Sass را به پروژه اضافه میکنیم تا استایلدهی حرفهایتری داشته باشیم
4
اتصال و مدیریت سورس پروژه با Git و GitHub
00:03:39
در این قسمت پروژه را به GitHub متصل میکنیم تا سورس کد بهصورت اصولی مدیریت و نسخهبندی شود.
5
اضافه کردن mui به پروژه
00:07:37
در این قسمت یاد میگیریم چطور MUI رو برای پروژه با یک Theme اختصاصی اضافه کنیم و از آن استفاده کنیم.
6
تکمیل Theme اختصاصی MUI بر اساس پروژه
00:08:28
در این جلسه Theme اختصاصی MUI را بر اساس نیازهای پروژه تکمیل و آماده استفاده میکنیم.
7
طراحی Layout اصلی و پیادهسازی Navbar
00:07:09
در این بخش میرویم سراغ Layout اصلی سایت و ساختار کلی صفحات را پیادهسازی میکنیم. سپس با کمک هوش مصنوعی (AI) طراحی و پیادهسازی Navbar سایت را انجام میدهیم و آن را با نیازهای پروژه هماهنگ میکنیم
8
پیادهسازی Dialog عضویت در Navbar
00:06:11
در این بخش میرویم سراغ پیادهسازی Dialog (عضویت) و یک دیالوگ حرفهای و تمیز طراحی میکنیم. با استفاده از MUI و کمک هوش مصنوعی (AI) ساختار، استایل و تعاملات این دیالوگ را به بهترین شکل پیادهسازی میکنیم
9
شخصیسازی Dialog ثبتنام و تکمیل Navbar
00:07:39
در این قسمت استایلهای Dialog ثبتنام را متناسب با طراحی سایت شخصیسازی میکنیم و بخش Navbar را تکمیل میکنیم.
10
تقسیمبندی Layout با Grid
00:06:10
در این بخش با استفاده از Grid، Layout اصلی پروژه را بهصورت اصولی قسمتبندی میکنیم. با این کار فضای مشخص و ثابتی برای بخشهایی مثل Sidebar و صفحات اصلی تعریف میشود.
11
شروع Sidebar و ساخت Search Box
00:06:45
در این بخش با کمک هوش مصنوعی (AI) ساخت Sidebar پروژه را شروع میکنیم و اولین بخش آن یعنی Search Box را پیادهسازی میکنیم.
12
شخصیسازی ظاهر Search Box
00:03:42
در این قسمت استایلهای Search Box را شخصیسازی میکنیم تا مطابق طراحی سایت ظاهر شود.
13
پیادهسازی و سازماندهی آیتمهای Sidebar
00:05:40
در این بخش ابتدا آیتمهای Sidebar پروژه را بررسی میکنیم و قبل از شروع طراحی، متغیرها و ساختار دادهای آنها را آماده میکنیم. هدف این است که هر آیتم بهصورت حرفهای و مرتب تعریف شود و کدنویسی بهینه و قابل نگهداری انجام شود.
14
پیادهسازی ایتم های Sidebar با کمک AI
00:07:27
در این قسمت با استفاده از متغیرهای تعریفشده، آیتمهای Sidebar را با کمک AI طراحی و پیادهسازی میکنیم.
15
شخصیسازی ظاهر Sidebar
00:07:16
در این قسمت استایلهای Sidebar را شخصیسازی میکنیم تا ظاهر دلخواه پروژه را داشته باشد.
16
ایجاد Drawer برای Sidebar
00:07:08
در این قسمت Sidebar را ریسپانسیو میکنیم تا در صفحات کوچک به Drawer تبدیل شود و در دسکتاپ ثابت بماند. در کنار پیادهسازی Drawer، نکات مهم مربوط به رندر مجدد (Re-render) کامپوننتها را بررسی میکنیم تا عملکرد پروژه بهینه بماند و از رندرهای غیرضروری جلوگیری شود.
نظرات کاربران در رابطه با این دوره