소개
ProtoPie Connect에는 기본적으로 제공되는 다양한 유용하고 사용하기 쉬운 플러그인이 함께 포함되어 있어 IFTTT, Logitech G29 스티어링 휠, 그리고 Arduino와 같은 것들과 쉽게 통합할 수 있습니다. 이는 blokdots를 통해서도, 또는 직접 시리얼 연결을 통해서도 가능합니다. 하지만 플러그인으로 지원되지 않는 것과 연결하고 싶다면 어떨까요? ProtoPie Enterprise 플랜을 구독하면, 나만의 브리지 앱을 작성하여 어떤 제품이나 서비스든 Pie와 연결할 수 있습니다.
배울 내용
이 레슨에서는 Node.js 앱이 Socket.io라는 연결 기술을 사용해 ProtoPie Connect와 연동되는 방식을 살펴봅니다. 특히 다음을 하게 됩니다:
앱에서 ProtoPie Connect에 빠르게 연결할 수 있도록 도와주는 표준 “보일러플레이트” 코드로 시작합니다.
Moment.js 라이브러리를 사용해 Pie에 형식이 지정된 날짜와 시간을 제공합니다.
OpenWeather의 API를 사용해 현재 날씨 정보를 가져와 Pie에 제공합니다.
소요 시간: ≤45분
준비물
ProtoPie Enterprise 구독
ProtoPie Connect용 사용자 정의 브리지 앱 작성은 ProtoPie Enterprise 구독에 포함된 Connect의 전체 버전에서만 작동합니다. Enterprise 구독자는 ProtoPie Connect에서 사용자 정의 플러그인을 사용하고 작성할 수 있는 추가 기능을 사용할 수 있습니다.
약간의 코딩 경험
아래 예제를 따라 하려면 전문 개발자일 필요는 없습니다. 예전에 JavaScript로 코딩해 본 적이 있다면 — 아주 간단한 것이라도 — 충분합니다. 하지만 코딩을 한 번도 해 본 적이 없다면, 많이 벅찰 수 있습니다.
코딩이 완전히 처음이라면, 먼저 다음 튜토리얼을 먼저 보는 것을 추천합니다:
코딩을 배우는 데는 분명 시간이 들지만, 프로토타이퍼에게는 정말 유용한 기술이며, 디자이너라 하더라도 코딩에 대해 조금만 알아도 엔지니어링 팀과의 협업에 큰 도움이 됩니다.
괜찮은 텍스트 편집기
우리는 코딩을 할 것이므로 좋은 텍스트 편집기가 필요합니다. 메모장처럼 OS에 기본 포함된 도구도 사용할 수는 있지만, 이상적이지는 않습니다. 다행히 훌륭한 편집기가 많이 있습니다:
예제에서는 Sublime Text를 사용할 것이므로, 제가 보는 것과 같은 화면을 보고 싶다면 Sublime Text를 사용하세요.
OpenWeather 계정
OpenWeather 웹사이트로 이동해 계정을 만드세요. 날씨 API에 연결하려면 계정이 필요합니다. 무료 서비스를 사용할 것이므로 유료 계정을 만들 필요는 없습니다.
시작 코드와 Pie
시작할 수 있도록 몇 가지 코드를 작성해 두었습니다. 이 ZIP 파일을 다운로드해 컴퓨터의 편한 곳에 압축을 풀어 두세요. 그리고 ProtoPie Studio에서 Pie 파일을 여세요.
시작해 봅시다!
아래 영상과 함께 따라 해 보세요.
코드
영상의 25:39에서 아이콘 맵용 코드 조각을 붙여 넣습니다. 프로젝트에 복사해 붙여 넣을 수 있도록 그 코드를 아래에 적어 두었습니다.
여기에 완성된 전체 코드가 있습니다.
이 코드를 사용하려면:
npm install로 의존성을 설치합니다.index.js를 편집하고 66번째 줄에 Open Weather API 키를 추가합니다.npm start로 브리지 앱을 실행합니다.
66번째 줄을 API 키로 수정하세요
완성된 Pie 파일
다음은 완료된 상태의 Pie 파일입니다:
이렇게 끝났습니다! 하지만 여기서 멈추지 않을 거예요. 이 시리즈의 마지막 편인 ProtoPie Connect 소개 7/7: 고급 브리지 앱 - 스마트 홈에 연결하기 에서 이를 다음 단계로 끌어올려 보겠습니다.
