Criação de site Polymer

Criação de site Polymer

• Este é um tutorial ensinando como usar a ferramenta Polymer.

Configuração

• Para configurar o Polymer é necessário fazer a instalação de duas ferramentas: node.js e bower.
• 1- Primeiro baixe o node.js. Pode ser baixado neste link: https://nodejs.org/;
• 2- Instale o node.js.
• 3 - Após a instalação do node.js, instale o bower. Para isso, abra o prompt de comando (cmd) e digite npm install -g bower.
• 4 - Crie a pasta que será desenvolvido o site. Pelo prompt, vá até a pasta criada e rode o comando bower init. Esse comando serve para criar o arquivo bower.json.
• 5 - Ainda na pasta do projeto pelo prompt, rode o comando bower install --save Polymer/polymer#^1.0.0. Esse comando server para instalar o polymer em seu projeto.
• Obs.: Caso queira fazer o update do Polymer, basta rodar o comando bower update na pasta do projeto.

Starter Kit

• Após fazer a configuração, para conhecer melhor o Polymer, é bom usar o Starter Kit.
• O Starter Kit pode sei baixado no link https://developers.google.com/web/tools/polymer-starter-kit/.
• Após baixar o .zip, descompacte em uma pasta de preferência. Entre na pasta descompactada e entre na pasta app. Nessa pasta terá toda a estrutura do Polymer junto com todos os seus componente e exemplos de uso de cada um deles. Esse é o mesmo que pode ser visto no site do Ploymer.
• Uma forma de entender melhor é baixando o seed-element (https://github.com/polymerelements/seed-element). Após baixar o .zip dessa estrutura, basta descompactar na pasta de preferência. Abra o prompt de comando, navegue até a pasta descompactada, digite o comando bower install. Após rodar esse comando, terá gerado uma pasta com o nome bower_components, e dentro dela terá todos os componentes do Polymer.

Entendendo o Polymer

• O Polymer é uma ferramente para criação de sites usando a ideia de criação de novos componentes web usando tag, ou seja, para usar os componentes Polymer basta usar a tag de referência, e permite criar novos componentes, onde cada componente terá uma tag exclusiva.
• Primeiro vamos estudar como incluir os componentes Polymer.
• Entrando neste link https://elements.polymer-project.org/, você vai encontrar os componentes e exemplo de seu uso. Esse componentes são divididos em tipos, vamos falar um pouco sobre cada tipo.
• Iron Elements: Um conjunto de elementos de utilidade visuais e não-visuais. Inclui elementos para trabalhar com layout, entrada do usuário, seleção, e aplicativos de andaimes.
• Paper Elements: Elementos de papel são um conjunto de elementos visuais que implementam Projeto de Material do Google.
• Google Web Components: Componentes web do Google.
• Gold Elements: Os elementos de ouro são construídos para e-commerce casos de uso, como fluxos de checkout.
• Neon Elements: Elementos de néon implementam efeitos especiais.
• Platinum Elements: Elementos para transformar sua página web em um verdadeiro webapp, com push, off-line, e muito mais.
• Molecules: Moléculas são elementos que envolvem outras bibliotecas javascript.

Trabalhando com Polymer

• Vamos começar nosso estudos usando apenas os Paper Elements e Iron Elements criando exemplos visuais.
• Como primeiro visual vamos criar uma tela responsiva com menu lateral.
• 1 - Crie a pasta onde ficará o projeto, pelo prompt de comando entre na pasta criado e rode o comando bower init.
• 2 - Rode o comando bower install --save Polymer/polymer#^1.0.0
• 3 - Rode o comando bower install --save PolymerElements/paper-drawer-panel , esse comando irá instalar o paper-drawer-panel e suas dependências no seu projeto.
• 4 - Crie um arquivo html, como uma boa prática pra página responsiva insira os seguintes metas no head do seu html:
• meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
• meta name="mobile-web-app-capable" content="yes"
• meta name="apple-mobile-web-app-capable" content="yes"
• 5 - Insira a seguinte referência de script : src="bower_components/webcomponentsjs/webcomponents-lite.js"
• 6 - Importe o elemento polymer: link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html"

Criando um panel

• 7 - No body do html insira:
• 8 - Rode o comando npm install -g polyserve no prompt para instalar o polyserve.
• 9 - Após instalado o polyserve, pelo prompt vá na pasta do aplicativo e rode o comando polyserve, ao rodar irá aparecer um endereço, pelo browser acesse o endereço, e irá carregar uma tela parecida com essa ao lado:
• 

Colocando cores

• 10 - De forma a identificarmos melhor cada parte vamos inserir cores na tela. Faço como o seguinte código:
• Drawer Panel
• Main Panel
• 11 - Recarregue a página, vai ficar igual a imagem ao lado. Agora diminua a largura do navegador até a parte azul sumir, após clique bem no lado esquerdo da tela e arraste o mouse pro lado direito, como se estivesse apertando a tela do smartphone com o dedo e arrastando. Você verá o efeito na tela.
• 

Cabeçalho

• 12 - Para criar