Developer Guide

WCAG Compliance Report

• WCAG Compliance Report

Technical Concept

Chat Concept

Project Introduction

Implementing Chat App on web and mobile APP

Terminology

Features

The main chat feature are:

1. Text message

2. File attachment

3. Video call

Technology Stack

• Rocket Chat

• Jisit

• Keycloak

• Laravel

• React JS

• React Native

• MySQL

• Hosting??

Architecture Overview

Diagrams

Purpose of this section is to include any additional diagrams that would clarify complex parts of the product.

User Stories

Web App

#	User Story Tile	User Story Description	Priory	Notes
1	Setup Rocket Chat and Jisi	As developer, I want a chat server setup on local/production environment, so we can integrate them into App
2	Create user automatically	As developer, I want to create a chat user after registered/created (from system)
3	Login automatically	As developer, I want the rocker user login after user login on Web app
4	Text Message	Total number of unread messages Search box Message list Message box refs. https://docs.rocket.chat/api/realtime-api/method-calls/login https://docs.rocket.chat/api/realtime-api/method-calls/get-subscriptions https://docs.rocket.chat/api/realtime-api/method-calls/create-direct-message https://docs.rocket.chat/api/realtime-api/method-calls/load-history https://docs.rocket.chat/api/realtime-api/method-calls/send-message
5	Video Call	refs. https://docs.rocket.chat/guides/user-guides/voice-and-video-conferencing https://docs.rocket.chat/api/rest-api/methods/video-conference/jitsi-update-timeout https://docs.rocket.chat/api/rest-api/methods/livechat/video-call https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-start

Mobile App

#	User Story Tile	User Story Description	Priory	Notes
1	Create user automatically
2	Login automatically
3	Text Message
4	Video Call

Current status

Purpose of this section is to discuss open issues / bugs, risks, and share any specific conclusions that the reader should walk away with

ERD

Mobile OTP

ref. https://developers.google.com/identity/sms-retriever

SMS API Service

Questionnaire Concept

Questionnaire list

Add Questionnaire

Rocket Chat Configuration for OpenRehab

Installation

It is already setup through docker-compose.yml of the project distribution package, the service named rocketchat and its dependencies mongo and mongo-init-replica.

After you start your docker containers, you should be able to access rocket chat through this URL: http://localhost:3000/

Admin registration / first startup

• Open this URL: http://localhost:3000/ in your browser, you will see the form step wizard with 4 steps

• In step #1: please make sure to use the real email account for Organization Email because Rocket Chat will do background verification. If you use fake email, your registration will failed. This email can be changed afterward.

• In step #3: please select "No" for Auto opt in new users for Two Factor via email. This option can be changed afterwards as well.
  

Configuration for OpenRehab

1. Allow user to have edit messages and delete private chat room. Search for edit-message and delete-p make sure its check under group: user

   

2. Enable Rest API security CORS. Go to General (search in Settings) → expand accordion REST Api → Enable CORS
   

Admin personal access token for Therapist and Patient service

You can find sample environment variables for both Therapist and Patient service from file .env.example. To generate access token click on admin profile thumbnail → My Account → Personal Access tokens

• Fill in the name of your access token for example: Admin Access Tokens for OpenRehab → click Add

• You might need to enter admin password for security verification

• There will be a popup with userId and token, please copy those values for ROCKET_CHAT_ADMIN_USER_ID and ROCKET_CHAT_ADMIN_AUTH_TOKEN of your .env file

ROCKET_CHAT_URL=http://rocketchat:3000
ROCKET_CHAT_ADMIN_USER_ID=
ROCKET_CHAT_ADMIN_AUTH_TOKEN=
ROCKET_CHAT_ADMIN_PASSWORD=H1V-CHAT@ADM1N

Admin Permission to Delete ChatRooms

You can find the screenshot below of how to configure the permission

Translation Module

Label localization

The Web/Mobile App would be possible updated by Backend admin, and they are fetched localize api (json) into local app storage, it would be updated again if there new localize changed.

Dynamic content

It is created a new separated record which is related the original record and sysLang. It would be applied for:

• Exercise

• Education Material

• Questionnaire

• Category

Static content

For static content (Language of the app itself), we will store each language in a separate file,
Translator will provide a new file with all translated text inside to the developer to manually add
it to the app

Use Cases

Use Cases of Back-end Admin

The figure below shows logical relationship of the components in Back-end Admin Web App

Use Cases of Therapist

The figure below shows logical relationship of the components in Therapist Web App

Use Cases of Patient

The figure below shows logical relationship of the components in Patient Mobile App

User Roles

WCAG

ref. https://www.w3.org/WAI/standards-guidelines/wcag/

Third Parties

A list of third party libraries, services and products used.

Internal

External