JSON과 XML데이터 연동하기_앱플러스폼(ApplusForm, AppForm)

개요

애플리케이션을 개발하다 보면 서버와 연동하여 데이터를 송수신하는 기능이 거의 필수로 들어가게 됩니다. 이때, 서버와 데이터를 주고 받을 때 데이터를 처리하거나 예외사항들을 처리하면서 발생하는 노고는 개발자들을 힘들게 합니다.

또한, 디자이너나 기획자로써 개발을 할 때 막막하기 그지없는 개발단계이기도 합니다. 요즈음은 모바일웹으로 페이지를 만들어 처리하는 경우가 많지만 성능을 높여야 하거나 기능을 추가하는 과정에서 한계를 느껴 C나 Java로 개발하기 위해 전환하게 되기도 합니다.

앱플러스폼(ApplusForm)에서는 이같은 어려움을 비교적 손쉽게 해결이 가능합니다. HTTP 혹은 HTTPS를 이용하여 데이터를 전송하는 기능을 사용하기 쉽고 안정적으로 제공하므로 개발자 혹은 비개발자(디자이너, 기획자)도 강력한 기능을 빠른 시간안에 추가할 수 있습니다.

서버와는 대부분 HTTP 혹은 HTTPS로 통신하고 데이터는 JSON 혹은 XML로 주고 받는게 일반적입니다.

HTTP와 HTTPS는 주소가 http://로 시작하는지 https://로 시작하는지 만으로 해결되므로 XML과 JSON에 대해 사용법을 보겠습니다.

XML 데이터 처리

MOML의 기본 구성이 XML로 이루어져 있으므로 XML데이터를 처리하는 다양한 기능이 내재되어 있습니다.

XML 관련 Objects
DATASOURCE
<LIST dataSource="" dataList="">
<CHART dataSrouce="" datalist="">
<CALENDAR dataSrouce="" datalist="">
<SPINNER dataSrouce="" datalist="">
xpath
xmlProcessing

XML에 관련된 Object들은 위와 같습니다. 사용예를 들어보겠습니다.

<DATASOURCELIST>
    <DATASOURCE id="WEATHER" src="http://www.kma.go.kr/XML/weather/sfc_web_map.xml" />
</DATASOURCELIST>

수신xml  
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<current xmlns="current">
    <weather year="2013" month="10" day="28" hour="18">
        <local stn_id="95" icon="18" desc="연무" ta="11.5">철원</local>
        <local stn_id="101" icon="17" desc="박무" ta="12.7">춘천</local>
        <local stn_id="108" icon="18" desc="연무" ta="14.5">서울</local>
        <local stn_id="119" icon="18" desc="연무" ta="12.3">수원</local>
    </weather>
</current>  

src에 url을 입력하면 데이터를 얻어와 id로 접근할 수 있습니다. 얻어온 XML에서 값을 얻어올 때에는 xpath.evaluateEx()를 사용합니다.
xpath.evaluateEx('WEATHER', '//default:local[text()=\'수원\']/@desc')은 연무의 결과가 나오게 됩니다. '//default:local[text()=\'수원\']/@desc'는 xpath 정규식이므로 관련 자료를 찾아보시기 바랍니다.

그외 <LIST><CHART><CALENDAR><SPINNER>의 attribute인 dataSource는 접속할 서버의 url이며 dataList는 루트로 사용할 path입니다.

JSON 데이터 처리

MOML에서 JSON 데이터를 처리하기 위해서는 JSON을 XML로 변환한 후에 가능합니다.

<FUNCTION id="netRequest(msg, succCallback)" >
        <FUNCTIONITEM cmd="userVariable.req.succCallback = succCallback"/>
        <FUNCTIONITEM cmd="userVariable.req.requestId = http.createRequestId() + ''"/>
        <FUNCTIONITEM cmd="http.addEventListener('onComplete', 'responseMessage')"/><!-- 호출하는 지점의 container로 지정됨 -->
        <FUNCTIONITEM cmd="http.get(userVariable.req.requestId, msg, '')" />
    </FUNCTION>

    <FUNCTION id="responseMessage">
        <FUNCTIONITEM condition="userVariable.req.requestId == parameter.param[0]" cmd="function.responseOk(parameter.param[2], parameter.param[3])"/>
    </FUNCTION>

    <FUNCTION id="responseOk(retCode, retData)">
        <FUNCTIONITEM cmd="container.loadingWindow.close()"/>
        <FUNCTIONITEM condition="retCode == '-1'" cmd="device.toastPopup('네트워크에 연결할 수 없습니다.')"/>
        <FUNCTIONITEM cmd="http.removeEventListener('onComplete', 'responseMessage')"/>
        <FUNCTIONITEM cmd="userVariable.req.responseMessage = json.toXml(retData)"/>
        <FUNCTIONITEM cmd="application.runScript(userVariable.req.succCallback)"/>
    </FUNCTION>
</FUNCTIONLIST>  

netRequest('http://domain.com/listdata', 'function.' + document.fullPathId+'.listOk')로 FUNCTION을 호출했을 때 해당 url에서 json데이터가 수신되면 responseOk function에서는 json.toXml로 json데이터를 xml로 변환한 후 userVariable에 보관하게 됩니다.
이후에는 동일하게 xpath.evaluateEx를 이용하여 데이터를 얻어오기만 하면 됩니다.

JSON과 XML데이터를 서버로부터 얻어와 값을 얻어오는 기본적인 과정을 보았습니다. 데이터를 얻어와 화면에 출력하기 위해 각종 UI Object를 활용하면 됩니다. UI Object중에는 <LIST>와 같이 직접 서버에서 데이터를 얻어오는 기능을 가진 것도 있어 개발을 도와주니 MOML API Reference 및 ApplusForm의 템플릿 들을 참고하시기 바랍니다.