Categorias
WordPress

Criando seu primeiro projeto com Frontity

No post anterior eu fiz uma introdução sobre Frontity nesse post eu irei mostrar o passa-a-passo de como criar o seu primeiro Projeto com Frontity.

Para isso teremos alguns pré-requisitos:

  • Node.js instalado em nossa máquina
  • Terminal de linha de comando
  • Um editor de texto para codificar o nosso tema no meu caso irei utilizar o vs code
  • Ter uma aplicação WordPress para conectar com sua aplicação Frontity

Agora com tudo pronto precisamos abrir o nosso terminal na página que queremos criar o nosso projeto e rodar o seguinte comando:

npx frontity create frontity-tutorial

Esse comando irá criar um projeto dentro da pasta frontity-tutorial nesse caso podemos utilizar qualquer nome para o nosso projeto. O processo de instalação utiliza npx, mas caso não conheça ele tem o comportamento similar ao npm mas com uma diferença ele irá. Remover os pacotes uma vez que executados. Caso queira saber mais sobre o recurso acesse este artigo.

Terminal rodando o script para criar um projeto frontity

Quando executado o comando as o recurso irá rodar um passo-a-passo, com duas perguntas a primeira qual será o tema inicial Mars theme ou Twenty Twenty e a segunda pergunta caso queira se inscrever na newsletter do Frontity. Uma vez criado podemos entrar na pasta que criamos e rodar a nossa a aplicação em modo desenvolvimento:

cd frontity-tutorial && npx frontity dev

Agora acessando a pasta frontity-tutorial temos a seguinte estrutura:

my-app/ |__ node_modules/ |__ package.json |__ frontity.settings.js |__ favicon.ico |__ packages/ |__ mars-theme/

Uma vez que rodamos frontity em modo desenvolvimento teremos nossa aplicação rodando no endereço localhost:3000

Tema mars rodando no localhost

Como podemos ver a nossa aplicação está lendo posts de uma aplicação WordPress, mas precisamos adicionar a nossa própria aplicação, caso esteja rodando uma aplicação local você também pode apontar para ela. Mas no meu teste eu vou utilizar o meu blog pessoal e para isso precisamos alterar as configurações do nosso projeto no arquivo frontity.settings.js que contém o seguinte código

const settings = { "name": "frontity-tutorial", "state": { "frontity": { "url": "https://test.frontity.org", "title": "Test Frontity Blog", "description": "WordPress installation for Frontity development" } }, "packages": [ { "name": "@frontity/mars-theme", "state": { "theme": { "menu": [ [ "Home", "/" ], [ "Nature", "/category/nature/" ], [ "Travel", "/category/travel/" ], [ "Japan", "/tag/japan/" ], [ "About Us", "/about-us/" ] ], "featured": { "showOnList": false, "showOnPost": false } } } }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://test.frontity.org/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings;
Code language: JavaScript (javascript)

Como podemos temos inicialmente algumas configurações do nosso projeto e na parte final temos um endereço guardado na propriedade API esse é um blog de test do frontity para o meu test irei substituir o endereço test.frontity.org por blog.fellyph.com.br assim teremos o seguinte resultado:

Tema inicial apontado para meu blog

Como podemos ver minha aplicação frontity passou a carregar os posts do meu blog pessoal mas o header ainda continua com o conteúdo antigo. Nesse caso essa informação é controlada pelo nosso arquivo de configuração nas propriedades título, descrição e os links pela propriedade menu, assim com a atualização o nosso arquivo ficará o seguinte:

const settings = { "name": "frontity-tutorial", "state": { "frontity": { "url": "blog.fellyph.com.br", "title": "Blog Frontity Fellyph Cintra", "description": "Theme created to the frontity tutorial" } }, "packages": [ { "name": "@frontity/mars-theme", "state": { "theme": { "menu": [ [ "Home", "/" ], [ "Tutoriais", "/category/tutoriais/" ], [ "Curso PWA", "/curso-online-progressive-web-apps/" ], [ "Sobre", "/sobre/" ] ], "featured": { "showOnList": false, "showOnPost": false } } } }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://blog.fellyph.com.br/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings;
Code language: JavaScript (javascript)

Se você navegar pela a aplicação verá que todos os posts páginas de categorias serão renderizados. Agora o próximo passo caso queira alterar o tema padrão você irá precisar ir na pasta packages/mars-theme/ para entender mais sobre acesse a documentação do tema.

Mas para essa série de posts vamos criar o nosso tema do zero e entender os conceitos por trás do Frontity mas isso eu irei deixar guardado para o próximo post. Para ler mais posts sobre WordPress acesse a página da categoria WordPress.

Categorias
AMP Accelerated mobile pages Geral WordPress

Plugin Web Stories do Google versão 1.0

Recentemente fiz um post testando a versão beta do plugin e na semana passada saiu a versão 1.0 do plugin. Com uma série de correções e melhorias. Nesse post iremos falar sobre as novidades do plugin em sua versão 1.o.

Plugin oficial do google para web stories

1 – Mudança dos endereços

Umas das mudanças da versão beta para a versão final foi a alteração do URL /stories/ para /web-stories/. O agora todos os seus stories ficarão na pasta web-stories mas isso será mais relevante caso tenha utilizado o plugin na versão beta.

2 -Salvar cores e fontes

Umas dos pontos que tinha até criado uma issue no github era a opção de criar opções pré-definidas para fontes e cores. Agora na versão 1.0 temos a opção de salvar cores estilos de texto.

Opções salvas no editor visual

3 – Melhorias em acessibilidade

Uma série de melhorias relacionadas a acessibilidade foram incluídas nessa versão sempre quando o elemento possui um contexto de acessibilidade uma aba de acessibilidade será exibida no menu de contexto, como podemos ver na imagem a seguir:

Images e vídeos possuem a opção de adicionar texto descritivo

Além de melhorias referentes a conteúdo o editor visual também possui melhorias, como teclas de atalhos e navegação e edição via teclado.

4 – Integração com imagens e vídeos do Unsplash

Imagens e vídeos tem um importante papel da criação do seu web stories ter uma imagem relativa ao seu conteúdo demanda tempo para seleção e upload desse conteúdo. Com o plugin de web stories possui uma integração com o repositório de imagens unsplash.

Integração com o repositório de imagens unsplash

5 – Canal Google Web Creators

Umas das novidades junto com o plugin foi o lançamento do canal Google Web Creators, uma iniciativa para apoiar criadores de conteúdo na Web.

Vídeo de introdução do Google Web Creators

Então essas são as novidades que eu gostaria de listar em breve estará saindo mais um vídeo no canal sobre Web Stories. Caso queira ler mais posts sobre o WordPress acesse a página da categoria.

Categorias
WordPress

Introdução ao Frontity para WordPress

Recentemente conheci o framework front-end Frontity assistindo o Meetup to WordPress São Paulo sobre a ferramenta, foi uma introdução sobre o conceito por trás do framework sem tocar muito da parte do código.

Para você que não conhece o Frontity é um framework escrito em react para realizar integração com uma instalação headless do WordPress. O conceito do WordPress headless utiliza a aplicação somente para servir dados via REST API. A vantagem desse conceito é que conseguimos criar diferentes aplicações utilizando a mesma base de dados.

Depois do meetup decidi fazer minhas pesquisas e acabei achando esse workshop realizado no JSNation em junho desse ano é um workshop(inglês) de 3 horas que aborda bastante coisa do framework:

O workshop esclareceu diversos pontos é um pouco longo mas o ritmo ajuda bastante quem está começando. Resumindo a arquitetura da aplicação com frontity:

Distribuição de uma aplicação utilizando frontity

Esse tipo de integração é possível com outros frameworks como Next.js e Gatsby.js mas com uma diferença Frontity é totalmente focado em WordPress. Podemos descrever o framework como uma alternativa para renderização de uma aplicação WP.

Criando o Primeiro projeto com Frontity

Segundo a documentação do frontity o processo de criação é dividido em 4 etapas:

1 – Criando um projeto

Os pré-requisitos para criação de um projeto frontity são: node instalado em nossa máquina e um terminal de linha de comando. Com esses requisitos o próximo passo é criar uma aplicação utilizando npx.

npx frontity create my-app

O processo de instalação irá criar um passo-a-passo onde você irá definir alguns items do projeto como um tema inicial.

2- Conectando frontity com seu projeto WordPress

Depois que criamos nosso projeto é chegada a hora de conectar nossa aplicação frontity com WordPress. Para isso vamos em um arquivo chamado frontity.settings.js e passamos o endereço da REST API da nossa aplicação WordPress:

//frontity.settings.js export const settings = { packages: [ { name: "@frontity/wp-source", state: { source: { api: "https://blog.fellyph.com.br/wp-json" }, }, } ], };
Code language: JavaScript (javascript)

No meu caso eu utilizei o endereço da rest api do meu blog blog.fellyph.com.br/wp-json

3 – Estilização

Frontity e WordPress conectados é a hora de estilizar o nosso tema para isso precisamos ter conhecimento em dois items chaves React e CSS-in-JS. Mas frontity fornece uma serie de ferramentas que abstraem alguns items com por exemplo na estilização:

import { styled } from "frontity"; const StyledDiv = styled.div` width: 100%; text-align: center; color: white; `;
Code language: JavaScript (javascript)

4 – Publicando seu projeto

Frontity possui ferramentas para ajudar na publicação do seu projeto ou em uma plataforma node.js ou plataforma serverless. Para isso temos dois comandos:

npx frontity build

Esse comando irá gerar uma pasta com os arquivos compilados contendo seu projeto em react e servidor. A pasta gerada pelo build pode ser hospedada em qualquer serviço de hospedagem para aplicações node.

npx frontity serve

Esse comando irá utilizar a pasta criada pelo comando build para lançar sua aplicação em produção.

Mas claro se você já está ambientado com o ecossistema react alguns items que eu comentei parece básico. Caso contrario sera uma nova stack para aprender. Items como React e CSS-in-JS pode ser bastante fora do padrão caso esteja acostumado com php+html+css tradicional.

Mesmo sendo uma Grande mudança todo esse novo ecossistema vem com uma série de benefícios e ferramentas que ajudam a sua produtividade.

Benefícios

E quais são os benefícios de construir uma aplicação utilizando frontity? Para isso vou listar alguns items e entrar em mais detalhes:

React: Podemos dizer que o uso de react é um benefício uma plataforma estável com uma vasta comunidade. Adicionando React você trás uma série de benefícios da plataforma para o seu projeto. A capacidade de componentização da sua interface, melhor controle de estado da sua aplicação e performance.

Atualização de conteúdo em tempo real: Caso desenvolva com React você já está acostumado em ver em tempo real as modificações que você realiza nos arquivos do seu template sendo replicados no ambiente de teste sem a necessidade de recarregar a página no browser.

Pre-configuração de projeto e CLI: Desde o inicio do projeto frontity possui uma série de comandos de terminal que ajuda na criação de projetos, temas, teste, desenvolvimento e publicação.

Pacotes de bibliotecas focadas no WordPress: É possível conectar qualquer aplicação React com um WordPress headless mas o Frontity possui uma série de pacotes que irão ajudar no desenvolvimento de sua aplicação:

  • frontity: possui o core da sua aplicação com styled components, emotion, controle de estato, açõe e as integrações com o core do react
  • @frontity/tiny-router: pacote que faz o gerenciamento de rotas de sua aplicação.
  • @frontity/wp-source: pacote responsável por consultar os dados em sua aplicação WordPress
  • @frontity/components: possui uma coleção de componentes que irão auxiliar na construção de interfaces.
  • @frontity/hooks: possui o comportamento similar ao dos hooks do WordPress
  • @frontity/html2react: auxilia a renderizar conteúdo do post especialmente conteúdo formatado por page builders.
  • @frontity/head-tags: ajuda a dicionar informações em nossa tag head.

Melhorias de performance: Com framework conseguimos realizar code-splitting e trabalhamos com CSS-in-JS isso possibilita atrelar o estilo ao componente assim só carregamos o estilo dos elementos que estão sendo exibidos na tela. Além disso temos a possibilidade de utilizar recursos com lazy loading e prefetch.

Conclusão

Particularmente fiquei muito animado com o framework abre uma nova possibilidade para desenvolvimento de temas WordPress e os primeiros testes foram animadores. Estou preparando vídeos para o meu canal para mostrar passo-a-passo como criar uma tema com Frontity.

Para agilizar o processo de criação dos vídeos pedi autorização da Alessandra Spalato para utilizar o tema que ela desenvolveu como demo:

Esse será o tema que iremos construir nos próximos tutoriais sobre Frotity. Então vamos fechando esse post por aqui para mais posts sobre WordPress acesse a página da categoria WordPress.

Categorias
PWA - Progressive web apps WordPress

Editando o web app manifest com o plugin de PWA para WordPress

Nesse post vamos ver como editar as propriedades do web app manifest json com o plugin de PWA oficial do google. No meu canal do YouTube recentemente fiz um vídeo falando sobre o plugin, e como transformar seu site WordPress em uma PWA. Nesse vídeo vamos ver como podemos alterar algumas propriedades via código.

Se você ainda não conhece o plugin, tem um post no blog sobre o o plugin.

Página do plugin PWA para WordPress

Utilizando o plugin temos dois caminhos criar um mini plugin ou adicionar uma função no functions.php do nosso tema. Para esse tutorial vamos utilizar o arquivo functions.php.

Um exemplo básico podemos alterar o short_name do nosso manifest.json essa propriedade pode ter no máximo 12 caracteres por padrão ela ler o título do site, caso tenha um título maior que 12 caracteres não teremos um manifest json válido para resolver esse problema adicionamos o seguinte código em nosso arquivo functions.php de nosso tema:

add_filter( 'web_app_manifest', function( $manifest ) { $manifest['short_name'] = 'Shortness'; return $manifest; } );
Code language: PHP (php)

No código acima adicionamos um filtro na chamada da função web_app_manifest e interceptamos o array com as propriedades do manifest.json e alteramos o elemento responsável pela propriedade short_name.

O segundo exemplo é um pouco mais complexo pois vamos acessar a lista de ícones de nossa aplicação. Recentemente o lighthouse adicionou em sua auditoria a validação para maskable icons e ainda não saiu uma nova versão com essa propriedade, pode ser que no futuro temos essa propriedade disponível mas por enquanto que a atualização não sai podemos ver como editar o nosso manifest.json e corrigir esse problema, para isso vamos adicionar o seguinte código em nosso functions.php:

add_filter( 'web_app_manifest', function( $manifest ) { $manifest['icons'] = array_map( function ( $icon ) { if ( ! isset( $icon['purpose'] ) ) { $icon['purpose'] = 'any maskable'; } return $icon; }, $manifest['icons'] ); return $manifest; } );
Code language: PHP (php)

Novamente adicionamos um filtro na função “web_app_manifest” ela recebe um parâmetro $manifest um array que contém as configurações do web app manifest. Assim conseguimos acessar o item do array com índice ‘icons’ e adicionamos uma nova propriedade ‘purpose’ atrelada ao ícone e por fim retornamos o manifest com os novos valores.

Propriedades

O manifest json é formado com os seguintes valores por padrão:

  • name: o título do site vindo da função get_option('blogname')
  • short_name: copia do título do site não maior que 12 caracteres
  • description: tag line do site vindo da função get_option('blogdescription')
  • lang: o idioma do site por get_bloginfo( 'language' )
  • dir: a direção de leitura do site is_rtl()
  • start_url: a home da aplicação get_home_url()
  • theme_color: vindo do background customizado via get_background_color()
  • background_color: também vindo do background customizado
  • displayminimal-ui é o valor padrão.
  • icons: os ícones do site via get_site_icon_url()

Todos os valores mencionados anteriormente podem ser alterados com a inclusão de filtros que vimos anteriormente. Então ficamos por aqui com esse post outro tipo de customização que conseguimos fazer com o plugin é a parte de estratégias de cache para isso vou dedicar um segundo post para entrar em mais detalhes. Mais posts sobre WordPress confiram a página da categoria.

Categorias
PWA - Progressive web apps

Novidades no Web app manifest: app shortcuts

Já anunciado nos eventos MSbuild e Web.dev live web app manifest tem algumas novas funcionalidades. Já nas versões 84 do Chrome Mobile e 85 para desktop agora temos a possibilidade de adicionar atalhos dentro de nossa aplicações com manifest.json.

Esse recursos para você usuário Apple, já era comum em apps nativos quando o usuário pressionava e segurava o ícone do aplicativo opções dentro do app eram exibidas. Como na imagem a seguir:

Exemplo de app shortcuts nativos no iOS

O recursos é ideal quando você deseja redirecionar usuários para funcionalidades chave de sua aplicação, navegação principal, buscas ou atividade de entrada de dados. Atualmente esse recurso pode ser implementado em Progressive Web apps em dispositivos Android e Windows desktop com Chrome e Edge o esse recurso em inglês é chamado de “app shortcuts” e conseguimos adicionar essa funcionalidade através da propriedade shortcuts.

Implementação

Para adicionar app shortcuts em nossa PWA precisamos adicionar a seguinte propriedade “shortcuts” em nosso manifest.json:

"shortcuts": [ { "name": "Abrir Contatos", "short_name": "Contatos", "description": "Visualize a lista de contatos cadastrados", "url": "/contatos", "icons": [ { "src": "//contatos.png", "sizes": "192x192" } ] }, ]
Code language: JavaScript (javascript)

Shortcuts espera um array de atalhos com as seguintes propriedades:

  • name: nome mais descritivo
  • short_name(opcional): nome alternativo para ser usado em áreas de espaço limitado.
  • description(opcional): descrição do app pode ser utilizado pelo OS e tecnologias assistivas no futuro.
  • url: a url a qual o App irá abrir. Essa URL precisa estar no escopo do manifest.json para isso precisa ser uma URL relativa.
  • icons: um array de ícones para o atalho com as propriedades: src, sizes e type(opcional).

SVG não são suportados para ícones utilize para esse caso PNG. Os tamanhos esperados são 36×36 48×48, 72×72, 96×96, 144×144 e 192×192 pixels.

Caso queira testa os seus apps shortcuts eles estarão visíveis no devtools do chrome ou edge na aba de aplicação dentro da seção do manifest, como podemos ver na imagem a seguir:

Boas práticas

Agora que sabemos como implementar atalhos em nossa pwa vamos falar sobre algumas boas práticas:

  • Ordene os app shortcuts por prioridades
  • Utiliza nomes distintos para seus atalhos
  • Mesure o uso dos atalhos via google analytics exemplo “/contatos?utm_source=homescreen”

Para finalizar vamos dar uma olhada em nosso código do manifest.json completo:

{ "name": "Tutoriais Fellyph Web APIs", "display": "standalone", "start_url": "/", "short_name": "Web APIs", "theme_color": "#DA2461", "description": "Essa é uma aplicação de teste", "orientation": "any", "background_color": "#DA2461", "icons": [ { "src": "assets/icons/icon_512.png", "sizes": "512x512" }, { "src": "assets/icons/icon_192.png", "sizes": "192x192" } ], "shortcuts": [ { "name": "Geo Location API", "short_name": "Geo API", "description": "Acesse exemplos de geo localiização", "url": "/01_geolocation/01-example-geolocation-final.html", "icons": [ { "src": "//icons/gelocalizacao.png", "sizes": "192x192" } ] }, { "name": "Fetch API", "short_name": "Fecth API", "description": "Acesse exemplos utilizando a fetch api", "url": "/02_fetch_api/01-example-xmlhttp-request-final.html", "icons": [ { "src": "//icons/fetch.png", "sizes": "192x192" } ] }, { "name": "IndexedDB API", "short_name": "IndexedDB", "description": "Acesse exemplos utilizando IndexedDB", "url": "/03_indexedDB/01-indexedDB-events.html", "icons": [ { "src": "//icons/indexed.png", "sizes": "192x192" } ] } ] }
Code language: JSON / JSON with Comments (json)

Fiz um pequeno texto com a aplicação que estamos desenvolvendo no curso de PWA e no windows o resultado será o seguinte:

Como podemos ver no screenshot no menu de opções temos os atalhos que definimos em nosso web app manifest.

Publiquei um post recentemente sobre o recurso em meu canal do youtube:

Então é isso pessoal o recurso novo nem todos os sistemas operacionais, windows e android já adicionaram o suporte agora só falta o suporte no iOS e MacOS. Para ler mais posts sobre PWA acesse a página da categoria PWA e até o próximo post.