https://github.com/alexandrecpedro/santander-dev-week-bankline-app

Santander Dev Week - Bank statement generation system from Santander Bank
https://github.com/alexandrecpedro/santander-dev-week-bankline-app

android android-app angular bootstrap bootstrap5 coroutines eclipse eclipse-ide java kotlin postgres postgresql retrofit retrofit2 spring spring-boot springboot swagger swagger-ui

Last synced: 23 days ago
JSON representation

Santander Dev Week - Bank statement generation system from Santander Bank

• Host: GitHub
• URL: https://github.com/alexandrecpedro/santander-dev-week-bankline-app
• Owner: alexandrecpedro
• Created: 2022-05-07T01:30:13.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-25T18:30:10.000Z (over 2 years ago)
• Last Synced: 2024-11-09T08:30:01.275Z (3 months ago)
• Topics: android, android-app, angular, bootstrap, bootstrap5, coroutines, eclipse, eclipse-ide, java, kotlin, postgres, postgresql, retrofit, retrofit2, spring, spring-boot, springboot, swagger, swagger-ui
• Language: TypeScript
• Homepage:
• Size: 2.26 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    
 Sistema de Criação de Extratos Bancários do Banco Santander 








   





  SANTANDER DEV WEEK





 Objetivo •

 Tecnologias •

 Percurso 











 💡 Objetivo 

Construir um sistema de ciação de extratos bancários do Banco Santander, usando uma arquitetura robusta e testável, desde o frontend até o lado do servidor, envolvendo inclusive um aplicativo para Android.



Para o lado do servidor, construiu-se uma API RESTful com estrutura em Spring Boot.


Já para o lado do cliente (ou lado do frontend), permitiu-se que os clientes tivessem acesso a seus extratos bancários e o respectivo saldo.


No caso do aplicativo para Android, desenvolveu-se um app que explorasse o domínio bancário, ao consumir a API previamente construída. Usou-se o padrão de projeto MVVM (Model - View - ViewModel).








 🛠 Tecnologias 

As seguintes ferramentas foram usadas na construção do projeto:



|                Tipo                |      Ferramenta      |                Referência                |

| :--------------------------------: | :------------------: | :--------------------------------------: |

|     Programming Language (App)     |        KOTLIN        |         https://kotlinlang.org/          |

|                IDE                 |    ANDROID STUDIO    |   https://developer.android.com/studio   |

|  Scripts and dependencies manager  |        GRADLE        |           https://gradle.org/            |

|          Scripts language          |        GROOVY        |         https://groovy-lang.org/         |

|          HTTP API Library          |      RETROFIT2       |    https://square.github.io/retrofit/    |

| Programming Language (Server Side) |         JAVA         | https://docs.oracle.com/javase/tutorial/ |

|     IDE Eclipse (Server Side)      |       ECLIPSE        | https://docs.oracle.com/javase/tutorial/ |

|            Spring Boot             |     SPRING BOOT      |         https://start.spring.io/         |

|         API RESTful (JSON)         |       SWAGGER3       |           https://swagger.io/            |

|              Testing               |        JUNIT5        |        https://junit.org/junit5/         |

|              Database              |     POSTGRE SQL      |       https://www.postgresql.org/        |

|              Security              |         JWT          |             https://jwt.io/              |

| Programming Language (Client Side) |       ANGULAR        |           https://angular.io/            |

|             Bootstrap              |     BOOTSTRAP 5      |        https://getbootstrap.com/         |









  
Backend | API

  

  

  

  

  


  


  
Database

  

  


  


  
Frontend

  

  

  


  


  
Mobile App

  

  

  

  

  


  

  






 🔎 Percurso 




    
Aula 1 - Configurando/preparando os ambientes de desenvolvimento (Infraestrutura)

      



      


Backend

        
Instalar Eclipse (IDE) e JDK 8 (1.8)

        
Abrir e logar o Eclipse com JDK 8 (1.8)

      

      


      


Banco de Dados

        
Instalar PostgreSQL

        
Abrir, logar e criar um novo banco de dados (banklineapi_db) no PostgreSQL

      

      


      


Frontend

        
Instalar e abrir VS Code

        
Instalar NodeJS

        
Instalar Angular CLI na raiz do projeto

      

      


      


Mobile - Android

        
Instalar e abrir Android Studio

        
Criar novo projeto: Bankline-Android

        


          
Entendo o conceito do projeto mobile para Android

            
Parte 1 - Introdução ao Desenvolvimento Mobile

            
Parte 2 - Android Nativo: Ambiente de Desenvolvimento

            
Parte 3 - Android Nativo: Estrutura de Projetos

          

        

      

    

    


    
Aula 2 - Abstraindo o domínio bancário em uma API REST com Java Spring Boot (Backend)

      


        
Abrir o Spring Initializr e configurar o Spring Boot

        
Gerar o arquivo Spring Boot e abrir no Eclipse

        
Verificar as dependências a serem usadas e configurar o Maven

        
Construir a API em Java Spring Boot - classes, objetos, datas e interfaces

        
Fazer arquivo de configuração de acesso ao PostgreSQL

        
Integrar o Swagger 3 para documentação da API, adicionando a sua dependência no projeto

        
Buildar os arquivos principais da API

        
Testar as rotas no SWAGGER

        URL: http://localhost:8080/swagger-ui/index.html

        

        
Subir código no GitHub e fazer conexão desses arquivos GitHub no Heroku

      

    

    


    
Aula 3 - Construindo um Frontend Angular de extrato bancário

      


        
Abrir teminal de comando do VS Code na pasta do projeto 
 

        
Instalar, no NodeJS, o Angular CLI: npm install -g @angular/cli

        
Novo projeto: ng new nomeProjeto 

        
Iniciando projeto: ng serve --open || ng serve -o

        


        


Construção do App

          
Novo componente: ng generate component nomeComponente 

          - exibir as movimentações: ng g c components/movimentacao-list


          - adicionar uma nova movimentação: ng g c components/movimentacao-new

          
Configurando a rota para exibir os novos componentes: src/app/app-routing.module.ts

          
Removendo conteúdo gerado pelo Angular e exibir nossos componentes: app.component.html

          
Adicionando a biblioteca do Bootstrap pelo angular-cli: ng add @ng-bootstrap/ng-bootstrap

            Ps: Se ao tentar instalar o bootstrap apresentar algum erro, execute os comandos: 

            (1) npm config set legacy-peer-deps true

            (2) ng add @ng-bootstrap/ng-bootstrap

          

          
Criando uma variável que representará as nossas movimentações: movimentacao-list.component.ts

          
Estruturando a tabela que exibibirá as movimentações: movimentacao-list.component.html

        

        


        


Backend CORS

          
Configurar CORS: com.dio.santander.bankline.api.config/WebConfig.java

          
Rodar backend SpringBoot

        

        


        


Integrando com nossa API

          
Criando o serviço de movimentações: ng g s services/movimentacao 

          
Adicionar duas dependências no projeto:

          // app.module.ts

            import { FormsModule } from '@angular/forms';

            import { HttpClientModule } from '@angular/common/http';

            @NgModule({

              imports: [

                FormsModule,

                HttpClientModule

              ],  

            })

          

          
Criar recurso para movimentações já realizadas: movimentacao.service.ts

          
Determinar que quando o componente de listagem de movimentações for carregado seja realizada uma requisição à nossa API: movimentacao-list.component.ts

        

        


        


Formatando campos na tela

          
Adicionado algumas configurações no módulo do projeto: app.module.ts

          
Adicionando as formatações nos campos Data Hora e Valor: movimentacao-list.component.html

          
Aplicando estilo com base em uma condição em nossos registros: movimentacao-list.component.html

          
Adicionando o botão Novo na página de movimentação: movimentacao-list.component.html

          
Centralizando o conteúdo da página: movimentacao-list.component.html

          
Configurando a rota para a página para cadastrar uma nova movimentação: movimentacao-list.component.html

        

        


        


Nova Movimentação

          
Exibindo e atualizando campos para entrada de nova movimentação: movimentacao-new.component.html

          
Criando o serviço para acessar os recursos de Correntista: ng g s services/correntista

          
Inserindo a regra de negócio: services/correntista.service.ts

          
Conectar a nossa API para buscar os correntistas do banco de dados: components/movimentacao-new.component.ts

          
Exibir os correntistas na tela de nova movimentação: movimentacao-new.component.html

          
Criar uma variável correntista para poder identificar qual foi o correntista selecionado: movimentacao-new.component.ts

          
Instalar componente ng2-currency-mask: npm i ng2-currency-mask

          
Definir uma máscara no campos R$ Valor: transaction-new.component.html

        

        


        


Incluindo uma movimentação

          
Adicionando o método de inclusão (POST) via API: services/movimentacao.service.ts

          
Criando o método para ser chamado na tela e assim incluir a movimentação: components/movimentacao-new.component.ts

          
Executar o método save no click do botão Confirmar: components/movimentacao-new.components.html

        

        


        


Movimentações por Correntista

          
Interação constante com a API Back-end, e isso será via Swagger

          
Refinando nossa tela de consulta de movimentações: transaction-list.component.html

          
Criando o serviço para listar as movimentações por correntista: 

          services/movimentacao.service.ts && components/movimentacao-list.component.ts

        

        


        


Correntistas

          
Novo componente correntista: ng g c components/correntista

          
Nova rota para novo componente: app-routing.module.ts

          
Navegação simples para a rota correntistas e CorrentistaComponent: movimentacao-list.component.html

          
Tela para inclusão e listagem de correntistas: components/correntista.component.html

          
Regra de negócio para inclusão e listagem dos correntistas: 

          components/correntista.component.ts

          
Criando mais uma funcionalidade no serviço de correntistas: 

          services/correntista.service.ts

        

      

    


    

Aula 4 - Construindo um App Android de extrato bancário

      



      


Parte 1 - Conhecendo a API: Modelagem do Domínio

        
Domínio/Problema - desenvolver um app Android nativo que explore o domínio bancário (o extrato com as movimentações do correntista)

        
Integrando o Parcelable: id 'kotlin-parcelize'

        
Ativando a viewBinding em build.gradle

          // Reference: https://developer.android.com/topic/libraries/view-binding

            buildFeatures {

                viewBinding true

            }

        

        
Construir as views os modelos de domínio e ui, bem como os seus respectivos layouts

        
Atualizar o AndroidManifest.xml

      

      


      


Parte 2 - Construindo a UX/UI: Material Design

        
Padronizar os temas, cores, dimensões e strings em inglês e português

        
Novas dependências a serem adicionadas:

          // Additional dependencies AndroidX:

            implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'

        

        
Criar classe BankStatementAdapter.kt

      

      


      


Parte 3 - Consumindo a API: Retrofit, Coroutines e LiveData

        
Injetar dependência do Live Data

          // Additional dependencies AndroidX:

            implementation 'androidx.activity:activity-ktx:1.4.0'

            implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.4.1'

        

        
Injetar dependência do Retrofit em build.gradle:

          // Reference: https://github.com/square/retrofit

            implementation 'com.squareup.retrofit2:retrofit:2.9.0'

            implementation 'com.squareup.retrofit2:converter-gson:2.9.0'

        

        
Criar BanklineApi interface com coroutine: data.remote.BanklineApi.kt

        
Criar BanklineRepository (padrão singleton): data.BanklineRepository.kt

        
Criar State (sealed class): data.State.kt

        
Criar BankStatementViewModel (class): ui.statement.BankStatementViewModel.kt

        
Integrar Binding com SwipeRefresh: ui.statement.BankStatementActivity.kt

      

      


      


Parte 4 - Conclusão e dicas finais

        
Modificar ícone do app

        
Possibilidades de melhorias no app: verificar os To Do's (TODO)