AN-NAJAH NATIONAL UNIVERSITY

Faculty of Engineering
Computer Engineering Department

Graduation Project -1-

TheVet

Developed By : Supervisor :
Mahde Souqi Dr.Samer Arandi
Mohammed Ziad

Presented in Partial fulfillment of the requirement for

Bachelor degree in Computer Engineering



Acknowledgment

First of all we must say “ �الشكروالحمد ” , then we would like to thank our supervisor
Dr.Samer Arandi for all of his guidance and all of his awesome ideas to improve and
achieve our project successfully .

Also i would like to thank all of our amazing friends for all of their support and
their helping to solve some of the problems that we have faced .

And we shouldn’t forget our families for being with us every day in this beautiful
life stage .

In the end i would like to thank myself and my partner for believing in ourselves
and keep going until we achieve this project .



Table Of Content

Table Of Content3
Abstract5

Introduction6
1.1Problem6
1.2Aims and Objectives6
1.3Overview of the report6

Constraints and earlier work8
2.1Constraints8
2.2Earlier Work8

Literature Review9
Methodology10

4.1Framework10
4.2Servers and APIs10
4.3System Requirements11

4.3.1Functional Requirements11
4.3.2Non Functional Requirements13

4.4implementation15
4.5Database39

Result and Discussion43
5.1Learning Curve43
5.2Challenges43

Conclusion and Future Work44



Table of figures
16

Figure-1-:The welcome page16
Figure-2-:The login/signup page17

Figure-3-:The signup page18
figure-4-:The Login page19

Figure-5-:The profile page for normal user20
Figure-6-:The change password Page21

Figure-7-:The user data in Profile page22
Figure-8-:The Following page23

Figure-9-:The appointment page24
Figure-10-:The search Page25

Figure-11-:Basic function panel26
Figure-12-:The Post page.27

Figure-13-:The Common Question page28
Figure-14-:The Doctor Profile page29

Figure-15-:The Location page.30
Figure-16-:The Paper Page.31

Figure-17-:The Appointment Page.32
Figure-18-:The paper Upload page.33
Figure-19-:The Admin Login page.34
Figure-20-:The Admin Home page.35
Figure-21-:The admin client page.36
Figure-22-:The admin Role Page .37

Figure-23-:The add new role panel .39
Figure-24-:The APIResources Schema40

Figure-25-:The API Scopes Schema40
Figure-26-:IdentityResources Schema40

Figure-27-:The Users Roles Schema41
Figure-28-:The Client Schema42



Abstract

With the rise of technology which people use daily, people who raise pets in their
houses still use old communication methods to communicate with their veterinary,
which is a good communication way but not the best .

We believe that technology should play a role in this communication to make it
easier and more efficient for each side .

So in an attempt to achieve that goal we have developed “TheVet” mobile app and
web site .

TheVet connects people who raise pets in their houses with their veterinarian , and
help them to know more about their pets , booking appointments , know the best
vet for their pet and more .



Chapter 1

Introduction

1.1 Problem

People still use old communication method to communicate with their veterinary
and it’s is not the most efficient way to do that , also they may not know howmuch
good is the veterinary that they communicate with ,also there is some cases that
does not need a veterinary help (Common question) it just need a pets community
to help each other in cases like this , also determine the location of the veterinary
clinic may be a problem in some cases .

1.2 Aims and Objectives

The main goal of the project is to make the communication as efficient as possible
and give the pets owner more information about the veterinary and also increase
the pets owner's knowledge about their pets .

1.3 Overview of the report

● Chapter 2 : Constraints and earlier work. In this chapter we’ve talked about the
reasons that make the process of building the project kind of slow and the earlier
courses that we’ve taken which help us to develop the application.

● Chapter 3 : Literature Review. In this chapter we will talk about similar systems
and additions in our application.

● Chapter 4 :Methodology. This chapter will cover tools, procedures and tasks
our application provides.



● Chapter 5 : Results and Discussion. In this chapter we will discuss the results
with figures.

● Chapter 6 : Conclusion and FutureWork. In this chapter we will summarize
the project and we will talk about some features we can add to our system in
future.



Chapter 2

Constraints and earlier work

2.1 Constraints

- Knowledge constraints

The system is mainly based on Angular front-end framework , .Net for back-
end APIs and Docker to run each service ,
The constraint is that we never learn any of these so that causes a big lag in
the system build process.

- Veterinary clinic constraints

The small number of veterinary clinics was one of the reasons for the
difficulty in finding new and useful features for the system, as we had to put
all of the features from our imagination , without referring to one of the
veterinarians to take him as a client

2.2 Earlier Work

We’ve taken a course in Angular framework and do some practice in GitHub using
Git command ,also we’ve taken a course in .NET framework , that’s helped us to
increase the process of building the system a bit .



Chapter 3

Literature Review

TheVet application idea started from one of our friend's experiences who raised a
cat , and faced a problem to which veterinary should i go and how can i
communicate with and here TheVet application role came .

TheVet application offers a direct way to communicate with the veterinary , also he
can know who is the best veterinary in his region , also he can know a lot of
information about his pet .

As far as we know , there is no similar application to TheVet in the local area , but it
takes a lot of features frommany applications and merges them in one application
.

For example “Facebook” , one of the features that the application offers is that the
veterinarian can publish a post like facebook post that the users can see and
comment on it .

Also the application has the feature of uploading scientific research papers which
help the users to know more about their pets and expand their knowledge.

Also the Application has the features of instance direct messages , the features
available in a lot of applications like : Messenger , whatsapp , … which give the user
the ability to communicate directly with the veterinarian .

One of the additional features that the application has is that the user can see the
veterinary rating which reflects how good the veterinary is which helps the people
to know which veterinary they should go to .

Also the application offers the functionality of booking an appointment with the
veterinarian , which helps the veterinarian to manage his appointment by
accepting or declining the appointment , also it helps the user to choose the
appointment that is suitable for him .

Also the application offers the functionality of navigation which helps the user to
know where the veterinary clinic is in a specific way and saves a lot of effort for the
user .



Chapter 4

Methodology

In this chapter we will talk about how we developed the application using best
practices , and we are going to explain in detail how the app gets done .

4.1 Framework

First of all and before we start to go deeper in details of the app , we will talk
about the technology and framework that we used in our application .

We have been using “Angular”as a frontend framework which is a well known
framework produced by google .

Also we have been using “Ionic” SDK to make our application a cross platform app
which can be run on Android , ISO and Web .

4.2 Servers and APIs

For the server , we have used service oriented architecture (Microservices) in the
back end and we implement it using the .Net framework .

Service oriented architecture has a lot of benefits for the application architecture
for example :

- Scalability : service oriented architecture gives us the ability of adding
services as much as we want without affecting the other services .

- Reusability : that means that we can use any microservice in other

applications without effect on any other applications .



- Easy Maintenance : it gives us the ability of code reviewing and
maintaining in a very convenient and easy way .

Also in our application we have the live chat system which is a real time
functionality and for applying that we have used the WebSocket communication
protocol which gives us a fullduplix communication channel over a TCP connection ,
and for the frontend we use rxjs package to implement it .

Also we have used linode which is a private cloud server provider to store our
application secrets and we have used Azure key vault to encrypt these secrets .

Also we have used Docker technology which is an operating system level
virtualization to run each microservice that we have implemented in an isolated
environment .

Also one of the most important technologies that we have used is openid connect
which is the technology that we apply the authentication by , and we have used
OAuth 2.0 which is the technology we used in the Authorization .

4.3 System Requirements

4.3.1 Functional Requirements

In our application we have different types of clients. We can divide them into three
types , normal user , vet and admin. In this section we are going to speak in detail
about what our application offers .

● The veterinary user

- The user can change his profile picture by going to his profile and choosing
the picture he wants .

- The user can create a post on his profile which can contain a text or image or
both of them .

- The user can update the post text .

- The user can see the comments on his posts .



- The user can delete his posts .

- The user can see his rating .

- The user can see what appointment he has for a week .

- The user can see the case description for the pet .

- The user can accept or decline an appointment .

- The user can send messages and answer back .

- The user can upload a research paper .

- The user can add questions and it answers so the normal user can see it.

● The normal user

- The user can create an account from the sign up page .

- The user can change his profile picture by going to his profile and choosing
the picture he wants .

- The user can see the Veterinary post and comment on them .

- The user can update his comment .

- The user can delete his comment .

- The user can book an appointment for any veterinarian he wants .

- The user can rate any veterinary .

- The user can update his rating points for any veterinary .

- The user can see Veterinary questions and answers to know the common pet
questions .

- The user can see the research paper that the Veterinary has uploaded .

- The user can send messages and answer back .



● The admin user

- The user has the ability to add new client in our application

- The user has the ability to add new Role for the application

- The user has the ability to give a role to any user

4.3.2 Non Functional Requirements

- Usability :

The user interface in our application is very simple and it is at a high degree of
user friendly so any user can deal with it .

- Scalability :

As a result of the architecture that we used which is Service Oriented we can add
services as much as we want .

- maintainability :

Also the microservices architecture helps us to make our application highly
maintainable because it is much easier to track a bug .

- Portability :

As a result of using a cross platform front end framework our application
can run on any system (IOS , Android , Web) .

- Reusability :



As a result of using Angular framework which is a component base
framework so we can use any component wherever we want .

- Flexibility :

We have built the back end in our application using the MVC module to give
us a really high flexible system for any changes in the requirements .



4.4 implementation

In this section we are going to talk about our application UI and how to use it :

Figure-1-:The welcome page



Figure-2-:The login/signup page

In this page the user chose to sign up to make a new account or login to the
application if he has an account .



Figure-3-:The signup page

In this page the user should fill his date to make an account in the application .



figure-4-:The Login page

This is the login page where the user should enter his/her email or user name and
the password to start using the application.



Figure-5-:The profile page for normal user

This is the profile page for a normal user (Not a doctor) where he can see the
people who follow and the appointment that he book .



Figure-6-:The change password Page

In this page the user can change his account password by enter the old and the
new password .



Figure-7-:The user data in Profile page

In this page the user can see his account data and he can edit it and change it
whenever he wants .



Figure-8-:The Following page

In this page the user can see the people who follow and he can visit their profiles
by pressing on their name .



Figure-9-:The appointment page

In this page the user can see the appointment that he booked .



Figure-10-:The search Page

In this page the user can search for any user he want just by typing his/here name .



Figure-11-:Basic function panel

In this page the user can access the basic function which is the Post page , the
Common Question page and the Messaging page .



Figure-12-:The Post page.

In this page the user can create a post , he can make a words post or a image post
or both of them .



Figure-13-:The Common Question page

In this page the user (Normal user ) can see the Common Question that the Doctor
User has been added .



Figure-14-:The Doctor Profile page

This is the Profile page for the Doctor User where he can set his clinic location , see
the following list , see the paper that he uploads , change his password and see his
appointment list .



Figure-15-:The Location page.

In this page the doctor can set his clinic Location on google maps .



Figure-16-:The Paper Page.

In this page the users can see the papers that the doctor upload it and they can
read it to know more about their pets.



Figure-17-:The Appointment Page.

In this page the doctor can see the booked appointment and he can confirm it or
delete it .



Figure-18-:The paper Upload page.

On this page the doctor can upload a paper on his account .



Now let's go to the admin pages :

Figure-19-:The Admin Login page.



Figure-20-:The Admin Home page.

Here the admin can add a new client in the application (if we want to add a new
app in our app) , he can give a role to an account (normal user , doctor , admin) and
he can make some editing on the user's account .



Figure-21-:The admin client page.

In this page the admin can edit the client in our application .



Figure-22-:The admin Role Page .

In this page the admin can create a new role in our app and he can give an role to
any user account .



Figure-23-:The add new role panel .

In this panel the admin can add a new role that he can give to any account .



4.5 Database

For our application we choose MySQL Database which is an open source relational
database management system , also it is free to use .

One of the main reason that push us to use MySQL database that is characterized
as
high reliability in storing and getting data from and to it , also one of its
advantages of using MySQL database is whenever the number of requests on the
same data increases the response time for bringing data back reduces and
becomes faster so it is a high performance database .

Now let’s see some of our database schema :



Figure-24-:The APIResources Schema

Figure-25-:The API Scopes Schema

Figure-26-:IdentityResources Schema



Figure-27-:The Users Roles Schema



Figure-28-:The Client Schema



Chapter 5

Result and Discussion

As a result of using a lot of frameworks and technology for both the client and the
server side we came out with a cross platform application that helps the pets
owner to find and communicate with a veterinarian , and also give them the ability
to know more about their pets by reading articles .

In the way to achieve this we faced a lot of problems and challenges and we
learned a lot while attempting to solve these problems and that's what we are
going to talk about in this chapter .

5.1 Learning Curve

One of the most important points that any begin is a hard thing which require a lot
of research and study on the topic that we want and a lot of practice and make
mistakes to understand how it work and to know the best practices for it and one
of the most helpful thing is the amazing documentation and the string community
that the framework we used are have .

5.2 Challenges

We faced a lot of challenges in the way of building this application , and this are
some of the challenges that we face :

● The lack of experience in the process of building an application and
the main sequence of the process and how to communicate with the
team partner .

● Learn more than framework in a short period and also learn a lot of
new technology and tools to use in our application .



Chapter 6

Conclusion and Future Work

Conclusion

To collect everything together , we built a cross platform application called TheVet
which has a main goal is to help people who raise a pet to find a good veterinarian
and communicate with him in an easy way. We also add some features from
commonly used social media apps like facebook to make it more user friendly .

Future work

We seek to work more and add extra feature in both side front and back end sides
like update the architecture of how the client UI communicate with the backend
API’s and for the front end we seek to add a recommendation system to help
people to know the pet sick from the symptoms of the disease , also make it
available in arabic language .