Criar um aplicativo que usa sensores móveis
Os sensores permitem que você adicione funcionalidades mais ricas aos seus aplicativos, aproveitando os recursos do telefone. Neste artigo, você aprenderá a usar sensores em seu dispositivo móvel no Power Apps.
Para fazer isso, você criará um aplicativo de amostra com duas telas. A primeira tela exibirá o rumo da bússola atual, latitude, longitude, altitude e pode examinar marcas NFC para obter informações de texto. A segunda tela mostrará como exibir os dados do acelerômetro para produzir o ângulo do dispositivo ao longo dos eixos X e Y.
Para configurar o cenário por trás da primeira tela, imagine que você está criando um aplicativo para uma caça ao tesouro baseada em NFC. Cada participante usará o aplicativo para examinar uma marca NFC que fornecerá a direção da bússola, latitude e longitude que os apontará para o próximo destino. Nesse destino, o participante examinará outra marcar e repetirá o processo até chegar ao final da busca.
Para a segunda tela, imagine a necessidade de uma ferramenta para medir ângulos aproximadamente. Quando estiver na segunda tela, o participante poderá colocar ou segurar seu dispositivo em uma superfície e obter os ângulos nos eixos X e Y do dispositivo, bem como exibir uma representação visual desses ângulos.
Assista a este vídeo para aprender como criar um aplicativo que usa sensores para dispositivos móveis:
Pré-requisitos
Qualquer nível de licença do Power Apps pode ser usado para este aplicativo, já que nenhuma conexão de dados está sendo usada.
Um dispositivo móvel como um telefone celular ou tablet com recursos de GPS e acelerômetro será necessário, pois a maioria dos PCs pode não ter os sensores necessários.
Um dispositivo compatível com NFC é necessário para o recurso de exame NFC. Também presume-se que as marcas NFC a serem examinadas foram pré-configuradas para produzir valores de texto no seguinte formato de exemplo:
"<b>Heading: </b> 80 degrees <br> <b>Latitude: </b> 44.4604788 <br> <b>Longitude: </b> -110.82813759"Isso fornecerá o texto em um formato compatível com HTML para o aplicativo. A configuração das marcas NFC está além do escopo deste artigo e os elementos NFC podem ser ignorados se necessário; o foco principal é usar os sensores móveis no Power Apps.
Adicionar cabeçalho e texto HTML para as saídas do sensor do dispositivo
Rótulo de cabeçalho
Com um aplicativo aberto para edição no Power Apps, adicione um Rótulo de texto para a tela, arrastando-o e soltando-o do painel Inserir. Posicione-o no canto superior esquerdo da tela e modifique as seguintes propriedades no painel Propriedades:
| Propriedade | Valor |
|---|---|
| Texto | "Caça ao tesouro" |
| Tamanho da fonte | 24 |
| Espessura da fonte | FontWeight.Semibold |
| Alinhamento do texto | Align.Center |
| Largura | Parent.Width |
No painel Avançado, modifique as seguintes propriedades:
| Propriedade | Valor |
|---|---|
| Cor | RGBA(255, 255, 255, 1) |
| Preenchimento | RGBA(56, 96, 178, 1) |
Isso fornecerá um cabeçalho para a tela.
Texto HTML para as saídas do sensor do dispositivo
Em seguida, adicione um controle de texto HTML. Isso será usado para exibir todas as saídas do sensor do dispositivo em um só lugar. Use este código na propriedade 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"
Altere as seguintes propriedades no painel Avançado:
| Propriedade | Valor |
|---|---|
| Tamanho | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Largura | 560 |
| Altura | 576 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Se você examinar o que foi colocado no HtmlText, notará que há dois tipos de sensores em uso.
O primeiro é o sensor Bússola, que está usando a propriedade Cabeçalho para fornecer a direção da bússola do dispositivo.
O segundo é o sensor Localização, que fornece a Latitude, a Longitude e a Altitude. Existem duas considerações sobre a localização. Primeiro, se você usar apenas Localização sem o operador ponto e a propriedade, obterá um registro com campos para Latitude, Longitude e Altitude. Segundo, a propriedade Altitude está em metros por padrão. Se você quiser convertê-lo em pés, substitua a seguinte fórmula:
Use metros:
Round(Location.Altitude, 2) & " m"
Use pés:
Round(Location.Altitude \* 3.2808, 2) & " ft"
Observação
Talvez muitas propriedades do sensor não funcionem corretamente se você visualizar o aplicativo no Power Apps Studio. Para trabalhar com propriedades de sensor para teste, opte por usar um telefone celular.
Agora posicione o controle Texto HTML próximo à metade inferior da tela.
Adicionar Botão para exame NFC e controle Texto HTML
Botão de exame NFC
Adicione um botão ao aplicativo, posicionando-o abaixo do controle Texto HTML que você adicionou na última etapa, e altere as seguintes propriedades no painel Avançado:
| Propriedade | Valor |
|---|---|
| OnSelect | ClearCollect(colNFCScan, ReadNFC()) |
| Texto | "Examinar a marca NFC" |
O código na propriedade OnSelect está utilizando a função ReadNFC (), que ativa o leitor NFC. Em seguida, ele armazena o que é lido da marca NFC em uma coleção chamada colNFCScan. Esta coleção terá quatro campos: RTD, Texto, TNF e URI. Embora uma explicação completa desses campos esteja além do escopo deste artigo, algumas explicações podem ser úteis. TNF significa Formato do Nome do Tipo e é usado para definir a estrutura da Definição do Tipo de Registro, ou RTD que, por sua vez, define o tipo de registro contido nos campos Texto e/ou URI. URI significa Uniform Resource Identifier, que é basicamente o endereço de um recurso. Para as marcas NFC usadas neste exemplo, além do campo Texto que contém o texto de exemplo da introdução deste tópico, elas conteriam um valor TNF de 1, um valor RTD de T e um valor URI em branco.
Adicionar controle Texto HTML para exibir as informações do exame NFC
Adicione um segundo controle Texto HTML e use a seguinte fórmula na propriedade HTMLText:
"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text
Altere as seguintes propriedades no painel Avançado:
| Propriedade | Valor |
|---|---|
| Tamanho | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Largura | 560 |
| Altura | 248 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Sem dados NFC presentes, o controle exibirá Próximo Destino. Quando uma marca NFC é examinada, ela exibe Próximo Destino e, depois, os dados do campo Texto nos dados coletados do exame.
Supondo que os dados das marcas NFC foram configurados conforme descrito na introdução, o usuário verá os valores de latitude e longitude da próxima direção da bússola para o próximo local de caça ao tesouro após examinar uma dessas marcas.
Testar o aplicativo
Salve e publique o aplicativo. Em um dispositivo móvel com os sensores necessários, abra o aplicativo e observe os valores latitude, longitude e altitude de direção da bússola. Experimente caminhar girando em várias direções para ver as mudanças nas várias leituras do sensor.
Pressione o botão Examinar marca NFC para observar o controle do leitor NFC. Se você tiver uma marca NFC que possa produzir um valor de Texto, examine a marca para observar o texto no aplicativo. Caso contrário, selecione Cancelar.
Adicionar e configurar uma segunda tela
Adicione uma nova Tela em branco para a parte de medição do ângulo do aplicativo.
Depois de adicionar a tela, volte à primeira tela e adicione um ícone Próxima Seta de + Inserir > Ícones > escolha o ícone Próxima Seta. Posicione-o no canto superior direito da tela e altere as seguintes propriedades no painel Avançado:
| Propriedade | Valor |
|---|---|
| OnSelect | Navigate(Screen2) |
| Cor | RGBA(255, 255, 255, 1) |
Se você renomeou a segunda tela recém-adicionada, substitua esse nome por Screen2 na função Navegar.
Visualize o aplicativo, selecionando o ícone recém-adicionado para verificar se ele o leva à tela em branco que acabou de ser adicionada.
Adicionar configuração para ângulos X e Y
Adicione um Rótulo de texto à tela, arrastando-o e soltando-o do painel Inserir. Posicione-o no canto superior esquerdo da tela e modifique as seguintes propriedades no painel Propriedades:
| Propriedade | Valor |
|---|---|
| Texto | "Nível de eixo 2" |
| Tamanho da fonte | 24 |
| Espessura da fonte | FontWeight.Semibold |
| Alinhamento do texto | Align.Center |
| Largura | Parent.Width |
No painel Avançado, modifique as seguintes propriedades:
| Propriedade | Valor |
|---|---|
| Cor | RGBA(255, 255, 255, 1) |
| Preenchimento | RGBA(56, 96, 178, 1) |
Isso fornecerá um cabeçalho para a segunda tela.
Em seguida, adicione um ícone Seta para Voltar de + Inserir > Ícones > escolha o ícone Seta para Voltar. Posicione-o no canto superior esquerdo da tela e altere as seguintes propriedades no painel Avançado:
| Propriedade | Valor |
|---|---|
| OnSelect | Navigate(Screen1) |
| Cor | RGBA(255, 255, 255, 1) |
Se você renomeou a primeira tela recém-adicionada, substitua esse nome por Screen1 na função Navegar.
Finalmente, adicione um controle de texto HTML. Isso será usado para exibir todas as saídas do sensor do dispositivo em um só lugar. Use a seguinte fórmula na propriedade 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>"
Altere as seguintes propriedades na guia Avançado:
| Propriedade | Valor |
|---|---|
| Tamanho | 21 |
| BorderStyle | BorderStyle.Solid |
| BorderThickness | 2 |
| Largura | 560 |
| Altura | 168 |
| PaddingTop | 16 |
| PaddingRight | 16 |
| PaddingBottom | 16 |
| PaddingLeft | 16 |
Posicione este controle próximo ao topo da tela do aplicativo.
Se você examinar o que foi colocado em HtmlText, note que ele está usando o sensor Aceleração, com propriedades X e Y. Há também uma propriedade Z que não estamos usando neste cenário.
Este sensor detecta forças gravitacionais no dispositivo em três planos. Usando um telefone celular como exemplo, imagine uma linha saindo das laterais do telefone. Este seria o plano X. Levantar o lado direito do telefone produzirá um valor positivo e levantar o lado esquerdo produzirá um valor negativo. Uma linha que se estende da parte superior e inferior do telefone representaria o plano Y. Levantar a parte superior do telefone produzirá um valor positivo e levantar a parte inferior produzirá um valor negativo. Finalmente, uma linha saindo da tela e da parte traseira do telefone representaria o plano Z. Virar a tela para cima produzirá um valor positivo e virá-la para baixo resultará em um valor negativo.
O acelerômetro medirá as forças que atuam no dispositivo em movimento, como se você o derrubasse, e em repouso, como inclinar o dispositivo em um ou mais dos eixos descritos anteriormente. Em repouso, os valores teóricos devem estar entre 0 e +/- 9,81 m/s2, com 0 indicando que o eixo relativo é paralelo à Terra sem gravidade atuando no sensor, e uma leitura de 9,81 indicando que o eixo relativo é perpendicular à Terra e toda a força da gravidade está agindo no sensor.
Olhando para o código no controle Texto HTML que você acabou de adicionar, observe a seguinte seção:
Abs(Round(Acceleration.X * (90 / 9.81), 0))
Nesta fórmula, de dentro para fora, primeiro, a Aceleração no plano X está sendo multiplicada por (90 / 9,81). É utilizado o valor máximo teórico em repouso para converter a leitura do sensor em graus. O valor de 90 está presente porque, no valor máximo teórico, o dispositivo seria perpendicular à Terra nesse plano, gerando uma medida de 90 graus.
Esse valor em graus é arredondado para zero casas decimais para fornecer um valor de grau de número inteiro. Por último, o valor absoluto desse número arredondado é calculado para dar uma leitura positiva. Assim, não importa se o ângulo é medido de um lado ou de outro.
Observação
Os valores compartilhados acima são aproximados e não representam medidas exatas.
Adicione os elementos visuais de nível
Nesta etapa, vamos usar alguns controles de formas não convencionais para atingir um objetivo visual.
Elemento visual circular semelhante a um nível de bolha
Para começar, adicione um controle de Botão para a tela, renomeando-o como btnCircleLevel e altere as seguintes propriedades no painel Avançado:
| Propriedade | Valor |
|---|---|
| Texto | "" |
| BorderColor | RGBA(56, 96, 178, 1) |
| FocusedBorderThickness | 2 |
| Preenchimento | Transparente |
| DisabledFill | Self.Fill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | (Parent.Height - Self.Height) / 2 |
| Largura | 400 |
| Altura | Self.Width |
O resultado dessas alterações deve produzir um botão circular no centro da tela que não pode ser pressionado por estar desabilitado.
Em seguida, adicione uma forma de Círculo, defina o raio da borda como 400 e altere as seguintes propriedades no painel Avançado:
| Propriedade | Valor |
|---|---|
| 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) |
| Largura | 42 |
| Altura | Self.Width |
| Largura | 400 |
| Altura | Self.Width |
As propriedades X e Y permitem que a forma de Círculo se mova sobre o centro da tela do aplicativo, mudança relativa nos valores do sensor Aceleração, mas contidos na área circular de btnCircleLevel.
Elementos visuais semelhantes a níveis de bolha dos eixos X e Y
Adicione um controle de Controle deslizante ao aplicativo, renomeie-o como sldXValue e altere as seguintes propriedades no painel Avançado:
| Propriedade | Valor |
|---|---|
| Mín | -90 |
| Máx | 90 |
| Padrão | Round(Acceleration.X * (90 / 9.81), 0) |
| ValueFill | Self.RailFill |
| X | (Parent.Width - Self.Width) / 2 |
| Y | btnCircleLevel.Y + btnCircleLevel.Height + 30 |
| Largura | btnCircleLevel.Width |
| Altura | 74 |
Esse controle de Controle deslizante exibirá o ângulo semelhante ao de um nível de bolha: o Botão se moverá em direção ao lado elevado do dispositivo, semelhante à bolha de ar em um nível de bolha.
Depois, copie btnCircleLevel selecionando-o, pressionando Ctrl + C e, depois, Ctrl + V. Renomeie o controle como btnXValueOverlay e altere as seguintes propriedades no painel Avançado:
| Propriedade | Valor |
|---|---|
| X | sldXValue.X - sldXValue.HandleSize / 2 |
| Y | sldXValue.Y |
| Largura | sldXValue.Width + sldXValue.HandleSize |
| Altura | sldXValue.Height |
Essas mudanças irão posicioná-lo sobre o controle sldXValue, evitando que o usuário altere o valor e fornecendo uma borda visual.
Copie e cole sldXValue, usando o mesmo método usado para copiar btnCircleLevel. Renomeie-o como sldYValue e altere as seguintes propriedades:
| Propriedade | Valor |
|---|---|
| Layout | Layout.Vertical |
| X | btnCircleLevel.X - Self.Width - 30 |
| Y | (Parent.Height - Self.Height) / 2 |
| Largura | sldXValue.Height |
| Altura | sldXValue.Width |
Copie e cole btnXValueOverlay, renomeando-o como btnYValueOverlay, alterando as seguintes propriedades:
| Propriedade | Valor |
|---|---|
| X | sldYValue.X |
| Y | sldYValue.Y - sldYValue.HandleSize / 2 |
| Largura | sldYValue.Width |
| Altura | sldYValue.Height + sldYValue.HandleSize |
Isso completa os elementos visuais em nível de bolha.
Testar o aplicativo de nível
Salve e publique o aplicativo. Em um dispositivo móvel com os sensores necessários, abra o aplicativo e navegue até a tela com os elementos visuais em nível de bolha. Incline o dispositivo da esquerda para a direita, depois para cima e para baixo e, finalmente, em todas as direções, observando as mudanças nas propriedades do ângulo e nos elementos visuais. Encontre uma superfície angular para colocar o dispositivo e observe novamente os ângulos e elementos visuais.
Confira também
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de