تريد بناء أداة صغيرة من المتصفح، ورؤية ملفاتها وتشغيلها بدل الاكتفاء بكود داخل محادثة؟ يوضح شرح Replit بالعربي كيف تبدأ مشروع ويب بمساعدة Replit Agent، وتختبر النتائج وتصلح الأخطاء وتراجع النسخة قبل نشرها. سنستخدم حاسبة تكاليف مشروع بسيطة، لأن صحة الحسابات تكشف جودة التطبيق أكثر مما تكشفها واجهة جميلة.
الخلاصة: ابدأ بوصف النتيجة ومعايير نجاحها، واطلب نسخة محدودة بلا حسابات أو مدفوعات، ثم اختبرها في Preview بأرقام تعرف إجاباتها. افحص وضع Agent وحدود الاستخدام قبل التنفيذ. راجعنا الوثائق الرسمية في 20 أكتوبر 2026؛ التمرين التالي مقترح للتعلم، وليس تطبيقًا اختبرناه على حساب مدفوع أو قياسًا لأداء المنصة.
إذا كنت تختار المنصة أصلًا، راجع مقارنة Replit وLovable وBolt لإنشاء التطبيقات. يركز هذا الدليل على العمل داخل Replit: وصف المهمة، ومراجعة الملفات والحسابات، ونقاط الاستعادة، وفهم الفرق بين بيئة التطوير والتطبيق المنشور.
ما هو Replit وما دور Agent؟
بيئة مشروع لا مجرد مولد نص
Replit منصة لبناء التطبيقات وتشغيلها، ويتولى Replit Agent المساعدة في إعداد المشروع وتنفيذ التغييرات انطلاقًا من وصف مكتوب. يتضمن سير العمل محادثة ومعاينة وأدوات وملفات. تستطيع استخدام هذه المساحة لفهم ما تغير، ثم اختبار النتيجة داخل التطبيق بدل الاعتماد على ملخص المساعد.
المساعد ينفذ ما يفهمه من المتطلبات، وقد يحتاج توضيحًا عندما يكون الطلب غامضًا. «حاسبة أرباح» مثلًا قد تعني إضافة هامش على التكلفة، أو حساب صافي نتيجة بعد المصروفات، أو مقارنة خيارات أسعار. حدد المعادلات والتسميات المطلوبة قبل اختيار الألوان، لأن خطأ المصطلح قد يجعل أداة تعمل برمجيًا وتضلل المستخدم عمليًا.
المشروع التجريبي مختلف عن منتج للجمهور
في البداية نريد حاسبة تقديرية لا تجمع بيانات ولا ترسل نتائج إلى خدمات خارجية. لا نحتاج تسجيل دخول أو قاعدة بيانات. عندما تنجح العملية الأساسية، يمكنك التفكير في حفظ المشاريع أو مشاركة تقرير، لكن كل إضافة تحتاج مراجعة لما يُخزن ومن يصل إليه وماذا تعني النتيجة للمستخدم.
إذا كان هدفك التعلم داخل محرر تقليدي ومقارنة مساعدات الكود، ستفيدك مقارنة Cursor وGitHub Copilot وDevin. أما اختيار Replit هنا فيجعل البناء والتشغيل والمعاينة ضمن بيئة سحابية واحدة، مع بقاء الحاجة إلى فهم ما طلبته والتحقق من الناتج.
تصميم الحاسبة قبل كتابة الطلب
حدد المدخلات والمعادلات
سنطلب أربعة مدخلات: ساعات العمل، وقيمة الساعة، والمصاريف المباشرة، ونسبة الإضافة على التكلفة. التكلفة الأساسية تساوي الساعات مضروبة في قيمة الساعة مضافًا إليها المصاريف. السعر التقديري يساوي التكلفة الأساسية مضروبة في واحد زائد نسبة الإضافة مقسومة على مئة. هذه قاعدة تعليمية مبسطة، وليست تسعيرًا تجاريًا كاملًا لكل المهن.
اكتب تعريفًا واضحًا للنسبة. إذا كانت التكلفة 100 وأضفت 20% عليها، فالسعر 120، والفارق 20 يمثل نحو 16.67% من سعر البيع. هذا يختلف عن استهداف هامش 20% من سعر البيع، الذي يعطي 125 عند استخدام التكلفة نفسها. لا تجعل التطبيق يخلط الإضافة والهامش تحت عنوان واحد.
جهّز حالات اختبار بإجابات معروفة
الحالة الأولى: خمس ساعات بقيمة 20، ومصاريف مباشرة 10؛ التكلفة الأساسية 110. مع إضافة 20% يصبح السعر التقديري 132، والفرق عن التكلفة 22. اكتب أن هذا الفرق ليس صافي ربح محاسبيًا شاملًا، لأن النموذج لم يدرج كل المصروفات أو الضرائب أو الالتزامات المحتملة.
الحالة الثانية تجعل النسبة صفرًا؛ يجب أن يبقى السعر مساويًا للتكلفة. واختبر حقلًا فارغًا ورقمًا سالبًا وقيمة عشرية. بهذه الحالات تعرف ما إذا كان التطبيق يطبق القاعدة، لا ما إذا كانت النتيجة تبدو معقولة. اختر طريقة عرض الكسور والتقريب قبل مشاركة الأداة مع أحد.
إنشاء تطبيق ويب في Replit خطوة بخطوة
1. اختر نوع المشروع ووضع العمل
ادخل من الموقع الرسمي إلى حسابك. يشرح دليل بناء أول تطبيق بدء محادثة واختيار Website، ثم تحديد وضع Free في المسار الموثق. قد تختلف الخيارات المتاحة بحسب حسابك وتحديث الواجهة؛ راجع نوع المشروع والوضع قبل إرسال طلب ينفذ عملًا.
ابدأ بالنوع الذي يخدم الحاسبة في المتصفح، ولا تختَر مشروع تطبيق هاتف لمجرد أنك تريد تصميمًا مناسبًا للشاشة الصغيرة. إذا عرضت المنصة ترقية أو انتقالًا إلى عمل مدفوع، اقرأ السبب والسعر قبل الموافقة. هذا الدليل لا يتطلب قبول ترقية تلقائية أو إضافة تكاملات خارجية لإجراء الحسابات.
2. أرسل طلبًا يحدد السلوك لا الشكل فقط
طلب مقترح: «أنشئ حاسبة تكاليف مشروع بالعربية واتجاه RTL. المدخلات: ساعات العمل، وقيمة الساعة، والمصاريف المباشرة، ونسبة الإضافة على التكلفة. احسب التكلفة الأساسية والسعر التقديري والفرق بينهما. ارفض الأرقام السالبة، ووضح الحقول الفارغة، واعرض النتائج بمنزلتين عشريتين. لا تضف حسابات أو قاعدة بيانات أو اتصالات خارجية. اكتب أن الحساب تقديري ولا يشمل كل المصروفات».
أضف المثال المرجعي: «خمس ساعات × 20، مع مصاريف 10 وإضافة 20%، يجب أن تعطي تكلفة 110 وسعرًا 132 وفارقًا 22». وجود قيمة متوقعة يساعد في الاختبار، لكنه لا يمنع خطأ في معادلة أخرى؛ ستظل بحاجة إلى تجربة الحالات الإضافية بعد اكتمال البناء.
3. افحص Preview قبل طلب التحسين
بعد أن يقدم Agent النسخة، أدخل الحالة المرجعية وغيّر كل حقل على حدة. هل تتغير النتيجة كما تتوقع؟ هل يعرض التطبيق صفرًا عند الحقول الناقصة أم يشرح سبب عدم الحساب؟ وهل بقيت رسالة التقدير ظاهرة؟ راجع النص الذي يراه المستخدم، لأن تسمية خاطئة قد تكون مؤثرة بقدر خطأ المعادلة.
جرّب زر إعادة الضبط إن وُجد، والتنقل بين الحقول بلوحة المفاتيح، وعرض الصفحة بحجم هاتف. لا تبدأ بإضافة رسم بياني وحفظ PDF قبل التأكد من صحة الأرقام. لكل ميزة جديدة تكلفة تنفيذ ومراجعة، وقد يصعب تتبع مصدر الخطأ إذا غيّرت منطق الحساب والتصميم والتخزين معًا.
قراءة التغييرات وطلب إصلاحات دقيقة
اطلب شرح ما تغير في الملفات
بعد تنفيذ ميزة، اطلب ملخصًا للملفات المتأثرة ومكان معادلة الحساب وطريقة التحقق من المدخلات. لا تحتاج حفظ كل أسطر المشروع، لكن من المفيد معرفة أين يوجد المنطق الأساسي. إذا أضاف المولد اتصالًا بخدمة رغم أنك طلبت حاسبة محلية، اسأل عن ضرورته واحذفه من النطاق إن لم تكن تحتاجه.
مثال إصلاح واضح: «عند إدخال صفر في نسبة الإضافة يظهر خطأ وكأن الحقل فارغ. الصفر قيمة صالحة. أصلح التحقق من هذا الحقل دون تغيير المعادلة أو تصميم الصفحة، ثم أعد اختبار المثال المرجعي». هذا الطلب يحدد العرض المتوقع وحدود التغيير ويسهل مراجعة النتيجة.
استخدم الاختبارات الآلية حيث تفيد
اطلب اختبارات لدالة الحساب تشمل المثال المرجعي والنسبة الصفرية والكسور والقيم غير الصالحة، إذا كانت بيئة المشروع تسمح بذلك. الاختبار المفيد يتحقق من نتيجة مستقلة معروفة، ولا يكتفي بأن الدالة أعادت رقمًا. راجع ما اختُبر وما لم يُختبر، ثم جرّب الواجهة بنفسك لأن صحة الدالة لا تثبت سلامة ربط الحقول بها.
وقد يفيدك شرح GitHub Copilot للمبتدئين إذا أردت فهم كتابة الاختبارات ومراجعة الكود داخل بيئة تطوير أخرى. لا تجعل الانتقال بين الأدوات ردًا أوليًا لكل عطل؛ احتفظ بالمشكلة والأمثلة والنتائج حتى تظل المراجعة متصلة وواضحة.
العربية والمدخلات الرقمية على الهاتف
الأرقام والفواصل تحتاج قرارًا واضحًا
اختبر الأرقام بالشكل الذي يكتبه جمهورك، مثل 12.5 أو الأرقام العربية، وقرر هل تريد دعم أكثر من شكل. إذا لم تدعم صيغة معينة، وضح للمستخدم الطريقة المقبولة برسالة مفهومة. لا تسمح لتحويل غير صحيح أن ينتج سعرًا يبدو طبيعيًا بينما تجاهل التطبيق الجزء العشري أو قرأ الفاصل على نحو مختلف.
افصل قيمة العملة عن القيمة الرقمية في العرض عند الحاجة، وحافظ على ترتيب مفهوم للنص العربي والأرقام. لا تجمع عملات مختلفة في العملية نفسها دون تحويل موثق. في النسخة التعليمية اختر وحدة واحدة أو تسمية عامة، لأن إضافة أسعار صرف حية ستغير نطاق التطبيق وتحتاج مصدر بيانات وتحديثًا وتكلفة محتملة.
التصميم يخدم إدخال الأرقام ومراجعتها
ضع اسمًا واضحًا لكل حقل، ولا تعتمد على نص مؤقت يختفي بعد الكتابة. أظهر النتيجة قرب المدخلات مع تفسير مختصر لما تشمله. عند ظهور خطأ، اذكر الحقل والقيمة المقبولة، ولا تمسح بقية المدخلات الصحيحة. اختبر لوحة المفاتيح على الهاتف وإمكانية الوصول إلى زر الحساب دون تمرير مربك.
إذا أضفت جدولًا للمشاريع لاحقًا، فاجعل القراءة ممكنة على الهاتف ببطاقات أو حاوية تمرير أفقي مناسبة. لا تصغر جميع الخطوط كي يتسع الجدول، ولا تترك النص ملاصقًا له من الأعلى والأسفل. هذه التفاصيل مهمة عندما تصبح الأداة جزءًا من موقع عربي يزوره الناس من شاشات مختلفة.
يمكنك صياغة متطلبات العرض ورسائل الأخطاء باستخدام برومبتات تصميم المواقع العربية وواجهات RTL. خصص القالب وفق الحاسبة التي تبنيها، وحافظ على اختبارات المعادلات والمدخلات؛ تحسين الواجهة وحده لا يثبت صحة الحساب.
Checkpoints والتراجع عن نسخة غير مناسبة
راجع نقطة الاستعادة قبل تطبيقها
تشرح وثائق Checkpoints التقاط حالة المشروع وإمكانية الرجوع إلى نقطة سابقة. استخدم وصف المرحلة وتوقيتها ونطاق التعديل لاختيار النسخة المناسبة. مثلًا، النسخة التي اجتازت اختبار 110 و132 أوضح من «آخر نسخة كانت تبدو جيدة» إذا كنت لا تتذكر ما تغير بعدها.
توضح الوثائق أن التراجع لا يغير قاعدة البيانات افتراضيًا، وأن إدراج قاعدة بيانات التطوير خيار منفصل، بينما استعادة بيانات الإنتاج ليست تلقائية بهذه الآلية. حتى لو كانت حاسبتنا بلا قاعدة بيانات، فهم هذا الفرق مهم قبل توسيعها إلى حفظ مشروعات أو عملاء حقيقيين. لا تتعامل مع استعادة الكود باعتبارها نسخة احتياطية شاملة لكل خدمة مرتبطة.
أعد الاختبارات بعد الاستعادة
قد تعود المعادلة الصحيحة بينما تفقد تحسينًا مطلوبًا في الهاتف، أو ترجع تسمية قديمة غير دقيقة. لذلك أعد حالات القبول كاملة بعد التراجع، ثم اطلب التغيير الجديد بنطاق أصغر. واحتفظ بملاحظات عن المرحلة المقبولة حتى تستطيع التمييز بين خطأ جديد ومشكلة كانت موجودة قبل الاستعادة.
المفاتيح والبيانات عند تطوير التطبيق
لا تحتاج الحاسبة الأولى إلى مفتاح API
المعادلات المحلية في تمريننا لا تحتاج إرسال بيانات لخدمة AI ولا تخزين مفتاح في الصفحة. إذا أردت لاحقًا خدمة خارجية، وضح ما سيرسل وما سيعود وأين ستُحفظ النتيجة. وجود Agent لبناء التطبيق لا يعني أن التطبيق الناتج يحتاج نموذج ذكاء اصطناعي ليؤدي كل عملية حسابية.
توثق Replit أداة Secrets لحفظ المفاتيح وبيانات الاتصال الحساسة كمتغيرات بيئة بدل تضمينها في الكود. اترك القيم غير الحساسة للإعدادات المناسبة، ولا تعرض الأسرار في الواجهة أو السجلات. وجود المفتاح في متغير خادم لا يبرر إرساله إلى المتصفح؛ يجب أن يبقى مسار الاستخدام نفسه صحيحًا.
إذا أضفت حفظ مشروعات خاصة
حدد من يملك كل مشروع ومن يستطيع قراءته أو تعديله، واختبر بحسابين تجريبيين. راجع أيضًا ما إذا كانت بيانات التطوير منفصلة عن بيانات التطبيق المنشور. توضح المسؤولية المشتركة أن منطق العمل والتحكم في الوصول يحتاجان وصفًا ومراجعة من صاحب المشروع، وليس اعتمادًا آليًا على الأداة.
هل Replit مجاني وكيف تضبط التكلفة؟
Free Mode وحدود Starter
تشرح صفحة Starter حدودًا يومية لاستخدام Agent حتى سقف شهري، ونشر تطبيق مجاني واحد يتوقف رابطه بعد 30 يومًا وفق الوثيقة وقت المراجعة. لا تخلط تجربة البناء أو المعاينة مع استضافة دائمة بلا قيود، وتحقق من المدة والحصة التي تظهر لحسابك.
تتيح بعض المزايا مثل Full build وPlan Mode والتكاملات وظائف أوسع ضمن الخطط المؤهلة. وتوضح وثائق فوترة AI اختلاف العمل المجاني عن العمل المدفوع المعتمد على جهد الطلب. لا يوجد عدد موحد من التطبيقات يمكن ضمانه من رصيد معين؛ حجم الميزة والإصلاحات والاستخدام السحابي يؤثر في التكلفة.
راقب البناء والتشغيل كلًا على حدة
راجع التسعير الحالي داخل الخطة التي تختارها، واقرأ إجمالي الفترة بدل مقارنة الرقم الشهري المكافئ فقط. تساعد أدوات إدارة الإنفاق على مراقبة الموارد والمشاريع وضبط حدود وميزانيات. تنبيه الاقتراب من حد ليس بالضرورة إيقافًا؛ تأكد من وظيفة الإعداد الذي تستخدمه.
اجعل أول هدف مدفوع، إن احتجته، ميزة صغيرة يمكن تقييمها. سجل ما أنجزه الطلب وما إذا كانت النتيجة اجتازت الاختبار. إن توسعت الحاسبة إلى خدمات خارجية أو حفظ دائم، أضف تكاليف التشغيل إلى قرارك؛ توقف Agent عن كتابة الكود لا يعني أن الموارد المنشورة توقفت عن الاستهلاك.
نشر التطبيق ومراجعة النسخة العامة
افحص إعدادات Publishing قبل التأكيد
يوضح دليل Publishing فتح الأداة من Tools أو زر Publish، ثم مراجعة العنوان والوصول والبيانات والأمان وإعدادات التشغيل. تقترح المنصة عنوانًا ينتهي بـreplit.app. اختر ما يناسب طبيعة تطبيقك وخطتك، ولا تعتبر نجاح المعاينة موافقة على فتح كل البيانات للعامة.
بعد النشر افتح الرابط النهائي وأدخل الأمثلة نفسها، ثم جرّب إعادة التحميل والهاتف ورسائل الخطأ. إذا تغيرت النسخة في المحرر لاحقًا، راجع إجراء تحديث النشر وافحص أن الرابط العام وصلته النسخة المطلوبة. احتفظ بإصدار تعرف نتائجه ويمكن العودة إليه بدل تعديل التطبيق العام دون اختبار.
متى تكون أول نسخة ناجحة؟
تنجح النسخة عندما تطبق المعادلات وتشرح حدودها وتتعامل مع المدخلات المتوقعة، ويمكنك فهم التعديلات وتكلفتها. لا تحتاج في البداية إلى تسجيل ودفع وتصدير ولوحة إدارة كي تتعلم. ابنِ وظيفة واحدة صحيحة، ثم أضف ما يحتاجه المستخدم بعد تجربة واضحة، مع إعادة الاختبار في كل مرحلة.
