智能面板小程序如何實現跨端開發，并無縫引入ChatGPT？

如何讓開發者更便捷高效地開發面板小程序？

全球化 IoT 開發平臺服務商涂鴉智能（NYSE：TUYA，HKEX：2391）原先提供的是一套基于 React Native(簡稱 RN)的面板 SDK，但是隨著面板規模的不斷增長，以及 RN 的使用限制等原因，面板的開發和維護變得愈發困難。

于是我們自研了面板小程序開發方案，旨在讓面板的開發更加便捷，運行更加穩定高效。

那什么是面板小程序呢？

面板小程序是一套全新的設備面板開發方式，它基于涂鴉的智能小程序技術體系，集成了面板的相關能力和環境。

它通過以下兩種方式來加強提升面板開發效率和體驗：

1. 通過IDE集成了面板特有的開發調試環境

2. 提供了 Ray 這個開發框架

接下來，我們詳細介紹下這兩大特性。

一、IDE面板環境

1、面板體驗

面板體驗功能支持一鍵創建本地虛擬面板小程序，包含一些基礎調試功能，其接口調用是通過本地模擬實現?？捎糜诳焖倭私夂腕w驗面板的開發流程。

2、設備插件

為了能夠在 IDE 中運行面板小程序，涂鴉引入了虛擬設備體系來模擬面板運行環境，同時能夠更方便地調試 DP 下發上報。在開發時，只需要在項目配置中添加需要調試的產品，就可以通過掃碼將該產品下的虛擬設備綁定到 IDE 中。

簡單操作后，開發者即可在 IDE 中實現代碼調試，以盡量減少開發期間對真機的依賴。

除了可以輕松實現設備 DP 調試外，該插件還提供了：

多語言字段查看、檢查、搜索、上傳；

設備日志查詢；

智能設備模型的數據注入

具體操作指南可復制下方鏈接查看---虛擬設備插件：https://developer.tuya.com/cn/miniapp/panels/devtools/ide/virtual-device

二、Ray-IoT領域的跨端框架

小程序的基礎語法是類似前端的 HTML、CSS、JavaScript，同當前其他廠商的小程序語法基本保持一致，可有效確?？缍说拈_發體驗。

為了讓涂鴉現有的開發者，能更好地遷移到面板小程序，涂鴉研發了 Ray，并將其作為研發面板小程序的默認框架。不僅能大大降低小程序面板開發門檻，還能讓開發者復用 React 的編程習慣和生態。

其工作原理，簡單來說，就是將 React 的代碼通過編譯和運行，轉化成小程序語法，使其最終能在小程序容器內運行起來。

1、React

Ray 的本質是靠 react-reconciler 實現的一個小程序端的渲染器。因此，你可以靠完整的 React 語法，以及大部分的 React 生態來編寫你的面板小程序代碼。

2、智能設備模型（SDM）

智能設備模型是一個服務于面板開發的開發庫，它統一封裝了對設備的控制接口，并且可利用 DP Schema 獲取 ts提示，讓調用更加便捷。

另外，雖然面板小程序提供了很豐富的 API，但是有些 API 比較原子化，有一定的使用門檻。我們將定時、場景等高級能力進一步封裝成能力（ablities）提供給開發者，降低開發成本。

SDM 的架構如下圖所示：

具體的使用方式可以復制鏈接查看---智能設備模型的使用：https://developer.tuya.com/cn/miniapp/panels/extended/sdm/usage

3、跨微信小程序

開發者在開發面板小程序后，可以將面板小程序編譯打包為微信小程序代碼，當然也可以直接使用 Ray 跨端框架，全新開發一個專屬于你自己的微信小程序。

由于微信小程序和涂鴉 App 的運行容器有一定差異，因此我們提供了額外的面板--小程序微信 SDK（@ray-js/wechat） ，來解決在微信環境運行所需要的 API 接口、組件及頁面模塊。

具體操作指南復制下方鏈接查看---如何用 Ray 來開發微信小程序：

https://developer.tuya.com/cn/miniapp/panels/wechat

彩蛋大放送：ChatGPT智能設備和我說話了！

最近的 ChatGPT 異?；鸨?，我們也在積極探索 AI 在 IoT 領域的應用。于是，在面板開發中，我們開了個腦洞，想象下，如果我們的智能設備擁有了大腦會是怎么樣的呢？

這里介紹下接入流程：

1.我們通過獲取設備相關信息，例如聯網方式，設備狀態等，組織好 prompts，讓其扮演一個智能設備；

2.調用 OpenAI 的接口，發送指令；

3.并記錄每次溝通的上下文，做到連續對話；

這樣我們就得到了一個能和我們對話的智能設備了！

相信在不遠的未來，AI 將為 IoT 領域帶來更多新能力，人機交互頻次也將不斷增加、萬物互聯鏈路更完整。屆時，有望真正實現主動式智能，實質性推動智能家居領域的發展。

開發問題咨詢

如在開發過程中有任何問題，可復制下方鏈接，進入【涂鴉智能小程序】開發者論壇提問哦，將有開發小哥哥隨時為你解答~

https://www.tuyaos.com/posting.php?mode=post&f=10