Architecture
Our app will be written in JavaScript using the react native framework. Some of the libraries that we plan on using include: react-native-maps (to display a map), axios (to fetch information from external APIs), react, react-native, and react-native-async-storage (to maintain the data that is processed and use in the app). There will also be using expo-router to deal with navigation throughout the app (how the user moves between screens). We will be using Firebase to help authenticate the users on the account (firebase authentication and to help save information relating to individual user accounts (firestore). We are going to be accessing classes.sc.edu, and treat it like an API, to pull information relating to available classes and the information about them (professor, class times, class locations, etc.). Lastly we will be using node package manager (npm) as our package manager throughout the project.
The app is going to be released via expo.dev for testing. This allows the testers to access the full app using Expo Go (mobile app on their phones). There will be a QR code and link that can be used for testing (and we'll include this QR code in our build instructions)
Virtual machines will be used throughout the development process. When we want to see how the app works on an IOS device, an iphone may be used, or a iPhone emulator can be used. If working on a windows computer, a MacOS virtual machine will be used to run the iPhone emulator (since X-Code is only available on macs). The same is true for android testing, where android device emulators will be used to test the app.
- Ryan: Developing the staff directory page, the professor information page, and the login/register/forgot password pages
- Johnny: Developing the main schedule page, the add course page/components, and the add course search results view, as well as assisting with the login/register/forgot password pages
- Issac: Developing the map page to be filled with waypoints, locations, search features, and navigation/favorite features
- Chloe: Developing the map page to be filled with waypoints, locations, search features, and navigation/favorite features
- Jacob: Developing the settings pages, favorite locations page, and other backend development relating to Firestore
Although we will have our own pages that we will be responsible for, as we go to develop we will likely do peer coding where we can ask for help from others as we are introduced to new issues and bugs
- The tab bar at the bottom will have different options for each of the main screens (Map, Staff Directory, Schedule, and Settings)
- The icons that the user can select to navigate to a page/view
(each icon will have it's own prefix such as mapIcon, directoryIcon, scheduleIcon, and settingsIcon)
- the profile icon can be selected to navigate to the login screen on the app to ensure user-specifc data is being pulled/saved from Firebase
- the page's header will contain the name of the page and the profile icon
- The search bar will allow users to search for professors by their names
- The alphabet bar will be used to allow users to easily go to a section of the list based on the first name of the professor. They can slide down the bar to go to the professors in the list whose names start with that letter
- This is the main part of the page where user's will be able to see professors names. This is a clickable component.
The user will find the professor's name that they are interested in learning more about, then click on it to learn more about them on the professor's information page
- The main map view will always be active and viewable on the map screen
- The search bar will allow users to search for buildings/locations by address or name
- The add pin button will allow users to add a custom pin to the map
- The filter pin button will bring up a menu to change what pins appear on the map
- The hazards button will show hazards on the road such as construction, traffic congestion, and closed roads
- The routes button will show the user previous routes they have taken
- Allows the user to return to the previous page (the staff directory page)
- Tells the user the professor's name and their job title (professor, instructor, etc.)
- Shows the user a headshot of the professor so that they know what the profesor looks like
- Shows the user if the professor is currently holding office hours
- Tells the user what college the professor is associated with (e.g. College of Engineering and Computing)
- Describes the office location to the user (building name, office number, etc.)
- Lists all of the times that the professor holds office hours (when they are available to meet)
- Lists different social media links (such as LinkedIn) that they professor is available on
- Lists their office phone number
- Lists their email (clickable using
mailto:[EMAIL])
- Contains a list of courses a student has added to their schedule
- This is done primarily through the addButton component on the add course search results page
- Contains the properties that make up a course and its functionalities (buttons) depending on the view it's on
- Displays the subject of the labelled course
- Displays the number of the labelled course
- Displays the section of the labelled course
- Displays the name of the labelled course
- Displays the instructors of the labelled course
- It is possible that some courses may have more than one instructor, so they will be displayed on a new line from each other
- Displays the meeting times of the labelled course
- Abbreviated days are shown first, and then the meetings for these days shown second
- It is possible that some courses may have more than one meeting at different times, so they will be displays on a new line from each other
- Toggle used to control whether or not a notification is sent to a user's phone to remind them that a class is starting soon
- A bell icon is displayed if notifications are toggled on for a class, a bell icon with a slash is displayed if they are turned off
- Button used to delete a course from a student's schedule
- Button used to add a course to a student's schedule
- Tapping on it will move pages from the main schedule screen to the add course form screen
- Form used to create a specified query to return a list of courses from the classes.sc.edu API
- Description for the searchForm
- Gives simple instructions for the form as well as details which fields on the form are required to be filled
- Input field used for the searchForm
- Comes with a label detailing the value meant to be inputted as well as the input element itself
- Button used to submit the searchForm
- Tapping it will create a query to search the classes.sc.edu API with using the values in each searchFormInput
- Tapping it will also move the user to the add course search results view
This view will include nearly all the same components as the Main Schedule page, namely the courseList, course, courseSubject, courseNumber, courseSection, courseName, courseInstructors and courseMeetings.
- Button used to add a course to a student's schedule
- Tapping on it will move pages from the add course search results page to the main schedule page