An-Najah National University FACULTY OF ENGINEERING AND INFORMATION TECHNOLOGY Computer Engineering Department Software Graduation Project Side By Side Students: Laila Abu Safiya Sojod Jamous Supervisor: Samer Arandi May 25, 2023 Acknowledgment I would like to take this opportunity to express my heartfelt gratitude and appreciation to the following individuals and organizations who have played a significant role in the completion of my graduation project: First and foremost, I would like to express my deepest appreciation to my supervisor, Dr.Samer Arandi, for their unwavering guidance, invaluable insights, and continuous support through- out the entire duration of this project. Their expertise, patience, and dedication have been instrumental in shaping the direction of my research and ensuring its success. I am also grateful to the faculty members and staff of the Computer Engineering department for their provision of excellent academic resources, facilities, and a nurturing environment that has fostered my intellectual growth. Their commitment to education and their passion for their respective fields have been a constant source of inspiration. I would like to extend my sincere thanks to my classmates and peers who have been an integral part of this journey. Their camaraderie, engaging discussions, and willingness to collaborate have enriched my learning experience and made this project more enjoyable. I am truly grateful for their friendship and support. My deepest appreciation goes to my family for their unconditional love, encouragement, and belief in my abilities. Their unwavering support and sacrifices have been the driving force behind my accomplishments. I am forever indebted to them. Completing this graduation project has been a challenging yet fulfilling endeavor, and it would not have been possible without the unwavering support and contributions of these exceptional individuals and organizations. Thank you from the bottom of my heart for being a part of my academic journey and for helping me achieve this milestone. 1 Abstract Out of our love for our homeland, Palestine, we thought of a project that works to alleviate the suffering of the Palestinian people in the registration process for visiting prisoners in the occupation prisons, in addition to facilitating the process of coordinating visits programs for the International Committee of the Red Cross. So this project is about creating a mobile application used by the families of prisoners who want to arrange a visit for them, and thus the application facilitates the process of booking visits for families and facilitates their communication using a direct chat with the International Committee of the Red Cross, the families being able of booking a visit through a page that contain the available visits in the during the month. They can click on the appropriate visit for them and see detailed information about it, also, there will be a reservation button for booking a visit, or they can inquire about the visit by pressing the query button, which allows sending an email. And the system will also provide certificates or paper proof needed by users, the user can choose the specific certificates they need such as a visit permit or arrest certificate, also, the user will be able to download them as PDF files to print them later, in the mobile application there’s will be a part of the real-time chat to communication between prisoners families, so using it they can contact reassure each other and talk about news together, also, there’s will be part to the latest news about the prisoners that is published by the staff in Red Cross. In addition, the project will contain a web portal for the staff of the Red Cross who deal with prisoners and prisoners’ families, this portal enables them to coordinate visit programs for the families of prisoners, as it contains complete data for prisoners, their families, and prisons, which helps in organizing the process of coordinating visits, it enables them to communicate with the families of prisoners easily by the direct chat, also the portal will support real-time notification in case if there’s any change in the visit it will send to all visitors in this day and if there is no respond from the user the staff will call to them, and the system will also provide certificates or papers Proof needed by the staff like health insurance and there’s the ability to print them, also, the staff can publish the latest news about the prisoners. As a result, this project will facilitate faster communication between the International Committee of the Red Cross and the families of the prisoners than the traditional methods. React Native and Node.JS are the programming languages that we will use to write the appli- cation and website. Also, we will use SQLite and DB at the backend. As a result, this project will cover all the needs of prisoners’ families and provide them with services easily, in addition to that it will be a new version of the traditional method used by the Red Cross in tracking the conditions of prisoners and communicating with their families. 2 Contents List of Figures 5 1 Introduction 7 1.1 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 1.2 Aims and Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2 Constraints and Earlier work 1 2.1 Constraints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2.2 Earlier work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 3 Literature Review 2 4 Methodology 4 4.1 Non-Functional Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 4.2 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 4.2.1 Registration and Log In . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 4.2.2 Book visits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 4.2.3 Map and guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 4.2.4 Certificates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 4.2.5 Urgent inquiries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 4.2.6 Real time chat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 4.2.7 Login and Registration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 4.2.8 Real-time chat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 4.2.9 Emergency Messaging Service . . . . . . . . . . . . . . . . . . . . . . . . . 6 4.2.10 Announcements Feature . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 4.2.11 Employee Data Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 4.2.12 Prisoner and Family Data Management and Visits . . . . . . . . . . . . . 7 4.2.13 Notifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 4.3 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 4.3.1 Key Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3 CONTENTS CONTENTS 4.4 Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 5 Results 10 5.1 User App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 5.1.1 Start Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 5.1.2 Registration Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 5.1.3 Login Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 5.1.4 Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 5.1.5 Reset Password . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 5.1.6 Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 5.1.7 Information Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 5.1.8 Visits Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 5.1.9 Reservation Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 5.1.10 Certification Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 5.1.11 Chat Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 5.1.12 Emergence Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 5.2 Admin Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.2.1 Login page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.2.2 Sign up page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.2.3 Homepage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.2.4 Chat page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.2.5 Profile page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 5.2.6 Visitors page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 5.2.7 Add visitor page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 5.2.8 Visitor Details page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 5.2.9 Editing Information page . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 5.2.10 visit information page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 5.2.11 Prisoners page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 5.2.12 Official paper issuance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 5.2.13 Emergency messaging page . . . . . . . . . . . . . . . . . . . . . . . . . . 34 6 Results and discussion 35 7 Conclusions 36 4 List of Figures 5.1 App Start Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 5.2 App Registration Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 5.3 App Registration Notification Page . . . . . . . . . . . . . . . . . . . . . . . . . . 12 5.4 App Login Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 5.5 App Login Notification Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 5.6 App Login Notification Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 5.7 App Registration Notification Page . . . . . . . . . . . . . . . . . . . . . . . . . . 14 5.8 App Reset Password Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 5.9 App Reset Password Notification Page . . . . . . . . . . . . . . . . . . . . . . . . 15 5.10 App Reset Password Notification Page . . . . . . . . . . . . . . . . . . . . . . . . 15 5.11 App Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 5.12 App Information Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 5.13 All Available Visits Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 5.14 Visits Available for user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 5.15 Confirmation to book a visit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 5.16 Booked Visit Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 5.17 Confirmation to cancel the visit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 5.18 App Certification Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 5.19 Download or Print Certification . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 5.20 Certification PDF file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 5.21 Chat Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 5.22 Search In Chats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 5.23 Messages Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 5.24 Emergence Messages Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 5.25 Send An Emergence Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 5.26 Login Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.27 Signup Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.28 Responsive Signup Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 5 LIST OF FIGURES LIST OF FIGURES 5.29 Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.30 Chat Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.31 Profile Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 5.32 Visitor Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 5.33 Visitor Input Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 5.34 Visitor Print Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 5.35 Add Visitor Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 5.36 Visitor Details Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 5.37 Editing Information Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 5.38 Visit Information Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 5.39 Visit Details Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 5.40 Visit Edit Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 5.41 Add Visit Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 5.42 Prisoners Information Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 5.43 Prisoner Details Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 5.44 Prisoner Edit Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 5.45 Add Prisoner Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 5.46 Proof Paper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 5.47 Print Proof Paper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 5.48 Emergency messaging page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 6 Chapter 1 Introduction In today’s era of technological advancements, the use of mobile phones has become indispens- able in people’s lives. The range of smartphone applications providing various life services to users has expanded and diversified. This particular application aims to cater to the needs of prisoners’ families, offering them convenient services. It will serve as an upgraded version of the traditional method employed by the Red Cross to monitor prisoners’ conditions and facilitate communication with their families. Throughout the Software Development Lifecycle, the soft- ware product underwent design, development, and testing phases. The graphical user interface (GUI) of the application was created using customized art components, while the Android SDK was utilized for implementing its functionality. The software testing process was successfully executed. 1.1 Motivation The families of the prisoners in the occupation prisons are considered the main target group in the application, as the application aims to facilitate the process of booking visits to the occupation prisons and knowing the latest news about the conditions of the prisoners, in addi- tion to facilitating the process of communication between families among themselves and also facilitating the process of communication with the Red Cross authorities. The application also targets the employees of the Red Cross, as it facilitates their work and communication with the families of the prisoners, as the main motivation for the idea of the application is that the process of registration and communication in the Red Cross is still primitive, as the application is considered the first practical idea to facilitate the process through a phone application and a complete system for the employees of the Cross, And this is what the Red Cross aspires to provide. 7 1.2. AIMS AND OBJECTIVES CHAPTER 1. INTRODUCTION 1.2 Aims and Objectives The objective of this project is to establish a platform enabling prisoners’ families to effortlessly communicate with the relevant authorities and acquire identification documents. It aims to streamline the process of accessing specific services and also provides a comprehensive system to enhance employees’ workflow efficiency. Furthermore, our goal is to address the various challenges faced by the target groups involved in this project. All these endeavors are dedicated to serving this community, making their lives easier. Additionally, this initiative contributes to the betterment of our society, both economically by providing job opportunities through the application and emotionally and socially by boosting morale and fostering social connections. 8 May 25, 2023 Chapter 2 Constraints and Earlier work 2.1 Constraints Initially, we encountered several challenges and difficulties when embarking on the project, particularly in terms of establishing a solid foundation and understanding the fundamentals. Furthermore, we faced the hurdle of unfamiliar programming languages required for develop- ing the project, considering our lack of prior experience in creating smartphone applications. Additionally, we encountered obstacles with heavy software programs, making installation on devices cumbersome. Time constraints also posed a significant challenge, requiring us to care- fully manage our schedules to allocate sufficient time for project work alongside our academic responsibilities. Another constraint we faced was the limited availability of educational re- sources. Most training courses and learning materials primarily focused on other programming languages such as Flutter and Java, which necessitated additional time and effort spent on re- search and problem-solving. We sought assistance from experts and individuals with extensive knowledge to overcome these obstacles and find suitable solutions. 2.2 Earlier work Some applications are similar in idea to the application that we presented, such as the Inside Connection application that helps families track their relatives in the prison system, but in our country, it was the first idea that was applied as the competent authorities aspire to develop an application that facilitates the process and keeps them in contact with families prisoners. 1 Chapter 3 Literature Review The proposed project aims to address the challenges faced by the Palestinian people in the registration process for visiting prisoners in occupation prisons, while also streamlining the coordination of visitation programs for the International Committee of the Red Cross. This application is completely different and unique, as it is considered the first electronic application for the work of the Red Cross, in addition to being the first application that will serve users and enable them to obtain all their needs from one place. This application collects services of all kinds and collects the needs that may be needed by the families of the prisoners, as well as collects the tasks carried out by the Red Cross employees, and this works to facilitate things Which they make a great effort to perform daily, in addition to enabling them to benefit of it in several ways. The statistics issued by the prisoners’ institutions show the number of prisoners in the occupa- tion prisons, where the occupation continues to detain about (4900) prisoners, including (31) female prisoners, and (160) children, including a girl, under the age of (18) years, in addition to more than (1000) administrative detainees, including (6) children, and two female prisoners. One of the problems faced by the families of prisoners during the registration of visits is that the registration process takes place either by calling the International Society of the Red Cross at specific times that be determined by the International Society of the Red Cross to receive the registration of visits. Also, there are many difficulties facing the staff of the International Society of the Red Cross It is that the process of registering and following up on the conditions of prisoners is carried out using traditional, paper-based methods. There is no specific place that collects all their work, and the large number of prisoners and distribution in several prisons in different regions, which increases the difficulty and complexity of their work. In summary, this literature review highlights the significance of the proposed project in ad- dressing the challenges faced by prisoners’ families in the visitation process. It showcases the positive impact of mobile applications in enhancing communication, streamlining procedures, and providing real-time updates. Also, the project aims to revolutionize the traditional methods 2 CHAPTER 3. LITERATURE REVIEW employed by the Red Cross and offer a comprehensive solution to meet the needs of prisoners’ families. 3 Chapter 4 Methodology 4.1 Non-Functional Requirements Screen Adaption This program has the capability to dynamically adjust its interface to fit various screen sizes. It also includes automated features for modifying fonts, sizes, and images, ensuring optimal rendering across different devices. Security To protect the chat functionality from internal threats and external unauthorized access, a login page is implemented. Users are required to provide a password of at least 8 characters in length to gain access. Ease-of-use The application is designed with a user-friendly approach in mind. Each page is equipped with a set of icons and links that facilitate quick navigation between different sections and allow users to easily return to the previous page. Use-ability The software is designed to be self-explanatory and intuitive, enabling users to grasp its func- tionality without the need for professional assistance or support. The interface is designed to be easily understandable, minimizing the learning curve for users. 4.2 Design Early scheduling of the design functionality is crucial during the initial stages of developing an application from scratch. The graphical user interface holds immense significance as it aids in understanding the program’s intended operation. When embarking on the design process for any application, it is imperative to consider certain fundamental aspects. These include examining similar applications in the App Store, crafting a design that aligns with the offered 4 4.2. DESIGN CHAPTER 4. METHODOLOGY services and target audience, and devising a unique design that sets this application apart from others in its category. 4.2.1 Registration and Log In As we discussed earlier, the project offers a range of services catering to two distinct types of users. Firstly, there are individuals who can utilize the application as regular users to avail themselves of the provided services. Additionally, Red Cross employees have access to a comprehensive website system that facilitates their work. To obtain a regular user account, individuals need to fill out their information on the registration page and gain approval from Red Cross employees. Employees themselves can create an employee account using their own information. Our application provides both a sign-up and log-in functionality. Users who already have an account can access the application by visiting the log-in page and entering their ID number and password. On the other hand, users who don’t have an account can create one by filling out all the required information on the sign-up page. The necessary information includes email, ID number, username, phone number, and address. 4.2.2 Book visits One of the services provided by the application is to facilitate the process of booking visits by the families of prisoners, where all the visits that the user can register for are displayed based on the location of his prisoner and enable him to book a visit and view all information related to it, in addition to the possibility of canceling the visit reservation in the event of withdrawal, In addition, the visit reservation system provides a specific number of visitors for each visit that cannot be exceeded. Through this service, users can book and view visits without the need to go to the Red Cross center or call and wait for a response. 4.2.3 Map and guidelines Since the application would like general information that enables users to know all the operations that take place and know where they are directed to the places of prison distribution, there is also a map to make it easier for citizens to know the location and distribution of prisons. This service makes it easier for users to know the purpose of the application, in addition to knowing them and providing them with all the information they need, especially if they do not have any knowledge about the instructions and procedures that take place. 4.2.4 Certificates One of the services offered by the application is the acquisition of permits that validate an individual’s authorization to enter occupied territories. Additionally, the application provides 5 4.2. DESIGN CHAPTER 4. METHODOLOGY visit permits for accessing prisons to visit incarcerated individuals. These permits include es- sential information such as the person’s name, ID number, and the validity period of the permit, among other details. This service significantly alleviates the burden on citizens by eliminating the need to physically collect their permits. Instead, they can obtain them electronically, print them out, or download them on their mobile phones for convenient access. 4.2.5 Urgent inquiries The application also contains an emergency inquiry service, which is the inquiries that the user may ask about, so he sends his query to the Red Cross to be answered quickly, in addition to that it enables the Cross staff to send quick emergency news such as postponing the visit for a specific reason. This service provides many facilities, the most important of which is that it enables the user to send the query they need without the need to go to the Red Cross authorities or to send official e-mails and wait for a response. 4.2.6 Real time chat The application provides actual conversations where users can communicate with each other at any time, where it will be a list of users with the possibility of sending to any of them, and thus provides a network of communication between the families of the prisoners. Furthermore, the dedicated website for employees includes the following: 4.2.7 Login and Registration The website provides a login and registration feature that allows new employees to register by entering their name, identification number, profile picture, email, password, and other required information. They can then log into the system using their email and password credentials. 4.2.8 Real-time chat The chat feature on the International Committee’s website allows employees to communicate with each other. It provides the option to create both group chats, enabling multiple individuals to participate in a conversation, as well as one-on-one private chats with specific individuals. Additionally, users can upload and share images within these conversations, enhancing the communication experience. 4.2.9 Emergency Messaging Service The website also offers an emergency messaging service that enables employees to send urgent messages to specific visitors of a visit. These messages can notify visitors about visit can- cellations or schedule changes. The service displays all emergency messages sent by visitors 6 4.3. IMPLEMENTATION CHAPTER 4. METHODOLOGY through the application, including sender details, message subjects, content, and timestamps. This feature establishes direct communication between International Committee employees and visitors and facilitates collective reporting of emergency messages, eliminating the need to send individual messages to each person. 4.2.10 Announcements Feature The website provides a feature for posting updates that can include images or text content to inform families about important events such as specific visitation schedules or cancellations. These posts are visible to users on both the application and the website, allowing them to interact by liking the posts. Additionally, employees have the ability to delete specific posts if needed. 4.2.11 Employee Data Display The website also features a user data display that includes the employee’s information, cover photo, profile picture, and all the posts they have published. Additionally, this feature allows the employee to modify any of their personal information. 4.2.12 Prisoner and Family Data Management and Visits The website also features the ability to display prisoners’ and their families’ data, as well as visitation information, in the form of tables from the database. Employees can click on any row within these tables to edit specific data, view it in a detailed format, or delete it from the system. Furthermore, employees can print or download this data in PDF format, search for specific information within it, or add new data to the database. 4.2.13 Notifications The website features a notification icon that displays to the employee any visitor requests for registration in the system. Additionally, it indicates whether there are any emergency messages present or not. 4.3 Implementation 4.3.1 Key Library Server Side MySQL The selection of the MySQL database was driven by its user-friendly nature and widespread adoption in the software development field. Its ease of use and popularity made it a suitable 7 4.4. TOOLS CHAPTER 4. METHODOLOGY choice for our project. To establish a connection between the database and the user-facing application, we employed Node.js as an intermediary. Node.js acts as a bridge, facilitating seamless communication and data exchange between the application and the MySQL database, ensuring a smooth user experience. Client Side React Native React Native is an open-source UI software framework developed by Meta Platforms. It em- powers developers to create applications for various platforms such as Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP. By utilizing the React framework in conjunction with native platform capabilities, React Native enables developers to leverage a unified code- base for building UI components. This approach allows for code reusability, as developers can write code once and deploy it across multiple platforms. React Native also offers a standardized set of APIs that simplify the development process and facilitate the creation of intuitive and responsive user interfaces. React JS React JS is an open-source JavaScript library developed by Facebook. It empowers developers to build user interfaces for various platforms, including web and mobile. By employing the React framework alongside native platform capabilities, React JS enables developers to create UI components with a unified codebase. This approach promotes code reusability, allowing developers to write code once and deploy it across multiple platforms. React JS provides a standardized set of APIs that streamline the development process and facilitate the creation of intuitive and responsive user interfaces, similar to React Native’s offerings for multi-platform development. 4.4 Tools Android Studio Android Studio serves as the official Integrated Development Environment (IDE) for Android app development and is built upon IntelliJ IDEA. It combines the robust code editor and developer tools of IntelliJ with additional features specifically tailored for cre- ating Android applications. Android Studio offers a comprehensive suite of tools designed to enhance productivity during the development process. These tools include specialized features and functionalities that streamline Android app development, enabling developers to create high-quality applications efficiently. VS code Visual Studio Code is a lightweight yet highly capable source code editor designed for Windows, macOS, and Linux platforms, offering a local desktop-based development envi- 8 4.4. TOOLS CHAPTER 4. METHODOLOGY ronment. It comes equipped with built-in support for popular programming languages such as JavaScript, TypeScript, and Node.js. Additionally, Visual Studio Code boasts a thriving ecosystem of extensions that expand its functionality to support a wide range of other lan- guages and runtimes, including C++, C, Java, Python, PHP, Go, and .NET. This extensibility makes it a versatile choice for developers working with different technologies, providing them with a customizable and efficient coding experience. 9 Chapter 5 Results This project aims to serve the community as a whole by providing job opportunities for many groups as application developers in addition to facilitating the services that the target groups need from the application and also facilitating the work of employees in the Red Cross through the website. 10 5.1. USER APP CHAPTER 5. RESULTS 5.1 User App 5.1.1 Start Page Figure 5.1: App Start Page Start Page is the first screen that provides an introduction to the application and explains its purpose. It offers two buttons to users: ”Register” for those who do not have an account and wish to create one, and ”Login” for those who already have an account and want to access it. 11 5.1. USER APP CHAPTER 5. RESULTS 5.1.2 Registration Page Figure 5.2: App Registration Page Figure 5.3: App Registration Notification Page ID Number: Unique number for each person, just numbers characters, and symbols not accepted. Email: It must be real, also there’s a verification for it. User Name: The user’s full name as it because it will check by the admin. Password: At least it will be 8 characters, but there’s no restriction on it. City: The city that you live in. 12 5.1. USER APP CHAPTER 5. RESULTS 5.1.3 Login Page Figure 5.4: App Login Page Figure 5.5: App Login Notification Page To access your account, you will need to log in using your registered ID Number and the corresponding password. In the event that you forget your password, you can simply tap on the ”Forgot Password” option to initiate the password reset process. Once you provide the correct login credentials, you will be directed to the home page. On the home page, you will have access to our comprehensive range of services and features designed to enhance your online experience. 13 5.1. USER APP CHAPTER 5. RESULTS 5.1.4 Validation Figure 5.6: App Login Notification Page Figure 5.7: App Registration Notification Page To sign up and create a new account, the user must put in a password of not less than 8, and the user should fill in all fields after that the account will create. 14 5.1. USER APP CHAPTER 5. RESULTS 5.1.5 Reset Password Figure 5.8: App Reset Pass- word Page Figure 5.9: App Reset Pass- word Notification Page Figure 5.10: App Reset Pass- word Notification Page If you have forgotten your password, you can easily reset it by following the steps on the screen. You will be prompted to enter your ID Number and create a new password. After providing the necessary information, you can click the button to check if your ID Number exists in the database. If a match is found, you will be able to reset your password successfully, ensuring secure access to your account. 15 5.1. USER APP CHAPTER 5. RESULTS 5.1.6 Home Page Figure 5.11: App Home Page The main interface is the first screen that is displayed when logging in. This interface contains the latest news that talks about the conditions of prisoners in the occupation prisons, in addition to that this interface contains a special card that displays all the information that the user needs to know, especially if he does not have any foreknowledge. Also, in this bar, the user can view all available visits within a month, and also view information about the visit that he has booked, and can navigate to the real-time chat interface, and there is also a final screen, which is the certification screen 16 5.1. USER APP CHAPTER 5. RESULTS 5.1.7 Information Page Figure 5.12: App Information Page This page contains a piece of general information such as the prison and its location, some laws that the user should know, And some other instructions for the user, also include a map that shows the exact location of the user, which can help the user to find his direction. 17 5.1. USER APP CHAPTER 5. RESULTS 5.1.8 Visits Page Figure 5.13: All Available Vis- its Page Figure 5.14: Visits Available for user Figure 5.15: Confirmation to book a visit This page contains all visits available during the next month, as it shows the user all visits in all prisons, and there is an option for my available visits, as this option displays only visits that the user can register for. This page enables the user to register for the visit he wants if he fulfills the visit conditions, which is to confirm if his prisoner is in the prison to which the visit will take place, this page also displays confirmation when the visit is booked by the user, whether he wants to confirm or cancel the visit. 18 5.1. USER APP CHAPTER 5. RESULTS 5.1.9 Reservation Page Figure 5.16: Booked Visit Page Figure 5.17: Confirmation to cancel the visit This page contains the visit that the user booked, where the visit information appears clearly, also this page enables the user to cancel the visit so this it displays confirmation when the user wants to cancel the visit, conformation whether the user wants to cancel or stay on the visit and not cancel it. 19 5.1. USER APP CHAPTER 5. RESULTS 5.1.10 Certification Page Figure 5.18: App Certification Page Figure 5.19: Download or Print Certification Figure 5.20: Certification PDF file This page is considered one of the important pages that help the user and reduce the effort expanded, as this page enables the user to obtain the certificate he needs without the need to go to the red cross authorities and request this certificate and wait until it is issued, where the user can view, download, print and share the certificate he needs only through the application. Where the application contains a certificate of entry to the occupied territories and a certificate of visitation that enables the user to go to visit. Each of these certificates contains information about the user, its validity date, and the areas it is allowed to go to. 20 5.1. USER APP CHAPTER 5. RESULTS 5.1.11 Chat Page Figure 5.21: Chat Page Figure 5.22: Search In Chats Figure 5.23: Messages Page Users can communicate with each other through real-time chat, where each user can send and communicate with any user of the application and exchange messages between them, as it is considered a means of communication between them. 21 5.1. USER APP CHAPTER 5. RESULTS 5.1.12 Emergence Messages Figure 5.24: Emergence Mes- sages Page Figure 5.25: Send An Emer- gence Message In addition, to chat, there is also an emergency text messaging system in case he needs to send messages to the Red Cross to inquire or ask about a specific matter, where the user can write the inquiry he wants and send it and wait for the response from the Red Cross without the need to go to their centers and ask what they need. 22 5.2. ADMIN PAGE CHAPTER 5. RESULTS 5.2 Admin Page 5.2.1 Login page Figure 5.26: Login Page The login page features two input fields for entering the email and password, along with a ”Login” button. It is worth noting that each user of the system has a unique email. In case the employee does not have an account, they can click on the ”Sign Up” button to create one. 5.2.2 Sign up page The signup page is accessed by the user if they haven’t registered in the system before. They need to enter their name, location, profile picture, email, and password. Upon clicking the ”Sign Up” button, they will be successfully registered in the system, given that the email is unique. It is worth mentioning that all fields are required except for the profile picture. Additionally, the page also contains a ”Log In” button for users who already have an existing account. Figure 5.27: Signup Page 23 5.2. ADMIN PAGE CHAPTER 5. RESULTS It should be noted that both the signup and login pages are responsive, meaning that the posi- tion of the components within them adjusts according to the screen size to ensure compatibility with all screen sizes. Figure 5.28: Responsive Signup Page 24 5.2. ADMIN PAGE CHAPTER 5. RESULTS 5.2.3 Homepage Figure 5.29: Home Page The homepage, which is displayed after logging in, allows the employee to publish posts and view all the posts in the system. Additionally, it features a monthly calendar and a top navigation bar that displays notifications regarding visitor registrations and emergency messages. 5.2.4 Chat page Figure 5.30: Chat Page The chat page displays previous conversations and allows the user to create new conversations. It includes a chat area where specific chat messages are displayed, enabling the user to send text and image messages within the conversation. The page also shows the participants involved in the conversation and includes an option to display images within the chat. Additionally, there is an option to delete the conversation. 25 5.2. ADMIN PAGE CHAPTER 5. RESULTS 5.2.5 Profile page The personal profile page displays information about the employee, including their personal details and the posts they have published. Figure 5.31: Profile Page 5.2.6 Visitors page The visitors’ information table page displays a table with visitor data in the system, including name, picture, visitor’s associated prisoner ID, and more. Each row in the table contains three icons: one for displaying detailed information, another for editing the row’s data, and the third for deleting the visitor from the system. Additionally, the page includes three top buttons for downloading the table as a PDF, printing it, or adding a visitor to the system. Figure 5.32: Visitor Page 26 5.2. ADMIN PAGE CHAPTER 5. RESULTS Furthermore, the page includes an input field where the desired search data can be entered, and the table is filtered based on the input. Figure 5.33: Visitor Input Page When the ”Print” button is clicked on the page, it triggers the printing functionality for the table. Figure 5.34: Visitor Print Page 27 5.2. ADMIN PAGE CHAPTER 5. RESULTS 5.2.7 Add visitor page Figure 5.35: Add Visitor Page The visitor registration page allows the employee to request visitor information and register them in the system. Once registered, the visitor gains access to the application and can reg- ister for visits. It is important to note that the ID is unique and that an email is required. Additionally, the visitor must have a corresponding prisoner in the system to be accepted for registration. All fields are mandatory, except for the photo and VisitID. 5.2.8 Visitor Details page Figure 5.36: Visitor Details Page The Visitor Details page provides detailed information about the visitor. It displays the associ- ated prisoner’s data, including their place of confinement. It also shows the recorded visit and its details. Additionally, the page includes two buttons: one to return to the table and another to access the visitor’s information editing page. s 28 5.2. ADMIN PAGE CHAPTER 5. RESULTS 5.2.9 Editing Information page Figure 5.37: Editing Information Page The Editing Information page allows the employee, to modify the visitor’s data in the system. It displays the visitor’s existing information, which can be edited by clicking on the respective field. Additionally, there is a button to save the modified information. 5.2.10 visit information page Figure 5.38: Visit Information Page 29 5.2. ADMIN PAGE CHAPTER 5. RESULTS Figure 5.39: Visit Details Page Figure 5.40: Visit Edit Page Figure 5.41: Add Visit Page 30 5.2. ADMIN PAGE CHAPTER 5. RESULTS 5.2.11 Prisoners page The prisoners’ page contains all the properties found on both the visit details page and the visitor page. Figure 5.42: Prisoners Information Page Figure 5.43: Prisoner Details Page 31 5.2. ADMIN PAGE CHAPTER 5. RESULTS Figure 5.44: Prisoner Edit Page Figure 5.45: Add Prisoner Page 32 5.2. ADMIN PAGE CHAPTER 5. RESULTS 5.2.12 Official paper issuance Figure 5.46: Proof Paper Figure 5.47: Print Proof Paper The permit issuance page allows the entry of a specific visit ID, and upon clicking the ” Generate Permit Form ” button, all permits for the registered visitors on that visit are generated. By clicking the ”Download PDF” button, all the permits are compiled into a PDF file, which can be downloaded and printed. 33 5.2. ADMIN PAGE CHAPTER 5. RESULTS 5.2.13 Emergency messaging page Figure 5.48: Emergency messaging page The emergency messaging service page in the system contains three fields: subject, visitor ID, and location, along with a button to send the notification. Additionally, the page displays a list of all emergency messages previously sent by visitors. These messages include sender details, message subjects, content, and timestamps. This feature facilitates direct communication be- tween International Committee employees and visitors, enabling efficient handling of emergency situations and important updates. 34 Chapter 6 Results and discussion The increasing popularity of smartphones has led to people relying on mobile apps for their daily tasks, thus simplifying their lives. These apps cover various areas such as entertainment, sports, lifestyle, education, games, food, and drink, health and fitness, and banking. However, there is a noticeable absence of an application that meets the needs of the families of prisoners in occupation prisons and assists the Red Cross staff in their work. To address this gap, our goal was to create an all-in-one app that caters to their diverse interests and fulfills their requirements. We’ve made great progress towards this goal, and anticipate that additional features can be integrated as the app is used more. These features could include a comprehensive reservation system, which tracks the itinerary of the visit, as well as adding other services that match the user’s needs, now and in the future. By constantly improving and improving the app, we aim to attract more users and improve its overall functionality. 35 Chapter 7 Conclusions The rise in smartphone sales has led to a widespread adoption of mobile apps, enabling people to accomplish their tasks and enhance their daily lives. These apps span across various categories, encompassing entertainment, sports, lifestyle, education, games, food and beverages, health and fitness, banking, and more. However, we have observed a lack of specific services catering to certain groups and a tendency for apps to focus on limited activities and offerings. Recognizing this disparity, our aim is to create an application that benefits all groups, thereby addressing this gap. To this end, we have decided to develop an application that serves the families of prisoners and the staff of the International Committee of the Red Cross. Our application targets multi- ple sectors within society. It primarily focuses on the community services sector by providing easily accessible and efficient solutions for the families of prisoners in occupation prisons, re- lieving them from the burdensome task of fulfilling their needs, which can be challenging due to transportation constraints. Additionally, the application also caters to the professional sec- tor by streamlining and simplifying the work processes for employees, reducing their need for excessive efforts to carry out their daily tasks. Our ultimate goal is to make a significant and qualitative impact on our society and improve the conditions for prisoner families while simultaneously making life easier for everyone. 36 CHAPTER 7. CONCLUSIONS [1] [2] [3] [4] [5] [6] [7] 37 Bibliography [1] Alex Banks and Eve Porcello. Learning React: functional web development with React and Redux. ” O’Reilly Media, Inc.”, 2017, pp. 175–201. [2] Stoyan Stefanov. React: Up & Running. ” O’Reilly Media, Inc.”, 2021, pp. 169–186. [3] Mike Cantelon et al. Node. js in Action. Manning Greenwich, 2014, pp. 13–34. [4] Marc Wandschneider. Learning Node. js: a hands-on guide to building Web applications in JavaScript. Addison-Wesley Professional, 2016, pp. 27–43. [5] Nader Dabit. React Native in action. Manning Publications, 2019. [6] Eric Masiello and Jacob Friedmann. Mastering React Native. Packt Publishing Ltd, 2017. [7] Akshat Paul and Abhishek Nalwaya. React native for IOS Development. Springer, 2016. 38 List of Figures Introduction Motivation Aims and Objectives Constraints and Earlier work Constraints Earlier work Literature Review Methodology Non-Functional Requirements Design Registration and Log In Book visits Map and guidelines Certificates Urgent inquiries Real time chat Login and Registration Real-time chat Emergency Messaging Service Announcements Feature Employee Data Display Prisoner and Family Data Management and Visits Notifications Implementation Key Library Tools Results User App Start Page Registration Page Login Page Validation Reset Password Home Page Information Page Visits Page Reservation Page Certification Page Chat Page Emergence Messages Admin Page Login page Sign up page Homepage Chat page Profile page Visitors page Add visitor page Visitor Details page Editing Information page visit information page Prisoners page Official paper issuance Emergency messaging page Results and discussion Conclusions