Construindo extensões para o Google Chrome com a MEAN Stack

Apresentação feita na Node Conf Brazil 2016 em 05/07/2016

http://brazil.nodeconf.com/

Códigos disponíveis em: https://github.com/DiegoPinho/nodeconfbrazil2016

Transcript

1. Construindo extensões para o Google Chrome com a MEAN Stack Diego Martins de Pinho
2. Material desta Palestra Todo material apresentado poderá ser encontrado em: http://diegopinho.com.br/nodeconfbr
3. Agenda 1. Quem é esse cara palestrando? 2. Conhecimento necessário 3. Conhecendo o ecossistema do Google Chrome 4. E o que tem de MEAN nisso? 5. O que vamos construir hoje 6. O básico das extensões 7. Extensão: Hello World 8. Extensão: Clima Tempo 9. Extensão: Clima Tempo React Ver. 10. Como publicar sua extensão 11. Próximos passos 12. Outros links bacanas 13. Agradecimentos
4. Diego Martins de Pinho - 23 Anos Site pessoal: http://diegopinho.com.br • Bacharel em Ciência da Computação pela PUC-SP • Especialista em Gestão da TI pela FIAP • Programador desde 2013 • Ex-blogueiro: http://fuckyeaworld.com.br • Escreve artigos e ensina o que sabe no tempo livre • Entusiasta em programação para jogos e animação Quem é esse cara palestrando? @DiegoPinho
5. • Empresa no ramo da área da saúde. ◦ Desenvolve soluções web para: Hospitais, clínicas e laboratórios de todo país • Cargo: Scrum Master (Desenvolvedor) ◦ Responsável pelo projeto de portal de laudos da empresa Quem é esse cara palestrando? - Trabalho Tecnologias do dia a dia... http://dev.touchhealth.com.br/
6. Conhecimento necessário Já utilizamos HTML, CSS e Javascript para escrever nossas aplicações WEB… não seria ótimo se fosse somente isso o necessário para construir extensões? Spoiler alert. É somente necessário isso.
7. Conhecendo o Ecossistema do Google Chrome Aplicações/Jogos Temas Extensões https://chrome.google.com/webstore/
8. Alguns números... * Todas estas extensões estão na categoria “Escolhas do editor” na Chrome Web Store
9. E o que de MEAN nisso? Utilizamos frameworks e bibliotecas open source incríveis disponíveis na internet para desenvolver nossas aplicações WEB… não seria ótimo se pudéssemos utilizá-las também para construir nossas extensões? Spoiler alert. É possível.
10. O que vamos construir hoje Hello World Clima Tempo Hello World Objetivo: Estrutura básica de uma extensão do Google Chrome Objetivo: API’s básicas do Google Chrome Clima Tempo - React V. Objetivo: Como utilizar tecnologias web para construir uma extensão Ligeiramente Nublado 19ºC Ligeiramente Nublado 19ºC
11. O básico das extensões { manifest.json ícones (png) popup.html options.html Mais informações: https://developer.chrome.com/extensions/getstarted Normalmente uma extensão vai ter essa cara...
12. Content Security Policy (CSP) Então você acha bonito javascript inline? hmm... • Content Security Policy é um mecanismo de proteção contra código javacript malicioso (aquele 1% javascript safadão). • Política do Google Chrome por default: ◦ eval() e funções relacionadas são desabilitadas ◦ somente scripts e objetos locais são carregados ◦ javascript inline não funciona • Apesar das restrições, nas versões mais recentes, é possível deixar elas “mais flexíveis” Mais informações: https://goo.gl/fDxmZN
13. manifest.json manifest.json Mais informações: https://developer.chrome.com/extensions/manifest Possivelmente o arquivo mais importante da extensão. Possui informações como: nome, descrição, versão, ícones, permissões, opções, autor… É o arquivo utilizado pelo Chrome e a Chrome Web Store para interpretar a extensão.
14. manifest.json - browser_action Mais informações: https://developer.chrome.com/extensions/browserAction O browser_action define um ícone que fica posicionado ao lado da barra de endereços do Chrome. Além disse, define o título, badge e a página popup. ícone e popup ícone e título ícone e badge * todos os elementos da browser_action podem ser alterados através do uso das API’s do chrome.browserAction
15. icones.png icones.png Mais informações: https://developer.chrome.com/extensions/manifest Os ícones formam a identidade visual da extensão. Vários tamanhos são utilizados para diversas aplicações dentro do Chrome e da Chrome Web Store.
16. options.html Mais informações: https://developer.chrome.com/extensions/options options.html A página de opções permite que o usuário customize o comportamento e aparência da extensão. Uma vez fornecido, o Google Chrome cria um link para a página de opções automaticamente. * utilizamos a API storage.sync para gravar os dados e disponibilizá-los para todos os scripts e dispositivos.
17. Vamos criar nossa extensão Hello World... vamos tentar, né ¯\_(ツ)_/¯
18. O que vamos construir - Hello World ao clicar Descrição: Extensão que apresenta uma mensagem de “Hello World” quando se clica no ícone da extensão. Objetivo: Funcionamento básico de uma extensão do Google Chrome. Resources (ícone): https://goo.gl/4eCvM3
19. Passo a Passo - Hello World 1. Criar um diretório vazio 2. Criar os arquivos: manifest.json e index.html 3. Acertar as configurações no manifest.json 4. Criar um HTML com um <h1>Hello World</h1> 5. Carregar extensão no Chrome no modo Desenvolvedor 6. Torcer para dar certo :)
20. Vamos criar nossa extensão Clima Tempo... agora já complicou mais :s
21. O que vamos construir - Clima Tempo Descrição: Extensão que verifica o clima na região a partir da localização do usuário. Objetivo: Funcionamento de algumas API’s do Google Chrome. Resources (esqueleto): https://goo.gl/4eCvM3 http://vamostorcerparafuncionar.com.br http://vamostorcerparafuncionar.com.br Ligeiramente Nublado 19ºC ao clicar
22. O que precisamos fazer... - Clima Tempo 1. Precisamos checar de tempos em tempos a temperatura 2. Se a temperatura mudar, precisamos alterar o ícone na browser_action 3. Ao clicar no ícone, precisamos exibir a temperatura em Grau Celsius junto a sua descrição (ex: nublado) Importante lembrar: Os itens 1, 2 e 3 precisam trabalhar simultaneamente, ou seja, os itens 1 e 2 precisam ocorrer mesmo que não cliquemos no ícone.
23. Passo a Passo - Clima Tempo 1. Baixar o template no github 2. Criar o arquivo chamado background.js que irá: a. criar um alarme que monitora a temperatura a cada 10 minutos (usando as API’s do Google Chrome) b. usar a localização do usuário para fazer uma chamada para a API do Forecast c. alterar o ícone da browser_action de acordo com o resultado da API 3. Criar o arquivo popup.js que será responsável por: a. Ao abrir o popup.html, ele será invocado e enviará uma mensagem (usando as API’s do Google Chrome) para buscar a temperatura b. Irá exibir o resultado no popup (trocando os elementos por js) 4. Torcer ainda mais pra dar certo Mais Informações: • https://developer.chrome. com/extensions/alarms • https://developer.chrome. com/extensions/runtime • https://developer.forecast.io/
24. Agora vamos para a parte mais divertida... também relativamente mais difícil D: caso dê pau na hora de mostrar
25. Vamos falar um pouco sobre React.js • Biblioteca javascript criada pelo Facebook para construir interfaces • Diferentemente Backbone, Angular e Amber, se preocupa somente com a view ◦ Ou seja, não fornece nenhuma camada de service, controller, model, collection, routes e etc. • O React trabalha apenas com o conceito de componente que recebe propriedades, computa o estado e retorna uma representação virtual do DOM. Mais Informações: https://facebook.github.io/react/
26. O que vamos construir - Clima Tempo React Version Descrição: Extensão que verifica o clima na região a partir da localização do usuário. Objetivo: Adaptação da extensão anterior para utilizar tecnologias web atuais. Resources (esqueleto): https://goo.gl/4eCvM3 http://vamostorcerparafuncionar.com.br Ligeiramente Nublado 19ºC { Dois componentes: • Popup • Clima
27. O que vamos utilizar - Clima Tempo React Version • minifyify: https://github.com/ben-ng/minifyify • parallelshell: https://github.com/keithamus/parallelshell • watchify: https://github.com/substack/watchify • nodemon: http://nodemon.io/ • React: https://facebook.github.io/react/ • Babel: https://babeljs.io/ • Browserify: http://browserify.org/ • ECMA6: http://es6-features.org/
28. Como Funciona - Clima Tempo React Version clima_tempo_chrome… > tools * Os arquivos são monitorados e a cada alteração, gera um novo bundle.js (alteração nos componentes) e style.css (alteração de arquivos de css)
29. Passo a Passo - Clima Tempo React Version 1. Copiar o background.js para a pasta client > public > js 2. Criar dois componentes: Popup.jsx e Clima.jsx 3. Passar a lógica para a Popup.jsx de modo que ele atualize o Clima.jsx de acordo com a resposta da API do Forecast 4. Fazer uma reza das boas para não dar pau na demonstração :) Reza das boas
30. Usando a MEAN Stack - Clima Tempo React Version MEAN how to be Para exemplicar como usar a MEAN Stack, vamos alterar a nossa extensão: 1. Criar uma cópia do método que faz chamada a API do Forcast 2. Criar no servidor um método que responde com a API do Forcast (usando os mesmos argumentos) 3. Utilizar o método criado! Excellent.
31. Como publicar a sua extensão 1. Acessar o painel de controle do desenvolvedor https://chrome.google. com/webstore/developer/dashboard?hl=pt-BR 2. Pagar a taxa de U$ 5,00 para poder publicar na Chrome Web Store 3. Feito o registro e pagamento, voltar ao painel e adicionar novo item 4. O upload é sempre de arquivos zipados, para isso, usar a compressão presente no projeto (npm run compress) 5. Preencher os campos (atenção ao campo: “Opções de Visibilidade”) 6. Salvar e aguardar o tempo de publicação!
32. Próximos Passos • Testes ◦ Mocha (js): https://github.com/mochajs/mocha ◦ Jest (para components react): https://facebook.github.io/jest/ ◦ Travis (integração contínua): https://travis-ci.org/ ▪ AppVeyor https://www.appveyor.com/ • Desenvolvimento paralelo ◦ Adaptando este template, podemos desenvolver a extensão e o servidor no mesmo projeto! • React <3 Redux
33. Outros Links Bacanas • 8 Chrome Extension Examples ◦ https://react.rocks/tag/Chrome_Extension • react-chrome-extension-boilerplate ◦ https://github.com/jhen0409/react-chrome-extension-boilerplate • Chrome Extension generator (Yeoman) ◦ https://github.com/yeoman/generator-chrome-extension • Creating Chrome Extensions with React ◦ http://michelletilley.net/2014/02/24/creating-chrome-extensions-with-react.html Em breve: Construindo extensões para o Google Chrome
34. Agradecimentos Contato para dúvidas e afins: http://www.diegopinho.com.br #partiuAlmoço #nodeconfbr