Pilot

A próxima versão da Dashboard Pagar.me

Índice

Introdução
Tecnologia utilizada
Requisitos
Instalação
Cockpit
- Rodando testes no 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 pilot
```
Use o Yarn para instalar as dependências:
```
$ yarn
```
Entre 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.
  - src
    - components: 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.

rc125 / pilot