قیمت این دوره: 499,000 تومان
  • مدرس دوره : سید مهدی صادق زاده
  • تعداد ویدیوها : 65 ویدیو
  • مدت زمان دوره : 31:11:00
  • سطح دوره : پیشرفته
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1400/07/17
ثبتـــ نام در این دوره ثبت نام در دوره
دوره پیشرفته Next.js (پروژه فول استک سایت فیلم و پنل ادمین)

دوره پیشرفته Next.js (پروژه فول استک سایت فیلم و پنل ادمین)

سلام به شما تاپلرنی های عزیز ، بالاخره دوره پیشرفته Nextjs هم از راه رسید.

توی این دوره که میشه به نحوی گفت دوره فول استک هست! قرار هست بیشتر با مباحث پیشرفته تر Nextjs مثل API Route و Custom Server و Pre-Rendering و ارتباط با بک اند و بعضی کانفیگ ها و ... آشنا بشیم.

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

برخی از سرفصل‌های دوره عبارت است از :

ساخت Layout سایت با استفاده از antd,  reactstrap

ساخت اسلایدر های سایت با استفاده از swiper slider  

ساخت پلیر با استفاده از react player

ایجاد بک اند سایت و ساخت دیتابیس مونگو دی بی

آشنایی با mongoose

و ...

پیش نیاز های دوره هم آشنایی با Reactjs و دوره مقدماتی Nextjs است.

خب بریم که باهم دوره رو شروع کنیم..




فهرستـــ ویدیوها

مدت زمان دوره 31:11:00
  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

1
  • معرفی دوره

00:12:11

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

2
  • ایجاد Layout اولیه و شروع کار استایل دهی

00:28:00

در این قسمت پروژه تاپ فیلم رو استارت می زنیم و سعی می کنیم که Layout اولیه سایت رو باهم پیاده سازی کنیم.

3
  • ادامه ساخت Layout به همراه تکمیل اسلایدر

00:28:00

در این قسمت با همدیگر روی استایل دهی پروژه کارمون رو ادامه میدیم و درواقع به Navbar و Slider در صفحه می پردازیم.

4
  • ایجاد اسلایدر فیلم ها و تنظیم تب فعال در منو سایت

00:31:00

در این بخش در ادامه قسمت های استایل دهی به سراغ ساخت اسلایدر فیلم میریم و بعد از ساخت اسلایدر فیلم ها با هم می بینیم که به چه صورتی میشه صفحه فعال در سایت رو در داخل Navbar به صورت فعال نمایش داد.

5
  • ساخت صفحه اختصاصی فیلم ها

00:32:00

توی این قسمت سعی می کنیم که با همدیگه صفحه اختصاصی هر فیلم رو پیاده سازی کنیم. این قسمت هم با react-bootstrap , antd کار خواهیم کرد.

6
  • ساخت قسمت نظرات و صفحه پلیر فیلم

00:38:00

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

7
  • ساخت پلیر اختصاصی (قسمت 1)

00:33:00

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

8
  • ساخت پلیر اختصاصی (قسمت 2)

00:43:00

این جلسه هم همچنان به اضافه کردن امکانات و قابلیت های پلیرمون می پردازیم.

9
  • ورود به قسمت ورود (ساخت صفحه لاگین)

00:33:00

در این جلسه بعد از ساخت پلیر می خواهیم طی چند جلسه وارد ساخت صفحه ورود و ثبت نام و مباحث احراز هویت بشیم.

10
  • ورود به قسمت ثبت نام (صفحه رجیستر)

00:14:00

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

11
  • ساخت صفحه لیست فیلم ها

00:28:00

در این قسمت بعد از دو قسمت که ظاهر صفحه ثبت نام و ورود رو پیاده کردیم به سراغ ظاهر صفحه لیست فیلم ها میریم و روی این قسمت کار کنیم.

12
  • اصلاح و کمی تمیزکاری در ظاهر سایت (قسمت 1)

00:27:00

توی این قسمت باهمدیگه میایم و یکم اصلاحات در ظاهر سایت و اجزای سایت اعمال می کنیم.

13
  • اصلاح و کمی تمیزکاری در ظاهر سایت (قسمت 2)

00:36:00

توی این قسمت در ادامه جلسه قبل باهمدیگه میایم و یکم اصلاحات در ظاهر سایت و اجزای سایت اعمال می کنیم.

14
  • شروع کار با جناب API Routes !

00:24:00

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

15
  • آشنایی با SWR و قابلیت های باحالش!

00:12:00

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

16
  • اتصال NextJS به ديتابيس MongoDB !

00:25:00

در اين قسمت بدون هيچ گونه ماجراي عجيب و غريبي سعي مي كنيم كه اپ نکست مون رو به مونگو دی بی متصل کنیم! این قسمت رو برای همه دوستان به صورت رایگان قرار می دهم تا بتونن استفاده کنن :)

17
  • نصب و اتصال Mongoose به MongoDB

00:08:00

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

18
  • Server.js تمام آن چیزی که برای انتشار اپ و ... نیاز دارید!

00:29:00

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

19
  • ایجاد ساختار اطلاعات کاربران در دیتابیس

00:31:00

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

20
  • پیاده سازی احراز هویت (بخش ثبت نام 1)

00:25:00

در این قسمت پس از اتصال به بک اند و دیتابیس و ساخت ساختار کاربران می خواهیم با استفاده از API Routes بیایم و api مربوط به ساخت کاربران رو ایجاد کنیم و اولین کاربر مون رو ثبت نام کنیم.

21
  • پیاده سازی احراز هویت (بخش ثبت نام 2)

00:26:00

در این قسمت ادامه مباحث جلسه قبل رو شاهد خواهیم بود.

22
  • احراز هویت کاربران (ساخت API)

00:30:00

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

23
  • احراز هویت کاربران (ساخت توکن JWT و کوکی)

00:38:00

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

24
  • احراز هویت کاربران (ساخت API کوکی و کمی تغییرات در ظاهر صفحه)

00:33:00

توی این جلسه بحث کوکی رو تکمیل می کنیم و کمی هم تغییرات در ظاهر صفحه مون انجام میدیم.

25
  • احراز هویت کاربران (ساخت Loader صفحه)

00:20:00

در این قسمت در ادامه مباحث جلسات قبل میایم و باهمدیگه یاد میگیریم که به چه صورت باید یک لودر برای اپ مون پیاده سازی کنیم.

26
  • احراز هویت کاربران (قرار دادن آواتار کاربر و اصلاح موارد باقی مانده)

00:31:00

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

27
  • ساخت صفحه شخصی کاربران

00:27:00

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

28
  • قابلیت تغییر اطلاعات کاربری در صفحه پروفایل

00:41:00

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

29
  • ساخت UI مطلوب صفحه پروفایل

00:31:00

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

30
  • تکمیل کامپوننت تغییر اطلاعات کاربری

00:45:00

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

31
  • نمایش اطلاعات کاربران به کمک دیتابیس

00:17:00

در این قسمت اطلاعات کاربران رو از دیتابیس دریافت و در فیلد های مورد نظر قرار میدیم و عملا صفحه پروفایل رو تکمیل می کنیم.

32
  • شروع پروژه داشبورد !

00:30:00

در این قسمت وارد پروژه دوم مون که تلفیق شده با پروژه اول مون هست میشیم و میایم و Layout صفحه داشبورد رو ایجاد می کنیم.

33
  • ساخت صفحات خانه و کاربران در داشبورد

00:39:00

توی این قسمت قرار هست که بیایم و صفحات خانه (نمایش آمار کلی سایت) و کنترل کاربران (تغییر و نمایش کاربران) رو پیاده سازی کنیم.

34
  • دریافت اطلاعات کاربران و آمار سایت از API داشبورد

00:28:00

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

35
  • صفحه بندی (pagination) لیست کاربران و سر و کله زدن با ارور ها!

00:40:00

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

36
  • مودال تغییر اطلاعات کاربران

00:32:00

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

37
  • ساخت API تغییر اطلاعات کاربران

00:17:00

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

38
  • ساخت صفحه آپلود عکس و فیلم و ...

00:26:00

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

39
  • تکمیل صفحه آپلود و اصلاح ظاهر فرم

00:24:00

در این قسمت در ادامه جلسه قبلی به تکمیل صفحه آپلود مون و اصلاح یسری موارد در UI فرم هامون می پردازیم.

40
  • آشنایی با Express مقدمه کار با Multer

00:26:00

در این قسمت کمی با اکسپرس آشنا میشیم و توضیحات مربوطه داده میشه.

41
  • پیاده سازی Multer و آپلود اولین فایل

00:36:00

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

42
  • ایجاد ساختار مدیا و ذخیره فایل در دیتابیس

00:31:00

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

43
  • ایجاد محدودیت در فرمت و ذخیره فایل ها

00:20:00

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

44
  • ایجاد ساختار فیلم ، رای و کامنت در دیتابیس

00:24:00

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

45
  • ساخت و ذخیره اولین فیلم در دیتابیس

00:28:00

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

46
  • آشنایی و استفاده از Population در mongoose

00:24:00

در این قسمت با یکی از مهم ترین کوئری های دیتابیس مون یعنی اجتماع سازی (population) در mongoose آشنا میشیم و میخواهیم ازش استفاده کنیم. فایل پروژه این قسمت تحت عنوان یک قسمت جداگانه پس از این قسمت قرار می گیرد!

47
  • فایل پروژه قسمت استفاده از Population

00:00:00

این فایل پروژه تا انتهای قسمت قبل است. توجه : تمامی قسمت های نقدی شامل فایل پروژه هستند!

48
  • ایجاد لیست فیلم ها در داشبورد + بررسی pre در mongoose

00:30:00

توی این قسمت چندین کار قرار هست انجام بشه که از ساخت صفحه لیست فیلم ها و مودال تغییر اطلاعات فیلم هست تا آشنایی با متود (یا بهتر هست بگم چرخه زمانی) pre در mongoose

49
  • پیاده سازی API تغییر اطلاعات فیلم (قسمت 1)

00:33:00

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

50
  • پیاده سازی API تغییر اطلاعات فیلم (قسمت 2)

00:35:00

این قسمت هم مشابه قسمت قبل به ساخت api تغییر اطلاعات می پردازیم.

51
  • ایجاد قابلیت حذف فیلم در داشبورد

00:38:00

در این قسمت سعی می کنیم که قابلیت حذف فیلم رو هم در لیست فیلم ها قرار بدیم.

52
  • دریافت اطلاعات اسلایدر فیلم ها

00:35:00

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

53
  • ساخت فوتر + ایجاد ساختار بنر و اسلایدر در دیتابیس

00:24:00

در این قسمت میایم و در کنار ساخت فوتر سایت مون، در دیتابیس هم ساختار اسلایدر و بنر رو ایجاد می کنیم تا بتونیم راحت تر استفاده شون کنیم.

54
  • کار کردن روی اسلایدر و ساخت API بنر

00:26:00

در این قسمت روی اسلایدر کار می کنیم و به اصلاحات می پردازیم و همینطور میریم سراغ API ساخت بنر.

55
  • ساخت کامپوننت ایجاد بنر و شروع Aggregation !

00:32:00

در این قسمت بسیار مهم می پردازیم به اجماع سازی یا Aggregation در مونگو دی بی که یکی از مهم ترین قسمت های مونگو دی بی هست!

56
  • پیاده سازی و ادامه Aggregation

00:30:00

توی این جلسه در ادامه جلسه قبل می پردازیم به Aggregation و بطور مفصل باهاش آشنا میشیم و توضیحاتش داده میشه. این جلسه رایگان هست :)

57
  • تکمیل کامپوننت های سرچ و ایجاد بنر

00:24:00

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

58
  • ساخت لیست بنر ها و API سمت ادمین

00:25:00

در این قسمت میایم و لیست بنر ها رو به همراه API اش شروع می کنیم به پیاده سازی کردن.

59
  • ساخت مودال تغییر بنر و رفع مشکلات پیش رو مون

00:41:00

توی این جلسه نسبتا طولانی :) با مشکلات دست و پنجه نرم می کنیم و همینطورمودال تغییر اطلاعات بنر رو درستش می کنیم.

60
  • ساخت API حذف و تغییر بنر

00:26:00

در این قسمت میایم و برای لیست بنر های داخل پنل ادمین مون قابلیت تغییر و حذف بنر رو با API سمت سرور مون پیاده سازی می کنیم.

61
  • شروع کار با دسته بندی فیلم ها در سمت دیتابیس و سرور

00:40:00

در این قسمت وارد صفحه فیلم ها میشیم و البته اول از همه میریم سراغ پیاده سازی Categories در مدل دیتابیس و کنترلر مون.

62
  • پیاده سازی دسته بندی در صفحه فیلم ها

00:36:00

توی این قسمت در ادامه جلسه قبل میایم و دسته بندی فیلم ها رو بر اساس ژانر هاشون تکمیل می کنیم و صفحه فیلم هامون رو کامل می کنیم.

63
  • اصلاح اطلاعات فیلم و شروع کار با کامنت

00:29:00

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

64
  • ساخت API کامنت و نوشتن اولین کامنت!

00:41:00

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

65
  • تکمیل قسمت نظرات و خداحافظی به سبک شروعی دوباره!

00:25:00

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


نظرات کاربران در رابطه با این دوره

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