본문 바로가기

프로그램/앱인벤터

[앱인벤터2] 웹 매시업 - API를 통해 웹정보를 가져오는 웹 매시업

[앱인벤터2] 웹 매시업 - API를 통해 웹정보를 가져오는 웹 매시업




  웹매시업은 "다찾아"나 "최저가"검색 처럼 한 사이트에서 내가 원하는 정보를 검색하면, 내가 접속한 하나의 맞춤웹사이트가 여러 개의 매시(연결)된 웹사이트에 접근하여 웹에 있는 정보를 휴대기기의 앱에서도 가져다 사용할 수 있도록 웹과 앱은 연결되어 있다는 것으로, 각각의 웹 API를(기계와 기계의대화) 통해 원하는 정보를 취합하여 내가 원하는 정보만 스마트폰 앱에 표시하여 보여줄 수 있게 해준다.

다시 말하면 소비자가 스마트폰 최저가앱을 통해 제일 싼 어그부츠를 검색하면 최저가부터 순서대로 나열해 보여주는 것이라 표현해도 될 것 같다.


1. WebViewer 컴포넌트 (캔버스 컨포넌트와 연계해서 사용한다)

앱 안에서 웹페이지를 보여 주는데, 이는 앱 안에서 구글지도를 이용해 사용자의 현재 위치를 표시할 수 있다. when Button.Click(버튼이벤트)에 call WebViewer.GoToUrl(웹뷰어이벤트)을 설정하면 버튼에 지정한 사이트를 화면에 표시한다.



2. Web 컴포넌트 (원하는 형태로 가공, 계산, 표시)

HTTP (하이퍼 텍스트 트랜스퍼 프로토콜) 텍스트 링크를통해 통신하며 Get, Put, Post 세가지 방법을 사용한다.  API 통신 프로토콜을 이해해야 한다. 또한 받아온 데이터를 보기좋게 처리하려면 파싱을 해야하는데, 가져온 데이터가 CSV(Comma-Separated Values: 항목이 쉼표로구분된 리스트형식)이나 JSON(JavaScript Object Notation), XML형식으로 되어 파싱을 할 때 이에 대한 지식이 필요하다.




* Web.Url 설정 : 어떤 웹서비스 사용할지 지정



책에는 위와 같은 방법으로 사용하여, text를 불러들여 사용한다고 하는데, 원래대로라면, 증권시세정보를 화면에 띄워준다고 하지만 에러가 난다. 인터넷 찾아보니 정책위반으로 없어졌다는 말도 있고, 예전 책이라 개정이 안되어 그냥 출판된 것같다. (책 내용을 옮기자면 서버에서 전달받은 데이터가 Web1.GotText처리기의  responseContent 매개변수에 입력되어 야후API는 csv형식으로 데이터를 보내주므로 GotText 이벤트처리기에서 쉼표로 구분된 현재 구글주식시세와 하루동안 변동량을 StockInfoLabel에 표시한다고 한다.) 참고만하고 다른 방법이나 유투브를 찾아봐야 할 것 같다. )


csv와 같은 API는 초보프로그래머도 Web컴포넌트를 사용해 손쉽게 데이터를 받아와 사용하지만, 다른API, 예를들어 아마존API는 복잡해서 전문프로그래밍 지식이 필요하다고 한다. 


이런 복잡함을 해결하려면, 전문 프로그래머가 초보프로그래머도 사용할 수 있도록 미리 TinyWebDB-호환 웹서비스를 제작해 둬야 된다. 그러면 초보프로그래머는 "태그"만 빼서 사용할 수 있다고 한다. 또한 이런방식을 쓰면, 초보프로그래머는 JSON이나 XML 데이터를 파싱하는 어려움을 겪지 않아도 된다고한다. (아마존책 스캐너와 텍스트검색편 참고 / TinyWebDB의 ServiceURL 속성 : http://aiamazonapi2.appspot.com으로 설정했었음.(웹DB서버 만들때 .appspot.com가 서버 / aiamazonapi2가 DB명으로 추정) / 포스트글 : http://itinfodorose.tistory.com/122 하단참조 : Tiny web db 서버 만들기  )


만약 스스로 api를 만들어 보고 싶다면 https://appinventorapi.com/ 를 참조



<출처 :  David Wolber, Hal Abelson, Ellen Spertus, Liz Looney(2015), 

앱인벤터2(초판)(오일석, 이진선 번역, 서울:한빛아카데미. (원서는 2014년에 출판)>