APPLIED SOFTWARE ENGINEERING.

In this coursework assignment, you will create a "ride-hailing service"; both the client and server components. There are three parts to this assignment; Parts 1 and 2 are the client, and Part 3 will be the server. It is important to note that instructions for this assignment may be deliberately vague at times. You are expected to ask questions if you are confused or not sure about something, just as in the professional world. There are opportunities to go beyond the base expectations for those who feel they have mastered the basic materials. ## Part I The following table is a list of vehicles and their locations: | Vehicle ID | Latitude | Longitude | Place | |—————|—————-|—————-|—————-| | mXfkjrFw | 51.5090562 | -0.1304571 | ??? (A surprise)| | nZXB8ZHz | 51.5080898 | -0.07620836346036469 | Tower of London | | Tkwu74WC |51.5425649 | -0.00693080308689057 | Westfield Stratford City | | 5KWpnAJN | 51.519821199999996 | -0.09397523701275332| The Barbican Centre | | uf5ZrXYw | 51.5133798 | -0.0889552 | The Bank of England | | VMerzMH8 | 51.5253378 | -0.033435 | Mile End Station | | 8efT67Xd | 51.54458615 | -0.0161905117168855 | Queen Elizabeth Olympic Park | Create a page (named `index.html`) that displays a Google Map of all the vehicles listed above: + The map should take up the entire page. + Use a separate file for the JavaScript. + Use a separate file for the CSS. + Do not mix `JavaScript` in the `HTML` file with the exception of the script tag to include the `JavaScript` file. + For now, the map should be centred on latitude = 51.5195786, longitude = -0.0606907; this location is Whitechapel, station, London, United Kingdom (or it should be!). + Each vehicle is represented on the map by a marker with the icon:  The required files for this part of the assignment are: + `index.html`, + one CSS file, + one JavaScript file. ### Getting Started 1. Create a new folder named `notuber` which will hold all of your code, for this part, and the remainder of this assignment. 2. Follow the Google Maps `JavaScript` API tutorial "[Getting Started][maps]". This will require you to sign up for a free-level Google Cloud Platform account. You will need to provide a CC number, to show that you aren’t a web robot, but you aren’t charged and you will receive free credits, sufficient to cover this assignment. If you are uncomfortable giving Google your CC details then please let me know. [maps]: https://developers.google.com/maps/documentation/javascript/tutorial ### Testing Your Work For this part of the coursework, you can simply open the `index.html` page in a web browser of your choice and verify the locations. ## Part II In this part of the coursework you will interface with a backend booking system, providing a fully functional frontend to the system. In the final part you will write your own backend system for our taxi booking system. You should work in the same folder as for Part I of the assignment, and update that repo using `add/commit/push` as usual. ## The Server The taxi booking backend provides a `REST` based api for accessing booking information. The provided server has minimal functionality but it will enable you to write a UI frontend which calls the `REST` api. Install the appropriate node modules “`bash npm install “` Do not try and fix the resulting warnings. Compile the files and start the application “`bash npm run start “` This should startup the server process with something like the folliowing output: “`bash [nodemon] 1.18.9 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node ./public/lib` server is listening on 8090 “` ## The REST API Endpoints * `https://localhost:8090/api/book` * POST only * accepts JSON data in the format: * `{ source: { x: x1, y: y1 }, destination: { x: x2, y: y2 }}` * books the nearest available car and returns response in the format: * `{ car_id: id, total_time: t }` * if no car is available, an empty response is returned * `https://localhost:8090/api/tick` – moves all booked cars by 1 distance unit and returns current cars positions * `https://localhost:8090/api/reset` – resets all cars to (0, 0) and unbooks them and returns current cars positions * `https://localhost:8090/api/status`- returns current cars positions without any modifications made ## Your interface Interface with the API to provide a graphical frontend that enables users to make bookings, display current car positions, etc. ## Tests For this part of the coursework you are provided with some tests. You should also use `Postman` to check the code interactions. Run all the tests “`bash npm run tests “` Run Unit tests “`bash npm run test-unit “` To run the unit tests with watch mode “`bash npm run test-unit-watch “` — ## Coverage After first time you run the Unit tests code coverage data is collected and accessible from `/test/reports/jest/index.html`. — ## Linting To check for any “odd” bits of code run   npm run lint Part III In this part of the coursework you will replace the existing backend with one that has similar functionality but is based in the cloud using a database system to record the information. We suggest following the example that we worked through in class and utilise MongoDB, but any appropriate cloud database service will suffice. The materials from “Get Programming with Node.js” by Jon Wexler may prove useful here. You must not reuse any of the code from the existing server but should write your own code to provide the same REST api. You should then test your full application to ensure that when a booking is made the appropriate actions are taken and the behaviour is consistent with the existing setup.