Share via

모바일 센서를 사용하는 앱 만들기

  • 아티클

센서를 사용하면 휴대전화의 기능을 활용하여 앱에 더 많은 기능을 추가할 수 있습니다. 이 문서에서는 Power Apps에서 모바일 장치로 센서를 사용하는 방법에 대해 알아봅니다.

이를 위해 두 개의 화면이 있는 샘플 앱을 만들 것입니다. 첫 번째 화면은 현재 나침반 방향, 위도, 경도, 고도를 표시하고 NFC 태그를 스캔하여 텍스트 정보를 얻을 수 있습니다. 두 번째 화면은 X 및 Y 축을 따라 장치의 각도를 생성하기 위해 가속도계 데이터를 표시하는 방법을 보여줍니다.

첫 번째 화면 뒤에 시나리오를 설정하려면 NFC 기반 보물 찾기를 위한 앱을 빌드한다고 상상을 해봅니다. 각 참가자는 앱을 사용하여 다음 목적지를 가리키는 나침반 방향, 위도 및 경도를 제공하는 NFC 태그를 스캔합니다. 목적지에서 참가자는 다른 태그를 스캔하고 보물 찾기가 끝날 때까지 프로세스를 반복합니다.

두 번째 화면의 경우 대략적인 각도를 측정하는 도구가 필요하다고 상상을 해봅니다. 두 번째 화면에서 참가자는 표면에 장치를 배치하거나 들고 장치의 X 및 Y 축에 대한 각도를 얻을 수 있을 뿐만 아니라 해당 각도의 시각적 표현을 볼 수 있습니다.

이 비디오를 시청하여 모바일 센서를 사용하는 앱을 빌드하는 방법을 알아보세요.

필수 조건

  • 데이터 연결이 사용되지 않으므로 이 앱에서 모든 수준의 Power Apps 라이선스를 사용할 수 있습니다.

  • 대부분의 PC에는 필요한 센서가 없을 수 있으므로 GPS 및 가속도계 기능이 있는 휴대폰이나 태블릿과 같은 모바일 장치가 필요합니다.

  • NFC 스캔 기능에는 NFC 지원 장치가 필요합니다. 또한 스캔할 NFC 태그가 다음 예제 형식의 텍스트 값을 생성하도록 사전 구성되어 있다고 가정합니다.

    "<b>Heading: </b> 80 degrees <br>
<b>Latitude: </b> 44.4604788 <br>
<b>Longitude: </b> -110.82813759"

    이렇게 하면 앱에 HTML 친화적인 형식의 텍스트가 제공됩니다. NFC 태그 설정은 이 문서의 범위를 벗어나며 필요한 경우 NFC 요소를 무시할 수 있습니다. 주요 초점은 Power Apps에서 모바일 센서를 사용하는 데에 맞춥니다.

장치 센서 출력에 대한 헤더 및 HTML 텍스트 추가

헤더 레이블

편집을 위해 Power Apps에서 앱을 연 상태로 텍스트 레이블을 삽입 창에서 화면으로 끌어서 놓아 추가합니다. 화면 왼쪽 상단 모서리에 배치하고 속성 창에서 다음 속성을 수정합니다.

속성 Value
문자 '보물 찾기'
글꼴 크기 24
글꼴 두께 FontWeight.Semibold
텍스트 맞춤 가운데.맞춤
Width Parent.Width

그런 다음 고급 창에서 다음 속성을 수정합니다.

속성 Value
색상 RGBA(255, 255, 255, 1)
채우기 RGBA(56, 96, 178, 1)

이는 화면에 대한 헤더를 제공합니다.

장치 센서 출력에 대한 HTML 텍스트 추가

다음으로 HTML 텍스트 컨트롤을 추가합니다. 이는 모든 장치 센서 출력을 한 곳에 표시하는 데 사용됩니다. HtmlText 속성에서 이 코드를 사용합니다.

"<b><u>Current Location</u></b><br>  
<br>
<b>Compass Heading: </b>" & Round(Compass.Heading, 2) & Char(0176) &
"<br>
<br>
<b>Lat: </b>" & Location.Latitude & "<br>
<b>Long: </b>" & Location.Longitude & "<br>
<b>Alt: </b>" & Round(Location.Altitude, 2) & " m"

고급 창에서 다음 속성을 변경합니다.

속성 Value
크기 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Width 560
높이 576
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

HtmlText에 입력된 내용을 살펴보면 두 가지 센서 유형이 사용되고 있음을 알 수 있습니다.

첫 번째는 제목 속성을 사용하는 나침반 센서로 장치에서 나침반 방향을 제공합니다.

두 번째는 위치 센서로 위도, 경도 및 고도를 제공합니다. 위치에 대해 두 가지 고려 사항이 있습니다. 첫째, 점 연산자 및 속성 없이 위치만 사용하는 경우 위도, 경도, 고도에 대한 필드가 있는 레코드를 얻게 됩니다. 둘째, 고도 속성은 기본적으로 미터 단위입니다. 피트로 변환하려면 다음 공식을 변환합니다.

미터 사용:

Round(Location.Altitude, 2) & " m"

피트 사용:

Round(Location.Altitude \* 3.2808, 2) & " ft"

참고

Power Apps Studio에서 앱을 미리 보면 많은 센서 속성이 올바르게 작동하지 않을 수 있습니다. 테스트를 위해 센서 속성을 사용하려면 대신 휴대전화를 사용하는 것이 좋습니다.

이제 HTML 텍스트 컨트롤이 화면 하단 근처에 위치합니다.

NFC 스캔 및 HTML 텍스트 컨트롤을 위한 단추 추가

NFC 스캔 단추

앱에 버튼을 추가하고 마지막 단계에서 추가한 HTML 텍스트 컨트롤 아래 위치시킨 후 고급 창에서 다음 속성을 변경합니다.

속성 Value
OnSelect ClearCollect(colNFCScan, ReadNFC())
문자 'NFC 태그 스캔'

OnSelect 속성의 코드는 NFC 판독기를 활성화하는 ReadNFC() 함수를 활용하고 있습니다. 그런 다음 NFC 태그에서 읽은 내용을 colNFCScan라는 컬렉션에 저장합니다. 이 컬렉션에는 RTD, Text, TNF, URI의 총 네 개 필드가 있습니다. 이 필드에 대한 설명은 이 문서의 범위를 벗어나기는 하지만 일부 설명이 도움이 될 수도 있습니다. TNF는 유형 이름 형식을 의미하며 레코드 유형 정의 또는 RTD의 구조를 정의하는 데 사용되며, RTD는 텍스트 및/또는 URI 필드에 포함된 레코드 유형을 정의합니다. URI는 Uniform Resource Identifier의 약자로 본질적으로 리소스 주소입니다. 이 예에서 사용되는 NFC 태그의 경우 이 토픽 소개의 예제 텍스트를 포함하는 텍스트 필드 외에도 TNF 값(1), RTD 값(T), 빈 URI 값을 포함할 수 있습니다.

NFC 스캔 정보를 표시하는 HTML 텍스트 컨트롤 추가

두 번째 HTML 텍스트 컨트롤을 추가하고 HTML텍스트 속성에서 다음 수식을 사용합니다.

"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text

고급 창에서 다음 속성을 변경합니다.

속성 Value
크기 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Width 560
높이 248
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

NFC 데이터가 없으면 컨트롤이 다음 목적지를 표시합니다. NFC 태그를 스캔하면 다음 목적지가 표시되고 스캔에서 수집된 데이터의 텍스트 필드에서 데이터가 표시됩니다.

NFC 태그에 대한 데이터가 소개에서 설명한 대로 구성되었다고 가정하면 사용자는 해당 태그 중 하나를 스캔한 후 다음 보물 찾기 위치에 대한 나침반 방향, 위도, 경도 값을 볼 수 있습니다.

나침반 방향 위도 및 경도 값

앱 테스트

저장 및 앱 게시. 필요한 센서가 있는 모바일 장치에서 앱을 열고 나침반 방향, 위도, 경도 및 고도 값을 관찰합니다. 다양한 센서 판독 값의 변화를 확인하기 위해 다양한 방향으로 회전하면서 걸어봅니다.

다양한 방향으로 회전하면서 걷기

NFC 태그 스캔 단추를 눌러 NFC 판독기 컨트롤을 관찰합니다. 텍스트 값을 생성할 수 있는 NFC 태그가 있는 경우 태그를 스캔하여 앱의 텍스트를 관찰합니다. 그렇지 않은 경우 취소를 선택합니다.

NFC 태그 스캔

두 번째 화면 추가 및 구성

앱의 각도 측정 부분에 대한 새로운 빈 화면을 추가합니다.

화면 추가 후 첫 화면으로 돌아가서 + 삽입 > 아이콘 > 다음 화살표 아이콘을 선택하여 다음 화살표 아이콘을 추가합니다. 화면 오른쪽 상단 모서리에 배치하고 고급 창에서 다음 속성을 수정합니다.

속성 Value
OnSelect Navigate(Screen2)
색상 RGBA(255, 255, 255, 1)

방금 추가한 두 번째 화면의 이름을 변경한 경우 탐색 함수에서 Screen2의 이름으로 대체합니다.

방금 추가한 아이콘을 선택하여 앱을 미리 보고 방금 추가한 빈 화면으로 이동하는지 확인합니다.

X 및 Y 각도에 대한 구성 추가

텍스트 레이블을 삽입 창에서 화면으로 끌어서 놓아 추가합니다. 화면 왼쪽 상단 모서리에 배치하고 속성 창에서 다음 속성을 수정합니다.

속성 Value
문자 "2 Axis Level"
글꼴 크기 24
글꼴 두께 FontWeight.Semibold
텍스트 맞춤 가운데.맞춤
Width Parent.Width

그런 다음 고급 창에서 다음 속성을 수정합니다.

속성 Value
색상 RGBA(255, 255, 255, 1)
채우기 RGBA(56, 96, 178, 1)

이는 두 번째 화면에 대한 헤더를 제공합니다.

다음으로 + 삽입 > 아이콘 > 뒤로 화살표 아이콘을 선택하여 뒤로 화살표을 추가합니다. 화면 왼쪽 상단 모서리에 배치하고 고급 창에서 다음 속성을 수정합니다.

속성 Value
OnSelect Navigate(Screen1)
색상 RGBA(255, 255, 255, 1)

방금 추가한 첫 번째 화면의 이름을 변경한 경우 탐색 함수에서 Screen1의 이름으로 대체합니다.

마지막으로 HTML 텍스트 컨트롤을 추가합니다. 이는 모든 장치 센서 출력을 한 곳에 표시하는 데 사용됩니다. HTML Text 속성 값을 다음 수식으로 사용합니다.

"<b><u>Angles:</u></b><br>
<br>
<table width='100%'>
<tr>
<td width='50%'><b>X: </b>" & Abs(Round(Acceleration.X * (90 / 9.81),
0)) & Char(0176) & "</td>
<td width='50%'><b>Y: </b>" & Abs(Round(Acceleration.Y * (90 / 9.81),
0)) & Char(0176) & "</td>
</tr>
</table>"

고급 탭에서 다음 속성을 변경합니다.

속성 Value
크기 21
BorderStyle BorderStyle.Solid
BorderThickness 2
Width 560
높이 168
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

이 컨트롤을 앱 화면 상단 근처에 배치합니다.

HtmlText에 어떤 내용이 담겼는지 확인해보면 가속도계 센서와 X 및 Y 속성을 사용하고 있음을 알 수 있습니다. 물론 이 시나리오에서 사용하지 않은 Z 속성도 있습니다.

이 센서는 세 평면에서 장치 중력을 감지합니다. 휴대폰을 예로 들어 휴대폰의 측면에서 연장되는 선을 상상을 해봅니다. 이게 X 평면입니다. 휴대폰의 오른쪽을 들어올리면 양수 값이 생성되고 왼쪽을 들어올리면 음수 값이 생성됩니다. 휴대폰의 상하단에서 연장되는 선은 Y 평면을 나타냅니다. 휴대폰의 상단을 들어올리면 양수 값이 생성되고 하단을 들어올리면 음수 값이 생성됩니다. 마지막으로 휴대폰의 화면 앞뒤에서 연장되는 선은 Z 평면을 나타냅니다. 화면을 위로 향하게 하면 양수 값이 생성되고 아래로 향하게 하면 음수 값이 됩니다.

가속도계는 장치를 떨어뜨렸을 때와 같이 움직이고 있을 때와 앞에서 설명한 하나 이상의 축에서 장치를 기울이는 것과 같이 정지 상태에서 장치에 작용하는 힘을 측정합니다. 정지 상태에서 이론 값은 0에서 +/- 9.81m/s2 사이여야 하며, 0은 상대 축이 지구와 평행하고 센서에 중력이 작용하지 않음을 나타내고 9.81은 상대 축이 지구와 수직이고 지구와 중력의 전체 힘이 센서에 작용하고 있음을 나타냅니다.

방금 추가한 HTML 텍스트 컨트롤에서 코드를 보고 다음 섹션을 확인하세요.

Abs(Round(Acceleration.X * (90 / 9.81), 0))

이 공식에서 먼저 안쪽에서 X 평면의 가속도에 (90 / 9.81) 을 곱합니다. 이는 이론적으로 정지 상태의 최대값을 사용하여 센서 판독값을 각도로 변환하는 것입니다. 90의 값은 최대 이론값에서 장치는 90도의 측정값을 제공하는 평면에서 지구와 수직이기 때문에 존재합니다.

그런 다음 도 단위 값은 소수점 이하 0자리로 반올림하여 정수인 도의 값을 제공합니다. 마지막으로 반올림된 숫자의 절대값을 계산하여 양수 판독값을 제공합니다. 이는 각도가 한쪽에서 측정되든 다른 쪽에서 측정되든 중요하지 않음을 의미합니다.

참고

위에 공유된 값은 근사치이며 정확한 측정값을 나타내지 않습니다.

시각적 개체 수준 추가

이 단계에서는 시각적 목표를 달성하기 위해 기존과 다른 방식으로 일부 컨트롤을 사용합니다.

원형 풍선 수준의 시작적 개체

시작하려면 단추 컨트롤을 화면에 추가하고 이름을 btnCircleLevel로 지정하고 고급 창에서 다음 속성을 변경합니다.

속성 Value
문자 ""
BorderColor RGBA(56, 96, 178, 1)
FocusedBorderThickness 2
채우기 투명
DisabledFill Self.Fill
X (Parent.Width - Self.Width) / 2
Y (Parent.Height - Self.Height) / 2
Width 400
높이 Self.Width

이러한 변경 결과로 화면 중앙에 비활성화로 인해 누를 수 없는 원형 단추가 생성되어야 합니다.

다음으로 원 셰이프를 추가하고, 테두리 반경을 400으로 설정하고 고급 창에서 다음 속성을 변경하십시오.

속성 Value
FocusedBorderThickness 12
X (Parent.Width - Self.Width) / 2 + (Round(Acceleration.X / 9.81 * 90, 0) / 90 * btnCircleLevel.Width / 2)
Y (Parent.Height - Self.Height) / 2 - (Round(Acceleration.Y / 9.81 * 90, 0) / 90 * btnCircleLevel.Width / 2)
Width 42
높이 Self.Width
Width 400
높이 Self.Width

X 및 Y 속성을 사용하면 원 모양이 앱 화면 중앙에서 가속도 센서 값의 상대적인 변경 사항인 btnCircleLevel의 원형 영역 내에서 이동할 수 있습니다.

X 및 Y 축 풍선 수준의 시각적 개체

슬라이더 컨트롤을 앱에 추가하고 이름을 sldXValue로 지정하고 고급 창에서 다음 속성을 변경합니다.

속성 Value
분 -90
최대 90
기본 Round(Acceleration.X * (90 / 9.81), 0)
ValueFill Self.RailFill
X (Parent.Width - Self.Width) / 2
Y btnCircleLevel.Y + btnCircleLevel.Height + 30
Width btnCircleLevel.Width
높이 70

이 슬라이더 컨트롤은 풍선 수준과 유사한 각도를 나타냅니다. 핸들은 풍선 수준에서 공기 방울과 유사하게 장치의 상승된 측면으로 이동합니다.

다음으로 btnCircleLevel을 선택하여 Ctrl + C, Ctrl + V를 차례로 눌러 복사합니다. 컨트롤 이름을 btnXValueOverlay로 바꾸고 고급 창에서 다음 속성을 변경합니다.

속성 Value
X sldXValue.X - sldXValue.HandleSize / 2
Y sldXValue.Y
Width sldXValue.Width + sldXValue.HandleSize
높이 sldXValue.Height

이러한 변경 사항은 sldXValue 컨트롤 위에 배치되어 사용자가 값을 변경하지 못하게 하고 시각적 경계를 제공합니다.

sldXValue에 대해 btnCircleLevel을 복사했던 것과 동일한 방법을 사용하여 복사 및 붙여넣기합니다. 이름을 sldYValue로 바꾸고 다음 속성을 변경합니다.

속성 Value
레이아웃 Layout.Vertical
X btnCircleLevel.X - Self.Width - 30
Y (Parent.Height - Self.Height) / 2
Width sldXValue.Height
높이 sldXValue.Width

btnXValueOverlay를 복사 및 붙여넣고 btnYValueOverlay로 이름을 바꾸고 다음 속성을 변경합니다.

속성 Value
X sldYValue.X
Y sldYValue.Y - sldYValue.HandleSize / 2
Width sldYValue.Width
높이 sldYValue.Height + sldYValue.HandleSize

풍선 수준의 시각적 개체가 완성됩니다.

앱 수준 테스트

앱 테스트

저장 및 앱 게시. 필요한 센서가 있는 모바일 장치에서 앱을 열고 풍선 수준 시각적 개체가 있는 화면으로 이동합니다. 장치를 왼쪽에서 오른쪽으로 기울인 다음 위아래로, 마지막으로 모든 방향으로 기울이고 각도 속성의 변화와 시각적 효과의 변화를 관찰합니다. 장치를 놓을 각진 표면을 찾고 각도와 시각적 개체를 다시 기록합니다.

참조