Atualizar 'Dicas de Plone 6 e Volto'

master
parent
commit
71058c7bf2
  1. 105
      Dicas-de-Plone-6-e-Volto.md

105
Dicas-de-Plone-6-e-Volto.md

@ -1,9 +1,40 @@
# Dicas para Uso de Plone 6/Volto
Algumas anotações enquanto estudava Plone 6 e Volto. Não pretende ser 100% completa, mas indicar onde conseguir mais ajuda sobre alguns tópicos.
## Projeto
A instalação do Plone cria um projeto *"monorepo"*, contendo backend, frontend e devops.
Vários comandos `make` podem ser disparados da raiz do projeto ou de dentro do diretório correspondente. Por exemplo, para iniciar o backend:
```
# da raiz
~/projeto$ make backend-start
# do diretório backend
~/projeto/backend$ make start
```
### Addons
A filosofia do desenvolvimento Plone é que todo o desenvolvimento deve feito dentro de *addons*.
O *monorepo* é criado seguindo esta filosofia, conforme a tabela abaixo:
|||
|---|---|
|`/backend`|Configuração para subir o backend: porta, dependências, addons externos, etc|
|`/backend/src`|Addons internos ao repositório|
|`/backend/src/<nome-projeto>`|Addon principal, criado na instalação|
|`/frontend`|Configuração para subir o frontend: dependências, addons externos, etc|
|`/frontend/packages`|Addons internos ao repositório|
|`/frontend/packages/volto-<nome-projeto>`|Addon principal, criado na instalação|
Addons de backend normalmente (via de regra?) são instalados na interface web do site para fazer seus efeitos.
> Uma dúvida minha é se isto é estritamente necessário ou apenas recomendado
### Criando um novo projeto
```
@ -15,11 +46,39 @@ make install
[Training - Plone Deployment](https://training.plone.org/plone-deployment/project-new.html)
## Backend
O backend é o *verdadeiro* plone. Escrito em python, tem como base o conjunto de bibliotecas `zope`.
## Backend
A documentação é sofrida e espalhada entre os sites do `plone` e as várias bibliotecas `zope`. Be afraid.
### ZCML
Boa parte da configuração do backend é através de arquivos *XML* com extensão *zcml*.
### Apontando para repositório externo
O arquivo `configure.zcml` do diretório base de cada addon é lido automaticamente. Outros arquivos `.zcml` do addon deve ser incluídos a partir deste, usando a diretiva `<include>`.
Algumas diretivas usadas:
|||
|---|---|
|`<include>`|Indica outro arquivo *zcml* a ser lido|
|`<genericsetup:registerProfile>`|Define um conjunto de *zcml* que vai ser executado quando o addon for instalado ou desinstalado|
|`<configlet>`|Cria um item de painel de controle.|
|`<browser:page>`|Define uma *"página"*. Até o momento, só sei que se usa para indicar o conteúdo de um item de painel de controle criado com `<configlet>`|
|`<records>`|Cria dados no *registry* do Plone. Por exemplo, dados referentes a um item customizado de painel de controle.|
|`<plone:service>`|Define um endpoint de api|
### Arquivos De Interesse
|||
|---|---|
|`instance.yaml`|Use para gerenciar addons|
|`mx.ini`|Use para incluir repositórios git externos ao monorepo na estrutura de diretórios|
### Receitas
#### Apontando para repositório externo
Ao desenvolver um addon reutilizável, o próprio costuma ter um repositório git separado. Para isto, usa-se o [mxdev](https://github.com/mxstack/mxdev).
@ -51,7 +110,7 @@ Passos:
[docs, install an add-on from source](https://6.docs.plone.org/admin-guide/add-ons.html#install-an-add-on-from-source)
### Instalar Addon
#### Instalar Addon
1. Adicionar uma linha em `backend/requirements.txt` para o addon
@ -70,7 +129,7 @@ Passos:
[Documentação](https://6.docs.plone.org/admin-guide/add-ons.html#install-an-add-on)
### Criando item de painel de controle
#### Criando item de painel de controle
Há duas formas de definir algo no painel de controle.
@ -90,18 +149,38 @@ Há duas formas de definir algo no painel de controle.
[Docs, Control Panels (bem limitado)](https://6.docs.plone.org/backend/control-panels.html)
### Criando um endpoint para ser usado no frontend
#### Criando um endpoint para ser usado no frontend
Passos, grosso modo. Veja os exemplos para ter uma ideia melhor.
1. Se já não existir, crie um diretório `restapi` dentro da raiz do backend. O nome não importa, mas `restapi` segue o padrão dos projetos que vi.
????
2. Use `<include>` no `configure.zcml` da raiz para incluir o diretório recém-criado.
3. Crie um arquivo `configure.zcml` dentro do diretório. Use a diretiva `<plone:service>` para criar o endpoint.
4. Crie um arquivo python, exemplo `get.py`, dentro do diretório. Lá deve ser implementada uma classe para devolver os dados desejados.
5. No caso de dados guardados em como string e que se deseja servir como json, pode ser necessário um serializer/deserializer. Ainda não sei como funcionam....
Projetos de exemplo:
- [eea.banner](https://github.com/eea/eea.banner) (usado pelo volto-banner)
- [collective.volto.cookieconsent](https://github.com/collective/collective.volto.cookieconsent)
## Frontend (Volto)
### Apontando para repositório externo
O frontend é chamado de Volto. Escrito em react/javascript, é feito para substituir o antigo frontend do plone (feito em python, direto no backend).
### Arquivos De Interesse
|||
|---|---|
|`package.json`|Use para gerenciar addons|
|`volto.config.js`|Também usado para gerenciar addons|
### Receitas
#### Apontando para repositório externo
Ao desenvolver um addon reutilizável, o próprio costuma ter um repositório git separado. Para isto, usa-se o [mrs developer](https://github.com/collective/mrs-developer).
@ -139,7 +218,7 @@ Passos:
[Docs, Install an add-on in development mode in Volto 18](https://6.docs.plone.org/volto/development/add-ons/install-an-add-on-dev-18.html)
### Instalar Addon
#### Instalar Addon
1. Acrescente o addon em `frontend/package.json`.
@ -152,7 +231,7 @@ Passos:
},
```
2. Acrescente o addon em `volto.config.js`.
2. Acrescente o addon em `frontend/volto.config.js`.
```
const addons = ['<nome do addon>', 'volto-ploneconf'];
@ -163,7 +242,7 @@ Passos:
[Documentação no treinamento "Mastering Plone"](https://training.plone.org/mastering-plone/volto_addon.html#install-an-add-on)
### Utilizando uma API definida no backend
#### Utilizando uma API definida no backend
O Volto utiliza `react-redux` para acessar o backend.
@ -179,7 +258,7 @@ Passos (usando o projeto [`volto-banner`](https://github.com/eea/volto-banner) c
### Colocando um componente em todas as páginas
#### Colocando um componente em todas as páginas
Use a opção `appExtras` ao configurar o add-on. Veja no exemplo do addon `volto-banner` abaixo.
@ -191,7 +270,7 @@ Exemplo: [addon ´volto-banner´](https://github.com/eea/volto-banner):
- [Acrescentando o componente no `appExtras`](https://github.com/eea/volto-banner/blob/master/src/index.js)
- [Usando `react-portal` para posicionar](https://github.com/eea/volto-banner/blob/master/src/StagingBanner.jsx)
### Definindo interface de painel de control no frontend
### Definindo interface de painel de controle no frontend
A criação de painel de controle normalmente é através de interface no backend e o Volto monta os controles necessários para a edição dos itens desta interface.

Loading…
Cancel
Save