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
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
● 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/
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.
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.
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
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...
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
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.
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
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.
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.
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
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 :)
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
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.
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/
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/
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
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)
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
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.
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!
diegopinho
hanhan1978
chiroruxx
odasho
asazutaiga
abenben
hirosatogamo
regonn
kako351
hirokiotsuka
robots
hayatokudou
gen519
mojombo
hursman
aleyda
mraible
mthomps
addyosmani
vanstee
morganepeng
jmmastey
lara
soudai
zakiwarfel