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。让我知道您是否需要进一步的帮助！