Blog

Postado em em 26 de julho de 2022

Série Aplicativo de Restaurante Aula1 – Criando a Tela Inicial

Na Série Aplicativo de Restaurante Aula1 nós vamos criar um aplicativo para restaurante, mas vamos iniciar com a tela inicial!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Série Aplicativo de Restaurante com Power Apps

Nessa série nós vamos criar um aplicativo para restaurante com Power Apps para auxiliar nos pedidos do restaurante!

Não sei se você já sabe, mas aqui no blog nós já temos um Curso Básico de Power Apps para te auxiliar e ter mais uma opção de aplicativo para criar!

Série Aplicativo de Restaurante Aula1

Então o objetivo do nosso aplicativo é fazer o registro de pedidos do restaurante para facilitar o trabalho de quem estiver fazendo esse registro.

Nessa primeira aula nós vamos criar a tela inicial do nosso aplicativo para deixar o visual mais agradável e facilitar o uso do aplicativo.

Tela inicial do aplicativo
Tela inicial do aplicativo

É importante que você já veja os passos iniciais no nosso Curso Básico de Power Apps, pois você vai precisar fazer o seu cadastro com uma conta corporativa para poder utilizar o programa.

Feito isso você pode fazer o login na plataforma, pode ir até a opção Aplicativo no menu lateral esquerdo e pode clicar em Novo Aplicativo.

Escolhendo a tela do aplicativo
Escolhendo a tela do aplicativo

Aqui vamos escolher a opção de tela, que é onde a pessoa vai poder clicar nas informações.

Na tela seguinte você vai dar o nome ao seu aplicativo e vai escolher entre tablet e telefone, que são os modos de visualização. Tablet é para uma visualização horizontal e telefone para vertical.

No nosso caso vamos escolher a opção de telefone, pois vamos fazer o uso na forma vertical mesmo!

Dentro dos arquivos disponíveis para download nós temos um arquivo em PowerPoint que vai ter esse plano de fundo azul e a imagem que vamos utilizar para a nossa tela inicia.

Lá você vai poder ou criar o seu próprio layout, alterar o que já está pronto, ou até mesmo modificar o que quiser.

Lembrando apenas de manter as medidas do plano de fundo para que ele fique correto na hora de enviar para o aplicativo.

Para as imagens você pode acessar os sites abaixo caso queira alguma ideia ou precise procurar um tema específico:

https://undraw.co/illustrations

https://drawkit.com/

https://www.freepik.com/

Com isso você já vai ter as imagens que precisar para a construção da página inicial do seu aplicativo, lembrando que não precisa se limitar ao que temos como exemplo, pode fazer suas modificações.

Inserindo a imagem no programa
Inserindo a imagem no programa

Na parte esquerda, em mídia, você vai poder carregar as suas imagens, vídeos ou áudios para utilizar no seu aplicativo. Aqui nós vamos selecionar a nossa imagem da tela inicial.

Feito isso a imagem fica dentro da lista de imagens, então você vai clicar nela e arrastar para dentro do seu aplicativo.

Ajustando a imagem no aplicativo
Ajustando a imagem no aplicativo

Aqui você vai alterar no menu lateral a direita a opção de Posição da Imagem para Preenchimento, assim vai conseguir ajustar a sua imagem em toda a tela sem o espaço em branco.

Agora já podemos inserir alguns elementos para dar um visual ao nosso aplicativo e facilitar o entendimento.

Inserindo um rótulo (caixa de texto)
Inserindo um rótulo (caixa de texto)

Na guia Inserir podemos ir em Texto > Rótulo para criar uma caixa de texto para ser o nosso título.

Ajustando o rótulo
Ajustando o rótulo

Lembrando que no menu a direita você pode fazer todas as configurações do elemento que estiver selecionado.

Aqui para o segundo texto, onde vamos dar as boas vindas ao usuário, nós vamos alterar esse texto dentro da barra de fórmulas.

Dessa forma vamos conseguir colocar uma função que puxa o nome completo do usuário do PowerApps, assim teremos um nome para cada pessoa que utilizar o aplicativo.

Fórmula para trazer o nome do usuário
Fórmula para trazer o nome do usuário

Aqui vamos concatenar ao nosso texto a função User().FullName para inserir o nome completo do usuário.

OBS: Lembrando que se tiver dúvidas de como utilizar uma função ou até mesmo para saber se existe pode buscar na internet, pois existem alguns tutoriais, até mesmo da própria Microsoft para te ensinar como utilizar cada função e cada ferramenta!

Para os outros dois botões nós vamos inserir o rótulo (pode copiar dos anteriores) para posicioná-los nos locais onde criamos os botões no nosso plano de fundo.

Inserindo ícones no aplicativo
Inserindo ícones no aplicativo

Aqui ainda podemos inserir alguns ícones para facilitar a visualização e o entendimento do que será feito.

Tela final quase pronta
Tela final quase pronta

Aqui já temos nossa tela inicial quase pronta, o único detalhe que nós vamos fazer é acrescentar um botão, para que o usuário possa clicar tanto na opção de cadastrar um pedido quanto na opção de visualizar pedidos.

Série Aplicativo de Restaurante Aula1
Inserindo um botão no aplicativo

Para isso basta ir em Entrada e selecionar Botão. Feito isso você vai posicionar em cima do nosso botão, para que ele de fato funcione como botão.

Então vamos excluir o texto que está nele, pois já temos um texto e depois vamos tirar o preenchimento do botão.

Série Aplicativo de Restaurante Aula1
Alterando o preenchimento do botão

Para isso pode ir às propriedades do botão e selecionar a opção sem preenchimento. Ainda na parte de propriedades você vai descer um pouco e vai visualizar 2 opções.

Cor quando pressionado e cor ao focalizar, que são as cores quando você clica e quando passa o mouse sobre o botão.

Série Aplicativo de Restaurante Aula1
Alterando o preenchimento ao passar o mouse pelo botão

Você vai ter 3 botões, o botão do meio é a cor de preenchimento, então é isso que vamos alterar.

Quando você clicar nessa opção vai notar que dentro da barra de fórmulas nós temos qual a cor está sendo utilizada.

Série Aplicativo de Restaurante Aula1
Fórmula para ajustar a cor do preenchimento

Aqui temos o código em RGBA, então você pode procurar qual a cor você quer e colocar aqui dentro, lembrando que nesse caso vamos escolher uma cor muito parecida com o que já temos, só que bem suave.

Série Aplicativo de Restaurante Aula1
Alterando a cor de preenchimento

Então vamos apenas alterar esse valor final, já que a cor padrão já é azul. Agora você pode copiar e colar o botão para o outro que já temos, assim mantém a mesma formatação.

Lembrando que para testar e visualizar como está o seu aplicativo

Como criar aplicativo você pode clicar no botão de play que fica na parte superior esquerda do programa.

Outro ponto importante é salvar o seu aplicativo. Para isso basta ir até a guia arquivo e clicar em salvar para garantir que salvou tudo antes de fechar!

Conclusão – Série Aplicativo de Restaurante Aula1

Nessa aula nós fizemos a criação da nossa tela inicial do aplicativo. Criamos um visual que dê a ideia de restaurante e já colocamos dois botões.

Esses botões ainda não têm nenhuma ação, mas vamos atribuir nas próximas aulas para que você consiga acessar as outras telas do aplicativo que ainda vamos criar!

Hashtag Treinamentos

Para acessar outras publicações de Power Apps, clique aqui!


Quer aprender mais sobre Power BI com um minicurso básico gratuito?

Quer aprender a criar Dashboards Incríveis no Excel para impressionar?Coloque seu e-mail e comece agora esse minicurso!