CustomCodeEditor

自定義代碼編輯器

該項目是利用摩納哥編輯器的基於React的代碼構建器。它允許用戶在Web瀏覽器中編寫和執行代碼片段。它使用Judge0作為代碼執行系統

入門

請按照以下說明在本地計算機上啟動並運行該項目。

先決條件

NODE.JS安裝在您的機器NPM或紗線軟件包管理器上

安裝

將存儲庫克隆到您的本地計算機：

 git clone <repository-url>

• 注意： - 請在.env文件中填寫必要的鍵以進行成功代碼提交

沒有Docker

使用NPM或紗線安裝依賴項：bash

 npm install
# or
yarn install

開始項目

 npm run start

與Docker

先決條件

從項目開始之前，請確保您安裝了Docker。如果沒有，請按照以下步驟安裝Docker：

Docker安裝

1. Windows ：

   • 從Docker Hub下載Docker桌面。
   • 按照安裝說明進行操作。

2. 蘋果：

   • 從Docker Hub下載Docker桌面。
   • 按照安裝說明進行操作。

3. Linux ：

   • Docker Engine安裝因Linux分佈而異。有關特定於Linux發行版的安裝說明，請參閱Docker的官方文檔。

要使用Docker組成：

1. 建立和運行項目：

    # Detach mode
   docker-compose up -d

    docker-compose up
   

2. 訪問該項目：

   • Docker組合啟動了容器後，請在http://localhost:3000使用您的Web瀏覽器訪問項目。

3. 關閉項目

    docker-compose down
   

使用Rapidapi設置法官0

1. 導航到法官0：

   • 首先進入Rapidapi上的Judge0頁面。
   • 選擇基本計劃，該計劃每天提供50個請求的限制。

2. 註冊基本計劃：

   • RapidApi主持Judge0，因此您需要註冊Rapidapi的基本計劃。
   • 遵循註冊過程開始。

3. 訪問Rapidapi儀表板：

   • 註冊後，前往Rapidapi儀表板。
   • 在導航欄中，選擇API集線器。

4. 導航到API部分：

   • 單擊端點查看
   • 您將看到多個端點，例如提交，關於語言和語言。

5. 使用提交端點：

   • 對於代碼提交，請轉到“提交”端點，然後選擇“創建提交” 。
   • 在這裡，您會發現X-RapidAPI-Key ， X-RapidAPI-Host和API調用所需的URL（ url ）。 URL位於“代碼片段”部分下方。

6. 複製所需鍵：

   • 複製RAPIDAPI_HOST和RAPIDAPI_KEY值。這些對於執行代碼執行系統的API調用是必要的。
   • 確保您保存這些鑰匙，因為它們將在API請求中使用。

通過遵循以下步驟，您將可以使用RapidApi的基礎架構設置裁判0來進行代碼提交，從而使您能夠在應用程序中執行和評估代碼。

火基配置

1. 在firebase.google.com上創建一個firebase帳戶，然後轉到控制台。
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. 在Firebase控制台中啟用GitHub身份驗證：

   • 轉到Firebase控制台中的Firebase項目。
   • 導航到身份驗證>登錄方法。
   • 啟用GitHub作為登錄提供商。
   • 請注意Firebase提供的授權回調URL ，因為您需要為Github Oauth應用程序提供此功能。

2. 在GitHub上註冊新的OAuth應用程序：

   • 轉到您的GitHub開發人員設置。
   • 單擊OAuth應用程序，然後選擇新的OAuth應用程序。
   • 填寫申請詳細信息：
     • 應用程序名稱：自定義代碼編輯器
     • 主頁URL ：
       • 對於本地開發，請使用http://localhost:3000
       • 對於生產部署，請使用您的公共URL（例如， https://custom-code-editor.vercel.app/ ）
     • 授權回調URL ：
       • 使用Firebase提供的授權回調URL 。
   • 單擊註冊申請。

3. 檢索GitHub客戶端ID和客戶端秘密：

   • 註冊應用程序後，您將在Github Oauth應用程序設置中看到客戶端ID和客戶端秘密。複製這些值。

4. 將github oauth憑據添加到firebase：

   • 返回Firebase控制台，然後返回GitHub提供商配置。
   • 從GitHub輸入客戶ID和客戶端秘密。
   • 保存這些設置。

5. 更新環境變量：

   • 在您的項目root中打開.env文件，並添加以下內容：

      REACT_APP_GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID
     REACT_APP_GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET
     

   • 用您從github複製的值替換YOUR_GITHUB_CLIENT_ID和YOUR_GITHUB_CLIENT_SECRET 。

本地配置

• 如果該項目尚不存在，則在項目的根目錄中創建.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

用適合您的快速API和judge0 API端點的適當值替換your_host_url，your_secret_key和your_submissions_url。

服務器設置配置

如果該項目尚不存在，則在項目的根目錄中創建.ENV文件。在.env文件中設置julter0_submission_url環境變量。此變量應指向您要用於執行代碼的Julte0 API端點的URL。例如：明文

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

替換https://api.judge0.com/submissions，用適合您的judge0 API端點的URL替換。

運行開發服務器後，一旦配置完成，您就可以啟動開發服務器以查看React Code Builder的操作。

 npm start
# or
yarn start

打開您的Web瀏覽器，然後導航到http：// localhost：3000來訪問該應用程序。

用法

• 在摩納哥編輯中寫下您的代碼。
• 通過單擊“運行”按鈕來執行代碼段。
• 查看控制台或輸出面板中的輸出。

重要信息

目前，該項目URL基於Judge0的免費版本，這意味著每天最多可以有50條請求。

貢獻

歡迎捐款！隨時提交拉力請求或開放問題。

貢獻者

gitpod

在無雲開發環境中，您可以直接開始編碼。

您可以在雲中使用gitpod

---

根據您的項目的特定要求和功能，請隨時自定義此readme.md。讓我知道您是否需要進一步的幫助！