네트워크 서비스 사용

NetworkRequest 컴포넌트는 ArcGIS Online에 ArcGIS REST API 호출을 수행할 수 있습니다. 이를 수행하기 위해 컴포넌트는 JavaScript에서 XMLHttpRequest 클래스의 기능과 cURL(클라이언트 URL) 명령줄 도구를 통합합니다. 이 통합을 통해 JavaScript 웹앱에서 QML 네이티브 앱으로 코드를 마이그레이션할 수 있습니다.

XMLHttpRequest에서 NetworkRequest로의 마이그레이션

다음 코드 샘플은 JavaScript와 AppStudio AppFramework 모두에서 동일한 기능을 보여줍니다. 이 샘플은 JavaScript에서 QML로 코드를 마이그레이션할 때 가이드로 유용하게 사용할 수 있습니다.

이 코드 샘플은 JavaScript에서 XMLHttpRequest를 사용하여 네트워크 요청을 수행합니다.

var req = new XMLHttpRequest();
var url = "http://www.arcgis.com/sharing/rest?f=json"
req.open("GET", url, true);
req.onreadystatechange = function() {
    console.log("readyState: ", req.readyState);
    if (req.readyState !== 4) return;
    if (req.status !== 200) return;
    console.log("responseText: ", req.responseText);
}
req.send();

이 코드 샘플은 AppFramework에서 NetworkRequest를 사용하여 동일한 네트워크 요청을 수행합니다.

NetworkRequest {
    id: req
    url: "http://www.arcgis.com/sharing/rest?f=json"
    onReadyStateChanged: {
        console.log("readyState: ", readyState);
        if (readyState !== 4) return;
        if (status !== 200) return;
        console.log("responseText: ", responseText);
    }
}
function test() {
    req.send();
}

ReadyState 열거

readyState 속성은 잠재적 속성 값을 나타내는 정수의 열거로 채워집니다. 동작 변경 없이 앱에서 정수 값, JavaScript 상태, NetworkRequest 상태를 사용하여 XMLHttpRequest에서 쉽게 마이그레이션할 수 있습니다.

정수 값	JavaScript 상태	NetworkRequest
0	보내지 않음	ReadyStateUninitialized
1	열림	ReadyStateInitialized
2	헤더_수신함	ReadyStateSending
3	불러오는 중	ReadyStateProcessing
4	완료	ReadyStateComplete

파일 처리

웹앱과 네이티브앱의 주요 차이점은 네이티브앱과는 달리 웹앱은 파일 시스템에 접근할 수 없다는 것입니다. XMLHttpRequest에서는 파일에 접근할 수 없지만 NetworkRequest에서는 가능하다는 점에서 해당 차이점이 반영됩니다. 웹앱의 파일 접근 요청은 JavaScript가 아닌 cURL을 사용하여 수행해야 합니다.

cURL을 사용하여 파일을 업로드하려면 다음을 수행해야 합니다.

curl \
    -F title="My Code Sample"
    -F type="Code Sample"
    -F tags="Code Sample"
    -F file="@CodeSample.zip"
    -F token="${ARCGIS_ONLINE_TOKEN}"
    http://http://www.arcgis.com/sharing/rest/content/users/jsmith/addItem

NetworkRequest에는 파일 이름 앞에 와야 하는 문자를 처리하는 uploadPrefix 속성이 있습니다. 이 속성의 기본값은 @이며 cURL과의 호환성을 유지관리합니다. 다음 코드 샘플은 NetworkRequest를 사용하여 복제된 동일한 동작을 보여줍니다.

property string user: "jsmith"
property string itemTitle: "My Code Sample"
property string itemType: "Code Sample"
property string itemTags: "Code, Sample"
property string itemFile: "CodeSample.zip"
property string token // ARCGIS_ONLINE_TOKEN
NetworkRequest {
    id: req    url: "http://www.arcgis.com/sharing/rest/content/users/%1/addItem".arg(user)
	function submit() {
        send( {
            "title": itemTitle,            "type": itemType,            "tags": itemTags,            "file": uploadPrefix + itemFile,            "token": token,            "f": "json"
        } );
    }
}

send 메소드에 전달된 JSON 객체는 키/값 사전 맵을 포함하는 JavaScript 객체입니다. NetworkRequest의 method 속성은 네트워크 요청의 특성을 보여줍니다. 이 속성이 비어 있거나 정의되지 않은 경우 GET 요청이 기본값으로 설정됩니다. 파일을 업로드해야 하는 경우 method 속성은 POST로 설정되어야 합니다.

기본 콘텐츠 유형

ArcGIS REST API에 대한 요청을 단순화하기 위해 NetworkRequest는 기본적으로 Content-Type 헤더를 application/x-www-form-urlencoded로 설정합니다. 이 과정은 ArcGIS Online REST API를 사용하는 경우 필수입니다. 이 Content-Type은 대부분의 다른 웹사이트에서도 작동합니다. 그러나 Amazon Web Services와 같은 특정 웹사이트의 경우 다음 설정을 지워야 할 수 있습니다.

networkRequest.headers["Content-Type"] = "";