CITC - IT Department

Computer Laboratory Activity Form

Course Code IT323

Course Title Application Development and Emerging Technology
Topics Covered Overview of Software and Hardware Technology
Objectives The objective of this comprehensive laboratory activity is to provide
students of IT323 with an in-depth understanding of cross-platform
application development by integrating mobile, web, and emerging
technologies. Students will gain practical experience in building a
feature-rich application that leverages the capabilities of both mobile and
web platforms, while also exploring cutting-edge technologies for
enhanced functionality and user experience.
Materials:

1. Computers with internet access

2. Development environments for web and mobile platforms (Visual Studio Code)
3. Text editor or Integrated Development Environment (Visual Studio Code)
4. Mobile devices (smartphones or emulators)
5. Internet connectivity

Duration: 80 hours (8 hours a day)

Description

Title: TasKing: Task Management Boards

Activity Steps:

1. Introduction to Cross-Platform Development and Emerging Technologies:

In today's fast-paced creation of IT students capstone projects, effective task management is

crucial for success. Traditional methods often prove insufficient, leading to missed deadlines,
communication breakdowns, and overall inefficiencies. To address these challenges head-on, we
present Tasking: a centralized, accessible, and intuitive task management platform specifically
designed to meet the unique needs of student teams embarking on capstone projects. By
harnessing cross-platform development and emerging technologies, Tasking empowers student
teams to enhance cooperation, streamline processes, and achieve their project goals efficiently.
Tasking provides a comprehensive web platform for managing day-to-day tasks and
facilitating communication among team members. Administrators are equipped with the
authority to assign tasks, send notifications, and manage user access, ensuring smooth project
operations. Key features include task tracking, event scheduling, and secure user authentication,
all aimed at optimizing project management and fostering collaboration within student teams.
Students benefit from Tasking's mobile accessibility, enabling convenient task management
on-the-go and enhancing flexibility in their project workflows. With a focus on user
authentication, Tasking ensures that project-related information remains secure and accessible
only to authorized users, safeguarding sensitive data and maintaining confidentiality within
student teams.
 The purpose of Tasking is clear: to provide IT student teams with a robust platform for
managing all aspects of their capstone projects efficiently. By centralizing task management,
communication, and scheduling, Tasking empowers students to organize tasks, track progress,
and coordinate with team members effectively. Ultimately, Tasking aims to maximize
productivity and project success by facilitating streamlined workflows and promoting timely
project completion.

2. Setting Up Development Environments:

Waterfall Model

Figure 3.1 Waterfall Model

For this project, the users will implement the waterfall method to ensure a structured and
systematic approach to developing TasKing. This method allows for thorough planning and
documentation upfront, enabling clear delineation of project phases and deliverables.
Additionally, the waterfall method facilitates a sequential workflow, where each phase builds
upon the previous one, ultimately leading to the successful completion of TasKing with minimal
iteration and rework.

1. Phase 1 - Requirements Gathering (Days 1 & 2): Define project objectives, scope,
and user requirements through discussions with stakeholders. Document project requirements,
including functional and non-functional specifications.
2. Phase 2 - Analysis (Day 2): Review and analyze the documented project requirements
gathered during the requirements gathering phase. Evaluate potential risks and constraints that
may impact the development and deployment of TasKing.
3. Phase 3 - System Design (Days 3 & 4 ): Design the system architecture, including
database schema and user interface wireframes. Create detailed design documents outlining the
technical specifications and layout of TasKing.
4. Phase 4 - Implementation (Days 5 & 6): Develop the user authentication system,
allowing users to register and log in securely. Implement basic task management functionalities,
such as creating, assigning, and updating tasks. Introduce team collaboration features, including
task assignment and communication channels.
5. Phase 5 - Verification and Testing (Weeks 7-8): Conduct unit testing to ensure
individual components of TasKing function as expected. Perform integration testing to verify that
all modules work together seamlessly. Conduct system testing to validate TasKing against the
documented requirements.
6. Phase 6 - Deployment and Maintenance (Day 9): Prepare for deployment to the
production environment, including setting up hosting infrastructure and configuring servers.
Deploy TasKing to the production environment and conduct final testing to ensure a smooth
transition.
7. Phase 7 - Deployment and Maintenance (Day 10 & above):Provide ongoing maintenance
and support for TasKing, including bug fixes, updates, and technical assistance. Gather user
feedback to inform future enhancements and improvements to TasKing. Ensure the continued
reliability, performance, and security of TasKing through regular monitoring and maintenance
activities.

Check System Requirements:

● React Native supports development on Windows, macOS, and Linux operating systems.
● Ensure that the system meets the minimum requirements specified on the React Native
documentation for both Android and iOS development.
● For Android development, ensure that Android Studio is installed with the necessary SDKs
and tools configured according to React Native's guidelines. Ensure proper emulator or device
setup for testing purposes.
● For iOS development, ensure Xcode is installed on macOS with the required dependencies
and simulator configurations set up as per React Native's instructions. Possession of an Apple
Developer account may be necessary for deploying to physical devices or the App Store.
● Optimal performance requires sufficient RAM and disk space available to handle the
development environment alongside other applications smoothly.

2. Download React Native SDK:

● Go to the React Native website: https://reactnative.dev

● Navigate to the "Docs" section and click on "Getting Started".
● Follow the instructions provided to set up the development environment for the operating
system.
● Download the React Native SDK and necessary tools for the operating system as outlined in
the documentation.

3. Extract the React Native SDK:

● Once the download of the React Native SDK and associated tools is complete, extract the
downloaded files to a suitable location on the computer.
● After extraction, consider organizing the files into a dedicated folder structure that aligns
with your project management preferences.
● If additional tools or dependencies were downloaded, ensure that they are also extracted to
appropriate locations and integrated into the development environment.
● Take note of the directory path where the React Native SDK is extracted, as it will be needed
for subsequent configuration and project setup steps.

4. Set Up React Native Environment Variables:

● Add the React Native SDK's bin directory to the system's PATH variable.
● This enables running React Native commands from the command line effortlessly.

5. Install React NativeDependencies:

● React Native requires certain dependencies to be installed, such as Node.js and Git.
● Follow the instructions provided on the React Native website for your operating system to
install these dependencies.
● Ensure that you have Node.js and Git installed on your system before proceeding with React
Native development.

6. Verify React Native Installation:

● Open a terminal or command prompt.

● Run npx react-native --version to check if React Native CLI is installed globally. If not
installed, install it using npm install -g react-native-cli.
● Run the command npx react-native doctor.
● This command checks your environment and displays a report of the status.
● It will also provide guidance on any additional steps needed to complete the setup for your
React Native development environment.

7. Install Java SDK:

● Java SDK is commonly used for Android development alongside React Native.
● To develop Android applications using React Native, install Java SDK separately.
● Visit the Java Development Kit (JDK) website:
https://www.oracle.com/java/technologies/javase-jdk11-downloads.html
● Follow the instructions provided on the website to download and install the Java SDK for
the operating system.

8. Install Node.js:

● Node.js is essential for React Native development as it provides the runtime environment for
JavaScript code execution.
● In case Node.js has not been installed yet, visit the official Node.js website:
https://nodejs.org/
● Follow the instructions provided on the website to download and install Node.js for your
operating system.
● Ensure installation of a version compatible with React Native's requirements, as stated in the
React Native documentation.

9. Install Git:

● Git is necessary for version control and accessing various React Native packages and
libraries from repositories like npm or GitHub.
● If Git has not been installed yet, visit the official Git website: https://git-scm.com/
● Follow the instructions provided on the website to download and install Git for your
operating system.
● Once installed, ensure Git is properly configured and accessible from the command line for
your React Native development workflow.

10. Install Android Studio:

● Install the preferred IDE or editor and install any React Native plugins or extensions
available for it.
● Ensure that the IDE supports JavaScript and React Native development.
● Install any necessary dependencies or tools for integrating React Native with the chosen IDE
or editor.
● Follow the instructions provided by the IDE or editor's documentation to set up the React
Native development environment accordingly.

3. Ideation and Project Planning:

Use Case Diagram

Figure 3.2 Use Case Diagram for Web and Mobile

Admin: The admin has the power to view reports submitted by the users, it can also view and
manage the current users of the system, if the admin sees suspicious activities done by a user, the
admin can choose to message or block the user. The admin also oversees the task by users. In any
cases of trouble, the admin may interfere and handle such exceptions for the users.

User: Users may choose to login as a Team lead or as a member. A regular member has limited
actions and controls. They can only view the calendar for a task, view tasks, set their own
reminders for the task, or update a task and add info about their progress. They can also mark a
task as done. Team Lead on the other hand has much more access compared to the member. They
can Notify members for updates or meetings, create a task, update a task, or delete a task. For
each task, they choose to send a notification regarding the update to the members or not.

Data flow Diagram:

Figure 3.3 Data Flow Diagram level 0 for Web and Mobile

External Entities:

● User Member: Data flows coming from the user member entity. As this user signs up on
the web or the application, personal information is passed to the system and returns a sign up
feedback to the user. In the case that the user login, data is sent to the system and upon
verification, the system returns the data of the user dashboard. The user can send data to the
system by choosing to view tasks, or update tasks. The system then returns the designated output
for each request.
● User Team Leader: Members and Team Leader have pretty much similarities when it
comes to the data process, Team Leader just has some additional features. A team leader can
update or change a certain task, delete a task or send notifications to the members. This will send
the data to the system.
● Admin: The admin controls the overall data in the system. It sends data to the system
upon Logging in and receives the admin dashboard where the admin manages the data of the
members and team leader. The admin can also see the reports coming from the members.
 Figure 3.3 Data Flow Diagram level 1 for Web and Mobile

External Entities:

● User Member
○ During Signup: Personal information is passed to the system, which returns signup
feedback to the user. Upon login user data is sent to the system, and upon verification, the system
returns the user dashboard data. Users can send data to the system by viewing tasks or updating
tasks, and the system returns the corresponding output for each request.
● User Team Leader
○ Similar to User Member with additional features. Can update or change tasks, delete
tasks, and send notifications to members.
● Admin
○ Upon Logging in: Admin sends data to the system and receives the Admin dashboard.
Data Management: Admin manages data of members and team leaders. Admin can access reports
generated by members.

Data Stores:

● User Data Store

○ Stores user profiles including personal information, authentication credentials, and
preferences.Organized to support efficient retrieval of user data during login and signup
processes.Contains information such as username, email, password hash, profile settings, and any
other relevant user details.
● Task Data Store
○ Stores information about tasks including task descriptions, deadlines, assigned members,
status, and any related attachments.Supports operations like adding, updating, deleting, and
querying tasks.Allows efficient retrieval of tasks based on various criteria such as user
assignments, deadlines, or task status.
● Notification Data Store
○ Stores notifications generated by team leaders for members.Contains details such as
notification content, recipients, timestamp, and status.Facilitates efficient delivery and tracking of
notifications to users.
● Admin Data Store
○ Stores administrative data such as admin profiles, permissions, and system-wide
settings.Supports operations related to admin authentication, dashboard management, and data
oversight.Contains information necessary for administering the system, managing user roles, and
generating reports.
● Report Data Store
○ Stores generated reports from member activities. Includes metrics, analysis, and any
other relevant information for monitoring team performance and project progress. Enables
admins to access, review, and analyze reports to make informed decisions and optimizations.

Project Requirements:

1. User Authentication: Secure user login and registration.

2. Task Management: Create, assign, edit, and track tasks with descriptions, priorities, due
dates, and status updates.
3. Team Collaboration: Enable team member invitation, task assignment, and
communication within the platform.
4. Task Tracking and Progress Monitoring: Provide visual indicators for task progress
and status.
5. Notifications and Reminders: Send notifications and reminders for deadlines and task
updates.
6. Mobile Accessibility: Ensure accessibility and user-friendliness on mobile devices.
7. Data Management: Secure storage of project data with regular backups.
8. User Interface and Experience: Design a simple and visually appealing interface for
easy navigation.
9. Accessibility and Compatibility: Ensure compatibility with popular web browsers and
accessibility for all users.
10. Documentation and Support: Provide comprehensive documentation and technical
support for users.
4.1. Designing the User Interface

We started the interface for web and mobile with a wireframe and gave it more colors through a

prototype using Figma. It shows a user-friendly interface that is easy to navigate especially for

the beginners .

Web Wireframe:

Figure 4.0 Web Platform Wireframe

The web design is easy to use and looks modern, featuring a clean interface that simplifies

navigation. Users can effortlessly access features like the login screen, user list, reports,

project/task lists, and profile settings, all neatly organized for quick access and enjoyment. It's
designed to enhance productivity and streamline user experience, ensuring efficient task

management and engagement.

Web UI Design:

Figure 4.1 Web Platform UI Design

Our UI design, created with Figma, is all about making things easy and beautiful. It's like taking

the blueprint from before and making it look really cool and easy to use. Everything, from

logging in to checking user profiles, is designed to be straightforward and nice to look at. We've

added some neat little animations and touches to make it even more fun to use. With this design,

doing stuff on the platform is not just easy, but also enjoyable.

Mobile Wireframe:
Figure 4.2 Mobile Platform Wireframe

The mobile app wireframe is designed to be simple and modern, making it easy for users to

understand and navigate. It features a clear layout that helps users find their way around

effortlessly. You'll see sections for logging in, registration, viewing notifications, managing

project tasks, and adjusting profile settings, all neatly organized for quick access. This wireframe

aims to lay the groundwork for an app that boosts productivity and keeps users engaged.

Mobile UI Design:
Figure 4.3 Mobile Platform UI Design

The mobile app's design is all about making things easy and looking great. It's like a super clear

map that helps you find everything you need with no fuss. From logging in to checking reports or

managing tasks, it's all laid out so you can use it without any trouble. This design makes using

the app smooth and enjoyable, whether you're busy or just chilling out.

5.1 Development of Website Environment

Text Editor/IDE:
Figure 5.1 Text Editor VS Code

For crafting the code that brings our website to life, we rely on Visual Studio Code (VSCode). It

provides a clean and efficient workspace where our developers can write and edit code with ease.

With its vast array of extensions and customizable features, VSCode helps streamline the

development process, ensuring productivity and precision in coding tasks.

HTML:

Figure 5.2 Html in VS Code

HTML serves as the backbone of our website's structure, defining the content and layout of web

pages. With its simple and intuitive syntax, we use HTML to create the building blocks of our

site, organizing elements such as headings, paragraphs, images, and links. By adhering to web
standards and best practices, we ensure compatibility across different browsers and devices,

delivering a seamless browsing experience for our users.

CSS:

Figure 5.3 CSS in VS Code

CSS (Cascading Style Sheets) empowers us to enhance the visual presentation of our website,

adding style and flair to HTML elements. Through CSS, we define colors, fonts, layout, and

other stylistic attributes, transforming raw content into visually appealing web pages. Leveraging

CSS preprocessors like Sass, we streamline our styling workflow, enabling efficient management

of stylesheets and facilitating code maintenance and scalability.

PHP:
Figure 5.4 CSS in VS Code

PHP (Hypertext Preprocessor) serves as the backbone of our website's dynamic functionality,

enabling server-side processing and interaction with databases. With PHP, we create dynamic

web pages that respond to user input, generate personalized content, and perform complex

operations such as form submission handling and data manipulation. By harnessing the power of

PHP frameworks like Laravel, we accelerate development, maintain code consistency, and ensure

robust security measures, delivering a seamless and secure user experience.

6.1. Developing the Mobile Application

Figure 6.0 React Native in VS Code

For building our mobile application, we use React Native, a popular framework that allows us to

create native mobile apps using JavaScript. React Native enables us to develop cross-platform

applications with a single codebase, maximizing efficiency and reducing development time. With

its extensive library of pre-built components and intuitive development environment, React

Native empowers us to deliver high-quality mobile experiences for both iOS and Android

platforms.
Backend:

Figure 6.1 Firebase

To support the functionality of our mobile application, we rely on Node.js and Firebase. Node.js

provides a robust and scalable backend environment, allowing us to handle server-side logic, data

processing, and API integrations efficiently. Firebase complements Node.js by offering a suite of

backend services, including real-time database, authentication, cloud storage, and hosting.

Together, Node.js and Firebase enable us to build a reliable and performant backend

infrastructure that powers our mobile application's features and functionalities seamlessly.

Database:

Figure 6.2 Cloud Storage

To store and manage data for both our mobile and web applications, we leverage Firebase, a

comprehensive platform offering real-time database solutions. Firebase provides a scalable and

secure cloud-based database infrastructure, enabling us to store structured data, handle user

authentication, and synchronize data in real-time across devices. With Firebase, we can build

responsive and interactive applications that deliver seamless user experiences, while ensuring

data integrity and reliability.

7.1 Integrating Mobile and Web Components

Figure 7.1 Firebase configuration

Figure 7.2 Firebase Add App

To integrate our web and mobile applications, we use firebase server. Firebase's real-time

database capabilities enable seamless data exchange and updates between devices, ensuring that

users have access to the latest information and interactions across platforms.

Mobile Setup:

Figure 7.3 Initialized Firebase in Mobile

In setting up Firebase for our mobile app, we start by creating a Firebase project in the Firebase

Console. We then register our app and download the necessary configuration files specifically

google-services.json. Next, we integrate the Firebase SDK into our app, initialize Firebase, and

enable Firebase services such as Authentication, Realtime Database, and Cloud Firestore.

Web Setup:
Figure 7.4 Initialized Firebase in Web

We begin by using the already created app in the firebase and just add the web platform, then

download the google-services.json. Integrating the Firebase SDK into our web app, we initialize

Firebase and enable Firebase services such as Authentication, Realtime Database, and Firestore.

Additionally, we configure Firebase Hosting if we plan to deploy our web app.

8.1 Creating UML Diagram

Class Diagram

Figure 8.1.1

The figure above shows the class diagram for Tasking: Task Management Board system

consisting of three main classes: Admin, User, and Task. Admin serves as the system's core,
overseeing user management and task assignment. Users are defined by the User class, each with

unique identifiers, usernames, emails, passwords, and roles. Tasks are represented by the Task

class, containing attributes such as taskId, title, description, deadline, status, and assigned user.

Users interact with tasks and receive notifications to stay updated on task-related activities.

Sequence Diagram

Figure 8.1.2

The figure above shows the class diagram for Tasking: Task Management Board system and its

flow of interactions between the User and the Admin, showcasing the system's functionalities in

managing tasks and providing access to relevant data for effective task management and

collaboration.
Activity Diagram

Application Activity Diagram

Figure 8.1.3

This is the activity diagram for the TaskKing application. It illustrates the sequential flow of

actions from user login to the operations and features available to different types of users. After a

decision point to determine whether the user is new or already exists, user authentication takes

place. We then see the different features available to the Admin, User Member, and the User

Team Leader. For example, the Admin is responsible for managing the users, while the Team

Leader can create, update, and delete tasks. Members, on the other hand, can only view and

update tasks.
Website Activity Diagram

Figure 8.1.4

The Website Activity Diagram for TaskKing follows a similar structure to the mobile application,

but with a few modifications to adapt it for web use. Before accessing the application itself, users

must first navigate through the website. This initial step, denoted as "Access Website," precedes

all other processes.

9. Integrating Mobile, Web, and Emerging Technologies

Figure 9.1 Mobile Integration

Figure 9.2 Web Integration

Integrating mobile and web applications for Tasking using React Native and PHP has streamlined
our development process and positioned us to leverage emerging technologies. With React
Native, we’ve created one codebase that works for both iOS and Android, saving us time and
effort since we only need to write and maintain one set of code for mobile. React Native offers a
variety of pre-designed components that adapt to each platform, giving our users a native look
and feel with smooth performance. On the web side, PHP allows us to create dynamic and
interactive content, ensuring our web application is responsive and engaging.

Using React Native for mobile and PHP for the web helps us manage updates and maintenance
more efficiently, making our development process more cost-effective. This integration strategy
ensures Tasking is well-positioned to incorporate emerging technologies like AI and IoT,
providing a consistent experience whether users are on a smartphone or a desktop browser. By
staying adaptable to new tech trends, we ensure our users enjoy a seamless, cutting-edge
experience across all their devices.
10. Testing, Debugging, and Optimization

10.1 Application on Google Chrome and Microsoft Edge

Figure 10.1 Web Application Testing

Web applications built with React.js can run smoothly in browsers like Google Chrome,
Microsoft Edge, and others. React.js uses a single codebase that compiles to standard
web technologies like HTML, CSS, and JavaScript. This ensures compatibility with
modern web browsers. You only need to build your React.js app once, and it will work
across different browsers without extra adjustments. This approach simplifies
development and ensures users have a consistent experience, no matter which browser
they use.

10.2 Application on Android and IOS

Figure 10.2 Mobile Application Testing

 Mobile applications that we build with React Native can run smoothly on both Android
and iOS devices. Using React Native, we write a single codebase that compiles to native
code, ensuring compatibility with both platforms. This means we only need to develop
our React Native app once, and it will work across different mobile operating systems
without extra adjustments. This approach simplifies our development process and
ensures users have a consistent experience, no matter whether they use an Android or
iOS device.

10.3 Debugging and Optimization

Figure 10.3 Debugging

When it comes to debugging and optimization, we meticulously analyze our React

Native codebase, identifying and resolving any issues that may affect performance or
functionality. We employ various debugging tools and techniques to track down bugs and
ensure smooth operation across different devices and platforms. Additionally, we focus
on optimizing our code, fine-tuning performance, and minimizing resource usage to
deliver a seamless user experience. By continuously monitoring and refining our app, we
strive to maintain high standards of quality and efficiency, ensuring that our users have a
reliable and enjoyable experience with our product.

11. Deployment and Distribution

11.1 Web and Mobile hosting using Firebase

Figure 11.1 Firebase

 We deployed our cross-platform Flutter application to Firebase, seamlessly
integrating it for both web and mobile platforms. Initially, we set up Firebase
Hosting for the web version and integrated essential Firebase services such as
Authentication and Firestore for shared backend support. Utilizing the flutter build
web command, we efficiently generated web files and deployed them to Firebase
Hosting using the firebase deploy command. Simultaneously, for the mobile app,
we employed similar processes, building the APK with flutter build apk and flutter
build commands, respectively, and then distributing them via app stores. This
comprehensive deployment approach allowed us to manage and deploy our app
efficiently across all platforms, ensuring a consistent and reliable experience for our
users.

11.2. Strategies for Promoting and Distributing the Application to Target Users

To promote and distribute the application to target users, we'll start by leveraging social
media platforms such as Facebook, Twitter, and Instagram. Creating engaging content
that highlights the app's features and benefits will capture users' attention. We'll also
utilize targeted ads to reach specific user groups who are likely to be interested in our
app. Furthermore, we'll actively send application links through various channels such as
email, messaging apps, and website banners to facilitate easy access for potential users,
thereby maximizing our reach and engagement efforts.

12. Presentation and Documentation

Figure 12.1 Data Flow Diagram level 0 for Web and Mobile
External Entities:

● User Member: Data flows coming from the user member entity. As this user signs up on the

web or the application, personal information is passed to the system and returns a sign up

feedback to the user. In the case that the user login, data is sent to the system and upon

verification, the system returns the data of the user dashboard. The user can send data to the

system by choosing to view tasks, or update tasks. The system then returns the designated

output for each request.

● User Team Leader: Members and Team Leader have pretty much similarities when it comes

to the data process, Team Leader just has some additional features. A team leader can update

or change a certain task, delete a task or send notifications to the members. This will send the

data to the system.

● Admin: The admin controls the overall data in the system. It sends data to the system upon

Logging in and receives the admin dashboard where the admin manages the data of the

members and team leader. The admin can also see the reports coming from the members.
 Figure 12.2 Data Flow Diagram level 1 for Web and Mobile

External Entities:

● User Member

○ During Signup: Personal information is passed to the system, which returns signup

feedback to the user. Upon login user data is sent to the system, and upon verification,

the system returns the user dashboard data. Users can send

data to the system by viewing tasks or updating tasks, and the system returns the

corresponding output for each request.

 ● User Team Leader

○ Similar to User Member with additional features. Can update or change tasks, delete

tasks, and send notifications to members.

● Admin

○ Upon Logging in: Admin sends data to the system and receives the Admin dashboard.

Data Management: Admin manages data of members and team leaders. Admin can

access reports generated by members.

Data Stores: \

● User Data Store

○ Stores user profiles including personal information, authentication credentials, and

preferences.Organized to support efficient retrieval of user data during login and

signup processes.Contains information such as username, email, password hash,

profile settings, and any other relevant user details.

● Task Data Store

○ Stores information about tasks including task descriptions, deadlines, assigned

members, status, and any related attachments.Supports operations like adding,

updating, deleting, and querying tasks.Allows efficient retrieval of tasks based on

various criteria such as user assignments, deadlines, or task status.

● Notification Data Store

○ Stores notifications generated by team leaders for members.Contains details such as

notification content, recipients, timestamp, and status.Facilitates efficient delivery and

tracking of notifications to users.

● Admin Data Store

○ Stores administrative data such as admin profiles, permissions, and system-wide

settings.Supports operations related to admin authentication, dashboard management,

 and data oversight.Contains information necessary for administering the system,

managing user roles, and generating reports.

● Report Data Store

○ Stores generated reports from member activities. Includes metrics, analysis, and any

other relevant information for monitoring team performance and project progress.

Enables admins to access, review, and analyze reports to make informed decisions and

optimizations.

Figure 12.3 Use Case Diagram for Web and Mobile

Admin: The admin has the power to view reports submitted by the users, it can also view and

manage the current users of the system, if the admin sees suspicious activities done by a user, the

admin can choose to message or block the user. The admin also oversees the task by users. In any

cases of trouble, the admin may interfere and handle such exceptions for the users.
User: Users may choose to login as a Team lead or as a member. A regular member has limited

actions and controls. They can only view the calendar for a task, view tasks, set their own

reminders for the task, or update a task and add info about their progress. They can also mark a

task as done. Team Lead on the other hand has much more access compared to the member. They

can Notify members for updates or meetings, create a task, update a task, or delete a task. For

each task, they choose to send a notification regarding the update to the members or not.

Figure 12.4 Sequence Diagram

The figure above shows the class diagram for Tasking: Task Management Board system

and its flow of interactions between the User and the Admin, showcasing

the system's functionalities in managing tasks and providing access to relevant data for

effective task management and collaboration.

 Figure 12.5 Class Diagram

The figure above shows the class diagram for Tasking: Task Management Board system

consisting of three main classes: Admin, User, and Task. Admin serves as the system's

core, overseeing user management and task assignment. Users are defined by the User

class, each with unique identifiers, usernames, emails, passwords, and roles. Tasks are

represented by the Task class, containing attributes such as taskId, title, description,

deadline, status, and assigned user. Users interact with tasks and receive notifications to

stay updated on task-related activities.

 Figure 12.6 Application Activity Diagram

This is the activity diagram for the TaskKing application. It illustrates the sequential flow of

actions from user login to the operations and features available to different types of users. After a

decision point to determine whether the user is new or already exists, user authentication takes

place. We then see the different features available to the Admin, User Member, and the User

Team Leader. For example, the Admin is responsible for managing the users, while the Team

Leader can create, update, and delete tasks. Members, on the other hand, can only view and

update tasks.
 Figure 12.6 Website Activity Diagram

The Website Activity Diagram for TaskKing follows a similar structure to the mobile application,

but with a few modifications to adapt it for web use. Before accessing the application itself, users

must first navigate through the website. This initial step, denoted as "Access Website," precedes

all other processes.

13. Reflection and Discussion

Challenges Faced: Here are some of the challenges we faced while developing TasKing:

● Cross-Platform Synchronization: Ensuring the seamless data synchronization

between the web and mobile versions was quite difficult. We solved this by

implementing real-time database updates and efficient data caching mechanisms.

 ● User Authentication Security: Implementing a secure user authentication system

is crucial and important for this project. We used the industry-standard encryption

techniques and thoroughly tested our authentication modules to safeguard user data.

● Performance Optimization: To ensure that our system is running on optimal

performance across various devices requires extensive testing and fine-tuning. We

utilized performance monitoring tools and conducted iterative optimizations.

Lessons Learned:

Technical Skills: We enhanced our proficiency in React Native, ReactJS, Node.js,

and Firebase, gaining hands-on experience in cross-platform development.

Team Collaboration: Effective communication and regular team meetings were

crucial in coordinating our efforts and ensuring that everyone was aligned with

project goals.

Best Practices: Adopting best practices in coding standards, version control (using

Git), and project management improved our development process.

Role of UML Diagrams and DFD:

Planning and Visualization: UML diagrams, including Class Diagrams, Sequence

Diagrams, and Activity Diagrams, were essential in planning and making our

system architecture. They helped visualize the interactions between different

components and clarified the overall system structure.

Documentation: These diagrams, along with Data Flow Diagrams (DFD), provided

a clear and detailed documentation of the system’s architecture and workflows,

aiding both current development and future maintenance efforts.

Future Improvements:

Feature Enhancements: Future iterations could include more advanced ML

integration for predictive analytics and enhanced AR features for better task

visualization.

User Experience: Continuously improving the user interface based on user

feedback will help in making Tasking more intuitive and user-friendly.

Performance and Security: Ongoing performance optimizations and security

enhancements will ensure that Tasking remains robust and reliable.

Performance and Security: Ongoing performance optimizations and security

enhancements will ensure that Tasking remains robust and reliable.

Reflection and Discussion

Experiences: The project provided a comprehensive learning experience, allowing

us to apply theoretical knowledge in a practical context. We gained valuable

insights into the complexities of cross-platform development and the importance of

meticulous planning and testing.

Challenges: The most significant challenges were related to cross-platform

synchronization and security. Overcoming these challenges has prepared us for

future projects and highlighted the importance of thorough testing and iterative

development.

Role of Diagrams and Emerging Technologies: The use of UML diagrams and

DFDs was instrumental in understanding and documenting the system architecture,

while the integration of emerging technologies like AR and ML broadened our

perspective on modern software development practices.

 Conclusion

Tasking has successfully addressed the need for a robust task management platform.

Through structured development using the Waterfall model, comprehensive testing,

and integration of modern technologies, Tasking aims to enhance productivity and

project success. The lessons learned and skills acquired during this project will

undoubtedly contribute to our future endeavors in software development.

Activity No : #2
Activity Name: Comprehensive Cross-Platform Application Development Laboratory:
Exploring Mobile, Web, and Emerging Technologies with DFD and
UML Documentation
Group Name: CodeEaters
Group Members and IDs : Jean Alph Baltazar - 2019100108
Kent Divinagracia - 2021303274
Aston Sydney Hormillosa - 2021307183
Neil Angelo Pangan - 2021301828
Course & Year: BSIT - 3rd Year Section: 3R10