💻 برمجة

كيف تستخدم Replit لتبني وتنشر تطبيق كامل من المتصفح

دليل عملي لاستخدام Replit Agent يبني لك الواجهة والكود وقاعدة البيانات وينشر رابط حي، مع صراحة حول نظام الكريدت الصعب التوقع ودعم العربي المحدود.

وش راح تقدر تسوي بعد هذا الشرح

  • تفهم إن Replit بيئة تطوير كاملة بالمتصفح — محرر، تشغيل، قاعدة بيانات، ونشر بمكان واحد، بدون تثبيت أي شي على جهازك
  • تستخدم Replit Agent بكتابة وصف نصي للتطبيق اللي تباه، فيبني الواجهة والكود ويربط قاعدة بيانات وينشره لرابط حي خلال دقائق
  • تراجع خطة الـ Agent قبل ما ينفذها (Plan Mode بخطة Core فما فوق) بدل ما تخليه يشتغل على عمياء
  • تتوقع إن نظام الكريدت الشهري يصعب توقعه — المهمة الكبيرة تستهلك أكثر من التعديل البسيط بغض النظر عن عدد الطلبات
  • تعرف حدوده: أداء المحرر التقليدي أبطأ من محرر محلي زي VS Code بالمشاريع الكبيرة، ودعم العربي بالواجهة والمخرجات محدود جدًا

قبل ما تبدأ

  • حساب مجاني على replit.com للبدء
  • فكرة واضحة عن التطبيق اللي تبيه تقدر تصفها بوضوح عشان الـ Agent يبنيه صح

Replit بيئة تطوير كاملة تفتح مباشرة من المتصفح — محرر أكواد، تيرمنال، تشغيل، قاعدة بيانات، ونشر، كلها بمكان وحد، بدون ما تثبت أي شي على جهازك. فيه تطبيق مكتبي اختياري، لكن المتصفح لحاله يكفي تبني وتنشر مشروع كامل.

الإضافة الأساسية اللي تغيّر طريقة استخدامها هي Replit Agent: تكتب وصفًا نصيًا للتطبيق اللي تباه، وهو يبني الواجهة، منطق الكود، يربط قاعدة بيانات، ثم ينشره لرابط حي خلال دقائق. هذا يخلي Replit يقف بمنطقة وسط بين Cursor (محرر محلي لمبرمج شغال على مشروع موجود) وLovable (بناء واجهات من وصف بأقل كود) — تقريبًا يجمع الاثنين: بيئة تطوير كاملة بالمتصفح مع Agent يبني من الصفر أو يعدّل كودك.

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

الخطوات

الخطوات تحت مرتبة من قرار الملاءمة إلى البناء والنشر الفعلي. لو متأكد إن Replit يناسب مشروعك، تقدر تنطلق مباشرة من خطوة التسجيل والوصف.

الخطوات

  1. الخطوة 1: قرر هل Replit يناسب مهمتك قبل ما تبدأ

    Replit ما هو محرر محلي زي Cursor تركّبه على جهازك وتشتغل فيه على مشروع موجود، وما هو أداة تبني واجهات فقط زي Lovable. هو بيئة تطوير كاملة بالمتصفح — محرر، تشغيل، قاعدة بيانات، ونشر — مع Agent يقدر يبني مشروع كامل من الصفر أو يعدّل على كود موجود عندك. اسأل نفسك: تبي تبني وتنشر تطبيق جديد بأسرع وقت بدون إعداد محلي؟ هذا استخدامه الأقوى. تشتغل على مشروع كبير موجود مسبقًا وتبي أداء وتحكم دقيق؟ محرر محلي غالبًا خيار أفضل.

    ملاحظة: لو تشتغل بفريق صغير وتبي تتعاون مباشرة بدون إعداد Git معقّد، هذي نقطة قوة إضافية لـ Replit — عدة أشخاص يعدلون نفس المشروع بنفس الوقت زي مستند مشترك.

  2. الخطوة 2: سجل وابدأ مشروعًا جديدًا بوصف أو قالب

    افتح حساب مجاني من `replit.com`، وابدأ مشروعًا جديدًا. عندك خياران: تكتب وصفًا نصيًا لما تبيه وتخلي Replit Agent يبنيه من الصفر، أو تختار من القوالب الجاهزة إن كان عندك نقطة انطلاق أوضح. الخطة المجانية (Starter) تعطيك كريدت يومي مجاني للـ Agent، قاعدة بيانات مدمجة، ونشر مشروع واحد مباشرة — كافية لتجربة حقيقية قبل أي قرار دفع.

    ملاحظة: كل ما كان وصفك أدق — الوظائف، شكل الواجهة، وشو يخزّن بقاعدة البيانات — كل ما كانت النتيجة الأولى أقرب لما تبيه.

  3. الخطوة 3: راجع خطة الـ Agent قبل ما ينفذها

    بخطة Core فما فوق، عندك Plan Mode: الـ Agent يعرض عليك خطة تنفيذ قبل ما يبدأ يكتب كود فعلي. راجعها — هل فهم طلبك صح، هل الخطوات منطقية — قبل ما توافق عليه ينفذ. هذي أهم خطوة تفرق بين تطبيق يطلع قريب لما تبيه وتطبيق تصلحه من الصفر بعدين.

    ملاحظة: لو ما عندك Plan Mode بالخطة المجانية، راقب أول شوي مما يبدأ الـ Agent ينفذ، وقاطعه بدري لو لاحظت إنه رايح باتجاه غلط.

  4. الخطوة 4: عدّل الكود يدويًا أو استمر بالمحادثة مع الـ Agent

    بعد ما يبني الـ Agent النسخة الأولى، عندك خياران غير حصريين: تفتح الكود وتعدّل عليه مباشرة بنفسك، أو تستمر بمحادثة مع الـ Agent — تطلب تعديل، ميزة إضافية، أو إصلاح خطأ — وهو يواصل من نفس السياق. قاعدة البيانات جزء من المشروع من البداية، ما تحتاج تربط خدمة خارجية.

    ملاحظة: لمشاريع بها أكثر من شخص، التعاون المباشر يعني تقدرون تعدلون نفس المشروع سوا لحظيًا بدل ما تتبادلون فروع Git.

  5. الخطوة 5: اضغط Deploy واحصل على رابط حي، وراقب استهلاك الكريدت

    لما يصير التطبيق جاهز، اضغط Deploy — النشر مدمج بنفس المكان، ما تحتاج خدمة استضافة منفصلة، وتحصل على رابط عام حي مباشرة. بالمقابل، كل استخدام للـ Agent — توليد كود، تشغيل أوامر، الوصول لنماذج متقدمة — يسحب من كريدت شهري (٢٥ دولار بخطة Core، ١٠٠ بخطة Pro)، والمهمة الأكبر تسحب أكثر من التعديل الصغير بغض النظر عن عدد الطلبات، فيصعب تتوقع تكلفتك بدقة.

    ملاحظة: لو تستخدم الـ Agent يوميًا أو بمهام كبيرة ومتكررة، راجع استهلاك الكريدت بانتظام بدل ما تكتشفه لما ينفد بمنتصف الشهر.

أخطاء شائعة — وكيف تتجنبها

الخطأتتوقع من محرر Replit التقليدي نفس أداء وتحكم محرر محلي زي VS Code وأنت شغال على مشروع كبير موجود مسبقًا.

الصحاستخدم Replit للمشاريع الجديدة اللي تبنيها من الصفر بالـ Agent. لو عندك مشروع كبير قائم ويهمك الأداء، محرر محلي زي VS Code أو Cursor يعطيك تحكمًا أدق.

الخطأتستخدم الـ Agent بكثافة يوميًا بدون ما تراقب استهلاك الكريدت، وتتفاجأ لما ينفد بمنتصف الشهر.

الصحراقب استهلاكك بانتظام لو تستخدم الـ Agent يوميًا أو بمهام كبيرة، لأن المهمة المعقدة تسحب كريدت أكثر من التعديل البسيط بغض النظر عن عدد الطلبات.

الخطأتحسب سعرك على الرقم الشهري المعلن (٢٠ أو ٩٥ دولار) بدون تحقق من نوع الفوترة.

الصحتحقق من نوع الفوترة قبل ما تقرر — هذا سعر الفوترة السنوية. الفوترة الشهرية أغلى (٢٥ دولار بدل ٢٠ لخطة Core، و١٠٠ بدل ٩٥ لخطة Pro).

الخطأتتوقع واجهة أو مخرجات عربية قوية من الـ Agent لأنه أداة ذكاء اصطناعي حديثة.

الصحتعامل مع Replit كأداة إنجليزية أساسًا — واجهة المحرر ومخرجات الـ Agent بالإنجليزي، ودعم العربي محدود جدًا.

❓ أسئلة شائعة

وش الفرق بين Replit وLovable؟

Lovable يركّز على بناء واجهات الويب من وصف نصي بأقل كود ممكن. Replit يجمع بين هذا وبين بيئة تطوير كاملة بالمتصفح — محرر، تشغيل، قاعدة بيانات، ونشر — والـ Agent يقدر يبني مشروع من الصفر أو يعدّل على كود موجود عندك.

أقدر أعرف كم بيكلفني استخدام الـ Agent قبل ما أبدأ؟

لا بدقة. كل استخدام للـ Agent — توليد كود، تشغيل أوامر، الوصول لنماذج متقدمة — يسحب من كريدت شهري (٢٥ دولار بخطة Core، ١٠٠ بخطة Pro)، والمهمة الأكبر تسحب أكثر بغض النظر عن عدد الطلبات. لو تستخدمه يوميًا أو بمهام مكثفة، راقب استهلاكك بانتظام.

أقدر أشتغل على مشروع كبير موجود عندي بالفعل؟

تقدر تقنيًا، لكن محرر Replit التقليدي أبطأ من محرر محلي زي VS Code بالمشاريع الكبيرة. لو عندك مشروع كبير قائم ويهمك الأداء والتحكم الدقيق، محرر محلي غالبًا خيار أفضل.

هل الخطة المجانية كافية أجرب فيها؟

تكفي لتجربة حقيقية — فيها كريدت مجاني يومي للـ Agent، قاعدة بيانات مدمجة، ونشر مشروع واحد مباشرة. لو تبي مشاريع متوازية أو تعاون فريق أوسع، تحتاج خطة Core أو Pro.