Aplicativo de Restaurante no Power Apps: Crie do Zero (Guia Completo)

Quer criar um aplicativo de restaurante no Power Apps do zero? Nesta série completa você vai construir, sem escrever código, um app para registrar e acompanhar os pedidos do restaurante — da tela inicial até a publicação para a equipe usar no celular.

Em resumo: o aplicativo de restaurante é montado em quatro etapas no Power Apps — (1) a tela inicial com os botões de navegação, (2) a tela de cadastro de pedidos, (3) a tela de visualização dos pedidos registrados e (4) a publicação e o compartilhamento do app. Tudo no modo visual, sem programação.

Prefere acompanhar em vídeo? Cada etapa abaixo tem a videoaula correspondente. Você também encontra mais conteúdos no nosso blog de Power Apps e no canal do YouTube.

Antes de começar, vale ter o ambiente pronto: veja os primeiros passos no Curso Básico de Power Apps, pois você vai precisar de uma conta corporativa Microsoft 365 para usar a ferramenta.

Etapa 1 — Criando a tela inicial do aplicativo

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.

É 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.

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.

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.

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.

Na guia Inserir podemos ir em Texto > Rótulo para criar uma caixa de texto para ser o nosso tí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.

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.

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

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.

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.

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.

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.

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.

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!

Etapa 2 — Tela de cadastro de pedidos

A ideia dessa aula e criar a tela de cadastro dos pedidos, lembrando que na primeira aula nós criamos a tela inicial do aplicativo.

Então estamos dando seguimento a essa construção com a tela de cadastro.

É importante explicar como você volta a edição do seu aplicativo caso tenha fechado e queira continuar. Basta abrir o Power Apps, ir até a opção de Aplicativos.

Nessa parte você vai visualizar todos os aplicativos que já têm criado, agora pode ir até o aplicativo desejado, clicar nos 3 pontos e selecionar a opção Editar.

Como nós só temos uma tela até o momento, nós vamos precisar criar outra para fazer o nosso cadastro/controle de pedidos.

Então basta ir em Nova tela > Em branco. Aqui você nota que já tem algumas telas já prontas caso queira escolher no layout que precisa. No nosso caso nós vamos criar uma tela do zero mesmo.

Clicando nos 3 pontos em Screen1 e Screen2 você pode clicar na opção Renomear para facilitar o entendimento do que está fazendo e qual ambiente está editando.

É sempre importante nomear as coisas para que você não se perca nem faça edições nos lugares errados!

Como a utilização do Excel para registro das informações não é das melhores, pois se alguém estiver com o arquivo aberto o Power Apps não consegue fazer esse registro, nós vamos optar pelo SharePoint.

O SharePoint também é uma ferramenta da Microsoft, então você pode entrar na sua conta do Office e entrar no SharePoint no seu menu lateral.

No canto superior esquerdo, dentro do seu SharePoint, você vai visualizar a opção Criar Site, que é onde vamos criar uma página para inserir essas informações.

Vamos escolher a opção Site de equipe, que é um espaço privado para registrar as informações de cadastro dos pedidos.

Depois disso basta colocar o nome do seu site e as informações extras caso queira. Outro ponto é que vamos deixar marcada a opção Privado em Configurações de privacidade.

Assim somente as pessoas que escolhermos poderão acessar essas informações. Isso é importante até para garantir a segurança da informação.

Depois de avançar você vai poder adicionar os membros que poderão acessar as informações dessa página.

Feito isso já vamos ter o nosso ambiente criado. Agora nós vamos criar uma Lista, que é uma espécie de tabela onde vamos armazenar as informações de pedidos.

Vamos criar uma lista em branco. Você terá que dar um nome para essa lista e uma descrição caso queira.

Agora que temos a lista criada, nós vamos adicionar as colunas. Que são as colunas que vão receber as informações dos nossos pedidos.

Para a primeira coluna nós vamos selecionar Escolha, para que o usuário não tenha que escrever, apenas selecionar. Isso é muito útil para evitar erros!

Na parte de escolhas vamos deixar apenas duas, Mesa e Delivery. Que serão as duas opções para o Tipo de Pedido.

Em Mais opções nós vamos ter que habilitar a opção Exigir que esta coluna contenha informações.

Essa opção é para garantir que a pessoa que está preenchendo as informações seja obrigada a marcar se o pedido é delivery ou mesa. Isso é muito importante para evitar problemas!

Para nossa segunda coluna (Descrição Pedido) vamos selecionar Texto com várias linhas para que a pessoa possa registrar o pedido do cliente.

Aqui também vamos marcar para que essa informação seja obrigatória, até porque não queremos que chegue um pedido sem nada.

Para a terceira coluna (Nº Mesa (Opcional)) vamos selecionar o tipo Número. Aqui não vamos deixar obrigatório, pois o pedido pode ter sido feito para delivery, então não faz sentido essa informação ser obrigatória.

Para a quarta coluna (Endereço (Opcional)) vamos selecionar o tipo Texto com várias linhas, pois podemos ter endereços maiores.

Também não vamos deixar obrigatório. Para a quinta coluna você pode ter uma base de dados com os preços de todos os produtos do restaurante, assim como pode ter uma base de dados para a descrição do pedido.

Mas para esse caso vamos deixar essa parte de forma manual, então para essa coluna (Preço) vamos escolher o tipo Número para que o usuário possa inserir o valor. Aqui vamos colocar 2 casas decimais, pois vamos tratar de moeda. Não se esqueça de deixar essa informação obrigatória também!

Você deve ter notado que quando a sua lista foi criada, nós tínhamos uma coluna chamada Título, só que ela por padrão é definida como obrigatória, então vamos ter que remover essa obrigação.

Para isso basta clicar na engrenagem e ir até a opção Configurações da lista. Descendo um pouco você já vai visualizar todas as colunas que têm na sua lista.

Vamos clicar na coluna Title (Título) e depois vamos marcar Não na caixa de Exigir que esta coluna contenha informações. Depois basta clicar em OK na parte inferior da página!

Feito isso nós vamos voltar para o Power Apps para que possamos inserir um formulário dentro do aplicativo.

Com isso vamos poder conectar a lista do SharePoint ao Power Apps.

Para fazer isso vamos até a guia de Dados (menu lateral esquerdo) e aqui vamos em Adicionar dados e vamos buscar pelo SharePoint.

Aqui você vai poder selecionar o site que você vai se conectar dentro do SharePoint e depois ele vai perguntar qual é a lista que você vai se conectar.

Basta escolher a ListaPedidos e depois clicar em conectar para finalizar!

Depois disso vamos até a guia Inserir e vamos selecionar a opção Formulários. Se ela não aparecer você pode clicar na seta para baixo (figura abaixo).

Assim que clicar em Formulários vão aparecer 2 opções, Editar e Exibir. Para o nosso caso vamos clicar na opção Editar, pois vamos precisar inserir as informações.

Logo que fizer isso vamos ter um formulário vazio, mas no menu a direita, você pode clicar em Fonte de dados e selecionar a ListaPedidos que já importamos.

Aqui você deve ter notado que temos aquele campo de Título e ainda temos um campo Anexos que foi colocado extra dentro do nosso formulário.

Para excluir esses campos basta clicar em Editar campos no menu a direita. Clicar nos 3 pontos referente ao campo desejado e clicar em Remover.

Como essa tela fica muito “vazia” só com o formulário, nós vamos criar um frame para melhorar o visual dessa tela.

Dentro dos arquivos já temos disponível no PowerPoint esse formato, basta apenas salvar ele como imagem para trazer para o PowerApps.

Como a imagem vai ficar por cima do formulário, você vai precisar clicar nela com o botão direito, depois em Reordenar e por fim em Enviar para o fundo.

Podemos voltar a parte inicial para selecionar o formulário e ajustá-lo dentro do nosso layout para que ele fique mais bem posicionado.

Agora nós vamos em Inserir > Rótulo, que nem fizemos na primeira aula, para inserir uma caixa de texto para colocar como título dessa tela.

Lembrando que no menu lateral a direita você vai poder ajustar todas as configurações tanto do rótulo quanto dos outros elementos.

O próximo passo é inserir um ícone de X para criarmos o botão de fechar essa tela. E depois vamos criar um botão ou ícone para que o usuário consiga enviar a informação do pedido.

IMPORTANTE: Quando você clicar no play para visualizar o aplicativo vai notar que o formulário não aparece! Mas não se preocupe, basta selecionar o formulário no menu a esquerda e no seu menu a direita em Modo padrão você vai selecionar a opção Novo (conforme imagem abaixo).

Agora a ideia é atribuir uma função ao botão de X inicialmente para que ele possa resetar o nosso formulário e que volte para a tela inicial.

Aqui nós temos alguns pontos para poder fazer isso. O primeiro ponto é clicar no ícone, depois no canto superior esquerdo nós vamos deixar a opção OnSelect.

Isso quer dizer que vamos executar uma ação ao clicar nesse botão. Por fim vamos escrever a fórmula abaixo para executar as duas ações:

ResetForm(FormularioPedidos);;Navigate(capa)

OBS: A ideia é colocar apenas um ponto e vírgula para separar essas informações, mas como está dando algum bug no programa foram necessários 2 deles. Mas é possível que quando esteja fazendo que um só seja suficiente.

Então temos o comando para resetar. Dentro dele vamos colocar o nome do formulário. E depois temos o comando de navegar. Onde vamos indicar para qual tela nós vamos ser redirecionados.

Feito isso nós vamos poder criar a ação do nosso botão Enviar.

Aqui vamos selecionar o botão, depois vamos garantir que está na opção OnSelect e vamos utilizar a seguinte fórmula:

SubitForm(FormularioPedidos);;ResetForm(FormularioPedidos);;Navigate(Capa)

Com essa fórmula nós vamos enviar o formulário (lembrando de colocar o nome que você deu a ele no Power Apps). Depois vamos resetar o formulário e por fim vamos levar o usuário a tela inicial (que é chamada de Capa no nosso exemplo).

Essa é a visualização de teste do nosso aplicativo, então preenchemos as informações e clicamos em enviar para fazer o teste.

Com isso vamos ter o envio do formulário, a limpeza desse formulário e vamos levar o usuário para a página inicial.

Dentro do SharePoint você já consegue visualizar essas informações registradas!

Finalizamos essa aula por aqui, mas fica o desafio para você criar a próxima tela de visualização de pedidos e já atribuir as ações aos botões para levar tanto para a tela de pedidos quanto para a tela de visualização!

Nas próximas aulas vamos dar continuidade a construção da tela de visualização e depois de publicação do nosso aplicativo!

Etapa 3 — Tela para visualizar os pedidos

Você deve se lembrar que até o momento nós temos uma tela inicial com 2 botões (que ainda estão sem ação) e temos uma tela para o cadastro de pedidos.

Como nós vamos criar a tela para visualização de pedidos, nós já podemos clicar em Nova tela > Em branco e renomear essa tela.

Após criar a tela você já pode acrescentar aquele layout da tela do celular para ficar com o visual mais agradável.

Feito isso a nossa ideia agora é pegar as informações do SharePoint para que o usuário consiga visualizar dentro do aplicativo.

Então nós vamos até a guia Inserir, depois vamos até a seta para baixo (caso não apareça a opção ainda) e depois vamos clicar em Galeria.

Depois de selecionar a opção Galeria vamos escolher a opção Vertical. Com isso você já vai visualizar a sua galeria e já pode ajustá-la para ficar dentro do aplicativo.

Aqui ainda não temos nada porque ainda não fizemos a integração do SharePoint com o nosso aplicativo.

Você vai notar que já temos uma sugestão da nossa ListaPedidos, pois na aula anterior nós já vinculamos essa fonte de dados.

Após escolher a nossa fonte de dados, é possível notar que temos apenas a primeira informação de cada um dos pedidos. Isso quer dizer que vamos ter que ajustar para que as outras informações também apareçam!

Vamos selecionar a primeira imagem e abrir o menu lateral para Desativar a opção de Visível, assim vamos remover a visualização dessa imagem já que não temos nenhuma.

Em seguida vamos remover essas setas, pois vamos querer visualizar todas as informações logo de cara para facilitar a visualização.

Vamos fazer alguns ajustes no primeiro texto e já vamos acrescentar ícones também para melhorar a facilitar a visualização dos dados.

IMPORTANTE: Todas essas modificações precisam ser feitas no primeiro item, pois assim o programa vai replicar o que está sendo feito para todos os outros itens. Caso contrário você vai modificar apenas um deles.

Aqui você já consegue visualizar como está ficando nossa organização, mas ao selecionar o primeiro texto você vai notar que já temos um padrão na barra de fórmulas.

Então você já sabe como trazer uma informação, precisamos do termo ThisItem + o nome da coluna + Value.

Assim vamos trazer o valor daquele item específico para dentro da nossa galeria!

Com isso você pode copiar essa caixa de texto e fazer a alteração do nome da coluna para trazer as informações desejadas.

Só na parte do número da mesa e endereço é que vamos utilizar algo diferente, pois só vamos ter uma informação dessas sendo mostrada.

Com a função IF vamos conseguir verificar se um campo está em branco, se estiver vamos colocar a outra informação, caso contrário vamos colocar a própria informação.

Dessa forma sempre vamos ter uma informação preenchida no nosso campo de texto.

Só na parte de mesa, lá no final da nossa fórmula é que vamos fazer uma pequena alteração para que não apareça apenas o número da mesa, mas o texto Mesa + o número da mesa.

Então antes do último ThisItem, nós vamos acrescentar “Mesa “& dessa forma vamos inserir o texto mesa e depois vamos obter o número da mesa.

Vamos fazer esse mesmo procedimento quando formos colocar o valor do produto, para deixar o símbolo de real em evidência, assim não fica um número solto sem unidade.

Da só uma olhada como ficou depois das modificações, fica muito mais fácil de entender não é mesmo?

Esses ícones nós pegamos do próprio aplicativo na opção Inserir > Ícones! Depois vamos apenas atribuir uma ação ao botão de voltar e aos dois botões da nossa tela inicial.

Essas ações nós já vimos, então é só ajustar para deixar o nosso aplicativo todo integrado!

Feito isso você já pode começar a testar o aplicativo, então ao registrar os pedidos você vai notar que eles vão começar a aparecer na tela dos pedidos.

Na próxima aula vamos finalizar com a publicação do nosso aplicativo para que você consiga utilizar no seu celular ou tablet!

Etapa 4 — Publicando e compartilhando o aplicativo

Antes de fazer a publicação do nosso aplicativo nós vamos inserir um ícone de atualização para que possamos atualizar as informações da página de resumo de pedidos.

A parte de inserir ícones nós já vimos nas outras aulas, então basta apenas inserir, só que ainda temos que atribuir uma ação a esse botão.

Aqui o código é bem simples, basta utilizar o Refresh(ListaPedidos) que é o nome da nossa lista.

Outro ponto importante é informar ao aplicativo qual a página inicial em que ele vai abrir, pois pra você pode ser natural abrir na capa, mas precisamos informar isso ao aplicativo.

Por padrão ele já abre na ordem em que estão as suas telas, então se a capa já for a primeira está tudo certo, mas você pode clicar em App e na barra de fórmulas pode escolher qual delas você quer que apareça inicialmente.

Então pode colocar qualquer uma delas, assim não tem que ficar ajustando a sua ordem das telas, principalmente se tiver várias.

Agora nós vamos fazer a publicação do aplicativo, para isso vamos até a guia Arquivo depois vamos clicar em Salvar.

Assim que clicar em salvar a opção de Publicar ficará ativa, então já pode clicar nela para começarmos o processo de publicação.

Será mostrada uma janela falando onde o aplicativo será publicado, que é o domínio que você está com a sua conta. Depois basta clicar em Publicar esta versão.

Agora se você voltar na guia Arquivo, vai perceber que agora temos a opção de Compartilhar.

Feito isso você vai poder colocar o e-mail específico das pessoas que você quer compartilhar o aplicativo, ou pode escrever a palavra Todos, assim todas as pessoas desse domínio terão acesso ao aplicativo.

Aqui você pode definir se esse usuário vai poder fazer as edições dentro do seu aplicativo, ou se vai deixar apenas ele utilizar sem poder fazer nenhuma alteração.

Outro ponto MUITO IMPORTANTE é que a pessoa com a qual você está compartilhando precisa ter acesso aos dados, ou seja, as informações do SharePoint.

Se a pessoa não tiver o acesso você pode ir até o SharePoint e clicar na opção Compartilhar para que a pessoa consiga utilizar o aplicativo com a base de dados.

Pronto! Feito isso já temos o aplicativo publicado e compartilhado, agora você vai até a sua loja de aplicativos no seu celular para baixar o Power Apps.

Dentro de Todos os aplicativos você vai conseguir visualizar todos os aplicativos que têm ou que estão compartilhados com você.

Agora você já pode utilizar o seu aplicativo normalmente e já vai visualizar todas as informações que precisa, inclusive os novos pedidos que cadastrar pelo aplicativo.

IMPORTANTE: Só verifique se você ajustou a tela da sua galeria para ficar em toda a tela do celular, caso contrário você vai ter que rolar os pedidos, pois podem ficar cortados no meio da tela.

Conclusão

Com essas quatro etapas você tem um aplicativo de restaurante funcional no Power Apps: uma tela inicial organizada, o cadastro de pedidos, a visualização dos pedidos registrados e o app publicado e compartilhado com a equipe — tudo sem código. A partir daqui, dá para evoluir o aplicativo com novas telas, filtros e integrações conforme a necessidade do seu restaurante.

Perguntas frequentes

Hashtag Treinamentos

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

---

---