tisoap / pilot

:airplane: The next iteration of Pagar.me's Dashboard

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:

1. Clonando o repositório

   $ git clone [email protected]:pagarme/pilot.git

2. 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.