如何讓開(kāi)發(fā)者更便捷高效地開(kāi)發(fā)面板小程序？

全球化 IoT 開(kāi)發(fā)平臺(tái)服務(wù)商涂鴉智能（NYSE：TUYA，HKEX：2391）原先提供的是一套基于 React Native(簡(jiǎn)稱(chēng) RN)的面板 SDK，但是隨著面板規(guī)模的不斷增長(zhǎng)，以及 RN 的使用限制等原因，面板的開(kāi)發(fā)和維護(hù)變得愈發(fā)困難。

于是我們自研了面板小程序開(kāi)發(fā)方案，旨在讓面板的開(kāi)發(fā)更加便捷，運(yùn)行更加穩(wěn)定高效。

那什么是面板小程序呢？

面板小程序是一套全新的設(shè)備面板開(kāi)發(fā)方式，它基于涂鴉的智能小程序技術(shù)體系，集成了面板的相關(guān)能力和環(huán)境。

它通過(guò)以下兩種方式來(lái)加強(qiáng)提升面板開(kāi)發(fā)效率和體驗(yàn)：

1. 通過(guò)IDE集成了面板特有的開(kāi)發(fā)調(diào)試環(huán)境

2. 提供了 Ray 這個(gè)開(kāi)發(fā)框架

接下來(lái)，我們?cè)敿?xì)介紹下這兩大特性。

一、IDE面板環(huán)境

1、面板體驗(yàn)

面板體驗(yàn)功能支持一鍵創(chuàng)建本地虛擬面板小程序，包含一些基礎(chǔ)調(diào)試功能，其接口調(diào)用是通過(guò)本地模擬實(shí)現(xiàn)?？捎糜诳焖倭私夂腕w驗(yàn)面板的開(kāi)發(fā)流程。

2、設(shè)備插件

為了能夠在 IDE 中運(yùn)行面板小程序，涂鴉引入了虛擬設(shè)備體系來(lái)模擬面板運(yùn)行環(huán)境，同時(shí)能夠更方便地調(diào)試 DP 下發(fā)上報(bào)。在開(kāi)發(fā)時(shí)，只需要在項(xiàng)目配置中添加需要調(diào)試的產(chǎn)品，就可以通過(guò)掃碼將該產(chǎn)品下的虛擬設(shè)備綁定到 IDE 中。

簡(jiǎn)單操作后，開(kāi)發(fā)者即可在 IDE 中實(shí)現(xiàn)代碼調(diào)試，以盡量減少開(kāi)發(fā)期間對(duì)真機(jī)的依賴(lài)。

除了可以輕松實(shí)現(xiàn)設(shè)備 DP 調(diào)試外，該插件還提供了：

多語(yǔ)言字段查看、檢查、搜索、上傳；

設(shè)備日志查詢(xún)；

智能設(shè)備模型的數(shù)據(jù)注入

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

二、Ray-IoT領(lǐng)域的跨端框架

小程序的基礎(chǔ)語(yǔ)法是類(lèi)似前端的 HTML、CSS、JavaScript，同當(dāng)前其他廠商的小程序語(yǔ)法基本保持一致，可有效確?？缍说拈_(kāi)發(fā)體驗(yàn)。

為了讓涂鴉現(xiàn)有的開(kāi)發(fā)者，能更好地遷移到面板小程序，涂鴉研發(fā)了 Ray，并將其作為研發(fā)面板小程序的默認(rèn)框架。不僅能大大降低小程序面板開(kāi)發(fā)門(mén)檻，還能讓開(kāi)發(fā)者復(fù)用 React 的編程習(xí)慣和生態(tài)。

其工作原理，簡(jiǎn)單來(lái)說(shuō)，就是將 React 的代碼通過(guò)編譯和運(yùn)行，轉(zhuǎn)化成小程序語(yǔ)法，使其最終能在小程序容器內(nèi)運(yùn)行起來(lái)。

1、React

Ray 的本質(zhì)是靠 react-reconciler 實(shí)現(xiàn)的一個(gè)小程序端的渲染器。因此，你可以靠完整的 React 語(yǔ)法，以及大部分的 React 生態(tài)來(lái)編寫(xiě)你的面板小程序代碼。

2、智能設(shè)備模型（SDM）

智能設(shè)備模型是一個(gè)服務(wù)于面板開(kāi)發(fā)的開(kāi)發(fā)庫(kù)，它統(tǒng)一封裝了對(duì)設(shè)備的控制接口，并且可利用 DP Schema 獲取 ts提示，讓調(diào)用更加便捷。

另外，雖然面板小程序提供了很豐富的 API，但是有些 API 比較原子化，有一定的使用門(mén)檻。我們將定時(shí)、場(chǎng)景等高級(jí)能力進(jìn)一步封裝成能力（ablities）提供給開(kāi)發(fā)者，降低開(kāi)發(fā)成本。

SDM 的架構(gòu)如下圖所示：

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

3、跨微信小程序

開(kāi)發(fā)者在開(kāi)發(fā)面板小程序后，可以將面板小程序編譯打包為微信小程序代碼，當(dāng)然也可以直接使用 Ray 跨端框架，全新開(kāi)發(fā)一個(gè)專(zhuān)屬于你自己的微信小程序。

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

具體操作指南復(fù)制下方鏈接查看---如何用 Ray 來(lái)開(kāi)發(fā)微信小程序：

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

彩蛋大放送：ChatGPT智能設(shè)備和我說(shuō)話了！

最近的 ChatGPT 異?；鸨?，我們也在積極探索 AI 在 IoT 領(lǐng)域的應(yīng)用。于是，在面板開(kāi)發(fā)中，我們開(kāi)了個(gè)腦洞，想象下，如果我們的智能設(shè)備擁有了大腦會(huì)是怎么樣的呢？

這里介紹下接入流程：

1.我們通過(guò)獲取設(shè)備相關(guān)信息，例如聯(lián)網(wǎng)方式，設(shè)備狀態(tài)等，組織好 prompts，讓其扮演一個(gè)智能設(shè)備；

2.調(diào)用 OpenAI 的接口，發(fā)送指令；

3.并記錄每次溝通的上下文，做到連續(xù)對(duì)話；

這樣我們就得到了一個(gè)能和我們對(duì)話的智能設(shè)備了！

相信在不遠(yuǎn)的未來(lái)，AI 將為 IoT 領(lǐng)域帶來(lái)更多新能力，人機(jī)交互頻次也將不斷增加、萬(wàn)物互聯(lián)鏈路更完整。屆時(shí)，有望真正實(shí)現(xiàn)主動(dòng)式智能，實(shí)質(zhì)性推動(dòng)智能家居領(lǐng)域的發(fā)展。

開(kāi)發(fā)問(wèn)題咨詢(xún)

如在開(kāi)發(fā)過(guò)程中有任何問(wèn)題，可復(fù)制下方鏈接，進(jìn)入【涂鴉智能小程序】開(kāi)發(fā)者論壇提問(wèn)哦，將有開(kāi)發(fā)小哥哥隨時(shí)為你解答~

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