建立使用行動裝置感應器的應用程式
感應器可讓您利用手機的功能，將更豐富的功能新增至應用程式中。 在本文中，您將瞭解如何在 Power Apps 中使用行動裝置上的感應器。
因此，您將會使用兩個畫面來製作範例應用程式。 第一個畫面將顯示目前羅盤方向、緯度、經度和高度，且可以掃描 NFC 標籤以取得文字資訊。 第二個畫面將展示如何顯示加速計資料，以沿 X 軸和 Y 軸產生裝置角度。
若要設定第一個畫面背後的場景，請想像您正在為 NFC 型尋寶遊戲組建應用程式。 每個參與者都會使用應用程式來掃描 NFC 標籤，此 NFC 標籤將為他們提供羅盤方向、緯度和經度，為他們指點下一個目的地。 在該目的地，參與者會掃描另一個標籤，並重複這個過程，直到他們抵達尋寶終點。
對於第二個畫面，想像我們需要工具來粗略衡量角度。 在第二個畫面上時，參與者可以把他們的裝置放置或保持在一個表面上，並取得裝置的 X 軸和 Y 軸角度，以查看這些角度的視覺化表示。
觀看此影片以瞭解如何建立使用行動裝置感應器的應用程式：
先決條件
任何層級的 Power Apps 授權均可用於此應用程式，因為未使用任何資料連線。
由於大多數電腦可能沒有必要的感應器，因此需要具有 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 中開啟應用程式進行編輯時，請從插入窗格拖放文字標籤，以將其新增至畫面。 將其放置於畫面的左上角，然後在 [屬性] 窗格中修改下列屬性：
| 屬性 | 數值 |
|---|---|
| 文字 | 「尋寶遊戲」 |
| 字型大小 | 24 |
| 字型粗細 | FontWeight.Semibold |
| 文字對齊 | 置中對齊 |
| 寬度 | Parent.Width |
然後在進階窗格中修改下列屬性：
| 屬性 | 數值 |
|---|---|
| 色彩 | 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"
在 [進階] 窗格中變更下列屬性：
| 屬性 | 數值 |
|---|---|
| 大小 | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| 寬度 | 560 |
| 高度 | 576 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
如果您檢查 HtmlText 中的內容，您可能會發現有兩種感應器類型正在使用中。
第一個是羅盤感應器，其使用 Heading 屬性來提供裝置的羅盤方向。
第二是位置感應器，其提供緯度、經度和高度。 位置有兩個考量因素。 首先，如果不使用點運算子和屬性來使用 [位置]，您將取得包含緯度、經度和高度欄位的記錄。 其次，Altitude 屬性預設以公尺為單位。 若要將它轉換成英尺，請改用下列公式：
使用公尺：
Round(Location.Altitude, 2) & " m"
使用英尺：
Round(Location.Altitude \* 3.2808, 2) & " ft"
注意
如果您在 Power Apps Studio 中預覽應用程式，許多感應器屬性可能無法正常運作。 若要使用感應器屬性進行測試，最好改用手機。
現在，將 HTML 文字控制項放在畫面下半部。
為 NFC 掃描和 HTML 文字控制項新增按鈕
NFC 掃描按鈕
將按鈕新增至應用程式，放在您在上一步新增的 HTML 文字控制項下方，並在進階窗格中變更以下屬性：
| 屬性 | 數值 |
|---|---|
| OnSelect | ClearCollect(colNFCScan, ReadNFC()) |
| 文字 | 「掃描 NFC 標籤」 |
OnSelect 屬性中的程式碼使用 ReadNFC() 函數，這會啟動 NFC 讀取器。 然後它會將從 NFC 標籤讀取的內容儲存在名為 colNFCScan 的集合中。 此集合將有四個欄位：RTD、Text、TNF 和 URI。 雖然這些欄位的完整解釋不在本文討論的範圍內，但稍微解釋一下可能會很有幫助。 TNF 是指 類型名稱格式，用於定義記錄類型定義或 RTD 的結構，而 RTD 又定義了 文字 和/或 URI 欄位中所包含的記錄類型。 URI 是指統一資源識別項，實質上就是資源的位址。 對於此範例中使用的 NFC 標籤，除了包含本主題介紹中範例文字的文字欄位之外，還包含 1 的 TNF 值 ，T 的 RTD 值，和空白的 URI 值。
新增 HTML 文字控制項以顯示 NFC 掃描資訊
新增第二個 HTML 文字控制項，並在 HTMLText 屬性中使用以下公式：
"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text
在 [進階] 窗格中變更下列屬性：
| 屬性 | 數值 |
|---|---|
| 大小 | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| 寬度 | 560 |
| 高度 | 248 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
如果沒有任何 NFC 資料，控制項將會顯示下一個目的地。 掃描 NFC 標籤時，它會顯示下一個目的地，然後是掃描所收集資料中文字欄位中的資料。
假設已根據簡介所述設定 NFC 標籤的資料，則在掃描其中一個標籤後，使用者將會看到下一個尋寶遊戲位置的下一個羅盤方向、緯度和經度值。
測試應用程式
儲存並發佈應用程式。 在具有必要感應器的行動裝置上，開啟應用程式並查看羅盤方向、緯度、經度和高度值。 試著一邊走一邊向各個方向轉動，以查看各種感應器讀數的變化。
按掃描 NFC 標籤按鈕，觀察 NFC 讀取器控制項。 如果您有可以產生文字值的 NFC 標籤，請掃描該標籤以觀察應用程式中的文字。 如果沒有，請選取取消。
新增和設定第二個畫面
為應用程式的 [角度測量] 部分新增空白畫面。
在新增畫面之後，返回第一個畫面，並從 + 插入 > 圖示 > 選擇下一步箭頭圖示來新增下一步箭頭。 將其放置於畫面的右上角，然後在 [進階] 窗格中變更下列屬性：
| 屬性 | 數值 |
|---|---|
| OnSelect | Navigate(Screen2) |
| 色彩 | RGBA(255, 255, 255, 1) |
如果已重命名剛剛新增的第二個畫面，請在導覽函數中將該名稱取代為 Screen2。
預覽應用程式，並選取剛剛新增的圖示，以確認它會將您導覽至剛新增的空白畫面。
新增 X 與 Y 角度的設定
從插入窗格拖放文字標籤到畫面進行新增。 將其放置於畫面的左上角，然後在屬性窗格中修改下列屬性：
| 屬性 | 數值 |
|---|---|
| 文字 | 「2 軸層級」 |
| 字型大小 | 24 |
| 字型粗細 | FontWeight.Semibold |
| 文字對齊 | 置中對齊 |
| 寬度 | Parent.Width |
然後在進階窗格中修改下列屬性：
| 屬性 | 數值 |
|---|---|
| 色彩 | RGBA(255, 255, 255, 1) |
| 填滿 | RGBA(56, 96, 178, 1) |
這將提供第二個畫面的標題。
接著，從 + 插入 > 圖示 > 選擇上一步箭頭圖示，以新增上一步箭頭圖示。 將其放置於畫面的左上角，然後在進階窗格中變更下列屬性：
| 屬性 | 數值 |
|---|---|
| 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>"
在 [進階] 索引標籤中變更下列屬性：
| 屬性 | 數值 |
|---|---|
| 大小 | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| 寬度 | 560 |
| 高度 | 168 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
將此控制項放在應用程式畫面的頂端附近。
如果您檢查 HtmlText 中的內容，您可能會發現其使用了包含 X 和 Y 屬性的加速度感應器。 在此案例中還有一個 Z 屬性沒有使用。
該感應器在三個平面上檢測裝置上的重力。 以行動電話為範例，想像一下從手機側面延伸出一條線。 這就是 X 平面。 抬起手機右側會產生正值，而抬起左邊就會產生負值。 在手機頂端和底端延伸的線代表 Y 平面。 抬起手機頂端會產生正值，而抬起底端就會產生負值。 最後，從手機背面延伸的線代表 Z 平面。 讓畫面正面朝上會產生正值，朝下會產生負值。
加速計會測量作用在設備上的力，無論是在運動中 (例如放下裝置時)，還是靜止時 (例如先前描述的在一個或多個軸上傾斜裝置)。 靜止時，理論值必須介於 0 與 +/-9.81 m/s2 之間，0 表示相對與地球平行，沒有重力作用在感應器上，而讀數為 9.81 表示相對軸與地球垂直，重力全部作用在感應器上。
查看剛剛新增的 HTML 文字控制項中的程式碼，請注意下列區段：
Abs(Round(Acceleration.X * (90 / 9.81), 0))
在此公式中，從裡到外，首先是X 平面的加速度乘以 (90/9.81)。 這會使用理論最大靜止值，將感應器讀數轉換成度數。 90 值的存在，是因為在最大理論值下，裝置將在該平面上垂直於地球，並提供 90 度的量值。
然後將該度數四捨五入到零小數位，以提供整數度數值。 最後，計算該四捨五入數字的絕對值，以得出正數讀數。 因此，無論角度是從一側或另一個衡量，都不會有任何影響。
注意
以上共用的值是近似的，並不代表精確的度量值。
新增層級視覺效果
在此步驟中，我們將以非常規方式使用一些控制項來達成視覺效果目標。
圓形氣泡水平儀狀視覺效果
首先，將按鈕控制項新增至畫面，並將其重新命名為 btnCircleLevel，並在進階窗格中變更下列屬性：
| 屬性 | 數值 |
|---|---|
| 文字 | "" |
| BorderColor | RGBA(56, 96, 178, 1) |
| FocusedBorderThickness | 2 |
| 填滿 | 透明 |
| DisabledFill | Self.Fill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | (Parent.Height - Self.Height) / 2 |
| 寬度 | 400 |
| 高度 | Self.Width |
這些變更的結果應該會在畫面中央產生圓形按鈕，該按鈕因停用而無法按下。
接下來，新增圓形形狀，將其邊框半徑設定為 400，並在進階窗格中變更以下屬性：
| 屬性 | 數值 |
|---|---|
| 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) |
| 寬度 | 42 |
| 高度 | Self.Width |
| 寬度 | 400 |
| 高度 | Self.Width |
X 與 Y屬性可讓圓形圖形圍繞應用程式畫面中央移動，加速度感應器值會產生相對變化，但包含在 btnCircleLevel 的圓形區域中。
X 軸與 Y 軸氣泡水平儀狀視覺效果
將滑桿控制項新增至應用程式，並將其重新命名為 sldXValue，並在進階窗格中變更下列屬性：
| 屬性 | 數值 |
|---|---|
| 最小 | -90 |
| 最大 | 90 |
| 預設值 | Round(Acceleration.X * (90 / 9.81), 0) |
| ValueFill | Self.RailFill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | btnCircleLevel.Y + btnCircleLevel.Height + 30 |
| 寬度 | btnCircleLevel.Width |
| 高度 | 70 |
此滑桿控制項將顯示類似於氣泡水平儀的角度：滑桿會向裝置的凸起側移動，類似氣泡水平儀中的空氣氣泡。
接著選取它，按 Ctrl + C 複製 btnCircleLevel，然後按 Ctrl + V。將控制項重新命名為 btnXValueOverlay，並在進階窗格中變更下列屬性：
| 屬性 | 數值 |
|---|---|
| X | sldXValue.X - sldXValue.HandleSize / 2 |
| Y | sldXValue.Y |
| 寬度 | sldXValue.Width + sldXValue.HandleSize |
| 高度 | sldXValue.Height |
這些變更會將其定位在 sldXValue 控制項，以防使用者變更其值並提供視覺效果邊框。
使用與複製 btnCircleLevel 相同的方法，複製並貼上 sldXValue。 將其重新命名為 sldYValue，然後變更下列屬性：
| 屬性 | 數值 |
|---|---|
| 配置 | Layout.Vertical |
| X | btnCircleLevel.X - Self.Width - 30 |
| Y | (Parent.Height - Self.Height) / 2 |
| 寬度 | sldXValue.Height |
| 高度 | sldXValue.Width |
複製並貼上 btnXValueOverlay，將其重命名為 btnYValueOverlay，並變更下列屬性：
| 屬性 | 數值 |
|---|---|
| X | sldYValue.X |
| Y | sldYValue.Y - sldYValue.HandleSize / 2 |
| 寬度 | sldYValue.Width |
| 高度 | sldYValue.Height + sldYValue.HandleSize |
這樣就會完成氣泡水平儀狀視覺效果。
測試水平儀應用程式
儲存並發佈應用程式。 在具有必要感應器的行動裝置上，開啟應用程式，並導覽至具有氣泡水平儀視覺效果的畫面。 將裝置從左向右傾斜，然後向上或向下傾斜，最後向各方向傾斜，注意角度屬性的變化，以及視覺效果的變化。 找一個斜面來放置裝置，再次記下角度和視覺效果。