قیمت این دوره: 499,000 149,700 تومان
  • مدرس دوره : سیدمهدی صادق زاده
  • تعداد ویدیوها : 50 ویدیو
  • مدت زمان دوره : 23:19:00
  • سطح دوره : پیشرفته
  • وضعیت دوره : در حال برگزاری
  • تاریخ آخرین بروزرسانی : 1400/06/27
ثبتـــ نام در این دوره
دوره پیشرفته Next.js (پروژه فول استک سایت فیلم و پنل ادمین)

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

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

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

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

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

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

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

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

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

آشنایی با mongoose

و ...

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

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

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


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

مدت زمان دوره 23:19:00
  • در صورتیکه ویدئو نمایش داده نشد آن را دانلود کنید و با KmPlayer مشاهده کنید.

  • لطفا در صورت اقدام به دانلود تا انتها فرایند دانلود ، این صفحه را باز نگاه دارید.

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 تغییر اطلاعات می پردازیم.

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

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