앱인벤터 웹 컴포넌트

앱인벤터 웹 컴포넌트

 

앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다. 

HTTP GET, POST, PUT, DELETE 요청에 대한 함수들을 제공하는 보이지않는 컴포넌트이다. 웹 컴포넌트는 HTTP(하이퍼 텍스트 트랜스퍼 프로토콜) 텍스트 링크를 통해 통신하며, GET, PUT, POST 세가지 방법을 사용한다. 받아온 데이터를 보기 좋게 처리하려면 파싱을 해야 하는데 가져온 데이터가 CSV(Comma-Seperated Values: 항목이 쉼표로 구분된 리스트형식)이나 JSON(JavaScript Object Notation), XML형식으로 되어 파싱을 해야 한다.

 

웹 컴포넌트

팔레트의 연결 부분에서 웹 컴포넌트는 보이지 않는 컴포넌트로, 뷰어에 drag&drop하면 화면에는 아무것도 표시되지 않는다. 본문에서는 웹 컴포넌트를 사용하여 다른 기기와 통신하는 앱을 만들어보자.

 

팔레트

Serial  컴포넌트는 '연결'에 있다. Serial 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 추가된다.

 

뷰어

컴포넌트들을 추가했을 때, 기본적으로 사각형이 뷰어 화면에 출력된다.

뷰어에는 보이는 않는 컴포넌트로 Serial 컴포넌트 외에 아래 그림과 같은 화면으로 구성되어 있다.

 

앱인벤터 웹 컴포넌트 뷰어 예제화면

 

컴포넌트

 

웹 컴포넌트를 활용한 간단한 사전 값들을 가져와서 목록뷰에 출력하는 앱의 컴포넌트는 아래와 같다. 

- 웹 컴포넌트

- 버튼 컴포넌트 3개 :

  - 버튼 1 : 웹에 데이터를 조회하는 버튼

  - 버튼 2 : 웹에 데이터를 Get하였는데 실패할 경우의 버튼

  - 버튼 3 : 웹에 데이터를 조회해서 100개의 데이터를 가져오는 버튼

- 레이블 컴포넌트 2개 :

  - 레이블1 : "title" 항목을 보여주는 레이블 

  - 레이블2 : "body" 항목을 보여주는 레이블 

- 목록뷰

  - 웹에서 가져온 데이터를 보여주는 목록 뷰 (title 값을 목록으로 보여준다.)

 

앱인벤터 웹 컴포넌트 활용예제 화면

 

 

웹 컴포넌트 속성값

웹 속성값은 쿠키허용, 응답파일이름, 응답저장하기, Timeout, URL 속성값이 있다.

쿠키허용(AllowCookies) 속성값은 쿠키를 허용할지를 정의하는 속성값이다. 참값이면 쿠키를 허용하고, 거짓값이면 쿠키를 허용하지 않는다.

 

쿠키란 인터넷을 사용하면서 저장되는 기록데이터이다. 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 인터넷 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일을 말한다. 쿠키, 웹 쿠키, 브라우저 쿠키라도고 불린다. 웹사이트에 접속할 때 자동적으로 만들어지는 임시 파일로 이용자가 본 내용, 상품 구매 내역, 신용카드번호, 아이디, 비밀번호, IP주소 등의 정보를 담고 있는 일종의 정보파일이다.

 

응답파일이름(ResponseFileName) 속성값은 클라이언트가 요청에 서버가 응답을 할 경우, 클라이언트에서 응답을 저장할 파일 이름을 정의한다. 만일 '응답저장하기' 속성값이 참이고 '응답파일이름'이 비어있다면, 새로운 파일 이름이 생성될 것이다.

응답저장하기(SaveResponse) 속성값은 응답을 하나의 파일에 저장할지 여부를 지정하는 속성값이다. 참값이면 응답을 저장하며, 거짓값이면 응답을 저장하지 않는다.

Timeout 속성값은 각 요청에 응답에 대해기다리는 밀리초를 정의한다. 만일 Timeout값이 0이면 요청은 무한대로 응답을 기다린다.

 

URL 속성값은 URL을 정의한다.

 

앱인벤터 웹 컴포넌트 속성값

 

 

. 기타 속성값

헤더요청(RequestHeaders) : 헤더 요청을 설정한다.

 

웹 컴포넌트 이벤트 블럭들

웹 컴포넌트 이벤트 블럭에는 파일을받았을때, 텍스트를받았을때, TimeOut 이벤트 블럭이 있다.

 

. 웹 컴포넌트 파일을받았을때 블럭

요청이 완료되어 서버로부터 응답파일을 수신했을 때 호출되는 이벤트 블럭이다.

 

앱인벤터 웹 컴포넌트 파일을받았을때 블럭

 

. 웹 컴포넌트 텍스트를받았을때 블럭

요청이 완료되어 서버로부터 응답 텍스트를 수신했을 때 호출되는 이벤트 블럭이다.

 

앱인벤터 웹 컴포넌트 텍스트를받았을때 블럭

 

. 웹 컴포넌트 TimeOut 블럭

요청이 서버로부터 응답이 없어서 타임아웃 되었을 때 호출되는 이벤트 블럭이다.

 

앱인벤터 웹 컴포넌트 TimeOut 블럭

 

웹 컴포넌트 호출 블럭들

웹 컴포넌트에 호출 블럭은 요청데이터만들기, 쿠키데이터지우기, 삭제하기, 가져오기, Html텍스트디코딩하기, JsonObjectEncode, Json텍스트디코딩하기, JsonTextDecodeWithDictionaries,PatchFile, PatchTextWithEncoding, 파일POST전송하기, 텍스트POST전송하기, 인코딩하여텍스트POST전송하기, 파일PUT전송하기, 인코딩하여텍스트PUT전송하기, URI디코딩하기, URI인코딩하기, XML텍스트디코딩하기, XMLTextDecodeAsDictionary 호출 블럭이 있다.

 

. 웹 컴포넌트 요청데이터만들기 블럭

이름과 값 쌍으로 표현하는 두개의 요소 하위리스트를 PostText로 전달하기에 적합한 application/x-www-form-urlencoded 미디어 유형으로 포맷된 문자열로 변환하여 데이터를 만든다.

앱인벤터 웹 컴포넌트 요청데이터만들기 블럭

 

. 웹 컴포넌트 쿠키데이터지우기 블럭

웹 컴포넌트의 모든 쿠키를 삭제한다.

앱인벤터 웹 컴포넌트 쿠키데이터지우기 블럭

 

. 웹 컴포넌트 삭제하기 블럭

URL 속성값에 지정한 사이트에 HTTP DELETE 요청을 하고,이에 대한 응답을 조회한다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

앱인벤터 웹 컴포넌트 삭제하기 블럭

 

. 웹 컴포넌트 가져오기 블럭

URL 속성값에 지정한 사이트에 HTTP GET 요청을 하고,이에 대한 응답을 조회한다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

앱인벤터 웹 컴포넌트 가져오기 블럭

 

. 웹 컴포넌트 Html텍스트디코딩하기 블럭

주어진 HTML텍스트를 디코드한다.

&amp;, &lt;, &gt:, &apos; 그리고 &quot 같은 HTML 문자 항목들을 &, <, >, ', " 으로 변경한다. 

&#xhhhh;, 그리고 &#nnnn;은 적당한 문자로 변경한다.

 

앱인벤터 웹 컴포넌트 Html텍스트디코딩하기 블럭

 

 

. 웹 컴포넌트 JsonObjectEncode 블럭

JavaScript Object Notification 표현에서 기본 제공 유형(예: 부울, 숫자, 텍스트, 목록, 사전)의 값을 반환한다. 값을 JSON으로 나타낼 수없는 경우, 화면의 오류 발생 이벤트가 실행되고 웹 구성 요소가 빈 문자열을 반환한다.

 

앱인벤터 웹 컴포넌트 JsonObjectEncode 블럭

 

. 웹 컴포넌트 Json텍스트디코딩하기 블럭

지정된 JSON 인코딩 값을디코딩하여 해당하는 앱인벤터 값을 생성한다. JSON 목록 [x, y, z]는 목록 (x, y, z), 키 A와 값 B를 가진 JSON 개체로 디코딩된다( {A:B}은 ((A B)) 리스트로 디코딩된다. 즉 2-요소 목록(A B)을 포함하는 목록이다.

JsonTextDecode 메서드 사용결과의 목록 대신 사전 개체를 되돌리려면 사전을 사용한다.

 

앱인벤터 웹 컴포넌트 Json텍스트디코딩하기 블럭

 

. 웹 컴포넌트 JsonTextDecodeWithDictionaris 블럭

지정된 JSON 인코딩 값을 디코딩하여 해당하는 앱인벤터 값을 생성한다. JSON 목록 [x, y, z]는 목록 (x, y, z), 키 A와 값 B를 가진 JSON 개체로 디코딩된다( {A:B}은 키는 A와 값이 B인 사전으로 디코딩된다.

 

앱인벤터 웹 컴포넌트 JsonTextDecodeWithDictionaries 블럭

 

. 웹 컴포넌트 PatchFile 블럭

주어진 경로(지정된 파일의 Url 속성 및 데이터)를 사용하여 HTTP Patch 요청을 수행한다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

 

앱인벤터 웹 컴포넌트 PatchFile 블럭

 

. 웹 컴포넌트 PatchText 블럭

주어진 텍스트와 Url 속성값을 사용하여 HTTP PATCH 요청을 수행한다.

텍스트의 문자들은 UTF-9 인코딩을 사용한다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

 

앱인벤터 웹 컴포넌트 PatchText 블럭

. 웹 컴포넌트 PatchTextWithEncoding 블럭

주어진 텍스트와 Url 속성값을 사용하여 HTTP PATCH 요청을 수행한다.

텍스트의 문자들은 주어진 인코딩을 사용하여 인코드된다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

 

앱인벤터 웹 컴포넌트 PatchTextWithncoding 블럭

 

. 웹 컴포넌트 파일POST전송하기 블럭

주어진 경로(특정 파일로부터 데이터와 Url 속성값)을 사용하여 HTTP POST 요청을 수행한다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

 

앱인벤터 웹 컴포넌트 파일POST전송하기 블럭

 

. 웹 컴포넌트 텍스트POST전송하기 블럭

주어진 텍스트(특정 텍스트와 Url 속성값)을 사용하여 HTTP POST 요청을 수행한다.

텍스트의 문자들은 UTF-8 인코딩을 사용하여 인코딩한다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

 

앱인벤터 웹 컴포넌트 텍스트POST전송하기 블럭

 

. 웹 컴포넌트 인코딩하여텍스트POST전송하기 블럭

주어진 텍스트(특정 텍스트와 Url 속성값)을 사용하여 HTTP POST 요청을 수행한다.

텍스트의 문자들은 주어진 인코딩을 사용하여 인코딩한다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

 

앱인벤터 웹 컴포넌트 인코딩하여텍스트POST전송하기 블럭

 

. 웹 컴포넌트 파일PUT전송하기 블럭

주어진 경로(특정 파일로부터 데이터와 Url 속성값)을 사용하여 HTTP PUT 요청을 수행한다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

 

앱인벤터 웹 컴포넌트 파일PUT전송하기 블럭

 

. 웹 컴포넌트 텍스트PUT전송하기 블럭

주어진 텍스트와 Url 속성값을 사용하여 HTTP PUT 요청을 수행한다.

텍스트의 문자들은 UTF-8 인코딩을 사용하여 인코딩한다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

 

앱인벤터 웹 컴포넌트 텍스트PUT전송하기 블럭

 

. 웹 컴포넌트 인코딩하여텍스트PUT전송하기 블럭

특정 텍스트와 Url 속성값을 사용하여 HTTP PUT 요청을 수행한다.

텍스트의 문자들은 주어진 인코딩을 사용하여 인코딩한다.

만일 '응답저장하기' 속성값이 참이면, 응답은 파일로 저장될 것이고, '파일을받았을때' 이벤트 블럭이 호출될 것이다. 응답파일이름 속성값은 이 파일 이름에 사용된다.

만일 '응답저장하기' 속성값이 거짓이면, '파일을받았을때' 이벤트 블럭이 호출될 것이다.

 

앱인벤터 웹 컴포넌트 인코딩하여텍스트PUT전송하기 블럭

 

. 웹 컴포넌트 URI디코딩하기 블럭

인코딩된 텍스트 값을디코딩하여 값이 더 이상 URL 인코딩되지 않도록 디코딩한다.

 

앱인벤터 웹 컴포넌트 URI디코딩하기 블럭

 

. 웹 컴포넌트 URI인코딩하기 블럭

 주어진 텍스트 값을 인코딩하여 URL에서 사용할 수 있도록 한다.

 

앱인벤터 웹 컴포넌트 URI인코딩하기 블럭

 

. 웹 컴포넌트 XML텍스트디코딩하기 블럭

주어진 XML 문자열을디코딩하여 리스트구조를 생성한다. <tag><string></tag> 는 태그와 문자열 쌍을 포함하는 리스트로 디코딩한다. 더 일반적으로 obj1, obj2, ...이 이 태그로 구분된 XML 문자열이면 <tag><obj1 obj2...</tag>는 첫 번째 요소가 태그이고 두 번째 요소가 디코딩된 오브젝트의 리스트인 쌍을포함하는 리스트로 디코딩된다.

 

예제:

• <foo><123/foo> 는 (foo 123) 쌍을 포함하는 하나의 리스트로 디코드된다.
• <foo>1 2 3</foo> 는 (foo "1 2 3") 쌍을 포함하는 하나의 리스트로 디코드된다.
• <a><foo>1 2 3</foo><bar>456</bar></a> 는 (bar 123) 쌍과 (foo "1 2 3") 쌍을 갖는 2개의 항목 리스트로 디코드된다.

오브젝트의 시퀀스가 태그로 구분된 항목과 태그로 구분되지 않은 항목을 혼합된 경우는 태그로 구분되지 않은 항목들은 시퀀스에서 꺼내어 "content" 태그로 포장한다. 예로 <a><bar>456</bar>many<foo>1 2 3</foo>apples<a></code> 가 위와 같은 비슷한 예로 목록 X는 첫 번째 항목이 문자열 "content"이고 두 번째 항목이 목록(many, apples)인 추가 쌍을 포함하는 3개 항목 목록이다. 이 메서드는 오류를 표시하고 결과가 올바른 형식의 XML이 아닌 경우 빈 목록을 반환한다.

 

앱인벤터 웹 컴포넌트 XML텍스트디코딩하기 블럭

 

. 웹 컴포넌트 XMLTextDecodeAsDictionary 블럭

지정된 XML텍스트을 디코딩하여 사전 구조를 생성한다. 사전에는 특수 키 $tag, $localName, #namespace, #namespaceUri, $attributes 및 $content뿐만 아니라 모든 노드에 대한 각 고유 태그에 대한 키도 포함되어 있으며, 여기서 설명한 것과 동일한 구조의 요소 목록을 가리킨다.

$tag 키는 foo:bar와 같은 전체 태그 이름이다. #localNamedms 이름의 로컬 부분(콜론: 문자 뒤의 모든 부분)이다. 네임스페이스가 주어지면(콜른 : 문자 이전의 모든 것), #namespace로 제공되며 해당 URL은 #namespaceUri로 제공된다. 속성은 $ 속성으로 사전에 저장되고 하위 노드는 $content 아래에 목록으로 제공된다.

다음 XML 문서를 생각해보자:

<ex:Book xmlns:ex="http://example.com/">   <ex:title xml:lang="en">0n the Origin fo Species</ex:title>   <ex:author>Charles Darwin</ex:author> <ex:Book>

위의 XML 문서를 파싱했을 때,

$tag 키는 "ex:Book"가 되고

$localName 키는 "Book" 이 되고

$namespace 키는 "ex", 

$namespaceUri는 "http://example.com/"이 되고

$attributes 키는 사전 {} 이 되고

$content 는 <ex:title>과 <ex:author> 요소가 디코드되어 표시하는 두개의 항목 리스트가 될 것이다.

<ex:title> 요소와 관련된 첫 번째 항목은 ("xml:lang": "en"} 사전을 포함하는 $attributes키를 갖는다.

하나의 요소에 각 name=value 속성에 대해 키-값 쌍을 매핑하는 이름이 $proutes 사전에 있다. 이러한 특수 키 외에도 $content 목록을 건너뛸 때보다 더 빨리 조회할 수 있도록 "ex:title"과 "ex:author"이 있다.

 

앱인벤터 웹 컴포넌트 XMLTextDecodeAsDictionary 블럭

 

웹 컴포넌트 가져오기/지정하기 블럭들

웹 컴포넌트 중 가져오기/지정하기 블럭은 쿠키허용, 요청헤더, 응답파일, 응답저장하기, Timeout, URL 등의 가져오기/지정하기  블럭이 있다.

 

. 웹 컴포넌트 쿠키허용 블럭

쿠키를 허용할지를 지정하거나 지정된 쿠키허용 여부를 가져오는 블럭이다.

 

앱인벤터 웹 컴포넌트 쿠키허용 블럭

 

. 웹 컴포넌트 요청헤더 블럭

요청헤더를 설정하거나, 설정된 요청헤더를 가져오는 블럭이다.

 

앱인벤터 웹 컴포넌트 요청헤더 블럭

 

. 웹 컴포넌트 응답파일이름 블럭

응답파일이름을 지정하거나 지정된 응답파일이름을 가져오는 블럭이다.

 

앱인벤터 웹 컴포넌트 응답파일이름 블럭

 

. 웹 컴포넌트 응답저장하기 블럭

응답에 대해 파일로 저장할지를 참 혹은 거짓으로 지정하거나 지정된 값을 가져오는 블럭이다.

 

앱인벤터 웹 컴포넌트 응답저장하기 블럭

 

. 웹 컴포넌트 Timeout 블럭

요청에 대해 응답을 기다리는 타임아웃 시간을 지정하거나 지정된 타임아웃 시간을 가져오는 블럭이다.

단위는 밀리초이다.

 

앱인벤터 웹 컴포넌트 Timeout 블럭

 

. 웹 컴포넌트 URL 블럭

특정 인테넛 주소를 지정하거난 지정된 인테넛주소를 가져오는 블럭이다. 형식은 URL이다.

 

앱인벤터 웹 컴포넌트 URL 블럭

 

 

 

 

이상으로 앱인벤터 웹 컴포넌트 블럭에 대해 간략히 살펴보았다. 좀더 자세히 확인하기 싶으면,  컴포넌트를 활용하여 간단하게 Get 메소들 사용하여 서버의 title과 body를 가져와 파싱하여 레이블에 보여주는 앱을 블럭들을 하나씩 사용해보면서 블럭의 활용 용도 등을 파악하면 좋을 것 같다. 눈으로 보는 것보다 직접 해보는게 여러모로 코딩하는데 이해하고 코딩 실력이 향상되는데 도움이 된다.

 

Just Do it!!!

Just Drag&Drop!!!

 

MagneticFieldSens