Adicionar 'Dicas de Plone 6 e Volto'

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": "<nome do package, exemplo '@interlegis/barra-acessibilidade'",
+		"url": "git@github.com:interlegis/barra-acessibilidade.git",
+		"https": "https://github.com/interlegis/barra-acessibilidade.git",
+		"tag": "<versão, exemplo '1.0'>"
+	  }
+	}
+	´´´
+	
+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)