CustomCodeEditor

ตัวแก้ไขรหัสที่กำหนดเอง

โครงการนี้เป็นตัวสร้างรหัสที่ใช้ปฏิกิริยาที่ใช้ตัวแก้ไขโมนาโก ช่วยให้ผู้ใช้สามารถเขียนและเรียกใช้งานตัวอย่างรหัสภายในเว็บเบราว์เซอร์ ใช้ Judge0 เป็นระบบการดำเนินการรหัส

เริ่มต้น

ทำตามคำแนะนำเหล่านี้เพื่อให้โครงการทำงานบนเครื่องในพื้นที่ของคุณ

ข้อกำหนดเบื้องต้น

Node.js ติดตั้งบนเครื่อง NPM หรือ Manager Harn Manager ของคุณ

การติดตั้ง

โคลนที่เก็บไปยังเครื่องในพื้นที่ของคุณ:

 git clone <repository-url>

• หมายเหตุ:- โปรดกรอกคีย์ที่จำเป็นในไฟล์ .env สำหรับการส่งรหัสที่ประสบความสำเร็จ

ไม่มีนักเทียบท่า

ติดตั้งการพึ่งพาโดยใช้ NPM หรือเส้นด้าย: Bash

 npm install
# or
yarn install

เพื่อเริ่มโครงการ

 npm run start

กับ Docker

ข้อกำหนดเบื้องต้น

ก่อนเริ่มต้นด้วยโครงการตรวจสอบให้แน่ใจว่าคุณติดตั้ง Docker แล้ว ถ้าไม่ทำตามขั้นตอนเหล่านี้เพื่อติดตั้ง Docker:

การติดตั้ง Docker

1. Windows :

   • ดาวน์โหลด Docker Desktop จาก Docker Hub
   • ทำตามคำแนะนำการติดตั้ง

2. Mac :

   • ดาวน์โหลด Docker Desktop จาก Docker Hub
   • ทำตามคำแนะนำการติดตั้ง

3. Linux :

   • การติดตั้งเครื่องยนต์ 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
   

การตั้งค่า Judge0 ด้วย Rapidapi

1. นำทางไปยังผู้พิพากษา 0 :

   • เริ่มต้นด้วยการไปที่หน้า 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

หากต้องการเปิดใช้งานการรับรองความถูกต้องของ 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 ด้วยค่าที่เหมาะสมสำหรับจุดสิ้นสุด API และ Judge0 API ของคุณ

การกำหนดค่าการตั้งค่าเซิร์ฟเวอร์

สร้างไฟล์. env ในไดเรกทอรีรูทของโครงการของคุณหากไม่มีอยู่แล้ว ตั้งค่าตัวแปรสภาพแวดล้อม Judge0_submission_url ในไฟล์. ENV ตัวแปรนี้ควรชี้ไปที่ URL ของจุดสิ้นสุดของ Judge0 API ที่คุณต้องการใช้สำหรับการดำเนินการรหัส ตัวอย่างเช่น: plaintext

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

แทนที่ https://api.judge0.com/submissions ด้วย URL ที่เหมาะสมสำหรับจุดสิ้นสุดของ Judge0 API ของคุณ

การเรียกใช้เซิร์ฟเวอร์การพัฒนาเมื่อการกำหนดค่าเสร็จสมบูรณ์คุณสามารถเริ่มต้นเซิร์ฟเวอร์การพัฒนาเพื่อดูตัวสร้างรหัสปฏิกิริยาในการดำเนินการ

 npm start
# or
yarn start

เปิดเว็บเบราว์เซอร์ของคุณและนำทางไปที่ http: // localhost: 3000 เพื่อเข้าถึงแอปพลิเคชัน

การใช้งาน

• เขียนรหัสของคุณในตัวแก้ไขโมนาโก
• เรียกใช้ข้อมูลโค้ดโดยคลิกที่ปุ่ม "เรียกใช้"
• ดูเอาต์พุตในคอนโซลหรือแผงเอาต์พุต

ข้อมูลสำคัญ

ปัจจุบัน URL โครงการมีพื้นฐานมาจาก Judge0 เวอร์ชันฟรีซึ่งหมายความว่าส่วนใหญ่สามารถมี 50 คำขอต่อวัน

การบริจาค

ยินดีต้อนรับ! อย่าลังเลที่จะส่งคำขอดึงหรือปัญหาเปิด

ผู้มีส่วนร่วม

Gitpod

ในสภาพแวดล้อมการพัฒนาแบบไม่มีเมฆที่คุณสามารถเริ่มเขียนโค้ดได้โดยตรง

คุณสามารถใช้ gitpod ในคลาวด์

---

อย่าลังเลที่จะปรับแต่ง readme.md นี้ตามข้อกำหนดและคุณสมบัติเฉพาะของโครงการของคุณ แจ้งให้เราทราบหากคุณต้องการความช่วยเหลือเพิ่มเติม!