Tunisian Republic

University of Tunis el Manar

Higher Institute of Computer Science

Report of Thesis

Presented as part of the module

Projet fédéré

Topic

Design and Implementation of the Mobile Application “ IsiLink” for

Education Resources

Submitted by
Wiem Amdouni
Ferdaous Ouertani
Salma Guesmi
Noureddine Abdelghani

Supervised by
Ms. Mariem Kallel

Academic Year: 2024-2025

List of content

Project Study............................................................................................. 5

1.1 Introduction........................................................................................................ 5

1.2 Problematics...................................................................................................... 5

1.3 Solution and Goals............................................................................................ 5

1.4 Project management methodology and modeling language..................6

1.5 Project Planification........................................................................................ 6

1.5.1 Scrum team........................................................................................................ 6

1.5.2 Estimated Goals............................................................................................... 6

1.5.3 Project Planification........................................................................................7

1.6 Conclusion...........................................................................................................7

Needs analysis...........................................................................................8

2.1 Introduction........................................................................................................8

2.2 Actors................................................................................................................... 8

2.3 Description of Functional Requirements.....................................................8

2.4 Description of Non-Functional Requirements.......................................... 9

2.5 Use case diagram...............................................................................................9

2.6 Conclusion..........................................................................................................9

Modeling Languages...............................................................................10

3.1 Introduction...................................................................................................... 10

3.2 Class Diagram...................................................................................................10

3.3 Sequence Diagram............................................................................................11

3.4 Database design............................................................................................... 13

3.5 Conclusion.........................................................................................................14

Realization of the prototype.................................................................. 15

1
 4.1 Introduction............................................................................................... 15

4.2 Design of the Prototype............................................................................15

4.3 Choice of the Figma Tool......................................................................................15

4.4 Key Features of the Prototype................................................................................... 15

4.4.1 Presentation of the Loading Interface................................................................ 16

4.4.2 Presentation of the Mockups for «Account Creation» and

«Authentication» Functions............................................................................................ 16

4.4.3 Presentation of the Opportunities,chat , and Help Interfaces....... 17

4.4.4 Presentation of More detailed Interfaces.......................................................... 18

4.4 Conclusion........................................................................................................ 19

Implementation............................................................................................................ 20

5.1 Introduction.....................................................................................................20

5.2 Software - Android Studio.............................................................................20

5.3 Programming Language - Jetpack Compose..........................................................21

5.4 Limits..............................................................................................................................22

5.4.1 Time-Related Limitations:.............................................................................. 22

5.4.2 Personnel-Related Limitations:.................................................................... 22

5.5 Conclusion...................................................................................................................... 22

2
List of Figures

Figure 2.1 - Use Case Diagram…………………………………………………………………………….9

FIGURE 3.1 - Class Diagram………………………………………………………………………………..10

FIGURE 3.2 - Sequence Diagram «Create Account»……………………………………….11
FIGURE 3.3 - Sequence diagram «Authentication»………………………………………12
FIGURE 3.4 - Sequence diagram «Opportunities»…………………………………….....12

FIGURE 3.5 - Sequence diagram «Chat»…………………………………………………………13

FIGURE 4.1 - Figma Logo……………………………………………………………………………………17

FIGURE 4.2 - App Logo……………………………………………………………………………………….17
FIGURE 4.3 - «Account Creation» and «Authentication» Interface …………...18
FIGURE 4.4 - «Opportunities» , «Chat» and «Help» Interface …………………..18
FIGURE 4.5 - «Opportunity-details» ,and «Profile» Interfaces …………………19

FIGURE 5.1 - Android Studio Logo…………………………………………………………………….22

FIGURE 5.2 - Jetpack Compose Logo……………………………………………………………….23

3
List of Tables

Figure 1.1 - Timeline Action Plan………………………………………………………………………..8

FIGURE 3.6 - Database App Admin……………………………………………………………………14

FIGURE 3.7 - Database ISI Link………………………………………………………………………….14
FIGURE 3.8- Database User………………………………………………………………………………..15

4
General Introduction
The Higher Institute of Computer Science (HICS) is a hub of innovation and learning,
fostering the growth of aspiring computer scientists. In the dynamic environment of higher
education, students are often seeking opportunities beyond the confines of traditional
classroom learning. Recognizing this need, our team embarked on a journey to develop
"IsiLink" – an innovative mobile application tailored specifically for the students of HICS.

IsiLink aims to bridge the gap between students and the wealth of opportunities available
within the institute. Our vision is to create a platform that seamlessly connects students
with valuable resources, events, and opportunities offered by university clubs and the
administration. Through IsiLink, students will gain access to a comprehensive directory of
opportunities ranging from club activities to administrative announcements, all in one
centralized location.

This project is not merely about building an app; it's about empowering our fellow students
to thrive academically, professionally, and socially within the HICS community. By
providing a user-friendly and intuitive platform, IsiLink endeavors to enhance student
engagement, foster collaboration, and enrich the overall student experience.

5
Chapter 1

Project Study

1.1 Introduction

In this chapter, we are going to present the problematic, the solution and the goals
behind this project.

1.2 Problematics

Before the development of any centralized platform like the IsiLink app, students at the
Higher Institute of Computer Science (HICS) encountered several challenges.
Communication channels were scattered, making it hard to access information about
institute opportunities. Without a central platform, these problems were even worse,
resulting in inefficiencies and missed chances. Many students were unaware of the full range
of available events, workshops, and activities organized by various clubs. As a result,
students missed out on valuable chances for personal and professional development. This
lack of awareness and engagement with club activities hindered student growth and limited
the collaborative potential within the institute community.

1.3 Solution and Goals

The proposed solution to address the challenges faced by students at the HICS is the
development and implementation of the IsiLink app. IsiLink aims to centralize information
about institute opportunities, events, and activities, increasing student awareness and
engagement. The goals of IsiLink include providing easy access to information, enhancing
student engagement with club activities, facilitating collaboration, improving
communication channels with the administration, offering a user-friendly interface, and

6
incorporating feedback mechanisms for continuous improvement. Through IsiLink, HICS
seeks to create a more informed, engaged, and collaborative student community.

1.4 Project management methodology and modeling language

The project management methodology adopted for the development of the IsiLink app is
Scrum. Scrum is an agile framework that emphasizes iterative development, collaboration,
and flexibility. In this methodology, the project is divided into short iterations called sprints,
typically lasting 2-4 weeks, during which a cross-functional team works to deliver a
potentially shippable product increment.We used UML as a modeling language.

1.5 Project Planification

In this phase we will review thoroughly our ambitious goals, team members and the
project planification.

1.5.1 Scrum team

The Scrum team for the IsiLink project consists of the following members:
Scrum Master: Salma Guesmi - Project Manager
Scrum team:
Wiem Amdouni - HR Manager
Ferdaous Ouertani - Design Manager
Noureddine Abdelghani - IT Manager

1.5.2 Estimated Goals

Considering the project's duration, we aim to achieve the following objectives:

- Needs analysis: We aim to enhance the overall student experience at HICS by
creating a user-friendly platform that facilitates access to opportunities and fosters
effective communication and engagement within the institute community.
- UML
- Prototype and developing the app

7
 1.5.3 Project Planification

One key aspect of managing projects using Scrum is to plan out the sprints. A sprint
typically lasts around three weeks. In our project, we have one sprint, as shown in Table 1.1.
The 'X' marks indicate when each task is planned to be done.

Task week 1 week 2 week 3 week 4 submitted by

Needs analysis X The entire team

UML X Salma and Wiem

Choosing color X The entire team

palette

Logo X Ferdaous

Design X Wiem

Developing the X Noureddine

app

Report writing X Salma

testing the app x The entire team

FIGURE 1.1 - Timeline Action Plan

1.6 Conclusion

In this chapter, we have presented the objectives of the IsiLink project along with our
action plan. We provide our detailed needs analysis in the following chapter.

8
Chapter 2

Needs analysis

2.1 Introduction

In this chapter, we identify the actors of the IsiLink application, as well as the functional
and non-functional requirements.

2.2 Actors

In UML, identifying actors helps establish the boundaries of the system to be developed.
An actor can be defined as an external entity to the modeled system that interacts with it.
In our project we find 2 types of actors : the user and the app administrator . The user refers
to the students as well as the club's administrator that are considered as a simple user . The
app admin is the person who is responsible for adding opportunities and information to the
app.

2.3 Description of Functional Requirements

The functional requirements outline what the system must offer in terms of features. We
are limiting ourselves to the following requirements in the initial stage of this project.
The App Admin should be able to : - Create accounts : The administrator should create users
accounts after validating their registration form. - Manage accounts : Log in, Log out, View
their information and modify their password. -Manage services: He can view, add, modify,
and delete services(Opportunities).
The applicant, who is the Student, should be able to: - Create an account, meaning to
request the creation of their account. - Browse through the different offered opportunities .
- Choose a service. - Contact the professional. - Send a complaint or comment. -Ask for help
from other students via the open chat .

9
2.4 Description of Non-Functional Requirements

The system must also meet non-functional requirements. These non-functional

requirements express the qualities and constraints of the system. Thus, our system must
cover the following points: Security: The administrator must be authenticated by a
username and password. Availability: The system must be available 7/7 days and 24/24
hours. Ergonomics: The system must provide a user-friendly, readable, and easy-to-use
interface, which allows for a satisfactory user experience.

2.5 Use case diagram

We present the use case diagram of our project in Figure 2.1.

FIGURE 2.1 - Use Case Diagram

2.6 Conclusion

In this section, we have identified the actors of the application as well as the functional
requirements and modeled them using the use case diagram. This step constitutes the basis
for the design phase.

10
Chapter 3

Modeling Languages

3.1 Introduction

The design process represents the second stage in the application development lifecycle.
In this chapter, we present this phase by establishing the class diagram, sequence diagrams,
as well as the tables planned in the database.

3.2 Class Diagram

The class diagram provides an internal view of the system's structure to be implemented.
Figure 3.1 shows the class diagram.

FIGURE 3.1 - Class Diagram

11
3.3 Sequence Diagram

Below, we present the main diagrams. First, the system sequence diagram for the “create
account” use case 3.2.
The “authentication” sequence diagram is in Figure 3.3.
The “opportunities”sequence diagram in Figure 3.4 , and the “Chat” sequence in Figure 3.5 .

FIGURE 3.2 - Sequence Diagram «Create Account»

12
FIGURE 3.3 - Sequence diagram «Authentication»

FIGURE 3.4 - Sequence diagram «Opportunities»

13
 FIGURE 3.5 - Sequence diagram «Chat»

3.4 Database design

In these tables below we present the database that we used to create the UML diagrams in
order to implement the application .
The ‘int’ represents an integer and ‘varchar’ represents a string .

FIGURE 3.6 - Database App Admin

FIGURE 3.7 - Database ISI Link

14
 FIGURE 3.8- Database User

3.5 Conclusion

In this chapter, we presented the design phase of our application, showcasing the class
diagrams and the main sequence diagrams. We then outlined the tables of the database,
which can be enriched with additional attributes later on.

15
Chapter 4

Realization of the prototype

4.1 Introduction
In the previous chapter, we presented the design steps of the application. We are now
transitioning to the visual design and development phase. This phase focuses on creating
mockups to illustrate the interfaces of our future application.

4.2 Design of the Prototype

A wireframe is a simplified and schematic representation of a user interface, used to plan

and discuss the structure and layout of elements without concerning oneself with visual
details. Wireframes are used to present the structure and arrangement of various elements
on a page, allowing designers, developers, and stakeholders to visualize and discuss
functionality, element layout, and navigation without being distracted by visual details.
They are often created early in the design process to validate ideas and concepts before
moving on to more advanced design stages. We started with quick hand sketches to explore
different layout and structure ideas. Then, we explored similar examples, studied best
practices in user interface, and examined design trends for inspiration.

4.3 Choice of the Figma Tool

We chose Figma as our tool for designing our prototype. Figma is a vector graphics editor
and prototyping tool. It enabled us to work simultaneously on the project, facilitating
collaboration within our team. It is primarily web-based. The Figma Mirror companion apps
for Android and iOS allow for viewing Figma prototypes on mobile devices. All of Figma's
features are focused on use in user interface (UI) and user experience (UX) design.

4.4 Key Features of the Prototype

The key features aim to simplify the process of finding opportunities and information .
The help function, for instance, allows students to find everything they need about their
university . To illustrate these features, we have developed usage scenarios

16
 FIGURE 4.1 - Figma Logo

4.4.1 Presentation of the Loading Interface

Firstly, in the scenario of the initial installation of the application, a “loading interface”
containing our logo appears 4.2.

FIGURE 4.2 - App Logo

4.4.2 Presentation of the Mockups for «Account Creation» and

«Authentication» Functions
In the authentication scenario, the user can log in by entering the email address and
password of their created account or log in directly from their Google or Facebook account.
In case the user doesn't have an account, they can sign up by entering their details and their
function 4.3.

17
 FIGURE 4.3 - «Account Creation» and «Authentication» Interface

4.4.3 Presentation of the Opportunities,chat , and Help Interfaces

In the Opportunities, Chat, and Help scenarios , the students can find all the opportunities
offered by the university administration and the clubs as well as an open chat that can help
them communicate with each other , in the help interface they can find all information
about study plan as well as administrators 4.4 .

18
 FIGURE 4.4 - «Opportunities» , «Chat» and «Help» Interface

4.4.4 Presentation of More detailed Interfaces

In these scenarios , the student will find more details whether about opportunities that
are offered or university administrators and study plan 4.5

FIGURE 4.5 - «Opportunity-details» ,and «Profile» Interfaces

19
4.4 Conclusion
In this chapter, we presented the stage of developing the interfaces of our application.
The use of Figma allowed us to create our logo and design the interfaces of our IsiLink
application. Regular iterations were conducted, involving continuous testing and
adjustments. After each testing session, we analyzed the feedback, identified areas for
improvement, and made necessary adjustments to enhance the overall user experience.

20
Chapter 5

Implementation

5.1 Introduction
In the previous chapter we presented the prototype of IsiLink application, in this chapter we
will go through the softwares and the programming languages we used in order to build
IsiLink.

5.2 Software - Android Studio

Android Studio is the official integrated development environment (IDE) for Android app
development, provided by Google. It's specifically designed to facilitate the creation of
Android applications. Android Studio offers a comprehensive suite of tools for designing,
developing, testing, and debugging Android apps

Some key features of Android Studio include:

1) User Interface (UI) Designer: Android Studio includes a visual UI designer that allows
developers to design app interfaces using drag-and-drop functionality, XML layout
editing, and theme customization.

2) Code Editor: Android Studio comes with a powerful code editor that supports syntax
highlighting, code completion, and refactoring tools. Developers can write code in
Java, Kotlin, or other supported programming languages.

3) Emulator: Android Studio includes an Android Emulator, which allows developers to

test their apps on virtual devices with different screen sizes, resolutions, and
Android versions.

4) Gradle Build System: Android Studio uses the Gradle build system, which automates
the process of building, testing, and deploying Android apps. Gradle simplifies
dependency management and allows for customizable build configurations.

5) Debugger: Android Studio provides debugging tools to help developers identify and
fix issues in their apps. Developers can set breakpoints, inspect variables, and step
through code to troubleshoot problems.
.

21
 FIGURE 5.1 - Android Studio Logo

5.3 Programming Language - Jetpack Compose

Jetpack Compose is a modern toolkit for building native Android UIs (user interfaces)
using a declarative programming model. Introduced by Google, Jetpack Compose simplifies
and accelerates the process of creating UIs for Android apps.

Key features of Jetpack Compose include:

1) Declarative UI: With Jetpack Compose, UI components are defined using a declarative
syntax, where developers describe what the UI should look like based on its current
state, rather than imperatively specifying how it should be constructed. This makes
UI development more intuitive and concise.

2) Compose Functions: Jetpack Compose provides a set of composable functions that

represent UI elements, such as buttons, text fields, and lists. Developers can combine
these functions to create complex UI layouts, and the UI automatically updates in
response to changes in state.

3) State Management: Jetpack Compose simplifies state management by providing

built-in support for managing UI state. Developers can use state variables to
represent mutable data within the UI, and the UI automatically recomposes
whenever the state changes.

4) Material Design: Jetpack Compose integrates seamlessly with Material Design,

Google's design language for creating visually appealing and consistent UIs. It
provides a set of Material components that developers can use to build modern and
responsive UIs.

5) Interactive Design Tools: Jetpack Compose includes interactive design tools in

Android Studio, allowing developers to preview and iterate on UI designs in
real-time. This streamlines the UI development process and enables faster iteration
and feedback.

22
 FIGURE 5.2 - Jetpack Compose Logo

5.4 Limits

5.4.1 Time-Related Limitations:

Limited Time for Team Collaboration: Due to time constraints, we faced challenges in
scheduling regular team meetings and collaborative sessions. This restricted our ability to
effectively share knowledge, brainstorm ideas, and synchronize our efforts towards project
goals.
Time Pressure for Completion: The project's timeline imposed significant pressure to
deliver results within a set timeframe. This limited our capacity to explore alternative
approaches, iterate on designs, and refine the application further.

5.4.2 Personnel-Related Limitations:

Skill and Knowledge Gaps: As a team, we encountered limitations in our collective

expertise, particularly regarding proficiency in specific programming languages and
frameworks required for building certain app interfaces. This hindered our ability to
efficiently implement all planned features.
Learning Curve: Limited time for learning and upskilling posed a challenge, especially in
mastering new tools and technologies essential for the project. This hindered our progress
and contributed to delays in achieving project milestones.

5.5 Conclusion
In this chapter, we presented the development tools that we used to implement the
application. By using jetpack compose we managed to build some interfaces of the app.

23
General Conclusion
In sum, our project represents a significant achievement in meeting student needs
through the IsiLink mobile application. Utilizing Figma for design and prototyping,
and Android Studio with Kotlin and Jetpack Compose for development, we've
created a robust tool aimed at improving the university experience.

IsiLink's main goal is to empower students by providing easy access to various

opportunities such as internships, workshops, and sessions, while also offering
detailed information on administrators and study plans within their sections.
Moreover, the addition of an open chat feature encourages communication and
collaboration among users, enriching their academic journey.

Throughout the project, we prioritized user experience, ensuring smooth and

intuitive interactions within the app. By setting clear boundaries and outlining
future prospects, we've established a strong foundation for IsiLink's ongoing
development and improvement.

In conclusion, our project not only allowed us to apply theoretical knowledge but
also demonstrated the transformative potential of technology in enhancing student
life. Moving forward, we're committed to refining IsiLink to better meet the
changing needs of students and positively contribute to their academic pursuits.

24
Netography
1) https://www.youtube.com/playlist?list=PLjiHFwhbHYlEmPhn68XdG2p2k4X47XR-8

2) https://www.udemy.com/

3) https://fr.slideshare.net/medaminemah/rapport-projet-fin-dtudes-pfe

4) IEEE ISI Student branch graphic design sessions

25