Escolha uma Página
Gerando QR Code para nosso app utilizando PowerApps e Google Chart API

Gerando QR Code para nosso app utilizando PowerApps e Google Chart API

por | 17 maio, 2019 | Dicas, Microsoft 365, PowerApps

Olá pessoal!

Hoje quero trazer para vocês uma dica rápida sobre como podemos utilizar a Google Chart API para gerar QR Codes gratuitamente para nós e utilizarmos esse QR Code em nossos aplicativos do PowerApps.

O cenário é basicamente termos um formulário, que ao preenchermos determinada informação, irá ser gerado um QR Code através da API do Google Chart e esse QR Code será mostrado em um controle de imagem na tela.

A partir desse exemplo, podemos criar outras ramificações e usar por exemplo o Microsoft Flow para gerar o arquivo físico desse QR Code para ser salvo em algum banco de dados ou biblioteca de imagens e por ai vai. Nesse exemplo faremos de uma forma simplificada para mostrar o conceito.

Vamos lá!

Google Chart API

 

O Google Chart API nada mais é que um enpoint (uma URL) em que você pode passar alguns parâmetros e ela retornará um QR Code gerado, que você usar para requisitar os bytes para fazer o upload dele em algum local ou simples utilizar a sua url como destino final para a imagem.

Para fazer o uso, você basicamente precisa requisitar a seguinte URL:

https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Douglas Romão

O parâmetro chs é o que você irá utilizar para determinar o tamanho do seu QR Code e o parâmetro chl é o que você irá utilizar para determinar qual o valor que seu QR Code irá ter.

Nesse meu exemplo acima, o QR code a ser gerado ficaria mais ou menos assim:

Simples, não!?

Vamos agora então aplicar esse código em nosso app no PowerApps. Abra o PowerApps studio e, em seu app, vamos adicionar um Text box.

No menu superior, procure por Insert (Inserir) > Text, e adicione um campo de texto:

Vamos usar esse campo de texto para gerar o valor do nosso QR Code.

Agora, vamos adicionar um Botão:

Agora, vamos adicionar um controle de Imagem, ela servirá para vermos o resultado final do QR Code gerado:

Pronto, agora basta utilizarmos o botão de Gerar QR Code para montar a URL do Google Chart API recuperando o valor do label.

Selecione o botão, vá na propriedade OnSelect, e na barra de fórmulas, digite a seguinte fórmula:

Set(VarURLQRCode, Concatenate("https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=", TextInput1.Text))
 

O que essa fórmula está fazendo?

Basicamente, estamos utilizando o Set para criar uma variável chamada de VarURLQRCode que irá conter a Url do Google Chart API concatenando o valor da Url que eu mencionei mais acima e alterando o parâmetro chl para utilizar o valor que for digitado no campo textbox que adicionamos na tela.

Com isso, o resultado final será que quando clicarmos no botão, alteraremos o valor dessa variável montando a Url do Google Chart API com o valor digitado no campo.

Agora só precisamos alterar a propriedade Image do controle de imagem para utilizar a Url salva na variável VarURLQRCode que acabamos de criar, selecione o controle de imagem, vá na propriedade Image, e na barra de fórmulas, digite VarURLQRCode:

Pronto! Basta rodar sua aplicação, digitar algo no campo e clicar no botão:

Segue um GIF do teste em funcionamento aqui também:

Espero que tenham gostado, utilizem cada vez mais isso para trazer mais resultado e poder aos seus aplicativos e até a próxima!

Coletando assinaturas em um aplicativo PowerApps

Coletando assinaturas em um aplicativo PowerApps

por | 17 maio, 2019 | Dicas, Microsoft 365, PowerApps

Olá pessoal!

No post de hoje vamos aprender como podemos colocar um recurso bem interessante em nossos aplicativos do PowerApps para deixá-los preparados para receber assinaturas, podendo utilizar isso no caso de um fluxo de aprovação ou algo do tipo.

Para isso vamos utilizar um controle bem interessante chamado de “Pen input” ou “Caneta” dentro do PowerApps.

Dentro do seu aplicativo, vá no menu Insert > Text > Pen input

Esse é um recurso muito interessante por que ele permite que capturemos entradas no formato de caneta para nossos aplicativos e com isso poderíamos utilizar em um tablet ou celular como forma de captura de assinatura utilizando o touch screen desses dispositivos.

Ao adicioná-lo ao seu aplicativo, você verá um controle como o abaixo:

A caixa branca é onde o conteúdo será escrito (ou desenhado) e temos alguns controles adicionais também:

Caneta — Esse é o controle que quando selecionado permite que o usuário desenhe na área em branco;

Borracha — Quando esse controle está selecionado, você pode apagar o conteúdo na área em branco, “passando” a borracha no que você desejar apagar;

Limpar — Ao clicar nesse botão, todo o conteúdo da área em branco será apagado;

Esspessura — Ao clicar nesse controle você pode selecionar a espessura da caneta a ser utilizada na área em branco;

Cor da Caneta — Aqui você consegue selecionar qual cor deseja que essa caneta tenha ao preencher a área em branco;

*Lembrando que você pode desabilitar essa barra de controles, bastando alterar para false a propriedade “Show Controls”

Como tratar o conteúdo de resultado desse controle?

 

Basicamente esse controle retorna uma imagem para gravarmos na nossa base de dados e você pode recuperar as informações pela propriedade Image desse controle.

Para testar, coloquei um controle Image na tela, e o source dele coloquei como sendo a propriedade Image do meu controle Pen:

O resultado será esse:

Legal, não é?

Espero que tenham gostado e que isso sirva de alguma forma para ajudá-los a adicionar mais recursos aos seus aplicativos de negócio no PowerApps.

Fique ligado também no meu canal que em breve teremos um video explicando passo a passo como fazer isso 🙂

http://www.youtube.com/douglasromao

Até a próxima!

Enviando notificações push para meus aplicativos no Power Apps usando Power Automate

Enviando notificações push para meus aplicativos no Power Apps usando Power Automate

por | 17 abr, 2019 | Microsoft 365, PowerApps, PowerBI

Olá Pessoal! Depois de um tempo sem conseguir postar (desculpas por isso 😦 ), venho trazer um post para vocês sobre como podemos enviar mensagens de push para um aplicativo no Microsoft Power Apps utilizando o Microsoft Power Automate para isso.

Um cenário muito bom para utilizarmos isso poderia ser quando precisamos enviar algum tipo de notificação para nossos usuários sobre alguma atividade que eles tem que desempenhar ou como resultado de alguma ação que foi solicitada e está acontecendo no background, após ela ser concluída.

No exemplo que quero demonstrar, vamos criar uma funcionalidade no SharePoint para que quando criarmos uma nova “Mensagem de push”, será enviada diretamente para nosso aplicativo.

 

Power Apps

 

A primeira coisa a fazermos é criarmos o nosso aplicativo no PowerApps, vamos criar um aplicativo simples só para testarmos:

Abra http://web.powerapps.com;

 

 

No menu esquerdo, vá em Apps;

 

 

No menu superior, vá em Create an app > Canvas;

 

 

Vamos criar uma app para celular começando do zero:

 

 

Por enquanto essa nossa App não precisa ter nada, então vamos no menu File > Save:

 

 

Pronto, aplicativo no PowerApps criado.

 

Microsoft SharePoint

 

Agora, vamos criar nossa base de dados, a aplicação que será responsável por criar o item de notificação de push para nosso aplicativo, nesse caso utilizaremos o SharePoint, mas esse é só um exemplo 🙂

Abra um portal SharePoint que você queira utilizar, no meu caso tenho um site no SharePoint de desenvolvimento.

 

 

Vamos criar uma nova Lista no SharePoint para ser o local onde nossas notificações de push serão criadas para serem enviadas, vá no menu New > List:

 

 

Vamos criar uma lista chamada Notificações de push:

 

 

Vamos usar a coluna Title padrão do SharePoint para ser a mensagem a ser enviada e vamos criar uma nova coluna para o usuário selecionar para quem essa mensagem de push deve ser enviada, clique em Add column > Person:

 

 

Vamos dar o nome de Para Quem? e vamos salvar:

 

 

Pronto, nosso SharePoint está pronto! Ao criar a lista já vamos ter as telas de criação, edição e remoção automaticamente — SharePoint é fera nisso! então nossa aplicação de entrada de dados está pronta, agora é irmos para o Flow e integrarmos tudo isso.

 

Power Automate

 

Agora, abra http://flow.microsoft.com;

 

 

Vá em My Flows:

 

 

 Vamos criar um fluxo do zero, clique em New > Create from blank:

 

 

Vamos utilizar um dos triggers mais utilizados do Flow, o trigger “When an item is created” do SharePoint, ou seja, sempre que um novo item for criado em determinada lista, o Fluxo irá começar:

 

 

 

Vamos preencher as informações do trigger, selecione o site onde você criou a lista de Notificações de Push e também a lista:

 

 

 

 

Vamos adicionar um novo step que será executado logo após o fluxo iniciar, clique em New step:

 

 

Procure por “PowerApps”:

Rolando a página, você encontrará uma ação chamada “Send push notification”, ela está em preview ainda mas já conseguimos utilizá-la e é muito boa! Basta clicar na ação:

Uma informação importante: Infelizmente (ou felizmente) esse é um recurso Premium, então caso você não tenha licença premium ele irá te informar:

 

 

Caso sua conta esteja ok, você terá que configurar a ação de envio do push. Basicamente você tem que dar um nome para a Conexão (o que você quiser) e adicionar a url do seu aplicativo no PowerApps:

 

 

Para encontrar a Url do seu aplicativo, basta voltar para o PowerApps (https://web.powerapps.com/home ) > Apps;

 

 

Clique nos três pontos ao lado do seu aplicativo, e vá em Details:

 

 

Basta copiar o valor da url em Web Link e cole no Flow:

 

 

Clique em Create:

 

 

Agora você precisará configurar o envio da notificação:

 

 

  • Open App — parametrização para dizermos se a mensagem será exibida somente se o aplicativo estiver aberto ou se será exibida também se a app estiver fechada no celular do usuário (o padrão é mostrar em ambos)
  • Parameters — algum parâmetro que queiramos enviar, no nosso exemplo não utlizaremos isso;

Pronto, salve seu fluxo:

 

 

Estamos com tudo pronto! agora abra o aplicativo do PowerApps no seu celular, e faça login com a conta que configurou seu aplicativo, gravei um GIF rápido mostrando como testamos a aplicação (estou fazendo mirror do meu celular para demonstrar):

 

 

Pronto! Espero que tenham gostado, em breve teremos video sobre esse assunto e contem nos comentários sobre as experiências de vocês no uso desse recurso.

Até a próxima!

O que é o Microsoft Graph?

O que é o Microsoft Graph?

por | 16 ago, 2018 | API, Microsoft 365, Microsoft Graph

Recentemente fiz uma palestra na comunidade do Caqui Coders sobre o assunto e gostaria de compartilhar aqui com vocês um pouco sobre esse produto interessantíssimo da Microsoft. (Se quiserem ver o vídeo da palestra, vou deixar o link abaixo)

https://www.youtube.com/watch?v=zhzs3mw8hDk

O Microsoft Graph é um produto da Microsoft inteiramente ligado à plataforma do Office 365 e responsável por disponibilizar uma API unificada para consumo de dados dos demais produtos do Office 365.

It’s all about Conectar os produtos da plataforma! Ok, mas qual a grande sacada do Graph?

O grande ponto do Graph é que você pode criar uma autenticação e segurança única e consumir dados de todos os produtos do Office 365 de forma única e padronizada, sem precisar criar uma aplicação para cada tipo de dado que você deseja, assim, você consegue facilmente criar integrações robustas entre sua aplicação e os produtos do Office 365.

Os resultado obtidos nas chamadas também são padronizados, utilizando JSON, assim podemos facilmente estruturar nossas aplicações para trabalhar com esses dados.

Autenticação? Segurança?

Autenticação para chamadas da API do Graph é feita através de Token/Refresh Token utilizando o OAuth como modelo padrão, ou seja, você tem um modelo padronizado e seguro para solicitar tokens de autorização e utilizá-los.

Para saber mais sobre o OAuth, clique aqui e em breve vou postar como criar uma aplicação utilizando esse modelo de autenticação, então fique ligado.

E como o Graph funciona na prática?

Na prática, temos a url de uma API com vários endpoints que podemos fazer chamada para requisitar dados ou ações dentro do nosso Office 365, como por exemplo:

Solicitar informações sobre o meu usuário:
https://graph.microsoft.com/v1.0/me

A url acima é um endpoint para requisições GET que você pode utilizar para recuperar os dados do usuário atual. O resultado é um JSON estruturado com essa informação:

A referência completa da API do graph você pode encontrar aqui:
https://developer.microsoft.com/en-us/graph/docs/concepts/v1-overview

No site acima você tem todos os endpoints, parâmetros de entrada e saída e você consegue ver tudo que é possível fazer em termos de integração com essa plataforma incrível.

Como começar a trabalhar com o Graph?

Meu conselho para você que deseja entender melhor como funciona o Graph, além de olhar na referência da API, é utilizar o Graph Explorer, site da Microsoft que permite você testar todos os endpoints logado com sua conta da Microsoft e obtendo os resultados de lá, assim, você só precisa implementar depois a mesma chamada no seu código.

Para acessar o Graph Explorer, basta acessar esse site:
https://developer.microsoft.com/en-us/graph/graph-explorer

Espero que tenha ajudado e fiquem ligados que em breve teremos mais conteúdos sobre integrações com o Office 365 através do Microsoft Graph.

Até a próxima!