Blog

Disclaimer: O objetivo deste post é tão simplesmente compartilhar o projeto que possa ser útil para alguém que está precisando ou quer aprender um pouco de Ionic. É um projeto feito em poucas horas, durante um hackathon, então não espere pelas melhores práticas. Para dúvidas mais complexas, entre em nosso grupo de Design e Programação, no Facebook.

No último final de semana (29 e 30 de Setembro de 2018), participei do Hackathon do Shopping Center Recife. Devido a um erro da desorganização, acabei ficando em um grupo que não haviam outras pessoas que tivessem ao menos noção de programação (enquanto havia grupo composto inteiro por pessoas que sabiam programar), de forma que acabei programando sozinho durante cerca de 20 horas. Por outro lado, o restante do meu time conseguiu me auxiliar fazendo a apresentação e com uma ideia que poderá ser muito valiosa para o projeto de algumas pessoas, que irei explicar abaixo.

O projeto

Diferente do que foi referido pelo edital do Shopping, que afirmava buscar uma solução de “relacionamento com o cliente”, o objetivo principal era encontrar uma forma de conseguir dados mais assertivos sem a necessidade direta de contatos com o lojista. Esses dados seriam analisados e entregues de forma a ajudar o Shopping a criar novas campanhas. Tudo sem diminuir faturamento.

Para isso, eu pensei que poderia desenvolver uma versão do aplicativo do Shopping, que já existe, e melhorar, otimizar, deixa-lo mais fluido e com mais opções. Inicialmente, pensei em integrar o Google Indoors, mas GPS não funciona corretamente no Shopping e o Indoors não está disponível por um tempo limitado. Algumas equipes até sugeriram algo parecido, na entrega, mas apenas sugestão, pois seria inviável descobrir a localização atual em ambiente tão contido apenas por triangulação. Enfim, pensei em envolver compartilhamento em mídia social também, para engajamento, etc.

No final, o projeto consistiu em uma nova versão do aplicativo, com um chatbot amigável, um clube de vantagens que armazena informações da nota fiscal (pelo QRCode) e a proposta de manipulação desses dados no backoffice, além de campanhas direcionadas pelo mesmo. Alguns dos outros grupos usaram propostas bem similares.

No fim, eu decidi que o principal seria apresentar os dados em um backoffice. Minha ideia inicial era realmente preparar um BI, ou o começo do que poderia ser um, usando os dados do aplicativo reformulado. Porém, os outros integrantes de minha equipe tiveram a ideia de criar um clube de vantagens que pegasse o código do QRCode do cliente, pegando assim dados bem mais específicos sem a necessidade de acordos com o lojista, em trocas de pontos que poderiam ser trocados por serviços do shopping ou de parceiros mais próximos (como o cinema), que admito ser melhor que a minha ideia original.

Se por um lado, eu decidi fazer algo que pudesse se tornar um BI (Business Intelligence), por outro, o tempo não foi favorável. Sendo o único desenvolvedor, eu fui obrigado a dividir meu tempo entre aplicativo, backoffice e banco. Logo, não esperem um código tão bem escrito. Lembre-se que é um projeto desenvolvido do zero em algumas poucas horas.

Tecnologias

Para agilizar o desenvolvimento e ainda poder ser algo demonstrável em tempo real direto no navegador (para exibir no telão), o projeto do app foi feito em Ionic 3, famoso framework Cordova para desenvolvimento de aplicações em vários dispositivos. Graças a isso, ainda conseguia testar em tempo real no Android e no iOS. Fiz o possível para implementar o máximo de funcionalidades possíveis.

Para o backoffice, entretanto, por questão principalmente de tempo, apostei no PHP e MySQL, não pela experiência em si, apesar de conhecer bem a linguagem, mas porque eu poderia simplesmente usar meu servidor de site comum e não ter que configurar um ambiente. Dessa forma, perdi menos tempo. Mesmo assim, só consegui fazer 20% do que eu planejei para essa parte.

Ionic

Usei e abusei da interface padrão, com poucas modificações e atualizações, observando sempre a documentação quanto ao uso dos componentes. Aqui cabe um outro disclaimer: apesar de já trabalhar há cerca de um ano com Phonegap/Cordova e já ter feito algumas brincadeiras nele, estou mexendo no Ionic há apenas duas semanas, então perdoe-me se eu estou usando alguma má prática em seu código (ao menos os nomes das páginas eu já adianto que estão bagunçadas).

Sabrina – A Chatbot

Sabrina foi o nome escolhido para a chatbot. Por quê? Sei lá, veio na cabeça. Basicamente ela usa Watson para poder realizar a conversa. Com algumas poucas diferenças, caso você queira saber mais como funciona essa parte de chatbot, consulte o outro artigo onde eu explico como criar um chatbot simples usando a ferramenta da IBM. Ainda resolvemos dar uma identidade para e os outros membros da equipe a treinaram para responder perguntas de forma a convidar as pessoas que não estão no shopping e ainda sugerir lojas em caso de perguntas menos específicas.

Obs. Abaixo, vai ter uma área de testes. Se você for testar em nosso site, lembre-se que usamos o plano de 30 dias grátis, então dependendo da data que você ler este artigo pode não funcionar. Também só tivemos tempo para responder uma série limitada de perguntas. E não treinamos a conversação mais complexa (apesar de que você vai encontrar no código trechos que mostra que estava sendo desenvolvido).

Clube de Vantagens

A parte do clube de vantagens visava o login fácil pelo Facebook (está implementado em beta no código, mas comentado, pois só funciona compilado). Através disso, pegaria o máximo de informações públicas possíveis, para entender os gostos do cliente. Claro que estou ciente que as novas políticas do Facebook exigem uma aprovação, mas isso não seria problemas para um dos maiores shoppings do Brasil.

Após esse login, entraria a opção de ver suas informações, compartilhar com amigos, através de um código promocional (que dá pontos), e que ainda daria alguns feedbacks gráficos para estimular uma ludificação. Os valores dados seriam sempre grandes, na margem mínima de 100 pontos para compras menores e 500 pontos para compras maiores. Essa quantidade foi pensado do ponto de vista de marketing, pois pontos maiores dão a sensação de que o retorno é maior, mesmo que a exigência para a conversão em um serviço ou produto fique na casa das dezenas dos milhares.

QR Code e NFCe

Por outro lado, havia a necessidade de ler o QRCode e acessar os dados de uma NFCe sem um certificado digital. O maior problema que enfrentamos é: como fazer isso através do servidor, se as Sefaz bloqueiam o cross-origin (ao menos a Sefaz de Pernambuco), retornando o erro “Cross-Origin Read Blocking (CORB) blocked cross-origin response“? Percebi que os outros grupos que envernizaram por esse lado tiveram esse problema e, até onde eu vi os códigos, ninguém realmente resolveu o problema. Então, me atentei que eu simplesmente poderia “enganar” o site da Sefaz para acreditar que eu na verdade sou um usuário direto do navegador. Como? Simplesmente declarando um cabeçalho como Firefox! O trecho fica assim (PHP):

$ch = curl_init();
//Selecionando URL
curl_setopt($ch, CURLOPT_URL, $urlMessage);
//O cabeçalho é importante para definir tipo de arquivo enviado
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
'Accept-Encoding: gzip, deflate',
'Accept-Language: en-US,en;q=0.5',
'Connection: keep-alive',
'SomeBull: BeingIgnored',
'User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:16.0) Gecko/20100101 Firefox/16.0'
));
//Habilitar método POST
curl_setopt($ch, CURLOPT_POST, 1);
//Capturar Retorno
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//Executar
$retorno = curl_exec($ch); 

 //Arquivo extrair.php

Obs. Eu não testei com NFCe de outros estados.

O resultado foi exatamente a XML da NFCe. E como entender e ler? Bem, para isso basta usar o DOM Document, mas se você quiser entender mais sobre como funciona esse processo de nota fiscal eletrônica, leia o artigo que eu escrevi anteriormente sobre o assunto.

Já o QRCode, o próprio Ionic tem uma solução para isso, e foi implementada, mas me deparei com um problema: Só funcionava corretamente no Android e iOS e eu precisava apresentar tudo no navegador. A solução? Encontrei uma biblioteca de Javascript puro que fazia a leitura do QRCode pela webcam. Então tive que aprender como integrar Javascript puro a um projeto Ionic. Nem foi tão difícil, está compreensível se você olhar a página do QRCode no projeto. O único problema é que a webcam não tem autofoco, então há uma margem curta para que seja lido corretamente o QRCode. Por conta disso, no navegador, pela webcam, eu só consegui ler os QRCodes que estavam sem amassados e bem nítidos. Aliás, testamos uma nota emitida em contingência e, por algum motivo, a URL do QRCode retornava chave inexistente (?).

Após ser lido, o QRCode retorna uma mensagem com o a pontuação que você efetivamente fez, e retorna também o valor da nota. Ainda envia os detalhes da nota para o backoffice.

Backoffice

O backoffice captura os dados e exibe para o usuário. No projeto, os gráficos que estão mostrados no dashboard não são reais, foram colocados manualmente, mas os que mostra as vendas é atualizado em tempo real assim que a pessoa coloca o QRCode. Os nomes dos compradores estão censurados no front, eu sei que deveria ser no back (aliás, já armazenado sem o nome), mas não tive tempo de pensar em segurança e já era 3 da manhã no momento que eu comecei a implementar isso.

Por conta disso, eu não tive como implementar tudo o que eu queria, de forma que tem mais exemplos do que efetivado.

O meu intuito era usar todos os dados capturados, inclusive o retorno da Sabrina (a chatbot) para criar índices de relevância de 0 a 100. Exemplo:

1. João, identificado como usuário J72, perguntou sobre compras de sapato a Sabrina, isso dá 1 ponto na subcategoria calçados para J72, pela intenção de compra.
2. Se J72 efetivamente comprar o sapato, ele receberá 2 pontos na subcategoria calçados, pela compra realizada.
3. O cruzamento entre a intenção e compra realizada dá ainda mais 3 pontos, na subcategoria calçados.
4. Ao todo o processo do usuário J72 resultaria em 5 pontos de relevância para o usuário J72, que seria somado aos seus outros pontos, caso já tivesse.
5. Quando atingir 70 pontos, na subcategoria calçados, esta será considerada como categoria de relevância para o usuário J72.

Com isso, a home, mostrada para o usuário J72 seria organizado de acordo com seus índices personalizados e campanhas direcionadas, direto pelo aplicativo e também por notificações, poderiam ser enviadas para os usuários do aplicativo, de acordo com suas relevâncias. Além de, claro, o resultado do acompanhamento dessa campanha.

Além disso, esses dados deveriam ser cruzados para sugerir a equipe de marketing, as melhores estratégias de acordo com o comportamento do grupo e em quais mídias seriam mais adequadas para investir em propaganda. Infelizmente, essa foi a parte que não deu tempo de desenvolver, pelos motivos supracitados. Mas, essa imagem, desenvolvida por outros membros da equipe, ajuda a ilustrar a lógica que seria aplicada para a criação do algoritmo. Vale lembrar que, as informações do Facebook, vinculados ao comportamento de compra, ajudaria e as conversas com a Sabrina e as bases de dados que o Shopping já possui, ajudariam a definir o comportamento do público.

Finalizando

Disponibilizei todo código desenvolvido, do backoffice e do projeto Ionic no Github, para caso você deseje experimentar ou apenas dar um olhada no código. Mas lembre-se que não vou fazer manutenção de nada, é apenas um exemplo para estudo:

Star

Entretanto, se você quiser apenas ver, testar o que foi demonstrado, você pode acessar o backoffice aqui, ou o aplicativo aqui. Caso abra o aplicativo em um desktop ou laptop, recomendo que você use o modo de device toolbar do Google Chome para visualizar corretamente -> Para isso, pressione CTRL+SHIFT+i (substitua ctrl, por command, no Mac) e clique no segundo ícone do canto superior esquerdo do console. Ou simplesmente veja o vídeo abaixo:

Por que não vencemos? Talvez por não ter tanto tempo para explicar o projeto, talvez por não ter encontrado uma boa forma de demonstrar, ou simplesmente porque não é realmente tão interessante. Mas, de qualquer forma, rendeu um post para o blog, para o qual pode ser útil para alguém que esteja aprendendo Ionic ou qualquer outro tema aqui relacionado. Lembre-se de entrar no grupo do Facebook para tirar mais dúvidas.

Obrigado para você que leu até aqui e obrigado a equipe que foi integrante desse projeto. Me siga no Twitter e Instagram e deixe seu like no Facebook.