ضمیمه الف: جزئیات کامل تنظیمات اولیه پروژه (فصل ۱ و ۲)

این ضمیمه جزئیات کامل تنظیمات اولیه پروژه و ساختار پروژه را که در فصل‌های ۱ و ۲ به‌صورت خلاصه یا غایب بودند، پوشش می‌دهد. هدف این است که یک راهنمای جامع برای راه‌اندازی پروژه مرکز اجاره کشتی‌های کروز با Nuxt 3 ارائه شود، شامل ساختار پوشه‌ها، فایل‌های پیکربندی، و تنظیمات Tailwind CSS.

---

ساختار پروژه

ساختار پروژه به‌گونه‌ای طراحی شده است که ماژولار، مقیاس‌پذیر و مطابق با استانداردهای Nuxt 3 باشد. در زیر، جزئیات کامل پوشه‌ها و فایل‌های کلیدی پروژه ارائه شده است:

• pages/:

• شامل فایل‌های Vue که صفحات اصلی اپلیکیشن را تعریف می‌کنند.

• فایل‌ها:
  • index.vue: صفحه اصلی (Homepage) که کاربران را به مرور کشتی‌ها هدایت می‌کند.
  • ships/index.vue: صفحه لیست کشتی‌ها با قابلیت فیلتر و صفحه‌بندی.
  • ships/[id].vue: صفحه جزئیات کشتی برای نمایش اطلاعات و فرم رزرو.
  • bookings.vue: داشبورد رزروها برای نمایش تاریخچه رزروهای کاربر.
  • login.vue: صفحه ورود برای احراز هویت (اضافه‌شده در فصل ۱۱).

• ویژگی: Nuxt به‌صورت خودکار از ساختار فایل‌ها برای ایجاد مسیرهای اپلیکیشن استفاده می‌کند (مثلاً ships/[id].vue به /ships/:id تبدیل می‌شود).

• components/:

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

• فایل‌ها:
  • ShipCard.vue: کارت نمایش اطلاعات کشتی (از فصل ۵).
  • AppHeader.vue: کامپوننت هدر برای ناوبری (اضافه‌شده در پاسخ تکمیلی).
  • BookingForm.vue: کامپوننت فرم رزرو (اضافه‌شده در پاسخ تکمیلی).

• ویژگی: این کامپوننت‌ها از ترکیب <script setup> و TypeScript برای خوانایی و ایمنی نوع استفاده می‌کنند.

• stores/:

• شامل فایل‌های Pinia برای مدیریت وضعیت اپلیکیشن.

• فایل‌ها:
  • ships.ts: store برای مدیریت داده‌های کشتی‌ها (دریافت، فیلتر، صفحه‌بندی).
  • bookings.ts: store برای مدیریت رزروها (دریافت و افزودن رزرو).

• ویژگی: استفاده از Pinia برای مدیریت متمرکز و reactive داده‌ها.

• server/api/:

• شامل مسیرهای API سمت سرور که با موتور Nitro ساخته شده‌اند.

• فایل‌ها:
  • ships.ts: API برای دریافت لیست کشتی‌ها.
  • bookings.ts: API برای دریافت و افزودن رزروها.
  • stripe-checkout.ts: API برای ایجاد جلسه پرداخت Stripe (فصل ۱۱).
  • auth/[...].ts: مسیرهای احراز هویت برای @sidebase/nuxt-auth (فصل ۱۱).

• ویژگی: این مسیرها از TypeScript و مدل‌های داده (Ship, Booking) برای ایمنی نوع استفاده می‌کنند.

• content/:

• شامل فایل‌های Markdown برای مدیریت محتوای متنی با Nuxt Content (فصل ۸).

• پوشه‌ها و فایل‌ها:
  • ships/1.md: توضیحات کشتی Ocean Explorer.
  • ships/2.md: توضیحات کشتی Luxury Liner.

• ویژگی: امکان ویرایش محتوا بدون تغییر کد و تولید محتوای استاتیک.

• public/:

• شامل فایل‌های استاتیک مانند تصاویر.

• پوشه‌ها و فایل‌ها:
  • images/ocean.jpg: تصویر کشتی Ocean Explorer.
  • images/luxury.jpg: تصویر کشتی Luxury Liner.
  • og-image.jpg: تصویر Open Graph برای سئو.

• ویژگی: تصاویر با @nuxt/image بهینه‌سازی می‌شوند.

• assets/:

• شامل فایل‌های CSS و سایر منابع غیراستاتیک.

• فایل‌ها:
  • css/main.css: استایل‌های جهانی با Tailwind CSS.

• ویژگی: این فایل برای تعریف کلاس‌های سفارشی (مانند .card و .btn) استفاده می‌شود.

• types/:

• شامل تعریف مدل‌های داده با TypeScript.

• فایل‌ها:
  • index.ts: تعریف رابط‌های Ship و Booking.

• ویژگی: ایمنی نوع در سراسر پروژه.

• فایل‌های ریشه:

• nuxt.config.ts: تنظیمات اصلی Nuxt.

• package.json: وابستگی‌ها و اسکریپت‌ها.
• tsconfig.json: تنظیمات TypeScript.
• .env: متغیرهای محیطی.
• .gitignore: برای جلوگیری از آپلود فایل‌های حساس (مانند .env).

---

فایل پیکربندی Nuxt (nuxt.config.ts)

فایل nuxt.config.ts تنظیمات اصلی پروژه را تعریف می‌کند. نسخه کامل شامل تمام ماژول‌ها و تنظیمات مورد نیاز است:

export default defineNuxtConfig({
  // فعال‌سازی ابزارهای توسعه برای دیباگ
  devtools: { enabled: true },

  // ماژول‌های استفاده‌شده
  modules: [
    '@pinia/nuxt',           // مدیریت وضعیت با Pinia
    '@nuxtjs/tailwindcss',   // استایل‌دهی با Tailwind CSS
    '@nuxt/image',           // بهینه‌سازی تصاویر
    '@nuxt/content',         // مدیریت محتوا با Markdown
    '@sidebase/nuxt-auth',   // احراز هویت
    '@nuxtjs/supabase',      // اتصال به پایگاه داده Supabase
    '@nuxtjs/plausible',     // تحلیل داده‌ها
  ],

  // تنظیمات متغیرهای محیطی
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE || '/api',                    // URL پایه API
      appUrl: process.env.APP_URL || 'http://localhost:3000',     // URL اپلیکیشن
      stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY,   // کلید عمومی Stripe
    },
    stripeSecretKey: process.env.STRIPE_SECRET_KEY,               // کلید مخفی Stripe (فقط سرور)
    supabaseUrl: process.env.SUPABASE_URL,                        // URL Supabase
    supabaseKey: process.env.SUPABASE_KEY,                        // کلید Supabase
    authSecret: process.env.AUTH_SECRET,                          // کلید مخفی Auth.js
  },

  // قوانین مسیریابی برای رندر ترکیبی
  routeRules: {
    '/': { prerender: true },             // SSG برای صفحه اصلی
    '/ships': { prerender: true },        // SSG برای لیست کشتی‌ها
    '/ships/**': { prerender: true },     // SSG برای جزئیات کشتی‌ها
    '/bookings': { ssr: true, middleware: ['auth'] }, // SSR با میدلور احراز هویت
  },

  // تنظیمات Tailwind CSS
  tailwindcss: {
    cssPath: '~/assets/css/main.css',
    configPath: 'tailwind.config.js',
  },

  // تنظیمات Supabase
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
  },

  // تنظیمات Plausible
  plausible: {
    domain: process.env.PLAUSIBLE_DOMAIN || 'your-app-url.com',
    apiHost: process.env.PLAUSIBLE_API_HOST || 'https://plausible.io',
  },

  // تنظیمات احراز هویت
  auth: {
    provider: {
      type: 'authjs',
      trustHost: true,
      defaultProvider: 'github',
    },
  },

  // تنظیمات تصویر
  image: {
    provider: 'static', // در تولید به CDN تغییر دهید (مانند Cloudinary)
  },
});

توضیحات:

• ماژول‌ها: تمام ماژول‌های مورد نیاز از فصل‌های مختلف (Pinia، Tailwind، Nuxt Content و غیره) اضافه شده‌اند.
• runtimeConfig: متغیرهای محیطی برای API، Stripe، Supabase، و Plausible مدیریت می‌شوند.
• routeRules: رندر ترکیبی برای بهینه‌سازی عملکرد و سئو.

• ویژگی‌ها:

• فعال‌سازی devtools برای دیباگ آسان‌تر.

• تنظیمات Tailwind CSS برای استایل‌دهی یکپارچه.
• پشتیبانی از احراز هویت و تحلیل داده‌ها.

---

تنظیم Tailwind CSS

Tailwind CSS برای استایل‌دهی پاسخ‌گو و سریع در سراسر پروژه استفاده شده است. جزئیات کامل تنظیمات به شرح زیر است:

• فایل assets/css/main.css:

• این فایل استایل‌های جهانی و کلاس‌های سفارشی را تعریف می‌کند:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    /* کلاس‌های سفارشی */
    .card {
      @apply bg-white shadow-md rounded-lg overflow-hidden;
    }
    .btn {
      @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-200;
    }
    .error {
      @apply text-red-500 text-sm mt-1;
    }

• کلاس‌های سفارشی:

  • .card: برای کارت‌های کشتی‌ها (ShipCard.vue) و رزروها.
  • .btn: برای دکمه‌ها (مانند "Book Now" یا "Sign In").
  • .error: برای نمایش خطاهای اعتبارسنجی فرم.

• فایل tailwind.config.js:

• تنظیمات Tailwind برای اسکن فایل‌های پروژه و اعمال استایل‌ها:

    module.exports = {
      content: [
        './components/**/*.{vue,js,ts}',
        './pages/**/*.{vue,js,ts}',
        './layouts/**/*.{vue,js,ts}',
        './server/**/*.{js,ts}',
      ],
      theme: {
        extend: {
          colors: {
            primary: '#1E3A8A', // آبی تیره برای هدر
            secondary: '#F3F4F6', // خاکستری روشن برای پس‌زمینه
          },
        },
      },
      plugins: [],
    };

• توضیحات:
• content: مشخص می‌کند که Tailwind کدام فایل‌ها را برای استخراج کلاس‌ها اسکن کند.

• theme.extend: رنگ‌های سفارشی برای یکپارچگی بصری اضافه شده‌اند.

• ادغام در nuxt.config.ts:

• تنظیم مسیر CSS و فایل تنظیمات Tailwind:

    tailwindcss: {
      cssPath: '~/assets/css/main.css',
      configPath: 'tailwind.config.js',
    },

• این تنظیم اطمینان می‌دهد که استایل‌های Tailwind به‌درستی در پروژه لود می‌شوند.

ویژگی‌ها:

• پاسخ‌گویی (Responsive): کلاس‌های Tailwind مانند md:grid-cols-3 برای گریدهای پاسخ‌گو در ships/index.vue.
• کلاس‌های سفارشی: کاهش کد CSS تکراری با تعریف کلاس‌هایی مانند .card و .btn.
• انعطاف‌پذیری: امکان افزودن تم‌ها یا افزونه‌های جدید به tailwind.config.js.

---

چرا این بخش در ضمیمه‌ها خلاصه بود؟

ضمیمه‌های اولیه (پاسخ A) فقط به فایل‌های package.json و tsconfig.json اشاره کردند و جزئیات کامل درباره:

-ساختار دقیق پوشه‌ها و نقش هر پوشه.

• تنظیمات جامع nuxt.config.ts با تمام ماژول‌ها و گزینه‌ها.

• پیکربندی Tailwind CSS (شامل main.css و tailwind.config.js) و کلاس‌های سفارشی.

را پوشش ندادند. این پاسخ تکمیلی تمام این جنبه‌ها را با جزئیات و مثال‌های عملی ارائه می‌دهد.

---

نکات عملی برای پیاده‌سازی

1. راه‌اندازی اولیه:

2. دستور npx nuxi@latest init cruise-rental-app را اجرا کنید.

3. فایل‌های بالا را در پروژه کپی کنید.

4. دستور npm install را برای نصب وابستگی‌ها اجرا کنید.

5. بررسی ساختار:

6. اطمینان حاصل کنید که تمام پوشه‌ها (pages/, components/, و غیره) مطابق با توضیحات ایجاد شده‌اند.

7. تصاویر نمونه را در public/images/ قرار دهید.

8. دیباگ:

9. از devtools (فعال‌شده در nuxt.config.ts) برای بررسی رندر صفحات و APIها استفاده کنید.

10. دستور npm run dev را برای اجرای پروژه در حالت توسعه اجرا کنید.

11. گسترش:

12. برای افزودن ماژول‌های جدید (مانند @nuxtjs/i18n برای محلی‌سازی)، آن‌ها را به modules در nuxt.config.ts اضافه کنید.

13. کلاس‌های Tailwind بیشتری را در main.css برای نیازهای خاص پروژه تعریف کنید.

---

جمع‌بندی ضمیمه الف

این ضمیمه جزئیات کامل تنظیمات اولیه پروژه را ارائه داد، از جمله ساختار پروژه، تنظیمات nuxt.config.ts، و پیکربندی Tailwind CSS. این اطلاعات پایه‌ای محکم برای شروع توسعه اپلیکیشن فراهم می‌کند و اطمینان می‌دهد که تمام اجزای پروژه به‌درستی راه‌اندازی شده‌اند. برای اطلاعات بیشتر، به فصل‌های ۱ و ۲ کتاب مراجعه کنید یا مخزن فرضی GitHub (https://github.com/khosronz/cruise-rental-app) را بررسی کنید.