CustomCodeEditor

Editor Kode Kustom

Proyek ini adalah pembangun kode berbasis reaksi yang menggunakan editor Monako. Ini memungkinkan pengguna untuk menulis dan menjalankan cuplikan kode di dalam browser web. Itu menggunakan judget0 sebagai sistem eksekusi kode

Memulai

Ikuti instruksi ini untuk menjalankan proyek dan berjalan di mesin lokal Anda.

Prasyarat

Node.js diinstal pada mesin Anda NPM atau Manajer Paket Yarn

Instalasi

Klon Repositori ke Mesin Lokal Anda:

 git clone <repository-url>

• Catatan:- Harap isi tombol yang diperlukan di file .env untuk pengiriman kode yang berhasil

Tanpa Docker

Instal dependensi menggunakan NPM atau Benang: Bash

 npm install
# or
yarn install

Untuk memulai proyek

 npm run start

Dengan Docker

Prasyarat

Sebelum memulai dengan proyek, pastikan Anda memasang Docker. Jika tidak, ikuti langkah -langkah ini untuk menginstal Docker:

Instalasi Docker

1. Windows :

   • Unduh Docker Desktop dari Docker Hub.
   • Ikuti instruksi instalasi.

2. Mac :

   • Unduh Docker Desktop dari Docker Hub.
   • Ikuti instruksi instalasi.

3. Linux :

   • Instalasi mesin Docker bervariasi berdasarkan distribusi Linux. Lihat dokumentasi resmi Docker untuk instruksi pemasangan khusus untuk distribusi Linux Anda.

Untuk memulai proyek menggunakan Docker Compose:

1. Bangun dan jalankan proyek:

    # Detach mode
   docker-compose up -d

    docker-compose up
   

2. Akses proyek:

   • Setelah Docker Compose memulai wadah, akses proyek menggunakan browser web Anda di http://localhost:3000 .

3. Proyek Tutup

    docker-compose down
   

Menyiapkan Judge0 dengan Rapidapi

1. Arahkan ke Hakim0 :

   • Mulailah dengan pergi ke halaman Judget0 di Rapidapi.
   • Pilih paket dasar , yang menawarkan batas 50 permintaan per hari.

2. Daftar untuk rencana dasar :

   • Rapidapi menjadi tuan rumah Judge0, jadi Anda harus mendaftar untuk rencana dasar di Rapidapi.
   • Ikuti proses pendaftaran untuk memulai.

3. Akses dasbor rapidapi :

   • Setelah mendaftar, buka dasbor Rapidapi.
   • Di bilah navigasi, pilih API Hub .

4. Arahkan ke bagian API :

   • Klik pada titik akhir untuk melihat
   • Anda akan melihat beberapa titik akhir seperti pengiriman, tentang, dan bahasa.

5. Menggunakan titik akhir pengiriman :

   • Untuk pengiriman kode, buka titik akhir pengiriman dan kemudian pilih Buat pengiriman .
   • Di sini, Anda akan menemukan X-RapidAPI-Key , X-RapidAPI-Host , dan URL ( url ) yang dibutuhkan untuk panggilan API. URL terletak di bawah bagian "Cuplikan Kode".

6. Salin Kunci yang Diperlukan :

   • Salin nilai RAPIDAPI_HOST dan RAPIDAPI_KEY . Ini diperlukan untuk melakukan panggilan API ke sistem eksekusi kode.
   • Pastikan Anda memiliki kunci ini disimpan karena akan digunakan dalam permintaan API Anda.

Dengan mengikuti langkah -langkah ini, Anda dapat mengatur Hakim0 untuk pengajuan kode menggunakan infrastruktur RapidAPI, memungkinkan Anda untuk mengeksekusi dan mengevaluasi kode dalam aplikasi Anda.

Konfigurasi Firebase

1. Buat akun Firebase di firebase.google.com dan buka konsol.
2. Pergi ke otentikasi.
3. Dalam metode masuk, pilih Penyedia Google.
4. Pergi ke Pengaturan dan Anda akan melihat domain resmi.
5. Tambahkan URL produksi Anda di domain resmi untuk proyek kami: https://custom-code-editor.vercel.app/
6. Buat file .env di direktori root Anda dan tambahkan nilai -nilai ini:

 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=""

Konfigurasi Otentikasi GitHub

Untuk mengaktifkan otentikasi github untuk editor kode khusus, ikuti langkah -langkah ini:

1. Aktifkan otentikasi github di konsol firebase:

   • Buka proyek Firebase Anda di konsol Firebase.
   • Arahkan ke otentikasi > metode masuk .
   • Aktifkan GitHub sebagai penyedia masuk.
   • Perhatikan URL Callback Otorisasi yang disediakan oleh Firebase, karena Anda akan membutuhkan ini untuk aplikasi Github OAuth Anda.

2. Daftarkan aplikasi OAuth baru di GitHub:

   • Pergi ke pengaturan pengembang GitHub Anda.
   • Klik Aplikasi OAuth dan pilih Aplikasi OAuth Baru .
   • Isi detail aplikasi:
     • Nama Aplikasi : Editor Kode Kustom
     • URL beranda :
       • Untuk pengembangan lokal , gunakan http://localhost:3000
       • Untuk penyebaran produksi , gunakan URL publik Anda (misalnya, https://custom-code-editor.vercel.app/ )
     • URL panggilan balik otorisasi :
       • Gunakan URL panggilan balik otorisasi yang disediakan oleh Firebase.
   • Klik Aplikasi Register .

3. Ambil ID Klien GitHub dan Rahasia Klien:

   • Setelah aplikasi terdaftar, Anda akan melihat ID klien dan rahasia klien di pengaturan aplikasi Github OAuth. Salin nilai -nilai ini.

4. Tambahkan kredensial github oauth ke firebase:

   • Kembali ke konsol Firebase dan kembali ke konfigurasi penyedia GitHub .
   • Masukkan ID klien dan rahasia klien dari GitHub.
   • Simpan pengaturan ini.

5. Perbarui Variabel Lingkungan:

   • Buka file .env Anda di root proyek Anda dan tambahkan yang berikut:

      REACT_APP_GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID
     REACT_APP_GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET
     

   • Ganti YOUR_GITHUB_CLIENT_ID dan YOUR_GITHUB_CLIENT_SECRET dengan nilai -nilai yang Anda salin dari github.

Konfigurasi lokal

• Buat file .env di direktori root proyek Anda jika belum ada.
• Anda dapat menyalin konten dari .env.example ke .env , Anda dapat menjalankan perintah di bawah ini.

   cp .env.example .env
  

• Atur variabel lingkungan berikut dalam file .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

Ganti your_host_url, your_secret_key, & your_submissions_url dengan nilai yang sesuai untuk titik akhir API dan Hakim API Anda yang cepat.

Konfigurasi Pengaturan Server

Buat file .env di direktori root proyek Anda jika belum ada. Atur variabel lingkungan judgmission_url dalam file .env. Variabel ini harus menunjuk ke URL titik akhir API Judget0 yang ingin Anda gunakan untuk eksekusi kode. Misalnya: Plaintext

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

Ganti https://api.judge0.com/submissions dengan URL yang sesuai untuk titik akhir API Judge0 Anda.

Menjalankan server pengembangan setelah konfigurasi selesai, Anda dapat memulai server pengembangan untuk melihat pembangun kode React beraksi.

 npm start
# or
yarn start

Buka browser web Anda dan navigasikan ke http: // localhost: 3000 untuk mengakses aplikasi.

Penggunaan

• Tulis kode Anda di editor Monako.
• Jalankan cuplikan kode dengan mengklik tombol "Jalankan".
• Lihat output di panel konsol atau output.

Informasi penting

Saat ini URL proyek didasarkan pada versi gratis Hakim0 ini berarti paling banyak seseorang dapat memiliki 50 permintaan per hari.

Berkontribusi

Kontribusi dipersilakan! Jangan ragu untuk mengirimkan permintaan tarik atau membuka masalah.

Kontributor

Gitpod

Di lingkungan pengembangan bebas cloud di mana Anda dapat langsung memulai pengkodean.

Anda dapat menggunakan gitpod di cloud

---

Jangan ragu untuk menyesuaikan readme.md ini sesuai dengan persyaratan dan fitur spesifik proyek Anda. Beri tahu saya jika Anda membutuhkan bantuan lebih lanjut!