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

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