/wuav-desktop-client

WUAV have 7 mobile technicians that services costumers. These technicians need to document their work, especially how the specific installation has been done. This is to ensure the customer has the documentation for their own installation, but also for future refence for the technicians.

Primary LanguageJava

WUAV-DESKTOP-CLIENT

🎒 Final-Exam | 2st Semester | SDE & SCO



Logo

WUAV Desktop Management Application
Explore the docs »

final_mock

The Brief

The WUAV Mobile Technician Documentation System is a desktop application designed to assist the 7 mobile technicians of WUAV in documenting their work during customer service visits. The system aims to ensure that each installation is thoroughly documented, providing customers with essential documentation for their own reference and future use by technicians.

This was my second semester with duration of 3 weeks in my computer science studies and should represent all thought materials from past two semesters. I wanted to challenge my self and take this project to another level therefore I have created the required desktop application in JavaFX and also created a mobile application in Swift. Both applications are connected to the same database and are using the same RestAPI. Both repositories can be found down below.

This GitHub project will include the development of the web-based application, documentation on how to set up and use the system, and ongoing maintenance and updates to ensure its reliability and effectiveness in supporting WUAV's mobile technicians.

Please let me know if you need any further information or if there's anything specific you would like to add to the project description!

Product Mock

Screenshot 1

Screenshot 2

Minimal RestAPI

This repository is a minimal RestAPI that helped me for temporary storing the images data from the Swift application and receive them in the desktop application

Key features:

  • Handling post request
  • Handling image data
  • Storing temp data in dictionary
  • Base64 images
  • Delete request of the temp

This repo also has basic authentication for the RestAPI, however it was just to play around and discover more RestAPI Also the API implements Dapper and Service-Repository pattern just to show my understanding of the design patterns.

https://github.com/TomassSimko/wuav-api

Swift app

This repository is a mobile application that I have created in Swift for the WUAV company. This application served as a mobile application for the technicians to document their work during customer service visits. This application handles scanning QR code from the desktop app and send post request to the RestAPI with the image data. It was my first time using SWIFT and building mobile application and it was definitely a challenge. I have learned a lot about the mobile development and the Swift language. I have also learned how to use the Xcode IDE and how to use the storyboard to create the UI. Key features:

  • Scanning QR code
  • Sending post request to the RestAPI
  • Handling image data
  • Handling JSON data
  • Handling user experience
  • Quick unfinished AR kit demo
    • This was just a concept of a AR installation guide for technicians to scan rooms and via AR manipulate Devices in real-world environment. This was not finished due to time constraints and most probably future budgeting.
    • Includes AR kit library and AR kit demo with another library to scan and recognize placement of the device with i cognitive menu of device that can be placed into the real-world environment

https://github.com/TomassSimko/wuav-app

Table of Contents

  1. Fundaments
  2. About the project
  3. Features and requirements
  4. Architecture
  5. Application design patterns
  6. Initialization steps
  7. License
  8. Contact

Tech stack

Core management

Email management

PDF management

Image management

QR code management

HTTP request management

Unit testing

Password management

Style

Resources used for the project design

About The Project

Figma file preview

Figma preview

Color pallet

This is the primary color pallet for the overall product design

User interface desktop design

Login page
Dashboard page
User profile
Project creation stepper
Project details Tab 1
Project details Tab 2
Project details Edit project

User interface SWIFT design

Screenshot 1 Screenshot 2 Screenshot 3

Features and requirements

PDF generation

One of the requirements was to be able to generate pdf files from the data that is stored in the database. I have used the ItextPDF library to generate the pdf files. This is the quick result of generated pdf file.

Screenshot 1 Screenshot 2

Email templates

Application is able to send emails to the users.

I have used the Google API to send emails. I have used the Thymeleaf library to generate the email templates. Build a template for the email that is sent to the user. This is the result of the email template. They are different types of the emails

Installation confirmation,password reset email and email with password when new user is created and password is generated.

Screenshot 1 Screenshot 2

Language model implementation

I have added an extra feature to the device creation where Technicians can create devices and in case of the emergency they can go and ask relevant question to the API that I have called as a Wuav chatbot. This is the result of the chatbot while creating the devices to the project.

I have used this free API to create the chatbot.

https://free.churchless.tech/v1/chat/completions

Screenshot 1

QR code generation

When creating new project in the process of creating new project the QR code is generated for the project.SWIFT application is required to scan the QR code and it will open the project in the application and user can go and take pictures from the phone and upload them to the desktop application. Generated imageView is presented to the user interface and read from the application as JSON holding the data about the project and user id.

@Override
  public byte[] generateQRCodeImage(String barcodeText,int width, int height) throws Exception {
    QRCodeWriter barcodeWriter = new QRCodeWriter();
      BitMatrix bitMatrix =
        barcodeWriter.encode(barcodeText, BarcodeFormat.QR_CODE, width, height);
        return convertToBytes(MatrixToImageWriter.toBufferedImage(bitMatrix));
 }

@Override
  public ImageView generateQRCodeImageView(int userId, String projectName, int width, int height) throws Exception {
    Map<String, Object> qrData = new HashMap<>();

    qrData.put("userId", userId);
    qrData.put("projectName", projectName);

    Gson gson = new Gson();
    String jsonString = gson.toJson(qrData);

    byte[] qrCodeImage = generateQRCodeImage(jsonString, width, height);
    ByteArrayInputStream inputStream = new ByteArrayInputStream(qrCodeImage);
    Image image = new Image(inputStream);
    ImageView imageView = new ImageView(image);

    return imageView;
 }

Architecture

Project Class diagram

Screenshot 2023-05-23 at 13 36 50

Database diagram

MSSQL Database diagram

Screenshot 2023-05-23 at 13 34 21

Application design patterns

  • Singleton pattern
  • Factory pattern
  • Strategy pattern
  • Inversion of control pattern
  • Model-view-controller pattern
  • Service-Repository pattern
  • Facade pattern
  • Builder pattern

Initialization steps

These steps are for academy purpose only. You can still go and play with the code however it won't run without the database and the server or the credentials.

Credentials:

Note: Every new created user by admin in the system will receive email (to new user email) with the autogenerated password.

Passwords cannot be changed by the users themselves. Only admin can recover the password for the user by sending the email with the new autogenerated password.

Java desktop

  1. Clone the repository

    git clone https://github.com/TomassSimko/wuav-desktop-client

    or

    Open the provided zip file with the project
  2. Open the project in your IDE

  3. Run Maven install

  4. Make sure you include .cfg and .json token files in the resources root folder (for academy!)

  5. Make sure that root folder includes tokens folder with credentials for OAuth (Gmail)

  6. VM options for the application

    --add-modules jdk.httpserver --add-exports=jdk.internal.httpserver/jdk.internal.http

    or

    1. Navigate to run configurations
    2. Edit configuration modify options add VM options
    3. Add VM option
    --add-modules jdk.httpserver --add-exports=jdk.internal.httpserver/jdk.internal.http
  7. Add ENV paths

    CONFIG_BLOB = {$path to the config file}
    GMAIL_PATH= {$path to the gmail config file}
  8. Run the application

Minimal RestAPI C#

  1. Clone the repository
    git clone https://github.com/TomassSimko/wuav-api
  2. Make sure you have installed .NET SDK
  3. Open the project in your IDE
  4. Run the application
    dotnet watch run

SWIFT application

Normally I would use .plist file to store the API url however for the academy purpose I have decided to use the port number as a variable that can be changed in the code.

  1. Clone the repository
    git clone https://github.com/TomassSimko/wuav-app
  2. Open the project in XCode IDE
  3. Enter correct port number for the server in UploadView.swift file
    @State private var portAPI: String = "http://{$port_number}:5000"
    Note: this {$port_number} has to be the same port number as the one you are running the simulator on (your IP address) otherwise it won't work with running API.
  4. Run the application on your device (Require setting up the developer account etc...)

Licence

Distributed under the MIT License. See LICENSE for more information.

I have created this project for learning purposes and for exam project with passion and having lots of fun !

If by any change you will find any of the code useful for you please do feel free to use it or distribute it.

Team: Just me :)
2023 SDE & SCO cs project posted here on GitHub.
Hope you will like it!
Thank you for your time and attention! TTT ✒️

Contact

Tomas Simko - @twitter -simko.t@email.cz - @linkedIn

Project Link: https://github.com/TomassSimko/wuav-desktop-client