EVInsider Web App

for MIE350: Design and Analysis of Information Systems

with Niloo Alirezaie, Firas Abu Askar, Danny Ghanem, Sarah Mansour, Shreya Mehta, and Ketro Yang

from September 2020 to December 2020

While electric vehicles are on the rise as a way to combat global warming and the effects of climate change, knowing what is available in Canada is still a challenge. We designed and built a consumer information site for EVs available in Canada, allowing users to search and compare cars, and also create an account and log in to save cars to their wish list.

Teamwork Strategy

We scheduled weekly meetings on Zoom, and selected one additional hour mid-week if an additional quick meeting was necessary. We stayed in touch using Messenger, collaborated on reports using Google Drive, and created the web app using a Microsoft Access database and Java in the Eclipse IDE.

Design and Development Process

Requirements analysis

We identified functional and non-functional requirements, then categorized them as must-haves, should-haves, and could-haves. Some of them were:

Must-have functional requirements
- Search for vehicle models
- View vehicle models
Must-have non-functional requirements
- Compatible with commonly used browsers
- Compatible with commonly used operating systems
Should-have functional requirements
- Create user accounts
- Sort and filter vehicle models
- Add vehicles to wish list
- Compare vehicle models
Should-have non-functional requirements
- Easy and consistent navigation
- Account security
Could-have functional requirements
- Share user comments and ratings
- Recommend vehicles based on user preferences

Use cases

We wrote four use cases. Here is an example of one:

Use Case 1: Manage User’s Account

Entity-relationship, data flow, and UML diagrams

We used entity-relationship diagrams to design our database. We made Level 0 and Level 1 data flow diagrams of the use cases to gain a better understanding of them. We created UML (use case, class, state chart, sequence, activity) diagrams to visually represent and communicate our object-oriented system design.

Diagrams

The web app

We created our web app using a Microsoft Access database, SQL, Java, HTML, CSS, and Javascript. We coded using the Eclipse IDE and ran it using an Apache Tomcat server. Some screenshots of our web app are shown below.

Screenshots

Improvements

Due to time constraints and the nature of this course, we prioritized functionality over UX design when building the web app. Given more time, these are some changes we would implement.