CustomCodeEditor

Пользовательский код редактор

Этот проект представляет собой строитель кода на основе React, который использует редактор Monaco. Это позволяет пользователям писать и выполнять фрагменты кода в веб -браузере. Он использует судью0 в качестве системы выполнения кода

Начиная

Следуйте этим инструкциям, чтобы запустить проект на местной машине.

Предварительные условия

Node.js установлен на вашей машине NPM или диспетчера пакетов пряжи

Установка

Клонировать репозиторий к местной машине:

 git clone <repository-url>

• Примечание:- Пожалуйста, заполните необходимые ключи в файле .env для успешных материалов кода

Без докера

Установить зависимости с использованием NPM или пряжи: Bash

 npm install
# or
yarn install

Чтобы начать проект

 npm run start

С докером

Предварительные условия

Перед началом проекта убедитесь, что у вас установлен 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
   

Настройка судьи0 с Rapidapi

1. Перейдите к судье 0 :

   • Начните с перейти на страницу судьи на Rapidapi.
   • Выберите основной план , который предлагает ограничение в 50 запросов в день.

2. Подпишитесь на базовый план :

   • Rapidapi проводит судья 0, поэтому вам нужно подписаться на базовый план на 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.

Следуя этим шагам, вы сможете настроить Dudge0 для предложений кода, используя инфраструктуру 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 и API -конечных точек.

Конфигурация настройки сервера

Создайте файл .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, чтобы получить доступ к приложению.

Использование

• Напишите свой код в редакторе Monaco.
• Выполните фрагмент кода, нажав кнопку «Запустить».
• Просмотреть выход на консоли или выходной панели.

Важная информация

В настоящее время URL -адрес проекта базируется из бесплатной версии Dude0. Это означает, что максимум может иметь 50 запросов в день.

Внося

Взносы приветствуются! Не стесняйтесь отправлять запросы на привлечение или открыть проблемы.

Участники

Гитпод

В среде разработки без облаков вы можете напрямую начать кодирование.

Вы можете использовать gitpod в облаке

---

Не стесняйтесь настроить этот readme.md в соответствии с конкретными требованиями и функциями вашего проекта. Дайте мне знать, если вам нужна дополнительная помощь!