Membuat aplikasi yang menggunakan sensor perangkat seluler
Sensor memungkinkan Anda menambahkan fungsi yang lebih kaya ke dalam aplikasi dengan meningkatkan kemampuan ponsel. Pada artikel ini, Anda akan mempelajari tentang menggunakan sensor pada perangkat bergerak dalam Power Apps.
Untuk melakukannya, Anda akan membuat aplikasi sampel dengan dua layar. Layar pertama akan menampilkan heading kompas saat ini, garis lintang, garis bujur, ketinggian, dan dapat memindai tag NFC untuk mendapatkan informasi teks. Layar kedua akan menunjukkan cara menampilkan data accelerometer untuk menghasilkan sudut perangkat di sepanjang sumbu X dan Y.
Untuk mengkonfigurasi skenario di balik layar pertama, bayangkan bahwa Anda sedang membuat aplikasi untuk perburuan pemulung berbasis NFC. Setiap peserta akan menggunakan aplikasi untuk memindai tag NFC yang akan memberikan heading, garis lintang, dan garis bujur kompas yang akan mengarahkan mereka ke tujuan berikutnya. Di tujuan tersebut, peserta kemudian akan memindai tag lain dan mengulangi proses hingga mereka mencapai akhir perburuan.
Untuk layar kedua, bayangkan anda memerlukan alat untuk mengukur sudut secara kasar. Bila di layar kedua, peserta akan dapat menempatkan atau menahan perangkat mereka pada suatu permukaan, dan mendapatkan sudut pada sumbu X dan Y perangkat serta melihat representasi visual sudut tersebut.
Lihat video ini untuk mempelajari cara membuat aplikasi yang menggunakan sensor perangkat bergerak:
Prasyarat
Tingkat lisensi Power Apps apa pun dapat digunakan untuk aplikasi ini karena tidak ada sambungan data yang digunakan.
Perangkat seluler seperti ponsel atau tablet dengan kemampuan GPS dan accelerometer akan diperlukan karena sebagian besar PC mungkin tidak memiliki sensor yang diperlukan.
Perangkat berkemampuan NFC diperlukan untuk fitur memindai NFC. Juga diasumsikan bahwa tag NFC yang akan dipindai telah dikonfigurasi sebelumnya 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"Teks ini akan memberikan teks dalam format yang ramah HTML untuk aplikasi tersebut. Konfigurasi tag NFC berada di luar cakupan artikel ini, dan elemen NFC dapat diabaikan jika diperlukan; fokus utama adalah menggunakan sensor perangkat bergerak dalam Power Apps.
Tambahkan teks header dan HTML untuk output sensor perangkat
Label header
Dengan aplikasi yang terbuka untuk pengeditan di Power Apps, tambahkan label Teks ke layar dengan menarik dan menjatuhkannya dari panel Sisipkan. Posisikan di sudut kiri atas layar, dan modifikasikan properti berikut di panel Properti:
| Properti | Nilai |
|---|---|
| Teks | "Perburuan Pemulung" |
| Ukuran font | 24 |
| Bobot font | FontWeight.Semibold |
| Penyelarasan teks | Align.Center |
| Lebar | Parent.Width |
Kemudian di panel Tingkat Lanjut, modifikasikan properti berikut:
| Properti | Nilai |
|---|---|
| Warna | RGBA(255, 255, 255, 1) |
| Isian | RGBA(56, 96, 178, 1) |
Header akan diberikan untuk layar.
Teks HTML untuk output sensor perangkat
Selanjutnya, tambahkan kontrol teks HTML. Alat ini akan digunakan untuk menampilkan semua output sensor perangkat di satu tempat. Gunakan kode ini di properti 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"
Di panel Tingkat Lanjut, ubah properti berikut:
| Properti | Nilai |
|---|---|
| Ukuran | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Lebar | 560 |
| Tinggi | 576 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Jika Anda memeriksa apa yang dimasukkan ke dalam HtmlText, Anda mungkin memperhatikan bahwa ada dua jenis sensor yang sedang digunakan.
Pertama adalah sensor Kompas yang menggunakan properti Heading untuk memberikan heading kompas dari perangkat.
Kedua adalah sensor Lokasi, yang menyediakan Garis Lintang, Garis Bujur, dan Ketinggian. Ada dua pertimbangan tentang Lokasi. Pertama, jika Anda hanya menggunakan Lokasi tanpa operator dan properti titik, Anda akan mendapatkan rekaman yang memiliki bidang untuk Garis Lintang, Garis Bujur, dan Ketinggian. Kedua, properti Peringkat diukur dalam meter secara default. Jika Anda ingin mengkonversinya ke kaki, ganti rumus berikut:
Gunakan meter:
Round(Location.Altitude, 2) & " m"
Gunakan kaki:
Round(Location.Altitude \* 3.2808, 2) & " ft"
Catatan
Banyak properti sensor yang mungkin tidak berfungsi dengan benar jika Anda mempratinjau aplikasi di dalam Power Apps Studio. Untuk bekerja dengan properti sensor untuk pengujian, pilih menggunakan telepon seluler.
Sekarang posisikan kontrol teks Html di dekat paruhan bawah layar.
Tambah Tombol untuk pindai NFC dan kontrol teks HTML
Tombol pindai NFC
Tambahkan tombol ke aplikasi, posisikan di bawah kontrol teks Html yang ditambahkan pada langkah terakhir, dan ubah properti berikut di panel Tingkat Lanjut:
| Properti | Nilai |
|---|---|
| OnSelect | ClearCollect(colNFCScan, ReadNFC()) |
| Teks | "Pindai Tag NFC" |
Kode di properti OnSelect memanfaatkan fungsi ReadNFC() yang mengaktifkan koneksi pembaca NFC. Ia kemudian menyimpan apa yang dibaca dari tag NFC dalam koleksi yang disebut colNFCScan. Koleksi ini akan memiliki empat bidang: RTD, Text, TNF, dan URI. Meski penjelasan lengkap tentang bidang ini berada di luar cakupan artikel ini, namun beberapa penjelasan mungkin akan membantu. TNF berarti Format Nama Jenis dan digunakan untuk mendefinisikan struktur Definisi jenis rekaman, atau RTD, yang pada gilirannya menentukan jenis rekaman yang terdapat pada bidang Teks dan/atau URI. URI berarti Uniform Resource Identifier, yang pada intinya merupakan alamat sumber daya. Untuk tag NFC yang digunakan dalam contoh ini, selain bidang Teks yang berisi teks contoh dari diperkenalkannya topik ini, tag tersebut akan berisi nilai TNF 1, nilai RTD T, dan nilai URI kosong.
Tambahkan kontrol teks Html untuk menampilkan informasi scan NFC
Tambahkan kontrol teks Html kedua dan gunakan rumus berikut di properti HTMLText:
"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text
Di panel Tingkat Lanjut, ubah properti berikut:
| Properti | Nilai |
|---|---|
| Ukuran | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Lebar | 560 |
| Tinggi | 248 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Tanpa data NFC yang ada, kontrol akan menampilkan Tujuan Berikutnya. Bila tag NFC dipindai, tag akan menampilkan Tujuan Berikutnya, lalu data dari bidang Teks pada data yang dikumpulkan dari pindaian.
Dengan asumsi data untuk tag NFC telah dikonfigurasi seperti dijelaskan dalam pengantar, pengguna akan melihat heading, garis lintang, dan garis bujur berikutnya untuk lokasi perburuan pemulung berikutnya setelah memindai salah satu tag tersebut.
Uji aplikasi
Simpan dan publikasikan aplikasi. Pada perangkat bergerak dengan sensor yang diperlukan, buka aplikasi dan perhatikan heading, garis lintang, garis bujur, dan nilai ketinggian. Coba berjalan kaki sambil memutar ke berbagai arah untuk melihat perubahan pada berbagai pembacaan sensor.
Tekan tombol Pindai Tag NFC untuk mengamati kontrol Pembaca NFC. Jika Anda memiliki tag NFC yang dapat menghasilkan nilai Teks, pindai tag untuk mengamati teks dalam aplikasi. Jika tidak, pilih Batal.
Menambahkan dan mengonfigurasikan layar kedua
Tambahkan layar Kosong baru untuk bagian pengukuran sudut aplikasi.
Setelah menambahkan layar, kembali ke layar pertama dan tambahkan ikon Panah Berikutnya dari + Masukkan > Ikon > pilih ikon Panah Berikutnya. Posisikan di sudut kanan atas layar, dan ubah properti berikut di panel tingkat lanjut:
| Properti | Nilai |
|---|---|
| OnSelect | Navigate(Screen2) |
| Warna | RGBA(255, 255, 255, 1) |
Jika Anda telah mengganti nama layar kedua yang baru saja ditambahkan, ganti nama tersebut untuk Screen2 pada fungsi Navigasi.
Pratinjau aplikasi, dengan memilih ikon yang baru saja ditambahkan untuk memverifikasikan bahwa aplikasi menavigasi Anda ke layar kosong yang baru saja ditambahkan.
Menambahkan konfigurasi untuk sudut X dan Y
Tambahkan label Teks ke layar dengan menarik dan menjatuhkannya dari panel Sisipkan. Posisikan di sudut kiri atas layar, dan modifikasikan properti berikut di panel Properti:
| Properti | Nilai |
|---|---|
| Teks | "Kedataran 2 Sumbu" |
| Ukuran font | 24 |
| Bobot font | FontWeight.Semibold |
| Penyelarasan teks | Align.Center |
| Lebar | Parent.Width |
Kemudian di panel Tingkat Lanjut, modifikasikan properti berikut:
| Properti | Nilai |
|---|---|
| Warna | RGBA(255, 255, 255, 1) |
| Isian | RGBA(56, 96, 178, 1) |
Header akan diberikan untuk layar kedua.
Selanjutnya, tambahkan ikon Panah Kembali dari + Masukkan > Ikon > pilih ikon Panah Kembali. Posisikan di sudut kiri atas layar, dan ubah properti berikut di panel tingkat lanjut:
| Properti | Nilai |
|---|---|
| OnSelect | Navigate(Screen1) |
| Warna | RGBA(255, 255, 255, 1) |
Jika Anda telah mengganti nama layar pertama yang baru saja ditambahkan, ganti nama tersebut untuk Screen1 pada fungsi Navigasi.
Akhirnya, tambahkan kontrol teks HTML. Alat ini akan digunakan untuk menampilkan semua output sensor perangkat di satu tempat. Gunakan rumus berikut di properti 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>"
Di tab Tingkat Lanjut, ubah properti berikut ini:
| Properti | Nilai |
|---|---|
| Ukuran | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Lebar | 560 |
| Tinggi | 168 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Posisikan kontrol ini di dekat bagian atas layar aplikasi.
Jika Anda memeriksa apa yang dimasukkan ke dalam HtmlText, Anda mungkin memperhatikan bahwa ia menggunakan sensor Akselerasi, dengan properti X dan Y. Ada juga properti Z yang tidak kami gunakan dalam skenario ini.
Sensor ini mendeteksi kekuatan gravitasi pada perangkat pada tiga bidang. Menggunakan telepon seluler sebagai contoh, bayangkan garis membentang ke luar sisi telepon. Ini akan menjadi bidang X. Mengangkat sisi kanan telepon akan menghasilkan nilai positif dan mengangkat sisi kiri akan menghasilkan nilai negatif. Garis yang membentang di bagian atas dan bawah telepon akan menunjukkan bidang Y. Mengangkat sisi atas telepon akan menghasilkan nilai positif dan mengangkat sisi bawah akan menghasilkan nilai negatif. Akhirnya, garis yang keluar dari layar dan kembali ke telepon akan menunjukkan bidang Z. Menyebabkan layar menghadap ke atas akan menghasilkan nilai positif dan menuju ke bawah akan menghasilkan nilai negatif.
Accelerometer akan mengukur kekuatan yang bertindak pada perangkat bergerak, misalnya jika Anda menjatuhkan perangkat dan sedang beristirahat, seperti memiringkan perangkat pada satu atau beberapa sumbu yang dijelaskan sebelumnya. Saat beristirahat, nilai teoretis harus antara 0 dan +/- 9,81 m/s2, dengan 0 yang menunjukkan bahwa sumbu relatif sejajar dengan Bumi tanpa gravitasi pada sensor dan pembacaan 9,81 yang menunjukkan bahwa sumbu relatif sejajar dengan Bumi dan kekuatan penuh gravitasi berlaku pada sensor.
Melihat kode dalam kontrol teks Html yang baru saja ditambahkan, perhatikan bagian berikut:
Abs(Round(Acceleration.X * (90 / 9.81), 0))
Dalam rumus ini, dari dalam ke luar, pertama, Akselerasi pada bidang X dikalikan (90/9,81). Hal ini menggunakan nilai maksimum istirahat maksimum untuk mengkonversi pembacaan sensor menjadi derajat. Nilai 90 ada karena pada nilai maksimum teotistis, perangkat akan bersifat tegak lurus terhadap Bumi pada bidang tersebut, memberikan ukuran 90 derajat.
Nilai tersebut dalam derajat kemudian dibulatkan ke nol tempat desimal untuk memberikan nilai derajat bilangan cacah. Terakhir, nilai absolut dari angka bulat yang dibulatkan tersebut dihitung untuk memberikan pembacaan positif. Hal ini sehingga tidak peduli apakah sudut diukur dari satu sisi atau lainnya.
Catatan
Nilai yang disampaikan di atas adalah perkiraan dan tidak menunjukkan pengukuran yang pasti.
Tambahkan visual kedataran
Pada langkah ini, kami akan menggunakan beberapa kontrol dengan cara yang tidak biasa untuk mencapai sasaran visual.
Visual seperti kedataran gelembung lingkaran
Untuk memulai, tambahkan kontrol Tombol ke layar, ganti nama ke btnCircleLevel dan ubah properti berikut di panel Tingkat Lanjut:
| Properti | Nilai |
|---|---|
| Teks | "" |
| BorderColor | RGBA(56, 96, 178, 1) |
| FocusedBorderThickness | 2 |
| Isian | Transparan |
| DisabledFill | Self.Fill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | (Parent.Height - Self.Height) / 2 |
| Lebar | 400 |
| Tinggi | Self.Width |
Hasil dari perubahan ini harus menghasilkan tombol lingkaran di pusat layar yang tidak dapat ditekan karena dinonaktifkan.
Selanjutnya, tambahkan bentuk Lingkaran, atur jari-jari pinggiran ke 400 dan ubah properti berikut di panel Lanjutan:
| Properti | 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 |
| Tinggi | Self.Width |
| Lebar | 400 |
| Tinggi | Self.Width |
Properti X dan Y memungkinkan bentuk Lingkaran berpindah di sekitar pusat layar aplikasi, perubahan relatif dalam nilai sensor Akselerasi namun terdapat dalam area lingkaran btnCircleLevel.
Visual seperti kedataran gelembung sumbu X dan Y
Tambahkan kontrol Penggeser ke aplikasi, ganti nama ke sldXValue dan ubah properti berikut di panel Tingkat Lanjut:
| Properti | Nilai |
|---|---|
| Minimum | -90 |
| Maksimum | 90 |
| Default | 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 |
| Tinggi | 70 |
Kontrol Penggeser ini akan menampilkan sudut yang mirip dengan kedataran gelembung: Handel akan bergerak menuju sisi perangkat yang dinaikkan, mirip dengan gelembung udara pada kedataran gelembung.
Selanjutnya, salin btnCircleLevel dengan memilihnya, tekan Ctrl + C dan kemudian Ctrl + V. Ganti nama kontrol ke btnXValueOverlay dan ubah properti berikut di panel Tingkat Lanjut:
| Properti | Nilai |
|---|---|
| X | sldXValue.X - sldXValue.HandleSize / 2 |
| Y | sldXValue.Y |
| Lebar | sldXValue.Width + sldXValue.HandleSize |
| Tinggi | sldXValue.Height |
Perubahan ini akan memposisikannya di atas kontrol sldXValue, mencegah pengguna mengubah nilai dan memberikan batas visual.
Salin dan rekat sldXValue, menggunakan metode yang sama yang digunakan untuk menyalin btnCircleLevel. Ganti nama menjadi sldYValue dan ubah properti berikut:
| Properti | Nilai |
|---|---|
| Tata letak | Layout.Vertical |
| X | btnCircleLevel.X - Self.Width - 30 |
| Y | (Parent.Height - Self.Height) / 2 |
| Lebar | sldXValue.Height |
| Tinggi | sldXValue.Width |
Salin dan rekatkan btnXValueOverlay, ganti nama ke btnYValueOverlay, dengan mengubah properti berikut:
| Properti | Nilai |
|---|---|
| X | sldYValue.X |
| Y | sldYValue.Y - sldYValue.HandleSize / 2 |
| Lebar | sldYValue.Width |
| Tinggi | sldYValue.Height + sldYValue.HandleSize |
Langkah ini akan menyelesaikan visual seperti kedataran gelembung.
Uji aplikasi level
Simpan dan publikasikan aplikasi. Pada perangkat bergerak dengan sensor yang diperlukan, buka aplikasi dan navigasi ke layar dengan visual kedataran gelembung. Miringkan perangkat dari kiri ke kanan, ke atas dan ke bawah, dan akhirnya di segala arah, melihat perubahan pada properti sudut serta perubahan dalam visual. Temukan permukaan bersudut untuk menempatkan perangkat dan catat lagi sudut dan visual.