diff --git a/Dicas-de-Plone-6-e-Volto.md b/Dicas-de-Plone-6-e-Volto.md new file mode 100644 index 0000000..10d5ab1 --- /dev/null +++ b/Dicas-de-Plone-6-e-Volto.md @@ -0,0 +1,137 @@ +# 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 + +### Criando um novo projeto + +``` +pipx run cookieplone project +make install +``` + +[Docs - Install Plone with cookieplone](https://6.docs.plone.org/install/create-project-cookieplone.html#generate-the-project) +[Training - Plone Deployment](https://training.plone.org/plone-deployment/project-new.html) + + + + +## Backend + +### 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). + +Passos: + +1. Configure o arquivo `backend/requirements.txt`, colocando o nome do add-on: + + ```interlegis.barra-acessibilidade-backend``` + +2. Configure o arquivo `backend/instance.yaml`: + + ``` + defaunt_context: + zcml_package_includes: project_title, interlegis.barra-acessibilidade-backend + ``` + +3. Configure o arquivo `backend/mx.ini`: + + ``` + [interlegis.barra-acessibilidade-backend] + url = https://github.com/collective/example.contenttype.git + pushurl = git@github.com:collective/example.contenttype.git + extras = test + branch = feature-7 + ´´´ + +4. `make backend-build` na raiz do projeto para baixar o conteúdo do git. + + +[docs, install an add-on from source](https://6.docs.plone.org/admin-guide/add-ons.html#install-an-add-on-from-source) + +### Criando item de painel de controle. + +??? + + +Projetos de exemplo: +- [eea.banner](https://github.com/eea/eea.banner) (usado pelo volto-banner) + +### Criando um endpoint para ser usado no frontend + +???? + + +Projetos de exemplo: +- [eea.banner](https://github.com/eea/eea.banner) (usado pelo volto-banner) + + +## Frontend (Volto) + +### 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). + +Passos: + +1. Configure o arquivo `frontend/package.json`: + + ``` + { + "name": "my-volto-project", + "addons": [ + "name-of-add-on" + ] + } + ``` + +2. Configure o arquivo `frontend/mrs.developer.json`: + + ``` + { + ... outros ..., + + "meu-addon": { + "output": "./packages/barra-acessibilidade", + "package": "" + } + } + ´´´ + +2. `make install` no diretório `frontend`. + + +[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) + +### Utilizando uma API definida no backend + +O Volto utiliza `react-redux` para acessar o backend. + +Passos (usando o projeto [`volto-banner`](https://github.com/eea/volto-banner) como exemplos: + +1. [Crie um novo reducer](https://github.com/eea/volto-banner/blob/master/src/reducers/banner.js). + +2. [Acrescente o novo reducer na configuração do addon](https://github.com/eea/volto-banner/blob/master/src/index.js). + +3. [Crie uma nova action](https://github.com/eea/volto-banner/blob/master/src/actions.js). + +4. [Use a action no seu addon (com `useEffect`)](https://github.com/eea/volto-banner/blob/master/src/StagingBanner.jsx). + + + +### 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. + +O componente é incluído no final da página, por default (acho). Se quiser posicionar em outro lugar, use `react-portal`, como no exemplo. + +[Docs, appextras](https://6.docs.plone.org/volto/development/appextras.html) + +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) \ No newline at end of file