ساخت یک وب اپلیکیشن وبلاگ خبری با Next.js و Express

معرفی
سرفصل

✅ سرفصل و جزئیات آموزش

آنچه یاد خواهید گرفت:

ساخت یک وب اپلیکیشن فرانت‌اند با Next.js و React Bootstrap
ساخت یک وب اپلیکیشن API بک‌اند با Node.js که با استفاده از Express داده‌ را در قالب JSON ارائه می‌دهد.
مشارکت در توسعه end-to-end و فول‌استک یک وب اپلیکیشن
استفاده از Sequelize به عنوان ORM و PostgreSQL برای پایگاه داده

پیش‌نیازهای دوره

دانش HTML ،CSS ،JavaScript ،React

توضیحات دوره

در این دوره، مدرس به شما یاد می‌دهد که یک وب اپلیکیشن بسازید که می‌تواند به عنوان یک وب‌سایت خبری یا پورتال وبلاگ استفاده شود. این یک دوره بسیار کاربردی است و توسعه end-to-end، از فرانت‌اند تا بک‌اند، شامل پایگاه داده و استفاده از فضای ابری را پوشش می‌دهد.

برای فرانت‌اند از Next.js، فریمورک React، استفاده می‌شود. شما با HTML ،CSS ،Sass ،JavaScript ،Bootstrap و Markdown کار خواهید کرد.

برای بک‌اند از Express، فریمورک وب سمت سرور، استفاده می‌شود. شما با Node.js (جاوا اسکریپت سمت سرور) کار خواهید کرد.

برای پایگاه داده از PostgreSQL استفاده می‌شود. شما با Sequelize برای نگاشت شیء-رابطه‌ای (ORM) کار خواهید کرد.

این دوره، ساخت فرانت‌اند برای نمایش لیست مقالات، مشاهده یک مقاله و ویرایش یک مقاله را پوشش می‌دهد. همچنین به شما آموزش می‌دهد که از Markdown به عنوان فرمت نوشتن مقالات استفاده کنید. از React Bootstrap (شامل آیکون‌ها) به عنوان بلوک‌های سازنده رابط کاربری (UI) استفاده می‌شود. شما در مورد ارسال فرم برای داده‌ مقاله و همچنین برای آپلود تصاویر یاد خواهید گرفت.

این دوره همچنین ساخت یک API بک‌اند را که داده‌ را در فرمت JSON ارائه می‌دهد، پوشش می‌دهد. این دوره، اتصال API شما به یک پایگاه داده برای ذخیره اطلاعات را پوشش می‌دهد. شما یاد می‌گیرید که چگونه برای Sequelize ORM مایگریشن‌ها و مدل‌ها ایجاد کنید، که به عنوان واسطه‌ای بین API و پایگاه داده عمل می‌کند.

این دوره توجه ویژه‌ای به مدیریت آپلود و ذخیره‌سازی تصاویر در بک‌اند و یکپارچه‌سازی با یک راه‌حل ابری خارجی دارد. به طور خاص، از سرویس ذخیره‌سازی ساده آمازون (AWS S3) برای ذخیره فایل‌های تصویری در فضای ابری استفاده می‌شود. این تصاویر به عنوان thumbnail برای مقاله و برای نمایش در بدنه اصلی مقاله استفاده می‌شوند.

پس از گذراندن این دوره، شما تجربه زیادی در زمینه توسعه وب فول‌استک و ساخت یک وب اپلیکیشن به صورت end to end کسب خواهید کرد. شما می‌توانید بر اساس دانش و تجربه این دوره، اپلیکیشن را گسترش داده و آن را با نیازها و پروژه‌های خودتان منطبق سازید.

این دوره برای چه کسانی مناسب است؟

توسعه‌دهندگان وب که به دنبال ساخت یک محصول کامل و end to end با استفاده از توسعه فول‌استک هستند.

ساخت یک وب اپلیکیشن وبلاگ خبری با Next.js و Express

فصل 1: خوش آمدگویی

بررسی دوره 02:03

فصل 2: نصب Node.js و NPM با NVM

نصب Node.js و NPM با NVM برای ویندوز 05:38
نصب Node.js و NPM با NVM برای اوبونتو لینوکس 04:21

فصل 3: شروع کار با فرانت‌اند

ساخت پروژه Next.js برای وب اپلیکیشن کلاینت در فرانت‌اند 08:49
مسیر‌یابی سیستم فایل برای تعریف صفحات مقالات و مقاله خاص 09:00
طراحی ساختار، React Bootstrap، و استفاده از کامپوننت Card 28:52
انتقال داده‌ هاردکد شده از JSX به یک متغیر و ساخت داینامیک کامپوننت‌های Card 13:07
استفاده از getStaticProps برای مقاله خاص و یادگیری در مورد getStaticPaths 20:02
دسترسی به Context، پیدا کردن مقاله بر اساس slug و نگاشت مسیرهای استاتیک 10:00
کامپوننت Link در Next.js و Breadcrumb در React Bootstrap 08:51
چگونگی ریدایرکت کردن صفحات با استفاده از فایل کانفیگ Next 04:39
بهبود استایل فاصله‌گذاری صفحه با استفاده از Container در React Bootstrap 08:06
وسط‌چین کردن ستون در یک ردیف از React Bootstrap 12:07
هِدر وب‌سایت، رفع باگ ریدایرکت و استایل مشترک برای محتوای اصلی 16:45

فصل 4: ورود به دنیای بک‌اند

ایجاد یک اپلیکیشن Express برای API از نوع JSON در بک‌اند 23:40
پیاده‌سازی Endpoints برای دریافت (GET) مقالات و یک مقاله خاص 14:27
بروزرسانی فرانت‌اند برای دریافت (fetch) مقالات از JSON API 10:47
بروزرسانی فرانت‌اند برای دریافت مقاله خاص از سمت سرور 07:16
ساخت صفحه سفارشی 404 Not Found در Next.js 04:08
مدیریت خطاها پس از دریافت لیست مقالات 14:55
مدیریت خطاها پس از دریافت داده در صفحه مقاله 13:36
گوش دادن به رویدادهای Router برای بهبود تجربه کاربری در گذارهای کند 20:53
تکمیل تجربه کاربری نمایش اسپینر هنگام بارگذاری برای گذارهای سمت کلاینت 11:48
لغو اشتراک از رویدادهای Router در هوک useEffect برای اپلیکیشن 11:48

فصل 5: کار با پایگاه داده PostgreSQL

نصب PostgreSQL ،pgAdmin و psql روی ویندوز 07:52
فرمان های PostgreSQL در CMD ویندوز (شامل افزودن به PATH) 02:45
نصب PostgreSQL، pgAdmin، psql بر روی اوبونتو لینوکس 09:13
ایجاد یک Role (کاربر) در PostgreSQL برای اپلیکیشن 07:52
ایجاد یک پایگاه داده PostgreSQL برای اپلیکیشن 05:10
ساخت جدول مقالات در PostgreSQL 15:07
درج رکوردهای مقاله جدید در جدول و مشاهده داده‌ 09:37

فصل 6: شروع کار با ORM Sequelize

معرفی مختصر Sequelize ORM و دستورات SQL معادل آن 07:51
نصب Sequelize، درایور Postgres، و CLI و اجرای دستور init 05:52
بروزرسانی فایل پیکربندی برای اتصال به پایگاه داده 05:49
استفاده از dotenv برای بارگذاری متغیرهای محیطی 09:24
ایجاد جدول مقالات با استفاده از یک Migration در Sequelize 12:31
دستکاری Migration تولید شده برای تطابق با نیازهای ما 09:53
تغییر نام SequelizeMeta به sequelize_meta 04:16
تولید یک فایل Seed برای درج گروهی مقالات 12:18
دستکاری مدل مقاله برای رفع مشکل نگاشت با پایگاه داده 13:41
پیاده‌سازی مجدد Endpoint دریافت مقالات با استفاده از findAll 05:37
پیاده‌سازی مجدد Endpoint مقاله خاص با استفاده از findOne در مدل Article 08:07
کنترل‌کننده سفارشی 404 Not Found برای Express API 04:14
کنترل‌کننده خطای عمومی و سفارشی برای Express API 13:16
جداسازی بلوک Try-Catch در یک تابع دربرگیرنده عمومی 10:46

فصل 7: بازگشت به فرانت‌اند

بازگشت به فرانت‌اند برای ساخت صفحه ایجاد مقاله 07:24
طراحی ساختار فرم برای یک مقاله جدید 14:29
کنترل کردن فرم و جمع‌آوری مقادیر برای ارسال 17:04
ارسال JSON از طریق درخواست POST با استفاده از Fetch API 18:41
ساخت یک Middleware برای CORS جهت اجازه دادن به Origin 14:23
کار بر روی خطای ارسال فرم 07:02
Endpoint برای ایجاد مقاله و مواجه شدن با مشکل CORS 14:43
دیباگ کردن و غلبه بر مشکل CORS 12:00
فیلتر کردن فیلدهای نامرتبط و ایجاد یک مقاله 11:48
کار بر روی اعتبارسنجی‌های بک‌اند با Sequelize برای مقاله جدید 12:44
اعتبارسنجی در بک‌اند و ارسال پاسخ خطای عمومی 08:31
اعتبارسنجی یکتا بودن Slug مقاله 30:28
ارسال مقاله در فرانت‌اند و لینک دادن به صفحه فرم 22:21
دکمه ویرایش مقاله 07:37
افزودن آیکون‌ها با React Bootstrap Icons 10:15
بازآرایی کد در صفحه مقاله جدید 08:44
استخراج فرم به کامپوننت ArticleForm 22:39
بازآرایی ارسال فرم برای صفحه مقالات جدید 07:56
پیاده‌سازی فرم برای ویرایش مقاله 09:41
مدیریت ارسال فرم ویرایش 11:35
تعریف Endpoint در API برای بروزرسانی مقاله 17:44
پر کردن فرم ویرایش با مقادیر اولیه 12:05
رفع باگ ناوبری پس از ارسال فرم ویرایش 03:04
بازآرایی کد بک‌اند با استفاده از فایل کنترل‌کننده روت 13:40
انتقال تعاریف Endpoint به یک فایل جداگانه 04:09
غیرفعال کردن دکمه ارسال هنگام انتظار برای پاسخ 08:12
افزودن دکمه ریست به فرم مقاله 07:50
افزودن اعلان Toast به صورت سراسری در کل اپلیکیشن 14:10
نمایش اعلان Toast پس از بروزرسانی مقاله 07:56
اعتبارسنجی الگوی عبارت منظم در بک‌اند 13:33
استفاده از اعتبارسنجی‌های داخلی HTML5 09:23
غیرفعال کردن اعتبارسنجی HTML و انجام آن به صورت برنامه‌نویسی شده 11:45
استفاده از React Markdown برای رندر کردن بدنه مقاله 19:23
تفکر در مورد صفحه‌بندی مقالات 04:52
چگونه Postman را روی ویندوز نصب کنیم؟ 02:37
افزودن صفحه‌بندی به Endpoint بک‌اند برای دریافت مقالات 14:40
تعریف تعداد کل صفحات و اعتبارسنجی کوئری صفحه 09:53
افزودن رابط کاربری صفحه‌بندی به فرانت‌اند 13:21
دریافت مقالات با استفاده از کوئری استرینگ صفحه 04:27

فصل 8: کار با تصاویر

دارایی‌های استاتیک مانند تصاویر در Next.js 06:43
کامپوننت Image در Next.js برای بهینه‌سازی 09:15
افزودن فیلد URL تصویر Thumbnail به فرم مقاله 06:58
ایجاد Migration برای افزودن ستون Thumbnail URL 09:08
تکمیل ویژگی بروزرسانی Thumbnail 08:10
ذخیره دارایی‌های خارجی در سرور Express 10:21
افزودن پیش‌نمایش Thumbnail به فرم 13:42
استفاده از رویداد onBlur به جای onChange برای فیلد Thumbnail URL 06:10
ایجاد فرم آپلود Thumbnail 19:52
شروع کار بر روی Endpoint تصاویر و دیباگ کردن با Node 13:42
تکمیل Endpoint مربوط به تصاویر 25:03
مشاهده پیش‌نمایش Thumbnail جدید قبل از آپلود 11:22
جایگزین کردن Thumbnail موجود 07:33
رفع مشکل ارسال فرم با درخواست Ajax 17:28
پاک کردن ورودی فایل پس از ارسال 10:02
نمایش پیام بازخورد پس از ارسال Thumbnail 10:10
جلوگیری از ارسال درخواست‌های متعدد پس از ارسال فرم 03:51

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

ایجاد یک Bucket در Amazon AWS S3 04:45
ایجاد یک کاربر IAM با دسترسی به S3 Bucket 07:58
نصب AWS SDK Client S3 برای Node.js 12:10
آپلود فایل در AWS S3 با استفاده از SDK برای Node.js 12:35
حذف فایل از Bucket با استفاده از AWS SDK برای Node.js 10:15
بازآرایی کد به یک سرویس تصویر 14:31
اعتبارسنجی Mimetype تصویر در بک‌اند 08:01
اعتبارسنجی Mimetype تصویر در فرانت‌اند 03:08
محدود کردن حجم فایل آپلودی 03:56
افزودن پسوند به نام فایل 05:30
پاک‌سازی و شروع از یک صفحه خالی 04:30

فصل 10: بازگشت به مقالات

مدیریت حالتی که هیچ مقاله‌ای وجود ندارد 03:06
افزودن خلاصه برای مقاله 07:16
مدیریت خلاصه در بک‌اند 12:50
رفع مشکل فشرده شدن Thumbnail 03:14
افزودن عنوان به هِد HTML صفحات 03:47
افزودن متا تگ‌ها برای کمک به سئو 05:09
افزودن متا تگ‌ها برای کارت توییتر 08:36
افزودن متا تگ‌ها برای فیسبوک با Open Graph 08:06
بازآرایی کد برای ایجاد کامپوننت سئو 20:59
افزودن پیش‌نمایش Markdown به بدنه فرم مقاله 14:33
افزودن دکمه تیتر به نوار ابزار Markdown 27:11
افزودن دکمه ضخیم برای نوار ابزار Markdown 09:46
استفاده از نوار ابزار Markdown متن‌باز گیت‌هاب 08:29
تکمیل نوار ابزار Markdown برای بدنه مقاله 13:00

فصل 11: تصاویر مقاله

چگونه تصاویر را به مقالات اضافه کنیم؟ 03:58
دکمه پیوست تصویر و پنجره مودال 08:04
بازآرایی منطق به کامپوننت AttachImageButton 07:45
افزودن کادر آپلود با استفاده از CSS Modules برای استایل‌دهی 12:26
بررسی اسکیمای پایگاه داده SQL برای تصاویر مقاله 07:26
استفاده از Sequelize CLI برای تولید Migration برای جدول تصاویر 06:11
راه‌اندازی مدل Sequelize ORM برای تصاویر 07:00
تست و دیباگ مدل Sequelize با Node REPL 07:39
مایگریشن و مدل برای جدول Join مقالات و تصاویر 09:30
اعمال محدودیت یکتا برای جلوگیری از رکوردهای تکراری و تصاویر اشتراکی 13:22
ایجاد ارتباط Sequelize بین مقالات و تصاویر از طریق جدول Join 13:19
گنجاندن ارتباطات در کوئری‌های Find در Sequelize با استفاده از نام مستعار 13:30
توابع Getter در ارتباطات Sequelize برای مدل Join 15:20
گوش دادن به تغییر فایل برای ارسال درخواست HTTP جهت ایجاد تصویر مقاله 07:59
حل تداخل Endpoint در API و ایجاد روت برای ساخت تصاویر مقاله 05:07
پیاده‌سازی کنترل‌کننده Express برای ایجاد تصویر مقاله 14:55
بازآرایی سرویس تصویر تا عمومی‌تر باشد 10:52
کامپوننت گالری تصاویر و Endpoint برای دریافت تصاویر مقاله 15:30
بازیابی تصاویر مقاله برای گالری 11:39
استفاده از ویژگی مجازی در Sequelize و رندر کردن تصاویر 11:05
ارسال گالری تصاویر و دستکاری استایل‌ها 07:14
اطلاع‌رسانی به کاربران در مورد بارگذاری تصاویر 07:25
مدیریت خطا هنگام عدم موفقیت در بارگذاری تصاویر 04:48
ایجاد یک هوک سفارشی برای دسترسی به تصاویر مقاله 07:50
استیت انتظار و خطا برای آپلود تصویر 10:42
بازآرایی آپلود تصویر مقاله در قالب یک هوک 11:29
حل مشکل عدم همزمان سازی داده‌ به دلیل استفاده نادرست از هوک 08:06
افزودن یک لایه پوششی با دکمه‌های عملیاتی هنگام هاور روی تصاویر گالری 13:00
پیاده‌سازی حذف یک تصویر از طریق آیکون سطل زباله 14:51
بروزرسانی بک‌اند برای حذف تصویر مقاله 14:23
رفع باگ باقی ماندن فایل‌های تصویر در درایو محلی 03:23
دکمه آیکون برای باز کردن تصویر در اندازه کامل در یک تب جدید 02:31
افزودن علامت تصویر به بدنه Markdown پس از انتخاب 17:14
رفع مشکل سرریز تگ <img> در ناحیه Markdown 17:58

فصل 12: نگهداری از پایگاه کد

ارتقاء وابستگی NPM مربوط به Next.js 16:02
ارتقاء نسخه اصلی Next.js 31:59
استفاده از GitHub Dependabot برای خودکارسازی ارتقاء پکیج‌ها 06:49
ارتقاء وابستگی‌ها با به‌روزرسانی‌های نسخه Dependabot 15:50
هشدارهای Dependabot گیت‌هاب و بروزرسانی‌های امنیتی 12:26
تحلیل استاتیک کد (SCA) با ESLint 21:52
استفاده از GitHub Actions برای اجرای ESLint در فرآیند یکپارچه‌سازی مداوم (CI) 12:49

فصل 13: بهبودها

قابل پیکربندی کردن منطقه و Bucket در S3 به علاوه یک نمونه برای محیط توسعه (Dev) 19:23
رفع مشکل ستون گمشده در Seeder مقالات 06:07
افزودن تصویر بندانگشتی اولیه در Seeder مقالات 31:06
یکپارچه‌سازی فایل‌های Migration در Sequelize در یک فایل واحد 06:33
حذف تصاویر بندانگشتی باقی‌مانده در S3 هنگام بازگردانی مایگریشن 09:41
ایجاد یک Seeder برای پر کردن بدنه مقاله با تصویر 19:20