Lewati ke isi

Membuat plugin WebView dengan AI

Hanya dalam beberapa langkah, Anda dapat membuat layanan web untuk plugin WebView Anda menggunakan AI dengan mudah. Tidak diperlukan pengetahuan atau keterampilan pemrograman.

Brainstorming ide plugin

Jika Anda sudah tahu jenis layanan web apa yang ingin Anda buat, lewati bagian ini dan lanjut ke bagian berikutnya.

Atau, Anda dapat meminta AI pilihan Anda untuk brainstorming ide.

Prompt

Saya ingin membuat aplikasi web yang akan ditampilkan sebagai plugin WebView dalam cTrader.
Sarankan ide-ide berguna yang akan meningkatkan pengalaman trading saya.
Jawaban
  • Asisten trading pintar
  • Kalkulator trading
  • Dasbor simbol kustom
  • Alat kolaborasi & catatan simbol
  • Dasbor manajemen risiko
  • Pelacak dampak berita
  • Alat heatmap sesi
  • Kopilot trading (catatan & umpan balik AI)

Menghasilkan kode situs web

Plugin WebView di cTrader memerlukan situs web yang dihosting secara eksternal serta menggunakan tumpukan standar JavaScript, HTML, CSS dan (jika perlu) metode WebView API.

Untuk respons yang lebih akurat, berikan data input berikut kepada AI:

Peringatan

Semua plugin WebView yang Anda buat harus mematuhi aturan Toko cTrader, App Store, dan Google Play. Yang terpenting, layanan web Anda tidak boleh menyertakan formulir autentikasi atau pembayaran.

Untuk kemudahan Anda, Anda dapat mengunduh dokumentasi plugin WebView dan aturan Toko cTrader, jika Anda lebih suka mengunggahnya sebagai file untuk referensi AI.

Prompt

Saya ingin membuat aplikasi web kalkulator trading untuk digunakan sebagai plugin WebView di cTrader.
Situs web harus dibangun hanya dengan menggunakan JavaScript, HTML, CSS dan metode API untuk plugin WebView.
Tidak diperlukan pustaka tambahan.
Situs web harus mematuhi aturan Toko cTrader, App Store Apple dan Play Store Google.
Situs web tidak boleh menyertakan formulir autentikasi atau pembayaran.
Berikan satu bagian kode yang berisi semua yang diperlukan untuk membuat situs web tanpa pengaturan tambahan.
Jawaban 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Trade Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
      color: #333;
    }
    h1 {
      text-align: center;
    }
    .container {
      max-width: 400px;
      margin: auto;
      padding: 20px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    label, input, select {
      display: block;
      width: 100%;
      margin-bottom: 15px;
    }
    input, select {
      padding: 8px;
      font-size: 1em;
    }
    button {
      padding: 10px;
      background-color: #007acc;
      color: white;
      border: none;
      font-size: 1em;
      cursor: pointer;
      width: 100%;
    }
    button:hover {
      background-color: #005fa3;
    }
    .result {
      margin-top: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Trade Calculator</h1>
    <label for="symbol">Symbol (e.g., EURUSD)</label>
    <input type="text" id="symbol" value="EURUSD"/>

    <label for="volume">Volume (Lots)</label>
    <input type="number" id="volume" value="1" min="0.01" step="0.01"/>

    <label for="price">Price</label>
    <input type="number" id="price" value="1.1000" step="0.0001"/>

    <label for="leverage">Leverage</label>
    <input type="number" id="leverage" value="100" step="1"/>

    <button onclick="calculate()">Calculate</button>

    <div class="result" id="result">Margin: --</div>
  </div>

  <script>
    function calculate() {
      const volume = parseFloat(document.getElementById("volume").value);
      const price = parseFloat(document.getElementById("price").value);
      const leverage = parseFloat(document.getElementById("leverage").value);

      // Standard 100,000 units per lot
      const notional = 100000 * volume;
      const marginRequired = (notional / leverage) * price;

      document.getElementById("result").innerText = 
        `Margin Required: ${marginRequired.toFixed(2)} (base currency units)`;
    }

    // WebView Plugin API Example
    window.addEventListener("message", (event) => {
      const message = event.data;
      if (message.type === "symbolUpdate") {
        document.getElementById("symbol").value = message.symbol;
      }
    });

    // Send initial readiness signal
    window.parent.postMessage({ type: "ready" }, "*");
  </script>
</body>
</html>

Menerapkan layanan web

Tempel kode yang dihasilkan ke dalam file HTML dan simpan (secara lokal) di komputer Anda.

Untuk menerapkan layanan web, Anda perlu mengatur hosting berkas HTML di server yang aman. Anda harus memperoleh nama domain, mendaftar ke penyedia hosting, lalu mengunggah berkas HTML Anda dengan menggunakan cPanel/hPanel atau melalui FTP.

Anda dapat meminta bantuan AI dengan menggunakan prompt ini:

Prompt

Tunjukkan cara mendapatkan nama domain dan mengaturnya dengan penyedia hosting.

Menguji aplikasi web

Buka situs web baru di browser Anda. Ujilah fitur-fitur pada situs tersebut untuk memastikan bahwa semuanya berfungsi dengan baik.

Tergantung pada tampilan situs web langsung Anda, Anda mungkin ingin kembali ke alat AI dan memintanya untuk melakukan penyempurnaan. Misalnya, Anda dapat meminta AI untuk mengedit kode situs web sebagai berikut:

  • Perbaiki fungsionalitas yang tidak berfungsi dengan baik
  • Ubah tema warna
  • Tambahkan fitur tertentu
  • Hapus fitur tertentu
  • Dan lain-lain

Setelah melakukan penyesuaian, kembalilah ke berkas, tempelkan kode yang sudah diedit dan terapkan perubahannya.

Setelah aplikasi web Anda siap dan Anda mengetahui URL-nya, Anda dapat melanjutkan untuk membuat plugin WebView Anda di cTrader.