AN-NAJAH NATIONAL UNIVERSITY FACULTY OF ENGINEERING AND INFORMATION TECHNOLOGY Computer Engineering Department Software Graduation Project TrainLink Dalia Hamed Dwaikat & Raghad Mustafa Deraweh Supervisor: Dr.Amjad Abu Hassan Presented in partial fulfillment of the requirements for a Bachelor's degree in Computer Engineering Jan 29, 2024 Acknowledgment We would like to express our heartfelt gratitude to all those who have contributed to our journey and aided us in successfully completing this integrated project. First and foremost, we extend our sincerest appreciation to our beloved families and mentors for their unwavering support, valuable guidance, and continuous encouragement throughout this endeavor. We are especially grateful to our project supervisor, Dr. Amjad Abu Hassan, for his invaluable expertise, insightful feedback, and dedicated supervision, which played a crucial role in shaping the project's direction and ensuring its success. Lastly, we thank our friends who provided us with encouragement, constructive suggestions, and helpful tips, contributing to the refinement of our work. We are truly fortunate to have professors in the Department of Computer Engineering of individuals who believe in our abilities and invest their time and efforts in our personal and academic growth. Their contributions have been instrumental in our achievements, and we are sincerely grateful for their presence in our lives. 1 Contents Acknowledgment...................................................................................1 Abstract..............................................................................................3 1. Introduction......................................................................................4 2. Constraints, Standards, and Earlier Coursework...................................... 5 2.1. Constraints Limitations.....................................................................5 2.2. Standards...................................................................................... 5 2.3. Earlier coursework...........................................................................5 3. Literature Review...............................................................................6 4. Methodology......................................................................................8 4.1. Tools, Methods and Programming Languages........................................ 8 4.1.1. Tools...........................................................................................8 4.1.2. programming language................................................................... 8 4.1.3. Database......................................................................................9 4.2. System Features Implementation....................................................... 16 4.2.1. Mobile Application.......................................................................16 4.2.1.1. Home Page.............................................................................. 24 4.2.1.2. Group Page .............................................................................30 4.2.1.3. Notifications Page …………………………………..................................38 4.2.1.4. Report Page ............................................................................39 4.2.1.5.a Form Page ............................................................................43 4.2.1.5.b File Page ..............................................................................44 4.2.2. web pages.................................................................................53 5. Results and Discussion......................................................................70 6. Conclusions and Recommendations......................................................71 6.1. Summary................................................................................... 72 6.2. Future work................................................................................72 7. References.....................................................................................72 2 Abstract University students in general, and computer engineering students in particular, frequently encounter the challenge of finding a suitable company to complete their practical training hours. Often, students face difficulty aligning the training topic with their interests. The application that addresses this issue and provides various facilitations for students, companies, and the university is the optimal solution. The application facilitates communication between students and the registered companies, allowing students to choose a company and a training topic that aligns with their interests. The app displays available training opportunities during the semester, specifying the training location, whether it is in-person or electronic, and also indicating the training topic from the beginning. Students can benefit from these features using various elements such as chat, notifications, and evaluations. Users can register as either students or companies in the application, providing essential information for each. The program includes several pages, including the main page displaying available training opportunities for companies, as well as the groups and reports sections that enable students to track their university training and complete their tasks. We chose to use the Flutter platform for the front end due to its numerous libraries and compatibility with various operating systems. For the back end, we opted for Node.js as it supports real-time communication, and we are already familiar with its functionalities. 3 1. Introduction Life is progressing rapidly in various fields, and as a result of these advancements, students find themselves scattered, with one of these deviations being the search for training that aligns with their interests. This puts students in need of a company that provides them with training to pave the way for their future careers. As Computer Engineering students, we experienced difficulties in coordinating and managing the training process at the practical training center. After meeting with the training center director, we realized the effort put into coordinating students' training with companies and monitoring them during the training period. Therefore, we decided to develop an application aimed at facilitating the distribution of work between students and the training center in collaboration with companies. The application enables students to view all the companies associated with the university that are ready to provide training. This helps them choose a suitable company for training in their preferred field and coordinate with it for an interview outside the training center. This is done by companies posting any available training for students on the application, if the student is accepted by the company, the company will send all the information to the university director. Afterward, the student can submit their weekly reports, allowing the supervisor at the university to monitor the students during their training until the end of the semester. Additionally, the student can follow up with their trainer within the company through the application, and the company can provide general feedback on student profiles, in addition to being able to see the student's profile and published projects. Our application makes the training application process easier and alleviates the burden on students from finding a company that offers training in their preferred field. Moreover, the application eliminates the need to wait for training acceptance and avoids distractions in the admission deadlines, in addition to replacing the need for sending emails and students overlooking them. In this report, we will present our implementation of this project. It begins with the ideation process, where we draw inspiration for the concept. Then, we added our own touch, building upon previous attempts using various methods and tools. We achieved 4 valuable results through this application. Subsequently, we analyze these results and provide a brief overview of our experience with the project. 2. Constraints, Standards, and Earlier Coursework 2.1. Constraints Limitations Embarking on a comprehensive and ambitious project inevitably comes with initial difficulties. Our journey began with the lofty objective of developing an integrated project that includes mobile and web front-end, as well as back-end components. One of the challenges we faced was the utilization of the Mongo database, which required a fast and stable internet connection. To address this, we implemented various optimization techniques in the backend code to improve data retrieval speed and ensure smooth communication between students and companies. Another constraint we encountered was the seamless transfer of work between team members. To overcome this challenge, we leveraged collaborative tools such as GitHub. This platform facilitated simultaneous work on different project components, enabling us to track progress and coordinate effectively. 2.2. Standards The development of both the web and mobile applications utilized the Flutter platform as the chosen frontend framework for all user categories, including admin, students, and companies. As for the backend, we opted for Node.js as the backend technology, ensuring efficient and seamless communication between the front end and the database. 2.3. Earlier coursework The knowledge and skills acquired during our previous coursework proved invaluable in the successful execution of our project. Concepts such as software development methodologies and database management played a crucial role in guiding our approach and informing our decision-making process. Despite the initial constraints and challenges we encountered, we take great pride in the fact that we were able to develop the mobile application and web pages through self-learning, utilizing freely available online resources. By overcoming these obstacles, we not only achieved our project goals but 5 also experienced substantial professional and personal growth, gaining valuable insights and expertise along the way. 3. Literature Review The integration of technology in educational settings, particularly in addressing the challenges faced by university students in finding suitable practical training opportunities, has been a subject of interest in the existing literature. The following literature review highlights key themes related to technology-driven solutions in facilitating communication between students, companies, and universities for effective practical training placement. 1. Technology in Education: The literature emphasizes the increasing role of technology in enhancing educational experiences. Various studies explore the use of mobile applications and online platforms to streamline processes related to student engagement, collaboration, and resource access. The integration of technology in university processes has become essential for providing students with efficient tools to navigate their academic journey. 2. Student-Industry Engagement: Research often underscores the significance of bridging the gap between students and the industry through practical training. The challenges students face in identifying suitable companies that align with their interests are well-documented. Technology-driven solutions can play a crucial role in facilitating this engagement by providing a platform where students can explore, connect, and apply for training opportunities. 3. Mobile Applications in Education: The literature acknowledges the effectiveness of mobile applications in creating seamless communication channels between different stakeholders in the education ecosystem. Studies have explored the impact of mobile apps on student engagement, information dissemination, and resource accessibility. The user-friendly interface and accessibility of mobile applications contribute to their popularity among students. 6 4. Real-Time Communication in Node.js: The use of Node.js for the back-end infrastructure aligns with the emphasis on real-time communication. Literature in this area highlights the benefits of Node.js in supporting asynchronous operations, making it suitable for applications that require instant updates and communication. This is particularly relevant for systems dealing with dynamic information such as training opportunities. 5. Flutter for Cross-Platform Development: The choice of Flutter for the front-end development of the application reflects a broader trend in utilizing cross-platform frameworks. Research highlights the advantages of Flutter, such as code reusability and the ability to deploy on multiple operating systems. This choice enables the application to reach a wider audience and ensures a consistent user experience. 6. Student Tracking and Evaluation: Existing literature also discusses the importance of systems that enable students to track their progress and evaluate their experiences. Technology can play a pivotal role in providing tools for students to manage their training, submit reports, and receive feedback. These features contribute to a more transparent and accountable training process. In conclusion, the reviewed literature underscores the significance of technology in addressing the challenges faced by university students in practical training placement. The proposed application aligns with these trends by leveraging mobile technology, real-time communication, and user-friendly frameworks to create an integrated platform for students, companies, and universities. Future research could explore the impact of such applications on student success, industry partnerships, and the overall effectiveness of practical training programs. 7 4. Methodology 4.1. Tools, Methods, and Programming Languages 4.1.1. Tools Visual Studio Code was the primary IDE used for writing and executing the code. It provided essential features and tools for code editing, debugging, and project management. Android Studio was utilized as an emulator to test the mobile application on different virtual devices, ensuring compatibility and smooth functionality. We utilized GitHub for collaborative development, code management, and tracking changes. Firebase was integrated into our project to leverage its real-time database and cloud storage capabilities. This allowed us to securely and efficiently store messages and images. We also utilized Firebase's messaging service to enable notification functionality, enabling communication from the web to mobile and between mobile devices. 4.1.2. programming language The mobile application and web pages were developed using a combination of programming languages: For the front end, we utilized Dart and the Flutter framework. Dart is a language specifically designed for building user interfaces, while Flutter provides a rich set of tools and widgets for creating visually appealing and interactive mobile applications. Node.js was chosen as the backend programming language. It is a popular runtime environment that enables server-side development and provides efficient handling of asynchronous operations, making it is suitable for building robust and scalable web applications. 8 4.1.3. Database For our project, we utilized MongoDB Atlas as the chosen database solution. MongoDB Atlas is a fully managed cloud database service that offers scalability, reliability, and security. It provided the necessary infrastructure to store and manage the project's data effectively. Several tables were created in the MongoDB Atlas database to accommodate different aspects of the application, including ● the university student table: figure 1: univ student table 9 ● Student in application table: figure 2: student table ● Company table: 10 figure 3: company table ● Posts table: It stores all the posts published by any company. figure 4: posts table ● Groups table: It stores all the information about the groups. figure 5: Groups table 11 ● Groups Posts table: It stores all the information about the posts inside the groups. Figure 6: Group Post table ● Tasks table: It stores all the information about the tasks that the company posts within the group. Figure 7: Tasks table 12 ● Submission table: All task submissions made by students are stored within this system. Figure 8: Submissions table ● Reports table: All report-related information is stored within it. Figure 9: Reports table 13 ● Forms table: In this table, all information related to the form for each student is stored. Figure 10: Forms table ● Projects table: It contains all the projects that the student publishes on their profile. Figure 11: Student Posts table (Projects) 14 ● PartnerShips Table: It stores all the companies that have a relationship with the university and are allowed to use the application. Figure 12: PartnerShips table 15 4.2. System Features Implementation 4.2.1. Mobile Application The mobile application, named TrainLink, was developed to facilitate seamless interaction between students, companies, and the university training supervisor, Figure: Main APP Page - sign-up page the user can register to the application with the required information, and determine if he wants to register as a student or as a company. 16 Various pages have been created for the account creation process for both students and companies. The process involves entering information accurately and comparing it with the application's database. The application will not accept any student or company that is not affiliated with the university. Additionally, the application checks for all empty fields and examines whether weak passwords are used or if the user has an account or not. This applies generally to both parties. Specifically for the student: The student enters their personal information, including contact details, along with a resume file due to its importance in the application. Additionally, the student specifies the field of study they are interested in. 17 ● Check if the student is in the university database or not: 18 password validation when login: As for the company, it enters all its information related to the university, including contact details and the field in which it operates. 19 * notice the validation here for email and ID number * notice the validation here for password 20 forgets account creation process, the application becomes available, allowing both the student and the company to log in and benefit from its services. The application includes a feature for password recovery in case of forgetting the password during the login process. Verification is done through the respective email addresses for both the company and the student by sending a code. Subsequently, the application allows them to change the password to a new one. After the successful login process, both the student and the company will see 5 Tabs, each providing specific functionalities to support the application's goals. Additionally, there is a messaging button to enhance communication between the company and students, along with another button for logging out. 21 ● login for student side: 22 ● login for company side: 23 4.2.1.1. Home Page - Company Side: On the company's side, the home page displays its information and allows the company to post its first training advertisement on its main page. The company begins the process of advertising its first training through the application, where it specifies all the information related to the training. This includes indicating whether it is a university training, the type of training (online or face-to-face), the number of training hours, the location of the training, the semester in which it will be conducted, the number of available seats, the subject of the training, and finally, specifying the time and date when the application for the training will be closed. This last feature is crucial as it informs the student about the period during which their acceptance will be determined. These are the essential details that are included in the training advertisement, in addition to any text or images the company wishes to include. 24 25 - Student Side: We notice that the student's homepage is empty and does not contain any advertisements, indicating that no companies are advertising any training at the moment. Also, we notice on the student's homepage the presence of several filters, including a filter for the field the student is searching for, a filter to specify the training location of interest, and additional filters to indicate whether the student is interested in university training or not. The last filter is whether the student prefers online training. These filters are designed to work together, making it easier for the student to find a suitable training opportunity in seconds. At the time when the company publishes the advertisement, a notification is sent to the interested student in the same field that the company has 26 advertised. This allows the student to view the relevant advertisement and apply for the training. 27 - Company Side: Returning to the company's homepage, we notice that the training advertisement contains all the information specified by the company, in addition to two new icons. The lock icon serves to lock the advertisement, preventing any student from registering for this training. Additionally, there is an eye icon that displays all the students who have applied for the training along with their resumes. This allows the company to easily view the resumes and make decisions regarding the initial acceptance of the student in the application or the possibility of rejection. 28 - Student Side The student who has completed an official university training course is not allowed to join another university training, as they have fulfilled the requirements of that course. However, the application allows them to join external training announced by companies. In addition, the application also prohibits a student who has not completed the requirements of the practical training course, specifically achieving the specified number of hours set by the university, from joining any other university training. Only non-university trainings are allowed for such students. If a student wishes to join another training while already having a pending application for another training, the application prevents them from doing so. The student's only option is to wait until the training advertisement is closed or to cancel their apply if the post is not locked for the current training. 29 4.2.1.2. Group Page The company cannot create any training group unless its advertisement is closed, during the process of creating the training group, only closed advertisements are allowed.( notice that there is no post-closed) After the project is closed, the company can now create its training group, add the students who have applied for this training, and start the training process, including filtering the students through it. 30 To start the training, the group goes through three essential and necessary stages for student filtering based on the requirements. Each stage is represented by a specific color, with red being the first stage where students take the training exam. The yellow stage is for interviews, and the third stage with the green color indicates that the training has commenced. At 31 each stage, the company filters students based on the results of both the exam and the interviews. The company can publish any advertisements or posts at any stage of the process. In the first stage, it can share information about the exam schedule. In the second stage, details about the interviews can be published, and in the third stage, tasks and announcements related to the training can be shared. 32 After the completion of the exam, the company filters the students based on the results. The application sends notifications to the rejected students, informing them of the company's decision. Then, the process moves on to the second stage, which is the interview stage. If the student qualifies for the second stage, the application sends them a notification to that effect. 33 In the second stage, the company can publish an advertisement related to the interview schedules. After the completion of the second stage, the company filters the students based on the interview results, and the application sends notifications to the students accordingly. In the first and second stages, the student can leave the training group. The application sends a notification to the company about this. 34 When the third stage begins, the application sends a notification to the accepted students. In the third stage, the company can publish advertisements related to the training, in addition to posting tasks. The company can add a student if it meets three conditions: Firstly, the student should not be enrolled in any other training. Secondly, they must have completed the allowed number of training hours if they are a university 35 student. Thirdly, they should have completed their university training if they have started it. 36 When the training starts, the company can publish tasks for the students and upload a PDF file containing details about each task, in addition to specifying the deadline for task submission, the application sends a notification to the students participating in this training about the existence of a new task, the student is required to submit the repository link related to the task on GitHub. ● task post: * notification for student: 37 ● submit task by student : 4.2.1.3. Notifications Page The notifications in this section display all the alerts that come to the application as a result of interactions, whether from the company or the student. Some of these notifications have been displayed at the top. 38 4.2.1.4. Report Page On this page, the student submits weekly reports, and both the company and the university training supervisor evaluate these reports based on the filtering between the training and the students in each training and displaying comments on each report by both the university and the company for the student. 39 ● for student side , when submit the report : ● for the company side, when adding feedback for each report: 40 ● We can filter all weeks for specific student and we can also choose a specific week for all students: ● Company can add comment on the report: 41 the green eye means that the company did write their comment on the report, but the red eye means they did not write the comment. ● for the student side, this is what is shown on the comments on reports: 42 4.2.1.5.a Form Page - Company only After the completion of the training, the company closes the group(Clicking on the icon button for Lock will convert the color from green to red ) and prepares for the final assessment process for the students. The company then sends the evaluations to the university for each student to determine their success in the course. 43 The final evaluation includes three topics about the student and their behavior during the training, the training itself, and finally, the supervisor who provided the training at the company. 4.2.1.5.b File Page - Student only 44 On this page, all the information related to the student is displayed, including contact information, personal projects published, as well as the training they joined and completed through the application. Additionally, educational information about their university enrollment is also included. After the training process is completed and the supervisor in the company evaluates the student, the program calculates a grade from all the results. The result is then displayed in the training section on the student's personal page, showing all evaluations comprehensively. 45 Features: The student can also, after completing the training, evaluate the company that provided the training. This can be done through the search button at the top of the page. The student searches for the company that conducted the training to provide feedback or view its posts and announcements. It's worth noting that the student can also search for any company to see its posts, but they are only allowed to evaluate the company they trained with. The student can specify their evaluation for any training group, especially if the student has completed more than one training within the same company in the past. 46 ● student can search about companies: * Student can rating the company: 47 The company receives a notification when a student provides feedback. 48 the company can access the students' pages and view their projects, information, and personal files. The student can publish projects on their personal profile by adding a link to the GitHub repository. Visitors to the profile can support the student by liking the projects. 49 The application provides the ability to create chatting between the company and the student 50 The student can edit the information in their personal profile. The user can change their password by using the email verification process in case they forget it. 51 52 The company can delete itself and terminate the relationship with the university 53 4.2.2. Web Page - Admin Side (Training Supervisor at the University ) On the login page, the admin enters the ID and password. Currently, there is one admin for the entire system, but in the future, it might be possible to have multiple admins. :The admin page has 7 Tabs, each with a specific function and purpose ● Overview Tab: 54 In this tab, information about university training programs and statistics about students is displayed. The statistics include 1. Number of Activated Training Programs: This shows the number of available training programs on the application based on the current phase. 2. Number of Available Companies: Displays the number of companies available during the current semester. 3. Number of University and Non-University Training Programs: Indicates the count of university and non-university training programs. 4. Number of Students Allowed to Register in University Training Courses: This shows the number of students allowed to register for university training courses in this semester, based on the university's database. 5. Number of Graduating Students: Displays the number of students accepted this semester, including those who completed university training and those who did not. 6. Priority Statistics: Presents the count of students with priority in registering for practical training courses based on statistics. This statistic will be further developed in the future. ● Highlights Tab: 55 In this tab, all active training for companies are displayed along with the current stage they are in. Additionally, all relevant information about each training is provided. This allows the university supervisor to track the progress of the training process. Additionally, there is the ability to view the students in each training and see statistical information regarding the submission of reports if the training is in its third stage. In addition, there is the ability to search and filter companies based on location, topic, and whether they are electronic. 56 ● Company Manage: In this section, the university supervisor can manage their relationships with companies by either deleting a partnership or establishing a new one. The deletion can either be mutually agreed upon between the company and the university, or it might result from negative evaluations by the students, The company is deleted from the application on a date specified by the admin. As for new partnerships, they are initiated from this section. The admin enters the details of a new company along with its unique ID, allowing the company to create an account on the application. 57 58 When the admin deletes the company, a warning notification is sent to inform them of this action on the application. 59 60 61 *validation case: ● Report Tracking: Through this tab, the active training reports for all students can be tracked, and the university has the ability to provide feedback, which is then visible to the students. 62 ● Student Review: In this tab, the student's progress in each training can be tracked, and information about their activities and the submission of reports is visible, additionally, the number of completed hours since the beginning of the training is displayed. 63 ● End of Training: In this tab, all completed university training are displayed along with their details and all the feedback received from students. This allows the university to track feedback for each company. Filtering can be done based on the year, semester, and location. 64 ● Forms: This section displays all the companies that have completed their training in the current semester, along with all the students to be evaluated by the university to determine their success in the practical training course. note: The questions that the company answers about training in the form are taken from the university supervisor, so they are the real questions that the university gets from the company. see in this photo the status: approved with green color means that the university finished adding the final grade, but not approved with red color means that the university still has not added the final grade. 65 66 67 Addition Feature on the web: ● Chatting: The student and the company can communicate with the university admin. 68 69 70 71 5. Results and Discussion The developed application has proven capable of achieving its intended goal, which is to alleviate the burden and distribute the work between the company, students, and the university training center. The application stands out for its ease of use, thanks to its simple and clear design. It specifically targets a certain segment of the community, namely the students of An-Najah National University, especially those studying computer engineering, and the affiliated companies. The application plays a crucial role in facilitating the process of finding internship opportunities for students. By providing an effective means of communication between companies and students, students can easily discover internship opportunities that align with their interests and fields of study. The application 72 allows students to track internship details and engage in direct communication with companies, contributing to an improved experience in searching for internship opportunities and avoiding long waits for email responses. Regarding the technical challenges, frequent updates and the evolution of software versions posed occasional obstacles that conflicted with the underlying structure of the application. Adapting to these challenges was necessary to ensure the continuity of the development process. Additionally, creating a robust and logical database system that retrieves and stores data efficiently proved to be a demanding challenge. Careful consideration in designing the infrastructure was crucial to ensure performance sustainability and ease of maintenance. From a practical perspective, challenges were related to inputting large amounts of data into the database in a way that accurately reflects the success of operations and ensures proper alignment. Addressing these challenges required thoughtful solutions to ensure that all data interacts correctly and effectively. Despite these challenges, the application was successfully developed according to the defined vision, resulting in satisfactory outcomes. 6. Conclusions and Recommendations In this project, we have successfully developed an application that provides students with the ability to access university internships without any hassle. The application is designed to be user-friendly, and suitable for university students, ensuring they can easily benefit from its features, whether for university internships or external training programs. 73 6.1. Summary Our application aims to connect students with companies to successfully complete their training hours with maximum benefit. The application assists students in performing their tasks, submitting their reports, and monitoring the progress of their training until its successful completion. The application pays special attention to student satisfaction with training in companies, allowing them to express their opinions and enabling the university to interact with companies that receive negative feedback. In addition, the application includes a notification system and chats between companies, students, and the university, making it more flexible. 6.2. Future work ● Adding priority for the student, so if the student does not find any available training during his semester, he can submit a request to the university admin to assert his right to obtain training in the next semester if he is a graduate before current students. ● Introducing artificial intelligence into the project by providing recommendations, the application can offer suggestions to students based on their interests. Additionally, the application can propose suitable students for available training opportunities for companies, whether these recommendations are based on skills or other factors. ● Adding the ability to make payments through the application for non-academic paid training. 7. References 1. Flutter flutter pub dev website. https://pub.dev/ 2. Firebase: Firebase website. Available at: https://firebase.google.com/ 3. MongoDB: MongoDB website. Available at: https://www.mongodb.com/. 74