개요
이 자습서에서는 Cordova용 Azure Mobile Apps의 오프라인 동기화 기능을 소개합니다. 오프라인 동기화를 사용하면 최종 사용자가 네트워크 연결이 없는 경우에도 모바일 앱(데이터 보기, 추가 또는 수정)과 상호 작용할 수 있습니다. 변경 내용은 로컬 데이터베이스에 저장됩니다. 디바이스가 다시 온라인 상태가 되면 이러한 변경 내용이 원격 서비스와 동기화됩니다.
이 자습서는 Apache Cordova 빠른 시작 자습서를 완료할 때 만드는 Mobile Apps용 Cordova 빠른 시작 솔루션을 기반으로 합니다. 이 자습서에서는 Azure Mobile Apps의 오프라인 기능을 추가하도록 빠른 시작 솔루션을 업데이트합니다. 또한 앱에서 오프라인 관련 코드를 강조 표시합니다.
오프라인 동기화 기능에 대한 자세한 내용은 Azure Mobile Apps 오프라인 데이터 동기화항목을 참조하세요. API 사용량에 대한 자세한 내용은 API 설명서를 참조하세요.
빠른 시작 솔루션에 오프라인 동기화 추가
오프라인 동기화 코드를 앱에 추가해야 합니다. 오프라인 동기화에는 azure Mobile Apps 플러그 인이 프로젝트에 포함될 때 자동으로 앱에 추가되는 cordova-sqlite-storage 플러그 인이 필요합니다. 빠른 시작 프로젝트에는 이러한 플러그 인이 모두 포함됩니다.
Visual Studio의 솔루션 탐색기에서 index.js 열고 다음 코드를 바꿉
var client, // Connection to the Azure Mobile App backend todoItemTable; // Reference to a table endpoint on backend이 코드를 사용하여 다음을 수행합니다.
var client, // Connection to the Azure Mobile App backend todoItemTable, // Reference to a table endpoint on backend syncContext; // Reference to offline data sync context다음으로, 다음 코드를 바꿉다.
client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net');이 코드를 사용하여 다음을 수행합니다.
client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net'); var store = new WindowsAzure.MobileServiceSqliteStore('store.db'); store.defineTable({ name: 'todoitem', columnDefinitions: { id: 'string', text: 'string', complete: 'boolean', version: 'string' } }); // Get the sync context from the client syncContext = client.getSyncContext();위의 코드 추가는 로컬 저장소를 초기화하고 Azure 백 엔드에서 사용되는 열 값과 일치하는 로컬 테이블을 정의합니다. (이 코드에 모든 열 값을 포함할 필요는 없습니다.) 이
version필드는 모바일 백 엔드에서 유지 관리되며 충돌 해결에 사용됩니다.getSyncContext를 호출하여 동기화 컨텍스트에 대한 참조를 가져옵니다. 동기화 컨텍스트는
.push()호출될 때 클라이언트 앱이 수정한 모든 테이블의 변경 내용을 추적하고 푸시하여 테이블 관계를 유지하는 데 도움이 됩니다.애플리케이션 URL을 모바일 앱 애플리케이션 URL로 업데이트합니다.
다음으로, 다음 코드를 대체합니다.
todoItemTable = client.getTable('todoitem'); // todoitem is the table name이 코드를 사용하여 다음을 수행합니다.
// Initialize the sync context with the store syncContext.initialize(store).then(function () { // Get the local table reference. todoItemTable = client.getSyncTable('todoitem'); syncContext.pushHandler = { onConflict: function (pushError) { // Handle the conflict. console.log("Sync conflict! " + pushError.getError().message); // Update failed, revert to server's copy. pushError.cancelAndDiscard(); }, onError: function (pushError) { // Handle the error // In the simulated offline state, you get "Sync error! Unexpected connection failure." console.log("Sync error! " + pushError.getError().message); } }; // Call a function to perform the actual sync syncBackend(); // Refresh the todoItems refreshDisplay(); // Wire up the UI Event Handler for the Add Item $('#add-item').submit(addItemHandler); $('#refresh').on('click', refreshDisplay);위의 코드는 동기화 컨텍스트를 초기화한 다음 getSyncTable(getTable 대신)을 호출하여 로컬 테이블에 대한 참조를 가져옵니다.
이 코드는 모든 CRUD(만들기, 읽기, 업데이트 및 삭제) 테이블 작업에 로컬 데이터베이스를 사용합니다.
이 샘플에서는 동기화 충돌 시 간단한 오류 처리를 수행합니다. 실제 애플리케이션은 네트워크 조건, 서버 충돌 등과 같은 다양한 오류를 처리합니다. 코드 예제는 오프라인 동기화 샘플을 참조하세요.
다음으로 이 함수를 추가하여 실제 동기화를 수행합니다.
function syncBackend() { // Sync local store to Azure table when app loads, or when login complete. syncContext.push().then(function () { // Push completed }); // Pull items from the Azure table after syncing to Azure. syncContext.pull(new WindowsAzure.Query('todoitem')); }syncContext.push()를 호출하여 모바일 앱 백 엔드에 변경 내용을 푸시할 시기를 결정합니다. 예를 들어 동기화 단추에 연결된 단추 이벤트 처리기에서 syncBackend 를 호출할 수 있습니다.
오프라인 동기화 고려 사항
샘플에서 syncContext의 푸시 메서드는 로그인을 위해 콜백 함수의 앱 시작에서만 호출됩니다. 실제 애플리케이션에서는 이 동기화 기능을 수동으로 또는 네트워크 상태가 변경될 때 트리거할 수도 있습니다.
컨텍스트에서 추적되는 보류 중인 로컬 업데이트가 있는 테이블에 대해 끌어오기를 실행하면 해당 끌어오기 작업이 자동으로 푸시를 트리거합니다. 이 샘플에서 항목을 새로 고치거나 추가하고 완료하는 경우 중복될 수 있으므로 명시적 푸시 호출을 생략할 수 있습니다.
제공된 코드에서 원격 todoItem 테이블의 모든 레코드가 조회되지만, push에 쿼리 ID와 query를 전달하여 레코드를 필터링할 수도 있습니다. 자세한 내용은 Azure Mobile Apps의 오프라인 데이터 동기화에서 증분 동기화 섹션을 참조하세요.
(선택 사항) 인증 사용 안 함
오프라인 동기화를 테스트하기 전에 인증을 설정하지 않으려면 로그인을 위해 콜백 함수를 주석으로 처리하지만 콜백 함수 내의 코드는 주석 처리되지 않은 상태로 둡니다. 로그인 줄을 주석으로 처리한 후 코드는 다음과 같습니다.
// Login to the service.
// client.login('twitter')
// .then(function () {
syncContext.initialize(store).then(function () {
// Leave the rest of the code in this callback function uncommented.
...
});
// }, handleError);
이제 앱을 실행할 때 앱이 Azure 백 엔드와 동기화됩니다.
클라이언트 앱 실행
이제 오프라인 동기화를 사용하도록 설정하면 각 플랫폼에서 클라이언트 애플리케이션을 한 번 이상 실행하여 로컬 저장소 데이터베이스를 채울 수 있습니다. 나중에 오프라인 시나리오를 시뮬레이션하고 앱이 오프라인 상태일 때 로컬 저장소의 데이터를 수정합니다.
(선택 사항) 동기화 동작 테스트
이 섹션에서는 백 엔드에 잘못된 애플리케이션 URL을 사용하여 오프라인 시나리오를 시뮬레이션하도록 클라이언트 프로젝트를 수정합니다. 데이터 항목을 추가하거나 변경할 때 이러한 변경 내용은 로컬 저장소에 저장되지만 연결이 다시 설정될 때까지 백 엔드 데이터 저장소에 동기화되지 않습니다.
솔루션 탐색기에서 index.js 프로젝트 파일을 열고 다음 코드와 같이 잘못된 URL을 가리키도록 애플리케이션 URL을 변경합니다.
client = new WindowsAzure.MobileServiceClient('http://yourmobileapp.azurewebsites.net-fail');CSP
<meta>요소를 index.html에서 동일한 잘못된 URL로 업데이트하십시오.<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://yourmobileapp.azurewebsites.net-fail; style-src 'self'; media-src *">클라이언트 앱을 빌드 및 실행하고 앱이 로그인 후 백 엔드와 동기화하려고 할 때 예외가 콘솔에 기록됩니다. 추가하는 모든 새 항목은 모바일 백 엔드로 푸시될 때까지 로컬 저장소에만 존재합니다. 클라이언트 앱은 백 엔드에 연결된 것처럼 동작합니다.
앱을 닫고 다시 시작하여 만든 새 항목이 로컬 저장소에 유지되는지 확인합니다.
(선택 사항) Visual Studio를 사용하여 Azure SQL Database 테이블을 확인하여 백 엔드 데이터베이스의 데이터가 변경되지 않은지 확인합니다.
Visual Studio에서 서버 탐색기엽니다. Azure ->내의데이터베이스로 이동합니다. 데이터베이스를 마우스 오른쪽 단추로 클릭하고 SQL Server 개체 탐색기 열기를 선택합니다. 이제 SQL 데이터베이스 테이블 및 해당 내용을 찾아볼 수 있습니다.
(선택 사항) 모바일 백엔드의 재연결을 테스트하기
이 섹션에서는 온라인 상태로 돌아오는 앱을 시뮬레이션하는 모바일 백 엔드에 앱을 다시 연결합니다. 로그인하면 데이터가 모바일 백 엔드에 동기화됩니다.
index.js 다시 열고 애플리케이션 URL을 복원합니다.
index.html 다시 열고 CSP
<meta>요소에서 애플리케이션 URL을 수정합니다.클라이언트 앱을 다시 빌드하고 실행합니다. 앱은 로그인 후 모바일 앱 백 엔드와 동기화를 시도합니다. 디버그 콘솔에 예외가 기록되지 않는지 확인합니다.
(선택 사항) SQL Server 개체 탐색기 또는 Fiddler와 같은 REST 도구를 사용하여 업데이트된 데이터를 봅니다. 백 엔드 데이터베이스와 로컬 저장소 간에 데이터가 동기화되었습니다.
데이터가 데이터베이스와 로컬 저장소 간에 동기화되었으며 앱 연결이 끊긴 동안 추가한 항목이 포함되어 있습니다.