使用 AI 创建 WebView 插件¶

只需几个步骤，您就可以轻松使用 AI 为您的 WebView 插件创建网络服务。无需编程知识或技能。

头脑风暴插件创意 ¶

如果您已经知道要创建的网络服务类型，请跳过此部分并继续下一步。

或者，您可以向您首选的 AI 请求头脑风暴创意。

提示

 我想创建一个将在 cTrader 中以 WebView 插件形式显示的网页应用程序。
 请提供一些有用的创意，以增强我的交易体验。

答案

智能交易助手
交易计算器
自定义符号仪表盘
符号笔记与协作工具
风险管理仪表盘
新闻影响追踪器
时段热图工具
交易副驾驶（AI笔记与反馈）

生成网站代码 ¶

cTrader 中的 WebView 插件需要外部托管的网站，这些网站使用标准的 JavaScript、HTML、CSS 和（如有必要）WebView API 方法堆栈。

为了获得更准确的响应，请向 AI 提供以下输入数据：

关于 WebView 插件的一般信息
WebView 插件的API 参考
cTrader 商店的使用条款
App Store 和 Google Play 的规则

警告

您创建的任何 WebView 插件都必须遵守 cTrader 商店、App Store 和 Google Play 的规则。最重要的是，您的网页服务不得包含身份验证或支付表单。

为了方便起见，您可以下载 WebView 插件文档和 cTrader 商店规则，如果您更愿意将它们作为文件上传以供 AI 参考。

提示

 我想创建一个交易计算器网页应用，用作 cTrader 中的 WebView 插件。
 该网站应仅使用 JavaScript、HTML、CSS 和 WebView 插件的 API 方法构建。
 不需要额外的库。
 该网站必须遵守 cTrader 商店、Apple 的 App Store 和 Google 的 Play Store 的规则。
 该网站不得包含身份验证或支付表单。
 提供一个包含构建网站所需所有内容的单一代码片段，无需任何额外设置。

答案

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

部署网络服务 ¶

将生成的代码粘贴到 HTML 文件中，并将其（本地）保存到您的计算机上。

要部署网络服务，您需要将 HTML 文件托管在安全的服务器上。您需要获取一个域名，注册一个托管提供商，然后使用 cPanel/hPanel 或通过 FTP 上传您的 HTML 文件。

您可以使用以下提示向 AI 寻求帮助：

提示

 引导我获取域名并将其与托管提供商设置好。

测试网络应用 ¶

在浏览器中打开新网站。测试网站上的功能，确认它们正常工作。

根据您实时网站的外观，您可能需要返回 AI 工具并要求其进行优化。例如，您可以要求 AI 按以下方式编辑网站代码：

修复无法正常工作的功能
更改颜色主题
添加特定功能
移除特定功能
以及其他

在进行调整后，返回文件，粘贴编辑后的代码并部署更改。

一旦您的网络应用准备就绪并且您知道 URL，您就可以继续在 cTrader 中构建您的 WebView 插件。