이근둥
근둥이의 블로그
이근둥
전체 방문자
789,208
오늘
28
어제
327

공지사항

  • 전체보기 (107)
    • 웹 (9)
    • 언어 & 프레임워크 (53)
      • JavaScript (7)
      • TypeScript (0)
      • Node.js (11)
      • Vue.js (3)
      • React (0)
      • C & C++ (19)
      • Java & JSP (9)
      • Python (4)
    • 컴퓨터 과학 (3)
      • 알고리즘 (0)
      • 자료구조 (3)
    • 기타 (9)
      • Linux (1)
      • Git (2)
      • DialogFlow (4)
    • 일상 (13)
      • 게임 (13)
    • 칼럼 (9)
      • 회고 (0)
      • 나만의 글 (0)
      • 제품 리뷰 (9)
    • __Dev__ (9)
      • Release (9)
반응형

인기 글

  • [Tomcat] 아파치 톰캣 서버 포⋯
    2018.08.24
    [Tomcat] 아파치 톰캣 서버 포⋯
  • [Node.js] 실시간 채팅 서비스⋯
    2018.05.31
    [Node.js] 실시간 채팅 서비스⋯
  • [PWA] 프로그레시브 웹 앱 시작⋯
    2019.01.09
    [PWA] 프로그레시브 웹 앱 시작⋯
  • [Linux] Ubuntu 18.04 테마 설⋯
    2019.01.16
    [Linux] Ubuntu 18.04 테마 설⋯
  • [DialogFlow] 다이얼로그 플로⋯
    2018.07.13
    [DialogFlow] 다이얼로그 플로⋯

태그

  • spread syntax
  • self
  • 이클립스
  • 출간
  • 프로그레시브 웹 앱
  • vue.js
  • ES6
  • 전개 구문
  • pwa
  • Hello World!
  • 웹 확장
  • composition-api
  • 자바
  • 자바 프로젝트
  • Composition API
  • 파티클
  • Scanner
  • Vue 3
  • WWDC20
  • javascript
  • vue-next
  • vue3
  • vuex
  • 이펙트
  • Deemo
  • java
  • Java FX
  • WWDC
  • vue
  • AstroWar

최근 댓글

  • 정말 감사합니다!!!
    구리
  • 중간 popValue 할당하는 부분에⋯
    이근둥
  • 마지막에 pop(); 한번만 해야함
    2323
  • 2개를 꺼냈는데 5개중 2개가 남⋯
    wefwdf
  • gcm이 Google Cloud Messaging⋯
    이근둥

최근 글

  • 웹 푸시 알림(Web Push Notific⋯
    2022.06.13
    웹 푸시 알림(Web Push Notific⋯
  • 스택(Stack)
    2022.05.26
    스택(Stack)
  • 배열(Array)
    2022.05.25
    배열(Array)
  • C언어로 배우는 자료구조
    2022.05.24
    C언어로 배우는 자료구조
  • [Vue 3] Composition API와 템⋯
    2020.10.02
    [Vue 3] Composition API와 템⋯

블로그 메뉴

  • 홈
  • 미디어로그
  • 방명록
hELLO · Designed By 정상우.
이근둥

근둥이의 블로그

[Node.js] 버스 정보 API 사용하기(2) - API 활용
언어 & 프레임워크/Node.js

[Node.js] 버스 정보 API 사용하기(2) - API 활용

2018. 3. 28. 17:21
반응형

안녕하세요


지난 포스팅에서 API 키를 발급받았으니 직접 활용하는 예제를 작성해보도록 하겠습니다!





먼저 필요한 요구사항은 Node.js가 설치되어있어야합니다!


http://codevkr.tistory.com/12








API에 대한 사용방법(메뉴얼)을 확인해봅시다.






워드파일로 첨부되어있는 파일을 열어보시면 메뉴얼을 확인하실 수 있습니다.







확인해보니 위와 같은 방법으로 요청하면 됩니다.


http://openapi.gbis.go.kr/ws/rest/busarrivalservice/station?serviceKey=키값&stationId=정류소ID





또한 경기 버스정보 홈페이지에서도 메뉴얼을 확인하실 수 있습니다.


http://www.gbis.go.kr/gbis2014/publicService.action?cmd=openApiRest








테스트 부분에 가서 테스트해보니

아래와 같이 XML로 데이터가 응답되는 모습을 확인하실 수 있습니다.



위와 같은 데이터를 필요한 부분만 추출하여 활용하면 됩니다!


원하는 폴더에서 npm init 명령으로 package.json 파일을 생성합시다.


그리고 모듈 2개를 설치해야합니다.


request 모듈과 cheerio 모듈입니다.


npm install request --save

npm install cheerio --save


설치가 완료되었으면 js 파일을 하나 생성하고 코드를 작성해봅시다.






위와같이 첫번 째 줄에 두줄을 추가해줍니다.


방금 설치한 request와 cheerio 모듈을 변수에 불러오는 코드입니다.





3개의 변수를 선언해줍니다.


$url 에는 메뉴얼에 나와있는 REST API 경로를 넣어주시면 됩니다.

$KEY 에는 발급받은 API키를 넣어주시면 되구요

$station에는 임시 테스트용 정류소 ID를 넣어줍니다.





http://openapi.gbis.go.kr/ws/rest/busarrivalservice/station?serviceKey=키값&stationId=정류소ID

와 같은 형식으로 만들기 위해 변수와 문자열을 합쳐서 하나의 문자열로 만들어줍니다.


아래에서 console.log로 콘솔에 출력해보는 모습입니다.




그리고 위의 코드도 추가해줍니다.


( ' 따옴표가 아닌 ` 백틱 문자입니다! - 숫자 1옆에 있음)



먼저 busArrivalList태그로 구분하여 데이터를 나눈 후 하나하나씩 돌며

no1, no2 변수에 도착할 버스의 차량 번호를 추출하는 모습입니다.


차량번호는 plateNo1, plateNo2태그 안에 저장되어있습니다.


find("찾을 태그, 또는 클래스, 아이디 등")


find 함수로 해당 영역을 찾을 후 text() 함수를 통해 텍스트만 추출하는 모습입니다.


JQuery와 사용하는법이 매우 비슷한걸 아실 수 있습니다.


태그 구성은 아래에서 확인하실 수 있습니다.


busArrivalList로 구분지어보면 아래 사진에서는 2개의 데이터로 나눌 수 있습니다.


그리고 각각 plateNo1, plateNo2가 있는것을 확인하실 수 있습니다.

predictTime1, predictTime2는 버스의 도착시간입니다. (단위는 분)



자세한 사항은 경기버스정보 홈페이지의 메뉴얼에서 확인가능합니다

(아래 이미지 참고)





실행시켜봅시다.


node 파일이름.js



변수와 문자열을 이은 URL이 처음으로 출력되고, 그 아래로 버스 정보가 출력되는 모습을 확인하실 수 있습니다.


버스 차량번호뿐만 아니라 predictTime1, predictTime2 태그의 데이터를 파싱하여 도착시간까지 확인해볼 수 있습니다.




아래는 그에 대한 예제입니다.









이와같이 오픈 API를 이용하여 공공데이터를 조회하여 활용할 수 있습니다!


버스 API는 이뿐만이 아니라 정류장 조회, 버스 정보 조회 등 여러 API가 있으니 API를 혼합하여 더욱 완성도 높게


개발해보실 수 있습니다!





감사합니다.





반응형
저작자표시비영리동일조건
    '언어 & 프레임워크/Node.js' 카테고리의 다른 글
    • [Node.js] 실시간 채팅 서비스 만들기(2) - 서버 실행
    • [Node.js] 실시간 채팅 서비스 만들기(1) - 준비
    • [Node.js] 버스 정보 API 사용하기(1) - 가입 및 API 키 발급
    • [Node.js] 카카오톡 플러스친구 챗봇 만들기(3) - 자동응답 API 구현
    이근둥
    이근둥
    새로운 것을 좋아하는 프론트엔드 개발자 ✨
    댓글쓰기
    1. :AMD:
      2018.08.29 11:55
      consloe log 할때 ` 이거 몰라서 한참 고민했네유 ㅠ
      좋은글 감사합니다
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2018.08.30 16:17 신고
        감사합니다 ㅜㅜ,, 본문에 내용 추가했습니다
        수정/삭제
    2. 꾸액
      2018.09.10 01:16
      cannot find module require 이라 뜨는데 이건 어떻게 해결하나요ㅜㅜ?
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2018.09.10 16:20 신고
        require 라는 모듈을 찾지 못한다는 오류입니다. 아마 request를 작성하셔야하는데 require로 잘못 쓰신것같습니다.
        수정/삭제
    3. 남쓰
      2019.04.27 09:35
      혹시 라즈베리파이에 버스도착정보를 확인하려하는데 어떻게 해야하나요?
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2019.04.27 10:23 신고
        라즈베리파이에 노드를 설치하고 본문 과정과 같이 코드를 실행시키면 됩니다. 정보를 제공하는 방식에는 웹 페이지, 챗봇 등이 있으므로 상황에 맞는 방식을 선택하여 개발하시면 될 것 같습니다~!
        수정/삭제
    4. 익명
      2019.07.01 00:21
      비밀댓글입니다
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2019.07.01 09:02 신고
        최종적으로 합친 URL을 API 서버로 Request 해야 합니다. 코드에서 request(url, ...) 부분 참고해주세요
        수정/삭제
      2. 익명
        2019.07.01 10:09
        비밀댓글입니다
        수정/삭제
    5. kyb
      2019.08.14 23:34
      syntaxError: C:\project\NodeJS\blog\bus.json: Unexpected token l in JSON at position 0
      이게 계속 뜨는데 어떻게 해결해야 할까요?? ㅠㅠ
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2019.08.16 09:47 신고
        파일명을 .json이 아닌 .js 파일로 변경해주시면 될 것 같습니다.
        수정/삭제
    6. 익명
      2019.08.14 23:35
      비밀댓글입니다
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2019.08.16 09:45 신고
        파일명을 .json이 아닌 .js 파일로 변경해주시면 될 것 같습니다.
        수정/삭제
    7. 익명
      2019.09.06 19:41
      비밀댓글입니다
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2019.09.06 19:45 신고
        공공데이터 포털에 다른 지역 버스 API도 있는걸로 압니다. API 명세는 조금 다를 수 있지만 본문과 같은 방식으로 데이터를 받아오고, 가공해서 사용하시면 될 것 같습니다 :)
        수정/삭제
    8. 홍은표
      2020.02.20 20:47
      TypeError: Cannot read property 'parent' of undefined
      이 오류는 무엇이죠??
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2020.11.19 22:19 신고
        참조하고자 하는 객체에 parent 속성이 없는 경우 발생합니다. 참조한 객체를 확인해주세요!
        수정/삭제
    9. .
      2020.11.13 16:43
      안녕하세요. 좋은 글 잘 읽고 적용하고 있습니다. 감사합니다. 혹시 받아온 데이터를 변수에 담아 콘솔에 출력하는 건 성공했는데 해당 데이터를 html같은 템플릿에 출력하는 방법에 간단한 힌트라도 알 수 있을까요? 추가적인 작업이 더 필요한지 궁금해서 댓글 남겨봅니다.
      수정/삭제댓글쓰기댓글보기
      1. 이근둥
        2020.11.19 22:21 신고
        pug(구 jade)와 같은 템플릿 파일에 변수를 지정하고, 현재 가져온 데이터를 템플릿에 선언한 변수로 주입하면 됩니다. 관련 내용은 쉽게 찾아보실 수 있습니다 :)
        수정/삭제
    • 이전
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 다음

    티스토리툴바