The document discusses prototyping for hackathons. It recommends focusing prototyping efforts on validating ideas by building minimum functional prototypes that can be tested with users. Various tools are presented for rapid prototyping of web, mobile, IoT, and data analytics solutions. Prototyping is positioned as a way to get early feedback, test hypotheses, and reduce time to iterate on solutions before committing to more complex development.

1. PROTOTIPAÇÃO EM
HACKATHONS
Alvaro Viebrantz
Google Developer Expe
rt
for IoT, Mentor Google for Sta
rt
ups and
Founding Engineer at Golioth.io
aviebrantz.com
@alvaroviebrantz

2. Prototipação
Como
construir ?
Ferramentas
O que vamos ver hoje ?

3. Prototipação

4. Ciclo Inicial no Hackathon
Problema Idéia
Propor
Solução

5. Protótipo
Modelo de fluxo e funcionamento do projeto
• Mínimo para poder testar a idéia/solução
• Demonstrar funcionalidade
• Não precisa ser perfeito

6. Objetivo do Protótipo
Gastar o mínimo de esforço possível pra validar a idéia
• Validar hipóteses
• Testar se a entrega é efetiva ao cliente
• Reduzir ciclo de entrega e feedback
• Vender a idéia
• Falhar rápido

7. Ciclo de Prototipação
Validar que a solução proposta trás valor ao cliente
Problema Solução Testar
pivotar / adequar solução
melhorias

8. Protótipo e MVP em Hackathon
são muito próximos

9. Como construir

10. De
fi
na suas funcionalidades e
fl
uxos
Um dos passos mais importantes
• O problema que quer ser resolvido tem que estar claro
• Qual a solução proposta ?
• Quais os inputs ?
• Passos que o usuário precisa fazer
• O que ele precisa informar
• Quais os outputs ?
• Qual valor vai ser gerado
• O que vai ser mostrado

11. Fake until you make it

12. Exemplo de aplicativo de taxi
Como foi o protótipo para validação
Form no site
pedindo taxi
Email para os
founders
Ligar manual
pro taxista

13. Prototipos/MVP de Startups
Facebook, Twitter e outros começaram assim também

14. Wireframes
Protótipos de baixa fidelidade

15. Protótipos interativos
Protótipos que pode ser testado com usuários

16. Aplicação funcional minima
Projeto rodando com funções mínimas

17. Ferramentas
(algumas partes são opcionais)

18. Protótipos visuais
Todo o time pode usar
• Balsamiq mockups
• InVision
• Figma

19. Marketing
Contato constante com os clientes
• Emails
• Mailchimp / Sendgrid
• Automações
• Zapier
• Landing Page
• Form capturando leads
• Informações da startup
• Frontend “normal”
• Ou Wix, Squarespace, etc

20. Feedback e Interação
Contato constante com os clientes
• Capturar feedbacks
• Canny
• Zendesk
• Intercom
• Analisar comportamento
• Hotjar

21. Caminhos para prototipação

22. Depende da solução
Diferentes tipos de produtos tem níveis diferentes de protótipos
• Pensando nos problemas apresentados aqui no hackathon
• Falta de compartilhamento de informação entre produtores rurais
• Subjetividade na classificação de grãos
• Falta de automatização da coleta de informação do campo
• Falta de segurança nas fazendas
• Baixa precisão do manejo de pragas, doenças e daninhas nas lavouras
• Baixa acurácia na previsão do tempo na fazenda
• Falta de conectividade na fazenda Capacitação de mãos de obra

23. Depende da solução
Diferentes tipos de produtos tem níveis diferentes de protótipos
• Sistema mais “tradicionais”
• Web, Desktop e Mobile
• Data Analytics
• Machine Learning
• Internet das Coisas

24. Dica geral
Ainda mais em um hackathon envolvendo programação
• Usem o máximo de ferramentas que vocês já
conhecem
• Mas é uma ótima oportunidade de aprender
coisas novas tbm

25. Aplicações “tradicionais”

26. Hackathon Starters
https://github.com/search?q=hackathon+starter

27. Web e Mobile
Facil de mostrar pra usuário não técnicos
• Web e Mobile
• Se possível tentem focar só no frontend
• E também usando Web Technologies (é uma dica, não uma regra)
• Mais rápido e fácil de fazer algo multi plataforma
• Ionic, React Native, PWA
• Use um Backend as a Service
• Hasura
• AWS App Sync
• Firebase
• Airtable ⭐

28. Web e Mobile
Facil de mostrar pra usuário não técnicos
• Ou algum framework que agilize o desenvolvimento
• Alguns mais voltados para entrega rápida- Rails (Ruby), Laravel (PHP),
Django (Python), etc
• Sem opinião forte, faça você mesmo - Express (Node), Spring boot
(Java), Flask (Python)
• Use serviços gerenciados para funções “básicas” mas não triviais
• Autenticação - Auth0 / Firebase Auth / AWS Cognito
• Banco de dados
• Pagamentos - Stripe, PagSeguro, etc

29. Hospedagem em Geral
Dá pra fazer tudo em qualquer nuvem e todos tem Free Tiers interessantes
• Cloud Providers
• AWS
• Google Cloud / Firebase
• Azure
• Hosting sites
• Netlify
• Github Pages
• Firebase Hosting

30. Bancos de dados gerenciados
Opções grátis pra não se preocupar com isso
• Traditional DB
• Cockroachlabs.cloud - Postgres Compatible
• Planetscale - Vitess/MySQL
• MongoDB Atlas
• Data Warehouse e Big Data
• Google Cloud BigQuery / AWS Redshift / Snow
fl
ake
• Planilhas !!!
• Google Sheets
• Airtable

31. Data Analytics

32. Data Analytics
Transformação de dados, cruzamento de informações, obtenção de dados
• Web Scrapping
• Scrapy em Python
• Cheerio / Puppeteer em NodeJS
• Python e Jupyter notebooks
• Pandas 👑
• Google Colab para notebooks compartilhados no time
• Visualização de dados
• Vega, Altair, Seaborn, D3.jS, deck.gl, kepler.gl
• Power BI, Google Data Studio, Tableau

33. Machine Learning

34. Construindo o dataset
Geralmente a parte mais di
fi
cil de qualquer projeto de ML

35. Machine Learning
Ferramentas que podem ajudar
• Frameworks e Libs
• Tensor
fl
ow ⭐/ PyTorch / Sklearn
• Anotação de dados
• github.com/heartexlabs/awesome-data-labeling
• Ferramentas de AutoML
• Mobile - CreateML (iOS) / Firebase ML ( Android / iOS )
• Edge Impulse / GCP Auto ML / SuperAnnotate / Obviously AI / H2O.ai
• Cloud AI
• GCP Vision API, AWS Rekognition, Azure Cognitive Services
https://towardsdatascience.com/top-8-no-code-machine-learning-platforms-you-should-use-in-2020-1d1801300dd0

36. Teachables Machines
Construir modelos relativamente simples no Browser

37. Internet das Coisas

38. Internet das Coisas
Projetos batidos em hackathons
• “Vamos fazer um revolucionário Estação meteorológico de baixo
custo !!!”

39. Projetos
fi
nais de IoT em campo
Muitas preocupações extras por conta do ambiente ao ar livre
• Manufatura das placas ( PCB )
• Desenho da Placa / Solda / Montagem / Case
• Bateria / Consumo de Energia
• Conectividade
• Zigbee, Sigfox, LoRa, Cellular e mil outras opções
• Sensores industriais
• Mais precisos e duradouros
• Proteções para suportar um ambiente ao ar livre
• Chuva, Insetos, Sol / Calor, etc

40. 40
Produtos LoRa
Lista com vários fornecedores

41. Dicas para desenvolver projetos de IoT
Foquem no que fazer com os dados que os sensores vão prover
• Desenvolva um device simulado
• De
fi
ne os dados que ele vai capturar
• Temperatura, umidade, qualidade do ar, localização, etc
• Usar APIs de Clima, Imageamento Remoto ( NVDI ), Mapbox / Google
Maps API se for uma aplicação de Asset Tracking, etc
• OpenWeatherMap, Darksky, AirVisual API, etc
• Construir soluções em cima dos dados capturados
• De fato qual o valor gerado com a sua solução

42. Internet das Coisas +
Machine Learning Demo

43. 43

44. 44
Capturas dos dados
Captura via Web Bluetooth e envia para a platforma Edge Impulse

45. 45

46. 46

47. OBRIGADO!
AVIEBRANTZ.COM
Alvaro Viebrantz
Google Developer Expe
rt
for IoT and Founding Engineer at Golioth.io
aviebrantz.com
@alvaroviebrantz