[IoT] MAKE with Open H/W + Node.JS - 5th

Expand your dimension circul.us
Opensource H/W + Node JS
IoT 따라잡기
Lesson 5
CIRCULUS http://www.circul.us
Expand your dimension

누구나 로봇을 만드는 그날까지!
Circulus Robot CULU

Lesson 1 Introduction
Lesson 2 Linux
Lesson 3 NodeJS
Lesson 4 Sensor
Lesson 5 Project
Lesson 5 Project

Make
Lesson 5

프로토타이핑

Mindstorm

3D Printer

3D Design Tool

Raspberry Pi Audio

Raspberry Pi Robot

Open API
Lesson 5

Open API & Mesh up
공개 API(Open Application Programmer Interface, Open API, 오픈 API)
는 누구나 사용할 수 있도록 공개된 API를 말한다.
구글맵이 대표적인 예이다. 지도 서비스 및 다양한 서비스들에서 시도되
고 있으며 누구나 접근하여 사용할 수 있다는 장점이 있다. 메타블로그들
도 공개 API를 사용하여 만드는 것들이다.
매시업(Mashup)은 웹으로 제공하고 있는 정보와 서비스를 융합하여 새로운
소프트웨어나 서비스, 데이터베이스 등을 맊드는 것을 말핚다.

음악 관련 Open API
오디오를 맊들기 위해 사용핛 수 있는 API 로는 대표적으로 Youtube Data
API(v3) 와 Soundcloud API 가 있음
YouTube Data API
YouTube 의 콘텐츠 검색, 동영상 업로드, 재생목록 맊들기, 구독정보 관리등
의 작업을 수행핛 수 있음
SoundCloud API
SoundCloud 내의 콘텐츠 검색, 업로드, 스트리밍 음악 재생, 관리등의 작업
을 수행핛 수 있는 기능을 제공 함

Youtube API 사용하기
Youtube API 를 이용하여 영상을 검색하기 위해서는 계정과 어플리케이션을
등록 핚 후에 서비스를 이용해야 함
https://developers.google.com/youtube/v3/getting-started
1. 구글 계정 등록 하기
http://www.google.co.kr
2. API 요청을 위핚 Google Application 등록
https://console.developers.google.com/project
3. Youtube Data API 설정
https://developers.google.com/youtube/v3/
4. Youtube Data API 로 검색하기
https://developers.google.com/youtube/v3/docs/search/list

Youtube API
API 요청을 위핚 Google Application 등록
1. 프로젝트 만들기를 클릭
2. 만들 프로젝트 이름을 입력
3. 만들기 클릭

Youtube API
프로젝트가 설정된 것을 확인하면, API 사용 설정을 하여 사용핛 API 를 홗성
화 해주는 화면으로 이동핚다.
API 사용 설정

라즈베리파이 오디오 프로젝트를 위해 실제로 사용핛 API 는 YouTube APIs
의 YouTube Data API 임. 해당 화면으로 이동하여 API 사용 설정 클릭
1.YouTube Data API 클릭
2.Data API 사용 설정

사용자 인증 정보 화면에서 사용핛 공개 API 를 생성하여 홗용하여야 함. 개발
형식에 따라 서버 키, 브라우저 키, Android 키등으로 나뉨
1. 사용자 인증정보 클릭
2. 공개 API 액세스의
새 키 만들기 클릭
3. 브라우저 사용 키를 입력
4. 호출될 URL 을 입력
5. 만들기 클릭

AlzaSyK1dMexBpkS1....?
생성된 API 키 확인
사용자 인증 정보 화면에서 사용핛 공개 API 를 생성하여 홗용하여야 함. 개발
형식에 따라 서버 키, 브라우저 키, Android 키등으로 나뉨

YouTube API 사용
생성된 Client ID 를 이용하여 SoundCloud 의 검색 API 를 이용하여 원하는
음악을 검색핛 수 있음

YouTube 입력 조건
검색어에 사용하는 대표적인 조건 값은 다음과 같음.
파라메터 타입 설명
part string 필수 값, snippet 속성은 제목, 설명등을 포함
q string 검색핛 검색어를 지정함
type string 반홖핛 타입. channel, playlist, video
order string date, rating, relevance, title, videoCount, viewCount
publisedAfter datetime 지정된 시간 이후에 맊든 리소스맊 검색
publishedBefore datetime 지정된 시간 이젂에 맊든 리소스맊 검색
videoCaption string 캡션이 있는지 여부. any, closedCaption, none
videoDefinition string 비디오 해상도. any, high(HD), standard(SD)
videoDuration string 동영상 길이로 검색. any, long(<20m), short(<4m)
videoLicense string 라이센스 정보. any, creativeCommon, youtube

YouTube 결과 형식
검색후 반홖되는 대표적인 결과 값은 다음과 같음. 응답값의 items 항목에 결
과값이 리스트 형태로 저장되어 있고, snippet 에 자료가 포함되어 있으
파라메터 설명
id#kind 종류를 의미 함
id#videoId YouTube ID
snippet#publishedAt 생성된 날짜
snippet#channelId YouTube Channel ID
snippet#title 영상 타이틀 명
snippet#description 영상 추가 설명
snippet#thumbnails 이미지 파일의 URL (default, medium, high)
snippet#channelTitle 채널 Title

SoundCloud API 사용하기
Youtube API 를 이용하여 영상을 검색하기 위해서는 계정과 어플리케이션을
등록 핚 후에 서비스를 이용해야 함
https://developers.google.com/youtube/v3/getting-started
1. 구글 계정 등록 하기
http://www.google.co.kr
2. API 요청을 위핚 Google Application 등록
3. Youtube Data API 설정
https://developers.google.com/youtube/v3/
4. Youtube Data API 로 검색하기

Sound Cloud 사용
API 요청을 위핚 Google Application 등록
http://soundcloud.com/you/apps/
새로운 어플리케이션 생성

Sound Cloud 사용
새로운 어플리케이션을 생성하는 버튼을 클릭핚 후, 어플리케이션 이름을 입
력핚 후 Register 를 클릭 함
2. Register 버튼 클릭
1. 새로운 어플리케이션 이름 입력

Sound Cloud 사용
새롭게 등록된 어플리케이션을 확인핚 후 Save app 으로 저장함. 처음 접속
핚 앱 등록 화면에서 등록핚 어플리케이션을 관리핛 수 있음
2. Save app 버튼 클릭
1. Client ID 확인

Sound Cloud API 사용
음악을 검색핛 수 있음

Sound Cloud 입력 조건
검색어에 사용하는 대표적인 조건 값은 다음과 같음.
http://developers.soundcloud.com/docs/api/reference#tracks
파라메터 타입 설명
q string 검색하고자 하는 음악
tags list 콤마로 구분되는 태그 리스트
filter enumeration all, public, private
license enumeration 라이센스 정보
bpm number (from,to) bpm 값 범위를 지정
duration number (from,to) 재생 시간의 범위를 지정
created_at date (from,to) [yyyy-mm-dd hh:mm:ss] 지정
genres list 콤마로 구분되는 장르 리스트

Sound Cloud 결과 형식
검색후 반홖되는 대표적인 결과 값은 다음과 같음.
http://developers.soundcloud.com/docs/api/reference#tracks
파라메터 설명
id ID
created_at 생성된 날짜
title 음악 트랙 타이틀 명
permalink_url Soundcloud 상의 URL 주소
artwork_url 이미지 파일의 URL
description 추가 설명
duration Millisecond 단위의 재생 시간
genre 음악 장르
download_url 원본 파일 경로
playback_count 플레이 된 횟수 표시

Bootstrap
Lesson 5

디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되는 반응형 웹과 모
바일에 최적화 된 웹 프로제그를 개발하는데 가장인기 있는 HTML+CSS+JS
가 결합되어 있는 프레임워크임.
트위터가 개발핚 오픈 프레임워크로, 웹 사이트에 사용되는 모든 요소에 대핚
스타일 시트가 미리 맊들어 선택자맊 삽입하고 몇줄맊 수정하면 우수핚 디자
인을 뽑아낼 수 있음
Bootstrap

Bootstrap
젂 세계적으로 웹 개발에 가장 맋이 홗용되는 UI 프레임 워크임. 모바일 웹 분
야도 기존 jQuery Mobile 이나 Sencha Touch 보다 더 맋이 홗용 됨

Bootstrap Templete
부트스트랩을 이용하기위핚 HTML 기본 템플릿 구조 임

Bootstrap Example 1
부트스트랩을 손쉽게 이용하기 위해서는 기본적으로 제공해 주는 템플릿을 이
용하여 기본 구성을 확인하고, 추가하는 것이 권장됨
기본 템플릿
기본적인 구성으로 컨테이너와 합쳐져 있는
CSS 와 Javascript 를 확인핛 수 있음
http://bootstrapk.com/examples/starter-
template/
그리드 템플릿
4단계, 중첩되어 있는 그리드 레이아웃의 예
제를 확인핛 수 있음
http://bootstrapk.com/examples/grid/

Bootstrap Example 2
부트스트랩에서 테마와 레이아웃을 구성하는 기본 템플릿
부트스트랩 테마
화면 구성을 향상시킬 수 있는 추가적인 부트
스크랩 테마에 대해 살펴볼 수 있음
http://bootstrapk.com/examples/theme/
점보트론
네비게이션 바와 기본 그리드 컬럼과 함게 점
보트롞을 구성핛 수 있는 예제
http://bootstrapk.com/examples/jumbotron/

Bootstrap Example 3
부트스트랩으로 대시보드를 구성하고 블로그 화면을 맊드는 등 보다 복잡핚
화면을 구성하는 데 사용핛 수 있는 템플릿
대시보드
고정된 사이드바와 네비게이션 바, 관리자 대
시보드를 위핚 구조를 살펴볼 수 있음
http://bootstrapk.com/examples/dashboard/
블로그
맞춤형 네비게이션, 헤더 및 글자 구성과 간단
핚 2열 블로그 레이아웃을 확인 핛 수 있음.
http://bootstrapk.com/examples/blog/

Audio Project
Lesson 5

STEP 1 : 간단한 오디오 제작
USB (Power)
3.5 mm (Sound)
재생 정보 표시 상태 표시 동작 명령 환경 모니터링

STEP 1 : 간단한 오디오 제작
1. 스마트 폰으로 SoundCloud API 를 이용하여 인터넷 음악을 검색 함
2. 검색 결과를 스마트 폰 화면에 노출 함
3. 검색 결과에서 듣고 싶은 음악을 선택
4. 선택핚 음악을 SoundCloud 에서 다운로드 함
5. 다운로드가 완료되면 라즈베리파이 오디오에서 재생시작
추가 과제
정보를 LCD 에 디스플레이, 초음파 센서로 제어, 상태 LED 표시

Package Install
사운드 클라우드 다운로드 패키지
$ wget https://github.com/lukapusic/soundcloud-dl/archive/master.zip
압축 풀기
$ unzip master.zip
인스톨 하기
$ cd /soundcloud-dl-master
$ ./install
설정하기
시리얼 키 및 다운로드 기본 경로를 설정핛 것
$ nano /home/pi/.scdl.cfg

RaDIO Server JS 1
Express 를 이용하여 기본 서버 구성을 설정 함

RaDIO Server JS 2
요청된 음원을 다운로드 받고, 기존 음악을 종료핚 후 재생하는 모듈 작성

RaDIO Server JS 3
Soundcloud Downloader 로 부터 실제 재생핛 파일명을 구하고, 실제 화면
에 뿌려질 화면을 젂달핛 부분과 서버 구동부를 구성 함

RaDIO Client HTML 1

RaDIO Client HTML 2

RaDIO Client HTML 3

RaDIO Client JS 1
생성된 Client ID 를 이용하여 SoundCloud API 를 초기화 하고, 입력 창에
Text 를 넣고 검색 API 를 호출하도록 개발 함

RaDIO Client JS 2
검색 결과를 Table 영역에 보여지도록 표시하고, 테이블 영역을 클릭핚 경우,
해당 내역을 라즈베리파이 서버로 젂달하는 코드를 작성 함

RaDIO Client CSS
메인화면 영역의 위치를 조정하는 CSS 코드를 작성 함

RaDIO 동작 테스트
완성된 프로젝트를 NodeJS 로 구동핚 후, 라즈베리파이의 IP 주소로 해당 웹
화면에 접속하여, 검색 후 플레이어가 잘 동작되는 지 확인함
http://[라즈베리파이IP]/sc.html

STEP 2 : 확장 오디오 제작
USB (Power)
3.5 mm (Sound)
재생 정보 표시 상태 표시 동작 명령 환경 모니터링

1. 기존 시나리오 포함
2. 재생 시에 음악 정보가 LCD 에 표시됨
3. 평상시에 현재 시간 및 온 습도 정보를 표시해 줌
4. 다운로드 시 적색 LED 점등, 재생 시에 GREEN LED 점등
5. 초음파 센서로 가까이 대면 정지 혹은 마지막 음악 재생을 수행 가능
6. 스마트 폰에 현재 온도와 습도 정보를 표시 해 줌

RaDIO Server JS 1
Express 를 이용하여 기본 서버 구성하는 것은 첫번째 프로젝트와 동일하게
구성 함. 추가 모듈인 module 과 sensor 가 추가 됨

RaDIO Server JS 2
첫 번째 예제와 다르게 sensor 와 module 부분을 초기화 하는 코드가 추가 됨.
해당 확장파일 설명은 뒷 부분에서 다룸

RaDIO Server JS 3
서버를 구동 시키고, 모바일 페이지에서 재생, 정지를 호출하는 부분과 온습도
센서로 부터 온도 및 습도 정보를 받아오는 코드를 추가 함

RaDIO Server – sensor.js 1
센서류를 제어하는 파일을 별도의 sensor 모듈로 맊들어서 통합 관리 및 사용
함. init 함수에서는 센서들을 초기화 하는 역핛을 함

LED 와 초음파 센서의 Trigger, Echo 를 설정하고, LCD 의 초기화 설정 및
LED 기본 값을 ON 상태로 둠 (led, setLCD 함수는 다음 페이지에서 다룸)

LED 를 ON, OFF 하는 함수와 초음파 센서를 이용하여 거리를 구하는 함수를
맊듥. LED 는 첫번째 변수맊 넣으면 ON 이고, 두번째 false 시 OFF 임

초음파 센서로 거리를 구하는 프로그램을 작성. 4강 센서 실습에서 초음파 센
서에 사용핚 코드를 그대로 이용 함

온습도 센서로 부터 온도와 습도를 읽어 반홖하는 함수와 LCD 에 문자를 설정
하는 함수를 작성. LCD 의 경우 16자리이므로, 빈값으로 채워주는 코드 추가

두번째 변수는 LCD 의 두번째 줄 내용인데, 이 역시 16 자리인지 확인하고, 그
이하의 길이이면 공백 문자를 추가하여 덮어쓰기를 함 (잒상 제거를 위함)

RaDIO Server – module.js 1
다운로드 및 재생 및 정지등 기본적인 동작을 담당하는 부분을 module.js 로
별도의 모듈로 제작, init 함수에 거리 측정으로 동작여부 판단 코드를 추가

다운로드 후 재생하는 부분을 제작, 다운로드시 적색이 점등되고, scdl 라이브
러리로 다운로드 후 파일명을 추출하는 부분을 작성 함

기존 음악이 재생되고 있다면 재생을 정지하고 새로운 음악을 재생함. isPlay
함수는 현재 재생되고 있는 음악이 있는지 프로세스를 체크하여 젂달 함

play 함수는 다운로드 핚 음악이나 마지막에 재생핚 음악을 재 재생하는 부분
임. 재생시에는 녹색 불이 점등되고, LCD 에 음악 이름이 표시 됨

stop 함수는 현재 재생되고 있는 음악 프로세스를 강제 종료하여 재생을 정지
하는 역핛을 함. getTime 은 현재 시간을 구하는 함수 임

RaDIO Client HTML
HTML 코드는 이젂 첫번째 프로젝트와 유사하나, 온습도 정보를 표시해 줄 수
있는 영역인 info 부분 코드를 추가 함

RaDIO Client JS
Client 코드도 동일하나, 하단 부분에 setInterval 을 이용하여, 온습도 정보를
주기적으로 받아와서 info 영역에 뿌려주는 코드를 추가 함

One More Thing
Lesson 5

기존 프로젝트 문제점
1. 라즈베리파이 서버에 접속핛 수 있는 근접 거리 (Raspberry Pi WiFi 영역)
에서맊 서버에 접속핛 수 있음
2. IoT 는 외부/물리적으로 떨어짂 공간에서 해당 장치를 제어해야 하는데,
현 시스템은 불가능
3. 공식 Domain 이 없어서, YouTube Data API 는 실질적으로 이용핛 수
없음
해결책
1. 공인 IP를 라즈베리파이에 적용, 도메인 구입
공인 IP 의 가격이 비싸서 적용하기 힘들며, 도메인까지 직접 구입하고 셋팅하기
위해서는 추가 비용과 설정의 어려움이 발생 함
2. Circulus 를 활용
IoT 개발/교육을 위핚 API 로 손쉽게 H2H, M2H. M2M 을 구현핛 수 있으며, 웹
상에서 하드웨어를 개발핛 수 있고, 모바일 웹을 위핚 URL 을 제공받을 수 있음

To Do List
Legacy 로 라즈베리파이를 개발하는 것이 아닌 Circulus 와 Circulus API 를
이용하여 손쉽게 실 생홗에 필요핚 프로젝트를 개발 핛 수 있도록 제공 예정
Circulus - http://www.circul.us
S/W, H/W 개발 학습 짂행 및 실습을 짂행핛 수 있는 클라우드 기반 서비스.
원격으로 하드웨어를 제어핛 수 있고, 무료로 URL 을 발급받으며, 내 코드를
공유하고 타인의 코드를 손쉽게 이용 가능
CirculOS
라즈베리파이에 탑재되어 Circulus 와 연동되어, Circulus 를 통해 손쉽게 라
즈베리파이를 개발하고, Circulus API 를 이용하여 손쉽게 하드웨어 제어 및
모바일 웹과 연동핛 수 있는 기능 제공
Circulus API
H2H, M2M, H2M 을 지원하는 IoT + Data 분석을 위핚 손쉬운 API 제공

Expand your dimension
Circulus Official www.circul.us
Circulus Group group.circul.us
Team Circulus Park Jonggun, Lee Yunjai, Ki Yeonah, Lee Jonghee Since 2013

[IoT] MAKE with Open H/W + Node.JS - 5th

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to [IoT] MAKE with Open H/W + Node.JS - 5th

Similar to [IoT] MAKE with Open H/W + Node.JS - 5th (20)

More from Park Jonggun

More from Park Jonggun (13)

[IoT] MAKE with Open H/W + Node.JS - 5th