As per file instructions
Project Information 1. Summary Pristine Cabs is a Taxi company that requires an app for their business. The company has decided to expand their business and require an application to centralise taxis’ bookings, which is the preliminary expansion requirement. As the business will grow, the company will want more features added to the app. Upon advertisement, Monash University found a number of students interested in developing the app. The university has come up with the idea of making teams of students to let all of them have the opportunity to develop a product. At the end of 7-8 weeks, all the teams will showcase the app. The client will select a team and their app to work further on this ongoing project. The interface of the application needs to be user friendly and have information available right on the spot. While designing the user interface, keep in mind that the client has indicated that they do not wish to see tabs in the user interface. The client has some initial idea of how the app should function, and has described the features that they need: · The user should be able to plan for a trip going to multiple locations and schedule the booking of a taxi · The user should be able to book a taxi · The user should be able to change the taxi type for a scheduled booking · The user should be able to cancel the booking · The user should be able to view all their bookings · The user should be able to view the estimated fare and distance for a booking Your manager (the demonstrator) has already organised for the client interview to take place and has provided you with the narration of the findings and process [link]. You should ensure you check the FAQ for this assignment as well. Any additional information provided there is considered part of the formal specifications for this project. The project manager has provided some technical information for the project which is attached on the following pages. Narration of the findings and process document Pristine Cabs App The route offered from an address A to an address B A trip contains at least one route but can consist of multiple connecting routes with an ‘origin’ address and a final ‘destination’ address Taxi Booking A booking consists of a taxi paired to a valid trip A narrative from the client interview Pristine Cabs only operates in Victoria, Australia, so the app should only work for valid addresses in the country of operation. When the app is loaded, if there is no existing data in local storage, the application should assume that the user has opened it for the first time and initialise all the required data. If data exists in local storage, wait for the user to decide what they want to do in the app. In terms of the application's look and feel, software developers need to use usability principles to achieve the best user experience. The design of all the pages must be consistent and visually appealing to some extent, with no use of fluorescent colours, and with no use of tabs within the page itself. The app should be developed for ~6" portrait phone, or ~10.5" landscape tablet. The feature ‘Make a Booking’ should start on the main page of the application. It is suggested that the process for this feature work as follows: 1. The user needs to select an address by either searching or using the map to select a location, along with the booking’s start date and time. 1. An option should be provided to start at the user’s location, and a marker should be added to the map to show the user where they are (approximate). 2. The user can then adjust the marker to fine-tune their exact location. 2. The user should then confirm their selections made in (1). 3. The map should show the selected address at an appropriate zoom level. 4. If required, the user should be able to add additional stops for this trip by entering subsequent addresses or locations on the map (input similar to (1)) a. An option should be shown to the user on all intermediate to destination locations for them to delete a specific location. 5. All the locations added (start to end) to this trip should show the name and address of the respective place as a popup. Definition of terms Route Trip A taxi consist of taxi type (i.e. sedan, SUV, etc), registration and fare per km 6. Next, the user selects a taxi type, which calculates the distance and fare for the trip and prominently shows this information to the user. 7. The user can confirm the booking to be saved by selecting an appropriate button. 8. A route summary should be shown for the user to confirm the booking. 1. If the user confirms the booking, it should be saved to local storage. i. During the save process, the first available taxi of the appropriate type is assigned to the booking. ii. Then, the user should be redirected to the detailed booking information page for the newly saved booking. 2. If not, the user is redirected to the main page. The app’s top banner should have the name and logo of the app on the left. The navigation drawer should have a link to the home (main) page, and a link to the page that allows the user to view all the bookings. The client wants the user not to have to scroll the booking page to view all the relevant information, so the data should be shown within the constraints of the window. In view all the bookings, the client would like the user to be able to easily view or differentiate between bookings that are scheduled (in the future) versus bookings that have commenced or are in the past (by date). These can be arranged by creating differentiated lists for all the bookings in the order of date created. This should display a summary of the booking such as the name of the booking, date of the booking, along with any important information such as the pick-up point and the final destination, the total number of stops, estimated total distance (km) and fare ($), etc. The user should be given an option to view detailed information of a specific (selected) booking, which opens on another page. This new page should show the user the full map view, along with any information available on the booking itself (similar to the planning summary). The user can choose to change the taxi type or cancel this scheduled booking if it is scheduled to begin in the future (i.e. not today). If a booking is cancelled, it will be deleted permanently. The client has also provided a range of fares for different taxi types. 3. Technical Information This section will outline the technical information required to access various Web Service APIs, data and services to be used in the project. You are provided with two libraries that you should use: · services.js that you can load as a call in the HEAD element to use for the API calls to the various data APIs. · taxiData.js that you should include (download and add to) in your app in the js folder. This provides you with the initial data for the taxis available to you in the app for testing. You should ensure that you load these library in the head element of your HTML pages that need them. Services.js function webServiceRequest(url,data) { // Build URL parameters from data object. let params = ""; // For each key in data object... for (let key in data) { if (data.hasOwnProperty(key)) { if (params.length == 0) { // First parameter starts with '?' params += "?"; } else { // Subsequent parameter separated by '&' params += "&"; } let encodedKey = encodeURIComponent(key); let encodedValue = encodeURIComponent(data[key]); params += encodedKey + "=" + encodedValue; } } let script = document.createElement('script'); script.src = url + params; document.body.appendChild(script); } taxiData.js let taxiList = [ {"rego":"VOV-887","type":"Car","available":true}, {"rego":"OZS-293","type":"Van","available":false}, {"rego":"WRE-188","type":"SUV","available":true}, {"rego":"FWZ-490","type":"Car","available":true}, {"rego":"NYE-874","type":"SUV","available":true}, {"rego":"TES-277","type":"Car","available":false}, {"rego":"GSP-874","type":"SUV","available":false}, {"rego":"UAH-328","type":"Minibus","available":true}, {"rego":"RJQ-001","type":"SUV","available":false}, {"rego":"AGD-793","type":"Minibus","available":false} ]; MapBox API 2. Tutorial 2.1. Getting an API key Like many online services that allow you to access them programmatically, MapBox requires you register for and use an API key. To get an API key, follow the steps below: 1. Visit MapBox's signup page . 2. Sign up for a new account. You can use your team Gmail account as the email address. 3. Scroll down to "Access tokens" and note the "default public token" or leave this page open for now. That is your API key. (default public token is: pk.eyJ1IjoiZW5nMTAwMzk0IiwiYSI6ImNrb2FyenRmbTBmbWEyb3FtdmllcTdreTkifQ.xtonGqOdw6XraXMN5cxSpA) You can refer to the MapBox walkthrough [link]. You will need to include the MapBox JS and CSS file in your head element of the HTML page that needs to show a map. You will also need to set the size of the mapbox div by assigning it a class attribute in HTML along with the width and height in css. For example: (in css up in the head of the file, assign 'mapbox' class to the div element) .mapbox { height: 500px, width: 50vw } vw represents view width (of the screen) and vh represents view