search

practice-uffs / app-practice

Aplicativo móvel do programa que permite que usuários usufruam das tecnologias do PRACTICE
MIT License
6 stars 10 forks source link

Criar estrutura de conversa na tela Ambiente (E001-A) #41

Closed Dovyski closed 4 years ago

Dovyski commented 4 years ago

Tela: E001-A

Vamos iniciar os trabalhos para que a tela de ambiente comece a ficar funcional. Essa tela tem o objetivo de entregar informações úteis para o contexto no qual o usuário está: se está na biblioteca, mostra informações de locações; se está em um evento, mostra quiz de perguntas do palestrante; se está em aula, mostra opções sobre como o usuário está se sentindo.

O objetivo dessa issue é integrar na tela de ambiente a interface do botui. Depois de integrado, fazer esse exemplo do botui funcionar na tela de ambiente do app. Se tudo der certo, o usuário abrirá a tela de ambiente no app practice e poderá interagir com esse thermostat-bot do exemplo.

Esse exemplo é importante porque ele tem interação "vai-e-vem" entre usuário e contexto. No futuro, teremos várias desse tipo.

andrewmsilva commented 4 years ago

Enquanto estudava a documentação do BotUI, reparei que a integração com ele é feita a partir do Vue. Daí me veio o questionamento: já que usamos o Framework7 Core (que tem várias limitações), porque não integramos o Vue ao app todo? Quais são as implicações?

Dovyski commented 4 years ago

Eu gosto da ideia de usar Vue no app todo, mas acho que nesse momento é uma complexidade desnecessária. Podemos integrar o Vue nessa tela de conversa como um passo inicial.

No futuro, vamos integrando em outras áreas. Que tal?

andrewmsilva commented 4 years ago

Bom, como eu nunca trabalhei com Vue, estou tendo dificuldade para integrar o BotUI. Então eu decidi implementar algo que usasse um conceito parecido só pra termos algo meio pronto até que eu conseguisse integrar o BotUI (ou talvez nem integre caso gostem do que eu fiz).

Eu fiz um conceito de "pins" que são mostrados de acordo com o ambiente que a pessoa está. Semelhante ao BotUI, cada pin tem um tipo, mas como fui eu quem fiz, a variedade é bem maior: text para textos simples, embed para iframes de todo tipo (vídeos do Youtube, jogos feitos por alunos, etc) e actions para a realização de ações, incluindo formulários customizáveis com inputs text, email, number, tel, url, date, datetime-local e select. É claro, poderiam haver mais tipos de pins (imagens, arquivos, links externos, etc), mas o que eu fiz foi só uma versão piloto para que a tela não ficasse em branco.

Eis um GIF para melhor visualização: env-practice

Gostaria de receber um feedback sobre o que eu fiz e se devo prosseguir com a integração do BotUI.

Obs: Não se sintam acanhados de preferirem o BotUI, porque o que eu fiz foi num formato que pode ser facilmente adequado ao BotUI assim que ele for integrado, pois eu dei uma boa estudada na documentação dele (clique aqui para ver o JSON).

Dovyski commented 4 years ago

Eu achei excelente essa tua forma de implementação, inclusive muito superior ao BotUI. Voto para seguirmos com a implementação (e flexibilidade proposta pelo) @andrewmsilva. No futuro, podemos implementar a UI do próprio BotUI dentro desse estrutura proposta.