A cross-platform mobile application designed to integrate with current commercial systems; this project is designed to provide optimised delivery routes in the form of What3Words waypoints to delivery drivers, whilst avoiding roads that their vehicles cannot pass through (e.g. HGVs and weak bridges). The stimulus for this project was the delivery of construction materials to large sites, such as HS2, that do not have traditional postcodes, which is highly relevant to clients of our industry sponsor. The application is built in React Native, with a REST API back-end built with Spring Boot. We have tested the application with a mock commercial system, however the next steps for the project would be to integrate it into the workflow of a real-life company.
Designed and Implemented by a team of 7 students of the University of Nottingham
This project consists of two major parts:
Responsible for presenting an effective UI, this mobile application was written in React Native by the front end team (Aiden, Samuel H, Alexander and Olt). Present in this application is a delivery management page, where users can view and interact with delivery routes, delivered via HTTPS from the back-end, start and stop routes, capture evidence photographs upon delivery, report issues in a Waze inspired community driven system, and view a live map and plotted route with GPS tracking for navigation.
Responsible for the invisible grunt work, the back end was written in Java by the back-end team (Toby, Samuel H, Rushanth and Alexander). The back end uses multiple popular libraries to achieve it's 3 main goals:
- Plot Efficient Routes suitable for HGVs.
- Securely Communicate with the Front-End and Cloud based Database.
- Manage Reported Issues and Vehicle Properties and their influence on route plotting.
- Handle W3W addresses in route plotting.
Route plotting is handled using the TomTom API, a reliable call based system that provides routes based on given points on the map and other given conditions. This system returns an optimised route that can then be passed to the front-end for display.
Communication between the two components is handled using HTTP POST and GET requests using simple and secured communication methods. This makes it easy to send and recieve data in the form of JSON files.
Communication with the Cloud Database uses Google Firebase and Firestore integration. This is a popular library for handling a structured database, and is used to store private data such as driver assignment and route details, cargo type, delivery vehicle size etc.
This program is able to handle a multitude of properties to affect the route plotting system, such as vehicle dimensions and weight, weather conditions, road width, low or weak bridges, live traffic conditions (using TomTom) and reported incidents.
The W3W System interacts directly with the W3W API, translating coordinates into W3W Addresses, which can then be used to effectively plot routes using mapped roads to as close to the destination as possible.
This is a basic installation guide, for full instructions on how to use the app and its features, with screenshots and an FAQ, please see the User Manual.
For clarity, this has been split into Front and Back-End Sections.
Our React Native frontend primarily employs functional components organised by pages. Additionally, we maintain a UI components folder for reusable functions across various components. For clarity, the map page components folder is subdivided into functional components directly tied to map functionality, informational components providing associated data like driving instructions, and reporting components managing user-generated reports.
App.js centrally orchestrates data flow within the frontend, managing crucial interactions between components. This includes routing data between API services and map components, confirming waypoints for precise driving timings, and handling user-inputted report data for server upload to the database.
To assist App.js, and all the other components, there are various “service” files, which sit in the services folder. These files are simple java script files, with collections of related, and helpful methods used by multiple different components to help achieve various goals, minimising the amount of repeated code. All of our HTTP requests are handled by these services, employing the use of Axios to do so.
This section provides detailed instructions on how to install and run the KerridgeCS Delivery Planner using Expo Go, a platform that facilitates the development and testing of React Native applications. Please follow these steps carefully to ensure a successful setup. Please refer to Backend Installation and Run Guide for the back-end.
This guide purely demonstrates how to run the application in development mode, in future, if the app were to be released to the public, you would merely download it from the appropriate app store.
Prerequisites:
-
Download and install Expo Go from your device's app store.
-
Ensure you have Node.js installed on your computer to use npm (Node Package Manager).
Step-by-Step Installation:
- Download the Application Files:
- Download the latest version of the KerridgeCS Delivery Planner project files from the provided repository or link.
- Install Dependencies:
- Open your terminal or command prompt.
- Navigate to the directory where you have saved the downloaded project files.
- Enter the command npm install in a terminal, open within the current folder and wait for the installation of all dependencies to complete.
- Configure IP Address:
- Locate and open the ip.json file within the project directory.
- Replace the existing IP address with the IP address of your computer to ensure your mobile device can connect to your development server. This step is crucial for the proper functioning of the app on your device.
- Start the Application:
- In the same terminal window, type ‘npx expo start’. This command will start the Expo Developer Tools in your default web browser.
- A QR code will appear in the terminal or browser window once the server has started.
- Launch the App on Your Mobile Device:
- Use your device’s camera to scan the QR code displayed in the terminal or browser. This will connect the Expo Go app to the development server, and the KerridgeCS Delivery Planner will load on your device.
Troubleshooting Tips:
- Ensure your mobile device and computer are connected to the same Wi-Fi network.
- If you encounter issues with scanning the QR code, ensure the Expo Go app has the necessary permissions to access your camera.
- For connection issues, verify the IP address in the ip.json file is correct and corresponds to your current network.
- Node js
- React Native
- Expo go
The specifics of the packages required, like the names, number, and version, can be found in the ‘package.json’ file in the front-end react app folder.
The backend application uses Maven as a build tool for managing dependencies and the application build process. Through the use of the Spring framework, the application runs through an embedded Tomcat server ensuring reliability and flexibility in deployment. The purpose of the application is to facilitate swift communication of route data for running sat nav instances and keep continuous updates with the clients ERP system.
Our project heavily relies on the capabilities of the Spring Framework. It seamlessly interacts with a MySQL database hosted on AWS using Spring Data and leverages the Java Persistence API (JPA) to manage three crucial Data Access Objects (DAOs): Reports, Users, and Vehicle Details. Furthermore, Spring Web facilitates the construction of robust API endpoints on the server, following the traditional MVC pattern for predictable operation. Authentication plays a significant role in our Spring application employing basic authentication to ensure robust security measures. Authentication persistence is achieved through dependable session IDs, however, it's important to note that this reliance on session IDs leads to stateful server instances.
This section details how to run the Program Back-End which allows the Front-End Application to communicate with the different data servers. We suggest you use the IntelliJ for this purpose as it has the most testing and is confirmed to work.
Prerequisites:
- Download IntelliJ.
- Download Project Files from GitLab and put them in their own directory.
Step-by-Step Installation:
- Open IntelliJ (Other IDEs may work but don't have testing) and find and import the project file from the directory you created as a Project. (Located at Back-End/delivery-mapping).
- From here, you may want to reload Maven using the Reload Icon in the Top Right of the Display, under Maven Controls (After Clicking the Maven Icon if not already open).
- This will install/refresh any dependencies that are needed to run the program.
- Navigate to the DeliveryMappingApplication Class in the Project Files section on the left.
- Once open, Click the green arrow next to the class declaration to run the Back-End.
- You should see some messages appear in the terminal which will tell you if you have been successful.
- The Back-End is now active and can communicate with the front end.
This guide purely demonstrates how to run the application in development mode.
For obvious reasons, security keys for databases and APIs have been removed, and you will have to use your own. It should be noted that this code is in a frozen state and is no longer updated. Any vulnerabilities since production will not be addressed.
- Aiden Baker-Stanley (Team Leader)
- Toby Surtees (Back-End Leader)
- Samuel Cummings (Team Admin)
- Samuel Hill (Git Admin)
- Alexander Young
- Olt Hyseni
- Rushanth Kalaiarasan
Exclusive Copyright - All Rights Reserved.