web-tobi-2-app v0.0.1

TOBi2 web app

This is the repository for the TOBi 2 chatbot.

• Product Owner: Darragh Keogh
• Scrum Master: Andrejs Kasurins
• Dev Team Lead: Mihai Rotaru

Overview

• repo: https://vfuk-digital.visualstudio.com/Digital/_git/web-tobi-2-app
• base boilerplate: https://vfuk-digital.visualstudio.com/Digital/_git/web-client-boilerplate
• sprints/Kanban board: https://vfuk-digital.visualstudio.com/Digital/_sprints/taskboard/Chatbot
• TOBi documents: https://vodafone.sharepoint.com/:f:/r/teams/Digital/technology/Shared%20Documents/Channels/TOBi%20Chatbot?csf=1&web=1&e=NAD2cJ
• detailed diagram: https://vodafone.sharepoint.com/:u:/r/teams/Digital/technology/_layouts/15/Doc.aspx?sourcedoc=%7B084070D7-F038-4282-A9D0-C9612652CCF4%7D&file=Tobi%202.0%20-%20Architecture%20Design%20Diarams.vsdx&action=default&cid=7cb7753e-429f-4c95-8244-8557a2c8a1e9
• TOBi team wiki: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/5745/TOBi-Wiki
• other teams: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/2653/Teams

Getting Started

• to be able to clone repositories, make sure your (public) SSH key is added to your account (guide)
• to be able to install first-party npm/yarn dependencies, follow this guide
• if getting SSL errors in chrome: chrome://flags/#allow-insecure-localhost
• some services (like IDM, which handles auth) are hosted internally; in order for them to work one needs to connect to bastion
• to clone and run the app locally:

$ git clone vfuk-digital@vs-ssh.visualstudio.com:v3/vfuk-digital/Digital/web-tobi-2-app
$ cd web-tobi-2-app
$ yarn install
$ yarn nps start

• Note: you might run into gyp ERR! build error while running yarn install, Possibly it's Node version. At the time of writing v14 is working and later ones are not!

Notable Dependencies

• core-v2 - library of components - repo, wiki, preview
• Dalmatian - auth proxy - repo, wiki

Used APIs

• DX-IDM for managing authentication and authorization, via Dalmatian IDM middleware
• Nuance provides programmatic access to its chat agents; for sample code, see the ./nuance folder
• Nuance Agent development environment: https://agent-vodafoneuk-demo.lle.digital.nuance.com/ (ask @VasilMarchev for credentials)
• Nuance Customer Interface API
• DXL (Digital eXperience Layer, formally DAL - Digital Access Layer) wiki

Development Startup Process

• on yarn nps start, nps will read ./package-scripts.js which requires this file
• this will result in running webpack-dev-server with some env vars, mainly NEUTRINO_CONFIG set to "client"
• webpack-dev-server will read webpack.config.js, which will run neutrino
• neutrino reads .neutrinorc.js, selects a config from ./tools/webpack based on NEUTRINO_CONFIG
• when NEUTRINO_CONFG is "client", the config file is ./tools/webpack/client/neutrino/neutrino.config.ts
• the client config extends vfukPresets/clientTypescript/clientTypescript.ts preset
• the vfukPresets/clientTypescript/clientTypescript.ts preset uses most presets in neutrinoPresets/client - among them, devServer
• the clientTypescriptPreset takes an obj as param, and will pass devServer.customServerMiddleware to the devServer preset
• the devServer preset passes customServerMiddleware to webpack-dev-server as the before arg
• the custom middleware is in the src/server/development/index.ts file
• middleware loads env variables from the file specified with --env from the ./env folder (using @vfuk/web-config-dotenv)
• middleware then runs ./src/server/development/neutrino.server.config.ts
  • invoke vfukDevServer preset (injects routes, env variables, cors, json, cookie parser)
  • load Dalmatian config, from ./src/server/common/middleware/Dalmatian/dalmatian.ts
  • load DXL auth config, from DxlAuthService
• application is running at https://localhost:8000/webchat-ui/ (important: use https and slash at end of the link)
• use following url attributes at the end of the link to trigger Nuance business rules manually and start up Nuance API.
  • ?nuance=PCIAPIWatson&agentref=gtp-pre1 triggers Watson responses
  • ?nuance=PCIAPI triggers live agent busienss rule and connects with Nunace Live Agent platform
  • ?mock-nuance triggers UI without connection to Nuance, useful to test locally on mobile/ mobile emulators or whenever Nuance is not available.
• to login with OTAC
  • type "login" in the chat input
  • user name / password: 7000780473_VF / testing1
  • choose any of the phone numbers, and enter 12345 as the OTAP
  • more credentials here

Notes

• DX-IDM can be brittle; if issue persist, contact heimdall_public (https://vfuk-digital.slack.com/archives/CJJUP9TQQ)
• useful filter for dev tools network panel: -/(pagead)|(ads\.linkedin)|(adrum)|(bing\.com)|(submit-events)|(woff)|(kampyle\.com)|(tags\.tiqcdn)|(logging\/logline)/
• useful filter for dev tools console: -/tcFramework/ -/postToServer/ -/InqFramework/ -/HMR/ -/WDS/
• if seeing errors like [hardsource:02bc0307] Could not freeze ./src/client/routes.tsx: Cannot read property 'hash' of undefined:
  • rm -rf ./node_modules/.cache/hard-source/

Notable Development Dependencies

• nps controls available npm/yarn scripts (see web-client-boilerplate-core package scripts)
• neutrino is used to wrap Webpack configuration (see web-client-boilerplate-core neutrino presets)
• iframe communications via Postmate, which wraps window.postMessage
• more WIP documentation - on neutrino, nps

Application Boot Process

• as defined in the React neutrino preset, the index.ejs file is used as a template
• links to compiled application code, also to the vendors bundle and Webpack runtime will be injected into the template

Interaction with Chatbots

• there are two kinds of interactions: request/response, and event-based
• request/response - all normalized to return promises:
  • start engagement
  • send message
  • send data
  • request email transcript
  • end engagement
• event-based - must register a callback:
  • initialization complete (engagement can be started)
  • agent chat message received
  • connection lost/re-gained

Build and Test

Locally

• to run unit tests locally: yarn nps test
• to run Cypress tests, without the GUI: ./node_modules/.bin/cypress run
• to open Cypress GUI: ./node_modules/.bin/cypress open
  • Note: the application needs to be started (e.g., with yarn nps start) before running Cypress
• to run only test(s) containing the string "foo" in description: yarn nps "test -t foo" or yarn test-filter "foo"

DevOps

• https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/6577/TOBi-DevOps

Contribute

Code Style

• styleguide: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/152/Coding-Styleguide
• React-specific guidelines: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/155/Overview-React
• JavaScript gudelines: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/160/Javascript
• eslint config: https://vfuk-digital.visualstudio.com/Digital/_git/lib-web-config-eslint
• run yarn lint:eslint locally to check

Pull Requests

• pull requests and code review: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/2473/PR-and-code-review-guidelines
• preffer short-lived branches, and rebase master at least once a day
• treat pull request review as a high priority item - a PR should not be outstanding more than one day

Commit Message Format

• conventional commits: https://www.conventionalcommits.org/en/v1.0.0/
• use imperative tense (not past tense)
• prefix with feat, fix or any of the other supported prefixes
• if the commit only affects a certain module/functionality, include it after prefix
• example commit with module: fix(media): large images not scaled
• example commit with module: fix(auth): user able to see information of other users
• example commit without module: feat: add support for feature x

Branching

• github-flow: https://guides.github.com/introduction/flow/
• branch off from master; branch name should include associated work item number, and a brief description
• branch should include a prefix: feature/xxxx
• branch should use dashes not underscores
• example branch name, when it relates to work item: feature/12345-implement-feature-x
• release branches not used/created currently - releases controled via the Azure pipeline, described above

Testing

• https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/157/Overview-unit-tests
• run yarn jest locally

Other

• marking tickets as ready/done: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/701/Definition-of-Done-(DoD)
• supported browsers - list updated every month: https://vodafone.sharepoint.com/:b:/r/sites/DMC/Shared%20Documents/Browser%20Specification/2020/Browser%20Specification%20August%202020.pdf?csf=1&web=1&e=NokP9t
• for app local state monitoring, mobx remotedev package allows us to use chrome redux-devtools-extension to monitor, inspect and dispatch actions. github page: https://github.com/zalmoxisus/redux-devtools-extension, chrome extention page: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd