Admin Framework
<HTMLBlock>{`
<style>
section#hub-content header h1, section#hub-content header h2 {
color: #f71963
}
p {
line-height: 1.5rem;
}
</style>
`}</HTMLBlock>
# Admin framework
# Introdução
Nos cursos anteriores conhecemos o Store Framework, um motor de construção de frente de loja construído usando o VTEX IO. Assim como o Store Framework, o Admin Framework se propõe a resolver um caso de uso específico: extensões para o painel administrativo.
Operações de comércio complexas quase nunca conseguem funcionar com uma única solução SaaS integrada, são necessários integrações de ERP, personalização, tracking, marketing digital, entre outros. A VTEX entende, no entanto, que ter um único ponto de contato facilitaria muito o trabalho dos operadores, tornando o admin uma ferramenta universal. É com essa premissa que o Admin Framework foi criado, trazendo a possibilidade de extensão de *backoffice* não apenas para criar dashboards que são característicos de um cliente e seu segmento, como para trazer insights e operação de provedores externos.
# Atividade
Uma app de admin, funciona de forma muito parecida com a app de bloco de loja. Vamos iniciar o curso clonando um repositório template de react e evoluiremos para torná-lo uma app de admin:
1. Clone o react app template:
git clone https://github.com/vtex-apps/react-app-template admin-course
2. Abra o `admin-course` no seu editor de texto e adicione o builder de admin no `manifest.json`:
```diff
//manifest.json
{
"vendor": "CHANGE_ME",
"name": "CHANGE_ME",
"version": "0.0.0",
"title": "CHANGE_ME",
"description": "CHANGE_ME",
"builders": {
"react": "3.x",
"messages": "1.x",
"docs": "0.x",
+ "admin": "0.x"
},
"dependencies": {},
"registries": [
"smartcheckout"
],
"policies": [],
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}
- Edite o
vendor
,name
,title
edescription
da aplicação:
//manifest.json
{
+ "vendor": "appliancetheme",
+ "name": "admin-sandbox",
"version": "0.0.0",
"title": "Admin Sandbox",
"description": "Admin Sandbox",
"builders": {
"react": "3.x",
"messages": "1.x",
"docs": "0.x",
"admin": "0.x"
},
"dependencies": {},
"registries": [
"smartcheckout"
],
"policies": [],
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}
NOTA: Se estiver fazendo o curso na sua própria loja e desenvolvendo sua própria app, lembre-se de que terá que passar pelo form de whitelist.
- Adicione o
vtex.styleguide
como dependência, nós vamos utilizá-lo mais a frente no curso:
//manifest.json
{
"vendor": "appliancetheme",
"name": "admin-sandbox",
"version": "0.0.0",
"title": "Admin Sandbox",
"description": "Admin Sandbox",
"builders": {
"react": "3.x",
"messages": "1.x",
"docs": "0.x",
"admin": "0.x"
},
"dependencies": {
+ "vtex.styleguide": "9.x"
},
"registries": [
"smartcheckout"
],
"policies": [],
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}
- Na raiz do projeto, crie um diretório
/admin
, a sua estrutura deve ficar:
|
|_ CHANGELOG.md
|_ docs/
|_ messages/
|_ react/
+|_ admin/
|_ package.json
|_ manifest.json
|_ yarn.lock
Está com dúvidas?
Veja o gabarito para esta etapa ou acompanhe nosso office hours no canal VTEX Developers.
Ajude-nos a fazer este conteúdo melhor!
Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!
Faça uma contribuição
Updated 18 days ago
Next step