Dokumentasi Lengkap hens-code-ai

Daftar Isi

1. Pemasangan
2. Persiapan Dasar
3. Menggunakan Komponen Editor Kode di App.jsx
4. Deskripsi Fungsi Utama
5. Konfigurasi Lanjutan dan Kustomisasi
6. Pengaturan CSS
7. Menjalankan Aplikasi

1. Pemasangan

Untuk mulai menggunakan hens-code-ai, instal paket dengan perintah npm berikut:

npm install hens-code-ai

bun add hens-code-ai

2. Persiapan Dasar

Mengimpor dan Menggunakan Komponen

Di file App.jsx, Anda tidak perlu lagi mengimpor React secara keseluruhan. Cukup impor hook yang akan digunakan, bersama dengan komponen CodeEditor dari hens-code-ai.

// src/App.jsx
import { useState } from 'react';
import CodeEditor from 'hens-code-ai';

Menyiapkan Komponen Dasar App.jsx dengan React Vite

Buat file App.jsx sebagai titik utama integrasi hens-code-ai dalam proyek Anda. Komponen ini akan menampilkan editor kode dan output dari konsol di satu halaman.

// src/App.jsx
import { useState } from 'react';
import CodeEditor from 'hens-code-ai';

function App() {
  const [output, setOutput] = useState('');

  const handleOutputChange = (newOutput) => {
    setOutput(newOutput);
  };

  return (
    <div>
      <h1>Selamat Datang di Editor Hens Code AI</h1>
      <CodeEditor
        initialCodeTemplate="console.log('Halo, Hens Code AI!');"
        onOutputChange={handleOutputChange}
      />
      <div>
        <h2>Output Konsol:</h2>
        <pre>{output}</pre>
      </div>
    </div>
  );
}

export default App;

3. Menggunakan Komponen Editor Kode di App.jsx

Komponen <CodeEditor /> menyediakan editor yang terintegrasi dengan Google Generative AI untuk saran kode otomatis. Berikut parameter penting yang dapat diatur:

• Parameter <CodeEditor />:
  • initialCodeTemplate: Template string opsional yang akan ditampilkan di editor sebagai kode awal.
  • onOutputChange: Callback yang dipanggil setiap kali ada perubahan pada output di konsol, sehingga output terbaru dapat dipantau.

4. Deskripsi Fungsi Utama

Fitur Utama

1. Saran Kode Berbasis AI: Menggunakan Google Generative AI untuk memberikan saran kode secara real-time.
2. Tampilan Output Real-Time: Menampilkan hasil eksekusi kode di konsol yang diperbarui secara dinamis.
3. Pengaturan Tampilan: Menyesuaikan tampilan editor dan konsol dengan opsi kustomisasi CSS.

5. Konfigurasi Lanjutan dan Kustomisasi

Untuk lebih banyak opsi kustomisasi:

• Mengubah Tema Editor: Atur properti theme di <CodeEditor /> untuk mengatur tampilan editor (misalnya light atau dark).

  <CodeEditor theme="light" />

• Menggunakan Prompt Kustom untuk AI: Anda dapat menyesuaikan prompt yang dikirim ke Google Generative AI di dalam fungsi registerCompletion yang ada di komponen CodeEditor. Ini bisa diatur agar AI menanggapi sesuai konteks proyek Anda.

• Kustomisasi Output Konsol: Gunakan onOutputChange untuk mengontrol tampilan output konsol. Anda dapat menampilkan atau memproses output sesuai kebutuhan.

Contoh: Pengaturan Editor dengan Opsi Lanjutan

Untuk memperluas editor dengan pengaturan kustom dan tampilan yang lebih kaya, gunakan konfigurasi berikut:

// src/App.jsx
import { useState } from 'react';
import CodeEditor from 'hens-code-ai';

function App() {
  const [consoleOutput, setConsoleOutput] = useState('');

  const handleOutputChange = (output) => setConsoleOutput(output);

  return (
    <div className="app-container">
      <h1>Editor Hens Code AI</h1>
      <CodeEditor
        initialCodeTemplate={`console.log("Selamat mencoba Hens Code AI!");`}
        onOutputChange={handleOutputChange}
        theme="light"
      />
      <div className="output-display">
        <h2>Output Konsol</h2>
        <pre>{consoleOutput}</pre>
      </div>
    </div>
  );
}

export default App;

6. Pengaturan CSS

Sesuaikan tampilan dengan membuat file CSS (CodeEditor.css) yang akan mengatur gaya komponen editor:

/* src/styles/CodeEditor.css */
.code-editor-container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
    background-color: #ffffff;
    color: #333;
}

.editor-section {
    display: flex;
    flex-direction: column;
    width: 70%;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    color: #333;
    padding: 10px 20px;
    height: 50px;
    border-bottom: 1px solid #ddd;
    font-size: 1.2em;
}

.console {
    width: 30%;
    background-color: #f9f9f9;
    color: #333;
    padding: 10px;
    height: 100vh;
    overflow-y: auto;
    font-family: monospace;
    font-size: 1.1em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-left: 1px solid #ddd;
}

7. Menjalankan Aplikasi

Setelah semua pengaturan selesai, jalankan server pengembangan untuk melihat aplikasi:

npm run dev

bun run dev