Cipta aplikasi yang menggunakan pengesan mudah alih
Pengesan membolehkan anda menambah fungsian yang lebih kaya ke dalam aplikasi anda dengan memanfaatkan keupayaan telefon anda. Dalam artikel ini, anda akan mengetahui tentang cara menggunakan pengesan pada peranti mudah alih anda dalam Power Apps.
Untuk melakukan perkara ini, anda akan membuat aplikasi sampel dengan dua skrin. Skrin pertama akan memaparkan petunjuk kompas semasa, latitud, longitud, ketinggian dan boleh mengimbas tag NFC untuk mendapatkan maklumat teks. Skrin kedua akan mempamerkan cara memaparkan data meter pecutan untuk menghasilkan sudut peranti sepanjang paksi X dan Y.
Untuk menyediakan senario di belakang skrin pertama, bayangkan anda sedang membina aplikasi untuk permainan mencari harta karun berasaskan NFC. Setiap peserta akan menggunakan aplikasi ini untuk mengimbas tag NFC yang akan memberi mereka petunjuk kompas, latitud dan longitud yang akan menunjukkan destinasi seterusnya kepada mereka. Di destinasi tersebut, peserta kemudiannya akan mengimbas tag lain dan mengulangi proses sehingga mereka tiba di penghujung permainan.
Untuk skrin kedua, bayangkan bahawa anda memerlukan alat untuk mengukur sudut secara kasar. Apabila pada skrin kedua, peserta akan dapat meletakkan atau memegang peranti mereka pada permukaan, dan mendapatkan sudut pada paksi X dan Y peranti serta melihat gambaran visual sudut tersebut.
Tonton video ini untuk mengetahui cara untuk membina aplikasi yang menggunakan pengesan mudah alih:
Prasyarat
Apa-apa tahap lesen Power Apps boleh digunakan untuk aplikasi ini kerana tiada sambungan data digunakan.
Peranti mudah alih seperti telefon mudah alih atau tablet dengan keupayaan GPS dan meter pecutan akan diperlukan kerana PC mungkin tidak mempunyai pengesan yang diperlukan.
Peranti berkeupayaan NFC diperlukan untuk ciri pengimbasan NFC. Kita juga menganggap bahawa tag NFC untuk diimbas telah diprakonfigurasikan untuk menghasilkan nilai teks dalam format contoh berikut:
"<b>Heading: </b> 80 degrees <br> <b>Latitude: </b> 44.4604788 <br> <b>Longitude: </b> -110.82813759"Tindakan ini akan memberikan teks dalam format mesra HTML untuk aplikasi. Persediaan tag NFC adalah di luar skop artikel ini, dan elemen NFC boleh diabaikan jika perlu; fokus utama adalah untuk menggunakan pengesan mudah alih dalam Power Apps.
Tambah teks pengepala dan HTML untuk output pengesan peranti
Label pengepala
Dengan aplikasi terbuka untuk pengeditan dalam Power Apps, tambah Label teks pada skrin dengan menyeret dan melepaskannya daripada anak tetingkap Sisipkan. Letakkannya di sudut kiri bahagian atas skrin dan ubah suai sifat berikut dalam anak tetingkap Sifat:
| Sifat | Nilai |
|---|---|
| Teks | "Permainan Mencari Harta Karun" |
| Saiz fon | 24 |
| Berat fon | FontWeight.Semibold |
| Penjajaran teks | Jajar.Tengah |
| Lebar | Parent.Width |
Kemudian dalam anak tetingkap Lanjutan, ubah suai sifat berikut:
| Sifat | Nilai |
|---|---|
| Warna | RGBA(255, 255, 255, 1) |
| Isi | RGBA(56, 96, 178, 1) |
Tindakan ini akan memberikan pengepala untuk skrin.
Teks HTML untuk output pengesan peranti
Seterusnya, tambah kawalan teks HTML. Ini akan digunakan untuk memaparkan semua output pengesan peranti di satu tempat. Gunakan kod ini dalam sifat 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"
Ubah sifat berikut dalam anak tetingkap Lanjutan:
| Sifat | Nilai |
|---|---|
| Saiz | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Lebar | 560 |
| Ketinggian | 576 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Jika anda menyemak kandungan yang dimasukkan ke dalam HtmlText, anda mungkin mendapati bahawa terdapat dua jenis pengesan yang sedang digunakan.
Yang pertama ialah pengesan Kompas, yang menggunakan sifat Petunjuk untuk menyediakan petunjuk kompas daripada peranti.
Yang kedua ialah pengesan Lokasi, yang menyediakan Latitud, Longitud dan Ketinggian. Terdapat dua pertimbangan tentang Lokasi. Pertama, jika anda hanya menggunakan Lokasi tanpa operator dot dan sifat, anda akan mendapat rekod yang mempunyai medan untuk Latitud, Longitud dan Ketinggian. Kedua, sifat Ketinggian ditunjukkan dalam meter secara lalai. Jika anda mahu menukarnya kepada kaki, gantikan formula berikut:
Gunakan meter:
Round(Location.Altitude, 2) & " m"
Gunakan kaki:
Round(Location.Altitude \* 3.2808, 2) & " ft"
Nota
Banyak sifat pengesan mungkin tidak berfungsi dengan betul jika anda mempratonton aplikasi dalam Power Apps Studio. Untuk bekerja dengan sifat pengesan untuk pengujian, lebih baik menggunakan telefon mudah alih.
Sekarang letakkan kawalan teks HTML berhampiran separuh bawah skrin.
Tambah Butang untuk imbasan NFC dan kawalan teks HTML
Butang imbasan NFC
Tambah butang kepada aplikasi, kedudukan di bawah kawalan teks HTML yang anda tambah dalam langkah sebelum ini dan ubah sifat berikut dalam anak tetingkap Lanjutan:
| Sifat | Nilai |
|---|---|
| OnSelect | ClearCollect(colNFCScan, ReadNFC()) |
| Teks | "Imbas Tag NFC" |
Kod dalam sifat OnSelect menggunakan fungsi ReadNFC(), yang mengaktifkan pembaca NFC. Ia kemudian menyimpan kandungan yang dibaca daripada tag NFC dalam koleksi dipanggil colNFCScan. Koleksi ini akan mengandungi empat medan: RTD, Text, TNF, dan URI. Walaupun penerangan lengkap tentang medan ini adalah di luar skop artikel ini, sesetengah penerangan mungkin boleh membantu. TNF bermaksud Format Nama Jenis dan digunakan untuk mentakrifkan struktur Takrif Jenis Rekod, atau RTD, yang mentakrifkan jenis rekod yang terkandung dalam medan Teks dan/atau URI. URI bermaksud Pengecam Sumber Seragam, yang merupakan alamat sumber. Untuk tag NFC yang sedang digunakan dalam contoh ini, di samping medan Teks yang mengandungi teks contoh daripada pengenalan topik ini, ia akan mengandungi nilai TNF sebanyak 1, nilai RTD ialah T, dan nilai URI yang kosong.
Tambah kawalan teks HTML untuk memaparkan maklumat imbasan NFC
Tambah kawalan teks HTML kedua dan gunakan formula berikut dalam sifat HTMLText:
"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text
Ubah sifat berikut dalam anak tetingkap Lanjutan:
| Sifat | Nilai |
|---|---|
| Saiz | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Lebar | 560 |
| Ketinggian | 248 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Tanpa apa-apa data NFC pada masa ini, kawalan akan memaparkan Destinasi Seterusnya. Apabila tag NFC diimbas, ia akan memaparkan Destinasi Seterusnya, dan kemudian data daripada medan Teks dalam data yang dikumpulkan daripada imbasan.
Dengan mengandaikan bahawa data untuk tag NFC telah dikonfigurasikan seperti yang diterangkan dalam pengenalan, pengguna akan melihat petunjuk kompas seterusnya, nilai latitud, dan longitud untuk lokasi permainan mencari harta karun yang seterusnya selepas mengimbas salah satu tag tersebut.
Uji aplikasi
Simpan dan terbitkan aplikasi. Pada peranti mudah alih dengan pengesan yang diperlukan, buka aplikasi dan lihat petunjuk kompas, nilai latitud, longitud dan ketinggian. Cuba berjalan di sekitar sambil menghala ke pelbagai arah untuk melihat perubahan dalam pelbagai bacaan pengesan.
Tekan butang Imbas Tag NFC untuk melihat kawalan pembaca NFC. Jika anda mempunyai tag NFC yang boleh menghasilkan nilai Teks, imbas tag untuk melihat teks dalam aplikasi. Jika tidak, pilih Batalkan.
Tambah dan konfigurasikan skrin kedua
Tambah Skrin kosong baharu untuk bahagian pengukuran sudut aplikasi.
Selepas menambahkan skrin, kembali ke skrin pertama dan tambah ikon Anak Panah Seterusnya daripada + Sisipkan > Ikon > pilih ikon Anak Panah Seterusnya. Letakkannya di sudut kanan bahagian atas skrin dan ubah sifat berikut dalam anak tetingkap Lanjutan:
| Sifat | Nilai |
|---|---|
| OnSelect | Navigasi (Screen2) |
| Warna | RGBA(255, 255, 255, 1) |
Jika anda telah menamakan semula skrin kedua yang baru ditambah, gantikan nama itu sebagai Screen2 dalam fungsi Navigasi.
Pratonton aplikasi, dan pilih ikon yang baru ditambahkan untuk mengesahkan bahawa ia menavigasi ke skrin kosong yang baru ditambah.
Tambah konfigurasi untuk sudut X dan Y
Tambah Label teks pada skrin dengan menyeret dan melepaskannya daripada anak tetingkap Sisipkan. Letakkannya di sudut kiri bahagian atas skrin dan ubah suai sifat berikut dalam anak tetingkap Sifat:
| Sifat | Nilai |
|---|---|
| Teks | "Tahap 2 Paksi" |
| Saiz fon | 24 |
| Berat fon | FontWeight.Semibold |
| Penjajaran teks | Jajar.Tengah |
| Lebar | Parent.Width |
Kemudian dalam anak tetingkap Lanjutan, ubah suai sifat berikut:
| Sifat | Nilai |
|---|---|
| Warna | RGBA(255, 255, 255, 1) |
| Isi | RGBA(56, 96, 178, 1) |
Tindakan ini akan memberikan pengepala untuk skrin kedua.
Kemudian, tambah ikon Anak Panah Ke Belakang daripada + Sisipkan > Ikon > Pilih ikon Anak Panah Ke Belakang. Letakkannya di sudut kiri bahagian atas skrin dan ubah sifat berikut dalam anak tetingkap Lanjutan:
| Sifat | Nilai |
|---|---|
| OnSelect | Navigasi (Screen1) |
| Warna | RGBA(255, 255, 255, 1) |
Jika anda telah menamakan semula skrin pertama yang baru ditambah, gantikan nama itu sebagai Screen1 dalam fungsi Navigasi.
Akhirnya, tambah kawalan teks HTML. Ini akan digunakan untuk memaparkan semua output pengesan peranti di satu tempat. Gunakan formula berikut dalam sifat Teks HTML:
"<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>"
Ubah sifat berikut dalam tab Lanjutan:
| Sifat | Nilai |
|---|---|
| Saiz | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Lebar | 560 |
| Ketinggian | 168 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Letakkan kawalan ini berhampiran bahagian atas skrin aplikasi.
Jika anda menyemak kandungan yang dimasukkan ke dalam HtmlText, anda mungkin mendapati bahawa ia menggunakan pengesan Pecutan, dengan sifat X dan Y. Terdapat juga sifat Z yang kita tidak gunakan dalam senario ini.
Pengesan ini mengesan daya graviti pada peranti pada tiga satah. Dengan menggunakan telefon mudah alih sebagai contoh, bayangkan terdapat garisan yang terunjur keluar dari sisi telefon. Ini akan menjadi satah X. Mengangkat sebelah kanan telefon akan menghasilkan nilai yang positif dan mengangkat sebelah kiri akan menghasilkan nilai negatif. Garisan yang terunjur keluar dari bahagian atas dan bawah telefon akan mewakili satah Y. Mengangkat sebelah atas telefon akan menghasilkan nilai yang positif dan mengangkat sebelah bawah akan menghasilkan nilai negatif. Akhirnya, garisan yang terunjur keluar dari depan dan belakang telefon akan mewakili satah Z. Tindakan menyebabkan skrin menghadap ke atas akan menghasilkan nilai yang positif dan menghadap ke bawah akan menghasilkan nilai negatif.
Meter pecutan akan mengukur daya yang bertindak pada peranti dalam gerakan, seperti jika anda menjatuhkan peranti, dan sedang berehat, seperti mengangkat peranti mengikut satu atau lebih paksi yang diterangkan tadi. Semasa berehat, nilai teori sepatutnya antara 0 dengan +/-9.81 m/S2, dengan 0 menunjukkan bahawa paksi relatif adalah selari dengan Bumi tanpa daya graviti bertindak pada pengesan dan bacaan 9.81 menunjukkan bahawa paksi relatif adalah serenjang dengan Bumi dan daya penuh graviti bertindak pada pengesan.
Dengan melihat kod dalam kawalan teks HTML yang baru anda tambah, lihat bahagian berikut:
Abs(Round(Acceleration.X * (90 / 9.81), 0))
Dalam formula ini, dari dalam, pertama, Pecutan pada satah X didarabkan dengan (90 / 9.81). Ini menggunakan nilai berehat maksimum teori untuk menukar bacaan pengesan kepada darjah. Nilai 90 hadir kerana pada nilai teori maksimum, peranti akan menjadi serenjang dengan Bumi pada satah itu, lalu memberikan ukuran 90 darjah.
Nilai itu dalam darjah kemudian dibundarkan kepada tempat perpuluhan sifar untuk memberikan nilai darjah nombor bulat. Yang terakhir, nilai mutlak nombor yang dibundarkan itu dikira untuk memberikan bacaan positif. Ini demikian supaya sudut boleh diukur dari satu sudut atau sudut yang lain.
Nota
Nilai yang dikongsi di atas hanyalah anggaran, dan tidak mewakili pengukuran yang tepat.
Tambah visual tahap
Dalam langkah ini, kita akan menggunakan beberapa kawalan dengan cara yang tidak lazim untuk mencapai matlamat visual.
Visual seperti tahap gelembung bulat
Untuk bermula, tambah kawalan Butang pada skrin, namakan semula butang kepada btnCircleLevel dan ubah sifat berikut dalam anak tetingkap Lanjutan:
| Sifat | Nilai |
|---|---|
| Teks | "" |
| BorderColor | RGBA(56, 96, 178, 1) |
| FocusedBorderThickness | 2 |
| Isi | Telus |
| DisabledFill | Self.Fill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | (Parent.Height - Self.Height) / 2 |
| Lebar | 400 |
| Ketinggian | Self.Width |
Hasil perubahan ini sepatutnya menghasilkan butang bulat di tengah skrin yang tidak boleh ditekan kerana telah dinyahdayakan.
Seterusnya, tambah bentuk Bulatan, tetapkan Jejari Sempadan ke 400 dan ubah sifat berikut dalam anak tetingkap Lanjutan:
| Sifat | Nilai |
|---|---|
| FocusedBorderThickness | 0 |
| 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) |
| Lebar | 42 |
| Ketinggian | Self.Width |
| Lebar | 400 |
| Ketinggian | Self.Width |
Sifat X dan Y membenarkan bentuk Bulatan untuk bergerak mengelilingi bahagian tengah skrin aplikasi, perubahan relatif dalam nilai pengesan Pecutan tetapi terkandung dalam kawasan bulatan btnCircleLevel.
Visual seperti tahap gelembung Paksi X dan Y
Tambah kawalan Penggelangsar pada aplikasi, namakannya semula kepada sldXValue, dan ubah sifat berikut dalam anak tetingkap Lanjutan:
| Sifat | Nilai |
|---|---|
| Minimum | -90 |
| Maksimum | 90 |
| Lalai | Round(Acceleration.X * (90 / 9.81), 0) |
| ValueFill | Self.RailFill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | btnCircleLevel.Y + btnCircleLevel.Height + 30 |
| Lebar | btnCircleLevel.Width |
| Ketinggian | 70 |
Kawalan Penggelangsar ini akan memaparkan sudut yang serupa dengan cara tahap gelembung: Pemegang akan bergerak ke sisi terangkat peranti, serupa dengan gelembung udara dalam tahap gelembung.
Seterusnya, salin btnCircleLevel dengan memilihnya, tekan Ctrl + C dan kemudian Ctrl + V. Namakan semula kawalan kepada btnXValueOverlay dan ubah sifat berikut dalam anak tetingkap Lanjutan:
| Sifat | Nilai |
|---|---|
| X | sldXValue.X - sldXValue.HandleSize / 2 |
| Y | sldXValue.Y |
| Lebar | sldXValue.Width + sldXValue.HandleSize |
| Ketinggian | sldXValue.Height |
Perubahan ini akan meletakkannya di atas kawalan sldXValue, lalu mengelakkan pengguna daripada mengubah nilainya dan memberikan sempadan visual.
Salin dan tampal sldXValue, menggunakan kaedah yang sama yang digunakan untuk menyalin btnCircleLevel. Namakannya semula kepada sldYValue dan ubah sifat berikut:
| Sifat | Nilai |
|---|---|
| Tataletak | Layout.Vertical |
| X | btnCircleLevel.X - Self.Width - 30 |
| Y | (Parent.Height - Self.Height) / 2 |
| Lebar | sldXValue.Height |
| Ketinggian | sldXValue.Width |
Salin dan tampal btnXValueOverlay, namakannya semula kepada btnYValueOverlay, ubah sifat berikut:
| Sifat | Nilai |
|---|---|
| X | sldYValue.X |
| Y | sldYValue.Y - sldYValue.HandleSize / 2 |
| Lebar | sldYValue.Width |
| Ketinggian | sldYValue.Height + sldYValue.HandleSize |
Ini melengkapkan visual serupa tahap gelembung.
Uji aplikasi tahap
Simpan dan terbitkan aplikasi. Pada peranti mudah alih dengan pengesan yang diperlukan, buka aplikasi dan navigasi ke skrin dengan visual tahap gelembung. Condongkan peranti dari kiri ke kanan, kemudian ke atas dan ke bawah, dan akhirnya ke semua arah, dengan melihat perubahan dalam sifat sudut serta perubahan dalam visual. Cari permukaan bersudut untuk meletakkan peranti dan, sekali lagi, lihat perubahan sudut dan visual.