Với bản cập nhật lớn cho giao diện API của nền tảng giao dịch định lượng, các tham số giao diện chiến lược, điều khiển tương tác và các chức năng khác của nền tảng đã được điều chỉnh và nhiều chức năng mới đã được bổ sung. Bài viết trước đã giới thiệu chi tiết về các bản cập nhật tham số giao diện và điều khiển tương tác. Bài viết này tiếp tục khám phá ứng dụng của nút thanh trạng thái mới được giới thiệu của FMZ.COM.

Mọi nhà phát triển chiến lược đều muốn xây dựng một giao diện người dùng dễ sử dụng, mạnh mẽ và thiết kế đơn giản. Để đạt được tiêu chuẩn này, FMZ.COM không ngừng nỗ lực nâng cấp các chức năng nền tảng và nâng cao trải nghiệm của người dùng. Thiết kế các điều khiển tương tác trực tiếp trên thanh trạng thái của trang chiến lược là một bản nâng cấp dựa trên nhu cầu này.

Tiếp theo, chúng ta hãy xem xét ứng dụng của nó trong một kịch bản chiến lược đa dạng.

Kịch bản chiến lược đa sản phẩm

Cho dù đó là chiến lược chênh lệch giá đa dạng hoàn toàn tự động hay chiến lược thời gian đa dạng bán thủ công. Giao diện UI của chiến lược sẽ cần có một số nút tương tác chức năng, chẳng hạn như chốt lời, dừng lỗ, thanh lý, ủy thác theo kế hoạch, v.v. cho một sản phẩm nhất định.

Sau đây chúng ta hãy khám phá các tính năng mới của nút thanh trạng thái với tình huống sử dụng đơn giản nhất. Giả sử chiến lược của chúng ta giao dịch nhiều biểu tượng:

Hợp đồng vĩnh viễn BTC_USDT, Hợp đồng vĩnh viễn ETH_USDT, Hợp đồng vĩnh viễn LTC_USDT, Hợp đồng vĩnh viễn BNB_USDT, Hợp đồng vĩnh viễn SOL_USDT

Trong khi chiến lược đang thực hiện giao dịch tự động, chúng tôi hy vọng có thể thiết kế một nút mở cho mỗi sản phẩm trên thanh trạng thái của giao diện chiến lược. Nhưng nút mở này đòi hỏi một loạt các thiết lập chi tiết, chẳng hạn như:

• Loại lệnh: Lệnh giới hạn/Lệnh thị trường.
• Số lượng đặt hàng của đơn hàng: số lượng.
• Giá của đơn hàng: giá.
• Hướng giao dịch: mua (dài hạn), bán (ngắn hạn).

Trước khi nâng cấp nền tảng này, nút thanh trạng thái chỉ kích hoạt một thông báo tương tác nút. Không có cách nào để liên kết một loạt các điều khiển để thiết lập các thông báo phức tạp. Bản nâng cấp này cho tương tác giải quyết được nhu cầu này. Chúng ta hãy xem xét thiết kế mã. Các bình luận chi tiết được thêm vào mã để giúp bạn dễ dàng hiểu cách xây dựng một hàm như vậy.

Ví dụ về thiết kế:

// 设置操作的各个品种 BTC_USDT.swap 为FMZ平台定义的品种格式，表示BTC的U本位永续合约
var symbols = ["BTC_USDT.swap", "ETH_USDT.swap", "LTC_USDT.swap", "BNB_USDT.swap", "SOL_USDT.swap"]

// 根据按钮模板构造按钮
function createBtn(tmp, group) {
    var btn = JSON.parse(JSON.stringify(tmp))
    _.each(group, function(eleByGroup) {
        btn["group"].unshift(eleByGroup)
    })

    return btn
}

function main() {
    LogReset(1)

    var arrManager = []
    _.each(symbols, function(symbol) {
        arrManager.push({
            "symbol": symbol,
        })
    })

    // Btn
    var tmpBtnOpen = {
        "type": "button",
        "cmd": "open",
        "name": "开仓下单",
        "group": [{
            "type": "selected",
            "name": "tradeType",
            "label": "下单类型",
            "description": "市价单、限价单",
            "default": 0,
            "group": "交易设置",
            "settings": {
                "options": ["市价单", "限价单"],
                "required": true,
            }
        }, {
            "type": "selected",
            "name": "direction",
            "label": "交易方向",
            "description": "买入、卖出",
            "default": "buy",
            "group": "交易设置",
            "settings": {
                "render": "segment",
                "required": true,
                "options": [{"name": "买入", "value": "buy"}, {"name": "卖出", "value": "sell"}],
            }
        }, {
            "type": "number",
            "name": "price",
            "label": "价格",
            "description": "订单的价格",
            "group": "交易设置",
            "filter": "tradeType==1",
            "settings": {
                "required": true,
            }
        }, {
            "type": "number",
            "name": "amount",
            "label": "下单量",
            "description": "订单的下单量",
            "group": "交易设置",
            "settings": {
                "required": true,
            }
        }],
    }

    while (true) {
        var tbl = {"type": "table", "title": "dashboard", "cols": ["symbol", "actionOpen"], "rows": []}
        _.each(arrManager, function(m) {
            var btnOpen = createBtn(tmpBtnOpen, [{"type": "string", "name": "symbol", "label": "交易品种", "default": m["symbol"], "settings": {"required": true}}])
            tbl["rows"].push([m["symbol"], btnOpen])
        })
        
        var cmd = GetCommand()
        if (cmd) {
            Log("收到交互：", cmd)
            
            // 解析交互消息: open:{"symbol":"LTC_USDT.swap","tradeType":0,"direction":"buy","amount":111}
            // 根据第一个冒号:之前的指令判断是哪种按钮模板触发的消息
            var arrCmd = cmd.split(":", 2)
            if (arrCmd[0] == "open") {
                var msg = JSON.parse(cmd.slice(5))
                Log("交易品种：", msg["symbol"], "，交易方向：", msg["direction"], "，订单类型：", msg["tradeType"] == 0 ? "市价单" : "限价单", msg["tradeType"] == 0 ? "，订单价格：当前市价" : "，订单价格：" + msg["price"], "，订单数量：", msg["amount"])
            }
        }

        // 输出状态栏信息
        LogStatus(_D(), "\n", "`" + JSON.stringify(tbl) + "`")
        Sleep(1000)
    }
}

Trước tiên chúng ta hãy xem xét hiệu ứng chạy, sau đó giải thích chi tiết về thiết kế của nút điều khiển. Mã chiến lược chạy như sau:

Nhấp vào nút và một cửa sổ bật lên sẽ xuất hiện để cấu hình thông tin đơn hàng cụ thể:

Sau khi điền thông tin mở đầu, chúng tôi đã thiết kế.

Bạn có thể thấy rằng chiến lược đã nhận được tin nhắn và trong mã, chúng tôi đã phân tích cú pháp tin nhắn và đưa ra các thiết lập khác nhau cho đơn hàng. Tiếp theo, chúng ta hãy xem nút này được cấu tạo như thế nào:

Đầu tiên, chúng ta định nghĩa một mẫu nút, là một đối tượng JSON và gán nó cho biến tmpBtnOpen. Tôi đã đưa hướng dẫn cụ thể trực tiếp vào phần bình luận mã bên dưới.

    {
        "type": "button",       // 状态栏输出控件的类型，目前仅支持按钮
        "cmd": "open",          // 当按钮触发时，策略中GetCommand函数收到的消息前缀，例如这个例子：open:{"symbol":"LTC_USDT.swap","tradeType":0,"direction":"buy","amount":111}
        "name": "开仓下单",      // 策略界面，状态栏上的按钮上显示的内容，参考上图
        "group": [{             // 当按钮触发时，弹框中的控件配置设置，这一层的group字段值是一个数组，弹框中的控件根据这个数组顺序自上而下排列
            "type": "selected",               // 第一个控件类型是：selected ，下拉框 
            "name": "tradeType",              // 当状态栏按钮触发时，消息中包含该控件的设置内容，tradeType就是当前这个下拉框控件输入的值的键名。如果选择第一个选项「市价单」GetCommand函数收到的消息中就包含 "tradeType":0 的键值对信息。
            "label": "下单类型",               // 按钮触发时，弹框中当前控件的标题
            "description": "市价单、限价单",    // 当前控件的说明信息，鼠标放在控件右侧“小问号”图标上就会显示这个说明信息。
            "default": 0,                     // 当前控件的默认值，例如当前是下拉框控件，如果不做选择，默认为下拉框第一个选项，通常下拉框的默认值指的是下拉框选项的索引，即第一个是0，然后是1，以此类推。如果下拉框的选项options是key-value形式则默认值指的是value。
            "group": "交易设置",               // 弹框中的控件如果很多，可以分组，这个字段可以设置分组信息
            "settings": {                     // 当前这个下拉框的具体设置
                "options": ["市价单", "限价单"],   // options和下拉框相关的设置，用于设置下拉框中的选项，这个字段值是一个数组，依次排列下拉框中的选项。
                "required": true,                // required表示是否设置为必选（必填）内容。
            }
        }, {
            "type": "selected",         // 这也是一个下拉框类型
            "name": "direction",
            "label": "交易方向",
            "description": "买入、卖出",
            "default": "buy",
            "group": "交易设置",
            "settings": {
                "render": "segment",   // 和默认下拉框控件不同的是，通过render字段可以把下拉框替换为“分段选择器”，如上图中的“买入/卖出”控件。
                "required": true,
                "options": [{"name": "买入", "value": "buy"}, {"name": "卖出", "value": "sell"}],   // 使用 key-value方式设置options
            }
        }, {
            "type": "number",           // 数值输入框类型控件
            "name": "price",
            "label": "价格",
            "description": "订单的价格",
            "group": "交易设置",
            "filter": "tradeType==1",   // 过滤器，可以用于确定是否显示当前控件，当tradeType==1时，表示是市价单，所以不需要该控件设置价格，所以不显示。
            "settings": {
                "required": true,       // 当该控件激活显示时为必选（必填）
            }
        }, {
            "type": "number",
            "name": "amount",
            "label": "下单量",
            "description": "订单的下单量",
            "group": "交易设置",
            "settings": {
                "required": true,
            }
        }],
    }

• group Vì đây chỉ là ví dụ, có thể có nhiều yêu cầu hơn trong thiết kế và sử dụng thực tế, không giới hạn ở hướng lệnh, giá, số lượng và loại lệnh được đặt khi mở vị thế. Ngoài ra, có thể có các quy tắc thoát lệnh được thiết kế như lệnh chốt lời và lệnh dừng lỗ. Vì vậy, phiên bản mới của UI hỗ trợgroupTrường này giúp bạn dễ dàng nhóm các điều khiển trong hộp bật lên để hiển thị, chẳng hạn như cài đặt thu gọn “Cài đặt giao dịch” trong ảnh chụp màn hình ở trên.

• required Cấu trúc nútgroupCác điều khiển được thiết lập trong lĩnh vực này đã được tăng cườngrequiredTrường thiết lập được sử dụng để thiết lập xem nó có bắt buộc (bắt buộc) hay không. Nếu nó được thiết lập thành bắt buộc (bắt buộc) nhưng không được điền (đã chọn) trong khi sử dụng, bạn không thể nhấp vào nút OK để gửi thông tin tương tác và một màu đỏ tin nhắn nhắc nhở sẽ được hiển thị.

• filter Đã thêmfilterTrường này được sử dụng để thiết lập các phụ thuộc của bộ lọc. Ví dụ, trong ví dụ trên, nếu loại lệnh thị trường được chọn, thì giá lệnh không cần thiết.typelà “số”,nameCác nút điều khiển “giá” bị ẩn.

• render Đối với các loại điều khiển cơ bản sau (cài đặt trường kiểu): số, chuỗi, đã chọn, boolean. Các trường đã thêmrenderĐược sử dụng để thiết lập kết xuất điều khiển. Mỗi điều khiển có nhiều thành phần kết xuất riêng. Ví dụ, trong ví dụ trên, sẽ phù hợp hơn nếu hiển thị điều khiển hộp thả xuống được chọn dưới dạng “bộ chọn phân đoạn” vì hộp thả xuống cần được nhấp hai lần (lần đầu tiên để mở rộng hộp thả xuống và lần thứ hai để chọn một tùy chọn). Sử dụng thành phần chọn đoạn, chỉ cần nhấp và chọn tùy chọn bạn muốn.

Cuối cùng, độc giả cẩn thận có thể hỏi, trong ảnh chụp màn hình ở trên, tôi không thấy thông tin kiểm soát trong hộp bật lên nơi bạn đã viết “Loại giao dịch” và “Loại giao dịch” này không thuộc nhóm “Cài đặt giao dịch” (tức là:"group": "交易设置"Cài đặt này được thực hiện).

Sau đây là bản trình bày về thiết kế liên kết các nút trong bảng thanh trạng thái với thông tin khác trên thanh trạng thái.createBtnChức năng dựa trên mẫutmpBtnOpenXây dựng cấu trúc nút cuối cùng và ghi thông tin khác vào cấu trúc nút trong quá trình xây dựng.

// 构造按钮的时候，绑定当前行的品种名称等信息，给按钮的弹框增加一个控件，并排在首位
var btnOpen = createBtn(tmpBtnOpen, [{"type": "string", "name": "symbol", "label": "交易品种", "default": m["symbol"], "settings": {"required": true}}])

Vì vậy, hiệu ứng cuối cùng là khi bạn nhấp vào thanh trạng thái trên giao diện chiến lượcsymbolvìBNB_USDT.swapKhi bạn nhấp vào nút trong hàng này, hộp nhập “Loại giao dịch” trong cửa sổ bật lên sẽ tự động được điền vào.BNB_USDT.swap。

Bài viết này chỉ giới thiệu một phần nhỏ về ứng dụng của phiên bản UI mới. Vì tổng độ dài không thể quá dài nên chúng tôi sẽ tiếp tục thảo luận về thiết kế các kịch bản nhu cầu khác trong bài viết tiếp theo.

Cảm ơn sự ủng hộ của bạn!