Architecture

Architecture

Summary: This app has two parts. The web app will be built using the Angular framework, written in TypeScript, JavaScript, HTML and CSS. Components will be formatted using Angular Material. Date, time, and scheduling will be implemented using Angular Common. Alerts for manual users will be implemented with the Notification API. User authentication will be handled with Firebase Authentication and Cloud Firestore will be used for dynamic data storage. Lastly, the web app will be deployed with Firebase Hosting services. The desktop app will be a Windows Service app that is downloadable from the web app. It will be built using the .NET framework, written in C#.

• Languages: TypeScript, JavaScript, C#, HTML, CSS
• Frameworks: Angular and .NET
• Libraries: No third-party libraries
• Services: FireBase (Cloud Firestore, Hosting, and Authentication)
• APIs: Angular Material, Notifications API, Angular Common
• Package/Build Manager: npm

---

Workload assignments

• Store user data with Firestore: desmartw
• User login: zhiquan
• User add process through reactive form: kelli-alan
• Implement timer, determinate progress spinner: pattersonhowell
• Implement notification API: BranavanKalapathy
• Deploy Web app: desmartw

---

UML Version 1.0

---

Web App Architecture

• Deployment: Firebase Hosting
• Single Page Application

Urls

• app/home/sign-in
  • GET: renders sign in page
• app/home/register
  • GET: renders registration page
• app/home/:userID
  • GET: displays tabular process data corresponding to user with userID
• app/home/addprocess/:userID
  • GET: pulls up add process form
  • POST: adds new process to user's homepage
• app/home/removeprocess/:userID/:processID
  • GET: displays warning message
  • POST: removes process corresponding to processID from user's tabular data, corresponding to userID
• app/home/analytics/:userID
  • GET: displays analytics for tracked processes belonging to user with given userID

Views of App:

Landing Page

---

Sign-in Page

---

Register Page

---

User Homepage

---

Add Process and Edit Process

---

Delete Process

---

Notifications

---

Analytics

---

Database Schema

1. Firebase Authentication/Users database contains:

• User email: string
• User password: string
• User id: uid

2. User Processes database contains:

• process id: uid (given by firebase)
• owner: uid (corresponds to user who added the process)

3. Process database contains:

• processes: string[] (all process names known by the system, used with helping automatic users find processes without knowing pid)

Queries

User query: This query will be used both in sign in and register pages to see if email and password match a user in the database

query(users, where("email" , "==", "given Email"), where("password", "==" "given password"))

User process query: This query will be used to find all processes connected to the signed in user

query(userProcesses, where("owner", "==", "signed in user's UID")

Process Database query: This query will retrieve all process that the Process database has.

query(process)

---

---

Desktop App Architecture

Release: There will be an installer that users and testers can install

UML

• App maintains state with memory and database. The Windows service will get the mac address and store it in memory. Other data will be from user and sent to firebase.
• Database schema is same as web app
• The windows service does not query the database but listens to the database, receives commands and executes them.
• Windows service works behind the scene so that there will be no user-interaction and no views