모바일 앱 디버깅

MobileTogether는 매우 복잡하고 정교하며, 다양한 플랫폼에서 작동하는 솔루션을 구축할 수 있는 도구입니다. 개발자는 모바일 앱 개발 과정에서 문제를 해결하고 앱의 작동 방식을 이해하기 위해 모바일 앱 디버깅 도구가 필요합니다. MobileTogether 디자이너는 액션 트리 내에서 앱 실행 과정을 완벽하게 디버깅할 수 있는 기능을 제공합니다 XPath/XQuery 함수 디버깅. 이러한 기능들은 하나의 도구에 통합된 두 가지 모바일 앱 디버깅 화면을 통해 제공됩니다.

액션 디버거 뷰를 사용하면 개발자가 컨트롤 이벤트 또는 페이지 이벤트의 액션을 디버깅할 수 있습니다. 이 뷰는 처리 과정에서 디버깅 대상으로 선택된 액션이 발견될 때 사용할 수 있습니다. XPath 디버거 뷰는 XPath/XQuery 평가 창을 열어 표현식을 자세히 추적하고 디버깅할 수 있도록 지원합니다.

개발자는 다양한 위치에 중단점을 설정할 수 있으며, 앱을 실행하면서 한 단계씩 진행할 수 있습니다. 또한, 실행 중 어느 시점에서든 일시 정지하여 전체 실행 환경을 자세히 검토할 수 있습니다.

이제 모바일 앱 디버깅이 실제로 어떻게 작동하는지 살펴보겠습니다

이전 게시글에서, 모바일 개발을 위한 프로그래밍 기술을 설명하면서, 에어 퀄리티(대기 질) 앱을 예시로 사용하여 모바일 앱 내의 서브루틴을 소개했습니다. 이 서브루틴은 MobileTogether 액션 그룹으로 구현되었으며, API에서 반환된 데이터(GMT 시간 및 조정 값)를 사용하여 대기 질 측정 시점의 지역 시간을 계산합니다. 우리는 이 서브루틴을 디버깅하여 계산 결과가 정확한지 확인할 수 있습니다.

먼저, "Calc 로컬 시간" 액션 그룹의 시작 부분에 중단점을 설정하여, 서브루틴이 호출될 때 실행을 일시 중지하도록 하겠습니다

필요한 만큼 중단점을 추가할 수 있으며, 나중에 찾을 필요에 대해 걱정할 필요가 없습니다. 중단점은 주 디버그 메뉴에서 관리됩니다

저희는 메뉴를 사용하여 "다음 중단점에서 중단" 옵션을 설정했습니다. 이제 앱을 시뮬레이터에서 실행할 수 있으며, "Calc local time" 액션 그룹이 호출되기 전까지는 정상적으로 실행됩니다.

아래 이미지는 앱이 중단점에서 일시 정지되었을 때 시뮬레이터 화면을 보여줍니다. 사용자는 런던의 도시 관련 보고서를 선택했고, 앱은 API를 호출했으며, 이제 반환된 데이터를 사용하여 현지 시간을 계산하려고 합니다

화면의 왼쪽에는 두 개의 디버거 창이 열려 있습니다. 맨 위 창에서는 수행될 작업들이 표시되며, 빨간색 중단점과 초록색 화살표가 현재 실행 중인 단계를 나타냅니다. 아래 창에는 해당 작업 그룹으로 이어지는 작업들의 호출 스택이 표시됩니다.

콜 스택 화면에서 "+" 버튼을 누르면, 액션 그룹이 호출될 때 전달된 매개변수 값들이 표시됩니다. 화면 상단의 "단계별 실행" 버튼을 클릭하면, 코드를 한 단계씩 실행할 수 있습니다

잠깐만요, 런던이 영국 그리니치와 같은 시간대에 있지 않나요? 그렇다면 GMT 시간에서 별도로 시간을 조정할 필요가 없어야 하는 것 아닌가요? 저는 제가 가진 모든 스마트 기기와 검색 엔진에 물어봤는데, 그들은 런던과 그리니치가 모두 영국 여름 시간(British Summer Time)을 사용하며, 이는 GMT보다 1시간 빠르다고 알려주었습니다.

어쨌든, API에서 제공된 데이터는 이것이므로, 우리는 계속 진행할 수 있습니다. 코드 주석을 하나씩 살펴보면, 첫 번째 "업데이트 노드(Update Node)" 액션에 도달합니다

localDateTime 노드는 $time 매개변수의 값으로 설정됩니다.

다시 한 번:

"add-hours-to-dateTime()" 함수에 필요한 구문에 맞추기 위해, 날짜와 시간 사이에 "T" 문자를 삽입합니다.

다시 한 번:

추가 근무 시간이 반영되었습니다.

다시 한 번:

조정해야 할 부분이 있나요? 아니요.

다시 한 번:

"T"를 공백으로 바꾸세요.

다시 한 번:

주석 줄은 액션 그룹의 끝을 나타냅니다. 이제 상단에 있는 녹색 화살표 "실행" 버튼을 사용하여 앱의 정상적인 실행을 계속할 수 있습니다. 하위 페이지가 열리면서 대기 질 지수를 표시합니다

따라서 모바일 앱 디버깅 도구의 "작업 보기" 기능을 통해 우리의 로직이 정확하다는 것을 확인할 수 있었습니다.

하지만 중간 결과를 매 단계마다 저장하는 것은 매우 번거롭고 불필요합니다. 우리는 이러한 단계를 하나의 식으로 결합해야 합니다

원래 세 가지 기능은 비활성화되고, 복잡한 표현식을 포함하는 하나의 기능으로 대체됩니다. 이 표현식을 테스트하려면 XPath 디버거 뷰를 사용할 수 있습니다.

우리는 화면 전환을 원활하게 할 수 있었지만, 첫 번째 디버깅 세션을 중단하고 표현식을 수정했습니다. 이제 이 새로운 버전을 시뮬레이터에서 실행할 것입니다. 이번에는 중단점에서 멈추면, XPath/XQuery 디버거 화면에서 "XPath로 진입" 버튼을 사용하여 모바일 앱 디버깅을 시작할 것입니다

XPath/XQuery 평가 창이 열리고, 디버거가 해당 표현식을 평가하기 시작합니다

이제 XPath 창에서 "Step into" 버튼을 사용하여 표현식을 단계별로 분석해 보겠습니다

이미지 하단에 있는 영역은 액션 그룹이 호출될 때 제공된 매개변수의 내용을 나타냅니다. "$time" 변수의 값은 API에서 반환된 문자열 데이터를 포함하는 JSON 노드 "s"에서 가져온 것입니다.

다시 한 번:

표현식 내부에서 여전히 'T'는 add-hours-to dateTime() 함수의 구문을 준수해야 합니다.

다시 한 번:

이제 본격적으로 작업을 시작하여 완료했습니다. 이번 실행에서 원래의 $time 파라미터는 2020-08-03 07:00:00이었고, 조정에 사용된 $adj 값은 -07:00이었습니다. 현재 결과는 2020-08-03T00:00:00입니다.

다음 단계는 분 단위 조정이 필요한지 확인하기 위한 테스트입니다. "$adj" 매개변수는 "00"으로 끝나기 때문에, 이 테스트는 실패하고 "T"가 대체된 후 하위 페이지가 표시됩니다

만약 크로스 플랫폼 개발을 하고 있다면, 모바일 앱 디버깅 기능을 갖춘 도구가 필요합니다. 저희 MobileTogether의 동영상 데모를 확인해 보시거나, 더 많은 샘플 앱을 살펴보시거나, 심층적인 정보를 얻으려면 온라인 매뉴얼을 참고하십시오. 크로스 플랫폼 모바일 앱을 가장 빠르게 개발하고 싶다면, MobileTogether 디자이너를 다운로드하여 시작해 보세요.