Architecture
This will be a hybrid mobile app, written in Dart using the Flutter framework. We will use the MapBox API, built on top of Google maps, along with several MapBox-related flutter libraries, to integrate maps, routing, and GPS functionality into our app. We will use Google firebase's real-time database for cloud data and firebase authentication for user accounts. We will also use some UI libraries, such as material.dart, widgets.dart, and cupertine.dart to enhance the UI of our app and navigate.dart will be used to pass object from one page to another as we navigate to ensure we are displaying the proper user-specific data.
Dart is Google's object-oriented language that is used to create flutter apps
Flutter is Google's hybrid app framework, which we will use to build an app that will compile natively on both Android and iOS platforms.
We have chosen Android Studio because of its built-in integration with the flutter app framework as well as the ease of testing our app through mobile phone emulators.
click here to search for a flutter library
- This library gives flutter support for the most up-to-date iOS widgets, which will allow our app to have a more native feel when we deploy in iOS
- The material library contains visual design tools and frameworks and is used in almost every flutter app
- We will use this library to build core UI elements and add icons
- This library allows a flutter app to connect to the Google Maps API. We are planning to use mapbox, which is built on top of Google maps, so it is unclear to what extent we will need this library, but it may provide helpful functionality
- Also, if mapbox doesn't work out, we could always fall back to Google maps instead
- This is the primary library to integrate Mapbox maps into a flutter project
- This adds turn by turn navigation to our app, which will allow the user to get directions from their current location to a historical marker of their choice
- This will allow us to integrate mapbox's search feature to allow a user to search for historical markers in our app
- We will use this library to get the user's current location and perform other basic GPS functionality in our app
- Firebase will be the backend for our app, where we store all user and map data. This core library is used to establish connections to the associated Firebase.
- We will need the firebase library to access all database and data storage functionality. This library handles writing and reading from Cloud Firestore, which is Firebase's database/storage service.
- We will use this library for user authentication
- We will specifically use the CustomPaint class inside this library for some UI design
- There will also be various other uses for this library, as most of flutter is built on the concept of widgets, so this library will be used to enhance all areas of the app
- This library allows us to pass object data when routing between pages, which will be helpful when navigating to user-specific pages with custom lists, such as the user's wishlist, visited markers, or saved markers pages, so we can display only the appropriate marker information based on the user
- This library allows us to integrate notifications using flutter. This will be helpful in terms of alerting the user to friend requests, or letting them know that they have reached a new marker.
- We will use Google Firebase Authentication for user authentication services
- We will also store our data in Firebase through its Cloud Firestore functionality, including user account information, map and marker data, and user preferences/ saved locations, etc.
- MapBox is an API that allows developers to integrate map and GPS related services in apps
- MapBox is built on top of Google maps and is highly customizable
- Specifically, we will use MapBox to integrate a map into our app, display marker data, track user location, navigate and route to markers, etc
- We do not have much experience with MapBox, so we are prepared to supplement its features with Google Maps or abandon MapBox entirely if needed, thus we are including Google Maps here so we will have it as an option as we work on development
- Gradle is the build tool used to build Android apps, so we will use it to build our flutter app to Android environments
- Cocoapods is the dependency manager for iOS apps, so when we build to an iOS environment, we will be using CocoaPods. Matt is the only one with a Mac, so we will likely be building primarily in an Android environment as we design.
Release: How will you create and deliver a binary to testers? The testers include us (the teachers of this class, when we grade your app). You must deliver a simple to install app: double-click to install.
Flutter is a multiplatform development toolkit, so we will be delivering both an Android and iOS binary to test. For Android, we will upload the built .apk to the GitHub Release. For iOS, we will release it on TestFlight and send email invitations. Each release will need to be built to be suitable for distribution.
Are you using Virtual Machines (vmware, vbox, etc) or Containers (docker) for development? If so, explain.
Android Studio has built-in emulators of several Android and iOS devices. Development of app will be tested on the iPhone 7 emulator for respective iOS operating devices and the Samsung Galaxy s10 emulator for Android operating devices. These are the most popular devices for both systems as of October 11, 2021.
The Models for your app. These could be UML class diagrams, or just models with attributes (with type) and descriptions (in English).
We will maintain state in memory. The database is purely a carrier for the information. There really will not be the need of a state beyond the state of the map view versus the list view. These two views can be the two states of our app held locally. These will both just reflect the data from the database so the database will remain stateless.
If you are using a db-backend (say firebase) then include the Database schema: set of tables/documents with list of attributes and their types.
- Markers: This collection stores all of the marker information.
- Each document in this collection is a unique Marker with the following fields:
- Name (String)
- Relative Location (String)
- Description (String)
- GPS Coordinates (Array of 2 Numbers)
- County (String)
- Each document in this collection is a unique Marker with the following fields:
- A collection is created for each unique user using their username as the collections name. Firebase Authentication handles username and password storage, so this collection is used to store a user's associated Marker lists.
- The first layer after a collection must be documents, so each user collection has a document called "lists".
- Two collections called "wishlist" and "visited" are contained in the "lists" document.
- Each document in these collections is a Marker with the same field as in the "Markers" collection.
- These collections will also hold a document called "dummy", with the same fields as a Marker. Each String field is "dummy" and the number array for GPS is [0,0]. This document exists because Cloud Firestore will automatically clean up empty collections, so a dummy document is created to allow the lists to persist even if technically "empty".
- Two collections called "wishlist" and "visited" are contained in the "lists" document.
- The first layer after a collection must be documents, so each user collection has a document called "lists".
Commonly Needed Queries:
- Filter "Markers" by a specified county.
- Query a user's "visited" collection for contained Markers excluding the "dummy" document.
- Query a user's "wishlist" collection for contained Markers excluding the "dummy" document.
The Views of your app: name, describe. Embed the images from your Design Milestone. Typically, one page in the app is composed of multiple View elements.
- Header (Search Bar): Appbar using a text field of some kind (FormField or similar) to allow user to input and search
- Marker Desc.: Pop-up text box describing highlighted marker
- Unseen Marker, Visited Marker, Multiple Marker: Icons located on map that point out markers
- Menu Button: Icon that expands menu
- Marker list button: Icon that expands marker list
- Map: Uses API to display map
- Header (Search Bar): Appbar using a text field to allow user input
- Filters: Buttons that can be selected to filter marker results
- Marker List: Individually contained areas with marker name, photo, and distance in a scrollable list
- Menu button, home button: Icons that are used to navigate to other pages
- Header (Search Bar): Appbar using a text field to allow user input
- Filters: Buttons that can be selected to filter marker results
- Marker List extended: Individually contained areas with marker name, photo, description, ability to favorite, and ability to view on map
- Marker list button, home button: Icons that are used to navigate to other pages
- Menu area: Contained space covering 2/3rds of the screen for the menu
- Menu Header: Contains an icon of the user's profile, as well as user profile information in text, if the user is logged in. the profile icon navigates to the profile page
- Menu List: List of clickable pages, each navigates to said page.
- Sign in/out button: button that changes based on if the user is signed in or not. Will take user to sign in page
- Header: Appbar that displays the name of the page
- Search bar: text field that allows the user to input data
- Visited Markers: Contains photo and name of marker. Will navigate to marker list page
- Achievements: Scrollable list of visited markers
- Menu button, Home button: Icons that are used to navigate to other pages
- Header (Search Bar): Appbar using a text field to allow user input
- Route Planner: Contains two text fields to take in user input of start location and end location
- Map: Uses API to display map
- Menu button, marker list button: Icons that are used to navigate to other pages
- Header (Search Bar): Appbar using a text field to allow user input
- Friends' profiles: Contains friend profile picture, name, and list of markers that they have visited
- Profiles: scrollable list of friend's profiles
- Header: Appbar with page name, user icon, name, buttons to edit, and icon for markers badge
- Profile: Scrollable list with text and clickable links to user-specific pages (My Markers)
- Search Bar: text field to allow user input
- Add searching functionality to map and list pages
- Figuring out distance between current location and closest marker
- Continually check to see which marker is nearest (work with Joe)
- Sort and display closest markers on marker list page
- Add login functionality/ Implement user authentication in firebase
- Implement new user account creation
- Create user account page
- Create user object in Firebase (work with Ian)
- Determine how to store user data in Firebase and fetch and display the data in the app
- Get markers to display on map using Google Maps API
- Implement route planning/ navigation
- Create custom marker preview pane when a user clicks on a marker
- Create marker detail page with detailed marker information
- Implement buttons to allow a user to save a marker or add it to the wishlist
- Build .apk for release
- Automatically add a marker to a user's my markers list once a user visits it
- Implement adding markers to a wishlist
- Create firebase objects, work with Lauren on user authentication
- Work with Joe to determine what data we will store locally and how often we will fetch data
- Continually check to see which marker is nearest (work with Matt)
- Add sidebar menu + navigation
- Get current GPS location
- Create achievements page and implement achievement tracking
- Work with Ian to determine what data we will store locally and how often we will fetch data