دوره آموزشی
دوبله زبان فارسی
اپلیکیشن چت بلادرنگ با Next.js 14 و Socket IO
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- پیادهسازی احراز هویت CLERK برای ثبتنام و ورود
- کاربران وارد شده میتوانند لیست تمام کاربرانی که در اپلیکیشن ثبتنام کردهاند را ببینند.
- اگر کاربری بخواهد با کاربر دیگری چت کند، باید آن کاربر را به لیست چتهای خود اضافه کند.
- کاربران میتوانند چتهای یکبهیک و همچنین چتهای گروهی ایجاد کنند.
- کاربران قادر به بروزرسانی تصویر پروفایل خود، ایجاد گروهها و ویرایش گروهها هستند.
- کاربران میتوانند تعداد پیامهای خوانده نشده را در لیست چتها برای هر چت مشاهده کنند.
- ادغام Socket IO بهمنظور بلادرنگ تمام قابلیتهای چت
- پس از ادغام Socket IO، کاربران قادر به ارسال و دریافت پیامها به صورت بلادرنگ خواهند بود.
- کاربران گیرنده میتوانند انیمیشن تایپ را در صورتی که کاربری در آن چت در حال تایپ باشد، ببینند.
- قابلیت رسید خواندن برای پیامها
پیشنیازهای دوره
- مبانی React
- مبانی Next.js
توضیحات دوره
سلام، به دوره اپلیکیشن چت بلادرنگ با Next.js 14 خوش آمدید.
مطمئناً، مدرس خوشحال است که ویژگیهای موجود در دوره اپلیکیشن چت بلادرنگ با Next.js 14 را توضیح دهد.
پشته فناوری
- یادگیری آخرین ویژگیهای Next JS 14 مانند App Router Server Actions ،Middlewares و غیره
- پیادهسازی احراز هویت Clerk
- کار با SOCKET IO برای انجام تمام تسک های بلادرنگ
- استقرار اپلیکیشن Next JS در Vercel و اپلیکیشن Node در Render
- کار با ترکیبی از کامپوننتهای کلاینت و سرور
- استفاده از Tailwind CSS برای بازنویسی استایلهای پیشفرض Ant Design و ساخت کامپوننتهای سفارشی
Next.js یک فریمورک متنباز برای توسعهدهندگان وب است که توسط توسعهدهندگان Kotlin JS ایجاد شده است. از آن برای ایجاد اپلیکیشنهای React رندر شده در سمت سرور استفاده میشود و میتواند با زبانهای مدرن جاوا اسکریپت مانند TypeScript ،GraphQL و کامپوننتهای React استفاده شود.
Next.js به توسعهدهندگان اجازه میدهد تا اپلیکیشنهای وب را با استانداردهای بالا و با ویژگیهای از پیش ساختهشده مانند مسیریابی، مسیریابی مبتنی بر فایل، وبسرور توسعه، جایگزینی ماژول داغ، اکسپورت های استاتیک و تقسیم کد ایجاد کنند.
Next.js برای ساخت سایتهای استاتیک و وب اپلیکیشنهای پیشرونده (PWA) که دوستدار SEO، در دسترس و سریع هستند، به خوبی کار میکند.
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان Fullstack
- توسعهدهندگان Next.js
اپلیکیشن چت بلادرنگ با Next.js 14 و Socket IO
-
راه اندازی اپلیکیشن Next 06:58
-
ساختار پوشههای پروژه 04:40
-
نصب Ant-D 05:16
-
بازنویسی کامپوننت های Ant-D 10:31
-
چرا Clerk؟ 02:35
-
معرفی Clerk 04:40
-
کامپوننت های احراز هویت 06:20
-
صفحات سفارشی ورود و ثبتنام 04:18
-
قابلیتهای ورود و ثبتنام 06:04
-
کاربر فعلی 07:21
-
میانافزارهای احراز هویت 04:56
-
استایل صفحات ورود و ثبتنام 08:39
-
اتصال به Mongo 05:08
-
مدل کاربر 06:00
-
ذخیره کاربر فعلی 10:33
-
ساختار طرحبندی 10:42
-
استایلدهی طرحبندی 07:26
-
اطلاعات کاربر فعلی 18:42
-
طرحبندی شرطی 03:11
-
راهاندازی Redux Toolkit 08:39
-
ذخیره کاربر فعلی در Redux 04:56
-
یکپارچهسازی Firebase 09:18
-
رابط کاربری آپلود تصویر پروفایل 09:35
-
منطق آپلود تصویر پروفایل 18:06
-
بحث معماری 14:39
-
مدلها 09:24
-
رابطها 04:10
-
طرحبندی چت 08:00
-
سرصفحه لیست چت 08:27
-
ساخت رابط کاربری چت 10:40
-
ایجاد عملیات سرور چت 11:27
-
ایجاد شرایط چت 12:01
-
نمایش لیست چتها 19:20
-
انتخاب چت 12:14
-
کارت گیرنده 15:24
-
رابط کاربری پیام جدید 10:34
-
ارسال پیام 13:58
-
نمایش پیامها 24:52
-
فرمت تاریخ و زمان 06:14
-
بروزرسانی چت بر اساس آخرین پیام 10:47
-
رفع مشکل اسکرول پیامها 03:26
-
بروزرسانی پیامهای خواندهنشده 11:50
-
پاکسازی پیامهای خواندهنشده 10:25
-
ساختار پوشههای گروهها 09:40
-
ساخت رابط کاربری گروه 15:36
-
ذخیره گروه 11:27
-
اطلاعات گیرنده یا گروه 17:35
-
ویرایش گروه - قسمت 1 06:52
-
ویرایش گروه - قسمت 2 15:54
-
رفع باگ لیست چت 01:53
-
مشکلات بارگذاری 13:55
-
معماری Socket IO 10:47
-
راه اندازی Node 04:33
-
راه اندازی Socket (سمت سرور) 04:42
-
راه اندازی Socket (سمت کلاینت) 08:48
-
ارتباط کلاینت و سرور در Socket 10:45
-
قابلیت خروج از حساب 08:20
-
نمایش کاربران آنلاین 11:26
-
ارسال پیام بلادرنگ - قسمت 1 12:01
-
ارسال پیام بلادرنگ - قسمت 2 08:50
-
اسکرول داینامیک برای پیامها 07:20
-
بروزرسانی چت بر اساس پیام جدید - قسمت 1 16:31
-
بروزرسانی چت بر اساس پیام جدید - قسمت 2 11:06
-
انیمیشن تایپ کردن - قسمت 1 12:20
-
انیمیشن تایپ کردن - قسمت 2 02:57
-
پاکسازی شمارش پیامهای خواندهنشده 11:52
-
رفع باگ مرتبسازی لیست چتها 06:41
-
انیمیشن تایپ کاربران گروه 07:10
-
ارسال ایموجی - قسمت 1 14:46
-
ارسال ایموجی - قسمت 2 02:41
-
ارسال تصویر - قسمت 1 11:01
-
ارسال تصویر - قسمت 2 12:58
-
پیادهسازی دریافت بازخورد خوانده شدن پیامها - قسمت 1 12:32
-
پیادهسازی دریافت بازخورد خوانده شدن پیامها - قسمت 2 14:12
-
استقرار اپلیکیشن Node 07:37
-
استقرار اپلیکیشن Next JS 10:22
-
رفع باگ پس از استقرار 03:20
مشخصات آموزش
اپلیکیشن چت بلادرنگ با Next.js 14 و Socket IO
- تاریخ به روز رسانی: 1404/09/07
- سطح دوره:مقدماتی
- تعداد درس:77
- مدت زمان :12:20:56
- حجم :6.77GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
The Great Courses
2,495,000
499,000 تومان
- زمان: 06:19:16
- تعداد درس: 40
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
6,787,000
1,357,400 تومان
- زمان: 17:11:52
- تعداد درس: 113
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
2,067,000
413,400 تومان
- زمان: 05:14:59
- تعداد درس: 30
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
8,360,500
1,672,100 تومان
- زمان: 21:10:47
- تعداد درس: 202
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
5,720,500
1,144,100 تومان
- زمان: 14:29:26
- تعداد درس: 36
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,206,500
841,300 تومان
- زمان: 10:39:08
- تعداد درس: 64
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,391,000
878,200 تومان
- زمان: 11:07:45
- تعداد درس: 63
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
7,261,000
1,452,200 تومان
- زمان: 18:23:18
- تعداد درس: 103
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:57:00
- تعداد درس: 20
-
سطح دوره:
-
زبان: دوبله فارسی