드라이버 예제 및 워크스루

Prev Next

소개

Version Compatibility

Users will not be able to have a driver run in an app until the Edge Driver Page is added. Please reach out to developer@tulip.co in the meantime.

ESP32 개발 보드와 쉽게 구할 수 있는 DHT22 온도 및 습도 센서를 사용하여 맞춤형 에지 드라이버를 테스트하는 방법.

필요한 것(사전 요구 사항): * CircuitPython을 실행하는 LOLIN S3 Mini* 선택한 IDE(통합 개발 환경) - Visual Studio Code* Node.js 및 NPM

이 가이드에서는 ESP32 개발 보드와 쉽게 구할 수 있는 DHT22 온도 및 습도 센서용 맞춤형 에지 드라이버를 빌드하고 테스트하는 예제를 살펴봅니다.

하드웨어 준비하기

이 예제에서는 DHT22 온도 및 습도 센서에서 데이터를 읽기 위해 CircuitPython을 실행하는 LOLIN S3 Mini 개발 보드(ESP32-S3 마이크로컨트롤러 기반)를 사용하겠습니다.

DHT22 센서를 ESP32에 배선하기

DHT22 센서를 S3 Mini에 연결하는 방법은 간단합니다.1. DHT22의 GND(-) → S3 Mini의 GND 핀2. DHT22의 VCC(+) → S3 Mini의 3V3 핀3. DHT22의 OUT(S) → S3 Mini의 D1 핀(또는 사용 가능한 IO 핀)

센서 데이터 읽기

다음은 CircuitPython을 설정하는 링크입니다.

아래는 DHT22 센서에서 매초마다 온도 및 습도 값을 읽고 USB 직렬 인터페이스를 통해 데이터를 JSON으로 인쇄하는 간단한 CircuitPython 스크립트입니다. 또한 드라이버가 로그 및 부팅 정보와 같은 다른 직렬 메시지를 무시할 수 있도록 각 메시지 앞에 "ESP:"라는 텍스트를 추가하고 있습니다.

이 스크립트를 에 저장하면 직렬 포트를 통해 자동으로 데이터 전송이 시작됩니다: ```import adafruit_dhtimport boardimport timeimport json

dht = adafruit_dht.DHT22(board.D1)

while True: print( "ESP:", json.dumps( { "temperature": dht.temperature, "humidity": dht.humidity, }), ) ), ) time.sleep(1)```

엣지 드라이버 빌드하기

커스텀 엣지 드라이버를 생성하려면 Node.js와 NPM이 설치되어 있어야 합니다. Node.js와 NPM을 설치하지 않은 경우 이 가이드를 따르세요.

새 엣지 드라이버 프로젝트 만들기

다음 명령을 실행하여 새 엣지 드라이버 프로젝트를 생성합니다:npx @tulip/create-edge-driver

프롬프트에 따라 드라이버를 구성합니다. 이 예제에서는 드라이버 이름을 "esp32-diy-sensor" 로 지정하고 시리얼 서비스가 USB 인터페이스를 통해 S3 Mini에서 데이터를 읽을 수 있도록 설정합니다.SDK

설정이 완료되면 프로젝트 디렉터리로 이동하여 다음을 실행합니다.npm run buildThis명령은:* manifest.json 파일의 유효성을 검사합니다.* TypeScript 코드를 컴파일합니다.* 드라이버를 Tulip Player에서 로드할 수 있는 JavaScript 파일로 번들링합니다.

manifest.json 업데이트하기

먼저 드라이버가 구현하는 이벤트와 함수를 정의해야 합니다. 디바이스 이벤트는 Tulip 앱에서 로직의 트리거로 사용할 수 있습니다. 예를 들어 다음과 같이 앱 트리거를 설정할 수 있습니다:

"내 센서에서 측정 이벤트가 발생하면 온도 데이터를 '작업 현장 온도' 변수에 저장하세요."와 같이 설정할 수 있습니다.

드라이버는 앱 내의 트리거에 대한 응답으로 실행할 수 있는 디바이스 기능을 구현할 수도 있습니다. 예를 들어

"내가 이 버튼을 클릭하면 내 디바이스에서 '토글 라이트' 기능을 호출하세요."

이 예제에서는 드라이버에 함수가 없지만 센서가 측정을 수행할 때 '데이터'라는 이벤트를 실행합니다. src/manifest.json 파일의 함수 섹션을 비워 두거나 완전히 제거하여 업데이트하세요:

json... "functions":``[],...그런 다음 이벤트 섹션을 업데이트하여 "데이터" 이벤트의 모양을 정의합니다. 이 이벤트는 "온도"와 "습도"라는 두 개의 실수 속성을 가진 객체가 됩니다:json... "events": [ { "name": "데이터", "스키마": { "type": "object", "properties": { "temperature": { "type": "float" }, "humidity": { "type": "float" } } } } ],...

업데이트

이제 엣지 드라이버 SDK를 사용하여 S3 Mini의 USB 직렬 포트를 찾아 연결하고, 들어오는 직렬 데이터를 읽고, JSON 메시지를 파싱하고, fireEvent()를 사용하여 "데이터" 이벤트를 발생시키는 드라이버 코드를 작성해 보겠습니다. src/index.ts 파일의 예제 코드를 이 새 코드로 바꿉니다:



serial.onData((data) => { try { const decoder = new TextDecoder(); const stringData = decoder.decode(new Uint8Array(data)); const espData = JSON.parse(stringData.split("ESP: ")[1]); edgeDriverSdk.fireEvent("data", espData); } catch (error) { console.error(error); } });


serial.open();});```이 예제에서는 드라이버가 처음 시작될 때 USB 장치의 제품 ID를 사용하여 자동으로 장치를 찾으려고 시도합니다. 하지만 엣지 드라이버 SDK는 시스템에서 새 디바이스가 감지될 때 드라이버가 시작되도록 구성하는 기능도 지원하므로 보다 강력한 프로덕션 드라이버를 만드는 데 도움이 될 수 있습니다.


### 드라이버 빌드 및 실행


드라이버 코드와 매니페스트.json을 업데이트한 후 드라이버를 다시 빌드합니다.`npm 실행 buildThis`컴파일 및 번들된 JavaScript 파일과 유효성이 검사된 매니페스트 사본이 **dist** 디렉터리 내에 생성됩니다.


![SDK](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202025-03-27%20at%2011.12.19%20AM.png){height="" width=""}


### 툴립 플레이어에서 드라이버 테스트하기


기본적으로 Tulip Player는 즉시 작동하는 기본 제공 드라이버로 실행됩니다. 하지만 Tulip 인스턴스가 없어도 로컬에서 사용자 지정 드라이버를 실행할 수 있습니다. 이렇게 하려면 명령줄에서 드라이버의 dist 디렉터리 경로와 함께 플레이어를 실행하면 됩니다. [여기에서](https://download.tulip.co/) **Tulip Player를** 다운로드하여 설치하세요. 


Windows의 경우 터미널에서 `set` 명령을 사용하여 `TULIP_PLAYER_CUSTOM_DRIVERS_PATH` 환경 변수를 설정한 다음 같은 터미널에서 "Tulip Player.exe"를 실행하면 됩니다:


`batC:\Users\Bob> "TULIP_PLAYER_CUSTOM_DRIVERS_PATH=C:\Users\Bob\Documents\esp32-diy-sensor\dist"C:\Users\Bob> "C:\Users\Bob\AppData\Local\tulip-player-desktop\Tulip Player.exe" 설정`


플레이어가 시작되면 플레이어 앱에서 **브라우저 개발자 도구를** 열고 콘솔 탭으로 이동합니다.![SDK](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202025-03-27%20at%2011.12.26%20AM.png){height="" width=""}


"[CED]"로 메시지를 필터링하여 드라이버 로그를 확인합니다.


![SDK](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202025-03-27%20at%2011.12.30%20AM.png){height="" width=""}


성공하면 온도 및 습도 값을 실시간으로 기록하는 "데이터" 이벤트가 표시됩니다.


### Tulip 앱에서 드라이버 사용하기


곧 사용자 지정 드라이버를 Tulip 인스턴스에 업로드할 수 있게 될 것입니다. 그때까지는 미리 정의된 예제 드라이버를 가져올 수 있습니다.


Tulip 라이브러리로 이동하여 [이와](https://library.tulip.co/devices/espressif-esp32) 같은 설치 버튼이 있는 드라이버를 설치합니다.


메시지가 표시되면 드라이버를 설치합니다. 새 Tulip 앱을 만들고 단계에 "머신 및 디바이스" 트리거를 추가합니다.


![SDK](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202025-03-27%20at%2011.12.41%20AM.png){height="" width=""}


장치 목록에 가져온 ESP32 온도 및 습도 센서가 표시되어야 합니다.


![SDK](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202025-03-27%20at%2011.12.46%20AM.png){height="" width=""}


이제 실시간 센서 데이터로 일부 앱 변수를 업데이트하는 트리거를 만들 수 있습니다.


![SDK](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202025-03-27%20at%2011.12.51%20AM.png){height="" width=""}


앱에서 온도 및 습도 데이터를 시각화할 수 있도록 단계에 해당 변수를 사용하는 위젯을 만듭니다.


![SDK](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202025-03-27%20at%2011.12.58%20AM.png){height="" width=""}


### 튤립 앱 실행


앱 설정이 완료되면 Tulip 플레이어에서 앱을 실행합니다. 모든 것이 올바르게 구성되었다면 앱에서 센서 값이 실시간으로 업데이트되는 것을 볼 수 있을 것입니다!


![SDK](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Screenshot%202025-03-27%20at%2011.13.05%20AM.png){height="" width=""}


여기까지입니다! 이제 Tulip에서 커스텀 엣지 드라이버를 성공적으로 빌드, 테스트 및 통합했습니다!