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
• 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
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/
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.
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
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
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.
í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
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.
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
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 :)
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
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.
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/
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/
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
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
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.
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!
(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
Diego Martins de Pinho
diegopinho
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
cherdarchuk
lauravandoore
