كيف تنشئ عرضًا توضيحيًا باستخدام Claude Code: البرمجة بالإحساس مع Supabase و Vercel

البرمجة بالإحساس (Vibecoding) هي نموذج جديد لتطوير البرمجيات حيث يوجّه المبرمج وكيل الذكاء الاصطناعي من خلال تعليمات باللغة الطبيعية، تاركًا للذكاء الاصطناعي كتابة الكود الفعلي. صاغ هذا المصطلح أندريه كارباثي (أحد مؤسسي OpenAI والمدير السابق للذكاء الاصطناعي في تسلا) في تغريدة شهيرة في فبراير 2025: "هناك نوع جديد من البرمجة أسميه البرمجة بالإحساس، حيث تستسلم تمامًا للإحساس، وتتقبل النمو الأسّي، وتنسى أن الكود موجود أصلاً."

في هذه المقالة، سنرى كيفية بناء عرض توضيحي كامل وعامل باستخدام Claude Code كوكيل ذكاء اصطناعي، وSupabase كخلفية (قاعدة بيانات، مصادقة، واجهة برمجة تطبيقات)، وVercel للنشر — وكل ذلك باستخدام الخطط المجانية حصريًا لهذه الخدمات.

1. ما هي البرمجة بالإحساس ولماذا هي ثورية

تمثل البرمجة بالإحساس تحولًا جوهريًا في نموذج تطوير البرمجيات. بدلاً من كتابة الكود سطرًا بسطر، يقوم المطور بـ:

1. وصف ما يريده باللغة الطبيعية.
2. وكيل الذكاء الاصطناعي يولّد الكود الكامل.
3. المطور يراجع ويختبر ويكرر.

لماذا تنجح

• السرعة: مشروع كان سيستغرق أيامًا يمكن بناؤه في ساعات.
• سهولة الوصول: حتى المطورون غير الخبراء يمكنهم بناء منتجات عاملة.
• التكرار السريع: يمكنك اختبار الأفكار والتحول بشكل أسرع بكثير.
• التركيز على المنتج: تركز على ماذا بدلاً من كيف.

متى تستخدم البرمجة بالإحساس

البرمجة بالإحساس مثالية لـ:

• العروض التوضيحية وMVP: بناء نموذج أولي سريعًا للتحقق من فكرة.
• الهاكاثونات: إنشاء منتج عامل في ساعات قليلة فقط.
• المشاريع الجانبية: استكشاف تقنيات جديدة دون استثمار أسابيع.
• إثبات المفهوم: إثبات الجدوى التقنية لأصحاب المصلحة أو المستثمرين.

تحذير: البرمجة بالإحساس ممتازة للعروض التوضيحية والنماذج الأولية. بالنسبة لتطبيقات الإنتاج ذات متطلبات الأمان والتوسع العالية، لا تزال المراجعة الشاملة للكود المُولَّد ضرورية.

2. حزمة التقنيات: Claude Code + Supabase + Vercel

Claude Code

Claude Code هو وكيل البرمجة بالذكاء الاصطناعي من Anthropic. يعمل مباشرة في الطرفية ويمكنه:

• قراءة وفهم قاعدة الكود بالكامل.
• إنشاء وتعديل وحذف الملفات.
• تنفيذ أوامر الطرفية.
• التفاعل مع واجهات برمجة التطبيقات والخدمات الخارجية.
• إدارة التحكم بالإصدارات باستخدام Git.
• التكرار ذاتيًا على الأخطاء والمشاكل.

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start in a project directory
cd my-project
claude

Supabase (الخطة المجانية)

Supabase هو بديل مفتوح المصدر لـ Firebase يقدم:

• قاعدة بيانات PostgreSQL: قاعدة بيانات علائقية كاملة.
• المصادقة: تسجيل الدخول بالبريد الإلكتروني أو Google أو GitHub وغيرها.
• واجهات REST وRealtime: تُنشأ تلقائيًا من مخططك.
• التخزين: للملفات والصور.
• دوال الحافة: دوال بدون خادم.

الخطة المجانية تشمل:

| المورد | الحد المجاني | |----------|-----------| | قاعدة البيانات | 500 ميجابايت | | التخزين | 1 جيجابايت | | عرض النطاق | 5 جيجابايت | | استدعاءات دوال الحافة | 500 ألف/شهر | | المستخدمين المصادق عليهم | غير محدود | | المشاريع | مشروعان نشطان |

Vercel (الخطة المجانية)

Vercel هي منصة النشر المثالية لتطبيقات Next.js:

• النشر التلقائي من GitHub.
• نشر المعاينة لكل فرع وطلب سحب.
• شبكة CDN عالمية لأداء مثالي.
• دوال بدون خادم مضمّنة.
• تحليلات أساسية مجانية.

الخطة المجانية تشمل:

| المورد | الحد المجاني | |----------|-----------| | عرض النطاق | 100 جيجابايت/شهر | | تنفيذ الدوال بدون خادم | 100 جيجابايت-ساعة/شهر | | عمليات البناء | 6,000 دقيقة/شهر | | المشاريع | غير محدود | | عمليات النشر | غير محدود |

3. الإعداد الأولي: تحضير البيئة

المتطلبات الأساسية

قبل البدء، تأكد من أن لديك:

• Node.js 18+ مثبت.
• Git مُعَد.
• حساب GitHub.
• حساب Supabase (مجاني على supabase.com).
• حساب Vercel (مجاني على vercel.com).
• Claude Code مثبت (npm install -g @anthropic-ai/claude-code).

الخطوة 1: إنشاء المشروع

افتح الطرفية وابدأ Claude Code:

mkdir my-demo-app && cd my-demo-app
claude

الآن يمكنك البدء بإعطاء Claude Code تعليمات باللغة الطبيعية:

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

سيقوم Claude Code بالتنفيذ تلقائيًا:

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

الخطوة 2: إعداد Supabase

1. اذهب إلى supabase.com وأنشئ مشروعًا جديدًا.
2. دوّن عنوان URL للمشروع ومفتاح anon من الإعدادات > API.
3. عد إلى الطرفية مع Claude Code:

You: Add Supabase to the project. Create a .env.local file with the variables
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
Supabase client with SSR support for Next.js App Router.

سيقوم Claude Code بإنشاء الإعداد الكامل:

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. بناء العرض التوضيحي: تطبيق إدارة المهام

لنبنِ عرضًا توضيحيًا عمليًا: تطبيق لإدارة المهام مع مصادقة وعمليات CRUD كاملة وواجهة حديثة.

تعريف مخطط قاعدة البيانات

أعطِ Claude Code تعليمات لإنشاء المخطط:

You: Create a SQL migration for Supabase with the following tables:

1. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   to profiles), created_at
3. tasks: id (uuid), title (text), description (text), status (enum:
   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
   created_at, updated_at

Enable Row Level Security on all tables and create appropriate policies.

سيولّد Claude Code عملية ترحيل كاملة:

-- Create enum types
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Projects table
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Profiles policies
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Projects policies
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Tasks policies
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

يمكنك تشغيل عملية الترحيل هذه مباشرة من لوحة تحكم Supabase (محرر SQL) أو عبر واجهة سطر الأوامر.

توليد أنواع TypeScript

You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

بناء واجهة المستخدم

الآن يأتي الجزء الأقوى من البرمجة بالإحساس. أعطِ Claude Code تعليمات عالية المستوى:

You: Create a dashboard page for the task management app with:

1. Sidebar with navigation between projects
2. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3. Modal to create/edit tasks
4. Header with user avatar and logout
5. Modern design with shadcn/ui and Tailwind

Use data from Supabase with React Server Components where possible
and Client Components only where interactivity is needed.

سيبني Claude Code الواجهة بالكامل، مكونًا تلو الآخر.

إضافة المصادقة

You: Add a complete authentication system with:

1. Login page with email/password and GitHub login
2. Registration page
3. Middleware to protect authenticated routes
4. Automatic redirect for unauthenticated users
5. Automatic profile creation after registration

سيقوم Claude Code بإعداد وسيط Next.js وصفحات المصادقة:

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. أنماط البرمجة بالإحساس المتقدمة

التوجيه التكراري

سر البرمجة بالإحساس الفعّالة هو التكرار. لا تحاول وصف كل شيء في توجيه واحد. تقدم خطوة بخطوة:

Step 1: "Create the base layout with header and sidebar"
Step 2: "Add the project list in the sidebar with a button to create new ones"
Step 3: "Create the Kanban view in the main area"
Step 4: "Add drag & drop between columns"
Step 5: "Implement the modal to create new tasks"
Step 6: "Add toast notifications for user feedback"

نصيحة: كلما كان التوجيه أكثر تحديدًا وسياقًا، كانت النتيجة أفضل. يمتلك Claude Code وصولاً إلى قاعدة الكود بالكامل، لذا يمكنه دمج الميزات الجديدة بشكل متناسق.

معالجة الأخطاء

عندما لا يعمل شيء ما (وسيحدث ذلك)، يمكنك ببساطة أن تقول:

You: I'm getting this error in the console: "TypeError: Cannot read property
'map' of undefined" in the TaskList component. Fix it.

سيحلل Claude Code الكود ويحدد المشكلة ويصلحها.

إعادة الهيكلة بالذكاء الاصطناعي

You: The Dashboard component has become too large. Split it into smaller,
reusable components while maintaining the same functionality.

الاختبار

You: Add tests with Vitest for utility functions and Playwright tests for
the authentication and task creation flow.

6. النشر على Vercel: من الكود إلى العالم

الخطوة 1: الرفع إلى GitHub

You: Create an appropriate .gitignore, commit everything, and push to a new
GitHub repository called "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

الخطوة 2: ربط Vercel

1. اذهب إلى vercel.com وانقر على "إضافة مشروع جديد".
2. استورد مستودع GitHub الذي أنشأته للتو.
3. أضف متغيرات البيئة:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. انقر على "نشر".

الخطوة 3: إعداد نطاق مخصص (اختياري)

يوفر Vercel رابطًا مجانيًا مثل my-demo-app.vercel.app. لنطاق مخصص:

You: Add the configuration for a custom domain in vercel.json

نشر المعاينة

في كل مرة تفتح فيها طلب سحب (Pull Request) على GitHub، سيقوم Vercel تلقائيًا بإنشاء نشر معاينة برابط فريد. مثالي لعرض التغييرات قبل الدمج.

7. تحسينات لعرضك التوضيحي

الأداء

You: Optimize the app's performance:
1. Add loading states with Suspense and skeletons
2. Implement caching with Next.js unstable_cache
3. Optimize images with next/image
4. Add SEO metadata for each page

الوقت الفعلي مع Supabase

ميزة تثير الإعجاب دائمًا في العروض التوضيحية هي الوقت الفعلي:

You: Add realtime synchronization for tasks using Supabase Realtime.
When a user updates a task, all other users should see the change
in real time without refreshing.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

الوضع الداكن

You: Add dark mode support with a toggle in the header.
Use Tailwind dark classes and save the preference in localStorage.

8. أفضل الممارسات للبرمجة بالإحساس الفعّالة

1. كن محددًا في توجيهاتك

❌ "Make a nice page"
✅ "Create a landing page with a hero section with a purple-blue gradient,
   a features section with 3 cards with icons, and an orange CTA button"

2. وفّر السياق

❌ "Add authentication"
✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
   Router with TypeScript. I want email/password login and OAuth with GitHub.
   Use the SSR pattern with @supabase/ssr"

3. كرر بخطوات صغيرة

لا تحاول بناء كل شيء في توجيه واحد. تقدم تدريجيًا:

1. التخطيط الأساسي
2. ميزة واحدة في كل مرة
3. التنسيق والتلميع
4. معالجة الأخطاء
5. الاختبار

4. راجع الكود المُولَّد

البرمجة بالإحساس لا تعني عدم قراءة الكود. راجع دائمًا:

• الأمان: سياسات RLS، التحقق من المدخلات، تنظيف البيانات.
• الأداء: استعلامات N+1، مكونات من جانب العميل بلا داعٍ.
• أفضل الممارسات: هيكل المشروع، اصطلاحات التسمية.

5. استخدم Git بشكل استراتيجي

You: Commit the changes with a descriptive message after each completed feature.

هذا يتيح لك التراجع إذا حدث خطأ ما.

9. التكاليف: هل هي مجانية حقًا؟

إليك تفصيل التكلفة لكل خدمة:

| الخدمة | الخطة المجانية | متى تدفع | |---------|-----------|-------------| | Claude Code | يتطلب خطة Anthropic (تبدأ من 20 دولار/شهر) أو مفتاح API | فورًا، لكن القيمة هائلة | | Supabase | خطة مجانية سخية (مشروعان، 500 ميجابايت قاعدة بيانات) | تجاوز حدود الخطة المجانية | | Vercel | خطة مجانية للمشاريع الشخصية | للفرق أو الاستخدام التجاري | | GitHub | مجاني للمستودعات العامة والخاصة | ميزات المؤسسات |

ملاحظة: يتطلب Claude Code اشتراكًا أو رصيد API، لكن العائد على الاستثمار من حيث سرعة التطوير غير عادي. لعرض توضيحي أو MVP، التكلفة الإجمالية في حدود 20 دولارًا.

بدائل الذكاء الاصطناعي المجانية

إذا أردت الحفاظ على التكاليف عند الصفر المطلق، يمكنك استخدام:

• Cursor (خطة مجانية مع قيود).
• GitHub Copilot (مجاني للطلاب والمصادر المفتوحة).
• Codeium/Windsurf (خطة مجانية سخية).

10. من العرض التوضيحي إلى المنتج: الخطوات التالية

بمجرد أن يكون عرضك التوضيحي مباشرًا، إليك كيف تتقدم:

1. اجمع الملاحظات: شارك العرض التوضيحي مع المستخدمين المحتملين واجمع آراءهم.
2. كرر بسرعة: استخدم البرمجة بالإحساس لتنفيذ التغييرات المطلوبة.
3. راقب المقاييس: تحليلات Vercel ولوحة تحكم Supabase تمنحك بيانات أساسية.
4. توسع عند الحاجة: قم بالترقية إلى الخطط المدفوعة فقط عندما تتحقق من الطلب.

الخاتمة

البرمجة بالإحساس مع Claude Code وSupabase وVercel تمثل مزيجًا قويًا لبناء العروض التوضيحية والنماذج الأولية في وقت قياسي. ما كان يستغرق أسابيع من التطوير يمكن إنجازه الآن في ساعات قليلة فقط، بمستوى جودة مرتفع بشكل مفاجئ.

المفتاح هو التعامل مع البرمجة بالإحساس بالعقلية الصحيحة: لا يتعلق الأمر بـ"عدم معرفة البرمجة" بل بـتعزيز قدراتك بأدوات الذكاء الاصطناعي. كلما عرفت أكثر عن التقنيات الأساسية (React، SQL، المصادقة، النشر)، كنت أكثر فعالية في توجيه وكيل الذكاء الاصطناعي نحو النتيجة المطلوبة.

مستقبل تطوير البرمجيات هنا، وتكلفة البدء لم تكن أقل من أي وقت مضى. أنشئ عرضك التوضيحي، تحقق منه مع مستخدمين حقيقيين، وابنِ المنتج العظيم التالي.

قائمة التحقق لعرضك التوضيحي الأول:

• [x] Claude Code مثبت ومُعَد
• [x] مشروع Supabase مُنشأ مع مخطط قاعدة البيانات
• [x] مشروع Next.js مُهيّأ مع shadcn/ui
• [x] المصادقة مُعَدة
• [x] عمليات CRUD الكاملة مُنفذة
• [x] واجهة مستخدم حديثة ومتجاوبة
• [x] منشور على Vercel
• [x] رابط قابل للمشاركة جاهز للملاحظات