New Era University

College of Computer Studies

Information Technology Department

NEUnite: AN ONLINE COMMUNICATION PLATFORM FOR

NEW ERA UNIVERSITY

An Undergraduate Capstone Project presented to the

Faculty of New Era University, College of Computer Studies,
Information Technology Department, New Era, Quezon City

In Partial Fulfillment of the Requirements for the Degree

Bachelor of Science in Information Technology

Cathlyn O. Ocba
Jeremy V. Castillo
Katrine Camille G. Lazaro
Tristan Harvey S. Bombase
Zinia Ma. Consuelo R. Trinidad

April 2022
 APPROVAL SHEET

This capstone project entitled NEUnite: An Online Communication

Platform for New Era University was prepared and submitted by Tristan Harvey
S. Bombase, Zinia Ma. Consuelo R. Trinidad, Katrine Camille G. Lazaro,
Jeremy V. Castillo, and Cathlyn O. Ocba, in partial fulfillment of the requirements
for the degree of Bachelor of Science in Information Technology, have been
examined and recommended for acceptance and approval for an oral examination.

Dr. Marc P. Laureta

Adviser

Approved by the Oral Examination Committee with a grade of ___ on

____/_____/____

Prof. Teresita C. Alcantara

Committee Chair

Engr. Donn S. Alcantara Prof. Era B. Espinas

Member Member

Accepted as a partial requirement for the degree in Bachelor of Science in

Information Technology.

Prof. Teresita C. Alcantara Dr. Albert A. Vinluan

Program Head College Dean

i
 DEDICATION

This study is wholeheartedly dedicated to our beloved parents, who have

been our source of inspiration and gave us strength when we thought of giving up,

who continually provide moral, spiritual, emotional, and financial support.

We would also like to dedicate this to our brothers, sisters, relatives, mentor,

friends, and classmates who shared their words of advice and encouragement to

finish our studies.

And lastly, we dedicated this book to Our Almighty God, thank you for the

guidance, strength, power of the mind, patience, protection, skills, and for giving

us a healthy life. All of these, we offer to you.

C.O.O

J.V.C

K.C.G.L

T.H.S.B

Z.M.C.R.T

ii
 ACKNOWLEDGEMENT

First and foremost, we would like to express our deepest sincerest gratitude

to our professor adviser Dr. Marc P. Laureta for allowing us to seek his expertise

and give invaluable guidance while we are starting this project. His dynamism,

vision, sincerity, and motivation have deeply encouraged us. It was a great

privilege and honor to work and study under his guidance.

We also want to extend our gratitude to Prof. Edilberto L. Simbulan Jr. for

giving us his time to seek advice from him and for his empathy, and great sense

of humor, he taught us the methodology to carry out the research and to present

the project as clearly as possible.

Besides, we also want to appreciate the presence of Engr. Donn S.

Alcantara for giving us confidence about the potential of NEUnite to be used in the

community and igniting the fire within our hearts to finish the project. We are

extremely grateful for all they have offered to us.

Lastly, to our College Dean Dr. Albert A. Vinluan, thank you for trusting us

to conduct this study and for the time and effort in checking this documentation.

This project would not have been possible without your excellence and patience

to guide us.

iii
 EXECUTIVE SUMMARY

NEUnite is a web-based chat system that can have its video conference

and private communication within the school's community of New Era University

to have an official online platform that allows accessibility for team working and

contact with one another. Aside from that, it is designed for the confidentiality of

messages within the school since it can only be accessed by the students and

faculties that use institutional emails, which are provided only by the school

administration. It can verify whether the user is using institutional email or not by

sending a verification code to their respective emails, and there is also a website

administrator who can monitor the active users and assign roles for the user, which

will give them restrictions on some functionality to avoid leaking of information

without the proper consent.

For establishing the system, the proponents used the developmental

method, the technologies used for building up the system are Node.js, GraphQL,

React.js, and PostgreSQL. The study objective is to implement communication

elements to the developed system, integrate application functionalities, and test

system performance in terms of compatibility, stress and load testing, unit testing,

and performance testing.

The proponents conducted different types of online testing to evaluate and

determine the reliability of the project. The compatibility test result revealed that

NEUnite is compatible primarily with different browsers and operating systems

except for Internet Explorer. Stress testing results revealed the average response

iv
time of the server to respond to all the users is 2.27 seconds while the maximum

response time is 5.57 seconds. Load Testing displays that the average time for the

system's responsiveness to successfully load all activities in the project is reported

to be 16.7 seconds. During Unit testing, results demonstrated that the different

system units worked efficiently and reported that there is no error in functionalities.

In Performance Testing, the overall performance of the system was revealed to be

100% it also indicates that NEUnite may be further enhanced by addressing some

medium to low-level problems discovered during testing but these issues will not

affect the applicability of the project.

The implication of the study shows the output of the developed study is

successfully done with integrated functionalities and is ready to be deployed inside

the school. The study will benefit the whole school community to work

collaboratively and communicate easily.

v
 TABLE OF CONTENTS

Preliminaries

Title Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
Approval sheet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii
Dedication. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
Acknowledgement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv
Executive summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
Table of contents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
List of Tables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
List of Figures. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii

Chapter 1: The Problem and Its, Background

Project context, Crisis Situation . . . . . . . . . . . . . . . . . . . . . . . 1

Objectives of the Study . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Scope and Limitation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Significance of the Study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Definition of Terms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Chapter 2: Review of Related Literature

Related Literatures/Related Studies. . . . . . . . . . . . . . . . . . . . 9

Synthesis of the Reviewed Literature and Studies. . . . . . . . . 24

Chapter 3: Technical Background and Methodology

Technicality of the Study . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Details of Technical used . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
How the system works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Process Model used (SDLC) . . . . . . . . . . . . . . . . . . . . . . . . . 27
Environment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Locale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Population . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

vi
 Organizational Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Requirements Specification. . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Operational Feasibility. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Technical Feasibility. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Schedule Feasibility. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Requirements Modeling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Development. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Chapter 4: Results, and Discussion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Chapter 5: Conclusion and Recommendation. . . . . . . . . . . . . . . . . . . . . 66

References. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Appendices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Curriculum Vitae. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

vii
 LIST OF FIGURES

Figures Page
1. NEUnite Real-time Messaging. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
2. Virtual Meeting Room. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . 47
3.0 Stress Testing Virtual Users. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.0.1 Average Response Time Result. . . . . . . . . . . . . . . . . . . . . .. . . 56
3.0.2 Maximum Response Time Result. . . . . . . . . . . . . . . . . . . . . . . . 57
4.0 Load Testing Result. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.0.1 Load test Performance Dashboard. . . . . . . . . . . . . . . . . . . . . . . 59
5. Waterfall Chart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

viii
 LIST OF TABLES

Tables Page
1. Communication Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

2. Functionalities of NEUnite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

3. Compatibility Test Result. . . . . . . . . . . . . . . . . . . . .. . . .. . . . . . . . . . 53

4.0. Unit Testing for Functions (Client). . . . . . . . . . . . . . . . . . . . . . . . . 60

4.0.1. Unit Testing for Functions (Admin). . . . . . . . . . . . . . . . . . . . . . . 61

5.0. Performance Testing (Metrics). . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

5.0.1 Performance Testing (Result). . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

.

ix
 Chapter 1

THE PROBLEM AND ITS BACKGROUND

Project context, Crisis Situation

The rise of pandemics made the organizations find an alternative way to

continue operating their responsibilities and commitments without physically going

out to their respective workplace. The best option they got is to use online

communication platforms.

Instant messaging applications, file sharing, voice and video conferencing,

and screen sharing for real-time collaboration on online communication platforms.

It is widely used nowadays because it assists the company in improving its

workflow management, which includes greater automation, documentation, and

communication capabilities that help increase productivity (Gruessner V. 2020).

Schools are also adapting to changes brought up by the pandemic. They are

integrating the students' courses and syllabus into online communication

platforms. They also deliver course content through various online educational

media and video conferencing software to teach their courses to the students to

proceed with their studies and catch up with their academics. In the case of New

Era University, they have an exclusive online educational platform called NEU-

VLE; this is where the professors post their students' modules and the links for

video conferencing every time they are attending synchronous meetings.

Before the pandemic happened, the alternative way of teaching and

learning was using virtual applications with limited time. Only those who avail of a

premium account are the ones who can freely use the virtual meeting with no
limitation of time. People at that time were not ready to face the new system of the

world. Angdhiri R. (2020) noted that everything stopped when the pandemic struck.

Workplaces and schools were shut down due to the increasing number of people

infected by the virus and staying indoors were implemented for the safety of the

people. However, students continue to learn through online communication

platforms, and in this case, many countries have adopted this approach.

When online classes began, the school community started to use some

virtual applications to communicate with students and hold classes. Whenever the

students are trying to connect with a synchronous meeting, the professors need to

admit the students to join the discussion; they are doing that to make sure that the

virtual conference is secured and to avoid intruders from entering the meeting.

Aside from that, online communication platforms are only allowed to be used for a

limited time every session, which causes the student and professors to dismiss the

lectures and discussions early. Little time in every synchronous meeting has some

disadvantages. The students cannot further ask questions regarding the courses,

and the professors cannot entertain those questions anymore, even if they want

to. As a result, the students will contact their professors through instant messaging.

Still, the problem is sometimes it is hard to find the professor's real instant

messaging account, especially if the students are not familiar with the face of their

instructors; there are also some teachers does not want them to contact through

their accounts and prefer emails or more professional build application.

Due to the problems encountered, the researchers proposed a system

entitled "NEUnite: An Online Communication Platform for New Era University. This

2
study aims." to develop an online communication platform that will provide instant

messaging and virtual meetings exclusively only for the students, faculty, and staff

of New Era University. The proposed system will help the school community to

have a longer time for attending the virtual meetings and organize and restrict

online sessions since the school has its server. It will benefit the University

because it will prevent outsiders from entering the class. Also, it has a chat system

that makes it easy for users to communicate with their colleagues inside the school

easily. If the students have any questions or concerns regarding their academics,

they can find their professors and talk to them in private messages.

Objectives of the Study

Generally, the project aimed to develop the exclusive online communication

platform of New Era University, Main Campus.

Specifically, it aimed to

1. Implement communication elements in developing the proposed

study

2. Integrating application functionalities in the NEUnite;

3. Test the system performance in terms of:

3.1 Compatibility

3.2 Stress testing performance and

3.3 Load testing performance

3.4 Unit Testing

3.5 Performance Testing

3
Scope and Limitations

This project is designed to have an Online Communication Platform

exclusively for the faculty, staff, administrators, and students inside the school. The

system is designed to have a real-time chat system so that the sender and receiver

can communicate using live transmission of text messages. The system is also

designed to have private messaging with all registered users. The project will be

created and developed using a web-based system. The system also provides

authentication for those who have the institutional account of New Era University

and can access the proposed project. The system also includes community

channels for all users in one place chat that can handle and display all the users

online.

In terms of the user's portal, the services provided by the Student Admin,

they can create a group chat with users of choice, remove or add any members of

the group at any time and the Student Admin is also capable of deleting the group

chat. Once the group has been created, they can rename its name. After being

added to a group, users have the option to leave. The system can also provide

pop-up notifications for actions like creating groups, removing users, etc. Upon

acting, during processing, the system displays loading spinners so that the users

can see if the system is working during the process. The users can read and

navigate the site with minimum resizing and scrolling. Responsiveness improves

the appearance of the proposed approach on devices with both large and small

screens, allowing them to adapt to different screen resolutions and devices. Error

management is also included in the system, along with detailed messages. The

4
system can also handle mistakes and display descriptive messages in response

to the users.

The project's functional limitations are based on the user's available roles

in the system. The system has two users: the administrator and the school

community. The administrator is the only person who can assign roles and has the

authority to edit and delete the users' data. The school community will be the users

of the proposed project. By logging in with the system using an institutional

account, the users can send messages, create groups, and join or create virtual

meetings within the system. The limitation of the system is that it cannot generate

a report for the administrator regarding the activities of the users and that the

proponents did not get a chance to test the system in the Linux Operating System

due to a lack of resources as well as the System Testing were not able to perform

since the project proposal is not fully integrated inside the school. Another

limitation of the system is that the user will not be able to have a private video call,

voice calls, voice messages, and media file transmission or document

transmission in messaging. There is no auto-generated code for creating a group

chat for the class. There is no unified color for faculty users' profiles to distinguish

them from others. In Virtual Meeting, there is no available moderator on the virtual

meeting side.

Significance of the Study

The result of the proposed system is significant for the school community

because it offers secured data flows between the users. The participants for the

online meetings and the conversation shared by the end-users are monitored by

5
an admin. Aside from that, it promotes user-friendly navigation, and it will be easy

for the end-user to familiarize themselves with the functionalities offered by the

exclusive online communication platform. Administrators, Staff, Faculties,

Students, and Future Researchers will benefit from this project.

Administrator. He will be the one to monitor the accounts of users. If an

intruder tries to access the exclusive online communication platform, he will

reduce the security issues.

Faculty. Realizing that a student-teacher relationship is the most crucial

relationship in education, an Exclusive communication platform tries to give

them a new medium of interaction. Part of the system is the virtual meeting.

Besides chatting with students and co-workers, they can also talk with them

in the form of a virtual meeting by creating a link for the meeting session.

Staff. Part of the system is to help improve the quality and effectiveness of

workers in the school. Hence, an exclusive online communication platform

allows this community to communicate easily with their co-workers.

Students. Using the system to communicate with one another at any time

easily will also be the easiest way to reach out to their professors. And will

also allow them to access the school announcement through the system

quickly.

Developers/Researchers. It will allow them to upgrade the system in the

future since the technology is changing rapidly. Through this project, the

Exclusive online communication platform will be improved efficiency and

6
 accessibility that, will give alternative solutions to the previous problems of

the system.

Definition of Terms

The following terms were defined operationally for a better understanding

of the readers.

Accounts Dashboard – Used for assigning roles and updating, delete

information of the users

Adobe Photoshop CC – An editing tool used to create UI designs for the

webpages and icons.

Admin Tableau Dashboard – Used for monitoring the number of

conversations, date message created, the total number of messages, the total

number of conversations, and total users

Database – A term used in the study to store students, professors, and staff

data.

Encryption - used by the programmers to secure data stored in the database.

Instant Messaging - A live chat system where the users can create their chat

groups and delete the group and messages.

Jitsi Meet– An online meeting that is used in the system and it is a free open-

source application

NEUnite – is derived from the word New Era University (NEU) combined with

"unite.” Unite means building unity to learn about others truly and listen to one

7
another. NEUnite is a communication platform exclusive to New Era University.

It is the new way for the school community to talk and plan agendas and be

united despite the New normal.

Online communication platform – A capstone project proposed by the

students of New Era University.

Online meeting - It is a feature in the proposed system of the developers where

the students and professors can meet through video conferencing.

Server – An instrument for deploying the system inside the school.

System - It describes the project developed by the IT students of New Era

University.

Web application – It is the method where the developers will implement the

proposed capstone project.

8
 Chapter 2

REVIEW OF RELATED LITERATURE

This chapter contains the review of related literature that was used and

searched by the proponents from 2016 to 2021

Online Communication

According to CEQUENS Team (2018), communication platforms use real-

time communication activities such as voice, video, and messaging for business

applications for meaningful interactions. The effectiveness of this communication

platform is evident, especially in the business world. After the surge of covid-19 in

the whole world, businesses needed to close the meantime because of health

protocols, a lot of companies changed their way of continuing their operation; they

transferred to online communication platforms for them to be able to operate. In

the aspect of professionals, they believe that using online collaborative tools as a

means of communication is more effective than emails (Slack, 2021).

Based on the study held by Slack (2021), workers would consider giving up

their work email rather than their collaboration tools, and it was mentioned that

95% of their workers prefer video calls when reaching out to their teams. The Slack

channels also increased productivity because it was easy for them to tackle

projects without losing any context quickly. Solomon, L. (2020) stated that

employees could work better and faster using digital platforms like digital

workplaces. Electronic communication improves work patterns and drives

productivity because employees no longer need to spend long hours in meetings

or travel miles to fill out paperwork to make decisions (Andra, 2020). The rise of
employees working from home has become the key for online communication

platforms or collaboration tools to be popular. The pandemic triggered this

phenomenon; therefore, developing software that could be useful for the situation

would be feasible.

Schools also transfer to online learning so that the children can continue

their studies without any problem. Based on Bradburn S. (2020), communication

platforms can enhance eLearning; he stated five reasons. He said it has greater

engagement among students than conventional LMSs since it is relatable for

teachers and students. Frequently asked questions are avoided because there is

an archived channel that anyone can see, and bots are programmed to answer

frequently asked questions. Constant connectivity since there are features where

push notifications can be sent to the phone on online communication platforms.

The potential for gamification allows student recognition and stronger affiliation

within the community. There is a feature in Slack where students can be awarded

points every time, they answer the quiz correctly. Lastly is keeping things formal

with a casual touch. Students can create their channels for informal meetings and

be seen as public or private. As gleaned from the study of Bączek, Michał MD.,

Zagańczyk-Bączek, Michalina MD., Szpringer, Monika MD, Ph.D., Jaroszyński,

Andrzej MD, PhD., and Wożakowska-Kapłon, Beata MD, PhD. (2021), they found

out that the main advantages of online learning are staying at home, continuous

access to online materials, learning at their own pace, and comfortable

surroundings. As the pandemic started, the struggle of continuing the classes

became liable. The best way to find a solution is to hold an online course with the

10
assistance of different online communication platforms. As Monash University

(2021) mentioned, online communication and collaboration are helpful during

studies. They can help work on group projects, share ideas and information, and

provide encouragement and feedback on each other's work. They also stated that

effective collaboration and communication with the student online shows that

sharing information, discussing ideas, solving problems, and producing work

during studies is easy.

Supported by Pappas C. (2016), the number one factor that will engage

someone to use an online platform is Social Media Integration because most online

learners already use social media regularly. With social media, learners can chat

with their families and peers. Social networks should have an essential part of the

online collaboration strategy. It is an effective online collaboration involving open

communication and social media. The second is Communicative Online Group

Leaders, and A team manager is a must-have for efficient online cooperation in

eLearning. This person is in charge of keeping the group on track and on topic;

they aid in the resolution of conflicts, the delegation of tasks, and the clarification

of expectations. The online group manager must also keep a line of contact open

with each online group's members. Lastly is Communication Guidelines; online

students must know the number of times they are expected to communicate and

the available online platforms. Develop guidance to clarify responsibilities and

expectations. These guidelines guarantee that the online group has accessible

communication for online group collaboration projects.

11
 Online collaboration between peers adds a social dynamic, especially to

Educational Learning, that experiences and boosts active participation of the

school community. Collaborative learning has been found to improve the

confidence and self-esteem of the student while also developing higher-level

thinking capabilities. By presenting the information and enhancing social and

interpersonal skills, group projects can enhance the educational experience.

Students learn how to work with various learners while honing their leadership

abilities.

Based on Chaffey (2021), 53.6 percent of people will use a communication

platform or social media in 2021. The daily usage average is 2 hours and 25

minutes. This only shows that some people spend their time engaging in

communication platforms to communicate with their peers. One of the most far-

reaching impacts of the COVID-19 epidemic is increased communication platform

engagement. Individual profiles have evolved, supported by communication

platforms, which have had a similar influence to the more specialized

communication media and traditional media as the primary drivers of social

communication in crises.

According to Rauv S. (2017), this list of collaboration and communication

networks and applications can communicate and integrate the essential business

components. Slack is a team collaboration software that includes real-time

messaging, archiving, and search. You can also build private spaces with fewer

team members for more sensitive details. Skype allows people or groups of people

to communicate via messaging, voice, and video calls. This is a low-cost

12
networking channel for communicating with people in various countries. HipChat

is a team chat that is specifically designed for business. Persistent, searchable,

and jam-packed features include group chat, video chat, screen sharing, and the

protection of IT department needs.

Effective communication is the primary key to having a successful

relationship between communities. Digital communication and technologies are

used in today's work or school environment because of the pandemic. This kind of

collaboration, communication networks, and applications can create a platform for

the school communities to communicate.

To combat the COVID-19 epidemic, governments and public health

organizations worldwide have implemented social distancing and stay-at-home

policies. With fewer opportunities to spend time together in person, being socially

connected has become more complex. When some internet platforms gained

traction, particularly within the school community. People began using voice

conversations, video calls, text messaging, and social media to communicate with

their friends and family. The tools that people use to modify the world, and adapt

to it, and the display is intimately related to the evolution of everyday culture.

People must consider these tools to understand better the recent socio-cultural

changes associated with Covid-19.

The advantages of online communication in education include working from

anywhere, at any time, immediate review of lectures, more time to consider before

sharing, and group discussion. Students have a lot of responsibilities to manage.

Accessing class materials and submitting work is simple now; everything is

13
available online. It is up to the student to decide when and where this occurs, as

long as the assignment deadlines are satisfied. Students can rapidly examine

words from lecturers in many online programs by rewinding the audio or video or

reviewing the transcript that comes with the lecture. There is still a discussion

component to online education, sometimes in the form of a forum for discussion

boards. On-campus students must quickly take a stance or create a perspective in

class, and they may speak before they've entirely considered all of the options.

Students can spend as much time as they desire thinking about and developing

their ideas in an online environment. This can lead to more self-assurance and

more refined conversations. Many degree programs now include a group project

or teamwork component. Collaborating with others on campus or in the community

involves setting up specific days and hours so that everyone can attend. On the

other hand, distance learning programs encourage virtual collaboration and allow

students to collaborate with team members via email, chat rooms, and other simple

techniques.

As stated by Moccozet L. (2021), A high level of satisfaction implies an

interest in the subject as well as a positive appraisal of an organization's level of

comfort in meeting the demands of students; this positive outcome contrasts with

the unfavorable perception of remote learning in Russia since March 2020 and this

surprising satisfaction of students has motivated the study to try to explain its

reasons. They showed low satisfaction with the pedagogical platform and a

positive reaction to the e-communication tools (messengers, social media, short

surveys, video conferences, etc.). The main conclusion of this study is concerned

14
with the continuation of the implementation of educational programs in the form of

an online course with the use of mixed digital communication tools of social media,

messengers, and video references using practical decisions which most likely

meet the expectations and capabilities of students. Instant messaging is a cheaper

alternative to long-distance phone calls, especially for students. Students can

collaborate by using any online communication platform.

According to Boumediene H. (2021), Online communication materials allow

students to review and re-review different courses and discussions and,

subsequently, enable good thinking time. This enhances the ability to know, reflect,

and problem-solve through careful and good planning of activities. In Tang, Y. &

Foon Hew, K. (2020), research showed that compared to the asynchronous

threaded forum, the quasi-synchronous MIM is particularly suited to promoting

expressions of emotions and expressing agreement by providing support.

Instant Messaging

Instant Messaging allows instantaneous transmission of messages to the

users, or in the simplest explanation, it uses the synchronous exchange of text

messages. Based on Scarpati J. (2017), IM is a session usually between two users

in a personal and back-and-forth communication style. In recent years, the role of

instant messaging apps has become increasingly important in news consumption

(Newman N., Levy D., & Kleis R. 2019). Instant messaging apps enable users to

send and receive text and multiple other formats like images, videos, voice

recordings, documents, etc., to a single person or a group of individuals via mobile

devices.

15
 As gleaned from Uni Assignment (2020), "When you sign up to, let's say,

AIM messenger, its IM server will verify the username and password and then log

you in; at the same time, you're already connected to the IM server. In the IM

program, you will see a list of friends that are currently online, and some statuses

will either change from 'Online' to 'Busy', 'Away' or 'Offline' also based on whether

that person is logged in or using their IM program or not. Followed to Gil P. (2019),

IM is based on special small programs that two separate people install, and those

programs connect to beam typed messages to each other. This special software

lets the users message their online friends in other rooms, other cities, and even

countries. The software uses the same cables and network as any web page or

email connection. If the other person has compatible IM software, IM works very

well. Some IM tools even have "you've got mail" capability, where you can send

messages while the other person is offline, and they retrieve it later like email.

Social media messenger such as messenger offers many latest and exciting

features such as live-messaging tools and a bot, which helps its users create one

experience. In addition to these, the messenger also offers voice calling and video

calling. Users can use the social media Messenger to interact with other people

without downloading the app. One can build their bot & instantly reach their friends

and colleagues on whichever platform and device they use. (ezTalks, 2021).

Facebook Messenger is among the most popular messenger apps. Facebook has

two chat apps for this. The regular one includes all the features like chat heads,

stickers, and other features. The Lite version is just a basic chat app with far fewer

16
frills. However, it has the same function but bears a different look depending on

the operating system in use. (Ugwu II, P. 2021).

Imo is a free, simple, and faster video call & instant messaging app. Send

text or voice messages or video calls to friends and family easily and quickly.

These features are primarily required in a teacher-student messaging app for

collaboration. However, Imo relies on an in-app subscription model, and it doesn't

do much for its free users beyond providing free video chats and calls to those who

have installed it (Summers, M. 2021). According to Oseni, K.O., Dingley, K., & Hart

P. (2018), instant messaging and social networks in educational sectors will

facilitate the delivery of educational outcomes, enabling supportive relationships

and promoting a sense of belonging, and identity formation, and self-esteem.

Supported by Beebom (2021), Telegram has a feature like having a

supergroup of up to 100,000 people, public channels, usernames, the ability to

share files of up to 1.5 GB, passcode lock, self-destructing messages, and end-to-

end encryption in secret chat file sharing, cross-platform support, group chats, GIF

support, and more. There are Telegram Bots, which enhance the experience. The

bots bring you essential info on the go, and several game bots let you play games

inside the messaging app. However, there is no option to call non-users, which

can be a problem for some people (Summers, M. 2021). It is hard to figure out if

the opposite person is online or offline and cannot know the status of the contacts

sometimes, it needs to open the app to receive messages, and it has no voice

messages.

17
 According to Hamza (2019), Signal App is a fully open-source messenger

that supports voice video calls, sending voice and video messages, documents,

and history control time, similar to Telegram. It is free to download and use without

ads or trackers, and it uses Google cloud for messaging that transfers the

encrypted messages smoothly. Signal supports end-to-end encryption as it uses

several security encryption algorithms such as the Sesame algorithm & Double

Ratchet to ensure privacy and encryption of the user's messages. However, the

Signal service does not store the phone number, IP, or metadata; it asks for access

to the contacts when they install it. Most people may feel intimidated when logging

in to any application with their phone number not so popular or widely used. It is

buggy when running on iOS devices (Gola, M. 2021).

Online Meetings

Online collaboration and communication significantly impacted the daily

lives of people, especially when the pandemic started last year. Online meetings

and virtual teams' projects have become common and used to collect data,

generate ideas, solve problems and make decisions. People began using voice

conversations, video calls, text messaging, and social media to communicate with

their friends and family.

Online meetings happen not only in work but also in education. Video

conferencing in education supports modern technology efficiency with traditional

classroom education to improve the quality of the curriculum. Video conferencing

uses telephony and computer equipment to transmit real-time or prerecorded

information over the Internet and into a classroom (MegaMeeting 2020).

18
 These tools let students interact with one another even if they are far away

from each other and according to Mitry L. (2020), an online or virtual meeting is

easy. It's becoming more popular than ever, especially for employees. Online

sessions can save workers and companies time and travel costs. When the

pandemic arose, a different virtual meeting application was implemented to be

used in class. As Maggie T. (2021) stated, zoom is one of the leading video

conferencing software apps that enable students and workers to interact when in-

person meetings are impossible. Zoom is a cloud-based video conferencing

service you can use to meet with others online that supports both desktop and

mobile and is used in work even before the pandemic. As gleaned from Matt T.

(2020), using zoom will get the entire team together on video up to 100 participants'

standard or to have a quick one-on-one meeting. Even in a low-bandwidth

environment, HD video and audio deliver, so the teams can easily connect,

collaborate, and work with agility.

According to Mitja R. (2021), the excellent news for zoom users is that the

zoom meeting has a free plan. However, it has a lot of limitations that make it

unsuitable for most businesses or works. The free program allows users to host

up to 100 participants. Unfortunately, the problem comes with a strict 40-minute

time limit for the meeting. To host more than 40 minutes, you have to spend money

and get ready to pay up. People can join for free, but the one who sets up a meeting

has to pay a monthly subscription. The more hosts a company has, the higher the

monthly bill.

19
 Aside from zoom, some applications are used in work, especially in

education. According to Kristy S. (2021), Google Meet is a video conferencing

platform developed by Google that rivals video telephony services and applications

such as Zoom and Microsoft Teams. Launched as an invite-only app in February

2017 and formally launched to the public in March 2017, its user base has

increased by more than 30 times in 2020 due to the global COVID-19 pandemic

that compelled individuals and organizations to utilize digital communication tools

and platforms for remote working. This application is user-friendly. Participants can

join the meeting by simply clicking the meeting link. Creating a forum is also simple

for the host, generating the connection, sending the meeting link to participants via

messaging apps and email, creating an event using google calendar, and sending

out the invites to email recipients in the contact list. The overall look or feel of the

platform is clean and minimal. The developers designed Google Meet similar to

other Google products and services. Thus, the user journey streamlines with the

overall user experience of Google Workspace and free Google tools and apps.

It also stated that the accessible version of google meet supports up to 100

participants. However, it only lasted for about 60 minutes. But as Deveshwar B.

(2021) mentioned, this time limit was due to be reduced to 60 minutes for users of

the accessible version of Google Meet in September 2020. However, Google

pushed the introduction of the 60-minute time limit to the end of March 2021 due

to the pandemic restrictions. But the tech giant announced the postponement of

the time limit reduction through its official Twitter handle. This means that users of

the free version can enjoy unlimited (24 hours) Google Meet calls till June 2021.

20
The latest free version of google meet does not require you to pay any charges to

make virtual calls using a Gmail account for up to 24 hours. It can connect with

any of the contacts of the user who have an internet connection via google meet.

Security issues

According to Alexandra S. (2019), there are three major issues concerning

online privacy: spying and snooping. Alexandra mentioned in her article that there

are trackers who keep records of search history and track all the online activities.

They have a clear vision of likes and dislikes, which can be used to show

advertisements based on their interests. Secondly is information mishandling.

Some sites use cookies and save up personal information which is not encrypted

and can be seen by anyone and later on becomes a problem because

cybercriminals can use it. Lastly is location tracking. This feature is usually used in

social media accounts like posting a picture and tagging friends or family, and

whenever you do that, the data will be stored there and stay forever. This can also

be manifested in Google maps whenever it asks for a location, by turning this on

can be a double-edged sword on someone's privacy because it will either do good

or bad results.

Zoom is a famous online collaboration platform since it is easy to use and

set up. Still, despite all of its good features, it experienced many problems, too,

especially in data privacy. According to Wegensel P. (2021), he stated that there

is a lot of security and privacy problem have been found in Zoom applications,

such as phishing scams which were reported that the scammers are trying to steal

someone's username and passwords by sending a message that says their

21
account has been suspended or that they missed a meeting, attached with a link

to log back which is a bait. Aside from that, they also called "Zoom bombing '' in

which uninvited participants crash a Zoom meeting and disrupt it. According to

Mehta M. (2021), the issue with this incident is that anyone with a Zoom meeting

link or ID cloud can enter the meeting room and eavesdrop on an entire

conversation. It is also stated that the host has no control over the situation

because they can't decide who can enter the meeting, suspend the user's activity,

and pause the session. After all, those problems, Zoom immediately introduce new

features such as creating a waiting room, making passwords compulsory when

joining with a personal meeting ID (PMI), providing the option to remove passcodes

from meeting URL, adding a lock meeting feature, giving the chance to suspend

participant activities by pausing the meeting instead of ending it—enabling meeting

hosts to decide who can share the screen, adding two-factor authentication,

providing various file transfer options so the host can select what type of files

participants share over chat-box. But after fixing the issue about the "Zoom

bombing" in April 2020, Zoom faced another problem regarding data handling; it

was mentioned in the article that data from more than 500,000 Zoom accounts was

up for sale on the dark web, and Zoom hasn't responded yet regarding this issue.

Pfohl J. (2020) stated that Facebook messenger does not make the users'

messages encrypted when delivered on the internet. It was explained in the article

that the news we've sent through Messenger is intercepted as plain text, which

means Facebook can read and see all private messages and pictures we sent.

Countering this issue, Facebook created a feature in Messenger called secret

22
conversation, where messages are encrypted, secret, and self-destructing. Pfohl’s

article also stated that Facebook confirmed that it uses technology to spy on

messages and photos; however, it was for a good cause since it helps them report

abusive or sensitive content. It still opposes the word "privacy." In early 2018

Facebook encountered a scandal concerning obtaining the personal data of

millions of users without their consent and later on used as political advertising for

the presidential campaigns of Ted Cruz and Donald Trump. At the end of the

scandal, Facebook was charged by the US Securities and Exchange Commission

for misleading disclosures regarding user data handling. They agreed to pay to

settle claims and promised to take action for the inconvenience that happened

before. As reported in BBC News (2019), Facebook said they reviewed the

technical system to identify possible privacy risks. Whenever the social network

built a new product that used data or a feature changed how it used data, potential

privacy risks would need to be addressed. The FTC announced a lawsuit against

Cambridge Analytica for the other party involved. They settled Aleksandr Kogan

and former CEO Alexander Nix, "restricting how they conduct any business in the

future, and requiring them to delete or destroy any personal information they

collected." (Patterson, 2020).

Telegram is one of the most popular instant messaging apps aside from

Facebook Messenger, but like Facebook, it also faces data privacy issues. Turton

W. (2016) stated that Telegram does not use end-to-end communication to deliver

messages or, means to say, encrypted messages. According to the experts, it was

noted that for the user to send their message in an encrypted way, they need to

23
turn on some additional settings when it should be done by default. Aside from

that, they are criticized for creating their encryption protocol which is mentioned in

the article that it was not proven how strong the security is. Later on, in 2017, the

MTProto protocol or their encryption protocol was recognized by IND-CCA to be

secured, and various cryptographers approved it. According to the official

Telegram FAQ section, the app features two layers of secure encryption. Private

and group cloud chats support server-to-client encryption, while secret

conversations benefit from client-to-client encryption. Every single bit of data is

treated the same way, meaning that text, files, and media are encrypted equally.

Additionally, end-to-end encryption for secret chats doesn't leave traces on

Telegram servers, doesn't allow forwarding, and can be sent self-destructing

messages (Emma W. 2021).

Synthesis of Review Literature

The literature and studies discussed above were related to developing an

exclusive online communication platform for New Era University titled NEUnite: An

online communication platform. Due to the increasing number of infected people,

the government implemented a protocol to stay at home. For people to continue

their work, online communication platforms have become in demand because of

their capabilities to chat and do video conferencing to collaborate in the comfort of

their house. The proponents based their proposed system on the famous instant

messaging applications Telegram and Messenger, which in terms of capabilities,

are labeled as user-friendly because they can do file sharing, video calls, or

chatting. Comparing it to the proposed system by the developers, the NEUnite is

24
designed to be used for academic purposes or for teacher and student

communication tools like how the IMO messaging application is developed,

wherein it is simple and free. Users will be able to communicate with one another

anytime and anywhere using the institutional account.

Aside from instant messaging, the proponents also base their system on

zoom and google meet for virtual meetings. In these applications, users can

virtually meet online simply by clicking the meeting link or typing the meeting id

manually. From what the proponents have researched, there are several problems

in using these applications. In zoom and google meet, you have to pay first to use

other features. But in the proposed system, the virtual meeting has no time limit,

and you don't have to pay anything for additional features. In this system, for the

participants to join the chat and virtual meeting, they have to log in with their

institutional account given by the school. With this method, the virtual session

would be protected from the intrusion of outsiders; it will avoid the incident that

happened in the zoom, in which outsiders join a virtual meeting and cause trouble

for the host and the people inside the forum. As the proponents analyzed and

evaluated the related systems and articles, they perceived that the associated

systems would help design and develop the plan to achieve better and more

accurate results

25
 Chapter 3

TECHNICAL BACKGROUND AND METHODOLOGY

Technicality of the Study

The developed system was based on existing applications such as

messenger and Telegram. To start the project, the proponents used a laptop with

a windows 10 operating system connected through the internet to access the

things needed for the system. Apart from laptops, they also used software

applications for coding, such as visual studio code and Git for collaboration on

coding. The server was made through a virtual machine with a Linux ubuntu

operating system. The system required an internet connection to utilize and view

its features. To log in to their respective accounts, users should use their

institutional account, to be recognized as official school students, and access the

NEUnite.

Details of Technical used

The scope of this section was the discussion of technologies being used.

First, Node.js was used for the backend of the system, Node.js was the one that

handled the function, authentication, API, and the connection of the Database in

the system. Next was a node package manager in short NPM. It was used for

managing dependencies of the system's server-side and client-side. PostgreSQL

was used as the Database to perform and execute all the necessary data needed

during the development of the system. GraphQL was responsible for connecting

the front end and backend. React.js was the frontend framework of the system.
Material UI was used for an offline testing preview of web pages to get an idea of

how the web page looked and allowed the developer to use the system properly.

Material UI is an open-source project that features React components. Google

Chrome was also used as a web browser to load and run the contents of a web-

based system. HTML was used to construct the main web page. CSS was

responsible for styling the HTML. Lastly, JavaScript was responsible for the

functionality of the system.

For virtual conferences, the developers used open-source projects such as

Jitsi Meet. As stated on the website of Jitsi, it is 100% free to use and develop. It

was also written in their handbook that Jitsi meet provides video-conferencing

capabilities that are secure, easy to use, and self-host (see appendix A).

How the system works

Data Gathering was used to develop a New Era University community

communication platform. To access the system, it only needs the institutional

account of the user given by the School Administration. After logging in, the user

will gain access to messaging, creating a group with the school community, and

creating virtual meetings. If the system was logged in as the administrator, it could

manage the accounts stored in the Database, such as edit or delete users and

assigning roles.

Process Model used (SDLC)

The Developers used Rapid Application Development in developing the

system. First, the developers compiled the requirements, researched the current

27
problem, and finalized the requirements. Next, the developer began developing

the user design by making a wireframe and a prototype to ensure that the needs

are met. Next was the construction of the system from the designed phase and

converting it into a working model, which allowed the developers to start coding

their system and testing it to make sure that the program was working smoothly.

This phase was essential because the developers still get to give input throughout

the process. They can make changes or even new ideas to solve problems as they

arise. And lastly, the Finalization was the stage when the finished work was ready

to be released. Data conversion, testing, the switchover to the new system, and

user training are all included. While the developers continue to seek flaws in the

design, all final improvements are made (see appendix B).

Environment

Locale

The study setting was held in New Era University Main Branch, located at

No. 9 Central Ave, New Era, Quezon City, 1107 Metro Manila. The school was a

private educational institution here in the Philippines. The College of Computer

Studies faculty was the leading proponent of the study. Interviews were conducted

online due to the safety protocols implemented by the government and IATF (Inter-

Agency Task Force).

Population of the Study

The population of the study was composed of faculty members of the

College of Computer Studies on New Era University's main campus.

28
Organizational chart

This part explained the organizational chart of the College of Computer

Studies as they were the user participant for the research. The graph will start with

the Head or the school president, followed by the Vice President for Academics.

The Dean of College of Computer Studies, after the Dean was the Minister in

Charge or what they called Ministrong Tagasubaybay then under Ministrong

Tagasubaybay, are the head people in every program under CCS, which was

BSIT, BSIS, BSCS, BSEMC, BSLIS and of course the faculty professors in every

program (see appendix C).

Requirements Specification

The proponents show how the system solved the existing problem in this

part. They gathered information about the system to lay out the plans to achieve

its success.

Operational Feasibility

The proponents used the Lucid chart application for creating diagrams for

Functional Decomposition.

Functional Decomposition Diagram

It shows the breakdown of functions and processes of how the

system works when it was developed. Users can access the Messages

Virtual Meeting and Profile on the client-side by Signing Up and Signing in.

In Messages, they can send and receive messages. Also, create a group

for a specific department and message the group. In the Virtual meeting,

29
 they can access the link given by their professors or Head; then, in the

Profile, they can view their information and log out of their account. The

admin controls all the accounts stored in the Database (see appendix D).

Technical Feasibility

In this part, the proponents made a checklist for compatibility checking of

the system, and they gathered information on the internet informing the

requirements needed for the checking.

Compatibility Checking

Compatibility checking was done using a pre-installed browser for the

computers available. It was measured in terms of Usability, Accuracy, Reliability,

Availability, lastly Effectiveness. It was done to ensure that nothing was left behind.

It enables a tester to achieve 100% in making a web application compatible across

all available and well-known browsers (see appendix Q).

Relevance of the technologies

The NEUnite was relevant to the municipality of New Era University, Main

Campus. The NEUnite provides easy access and efficient communication and

holds meetings and classes. There was no need to ask other students for meeting

links; simply sign into their institutional account on NEUnite; they can effortlessly

access the things they need, like links for virtual meetings, which automatically

direct them. It was helpful to the users since it saves time and accessible

30
communication. The system was relevant to the current trend in technology since

it was developed in a web-based system.

Schedule Feasibility

Proponents used excel spreadsheets to create Gantt charts to show the

breakdown of activities and targeted dates of completion of the tasks. In this part,

it also appears that the proponents worked on the system and documentation even

on weekends. The figure of the Gantt chart will show the overview of the plan and

schedule of activities to achieve the goal of this study.

Gantt Chart

The months of May and June showed the development time of the

system from the beginning of the data gathering up to the design and layout

of the system. The Gantt chart shows that Chapter 1 and 2 of the

Documentation was started in June 2021 and ended in June 2021. While

the first half of Chapter 3 was done at the same time as Chapters 1 and 2.

The other half shows the development time of the system in Schedule

feasibility, Requirements Modeling, and design which consumed a lot of

time since it was continued up until November. Wireframe and Prototype,

which started in May 2021, needed an improvement. Therefore, the

proponents began to work again in September and finished it in December

2021. The development of the system from Server, Client, and Admin

started in July 2021. It ended in January 2022, which explained that the

proponents continued enhancing the system until it was ready for

deployment. The deployment phase started in December and finished by

31
 January 2022, and the testing. Then after that, the proponent began to

document Chapters 4 and 5 based on the results of the tests and evaluation

(see appendix E).

Requirements Modeling

Requirements Modeling was done by showing the diagrammatic form of the

system to illustrate the requirements needed so that it was easy to understand. It

was done using the Lucid chart application. The Requirements Modeling consisted

of Data and Process Modeling and Object modeling

Data and Process Modeling

This part will discuss the different Data and process modeling which

includes the system flowchart, data flow diagram, and context diagram.

System Flowchart

System flowcharts display how data flows in the system and how

decisions are made to control events—starting with a condition where the

system would check if there was already an existing access token. If it was

true, the web directs it into the website dashboard, but it goes to the sign-

up and login page if it was false. When users sign up, they need to use their

institutional account to generate a verification email to validate their email.

After that, they had to set their password for them to be directed to the login

page, which the system throws a JSON file to get their email and password.

Then after that, it created a query that passed in the GraphQL API. After

that, the mutation query was saved to the Database. Then the following

procedure was a condition that checked if the user received an Access

32
token. If false, it displayed an error message and went back to the sign-up

page. If it is true, the access token was saved to the local storage, and after

that, the client will request all the Query listed in the Database. When the

client gets the Query, it proceeds to the Website Dashboard. In the

dashboard, there are Messages, Virtual Meetings, and Profiles.

In the displayed chat and displayed user, they can input a message

that was converted into a query, while in the display group, the client can

create a group. After completing a group, it was converted into a question.

You can create a message after creating a group or using the existing group

that can also be converted into a query. The queries made in the Messages

proceed into the GraphQL API. After passing into GraphQL API, the

questions are stored in the Database. In Profile, it displayed the client's

information and then log out for the whole website. When the client clicks

logout, the existing access token will be removed from the local storage,

which will be the end.

In Virtual Meeting, the user entered a meeting code. After that, the

connections between clients that request a video or audio connection are

performed through remote requests. Next, it goes on the Web server or

hosting server. Before going through the following process, first, it fetched

the Files for the web interface in Jitsi Meet, then went back to the webserver.

The following process was the prosody it was used for signaling. It served

as a protocol. After that, it goes back to the Jitsi Video Bridge (JVB), which

routes video streams amongst participants in a conference. Next was Jicofo

33
 or Jitsi Conference Focus; this was the server-side focus component used

in Jitsi Meet conferences that managed media sessions and acted as a load

balancer between the participants and the video bridge. And after that, it

sets up Connections, then goes back to the prosody that will go back to the

Web Server, and lastly to the client’s New Tab for the Jitsi Meeting.

There was also a web page called Admin which was the moderator

of the accounts in the system. At the starting point, the admin signed in, and

there was a condition where it checked if the user information was in the

Database. If false, it only displayed an error. If true, it directs to the admin

dashboard, where they can see the different roles of the Admin. The super

Admin was the one allowed to assign different positions and allowed to edit

and delete users (see appendix F).

Data Flow diagram

A data-flow diagram was a representation of a flow of data through

a process or a system. Based on the diagram, the Users can sign up or sign

in to the system and save the data to the user data store. The registered

user can use the chat system, which can send messages, but creating

groups, inviting members to the group, and deleting a group were exclusive

only to the faculty and the Admin. The information sent or made was saved

in the message or group data store; it depends on what the user does. There

was also a virtual meeting that the user could use. Users could join or create

a session. All of the conversations or virtual meetings created could be

received by the recipient, a user. On the other hand, there was a separate

34
 diagram that shows the relationship between the user and the administrator.

The admin can manage the user details as shown in the diagram (see

appendix G).

Context diagram

The context diagram was used to determine the context and limits of

the system to be modeled, such as what was inside the system and how

the system interacts with other external entities. The researchers used

Yourdon and Coad's DFD methodology that uses circles to represent

processes, Rectangle represents external entities, and line arrows to

represent Data flow. The circle represents the NEUnite which was the

process of the entire system. It was the center of the diagram presented.

The process should be in the middle, with external entities outside the circle,

according to lucidchart.com. Rectangles represent external entities. The

first external entity to be discussed was the Users, and Users can create or

join meetings. Users can also send or receive messages represented by an

arrow.

Admin is an external entity that could assign roles, update and delete

the information within the users. Recipients can create or delete group

members as long as they are assigned to a particular position, such as

Student Admin or Faculty Admin. Still, the school community can Send and

Receive messages. It was represented by a double arrow pointing to

NEUnite. The external account system was also included in the diagram,

represented by a single arrow pointing to NEUnite. Accounts Database and

35
 Message Database represent the data entry. It means a single arrow from

NEUnite pointing to it. And lastly, the four rectangles at the right of the

diagram represent the system's output. Groups, Messages, User Displays,

and Jitsi meetings are placed at the request of the diagram. Representing

the output of the NEUnite (see appendix H).

Object Modeling

In this part of the project, the proponents used different diagrams and

flowcharts to visualize the activity that may happen in the system. It consisted of a

use case diagram, sequence diagram, and activity diagram.

Use Case Diagram

A use case diagram is a graphical depiction of a user's possible

interactions with a system. After signing up or signing in, it extends to the

Login Provider that gives data to authenticate in the system or an access

key to the Main Dashboard. There are Messages, Virtual Meetings, and

Profiles in the Main Dashboard. In the message, the actor can Broadcast a

Message, Send or Receive a Message in both Personal and Group chat.

While in the Virtual meeting, the actor or the user can start or join a meeting

using a code after Starting or Joining the actual meeting. In Profile, the actor

can view his or her details, including the logout. And lastly, in the admin

part, the actor or the admin signed in to the user’s account, and the admin

can manage the accounts (see appendix I).

36
Sequence diagram

The sequence diagram represents an interaction within the system,

showing operations are carried out. A sequence diagram was used to

showcase the interaction between active objects in the system. The

stickman represents an actor or a user located at the top of the diagram. It

represents roles played by human users, external hardware, or other

subjects. A rectangle represents six objects in sequential order from left to

right.

Meanwhile, lifelines are the vertical dashed lines that show the

existence of an object or actor over time. The first interaction is between an

actor and the first object named the client. To represent the interaction,

Messages show the information being sent between objects, and sequence

diagrams show the order of interactions. An arrow represents the direction

of the interaction of the two lifelines named "users" and "client" The

interaction was named Sign up and continues to request an Authentication

token from Google's login window connected to the Google object lifeline.

After certain validation. Google returned the user information represented

by the dashed line back to the client. The dashed line represents a return

or message from the receiving object back to the requesting object.

From the client object, there was a message to the third object of the

diagram named GraphQL, a message called Send a Query to save the

Database, request an access token, and continuously redirect to the server

object to check according to the defined schema. Then it directly checks the

37
Database if the user was not existing. The return procedure undergoes an

alternative frame box that symbolizes choosing between two or more

message sequences. Based on the diagram, suppose the user was not

existing. It returned the user data. Represented by a dashed line pointing

back to the server from the database object. And from the server, it creates

an access token and sends it to the GraphQL object. Then it makes a

response token to the client object. If the user already exists. The message

coming from the Database to the server exists. From the server to the

GraphQL object send a return error message. It also responds to the client

with an error message and display.

Another response from the user to the client was the sign-in. After

entering the email and password, an authentication token was requested to

Google's Login window, and Google returned useful information to the

client. Then, the client processed user information to create a query after

creating the Query. The client sent the Query to the Request and Access

Token to the GraphQL object. GraphQL checks the Query according to the

defined schema to the server. Then the server checks if the user exists in

the Database. The process undergoes an alternative frame that will check

if the user exists or not. If the user already existed, create an access token

and make a response access token for the client. If not, it displays an error

message that the user was not authenticated.

After the users have been authenticated, the users can now access the

dashboard, where they can view messages or users and groups. The client

38
will request a query for a list of messages, Users, and Groups to the

GraphQL object. Then GraphQL listed the request to the server. In the

response, the server provides the information requested. And sent it to the

client using GraphQL. The fourth interaction in the sequence diagram is

Sending a Message (Private) from the client to GraphQL. A request

[Mutation] Sends the Message occurred. The GraphQL processes the

message and proceeds to the server. The message was called an Insert

message, represented by an arrow from left to right. The server finally

inserts the message in the Database and automatically makes a response

to the client.

The fifth interactivity shows the Sequence diagram in Create Group,

add members and Send Message (Group) simultaneously. The said

interactions will request [Mutation] to the GraphQL, and The GraphQL

processes the request and send it to the server. The server inserts the

information into the Database, and lastly, the Database makes a

[subscription] response.

Lastly, upon creating or joining the Virtual Meeting. The client sends the

input meeting id to the last object of the diagram named Self Hosted Jitsi

Server. An alternative frame was created to process the virtual meeting id.

If the Id already exists, the users can join the meeting; if not, the users can

create a Meeting. The response to the client was named Response Video

Stream, as shown in the diagram (see appendix J).

39
Activity Diagram

An activity diagram is a flowchart representing the flow from one activity

to another. The activity can be described as a system operation based on

Visual-Paradigm.com. The above diagram illustrates the activity flow of the

NEUnite system. The activity flow was shown vertically from top to bottom.

The top of the diagram represents the starting point or initial state of the

system, represented by a small black circle pointing to a fork node by using

a connector symbol or arrow. The fork node is represented as a straight,

slightly thicker line in an activity diagram, according to smartdraw.com.

From the fork node. There are two activities named "Sign in '' and "Sign up,"

represented by a curved rectangle that a user can do initially. There is a

decision representing the small diamond shape asking if the user already

has a uniform email account. If yes, there should be a sending of verification

mail to validate the account. If false. The error will be displayed. After

specific validation, Sign Up, and Sign-in is joined together using a diamond

shape. There is a display login screen for logging in. There is a condition

that will check if the user is validated. If yes, it will continue the process and

display the dashboard. If not, there is an error message displayed.

There are three activities that the users can do from the dashboard.

Using a fork node, it splits a single activity flow into three concurrent

activities. Virtual Meeting, Messages, and Profile are the three activities that

can user access. In Virtual Meeting, users can enter and create meetings.

Upon entering the meeting link, there is a decision asking if the meeting link

40
 is correct. If yes, the Meeting room is displayed. Else, it will display an error

message upon creating a meeting. The system will generate a link and

directly display the meeting room. There will be six activities in the meeting

room that a user can do. It either leaves the meeting, Mute/Unmute, Share

the screen, turn on/off the Camera, or raises a hand.

On the other hand, from the message section. There will be three

activities. Chat, Users, and Group. On the chat page, the chat history is

automatically displayed so that the users can enter text messages

simultaneously. Secondly, the users can also select any users displayed.

On the users' page, it will automatically display all users. Then users can

select users and automatically display the chat history, and the users can

start to enter the text message.

Meanwhile, it will automatically show groups and chat history on the

group page. Then users can start entering their messages. Upon creating a

group, the users should enter the group name and select users who can

join. Lastly, it will automatically display the current username on the profile

page. And users can now log out (see appendix K).

Design

The design was planned and created by the proponents. The main page

icons were created through adobe photoshop cc, and it helps the proponents

design it properly.

41
 Output and User-Interface Design

This section shows a certain view of what to expect in the system. It was

the developer's guide on how they developed the system. It serves as the blueprint

of the project (see appendix O).

Development

In this section, the proponents developed the system approved by the CSD.

The proponents meet the needed requirements and expectations of the panelist.

This part involves the requirements specification, including the software

specification and hardware specifications.

Software Specification

Software Specification refers to the software used in developing the

system that includes the Current software, Minimum Requirements, and

Recommended requirements. In contrast, Software Specification for the

user only consists of the Minimum and Recommended Requirements. The

recommended requirements for the software specifications of the

developers are as follows: Windows 10, Linux, macOS 10.13 or the latest

version, PostgreSQL version 10 for Database, Node.js for the runtime

environment, Visual Studio Code for the source-code editor, and browsers

are Microsoft Edge v 97, Mozilla Firefox v 95.0, Google Chrome v

79.0.3945. On the other hand, the minimum requirements are Windows 7,

Linux, macOS 10.10, PostgreSQL version 10 for Database, Node.js for

runtime environment, and Visual Studio Code for source-code editor and

42
the web browser, and the suggested are Microsoft Edge v 88 Mozilla Firefox

v 72.0 Google Chrome v 65.0.3325.

For the software specification of the users, the recommended

browsers to use are Microsoft Edge v 97, Mozilla Firefox v 95.0, Google

Chrome v 79.0.3945, and the Operating system is Windows 10, macOS

10.13 or newer, and Linux. The minimum requirements for browsers are

Microsoft Edge v 88, Mozilla Firefox v 72.0, Google Chrome v 65.0.3325,

and the operating system is Windows 7, macOS 10.10, and Linux (see

appendix L).

Hardware Specification

Hardware Specification refers to the system need where electronic

units are recommended to develop the system, including the Current

Hardware, Minimum Requirements, and the Recommended requirements.

In contrast, Hardware Specification for the user only consists of the

Minimum and Recommended Requirements. The minimum requirements in

hardware specification for the developers are laptop or desktop computer

with a RAM of 4GB, with a processor of Intel Pentium 4 processor or later

that's SSE3 capable or with AMD Athlon processor or later that's SSE3

capable. Internet speed with 5 Mbps download and upload. The

recommended requirements are also a laptop or desktop computer with

4GB RAM and a processor of Intel i3 Processor or newer or AMD Ryzen 3

or newer with an internet speed of 10 Mbps for download and upload. On

the other hand, the minimum requirements for the users are laptop and

43
desktop computer with a processor of Intel Pentium 4 processor, or later

that's SSE3 capable or with AMD Athlon processor or later that's SSE3

capable, or mobile phone with 2GB RAM with 1mbps in upload and

download to have a group call and 600 kbps upload and 900kbps download

for a chat. Meanwhile, the recommended requirements for the users are

laptop and desktop computer with a processor of Intel i3 Processor or newer

or with AMD Ryzen 3 or newer and a mobile phone with 4GB RAM with an

internet connection of 1.5 Mbps in upload and 2.5 Mbps in download for

group call and 900 kbps in upload and 1.2 Mbps in download for a chat (see

appendix L)

44
 Chapter 4

RESULTS, AND DISCUSSION

This chapter contains the result and discussion regarding the system and

how the objectives were achieved.

Implement communication elements in developing the developed study

To implement communication elements, the proponents used the same

concept of Shannon and Weaver's communication elements, such as sender,

encoder, noise, decoder, and receiver, and compared it to the system of NEUnite.

Table 1. Communication Elements

Elements Description NEUnite

Sender The one who initiates the communication User 1

Encoder The one who creates and develops messages Computer

Program

Channel Mediums which you can send a message to the Internet

intended audience Connection

Noise Refers to anything that blocks or interferes between Poor Internet

source and destination Connection

Decoder Translating the message from sign format into a Server

meaning

Receiver The person who receives the message User 2

As shown in Table 1, the information source or sender is a person who

initiates the communication, which in the system represents User 1. The encoder

is the one who creates and develops the message or is represented as the

system's computer program that translates messages into binary data or signals

to transfer to the server. The message will be sent to the server via an internet

connection, represented as the channel in NEUnite. Then the noise, which refers
to anything that blocks or interferes between source and destination, or in NEUnite,

it will be the poor internet connection. Decoder refers to translating the messaging

into a meaning which in the NEUnite was determined as the server. The message

will be processed to determine who the message's recipient will be, and then the

receiver which is represented by User 2 in NEUnite. To have the actual

representation of communication elements in NEUnite, the proponents include the

screenshot of real-time messaging developed below.

Figure 1. NEUnite Real-time Messaging

NEUnite has real-time messaging based on technologies such as Messenger and

Telegram. Although there are some differences from the existing technologies,

such as NEUnite cannot send files, voice messages, or do private video calls in

the chat, sending a message was the most important in this project. As is shown

in figure 1, users can exchange messages in NEU Community group chat, which

proves that NEUnite real-time messaging was working. Through this, the student

can easily find their professors and communicate with them.

46
 Aside from that, NEUnite also had a Virtual Meeting in which the proponents

based on Google Meet and Zoom. Still, with this one, the proponents used open-

source software such as Jitsi Meet and APIs to integrate the application in

NEUnite.

Figure 2. Virtual Meeting Room

As shown in Figure 2 above, it successfully launched a virtual meeting room

named 4BSIT-2. Through this, students and professors can easily make a meeting

with each other. If they have a group chat, there is a video chat icon that was

already linked in Jitsi Meet. All the members within the group chat can

automatically enter the meeting without needing permission from the moderator

because it was not required in Jitsi Meet. Aside from that, the good thing about this

is that it does not require a subscription to avail of any further features. The users

can freely use the features and functionalities offered by Jitsi Meet, which can

benefit the financial capabilities of the students and the school. Furthermore,

NEUnite was designed for academic and work purposes and the exclusivity of the

system.

47
Integrating application functionalities in the NEUnite

To integrate the application and functionalities in NEUnite, proponents show

the system's different features, include the description of its functionalities, and

insert the screenshots of the actual system in the table.

Table 2. Functionalities of NEUnite

Features Description
Tableau is used by the NEUnite system for
Admin Tableau monitoring the number of conversations, date
Dashboard message created, the total number of messages,
the total number of conversations, and total users,

This area was for administrators only, it will show

Accounts Dashboard edit and delete icons wherein the admin can assign
roles and update, delete information of the users.

48
 NEUnite was created for New Era University
Sign Up using students wherein you can easily sign up by just
Institutional Email using your institutional account or email.

To make sure that the user is really from the

Confirmation Email University, the system will generate a confirmation
email to set up the password before successfully
signing in to the account.

49
 One of the features of NEUnite was chatting where
Chatting System the users can send messages, and emojis, and can
create group chats.

In the figure above, users can see the different parts of the chatting system.
The first figure can be seen after logging on, the next figure was the user where
the people who have an account can be seen and lastly, the group users can
create and add members.
NEUnite is integrated with the jitsi meet application
Virtual Room using Jitsi for generating virtual rooms. All the functionalities
of jitsi are also implemented by the system.

50
 As shown in Table 2, the NEUnite system was composed of different

features, including the admin tableau dashboard and Accounts Dashboard for the

Administrator. The admin tableau dashboard will show the analytics of the number

of conversations, the date of messages created, the total number of messages,

and the total number of users and conversations. With this feature, administrators

can easily monitor the system's performance. While the Accounts dashboard has

different functionalities like edit and deletes that only the administrator can access,

this was added in the feature so that the administrator can update information and

assign roles to the users. Assigning roles is important in the system because some

functionalities require a role to access a feature, such as in group chat, the student

admin was the only one allowed to add and remove users. Aside from that,

NEUnite also had features in which the users could only sign up using their

institutional email or the email with the domain neu.edu.ph. Users with different

domains could not enter the system. This feature of NEUnite provides security for

the user and the system's integrity. To proceed with the system, they will receive

a confirmation of email through their email accounts for setting up passwords. If

51
the users are done signing up, they can already explore the NEUnite with a chatting

system and virtual Room using the jitsi meet. In the chatting system, users can

send messages and emojis to one another and create group chats. In contrast, in

the virtual Room, users can join the meeting session by typing the room name or

clicking the video icon in their group chat.

Testing the system performance in terms of compatibility, stress and load

testing, unit testing and performance testing.

To answer objective three, the proponents used an online tool to check the

compatibility of NEUnite in different browsers and operating systems. These tools

are browserstack.com, lamdatest.com, and comparium for Linux operating

system. The proponents used many tools because each tool didn't meet their

requirements. The proponents made it in table form to make it simple because

there are a lot of screen captures.

Table 3. Compatibility Test Result

The table above was divided into two columns Application and

Collaboration. The first column was for checking the layout of the system in

52
different browsers, while the second column was for the compatibility of Jitsi Meet

in different browsers. The cross and checkmarks are the signs that the system was

working in different operating systems and browsers, and based on the result of

the compatibility test, it shows that NEUnite was working fine in Google Chrome

and Mozilla Firefox Browser in different operating systems such as in Android, iOS,

Windows 7, Windows 8 and 8.1, Windows 10, Windows 11, macOS and also Linux

Operating system. However, NEUnite was not working on Internet Explorer in all

operating systems. The problem encountered while testing in internet explorer was

that NEUnite's Login page does not appear, which means the NEUnite was not

compatible with this browser. Also, Jitsi meetings were not available in this

browser. Aside from that, upon testing the NEUnite in the iOS Operating system,

it shows that the NEUnite chat feature was accessible in Opera, but the Jitsi meet

was not available because the browser no longer supports the Jitsi meet.

Additionally, NEUnite was only compatible with the Safari browser using the iOS

and Mac operating systems. Even though NEUnite was not working on some

browsers, it does not mean the system was not reliable. Mostly NEUnite was

compatible with different browsers and operating systems. See Appendix Q for the

screen captures of each browser and operating system.

Stress Testing Performance

The proponents performed Stress testing to validate the stability and

reliability of NEUnite. To check if the system can handle loads of users, the

proponents use the website www.loadview-testing.com. Due to the free trial

53
version for the testing. The proponents can only use the default settings for the

stress test.

Figure 3.0 Stress Testing Virtual users

The green line represents the maximum number of users based on the

graph. Since it was tested in a free trial version, the maximum number of users is

only 7. The red line represents the actual number of users coming to the system,

and the blue line represents the expected number of users. Every 30 seconds, the

total number of users expected is incremented by two based on the settings for the

stress test, but as depicted in the graph, the red line went higher and then stopped

at number 6 in a time interval of 1 minute and 30 seconds then became stagnant

in the whole duration of the test. The number of users who came to NEUnite is

only 6, but the expected number of virtual users is seven which the blue line

represents. The green line was in the same position as the red line, which means

that the maximum number of users was only 6. After the test, the result shows that

54
there are no errors encountered during the execution of the stress test. The

average response time was also reported, shown in Figure 3.0.1.

Figure 3.0.1. Average Response Time Result

According to the line graph above, the test lasted up to 7 minutes, and the

green line represents the average response time happening every 30 seconds

added in the test, and it shows the peak changes after 30 seconds had passed.

For the first 4 minutes of the test, the peak was almost, on average, 3 seconds,

but when the test lasted 5 minutes and 30 seconds, the peak went higher, reaching

above 5 seconds, which means that it was the maximum response time of the

system, but after that, the peak went back to the average response time of 3

seconds. After the 7-minute test, the system takes about 2.2732s to respond to all

the users' requests, and it was represented in the graph as the orange broken line.

It is the response time that occurred during the session to the server, which means

that it is the average time the server responds to all the requests each time.

55
 Figure 3.0.2. Maximum Response Time Result

In correlation with the line graph in the previous figure, the Maximum

response time was also shown in the result, and it was 5.578 seconds. Just like

how the average response time was represented in broken orange lines, the

maximum response time was also depicted the same in the test. The green lines

represent the maximum response time of the test, and it also changes after 30

seconds are added to the time, and it also lasts up to 7 minutes. In the first 30

seconds of the test, the peak went to almost 4 seconds, but after 2 minutes 30

seconds, it was between 4 seconds and 5 seconds until it reached the maximum

response time of nearly 6 seconds or precisely 5.578 seconds. According to Jakob

Nielsen (1993). Ten seconds is about the limit for keeping the user's attention

focused on the dialogue. For longer delays, users will want to perform other tasks

while waiting for the computer to finish, so they should be given feedback indicating

when the computer expects to be done. Based on the test findings, the maximum

56
response time in seconds of NEUnite is 5.578, which is the half time of the said

limit of keeping the user's attention. In other studies, it was reported that up to 5

seconds is considered as high for the server's response time (Bouch, A.,

Kuchinsky, A., and Bhatti, N. 2000). The rest of the evidence on Stress testing can

be found in Appendix O.

Load Testing Performance

The proponents decided to use an online tool for testing their system, and

it was a website called dotcom-monitor.com. The proponents used this for load

testing to improve the application's performance bottlenecks, scalability, and

stability. They include some of the screenshots of the result.

Figure 4.0. Load Testing Performance

The figure above shows the time duration of different places trying the

NEUnite and the response after the test. It shows eight countries with a date, time,

duration, and answer or error type. The first country on the figure was Hong Kong,

with a term of 13.9 seconds. The second was Miami with 14.4 seconds. The third

one was San Francisco with 11.1 seconds, the shortest period among all the eight

57
countries, the fourth was London with 15.1 seconds, the fifth was New York with

17.1 seconds, and the sixth was Minneapolis with 13.7 seconds. Seventh was

Chicago with 23.6 seconds, the most prolonged time duration, and Madrid with

17.0 seconds. All the countries mentioned in the test showed that NEUnite got an

"OK" response which means that the system was confident in reliability and

performance.

Figure 4.0.1 Load Test Performance Dashboard

In other parts of the results, it shows the performance dashboard of the

system and it was reported there, the steps and average time to finish the system

according to the test. The average time to complete the system within five steps

was 16.7 seconds. In 5 steps, it includes the activities in NEUnite such as Login,

Messaging, Creating group chat, Creation of Jitsi meeting link, then logout. If this

figure was exported into an excel file, the status shows that it was successful. See

Appendix N for the rest of other evidence of load testing

58
Unit Testing

The proponents used Unit Testing to check the small pieces of code to

deliver information early and often. They used an online tool and transferred the

result in table form.

Table 4.0 Unit Testing for Functions (Client)

Unit Test Name Function Tested Remarks

Login login() Pass

Sign up account_setup () Pass

Message tab message() Pass

message_text_box()

Groups tab group_chat() Pass

Users tab users() Pass

Jitsi meet jitsi_meeting() Pass

Logout logout() Pass

There were no errors during the testing using the selenium application

during the execution. On the client-side, there are seven-unit tests. These include

Login, sign up, Message tab, Groups Tab, Users tab, Jitsi Meet, and Logout. The

first function to be tested is the login () function, the proponents tried to input

symbols to make an error for the system, but it successfully handled the errors and

displayed it. Upon logging in, the account the proponents used has successfully

logged in. The second function that was tested is the account_setup() function,

and the users should use their institutional email to have a successful signing up

for NEUnite. In the messaging tab, the proponents tried to send a message to a

private conversation and put some emojis, and it successfully worked directly and

59
adequately sent the message. Creating group chat is working fine in the group tab,

the same as the users' tab. In the jitsi_meeting() function, it is integrated with jitsi

meet. Lastly, there were no error messages in the logout() function. Then while

logging out, all activities done by the users are saved. See Appendix M for the

screenshots of the test.

Table 4.0.1 Unit Testing for Functions (Admin)

Unit Test name Function Tested Remarks

Login login() Pass

Sign up account_setup() Pass

Users accounts users_account() Pass

Deleted accounts account_archive Pass

Logout logout() Pass

After the unit testing on the client-side of the system, the proponents also

test the admin side of the system. As shown in the table above, the admin had a

five-unit test name, such as Login, sign up, Users accounts, Deleted Accounts,

then logout; throughout the test, these functions do not have an error reported. The

first unit tested was the login() function; the proponents used the same process in

checking the system's validity; they input symbols to make an error, but it was

successfully handled well. The second test is for the account_setup(). For this

function, the email sent to the faculty or students was effectively sent to their

institutional email address, and that is why it was remarkably passed. The third

function was users_account(). For this one, the user's account is displayed

correctly, and the other functions such as edit and delete accounts. For

account_archive, the accounts that have been deleted in the system are still saved
60
on the database, meaning that the files are archived. Lastly, the logout () when the

administrator leaves the system, they can still enter their email and password, and

all the changes they have made are automatically saved. After the testing, the

proponents concluded that all the functions are effective and dependable.

Performance Testing

The following testing that is shown in the table below is tested in an online

tool called GTmetrix which maintains the speed of the website. The overall grade

performance of the system resulted in 100% and the rest of the results were

converted into table form.

Table 5.0. Performance testing (Metrics)

Metrics name Result Remarks

First Contentful Paint 283ms Good

Speed Index 360ms Good

Largest Contentful Paint 521ms Good

Time to interactive 283ms Good

Total Blocking Time 0ms Good

Cumulative Layout Shift 0.01 Good

Table 5.0 shows that NEUnite performance testing was made of 6 key

metrics with the following weights: Loading performance (55%): First Contentful

Paint (10%) with the result of 283ms with good performance remarks, Speed Index

(10%) 360ms same as Largest Contentful Paint (25%) with good remarks

performance result. The next category of key metrics is the interactivity (40%):

Time to Interactive (10%) and Total Blocking Time (30%), with the result of 283ms

and 0ms, respectively. Lastly, the Visual Stability category (15%): Cumulative

61
Layout Shift (15%) With the result of 0.01, all of the key metrics tested were good

remarks. Each metric is measured and calculated as a score, then compared to a

threshold, and the aggregate result (with the appropriate weighting) makes up the

final Performance Score.

Table 5.0.1. Performance Testing (Result)

Impact Audit Remarks

Medium Serve Static assets with an Transfer size 256KB

efficient cache policy

Low Reduce unused JavaScript Potential savings 151KB

Low Enable text compression Potential savings 22.4KB

Low Avoid enormous network Transfer size 256KB

payloads

Low Properly size images Potential savings 24.2KB

Low Eliminate render-blocking Download time 759ms

resources

Low Avoid long main-thread tasks Duration 438ms

Low Reduce JavaScript execution Total CPU time 88ms

time

Low Serve images in next-gen Potential Savings 18.9KB

formats

Low Avoid serving legacy JavaScript Potential savings 96B

to modern browsers

Low Avoid large layout shifts CLS Contribution 0.00

Low Avoid chaining critical requests Initial investigation https://neumeet-

client.vercel.app/ 1.59KB, 67ms

N/A Avoid an excessive DOM size

N/A Largest contentful Paint

element

62
 N/A Reduce initial server response Time spent: 15ms
time

N/A Minimize main-thread work Time spent: 152ms

N/A Reduce the impact of third-party Transfer size: 63.6KB

code

N/A User Timing marks and

measures

Table 5.0.1 shows that the NEUnite web application passed performance

testing standards using GTmetrix online performance testing tool. The final result

indicates that the web application may be further enhanced by addressing some

medium to low-level problems discovered during performance testing. Based on

the performance testing result, the highest impact with medium performance is

Serve Static assets with an efficient cache policy with the remarks: Transfer size

256KB. The result with the low impact shown in the audit column is to Reduce

unused JavaScript( Potential savings 151KB), Enable text compression( Potential

savings 22.4KB), Avoid enormous network payloads(Remarks: Transfer size

256KB), Properly size images( Potential savings 24.2KB), Eliminate render-

blocking resources(Download time 759ms), Avoid long main-thread tasks(Duration

438ms), Reduce JavaScript execution time(Total CPU time: 88ms), Serve images

in next-gen formats(Potential Savings 18.9KB), Avoid serving legacy JavaScript to

modern browsers(Potential savings 96B), avoid significant layout shifts(CLS

Contribution 0.00), Avoid chaining critical requests (Initial Investigation to

https://neumeet-client-vercel.app/ 1.59KB, 67ms). The rest of the result is the N/A,

and this audit has no impact and is purely diagnostic or informative.

63
 Figure 5. Waterfall Chart

The waterfall chart shows how the NEUnite web application loads in the

chosen browser. It may be used to find simple problems like 404s and more

advanced problems like external resources preventing page rendering. The

proponents will be able to view what was loaded and in what sequence, along with

the request details Request duration and execution timings are also shown, with

varied bar lengths denoting how long it takes to request, download, or execute

each one. Based on the figure above, there are 18 requests during the testing, and

there are 548ms fully loaded or Onload during the test. The result says that the

logo.svg loaded time is 26 milliseconds, shown in the timeline column. Also, the

test shows the background images used in the landing page named landing

chat.svg, users.svg, Groups. svg, and virtual vector.svg has the result of 35ms,

35ms, 36ms, and 37ms, respectively. This shows that the loading time of the

images is fast. See Appendix P for the rest of the actual testing in Gtmetrix.

64
 Chapter 5

CONCLUSION AND RECOMMENDATION

Based on the information and data discussed in the previous chapter, the

proponents have successfully developed an online communication platform

exclusive to New Era University.

The database is consistent in connection to the app server and provides

requested data accurately. The communication elements such as sending and

receiving messages were adequately implemented and the free virtual meeting

using Jitsi.

The integration of functionalities was affirmatively working. The user can

create an account and use the features such as sending emojis, creating a group

chat, and talking to their friends and professors about academic concerns. The

admin can successfully assign roles and delete information if necessary, and there

is also an admin tableau dashboard that helps to monitor the system's

performance.

The test results from different online tools the proponents used to prove the

system's acceptability also leave a good impression. Therefore, the NEUnite

project can be used anytime, anywhere, creating a meeting link. It can send

messages easily, allowing the students and professors to work and interact online.
Recommendations

The following recommendations are for future researchers of the NEUnite:

An online communication platform for New Era University.

They should improve the system, and add some more features that are

necessary for the students and professors. Optimize the system to make it more

user-friendly not just in a sense of usability but also for the whole performance of

the system. Aside from that, use good online tools to test the system, so that the

results will not find it hard and frustrating.

Furthermore, based on the limitations presented, the researchers

specifically recommend the following improvements in messaging roles. The users

should be able to send media files and transfer documents, do voice calls or voice

messages, and the faculty user should have a unified color so that they can identify

easily and then have an auto-generated code for creating a group chat for the

class. While on the virtual meeting side, there should be a moderator for the

meeting session. Lastly, the system should be able to generate a report for the

administrator regarding the activities of the users the successor researchers

should be able to test it on the Linux Operating System and it should be fully

integrated inside the school so that the system will be able to test in a wide range

of clients.

67
References

A.L. E. (2020, October 13). The Scary Truth About Your Facebook Messenger
App Privacy. Crambler.

Authority. (2021, June 1).

BBC. (2019, July 24). Facebook to pay record $5bn to settle privacy concerns.
BBC News.

Bhardwaj, D. (2021, March 31). Does Google Meet have a time limit? Here's
what you need to know. PiunikaWeb.

Chang, A. (2018, March 23). The Facebook and Cambridge Analytica scandal,
explained with a simple diagram. Vox.

Collaborating and communicating online. Research & Learning Online. (2020,

February 24).

Data Privacy Act Primer. National Privacy Commission. (2017, March 29).

Dickinson, J. (2006, October 19). Instant messaging: Problems and solutions.

Computerworld.

Different Types of Instant Messaging _Unified Communications_ezTalks_Video

Conferencing, Webinar, Online Meeting, Screen Sharing Tips and Reviews.
ezTalks. (n.d.).

Gangwar, A., & 8.3 Akshay Gangwar. (2021, April 2). Top 10 WhatsApp
Alternative Apps You Can Use in 2021. Beebom.

Gil, P. (2019, June 24). What Is 'I.M.' and Instant Messaging? Lifewire.

Gola, M. (2021, January 12). What are the pros and cons of using a signal app?
Blogs.

Instant Messaging in Student Life. (n.d.).

Introduction · Jitsi Meet Handbook. · Jitsi Meet Handbook. (n.d.).

II, P. U., Follow MePat Ugwu IIMr. Pat Ugwu II is an Educational Technology
(edtech) expert, & Akanne. (2021, April 23). Messaging Apps for Teachers
and Students Collaboration. Akanne Edtech.

Mehta, M. (2021, June 11). Is Zoom Secure? Breaking Down 10 Zoom Security
Issues. InfoSecInsights.

68
Mu, H. (2021, January 20). Top 12 Open source Messengers with End-to-end
Encryption. MeDEVEL.com.

Newcomb, A. (2018, March 24). A timeline of Facebook's privacy issues - and its
responses.NBCNews.com.

Nguyen, N. (2020, June 14). Signal: The Pros and Cons of a Truly Private Chat
App. The Wall Street Journal.

Oseni, K. O., Dingley, K., & Hart, P. (2018). Instant Messaging and Social
Networks — The Advantages in Online Research Methodology.
International Journal of Information and Education Technology, 8(1), 56–62.
https://doi.org/10.18178/ijiet.2018.8.1.1012

Petcu, A. G. (2021, June 2). Is Telegram Secure? What You Need to Know
Before Downloading the App. Heimdal Security Blog.

Pocket-lint. (2021, February 15). What is Zoom and how does it work? Plus tips
and tricks.Pocket.

Quan-Haase, A., Cothrel, J., & Wellman, B. (2017, July 17). Instant Messaging
for Collaboration: a Case Study of a High-Tech Firm. OUP Academic.

Richmond, D. (2020, April 3). Video Conferencing in Education: An Online

Instructors' Guide.MegaMeeting.

Scarpati, J. (2017, December 15). What is instant messaging (IM)? - Definition

from WhatIs.com. SearchUnifiedCommunications.

Simon, K. (2021, June 22). Advantages and Disadvantages of Google Meet.

Slack. (n.d.). The future is collaborative: How communication platforms are

shaping the way we work. Slack.

Summers, M., & Megan Summers (545 Articles Published) Megan is a public
librarian by trade obsessed with the intersections between art. (2021, April
3). 10 Best Free Calling Apps For Android in 2021, Ranked. ScreenRant.

Susan Alexandra Sep 03, 2019. (n.d.). 3 Major Internet Privacy Issues and How
to Avoid Them. Security Today.

Telegram FAQ. Telegram. (n.d.). https://telegram.org/faq#q-so-how-do-you-

encrypt-data.

The Background Of Instant Messaging Information Technology Essay. (n.d.).

Unuth, N. (2019, November 9). Imo Instant Messenger Review. Lifewire.

69
Vermeer, S. A., Kruikemeier, S., Trilling, D., & de Vreese, C. H. (2020).
WhatsApp with Politics?! The International Journal of Press/Politics, 26(2),
410–437. https://doi.org/10.1177/1940161220925020

What is Jitsi: About Video Conferencing Software. Jitsi. (2021, March 5).

What is Zoom Meetings, how much does it cost, and is it worth it? Android

Why Should You Invest in a Communication Platform? CEQUENS. (n.d.).

Witman, E. (2021, January 29). Is Telegram secure? Here's what you need to
know about the messaging app that rivals WhatsApp and Signal. Business
Insider.

WEBSITE LINK

https://crambler.com/truth-about-facebook-messenger-app-privacy/.

https://www.bbc.com/news/business-49099364.

https://www.monash.edu/rlo/study-skills/learning-at-university/collaborating-and-
communicating-online.

https://www.privacy.gov.ph/data-privacy-act-prime

https://beebom.com/whatsapp-alternative-apps/.

https://medevel.com/10-end-2-end-messengers/.

https://www.nbcnews.com/tech/social-media/timeline-facebook-s-privacy-issues-
its-responses-n859651.

https://www.pocket-lint.com/apps/news/151426-what-is-zoom-and-how-does-it-
work-plus-tips-and-tricks.

https://www.megameeting.com/news/web-video-conferencing-in-education-
online-instructors/.

https://academic.oup.com/jcmc/article/10/4/JCMC10413/4614475#100168827.

https://piunikaweb.com/2021/03/31/does-google-meet-have-a-time-limit-heres-
what-you-need-to-know/.

https://www.vox.com/policy-and-politics/2018/3/23/17151916/facebook-
cambridge-analytica-trump-diagram.

70
https://www.computerworld.com/article/2547537/instant-messaging--problems-
and-solutions.html.

https://eztalks.com/unified-communications/different-types-of-instant-
messaging.html.

https://www.lifewire.com/what-is-instant-messaging-2483319.

https://www.ocf.berkeley.edu/~anirudh/student.

https://www.wsj.com/articles/signal-the-pros-and-cons-of-a-truly-private-chat-
app-11592127002.

https://heimdalsecurity.com/blog/is-telegram-secure/.

https://searchunifiedcommunications.techtarget.com/definition/instant-
messaging.

https://screenrant.com/android-best-free-phone-call-apps/.

https://securitytoday.com/Articles/2019/09/03/3-Major-Internet-Privacy-Issues-
and-How-to-Avoid-Them.aspx?Page=1.

https://www.uniassignment.com/essay-samples/information-technology/the-
background-of-instant-messaging-information-technology-essay.php.

https://www.lifewire.com/imo-instant-messenger-review-3426876.

https://www.businessinsider.com/is-telegram-secure.

https://www.androidauthority.com/what-is-zoom-meetings-1097740/.

https://www.cequens.com/story-hub/why-should-you-invest-in-a-communication-
platform.

https://jitsi.github.io/handbook/docs/intro.

https://jitsi.org/about/.

https://akanne.org/blog/messaging-apps-for-collaboration/.

https://www.maigrotech.com/blog/mobile-applications/what-are-the-pros-and-
cons-of-using-a-signal-app/.

https://sectigostore.com/blog/is-zoom-secure-breaking-down-10-zoom-security-
issues/.

71
https://slack.com/intl/en-ph/blog/transformation/future-collaborative-
communication-platforms-shaping-way-we-work.

72
Appendices
Appendix A

Jitsi Handbook

74
Appendix B

Rapid Application Development

75
Appendix C

College of Computer Studies Organizational Chart

76
Appendix D

Functional Decomposition Diagram

77
Functional Decomposition Diagram

78
Functional Decomposition Diagram

79
Appendix E

Gantt Chart

80
Gantt Chart

81
 Appendix F

System Flowchart

82
System Flowchart

System Flowchart

83
 System Flowchart

System Flowchart

84
System Flowchart

System Flowchart

85
System Flowchart

86
Appendix G

Data Flow Diagram

Data Flow Diagram

87
Appendix H

Context Diagram

88
Appendix I

Use Case Diagram

89
 Appendix J

Sequence Diagram

90
 Sequence Diagram

91
 Sequence Diagram

92
 Sequence Diagram

93
 Sequence Diagram

94
Appendix K

Activity Diagram

95
Activity Diagram

96
Activity Diagram

97
Appendix L

Software Specification for Developer and User

Software Specification for Developers

Categories Currently Using Minimum Recommende

Requirements d
Requirements
Microsoft Edge Microsoft Edge v Microsoft
Web Browser Mozilla Firefox 88 Edge v 97
Google Chrome Mozilla Firefox v Mozilla Firefox
72.0 v 95.0
Google Chrome Google
v 65.0.3325 Chrome v
79.0.3945

Operating System Windows 10 Windows 7 Windows 10

MacOS 10.10 MacOS 10.13

or newer
Linux
Linux

Database PostgreSQL PostgreSQL PostgreSQL

version 10 version 10 version 10

Runtime Node.js Node.js Node.js

Environment

Source-code Visual Studio Code Visual Studio Visual Studio

Editor Code Code

98
 Hardware Specification for Developers and User

Hardware Specification for Developer

Categories Currently Minimum Requirements Recommended

Using Requirements

Machine Laptop Laptop Laptop

Desktop Computer Desktop

Computer

Random 8 Gigabytes 4 Gigabytes 4 Gigabytes

Access
Memory

Intel Pentium 4 processor Intel i3 Processor

Processor Intel i7 7th or later that’s SSE3 or newer
generation capable
AMD Ryzen 3 or
AMD Athlon processor or newer
later that’s SSE3 capable

40 Mbps in 5 Mbps in Download 10 Mbps in

Internet Download Download
speed 5Mbps in Upload
10 Mbps in 10 Mbps in
Upload Upload

Hardware Specification for User

Categories Minimum Requirements Recommended Requirements

Machine Laptop Laptop

Desktop Computer Desktop Computer

Mobile* Mobile*

99
Random 2 Gigabytes 4 Gigabytes
Access
Memory 2 Gigabytes for Mobile 4 Gigabytes for mobile

Processor Intel Pentium 4 processor or Intel i3 Processor or newer

later that's SSE3 capable
AMD Ryzen 3 or newer
AMD Athlon processor or
later that's SSE3 capable

Group Call: Group Call:

Internet speed
1 Mbps in Upload 1.5 Mbps in Upload

1 Mbps in Download 2.5 Mbps in Download

Chat: Chat:

600 Kbps in Upload 900 Kbps in Upload

900Kbps in Download 1.2 Mbps in Download

Note: *That can download a web browser. (Microsoft Edge, Mozilla Firefox, Google Chrome, Safari, etc.)

100
Appendix M

Admin Unit Testing

Client Unit Testing

101
Appendix N

Load Testing

Load Testing

Load Testing

102
Appendix O

Stress Testing

Stress Testing

103
Stress Testing

Stress Testing

104
Appendix P

Performance Testing

Performance Testing

105
Performance Testing

Performance Testing

106
Appendix Q

Android Chrome

Android Firefox

107
Android Opera

iOS Chrome

108
iOS Firefox

iOS Opera

109
 iOS Safari

Linux Chrome

110
Linux Firefox

Linux Opera

111
 macOS Chrome

macOS Firefox

macOS Microsoft Edge

112
 macOS Opera

macOS Safari

Windows 7 Chrome

113
 Windows 7 Firefox

Windows 7 Microsoft Edge

Windows 7 Opera

114
Windows 7 Safari

Windows 8 Chrome

Windows 8 Firefox

115
Windows 8 Internet Explorer

Windows 8 Microsoft Edge

Windows 8 Opera

116
 Windows 8 Safari

Windows 8.1 Chrome

Windows 8.1 Firefox

117
Windows 8.1 Microsoft Edge

Windows 8.1 Opera

Windows 8.1 Safari

118
 Windows 10 Chrome

Windows 10 Microsoft Edge

Windows 10 Safari

119
Windows 10 Firefox

Windows 10 Opera

Windows 11 Chrome

120
 Windows 11 Firefox

Windows 11 Opera

Windows 11 Microsoft Edge

121
Appendix R

Usability
Fonts are used consistently
✓ Loading Animation ✓
across all pages

The error States

✓ ✓ Blank states Provided
provided

The design, layout, and

Design System organization of the site are

✓ ✓
Checked consistent and appropriate for

the school.

There is a navigation
Images and videos are
✓ bar with clear links to ✓
relevant and meaningful
the page

The site is responsive and

The purpose of this site easy to use on different

✓ ✓
is already clear devices, without horizontal

scrolling.

Pop-up windows are It’s clear which elements are

✓ ✓
kept to a minimum ‘clickable’

122
 The background is not

complicated and does Your logo is in the same place

✓ ✓
not distract from the on every page

content

There is adequate
All page content is useful,
contrast between the
✓ ✓ concise, relevant, and up to
text and background
date
color.

Site Load-time is
Tagline Makes the website’s
✓ Reasonable (in less ✓
purpose is clear
than 10 seconds)

Accuracy

Receiving Messages in
✓ Sending a message is Real-Time ✓
Real-Time

The site contains

✓ Accurate user information ✓
accurate information.

The site is well-researched and ✓ The site’s links are

✓
documented reputable and working.

The site is not Sloppy and full of ✓ The site’s links are
✓
errors reputable and working.

123
Reliability and Availability

✓ Site Is Easily Found Users have no problems

(Through Search Engines, ✓ finding the information

Etc.) they want

✓ Site Is Clearly Up to Date

Effectiveness

The site is visited by a reasonable ✓ Potential users know

✓
percentage of its target audience. the site exists.

✓ High-quality content,
The site is always available,
✓ relevant to the target
without delays.
audience

Is the site Useful to the ✓ The site helps users

✓
organization? perform their tasks

124
 Unit Testing Checklist

General Edge Firefox Chrome Safari Opera

1. Validating the
correct CSS & ✓ ✓ ✓ ✓ ✓
HTML.

2. Validating the
web pages and
client-sided forms ✓ ✓ ✓ ✓ ✓
and fields with
JavaScript.

3. Confirmation
message should
be displayed for ✓ ✓ ✓ ✓ ✓
any kind of
update and delete
operation.

Layout and
Design

1. Checking the
design, style,
layout, and
presentation ✓ ✓ ✓ ✓ ✓
consistency
across all the
browsers.

2. To check if
images are in
their standard
resolutions and ✓ ✓ ✓ ✓ ✓
proposed
alignment on
each browser or
not.

3. Font with its

attributes such as
color, size ✓ ✓ ✓ ✓ ✓
formatting, etc.,
which were
implemented and

125
used, is working
identically for all
the browsers.

4. Buttons and
forms are aligned ✓ ✓ ✓ ✓ ✓
correctly.

5. Consistency in
color and contrast
across all ✓ ✓ ✓ ✓ ✓
different
browsers.

7. Ensuring the
website's
responsive quality ✓ ✓ ✓ ✓ ✓
across each
targeted browser.

8. Checking the
alignment of data ✓ ✓ ✓ ✓ ✓
contained on the
web pages.

9. Proper
spacing between
sections, fields, ✓ ✓ ✓ ✓ ✓
paragraphs,
images, and data
contents.

11. Mouse Hover ✓ ✓ ✓ ✓ ✓

and tooltips.

12. Drop-down ✓ ✓ ✓ ✓ ✓
field.

13. Proper
navigation ✓ ✓ ✓ ✓ ✓
between the web
pages.

14. Check the site

on different ✓ ✓ ✓ ✓ ✓
resolutions (640 x

126
480, 600x800,
etc.?)

15. Check the

end-user can run
the system ✓ ✓ ✓ ✓ ✓
without
frustration.

16. Test the

images displayed
correctly in ✓ ✓ ✓ ✓ ✓
different
browsers.

17. Test the fonts

are usable in ✓ ✓ ✓ ✓ ✓
different
browsers.

18. Test the

javascript code ✓ ✓ ✓ ✓ ✓
used in different
browsers.

Functionality

1. Testing the
navigation links, ✓ ✓ ✓ ✓ ✓
search option,
and error page.

2. Validating the
forms and fields ✓ ✓ ✓ ✓ ✓
for each different
browser.

3. Validating the
different
functionalities like ✓ ✓ ✓ ✓ ✓
form submission,
saving the data,
importing, etc.

4. Interaction with
web pages
through the ✓ ✓ ✓ ✓ ✓
mouse, keyboard,
etc. in a similar

127
way for all the
browsers.

5. Validating the
working of the
scripts used on
the website ✓ ✓ ✓ ✓ ✓
across all
targeted
browsers.

6. Performance of
the web
application on ✓ ✓ ✓ ✓ ✓
different browsers
for multiple
variants of load.

7. Searchable ✓ ✓ ✓ ✓ ✓
Data

8. Test all the

mandatory fields
should be ✓ ✓ ✓ ✓ ✓
validated.

10. Test the

functionality of
the buttons ✓ ✓ ✓ ✓ ✓
available

11 Test if any
functionality fails
the user gets ✓ ✓ ✓ ✓ ✓
redirected to the
custom error
message

12. Test the

Javascript is
properly working
in different ✓ ✓ ✓ ✓ ✓
browsers (IE,
Firefox, Chrome,
Safari, and
Opera).

128
 13. Test if the
Message was ✓ ✓ ✓ ✓ ✓
received or Send
Real-Time.

Database Testing

Verify the database

✓ name: The Verify the parameter names,
database name ✓ types, and a number of
should match the parameters.
specification.

Verify the data displayed

Verify whether the
on the front end and make
✓ column allows a ✓
sure it is the same on the
null or not.
back end.

Verify the Stored Verify the Primary and

✓ ✓
Procedure foreign keys of each table.

129
Appendix S

Landing Page

130
131
132
Web Administrator

Admin Login Page

Admin Dashboard

133
Admin Roles

Admin Edit

134
Admin Delete

135
User

User Login Page

Registration Form

136
Email Confirmation

Setup Password

137
 User Profile

Message page

138
 Create a Group

Group Information

139
 Add members

Virtual Meeting Page

140
Virtual Meeting Room

Closing Page

141
Appendix T

Grammarly Result

142
 Appendix U

Pre- Requisite
1. Node >= 14.0.0
2. Npm >= 5.6
For Server side:
1. Create a .env file in server directory and add the following:
• PORT = 4000
• JWT_SECRET = "Your JWT secret"

2. Install 'sequelize-cli' & 'nodemon' as global packages, if you haven't yet do this
in terminal:

• npm install -g sequelize-cli

• npm install -g nodemon

3. Install and Create database in PostgreSQL version 10.17 name the database
“neunite”

4. Open config/config.json & update the development keys' values to match your
local PostgreSQL credentials.

5. Run this command to migrate the SQL table to your own local PSQL:

• sequelize db:migrate

6. Open seeders then run this command to seed:

• npx sequelize-cli db:seed:all
7. Run backend development server:

• cd serverneunite
• npm install
• npm run dev

For Client Side:

1. Open src/backendUrls.js & change the "backendUrls" object to:

{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
2. Run client development server:

User Manual for Developer

143
Appendix V

User Manual for Client

144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
Appendix W

Grammarly Result

160
Grammarly Result

161
Curriculum Vitae
BOMBASE, TRISTAN HARVEY

Address: San Juan, Taytay Rizal

Mobile: 09354487672
LinkedIn: linkedin.com/in/tristanharveybombase
Email: tristanharveybombase@gmail.com

Objective

A self-motivated student seeking an internship position in a good organization

where my potential will be fully discovered while working for the company
dedicatedly.

Educational Background

Tertiary: Bachelor of Science in Information Technology

New Era University
New Era, Quezon City
SY 2018 – Present
Secondary: Northern Zambales College, Inc.
Masinloc, Zambales
SY 2016 – 2018
Primary: Mondriaan Montessori
Olongapo City
SY 2006 – 2012

Academic Employment

Internship: RightValley
September 2020 – January 2021
Internship: NEUTech
September 2021 – December 2021
Work Immersion: Northern Zambales College, Inc.
November 15, 2017
Skills

161
Programming Languages Scripting/Markup Languages
• Python • Hypertext Markup Language
• JavaScript • Cascading Style Sheets

Framework CSS Framework

• Django (Wagtail CMS) • Bootstrap
• React JS • Tailwind
• Material UI

Application Programming Repository Management

Interface • Git
• GraphQL • Gitlab

Computer Hardware and Network

• Install and configure computer
systems
• Set-up computer network
• Set-up computer server
(Windows Server 2008)
• Maintain and repair computer
systems and networks

Seminars workshop attended

Hack your way to a career in cybersecurity

Live Webinar
September 2021
2 Hours

Python Programming For “NON-Techie”

Facebook Live Stream
August 2020
2 Hours
JavaScript
1
Web Programming
st Philippine
Development
AI and for Beginners
101Emerging Technologies Caravan
Live Webinar
Live
New Webinar
Era University
September
July
August 20182020
2020
2 Hours
2 Hours
3

162
Data Visualization
Tanghalang Pasigueño, Pasig City
March 2020
3 Hours

Machine Learning
Tanghalang Pasigueño, Pasig City
March 2020
3 Hours
Deep Learning
Tanghalang Pasigueño, Pasig City
March 2020
3 Hours
Networking 101 & How Security Monitoring Works: Increased Importance
of Visibility for NetSecOps
WebEx platform
July 2020
2 Hours

Character References

Mr. Ismael Balana

Instructor
Northern Zambales College, Inc
Masinloc, Zambales

Mr. Marc P. Laureta

Faculty
New Era University
New Era Quezon City

Mr. Nelson C. Gaspar

Faculty
New Era University
New Era Quezon City

163
TRINIDAD, ZINIA MA.
CONSUELO

Address: 9231 Leonardo, Spazio Bernardo Sauyo Rd.

Mindanao Ave. Quezon City
Mobile: 09610337409
LinkedIn: linkedin.com/in/zinia-trinidad/
Email: zmcrtrinidad@gmail.com

Objective

A self-motivated student with the ability to create new ideas to foster the goals of
a company. Looking to gain an internship position to utilize my abilities and skills
in ensuring efficiency.

Summary of Qualifications

• Dependable, quick learner, and hard-working

• Student of Information Technology

Educational Background

Tertiary: Bachelor of Science in Information Technology

New Era University
New Era, Quezon City
SY 2018 – Present

Academic Employment

RightValley
Internship:
September 2020 – January 2021

Internship:
NEUTech
September 2021 – December 2021

164
Skills

Programming Languages
• Java
• Python
• JavaScript

Scripting/Markup Languages
• Hypertext Markup Language
• Cascading Style Sheets
Framework
• Django (Wagtail CMS)
• React JS
• React Native

CSS Framework
• Bootstrap
• Tailwind
• Material UI
Repository Management
• Git
• Gitlab

Seminars workshop attended

1st Philippine AI and Emerging Technologies Caravan

New Era University
August 2018
3 Hours

Web Development 101

Live Webinar
July 2020
2 Hours

165
Blockchain Technology
Tagalong Pasigueño, Pasig city
March 2020
3 Hours

Machine Learning
Tanghalang Pasigueño, Pasig City
March 2020
3 Hours

Deep Learning
Tanghalang Pasigueño, Pasig City
March 2020
3 Hours
Networking 101 & How Security Monitoring Works: Increased Importance
of Visibility for NetSecOps
WebEx platform
July 2020
2 Hours

Importance of ITIL4 Foundation in 2020

Live Webinar
September 2021
2 Hours

Character References

Mr. Marc P. Laureta Mr. Nelson C. Gaspar

Faculty Faculty
New Era University New Era University
New Era Quezon City New Era Quezon City

166
JEREMY V. CASTILLO,

Address: 242B. Rosal St. Pingkian Village III

Barangay
Pasong Tamo Quezon City
Mobile: 09054960917
LinkedIn: /linkedin.com/in/jv-castillo/
Email: jvcastillo2@neu.edu.ph

Objective

I want to be part of success in an organization where I can use and enhance my

skills and talents with excellence and secure a position that will lead to a long-
term career relationship.

Educational Background

Tertiary: Bachelor of Science in Information Technology

New Era University
New Era, Quezon City
SY 2018 – Present

Secondary: Information Communication Technology

New Era University
New Era, Quezon City
SY 2016 – 2018

Academic Employment

Part-time Kitchen Crew: McDonald’s

Tandang Sora
May 2019 – November 2019

UI/UX Graphic Designer – Intern: RightValley

January 2021 – July 2021

167
EXPERTISE
• Video Editing
• Photo Editing
• UI/UX Graphic Designer
• Virtual Assistant
• Basic computer Troubleshooting/Maintenance
• Basic Network configuration

APPLICATION USED
• Adobe Photoshop
• Adobe Illustrator
• Figma
• AdobeXD
• Adobe After Effects
• AutoCAD
• Adobe Flash
• Microsoft Office Word
• Microsoft Office PowerPoint
• Microsoft Office Excel
• Filmora
• Sketchup

WEB DEVELOPMENT SKILLS

• HTML
• CSS
• JavaScript
• PHP
• Bootstrap

168
CERTIFICATION

09/2021 - Create an eye-catching website – WordPress Site Administration

Reskills

10/2021 - A free Online Basic Graphic Design Webinar

eDisenyo

11/2021 - Oracle Cloud Infrastructure 2021 Certified Associate

Oracle

12/2021 - Oracle Autonomous Database Cloud 2021 Certified Specialist

Oracle

Character References

Gerald Cardinal Remzie Pangilinan

Transaction Processing Associate Bank Teller
T: 09153276790 T: 09564366715
E: geraldcardinal@gmail.com E: remzie05@gmail.com

169
OCBA, CATHLYN O.

Address: Blk 8 Lot 10Asamba Compound, Sitio Mendez

Baesa, Quezon City, Philippines
Mobile: 09953853719
Email: cathliyn.ocba@neu.edu.ph.

Objective

A self-motivated student seeking an internship position in a good organization

where my potential will be fully discovered while working for the company
dedicatedly.

Educational Background

Tertiary: Bachelor of Science in Information Technology

New Era University
New Era, Quezon City
SY 2019 – Present
• “Recipient of Q.C Youth Development Org. Scholarship

Secondary: General Academic Strand

Nick Joaquin Senior High School
Batch 2018

Academic Employment

OJT 200 HOURS: CEA, NEW ERA UNIVERSITY

August 2021 – December 2021
• Update and compile files
• Make an accomplishment report
• Project Designation

170
WORK IMMERSION: BERMA PROCESYS CORP
November 2017 – December 2017
• Arranging documents of different projects in the
company.
• Responsible for the format and design of the
project label.
• Answering and forwarding incoming calls.
• Encoding and updating of company projects

EXPERTISE

Technical Skills
• Web designing and development
• Basic Networking
• HTML
• CSS
• PHP
• JavaScript
• MySQL
• Microsoft Office
Soft Skills
• Good verbal and written communication
• Excellent time management
• Ability to work in team driven environment
• Motivated and always willing to learn

SEMINARS ATTENDED

• Ethical Hacking (May 2021)

• The rise of Phishing attack (September 2021)
• Future of cybersecurity (September 2021)
• Create an eye-Catching website – WordPress (September 2021)
• Introduction to Kubernetes (September 2021)
• Python and PHP programming (October 2021)
• Microsoft Azure Masterclass (November 2021)

171
COURSES/TRAINING

• SQL Masterclass: SQL for Data analytics (2021)

• Introduction to cloud computing and AWS (2021)
• CSS and JavaScript crash course (2021)
• Project Management (2021)
• Oracle Cloud Infrastructure Certified Foundations Associate
(2022)

172
LAZARO, KATRINE CAMILLE G.

Address: 192. C. Dones St. San Antonio Cavite City

Mobile: 09683276276
Email: katkatlazaro@gmail.com

Objective

I am extremely motivated to constantly develop my skills and professionally. I am

confident in my ability to come up with interesting ideas. Combine patience,
determination, and persistence to troubleshoot client issues. Thrive in a team
environment and work well with others.

Educational Background

Tertiary: Bachelor of Science in Information Technology

New Era University
New Era, Quezon City
SY 2018 – Present

Secondary: TVL – Computer System Servicing

Cavite National High School
SY 2016 - 2018

Bread and Pastry

Cavite National High School
SY 2012 - 2016

Primary: Elementary
Julian R. Felipe Elementary School
Cavite City
SY 2006 - 2012

Academic Employment

173
OJT 200 HOURS: CEA, NEW ERA UNIVERSITY
August 2021 – December 2021
• Update and compile files
• Make an accomplishment report
• Project Designation

WORK IMMERSION Cavite City Tricycle Franchising and Regulatory

Board Office
2017 – 2017
• Tasked to make Graphics online and offline
layouts.
• Design marketing materials (Print and Digital) for
the company.

EXPERTISE

• Web Designing
• PHP
• HTML
• Microsoft Office Word
• Microsoft Office PowerPoint
• Microsoft Office Excel
• Excellent in written and verbal communication skills

SEMINARS ATTENDED

• Ethical Hacking (May 2021)

• The rise of Phishing attack (September 2021)
• Future of cybersecurity (September 2021)
• Create an eye-catching website – WordPress (September 2021)
• Introduction to Kubernetes (September 2021)
• Python and PHP programming (October 2021)
• Microsoft Azure Masterclass (November 2021)

174
COURSES/TRAINING
• SQL Masterclass: SQL for Data analytics (2021)
• Introduction to cloud computing and AWS (2021)
• CSS and JavaScript crash course (2021)
• Python Complete course for beginners (2021)
• Front end web development: complete guide (Step by step) (2021)
• IT/Desktop Computer support – Troubleshooting Technicians (2021)
• Fundamentals of computer Hacking (2021)

REFERENCES

Bryan Louis Lazaro Jherwin Lapuz

Professor Service Crew
T: 09612240187 T: 09561268000
E: mrious17@gmail.com E: kinkydanger5@gmail.com

175