kilometer management

91 Pages·2017·4.08 MB·English

Sabin Shrestha
KILOMETER MANAGEMENT:
MOBILE AND DESKTOP APPLICATION

For the Employees of Pasi-Jakulet Oy

Technology and Communication
2017
ACKNOWLEDGEMENTS
First of all, sincere gratitude to our software programming teacher and my thesis
supervisor, Dr. Ghodrat Moghadampour for his support, patiennce and guidance
during my studies and in completing this project.
I want to thank my family and friends for their support, encouragement, and moti-
vation.
I am grateful to Pasi-Jakelut Oy for providing a place to work and the office staff
for co-operating with the idea of making this project. My sincere gratitude towards
VAMK for being such an excellent platform and helping to reach out the goals of
students and making it possible.
VAASAN AMMATTIKORKEAKOULU
UNIVERSITY OF APPLIED SCIENCES
Degree Program in Information Technology

ABSTRACT
Author Sabin Shrestha
Title Kilometer Management: Mobile and Desktop Applications
for the Employees of Pasi-Jakelut Oy.
Year 2017
Language English
Pages 83+2
Name of Supervisor Dr. Ghodrat Moghadampour

The traditional ways of exchanging information between various business opera-
tions is time-consuming and tedious, so the use of new technologies is necessary
and growing rapidly. As a result, mobile applications as well as desktop applica-
tions, have gained popularity among users.
The idea of this project was to develop a hybrid mobile and desktop application that
would offer the employee of Pasi-Jakelut Oy, an easy and efficient way to exchange
information. A supervisor can use the desktop application at the office, and the de-
liverers can use the mobile application.
The desktop application allows the supervisor at the office to log in, manage kilo-
meter details of the deliverers, add new deliverers, edit and delete the deliverers,
add new areas, edit and remove areas, send messages as well as edit and delete
messages. The mobile application allows the deliverers to log in with the login cre-
dentials provided by the supervisor, send kilometer details of their respective areas,
view and send messages, update profiles and change passwords.
The desktop application was developed using PHP Desktop GUI Framework, and
the mobile application was developed using Ionic 2 Framework. On the server side,
PHP was used, and MySQL database was used to store the data.

Keywords Hybrid, Ionic Framework, PHP-Desktop, MySQL
CONTENTS
ABSTRACT
LIST OF ABBREVIATION .................................................................................... 3
1 INTRODUCTION ............................................................................................. 5
1.1 Background ................................................................................................ 5
1.2 Motivation .................................................................................................. 5
1.3 Objectives .................................................................................................. 6
1.4 Description of Topic .................................................................................. 6
2 RELEVANT TECHNOLOGIES ...................................................................... 7
2.1 Hybrid Application .................................................................................... 7
2.2 Ionic Framework ........................................................................................ 9
2.2.1 Ionic CLI ...................................................................................... 10
2.2.2 Components ................................................................................. 10
2.2.3 Native ........................................................................................... 11
2.2.4 Theming ....................................................................................... 11
2.2.5 Navigation .................................................................................... 11
2.2.6 Apache Cordova ........................................................................... 11
2.2.7 Plugins ......................................................................................... 12
2.3 Angular JS ............................................................................................... 12
2.4 JavaScript and TypeScript ....................................................................... 12
2.5 HTML and HTML5 ................................................................................. 14
2.6 Cascading Style Sheets ............................................................................ 14
2.7 Hypertext Pre-processor .......................................................................... 15
2.8 MySQL Database ..................................................................................... 15
2.9 JSON ........................................................................................................ 16
3 APPLICATION STRUCTURE ...................................................................... 17
3.1 Application Development Environment .................................................. 18
3.2 Application Setup Process ....................................................................... 19
4 APPLICATION DESCRIPTION .................................................................... 21
4.1 Quality Function Deployment (QFD) ...................................................... 21
4.2 Use case diagram ..................................................................................... 23
4.2.1 Deliverer Use Case Diagram ....................................................... 24
4.2.2 Supervisor use case diagram ........................................................ 24
4.3 Class Diagram .......................................................................................... 26
4.4 Sequence Diagram ................................................................................... 27
4.4.1 Supervisor’s Login Sequence Diagram ....................................... 27
4.4.2 Supervisor add Area Sequence Diagram ..................................... 28
4.4.3 Supervisor’s Edit Area Sequence Diagram .................................. 29
4.4.4 Supervisor’s Send Message Sequence Diagram .......................... 30
4.4.5 Supervisor’s Search Kilometer Details Sequence Diagram ......... 31
4.4.6 Add User Sequence Diagram ....................................................... 32
4.4.7 Supervisor’s Edit User Details Sequence Diagram ..................... 33
4.4.8 Deliverer’s Login Page Sequence Diagram ................................. 34
4.4.9 Send Kilometer Details Sequence Diagram ................................. 35
4.4.10 View Supervisor’s Message Sequence Diagram ......................... 36
4.4.11 Deliverer’s Send Message Sequence Diagram ............................ 37
4.4.12 View Deliverer’s Account Sequence Diagram ............................ 38
4.4.13 Deliverer’s Update Profile Sequence Diagram ............................ 39
4.4.14 Deliverer’s Change Password Sequence Diagram ....................... 40
4.5 Component Diagram ................................................................................ 41
5 DATABASE .................................................................................................... 42
5.1 Design of the Database: ........................................................................... 42
6 GRAPHICAL USER INTERFACE DESIGN ................................................ 44
6.1 Supervisor’s Graphical User Interface ..................................................... 44
6.1.1 Login Page ................................................................................... 44
6.1.2 Home Page ................................................................................... 45
6.1.3 New Area Page ............................................................................ 46
6.1.4 Area List Page .............................................................................. 47
6.1.5 New Message Page ...................................................................... 48
6.1.6 Message List Page ........................................................................ 49
6.1.7 Search Message Page ................................................................... 50
6.1.8 Search Kilometer Page ................................................................. 51
6.1.9 User List Page .............................................................................. 52
6.1.10 Add New User Page ..................................................................... 53
6.2 Deliverer’s Graphical User Interface ....................................................... 54
6.2.1 Splash Screen ............................................................................... 54
6.2.2 Login Page ................................................................................... 55
6.2.3 Home Page ................................................................................... 56
6.2.4 Message Page ............................................................................... 57
6.2.5 Account Page ............................................................................... 58
6.2.6 Change Password Page ................................................................ 59
7 IMPLEMENTATION ..................................................................................... 61
7.1 Supervisor Login ..................................................................................... 61
7.2 Supervisor’s Home .................................................................................. 62
7.3 Add User .................................................................................................. 64
7.4 Area .......................................................................................................... 65
7.5 Messages .................................................................................................. 66
7.6 Kilometer Details ..................................................................................... 68
7.7 Deliverer’s Login Page ............................................................................ 68
7.8 Deliverer’s Home Page ............................................................................ 70
7.9 Deliverer’s Message Page ........................................................................ 72
7.10 Account .................................................................................................... 73
7.11 Change Password ..................................................................................... 75
8 TESTING ........................................................................................................ 77
9 SUMMARY .................................................................................................... 82
10 CONCLUSIONS ............................................................................................. 83
10.1 Future Tasks ............................................................................................. 83
REFERENCES ...................................................................................................... 84
APPENDICES
1
LIST OF FIGURES AND TABLES
Figure 1: Overall Structure of Ionic Based Hybrid Apps ....................................... 8
Figure 2: Application Structure /15/ ..................................................................... 18
Figure 3: Application Development Process ........................................................ 19
Figure 4: Deliverer Use Case Diagram ................................................................. 24
Figure 5: Supervisor Use Case Diagram ............................................................... 25
Figure 6: Class Diagram for the Mobile Application ........................................... 26
Figure 7: Supervisor’s Login Sequence Diagram ................................................. 27
Figure 8: Add Area Sequence Diagram ................................................................ 28
Figure 9: Edit Area Sequence Diagram ................................................................ 29
Figure 10: Send Message Sequence Diagram ....................................................... 30
Figure 11: Search Kilometer Details Sequence Diagram ..................................... 31
Figure 12: Add New User Sequence Diagram ...................................................... 32
Figure 13: Edit User Details Sequence Diagram .................................................. 33
Figure 14: Deliverer’s Login Sequence Diagram ................................................. 34
Figure 15: Send Kilometer Details Sequence Diagram ........................................ 35
Figure 16: View Supervisor’s Message Sequence Diagram ................................. 36
Figure 17: Deliverer’s Send Message Sequence Diagram .................................... 37
Figure 18: View Deliverer’s Account Sequence Diagram ................................... 38
Figure 19: Deliverer’s Update Profile Sequence Diagram ................................... 39
Figure 20: Deliverer’s Change Password Sequence Diagram .............................. 40
Figure 21: Component Diagram ........................................................................... 41
Figure 22: ER Diagram ......................................................................................... 42
Figure 23: Database Tables ................................................................................... 43
Figure 24: Supervisor’s Login Page ..................................................................... 45
Figure 25: Supervisor’s Home Page ..................................................................... 46
Figure 26: Add New Area Page ............................................................................ 47
Figure 27: Area List Page ..................................................................................... 48
Figure 28: Add New Message Page ...................................................................... 49
Figure 29: Message List Page ............................................................................... 50
Figure 30: Search Message Page .......................................................................... 51
2
Figure 31: Search Kilometer Page ........................................................................ 52
Figure 32: User List Page ..................................................................................... 53
Figure 33: Add New User Page ............................................................................ 54
Figure 34: Splash Screen ...................................................................................... 55
Figure 35: Deliverer’s Login Page ........................................................................ 56
Figure 36: Deliverer’s Home Page ....................................................................... 57
Figure 37: Deliverer’s Message Page and Write Message Page respectively. ..... 58
Figure 38: Deliverer’s Account Page .................................................................... 59
Figure 39: Change Password Page ........................................................................ 60

Table 1: Ionic Versions and Corresponding Supporting Native OSs ...................... 9
Table 2: Quality Function Deployment ................................................................ 22
Table 3: Testing for Mobile Application .............................................................. 77
Table 4: Testing for Desktop Application ............................................................. 79
3
LIST OF ABBREVIATION
OS Operating System
IT Information Technology
PHP Personal Home Page
IDE Integrated Development Environment
HTML Hypertext Markup Language
CSS Cascading Style Sheets
SDK Software Development Kit
UI User Interface
CLI Command Line Interface
iOS iPhone Operating System
API Application Program Interface
MVW Model View Whatever
XML Extensible Markup Language
ES ECMAScript
DB Database
DBMS Database Management System
RDBMS Relational Database Management System
SQL Structured Query Language
JSON JavaScript Object Notation
4
CRUD Create Read Update Delete
HTTP Hypertext Transfer Protocol
HTTPS Hypertext Transfer Protocol Secure
ERD Entity Relationship Diagram
URL Uniform Resource Locator
VAMK Vaasan Ammattikorkeakoulu
W3C World Wide Web Consortium
WWW World Wide Web