UBI Angular onboarding

Premise

All of the following paths will be relative to the FE_COMPONENT/iwb-migration folder, which you can find from the root of each branch. You'll need to work only in the iwb-migration folder, so you should download that directly, since SVN allows you to.

The Angular project uses Angular 8, don't try ng update, cause it's mostly pointless, risky and won't give you real benefits.

Project structure

This is the representation of the Angular project from its root (FE_COMPONENT/iwb-migration). This is the folder that you should open with the IDE.

.iwb-migration
+-- angular.json
+-- lib
+-- projects
|   +-- ubi-app
|   +-- ubi-core

ubi-core contains reusable stuff and the basic architecture (steppers, dialog, spinner, qrcode, etc.) ubi-app contains the real app containing the UI of the application (more info later).

Getting started

SVN checkout

svn://svnl101p.hbl.local/IWDD/IWD_FEIWBD/branches/20210721_iwb-migration/FE_COMPONENT​

Setup NodeJS

Get the binaries of node here: http://artl101p.hbl.local/nexus/content/repositories/raw-private/nodejs/v10.15.3/

Ensure your .npmrc config (in your %userprofile% folder) has the following lines

registry=http://artl101p.hbl.local/nexus/content/repositories/npm-public/
strict-ssl=false
sass_binary_site=http://artl101p.hbl.local/nexus/content/repositories/raw-private/node-sass/​

Setup your IDE

Assuming that you're using Visual studio code, you'll need 2 plugins to work with Angular:

• Angular Language Service (angular.ng-template)
• TSLint (ms-scode.vscode-typescript-tslint-plugin)

Get ready to develop

Open the terminal (be sure to be in the right folder) and run npm i. Wait for a long long time. Use npm run start or npx ng serve to serve your application, that you will see at http://localhost:4200.

The project

File naming

As suggested by Angular guides: iwb-some-stuff.type.ext

E.g. our prefix will be iwb so when creating an account-selector component we'll have:

• iwb-account-selector.component.ts
• iwb-account-selector.component.scss
• iwb-account-selector.component.html The exported class inside should be IwbAccountSelectorComponent.

Pay attention

The project was forked from an existing project, so, dispite the prefix should be iwb, several components will have the ubi prefix. More precisely, stuff under ubi-app which was modified to comply with the new requirements will have the iwb prefix. Onestly I wouldn't bother renaming the rest, because it's risky.

Everything under the ubi-core will have the ubi prefix and I would keep it that way to have consistency. So if you need to create something there, be like Bill.

Structure

This is the tree under the ubi-app folder:

.ubi-app
+-- tslint.json
+-- tsconfig.app.json
+-- src
|   +-- app
|   |   +-- components
|   |   +-- models
|   |   +-- services
|   |   +-- views
|   |   +-- app.component.ts
|   |   +-- app.module.ts
|   |   +-- app-routing.module.ts
|   |   +-- iwb-shared.module.ts
|   +-- assets
|   +-- scss

Files

• app.module.ts
  • The main module, where all the stuff with a global stuff is provided
• app.component.ts
  • The root component, with the selector iwb-root
• app-routing.module.ts
  • The main routing for the app. No edits should be made here, since all the useful routes should be under the intesa route.
• iwb-shared.module.ts
  • A module where all shared stuff is declared. Usually this is imported in each view module (see the Folders section below)

Folders

• assets
  • contains images and resources, including the dictionaries (used to have different texts based on the user profile)
• scss
  • global styles
• components
  • shared components which are specific to the project, like reusable stepper steps (see Dyna Stepper), sca, matrix, etc..
  • Each component is inside a folder named after the main content. E.g.: the IwbWizardStepperComponent will be under the wizard-stepper folder along the other files, as described in the File naming section.
• directives, models, pipes
  • specific stuff for this app
• services
  • specific servicess for the app, which may extend (customise) services in the ubi-core
• views
  • contains modules which are views, meaning their purpose is to handle a precise route of the application
  • Each module has its routing and usually contains 1 component declaration which is meant to be the page loaded for that route

Code quality

For the general rules of programming with JS and TS, refer to UBI frontend onboarding

private, protected, public, readonly

These modificators exist for a reason. If well used, they can help you build a resilient application. Use cases:

• public
  • usually in services and components: in services the method will be available where the service is injected; in components the method will be available in the view
• private
  • makes a member accessible only from the instance of the implementing class. E.g. everything in your component which isn't used in the view and eveything in your services which has an internal use.
  • Every private member should be prefixed with an underscore. E.g. private _myMember: boolean = !1
• protected
  • basically is like a private member but a protected member can be reached from derived classes.

::ng-deep, /deep/ and >>>

This pseudo selectors will be deprecated and shouldn't be used unless it's strictly necessary. And believe me if I say that in 0% of cases it's strictly necessary 😁. You can create a rule in a global style, like styles.scss or some style imported there.

Dyna Stepper

ubi-dyna-stepper is a powerful component to dynamically generate steppers from one simple config, directly in your routing.

How to

Say you want a dynamic stepper at /intesa/foo To obtain the stepper you need 2 things:

1. The component associated with the route must contain a <ubi-dyna-stepper></ubi-dyna-stepper>
2. The route data must contain a steps property, which is an array of items with such properties:
   • component: the component (the class) you want to load in that step
   • label: the label (a string) you want to show in the stepper. This can be a key in your dictionary since the Translate will try to get it's value if exists.
   • editable: a boolean to decide wether that step should be editable (refer to cdkStepper if you don't know what this means)

Example

The following example can be typically one of the routes for a targetUser (MK_A, MK_B, ecc..).

const myRoutes: Routes = [
  {
      path: IwbRouteKeys.wizard,
      component: IwbWizardStepperComponent,
      canDeactivate: [UbiCanDeactivateService],
      data: {
          steps: [
            {
              component: IwbWizardStepOverviewComponent,
              label: "my.dictionary.key",
              editable: !1
            },
            {
              component: IwbWizardStepPinComponent,
              label: "My step 2",
              editable: !1
            }
          ]
     }
  }
]

Environments

Basically we have only 3 environments:

• test-staging aka COLLAUDO
  • url: https://colliwbpi.iwbank.it/iw/
  • users: N/A
• CERTIFICAZIONE (testers)
• PRODUZIONE

Building angular

Locally

• Run npm run build:prod to build the production version of the app
• Run npm run build:local to build a version to be used when serving the Banking locally (Apache)

If you want to update new-col-line with your build you may need to manually copy the dist/ubi-app/ folder from your local branch to the checked out new-col-line.

Using Jenkins 2 (to deploy)

1. Merge on branches/new-col-line
2. Angular build on Jenkins 2 passing the branch above
   • This will produce a tag with the updated angular dist under tags/your-name you can use later (see Deploy)

Deploy (test-staging only)

Open CMA Jenkins and use the IWDD_IWD_FEIWBD_BUILD job, passing

1. The tag obtained with Jenkins 2 if you built through Jenkins 2
2. new-col-line if you built locally and merged

Set test-staging as JOB_DEPLOY_ENV and none as JOB_CHG_REQ