Pilot
A próxima versão da Dashboard Pagar.me
Índice
- Introdução
- Tecnologia utilizada
- Requisitos
- Instalação
- Cockpit
- Estrutura do projeto
- Contribuindo
- Licenças
Introdução
Pilot é o codinome da nova dashboard do Pagar.me. O produto foi criado
a partir de feedbacks dos usuários, para que eles possam ter uma
experiência cada vez mais transparente de sua operação financeira no
Pagar.me, e consigam focar no seu negócio!
Tecnologia utilizada
A stack foi escolhida com base no que empresas como Facebook, AirBnb,
e New York Times estão usando para construir suas experiências. Também foi
levado em consideração a simplicidade, curva de aprendizado e requisitos
como fácil distribuição e entrega progressiva.
Tendo isso em vista, optamos por usar React e Ramda.
A estrutura do projeto foi iniciada rapidamente usando o FormerKit Dashboard,
projeto que desenvolvemos baseado no Create React App para nos permitir
criar rapidamente projetos de dashboards.
Requisitos
Este repositório é um monorepo que aloja os pacotes que compõem a Pilot.
Para instalar as dependências é necessário usar o
Yarn versão 1.0 ou superior, que suporta a
funcionalidade de Workspaces.
Instalação
Algumas instruções para desenvolver na Pilot:
-
Clonando o repositório
$ git clone git@github.com:pagarme/pilot.git -
Rodando o servidor
Entre na pasta principal do projeto:
$ cd pilotUse o Yarn para instalar as dependências:
$ yarnEntre no diretório da Pilot e inicie a aplicação:
$ cd packages/pilot $ yarn start
Cockpit
O Cockpit é nossa biblioteca para efetuar requests a serviços externos,
e devolver os dados retornados em um formato estruturado para serem
utilizados nas páginas da Pilot. Atualmente, a principal função do
Cockpit é fazer a comunicação com a API utilizando o pagarme-js. Porém, sua estrutura permite
interação com outros serviços, caso haja necessidade. Uma request ao
Cockpit equivale a uma ou mais requests na API, onde o dado retornado
será tratado para ser renderizado na Pilot.
Rodando testes no Cockpit
Entre no diretório do Cockpit e inicie os testes:
$ cd packages/cockpit
$ yarn test
Estrutura do projeto
-
packages: Toda a estrutura de arquivos e pastas dos monorepos,
seguindo a funcionalidades de Workspaces.-
cockpit: Contém a estrutura de arquivos e pastas do Cockpit.config: Configurações gerais do Webpack e Jest.dist: Scripts prontos para produção.scripts: Todos os scripts usados para testes.src: Código-fonte do Cockpit.
-
pilot: Contém a estrutura de arquivos e pastas do Pilot.srccomponents: Componentes pequenos, geralmente compostos de JSX
e estilos. Não devem conter estado e devem estar aqui apenas caso
sejam reutilizados em várias áreas distintas do app.containers: Componentes grandes, compostos de outros componentes.
Podem conter estilos e estado (desde que o estado seja irrelevante
para o contexto da rota). Podem estar aqui para serem reutilizados
ou por serem usados em uma rota inteira.pages: Componentes grandes que contém a lógica de busca de
dados e manutenção de estado das rotas do app. Não devem conter
estilos e são os únicos componentes que podem ser conectados ao
Redux.formatters: Funções utilizadas para formatação dos dados da
aplicação.models: Dados estáticos que fazem parte da aplicação e mapeiam
para dados usados ou retornados pela API.
stories: Nossa biblioteca de componentes, containers e páginas
da aplicação. Utilizamos o Storybook
para auxiliar no desenvolvimento usando mocks e para efetuar
validações visuais.
-
Contribuindo
Para ler informações sobre contribuição, confira nosso guia
de contribuição em CONTRIBUTING.md.
Licenças
Veja as licenças em LICENSES.