DITEC/UEC I

Equipe GECAP 8/G6/E2

Gestor: Caio Cesar Pereira Soares
Guru: Vivaldo Mendonça Pinto

PROITEC 2022 - INDICAÇÃO DE ATIVIDADE 01

Objetivo: implementar microfrontend em ReactJS + Typescript da tela inicial do sistema Contas à

Receber à ser servido dentro da plataforma APW.

Tecnológias a serem empregadas no projeto:

- Docker (multi-stage, docker-compose);
- Git (plataforma gitlab)
- Typescript
- ReactJS
- CSS
- Material UI (Componentes e Temas)
- Webpack

Outros conhecimentos:
- CI/CD com Gitlab e Kubernetes

Obs.: Sistema operacional recomendado Linux ou Windows 10 com WSL

Orientações para execução da atividade:

1) Estudo adicional à Trilha Mobile

a) MICROFRONTENDS
Documentação APW: https://docs.apps.hm.bb.com.br/docs/apw/microfrontend
Origem do estudo: https://micro-frontends.org/

b) DOCKER e DOCKER-COMPOSE
Curso Katacoda: https://www.katacoda.com/courses/container-runtimes
(Somente esses 3: What is a container?, What is a Container Image?, Learn Docker Foundations)

c) GIT
Curso Katacoda: https://www.katacoda.com/courses/git

d) Webpack (noções básicas)

Referências:
https://webpack.js.org/guides/getting-started/
https://betterprogramming.pub/learn-webpack-in-under-10-minutes-efe2b2b10b61

e) Material UI v4 (biblioteca de componentes ReactJS)

Referência: https://v4.mui.com/

f) CI/CD Gitlab e Kubernetes no BB (Necessário na fase da implatação do projeto – PASSO 6)

https://fontes.intranet.bb.com.br/dev/publico/roteiros
2) Configuração do ambiente local para subsidiar a atividade proposta

Instalar utilitário do BB chamado ALFRED e configurar acesso aos repositórios privados do BB.
Seguem os roteiros abaixo:

a) Instalação: https://fontes.intranet.bb.com.br/aic/publico/aic-alfred#instala%C3%A7%C3%A3o

b) Configuração: https://fontes.intranet.bb.com.br/aic/publico/atendimento/-/wikis/Alfred
(configurar o docker, npm e git)

Observações:
- caso você venha enfrentar problemas de conflito de redes entre o docker e a Redeman, exemplo nenhum site é
resolvido, será necessário configurar o docker pra evitar as faixas 172.x.x.x. Exemplo de solução:
https://stackoverflow.com/questions/55943660/docker-creates-an-ip-address-that-conflicts-with-internal-network-
when-deploying
- caso apresente problemas de interação com os gitlabs do BB relacionados à certificado ou protocolo git:// faz-se
necessário acertar esses problemas via configuração. Exemplos de solução:
https://confluence.atlassian.com/fishkb/unable-to-clone-git-repository-due-to-self-signed-certificate-376838977.html
https://stackoverflow.com/questions/55499414/git-forcing-use-of-https

3) Instalação dos componentes do APW para suportar desenvolvimento local

Seguir roteiro abaixo a partir da Introdução até o tópico Hello World do APW:
https://docs.apps.hm.bb.com.br/docs/get_started/introducao

Utilizar projeto blank ReactJS:

https://canais.fontes.intranet.bb.com.br/apw/apw-app-react-blank/apw-app-react-blank
(solicitar acesso à sigla ao gestor Caio)

4) Converter projeto base (blank) para Typescript

Seguir roteiro do site: https://webpack.js.org/guides/typescript/

Dica: quem inicializa e empacota a solução é uma tecnologia do mundo javascript chamado
Webpack. Para que ele reconheça o projeto como Typescript é só adicionar o “module.rules”, as
extensões de arquivos do tipo Typescript no “resolve.extensions” e trocar o “entry” de index.js
para index.tsx.

5) Implementar dashboard do protótipo Contas à Receber do APW

Link do protótipo para consulta de dados de estilização e componentes visuais aplicados na tela:
https://www.figma.com/file/eiZChxtc3V8K8Qbh9Z8Fca/APW?node-id=4246%3A0
(pedir acesso ao nosso gestor Caio caso necessário)
Tela: cta_rec_resumo (implementar a àrea demarcada em vermelho)

Empregar técnicas de componentização do ReactJS para reuso de componentes. Por exemplo, as

áreas do painel contendo os saldos, clientes e cobranças devem ter um componente base
reutilizável.
Os dados acima devem ser providos por uma camada de serviço com dados fictícios (mocados).
Exemplo de implementação:
https://www.section.io/engineering-education/mock-a-datasource-for-react-using-json-server/

6) Publicar solução em ambiente de desenvolvimento no ARQ3

a) criar microserviço K8S, esteira Docker, sigla APW, no site portal.nuvem.bb.com.br. O nome pode
ser apw-app-proitec (ou outro desde que não choque com um microserviço existente);
Após a criação o portal irá fornecer os endereços para o repositório do código fonte e paineis para acompanhamento
da construção e deploy em ambiente de desenvolvimento do ARQ3.

b) entregar o código fonte no repositório gitlab criado no passo acima;

Observação: existem arquivos presentes no estado inicial desses repositórios que são mandatórios para o CI/CD do
ARQ3 que não podem ser excluídos. Atentar para isso no momento do processo de merge.

c) ajustar Dockerfile para os processos de build e deploy;

Existem alguns projetos do grupo APW no gitlab que podem te direcionar nessa tarefa. Eu prefiro o modo multi-stage
(1a fase build e 2a fase runtime) utilizando o servido Nginx para servir componentes web.

d) ajustar repositório de deploy de desenvolvimento para publicação nesse ambiente;

Existem alguns projetos do grupo APW no gitlab que podem te direcionar nessa tarefa. O domínio (URL) precisa estar
compatível com a plataforma APW. Como é um projeto teste recomendo consultar a equipe do APW para compor um
nome que não choque com as outras soluções (Contas à Receber existe)
Após a realização dos passos acima solicite à equipe do APW a inclusão de regra do
seu bundle no serviço Ruller da plataforma APW. Pronto chegamos ao fim!

Sempre que precisar solicite ajuda!

Contatos para apoio:

F3188411 Felipe Santana (Substituto Guru)
F6322942 Lucas Milhomem (Desenvolvedor Funci APW)
F9842422 Willian Prestes (Scrum Master APW)

Roteiros extras ARQ3:

https://fontes.intranet.bb.com.br/dev/publico/roteiros
https://fontes.intranet.bb.com.br/aic/publico/atendimento/-/wikis/Pipelines/Docker