Low level Design Document - shariqs/tickets GitHub Wiki

Components breakdown

Our platform will be based upon the MVC architecture, which provides a modular design that reduces coupling and effectively utilizes object-oriented technology. Our “Model” layer is essentially just our firebase database platform. This is where the data resides, it does not manage or manipulate itself. Our “Controller” layer will be the Services, which act as middlemen between the API’s, Database, and the Components. The Components make up the view layer. They are what the user sees. They receive data and commands from the Services in order to properly render themselves.

Main view:

The main screen will be controlled by the AppComponent provided by Angular2 with holding Boolean values in order to control the onscreen's pages. The value will be passed in and accessing different pages will change the value of the Booleans. Here we will use the EventService in order to fetch the current events, sort out the potential popular events displays a list of 5 combine with images. In additional to that the StateService:

  1. showLoginPage(): true/false
  2. showSearchPage(): true/false
  3. showBrowsePage(): true/false
  4. showTicketDisplayPage(): true/false
  5. showCartPage(): true/false

Services/Components Uses:

  • EventService
  • StateService
  • EventListComponent
  • MapService
  • DataService

Pseudo code:

backend page loading:

while(!showMainPage()): if ... . == true then show page else console log error end

displaying the event:

for item in list.getEvents() {{item}}

Search view:

Search view will be using the EventService combine with the EventListComponent in order to display a list with functions to search, filter and query things such as locations, price ranges and dates.

Services/Components uses:

  • EventListComponent
  • DataService
  • EventService

Pseudo code:

displaying the event:

for item in list.getEvents() {{item | filter:argument1:argument2:…}}

EventListComponent.updateList(events)

Account view:

Account view will be using the Firebase provided by Google as the back-end server data. Joining with the function of DataService from Angular to pull and push requesting data from the server. Displaying a user’s transaction history using TransactionHistoryComponent.

Services/Components used:

  • TransactionHistoryComponent
  • Data Service

Pseudo code:

list = getXData(user)

for item in list {{ item.id + “ “ + item.date + “ “ + item.price}}

Browse view: Browse view will display the upcoming events that are closest to the current date first.

Components/Services Used:

  • EventListComponent
  • EventService

Pseudo code:

li ng-repeat="x in list.getEvent() | orderBy:”’date'">

{{ x.name + ', ' + x.price }}

Purchase view:

Cart’s pop up will be displayed here, with the time limits of 5 minutes to complete the transactions (using a directive from Angular ).

The services/components used:

  • TransactionComponent: display the pops up to check out
  • MapService: using Google’s map API to determine the delivery
  • TransactionTrackingComponent: part of the MapService, real time tracking of the delivery’s progress
  • DataService: store a copy of receipt into the user’s account

Pseudo code:

while(!finish)
	timer
	if timer == 50000 then break;		
	else
		DataService is called
		transfer data into Firebase
		call for Delivery
		process tracking
end
  1. Sell View

The Services/Components used:

  • TransactionComponent: display the pops up to check out
  • MapService: using Google’s map API to determine the delivery
  • TransactionTrackingComponent: part of the MapService, real time tracking of the delivery’s progress
  • DataService: store a copy of receipt into the user’s account

Pseudo code:

while(!finish)
	timer
	if timer == 50000 then break;		
	else
		DataService is called
		transfer data into Firebase
		call for Delivery
		process tracking
end

Architecture Flow

Backlog

⚠️ **GitHub.com Fallback** ⚠️