1 of 17

FireFlyer

Declutter your news

Joel Julin

Mikey Morrissey

Jefferson Leonata

Deliverable 2: Software Architecture Pitch

2 of 17

A Quick Review of our Project:

FireFlyer: a modern news application with an easy to navigate interface.

  • A platform built for the best user experience
  • A premium service for those dedicated to keeping up with current events

3 of 17

Software Architecture Overview

4 of 17

We chose the Model-View-Presenter design pattern

Software Architecture Diagram

Model (Jeff)

Presenter

View (Joel)

User

Article

Authentication

+

Cloud Firestore

Home Page

Search Page

Profile

5 of 17

Our Model

Jeff Leonata

ArticleModel

String title

List contributors

String articleURL

String thumbnailURL

int progress

Boolean status

DateTime creationTime

UserModel

String id

String name

List<ArticleModel> savedArticles

Firestore

Flutter service

6 of 17

We can use our Flutter App to read/write data to Firebase

CollectionReference articles = FirebaseFirestore.instance.collection(“articles”);

// We can use articles.add for reading

// or articles.set for writing new data

7 of 17

View

Joel Julin

The View is what the user will directly interact with and consume (home/profile page, search bar, article)

  • Takes user input and sends it to the Presenter to update the Model
  • Is updated based on the user interactions and Presenter updates

View

Presenter

Model

8 of 17

Presenter

The Presenter serves as the main communication between the Model and View

  • Retrieves data from the Model, updates the Model with new data from the View
  • Receives input data from the View, updates the View when a new page is loaded

Presenter

Model

View

Mikey Morrissey

9 of 17

Key Task Software Pathways

10 of 17

To implement our app, we will have seven key tasks.

  1. Profile Page
  2. Login Page
  3. Search Page
  4. Article View Page
  5. Categories
  6. Gallery
  7. Navigation

11 of 17

User Profiles

Users can sign in to their user profile if they are registered. The view presents the user profile page which contains favorited articles as well as the ability to sign out. The presenter pulls user information from the model and populates the favorites section with favorites for that specific user. Signing out causes the view to change to the login page. The presenter is updated to reflect that no user is currently ‘logged in’.

12 of 17

Login

The view presents the user with a basic login page. Any attempt to login prompts the presenter to send the login credentials to the model to determine if a user with those credentials is stored in our database. On successful login, the presenter changes the view to the home page which is populated with specific user information from the model. On unsuccessful login, the view remains at the login page, however, the presenter adds a dialog that indicates that the login was unsuccessful.

13 of 17

Search Bar

View presents a home page with a search bar at the top. Upon entering information into the search bar, the presenter will send the user input to the model (containing Firebase implementation) to be queried. While in the model, a list of the most related articles will be composed, sent through the presenter, and presented to the user as an updated view.

14 of 17

Viewing an Article

View presents home or profile page, user input (article thumbnail clicked) is sent through the presenter, the clicked article’s viewing status is retrieved from the model (Firebase) and an updated view with the option to continue/start reading is shown. User selects the option, selection passes through the presenter, then either the stored location or new location of the article content is retrieved from the model and the user is presented a link to go to the host website (WSJ, Forbes, etc.)

15 of 17

Categories

Four categories:

  1. Editor’s Picks
  2. Favorites
  3. Most Read
  4. Here’s what you missed

For each news article, we will have a category id that maps to the four categories.

16 of 17

Gallery

17 of 17

Navigation

Material Design widget: AppBar.bottom class