CustomCodeEditor

محرر رمز مخصص

هذا المشروع هو منشئ رمز قائم على رد الفعل يستخدم محرر موناكو. يسمح للمستخدمين بكتابة وتنفيذ مقتطفات التعليمات البرمجية داخل متصفح الويب. ويستخدم Judge0 كنظام تنفيذ رمز

ابدء

اتبع هذه التعليمات للحصول على المشروع وتشغيله على الجهاز المحلي الخاص بك.

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

Node.js مثبتة على جهاز NPM أو مدير الغزل

تثبيت

استنساخ المستودع إلى جهازك المحلي:

 git clone <repository-url>

• ملاحظة:- يرجى ملء المفاتيح اللازمة في ملف .env لتقديمات الرمز الناجح

بدون Docker

تثبيت التبعيات باستخدام NPM أو الغزل: باش

 npm install
# or
yarn install

لبدء المشروع

 npm run start

مع Docker

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

قبل البدء بالمشروع ، تأكد من تثبيت Docker. إذا لم يكن كذلك ، اتبع هذه الخطوات لتثبيت Docker:

التثبيت Docker

1. Windows :

   • قم بتنزيل Docker Desktop من Docker Hub.
   • اتبع تعليمات التثبيت.

2. ماك :

   • قم بتنزيل Docker Desktop من Docker Hub.
   • اتبع تعليمات التثبيت.

3. لينكس :

   • يختلف تثبيت محرك Docker عن طريق توزيع Linux. ارجع إلى الوثائق الرسمية لـ Docker للحصول على تعليمات التثبيت الخاصة بتوزيع Linux الخاص بك.

لبدء المشروع باستخدام Docker Compose:

1. بناء وتشغيل المشروع:

    # Detach mode
   docker-compose up -d

    docker-compose up
   

2. الوصول إلى المشروع:

   • بمجرد أن تبدأ Docker Compose الحاويات ، يمكنك الوصول إلى المشروع باستخدام متصفح الويب الخاص بك على http://localhost:3000 .

3. إغلاق المشروع

    docker-compose down
   

إنشاء القاضي مع Rapidapi

1. انتقل إلى Judge0 :

   • ابدأ بالذهاب إلى صفحة Judge0 على Rapidapi.
   • حدد الخطة الأساسية ، التي توفر 50 طلبًا يوميًا.

2. الاشتراك في الخطة الأساسية :

   • يستضيف Rapidapi Judge0 ، لذلك تحتاج إلى الاشتراك في الخطة الأساسية على Rapidapi.
   • اتبع عملية الاشتراك للبدء.

3. الوصول إلى لوحة معلومات Rapidapi :

   • بعد الاشتراك ، انتقل إلى لوحة القيادة Rapidapi.
   • في شريط التنقل ، حدد API Hub .

4. انتقل إلى قسم API :

   • انقر على نقاط النهاية للعرض
   • سترى نقاط نهاية متعددة مثل التقديمات واللغات واللغات.

5. باستخدام نقطة نهاية التقديمات :

   • لتقديمات الرمز ، انتقل إلى نقطة نهاية التقديمات ثم حدد إنشاء تقديم .
   • هنا ، ستجد X-RapidAPI-Key و X-RapidAPI-Host و URL ( url ) اللازمة لمكالمات API. يقع عنوان URL أسفل قسم "قصاصات الكود".

6. نسخ المفاتيح المطلوبة :

   • انسخ قيم RAPIDAPI_HOST و RAPIDAPI_KEY . هذه ضرورية لإجراء مكالمات API إلى نظام تنفيذ التعليمات البرمجية.
   • تأكد من حفظ هذه المفاتيح حيث سيتم استخدامها في طلبات API الخاصة بك.

من خلال اتباع هذه الخطوات ، ستتمكن من إعداد Judge0 لتقديم الطلبات المدونة باستخدام البنية التحتية لـ Rapidapi ، مما يتيح لك تنفيذ الرمز وتقييمه داخل التطبيق الخاص بك.

تكوين Firebase

1. قم بإنشاء حساب Firebase على firebase.google.com وانتقل إلى وحدة التحكم.
2. اذهب إلى المصادقة.
3. في طريقة تسجيل الدخول ، اختر مزود Google.
4. انتقل إلى الإعدادات وسترى المجالات المعتمدة.
5. أضف عنوان URL لإنتاجك في المجالات المعتمدة لمشروعنا: https://custom-code-editor.vercel.app/
6. قم بإنشاء ملف .env في دليل الجذر الخاص بك وأضف هذه القيم:

 REACT_APP_FIREBASE_API_KEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""

تكوين مصادقة جيثب

لتمكين مصادقة GitHub لمحرر التعليمات البرمجية المخصصة ، اتبع الخطوات هذه:

1. تمكين مصادقة github في وحدة التحكم في Firebase:

   • انتقل إلى مشروع Firebase الخاص بك في وحدة التحكم Firebase.
   • انتقل إلى المصادقة > طريقة تسجيل الدخول .
   • تمكين Github كمقدم تسجيل الدخول.
   • لاحظ عنوان URL لاستدعاء الترخيص الذي توفره FireBase ، حيث ستحتاج إلى هذا لتطبيق GitHub Oauth الخاص بك.

2. قم بتسجيل تطبيق Oauth جديد على Github:

   • انتقل إلى إعدادات مطور GitHub.
   • انقر على تطبيقات OAUTH وحدد تطبيق OAUTH الجديد .
   • املأ تفاصيل الطلب:
     • اسم التطبيق : محرر الرمز المخصص
     • عنوان URL للصفحة الرئيسية :
       • للتنمية المحلية ، استخدم http://localhost:3000
       • لنشر الإنتاج ، استخدم عنوان URL العام الخاص بك (على سبيل المثال ، https://custom-code-editor.vercel.app/ )
     • URL ترخيص عنوان الاتصال :
       • استخدم عنوان URL للترخيص الذي توفره Firebase.
   • انقر فوق "تسجيل التطبيق" .

3. استرداد معرف العميل Github وسرية العميل:

   • بمجرد تسجيل التطبيق ، سترى معرف العميل وسرية العميل في إعدادات تطبيق Github Oauth. انسخ هذه القيم.

4. أضف بيانات اعتماد Github Oauth إلى Firebase:

   • ارجع إلى وحدة تحكم Firebase والعودة إلى تكوين مزود GitHub .
   • أدخل معرف العميل وسرية العميل من Github.
   • احفظ هذه الإعدادات.

5. تحديث متغيرات البيئة:

   • افتح ملف .env الخاص بك في جذر المشروع الخاص بك وأضف ما يلي:

      REACT_APP_GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID
     REACT_APP_GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET
     

   • استبدل YOUR_GITHUB_CLIENT_ID و YOUR_GITHUB_CLIENT_SECRET بالقيم التي نسختها من github.

التكوين المحلي

• قم بإنشاء ملف .env في الدليل الجذر لمشروعك إذا لم يكن موجودًا بالفعل.
• يمكنك نسخ المحتوى من .env.example إلى .env ، يمكنك تشغيل الأمر أدناه.

   cp .env.example .env
  

• اضبط متغيرات البيئة التالية في ملف .env:

 REACT_APP_RAPID_API_HOST=YOUR_HOST_URL
REACT_APP_RAPID_API_KEY=YOUR_SECRET_KEY
REACT_APP_RAPID_API_URL=YOUR_SUBMISSIONS_URL

# key for docker container name
COMPOSE_PROJECT_NAME=custom_code_editor

استبدل your_host_url ، your_secret_key ، & your_submissions_url مع القيم المناسبة لنقاط نهاية واجهة برمجة التطبيقات السريعة و judge0.

تكوين إعداد الخادم

قم بإنشاء ملف .env في الدليل الجذر لمشروعك إذا لم يكن موجودًا بالفعل. قم بتعيين متغير بيئة judge0_submission_url في ملف .env. يجب أن يشير هذا المتغير إلى عنوان URL لنقطة نهاية API Judge0 التي تريد استخدامها لتنفيذ التعليمات البرمجية. على سبيل المثال: نص عادي

 JUDGE0_SUBMISSION_URL=https://api.judge0.com/submissions

استبدل https://api.judge0.com/submissions بعنوان URL المناسب لنقطة نهاية API الخاصة بك.

تشغيل خادم التطوير بمجرد اكتمال التكوين ، يمكنك بدء تشغيل خادم التطوير لرؤية منشئ شفرة React في العمل.

 npm start
# or
yarn start

افتح متصفح الويب الخاص بك وانتقل إلى http: // localhost: 3000 للوصول إلى التطبيق.

الاستخدام

• اكتب الكود الخاص بك في محرر موناكو.
• قم بتنفيذ مقتطف الرمز بالنقر فوق الزر "تشغيل".
• عرض الإخراج في وحدة التحكم أو لوحة الإخراج.

معلومات مهمة

حاليًا ، يعتمد عنوان URL للمشروع على الإصدار المجاني من Judge0 ، وهذا يعني على الأكثر يمكن أن يكون لدى المرء 50 طلبًا يوميًا.

المساهمة

المساهمات مرحب بها! لا تتردد في تقديم طلبات السحب أو فتح المشكلات.

المساهمين

gitpod

في بيئة التطوير الخالية من السحابة حيث يمكنك البدء مباشرة في الترميز.

يمكنك استخدام gitpod في السحابة

---

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