This was a project created for a class (CEN3031: Introduction to Software Engineering) at the University of Florida between February 2022 and April 2022. Feel free to view our final demonstration of our application right here.
- Product Vision Statement
- Project Overview
- Software Quality
- Requirements Documentation
- System Documentation
- Developer Documentation
- Sprint Presentations
- Team
“FOR students WHO feel unmotivated to learn in a virtual environment, edYOU is an educational mobile app THAT centralizes learning resources based on topics that interest users. UNLIKE other learning apps, where you have to search for only one type of content (videos, articles, courses) manually, OUR PRODUCT will automatically show students a “feed” of all types of content that will help them learn in the field(s) they are interested in.”
Due to the pandemic and the shift to online learning, the education system continues to face multiple challenges in terms of the quality and delivery of education. Tech-based solutions can bridge the gap in learning and streamline the education system. The education system includes students at all levels, parents, schools, administration and the effects of quality education can have long-term implications on how things evolve in the world.
- Gain experience with the software engineering Agile methodology.
-- Learn the agile methodology
-- Project planning, backlog, forecasting, and retrospectives.
--Learn continuous integration, collaboration, version control and software testing. - Work in a team oriented environment.
--Task distribution, communication and coordination.
--Learn to break down tasks and define responsibilities.
--Learn to use supporting tools for team collaboration. - Create solutions systematically.
--Learn to create design models.
--Develop implementation that is consistent with design.
#1 Shared or online learning experiences
#2 Increase student engagement
With our product, we mostly focus on addressing challenge statement #1 (Shared or online learning experiences) because it focuses on combating the lack of interest in online learning experiences. This product mimics common social media platforms' behavior but instead provides a continuous stream of learning and educational resources in short bursts. In addition, we address challenge statement #2 because our product reemphasizes education which can also increase students’ engagement in the online classroom and provide educational resources on specific topics.
An educational social media mobile app that streamlines information (videos, articles, news, etc.) about specific topics that the user is interested in. It formats the information in shorter bursts of consumption like a typical social media platform but emphasizes educational content.
FOR students WHO feel unmotivated to learn in a virtual environment
Project Management Tools: Github, Circle CI, Asana
Programming Languages/Frameworks: Flutter (Dart), NodeJs, MongoDB, GraphQL, Google APIs, and iPhone/Android Emulators
The product’s goal was to be simple in concept but powerful in functionality. This concept forced the team to focus on the quality of the product to make the user features count the most which enabled us to produce a reliable product.
We spent time choosing the technology behind the product to ensure that there would be minimal user problems, allowing it to be consistently available to the users.
We put emphasis on creating a product that utilizes clean code and reliable programming. This enables the product to endure most technical problems because the software team can easily find the source of the problem. In addition, the quality of the code in both the frontend and backend was held to a higher standard to prevent any unforeseeable problems that could arise. The team also spent time researching the appropriate tech stacks that could fulfill the purpose of the application while making it resilient.
The code is thoroughly organized by each frontend page. This enables us to easily add new content to a specific page or incorporate a completely new page with ease. Another main component that enables maintainability is our interest options. We are able to stay up to date with popular topics that the users enjoy by adding new interests to the application which enables it to remain relevant.
The application is responsive to the user because of its unique customizations. The user can always go to their profile page to edit their interests and refresh to immediately receive new, personalized content.
The functionality of our product focuses on executing the basic goal of the application which is to act as a tool for the user to learn about their educational interests. This means that the user is able to create an account, set their interests, and access the homepage with personalized content without any complex hurdles.
Our product has built-in security on both sides of the application. From a user perspective, the user is required to make an account with a username, password, and email to protect their account. We use input validation to ensure that the user is entering accurate information to further ensure security. On the backend, we encrypted the user’s information, such as their passwords, to take the extra steps to protect user information.
This mobile app lets you choose different educational topics, which gives you articles and videos related to that topic in return.
Users can register an account with the app while developers confirm the user registration via email. After, users can log in and see the profile page, reset their password if it’s forgotten, and log out. Also, users can select and change preferences, also save and unsave contents that can be seen on the saved page. Below is our story map for the features and the tasks of each feature, and a use case model that demonstrates the flow of actions of the user.
When the user opens the app for the first time (or if they are logged out), they will be greeted with the Welcome Page, where they can choose to either sign up or login. Sign up and Login are very similar in UI, the difference being the functionality (when you click register, it takes you back to the welcome page, when you click login, it takes you to the app itself). The forgot password page sends an email to reset the password.
When you login, you go to the homepage where the content is. You can open external links and save content. The Saved page is like the Home page except it has only saved content. The profile shows the user’s information and two buttons. The edit preferences button leads you to a list where you can star and unstar different topics. The logout button takes you back to the welcome page.
The system is built on the client-server architecture and the system context model shows our built environment for our app, edYOU.
The architecture we chose is Client-Server architecture since our product enables the user to request content relevant to a specific educational topic. The server utilizes APIs and an algorithm to pull the content for the user, in the order of relevance, and returns it to the client. These actions fit directly to the advantages of a client-server architecture pattern, which focuses on providing an environment for clients to make requests from the server.
The system uses NodeJS as a runtime environment for back-end servers while GraphQL is the language to create mutations and queries, and Flutter is our framework for front-end to build the user interface of our app. MongoDB is a database for storing user data and contents. We will also use APIs such as YouTube API, and Google API for the contents on homepage.
How to run the edYou app:
-
Have git, npm, nodejs, and Flutter installed in your computer. See https://docs.flutter.dev/get-started/install for details on how to set up Flutter.
-
In the terminal, run git clone https://github.com/MarianaTorresTorres/IntroToSWEProject.git
-
Run the server:
- Go into the server directory
- Add a .env file (see at the bottom of these instructions for the content of that file) in that same directory
- Run
npm installto get node_modules - Run
node index(ornodemonif you have nodemon installed) - To check that it works, go to localhost:5000 and the GraphQL Playground (where you can run queries and mutations) should appear.
-
Run the client:
- In another terminal (keep the server running), go into the client directory
- Run
flutter pub getto install dependencies - From step #1, you should have an emulator setup (through Android Studio for Windows or xcode for Mac). Run the emulator. The app should not show up yet.
- Open the repo on Virtual Studio Code (we recommend you have the Flutter and Dart plugins for VSCode). At the bottom, you should see something like this. If it says something other than “Phone,” click on that and select your emulator in the dropdown that shows up in the top center of the screen.
- Go to lib/main.dart and run with debugging. If everything was done correctly, our edYou app should appear in the emulator.
The code inside the.env file:
URI=mongodb+srv://admin:wCFP6KfHR2pawjK@cluster0.3szop.mongodb.net/DB?retryWrites=true&w=majority
SECRET=daymwearethebestteam
SENDGRID_API_KEY=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
PORT=5000
CLIENT_ORIGIN=http://localhost:3000
YOUTUBE_API_KEY=AIzaSyA1zwXRtu42csU1eCfxQ_BMFlmylepYEfA
NEWS_API_KEY=665631c3b57f47b79b0bda13de78cabe
Antonio Villarreal - https://www.linkedin.com/in/antoniovillarreal2024/
Yair Temkin - https://www.linkedin.com/in/yair-temkin/
Mariana Torres Torres - https://www.linkedin.com/in/mariana-torres-torres/
Diane Chae - https://www.linkedin.com/in/seunghui-chae-7a12411aa/