Smart-accounts-experience NPM

Backbase Accelerators Project (Widget)

Technologies:

Angular 8
Bootstrap 4
Sass
PrimeNg
BackBase Design System
Ngx libraries

Setup:

To run this project, install it localy using npm:

$ npm install

Build && Deploy:

In IDE Terminal run:

You can find this scripts in package.json.

$ npm run sharedPackage // Create bundle with *shared* config
$ npm run prodPackage // Create bundle with *production* config

Generate Data Modules using RAML files:

$ ng generate @bb-cli/schematics:data-module --name consent-specification --ramlPath ../../raml/consent-specification/api.raml
$ ng generate @bb-cli/schematics:data-module --name accounts-specification --ramlPath ../../raml/accounts-specification/api.raml
$ ng generate @bb-cli/schematics:data-module --name balances-specification --ramlPath ../../raml/balances-specification/api.raml
$ ng generate @bb-cli/schematics:data-module --name transactions-specification --ramlPath ../../raml/transactions-specification/api.raml
$ ng generate @bb-cli/schematics:data-module --name token-specification --ramlPath ../../raml/token-specification/api.raml

Data Modules && API Services:

Data Modules:
* libs -> consent-specification [Consent API Data Module] -> methods [postConsentRecordByBankName(), getAvailableBanks()]
* libs -> accounts-specification [GetAccounts API Data Module] -> method [getAccountsRecordByBankName()]
* libs -> balances-specification [GetBalances API Data Module] -> method [getAccountBalancesRecordByAccountIdByBankName()]
* libs -> transactions-specification [GetTransactions API Data Module] -> method [getAccountTransactionsRecordByAccountIdByBankName()]
* libs -> token-specification [Token API Data Module] -> methods [postTokenRecordByBankName()]

API Services that are integrated in Widget Components:
* libs -> smart-accounts-widget -> api-services -> api-specification.service.ts -> methods:
    * getAvailableBanks()
    * postConsentRecordByBankName()
    * postTokenRecordByBankName()
    * getAccountsRecordByBankName()
    * getAccountBalancesRecordByAccountIdByBankName()
    * getAccountTransactionsRecordByAccountIdByBankName()

Auth interceptor

If the login session expires you will be redirected to the login page...

* libs -> smart-accounts-widget -> api-services -> auth.interceptor.ts

Main Widget (smart-accounts-widget)

* libs -> smart-accounts-widget -> src -> lib -> smart-accounts-widget.component.ts
* libs -> smart-accounts-widget -> src -> lib -> smart-accounts-widget.module.ts

UI Components used in Main Widget

* libs -> smart-accounts-widget -> src -> lib -> bank-authorization [html, ts]
* libs -> smart-accounts-widget -> src -> lib -> bank-transactions-list [html, ts, pipe]
* libs -> smart-accounts-widget -> src -> lib -> dashboard [html, ts]
* libs -> smart-accounts-widget -> src -> lib -> new-bank [html, ts]

Application routes

routes: [
    { path: '', component: DashboardComponent, pathMatch: 'full'},
    { path: 'add-new-bank', component: NewBankComponent },
    { path: 'bank-auth', component: BankAuthorizationComponent },
    { path: 'transactions-list', component: BankTransactionsListComponent }
  ]