Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Diego Martins de Pinho

July 05, 2016
Tweet

More Decks by Diego Martins de Pinho

Other Decks in Technology

Transcript

  1. Construindo
    extensões para o
    Google Chrome com
    a MEAN Stack
    Diego Martins de Pinho

    View Slide

  2. Material desta Palestra
    Todo material apresentado poderá ser encontrado em:
    http://diegopinho.com.br/nodeconfbr

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  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.

    View Slide

  7. Conhecendo o Ecossistema do Google Chrome
    Aplicações/Jogos Temas Extensões
    https://chrome.google.com/webstore/

    View Slide

  8. Alguns números...
    * Todas estas extensões estão na categoria
    “Escolhas do editor” na Chrome Web Store

    View Slide

  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.

    View Slide

  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

    View Slide

  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...

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  17. Vamos criar nossa extensão Hello World...
    vamos tentar, né ¯\_(ツ)_/¯

    View Slide

  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

    View Slide

  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 Hello World
    5. Carregar extensão no Chrome no modo Desenvolvedor
    6. Torcer para dar certo :)

    View Slide

  20. Vamos criar nossa extensão Clima Tempo...
    agora já complicou mais :s

    View Slide

  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

    View Slide

  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.

    View Slide

  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/

    View Slide

  24. Agora vamos para a parte mais divertida...
    também relativamente mais difícil D:
    caso dê pau na hora de mostrar

    View Slide

  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/

    View Slide

  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

    View Slide

  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/

    View Slide

  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)

    View Slide

  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

    View Slide

  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.

    View Slide

  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!

    View Slide

  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

    View Slide

  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

    View Slide

  34. Agradecimentos
    Contato para dúvidas e afins:
    http://www.diegopinho.com.br
    #partiuAlmoço #nodeconfbr

    View Slide