CustomCodeEditor

Benutzerdefinierte Code -Editor

Dieses Projekt ist ein React-basierter Code Builder, der den Monaco-Editor verwendet. Dadurch können Benutzer Code -Snippets in einem Webbrowser schreiben und ausführen. Es verwendet Richter0 als Codeausführungssystem

Erste Schritte

Befolgen Sie diese Anweisungen, um das Projekt auf Ihre lokale Maschine in Betrieb zu nehmen.

Voraussetzungen

Node.js auf Ihrem Maschinen -NPM- oder Garnpaket -Manager installiert

Installation

Klonen Sie das Repository in Ihre lokale Maschine:

 git clone <repository-url>

• Hinweis:- Bitte geben Sie die erforderlichen Schlüssel in der .env Datei für erfolgreiche Code-Einreichungen aus

Ohne Docker

Installieren Sie Abhängigkeiten mit NPM oder Garn: Bash

 npm install
# or
yarn install

Projekt starten

 npm run start

Mit Docker

Voraussetzungen

Stellen Sie vor Beginn des Projekts sicher, dass Sie Docker installiert haben. Wenn nicht, befolgen Sie diese Schritte, um Docker zu installieren:

Docker -Installation

1. Fenster :

   • Laden Sie Docker Desktop von Docker Hub herunter.
   • Befolgen Sie die Installationsanweisungen.

2. MAC :

   • Laden Sie Docker Desktop von Docker Hub herunter.
   • Befolgen Sie die Installationsanweisungen.

3. Linux :

   • Die Installation der Docker Engine variiert je nach Linux -Verteilung. In der offiziellen Dokumentation von Docker finden Sie die für Ihre Linux -Verteilung spezifischen Installationsanweisungen.

Um das Projekt mit Docker Compose zu starten:

1. Bauen und führen Sie das Projekt aus:

    # Detach mode
   docker-compose up -d

    docker-compose up
   

2. Zugriff auf das Projekt:

   • Sobald Docker Compose die Container gestartet hat, greifen Sie mit Ihrem Webbrowser unter http://localhost:3000 auf das Projekt zu.

3. Schließen Projekt

    docker-compose down
   

Einrichtung von Judge0 mit Rapidapi

1. Navigieren Sie zu Richter0 :

   • Gehen Sie zunächst auf die Seite Judge0 auf Rapidapi.
   • Wählen Sie den Basisplan aus, der ein Limit von 50 Anfragen pro Tag bietet.

2. Melden Sie sich für den Grundplan an :

   • Rapidapi veranstaltet Richter0, daher müssen Sie sich für den Grundplan für Rapidapi anmelden.
   • Folgen Sie dem Anmeldungsprozess, um loszulegen.

3. Greifen Sie auf das Rapidapi -Dashboard zu :

   • Nachdem Sie sich angemeldet haben, gehen Sie zum Rapidapi -Dashboard.
   • Wählen Sie in der Navigationsleiste die API -Hub aus.

4. Navigieren Sie zum Abschnitt der API :

   • Klicken Sie auf Endpunkte , um anzuzeigen
   • Sie werden mehrere Endpunkte wie Einreichungen, und Sprachen sehen.

5. Verwenden des Endpunkts der Einreichungen :

   • Für Code -Einreichungen wechseln Sie zum Einreichungsendpunkt und wählen Sie dann die Einreichung erstellen .
   • Hier finden Sie X-RapidAPI-Key , X-RapidAPI-Host und die URL ( url ), die für API-Anrufe benötigt wird. Die URL befindet sich unter dem Abschnitt "Code -Snippets".

6. Kopieren Sie die erforderlichen Schlüssel :

   • Kopieren Sie die Werte RAPIDAPI_HOST und RAPIDAPI_KEY . Diese sind erforderlich, um API -Aufrufe an das Codeausführungssystem durchzuführen.
   • Stellen Sie sicher, dass Sie diese Schlüssel gespeichert haben, da diese in Ihren API -Anfragen verwendet werden.

Wenn Sie diese Schritte befolgen, können Sie Richter0 für Code -Einreichungen mithilfe der Infrastruktur von Rapidapi einrichten, mit der Sie Code in Ihrer Anwendung ausführen und bewerten können.

Firebase -Konfiguration

1. Erstellen Sie ein Firebase -Konto unter Firebase.google.com und gehen Sie zur Konsole.
2. Gehen Sie zur Authentifizierung.
3. Wählen Sie bei der Anmethode den Google-Anbieter aus.
4. Gehen Sie zu Einstellungen und Sie werden autorisierte Domänen sehen.
5. Fügen Sie Ihre Produktions-URL in autorisierten Domänen für unser Projekt hinzu: https://custom-code-editor.vercel.app/
6. Erstellen Sie eine .env -Datei in Ihrem Stammverzeichnis und fügen Sie die folgenden Werte hinzu:

 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 -Authentifizierungskonfiguration

Befolgen Sie die folgenden Schritte, um die GitHub -Authentifizierung für den benutzerdefinierten Code -Editor zu aktivieren:

1. Aktivieren Sie die GitHub -Authentifizierung in der Firebase -Konsole:

   • Gehen Sie zu Ihrem Firebase -Projekt in der Firebase -Konsole.
   • Navigieren Sie zur Authentifizierung > Anmeldemethode .
   • Aktivieren Sie GitHub als Anmeldebereicher.
   • Beachten Sie die von Firebase bereitgestellte Callback -URL der Autorisierung , da Sie dies für Ihre Github OAuth -App benötigen.

2. Registrieren Sie eine neue OAuth -Anwendung auf GitHub:

   • Gehen Sie zu Ihren GitHub -Entwicklereinstellungen.
   • Klicken Sie auf OAuth -Apps und wählen Sie neue OAuth -App .
   • Füllen Sie die Anwendungsdetails aus:
     • Bewerbungsname : Benutzerdefinierte Code -Editor
     • Homepage URL :
       • Verwenden Sie für die lokale Entwicklung http://localhost:3000
       • Verwenden Sie für die Produktionsbereitstellung Ihre öffentliche URL (z. B. https://custom-code-editor.vercel.app/ )
     • Autorisierungsrückruf -URL :
       • Verwenden Sie die von Firebase bereitgestellte Callback -URL der Autorisierung .
   • Klicken Sie auf Registrierungsanwendung .

3. GitHub Client -ID und Client -Geheimnis abrufen:

   • Sobald die App registriert ist, sehen Sie die Client -ID und das Client -Geheimnis in den Einstellungen von Github OAuth App. Kopieren Sie diese Werte.

4. Fügen Sie GitHub OAuth -Anmeldeinformationen zu Firebase hinzu:

   • Kehren Sie zur Firebase -Konsole zurück und kehren Sie zur Konfiguration der Github -Anbieter zurück.
   • Geben Sie die Client -ID und das Client -Geheimnis von GitHub ein.
   • Speichern Sie diese Einstellungen.

5. Umgebungsvariablen aktualisieren:

   • Öffnen Sie Ihre .env -Datei in Ihrem Projektstamm und fügen Sie Folgendes hinzu:

      REACT_APP_GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID
     REACT_APP_GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET
     

   • Ersetzen Sie YOUR_GITHUB_CLIENT_ID und YOUR_GITHUB_CLIENT_SECRET durch die von GitHub kopierten Werte.

Lokale Konfiguration

• Erstellen Sie eine .env -Datei im Stammverzeichnis Ihres Projekts, wenn es noch nicht vorhanden ist.
• Sie können Inhalte von .env.example nach .env kopieren. Sie können den folgenden Befehl ausführen.

   cp .env.example .env
  

• Legen Sie die folgenden Umgebungsvariablen in der Datei .env fest:

 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

Ersetzen Sie Ihren_HOST_URL, YOUR_SECRET_KEY & YOUR_SUBMENS_URL durch die entsprechenden Werte für Ihre schnellen API- und Richter0 -API -Endpunkte.

Server -Setup -Konfiguration

Erstellen Sie eine .env -Datei im Stammverzeichnis Ihres Projekts, wenn es noch nicht vorhanden ist. Legen Sie die Umgebungsvariable der urth -urth -submission_url in der .env -Datei fest. Diese Variable sollte auf die URL des API -Endpunkts von Richter0 hinweisen, die Sie für die Codeausführung verwenden möchten. Zum Beispiel: Klartext

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

Ersetzen Sie https://api.judge0.com/submissions durch die entsprechende URL für Ihren Richter0 -API -Endpunkt.

Ausführen des Entwicklungsservers Nach Abschluss der Konfiguration können Sie den Entwicklungsserver starten, um den React -Code -Builder in Aktion anzuzeigen.

 npm start
# or
yarn start

Öffnen Sie Ihren Webbrowser und navigieren Sie zu http: // localhost: 3000, um auf die Anwendung zuzugreifen.

Verwendung

• Schreiben Sie Ihren Code in den Monaco -Editor.
• Führen Sie den Code -Snippet aus, indem Sie auf die Schaltfläche "Ausführen" klicken.
• Zeigen Sie die Ausgabe in der Konsole- oder Ausgangsfeld an.

Wichtige Informationen

Derzeit basiert die Projekt -URL aus der kostenlosen Version von Richter0. Dies bedeutet höchstens 50 Anfragen pro Tag.

Beitragen

Beiträge sind willkommen! Fühlen Sie sich frei, Pull -Anfragen oder offene Probleme einzureichen.

Mitwirkende

Gitpod

In der Cloud-freien Entwicklungsumgebung, in der Sie direkt mit dem Codieren beginnen können.

Sie können Gitpod in der Cloud verwenden

---

Sie können diese readme.md an die spezifischen Anforderungen und Funktionen Ihres Projekts anpassen. Lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen!