DEV Community: Thiago Novato

Kahoot - Uma ferramenta de interatividade

Thiago Novato — Thu, 01 Jul 2021 14:17:18 +0000

Fala Dev! Tudo beleza? Então, hoje venho apresentar para vocês um site que oferece um serviço incrível! A interatividade com pessoas! E estas pessoas podem ser sua família, seu time do trabalho, seus amigos, colegas de sala, até os parceiros de bar, clube da Luluzinha etc! É muito legal!

São vários exemplos que podemos usar e vou tentar retratar alguns aqui:

Imagine que trabalha em uma squad de uma empresa e você queira fazer uma dinâmica com todos do time para engajar as pessoas, testar conhecimento ou até mesmo implemetar alguma tática Agilista com perguntas do tipo "Essa sprint foi boa", "Essa sprint foi ruim", "Qual foi o problema dessa sprint". O Kahoot! faz iso de uma forma incrível, através do site totalmente dinâmico.

Neste exemplo, o Agilista cadastra todas as perguntas no painel e seleciona o tipo da pergunta (pode ser quiz, true/false, quiz, quadro aberto etc).

Log em seguida, ao dar start no jogo, cada participante também entra no mesmo site e entra jogo informando o código PIN (que é gerado ao dar start no jogo)

Quando um usuário entra, seu nome aparece na tela para todos.

Que comece o jogo!

Ao dar start, as perguntas são lançadas na tela principal, onde o participante deverá pressionar no botão correspondente à resposta correta.

Se ele responde corretamente, ele ganha ponto!

E aí a dinâmica acontece! É um jogo envolvente, que instiga a competividade colaborativa de uma forma muito divertida! O som ambiente é muito legal também!

Dei o exemplo em uma squad em time de desenvolvimento, mas imagine agora usar como "Jogo da Verdade", amplamente jogado pelos adolescentes dos anos 90/2000? Neste momento de pandemia com isolamento social, esta ferramenta pode ser bastante útil para conectar pessoas! Pense por exemplo um jogo do "copo cheio" entre os amigos de bar, ou reunião de final de ano com família e parentes com pergunta do tipo "Quem come mais na família?" ou "Quem é o mais velho, Fulano ou Ciclano?".

Agora, caso não queira criar para usar em seu ambiente, o Kahoot! também permite que você entre em jogos que já estão em andamento. Muito bom quando você está sozinho e quer se divertir um pouco. Na Sessão Discovery é possível fazer buscas por categorias e simplesmente entrar e começar a jogar. Há várias categorias, como o famoso jogo Trívia, Social, Disney, ciênia e tecnologia, filmes, músicas entre outros diversos temas.

Acesse aqui o site Kahoot!.

3 aplicativos que todo Dev deve conhecer (parte 1)

Thiago Novato — Mon, 28 Jun 2021 12:53:05 +0000

Fala Dev, beleza? Sabemos que existem dezenas de aplicativos que auxiliam a produtividade do desenvolvedor. Já tive a oportunidade de experimentar dezenas delas, mas neste post vou trazer algumas principais que me ajudaram bastante em meus projetos.

Insomnia / Postman

Se você ainda não trabalhou com APIs, muito provavelmente uma dia irá, pois é a principal forma de comunicação entre backend e frontend/mobile e integração com sistemas terceiros. Claro, existe também os microsserviços, mas vamos deixar isso para outro post.

Vamos supor que você esteja desenvolvendo uma API REST para sua aplicação, você pode usar Javascript com Node puro (express), algum framework como AdonisJS/NestJS, ou até mesmo em outras linguagens tão famosas (C#, Python etc). Independente da linguagem ou framework que você usar, é importante ter uma ferramenta que permita você testar de forma rápida e intuitiva. O Insomnia e Postman sem dúvidas vão te ajudar nisso.

Em ambos, é possível criar Workspaces, que é uma forma de organizar seu ambiente, dividindo todo o seu conteúdo por empresa, cliente ou projeto.

Uma coisa que gosto bastante de ambos é que, baseado no Endpoint que você está construindo, eles te dão exemplo de código (baseado na sua linguagem de programação) para usar na sua aplicação.

Insomnia

Postman

Mais um ponto interessante é o suporte a multi-protocolos, sendo possível usar não somente REST, mas também SOAP, GraphQL e GRPC.

Acesse aqui o site do Insomnia e aqui o do Postman

DevDocs

Vamos supor que você está ecrevendo um método em JavaScript onde deve-se iterar um array para achar um determinado valor. Alguns fariam da seguinte forma:

const result = array.map(item => {
   if (item === 'oQueProcura') {
      return item
   }
}

No exemplo acima, ele vai testar cada objeto do array, e se a condição for true, irá retornar o item.

Errado não está, mas existe um método específico para isso, como find.

const result = array.find(item => item === 'oQueProcura')

Usando find, você tem ganho de performance, e você só irá sentir isso quando o array for maior.

Como eu sei? Consultando o DevDocs. O DevDocs é uma biblioteca completa que mostra praticamente todos os métodos de uma linguagem e sua forma de usar. Acreidto que eles conseguiram inserir todas as linguagens existentes! Portanto, caso tenha dúvida de como usar um método na sua lingugagem, conte com o DevDocs. Ele é incrível!

Whimsical

Whimsical é um conjunto de vária ferramentas que vão te auxiliar na construção do seu projeto.

Nele é possível fazer documentação do seu projeto utilizando o Docs. Há várias funcionalidades que vão auxiliar, como atalhos em Markdown e opções de arrastar/soltar, tudo isso para que você tenha uma melhor experiência na escrita de sua documentação.

A ferramenta de desenho de fluxogramas é muito prática e intuitiva, sendo possível personalizar facilmente seus artefatos e utilizar o arrasta/solta.

Sabe quando você precisa iniciar o desenvolvimento de telas do seu app, mas não tem nem noção de como vai ficar? A ferramenta de Wireframe vai te ajuda na construção da sua tela através de elementos configuráveis, como botões, entradas, caixas de seleção entre outros.

Se você possuim uma ideia de projeto mas está com dificuldade em definir e organizar as regras de negócio, os Mapas Mentais vai te ajudar. Aqui é possível diagramar facilmente utilizando o arrasta/solta e personalizando de diversas formas.

E depois de estar com sua documentação pronta, wireframe aprovado e a ideia bem formatada, agora é colocar em produção, e eu aconselho o uso do Kanban para organizar suas tasks. Para isso, o Stick Notes vai ajudar bastante, permitindo atribuir para uma pessoa, controlar e gerenciar através de gráficos e relatórios. Bastante intuitivo.

Acesse aqui o site do Whimsical.

Firebase - Uma alternativa segura, simples e confiável

Thiago Novato — Tue, 02 Feb 2021 16:04:20 +0000

Clientes mais exigentes, mercado mais acirrado e tempo mais curto são questões que exigem um desdobramento muito maior de um desenvolvedor/empresa para entregar resultados. E atento à estas necessidades, surgem diversas soluções que contribuem com a vida das pessoas envolvidas e com as respectivas entregas aos clientes. Vamos falar um pouco sobre o Firebase, um complexo criado e mantido pelo Google, de forma dinâmica e bastante prática com um caso real.
Este artigo é um desdobramento de um trabalho realizado por Daniel Patrício, Carlos Paludetto e Thiago Novato, que serviu para apresentação interna na empresa WA Project.

O que é o Firebase

É um complexo de ferramentas disponíveis para facilitar o desenvolvimento de aplicações web e/ou mobile, muito prática e intuitiva.

Quem está usando?

Grandes empresas já utilizam em seus projetos (The New York Times, The Economist, Alibaba.com, todoist etc). É possível ver alguns cases de sucesso aqui

Principais funções

Dentre várias funções disponíveis no Firebase, iremos focar nas mais utilizadas em nosso projeto prático. São elas:

Authentication: O sistema de autenticação do Firebase permite habilitar em sua aplicação diversas formas de autenticar seu usuário, desde um simples login/senha ou até mesmo com a utilização dos principais serviços de autenticação de terceiros, como o próprio Google, Facebook, Twitter, GitHub, Microsoft, Apple entre outros. É possível também personalizar um template SMS para validação de usuário, template de email para criação/recuperação de senha e confirmação de número e email.

Cloud Firestore: Banco de Dados NoSql de leitura e escrita rápida, permitindo múltiplas conexões de usuários e criação de regras de acesso para melhora a segurança dos dados. Permite a sincronização dos dados em tempo real com todos os dispositivos conectados.

Cloud Functions: Permite executar código de back-end em Javascript e Typescript sem a necessidade de construir um servidor.

Hosting: Serviço de hospedagem rápida e segura para aplicativos web, com conteúdo estáticos, dinâmicos e microsserviços. Altamente escalável.

Cloud Storage: Armazenamento e compartilhamento de arquivos ou conteúdos gerados pelos próprios usuários.

Caso prático

Vamos criar um aplicativo de Chat, baseado nos principais serviços do Firebase

Criando o projeto no Firebase

Acesse http://firebase.google.com, entre com sua conta Google (é obrigatório) e crie um novo projeto
Insira o nome do seu projeto, aceite os termos e clique em continuar
Clique em WEB para registrar seu APP, inserindo um apelido.
Ao final, será gerado um objeto de configuração do Firebase, onde usaremos ele no projeto React.

Criando o projeto React

Agora vamos iniciar o projeto React e logo sem seguida vamos instalar as bibliotecas Firebase e Formik para gerenciar nossos formulários. Vamos partir do princípio que seu ambiente de desenvolvimento esteja configurado corretamente.

npx create-react-app firebase-chat-wa
cd firebase-chat-wa
yarn add firebase formik

Após a instalação, vamos abrir o projeto no VS Code

code ./

Vamos criar algumas pastas e arquivos. No diretório "src/services", criaremos um serviço "auth.ts" com as seguintes funções:

Depois usaremos esta funções na tela de Login, sendo uma no onSubmit do formulário caso queira autenticar seu usuário com login/senha, e as demais diretamente em buttons, como o "loginWithGoogle()" para autenticação Google ou "loginWithGitHub()" para autenticação via GitHub.

Essa é a tela de Login

Essa é a tela de cadastro (para uso de autenticação com login/senha)

Uma vez autenticado, é redirecionado para esta tela principal

No diretório "src/services", criaremos o serviço "cloudFirestore.ts" com o seguinte conteúdo, responsável por enviar as mensagens (salvando no banco), buscar uma determinada mensagem e listar todo o chat.

Usaremos a função de listar o chat no useEffect da página principal

O campo de texto para enviar as mensagens está em um formulário do Formik, cujo onSubmit é:

Toda vez que uma mensagem é enviada, é feito um registro do Firestore, e pelo fato do banco ser real time, imediatamente é atualizado para todos os usuários conectados no chat, atualizando quase que instantaneamente a tela com a nova mensagem enviada.

O código completo do projeto pode ser acessado aqui.