A2 Instructions - Assignment PDF

Preview

Summary

Assignment...

Description

Assignment 2 — “Surveying app” MCD4290, Trimester 3, 2020

Due: Friday Week 11 11:55pm Worth: 24% of final mark

Aim Often in real estate, surveyors are brought in to establish the exact size of properties and compare them against the deed to a property. This can then be used to determine where to set fences so that the fences sit on the boundaries between properties. For this assignment you will create an app to assist in surveying a property. Your app will allow someone to walk along the boundaries of a property or area and then display to them the perimeter and area of that property as well as given them an estimate of how much fencing would be required to border the area.

Background Your team has been hired by Prop & Tee Pty Ltd, a British property development company based in London, UK. They are interested in expanding into Australia and Malaysia; however they don’t yet have the appropriate resources in place. After speaking with their representative, Sir Vayer, you have learned that they are interested in having your team develop an app that can be used by contractors to easily size up a property; this would tell them how big it is as well as how much it would cost them to develop. For the moment, they are interested in a proof of concept which can calculate the area, perimeter and estimate the amount of fencing necessary to border the property. If they are satisfied with this prototype, they will pay for a full version of the app to be developed (including things like the dimensions, elevation, calculation of expandable areas, look up of local zoning laws, etc.). Your prototype app will not be using a mobile phone’s location tracking, but instead will use a desktop computer and users can use a mouse to click on the map to register their location.

MCD4290 2020-T3

Assignment 2

COPYRIGHT WARNING Commonwealth of Australia Copyright Act 1968

Warning © 2020 Monash University. All Rights Reserved.

This material has been reproduced and communicated to you by or on behalf of Monash University in accordance with section 113P of the Copyright Act 1968 (the Act). The material in this communication may be subject to copyright under the Act. Any further reproduction or communication of this material by you may be the subject of copyright protection under the Act. Acknowledgement to Geographic library for using it for educational purposes.

MCD4290 2020-T3

Assignment 2

What are you provided with? We have made available a skeleton version of the app. The skeleton provides you with several HTML pages and associated JavaScript and CSS files representing the structure of the app. You will need to implement the logic and functionality for each of these pages as described below. You are NOT allowed to change the file names. The app skeleton contains 3 web pages that utilize MDL for their interface: ● Index.html (Regions List) ● recordRegion.html ● viewRegion.html The app skeleton contains 1 CSS file in the css folder which is listed as follows and linked in all html files. ● regionApp.css (included in all html files) The app skeleton contains 4 JavaScript files in the js folder which are linked as follows: ● mainPage.js ● recordRegionPage.js ● shared.js ● utility.js ● viewRegionPage.js You will need to create some classes, which should be declared in the shared.js JavaScript file so that they can be used by both html files. In the app skeleton, these pages are mostly blank and include sample entries only to demonstrate how to navigate and communicate information from one page to another. You may modify these as you like, however you should not change the names of these files. The app skeleton contains a displayMessage function (in utility.js) which you can use to display pop-up “toast" notifications at the bottom of the screen.

What you need to do This assignment consists of multiple tasks, including programming, documentation, and use of software tools. It is strongly recommended that you practice pair programming rather than trying to split up the coding and attempting parts individually. You will need to communicate effectively with your team while working on the assignment. Your individual use of Bitbucket, Asana, and Google Drive will affect your final marks on this assignment and as with Assignment 1, your final marks will be scaled by your team contribution as determined by CATME feedback. Finally, there will be a 15-minute team “client" presentation as well as an individual interview on your submitted code, both of which will occur during your week 12 practical class. This is described in a later section in this document.

MCD4290 2020-T3

Assignment 2

Getting started 1. One team member should create an “assignment2" directory with the necessary initial directory structure in your team Bitbucket repository by committing the provided skeleton code (see the Skeleton code and also the “Submission" section below) 2. One of your team should sign up for a mapbox API key if you don’t have one already 3. Read and discuss the list of required functionalities below and create Asana tasks for the necessary features. 4. Discuss and plan out how the functionality of the app will work, which can be done by drawing activity diagrams for the process flow of the app. 5. Draw out the storyboard and wireframes for the entire app. (You will do this in your Week 8 prac activity) 6. Identify and draw the class diagram for the two main classes being used. 7. Based on your storyboard and wireframes, break down the work to be done and assign them to each team member on Asana. We strongly recommend doing pair programming for those that are weak in coding.

MCD4290 2020-T3

Assignment 2

Programming tasks The Programming component of this assignment is worth 12% of your overall unit mark. For the programming tasks, we suggest you begin by discussing how all the features come together for the app to work before you begin coding.

Feature 1: Region class The app will allow the user to record several different regions and calculate some information for these. This means it will be necessary to be able to distinguish them from one another. Create a Region class which will have several private attributes: an array of corner locations, the date (and time) the region was saved, and any other necessary information and methods. Class creation is covered in Week 5

Feature 2: RegionList class Create a RegionList class which will have several private attributes: an array of instances of the Region class, a count of the number of regions in the region list and methods to add, get or remove regions from the region list as well as getting the number of regions in the list. Class creation is covered in Week 5. To understand the relationship between a Region and a RegionList, refer to the Week 5 lab.

Feature 3: Go to location On the Record Region page, you should use the MapBox API to display a map on the page. You should also allow the user to click on the map to register their current location. Once the user has picked a location, they should be allowed to repeatedly “add a corner” for the perimeter of an area. These corners will form a new Region. As the user adds corners, they should be able to see the updated region polygon displayed on the map. You should also ensure that the users are given a method to reset the Region if they make a mistake. The following link will help you determine the location of the mouse: https://docs.mapbox.com/mapbox-gl-js/example/mouse-position/ The MapBox API is covered in the Week 5 Lab. Note: ● You can assume that the user visits each of the corners in order around the boundary of the Region.

MCD4290 2020-T3

Assignment 2

Feature 4: Persistent storage of Region instances The Record Region page should provide the user the ability to save the new region once they have finished recording the corners. This should store the region in the current instance of the RegionList class and store this in local storage and return the user to the Region List (index) page. The region must have at least 3 corners before it can be saved, this should be validated properly. Note: ● Be sure that you store regions in such a way that you can retrieve all of your regions from local storage later as an instance of the RegionList class. ● You may choose to allow the user to store a given Region with a nickname for easy identification later. Saving and loading is covered in Week 7.

Feature 5: Showing a list of Regions Once you have one or more Region instances stored in local storage, you should modify the Region List (index) page so that it displays a list of Regions that can be viewed. This list should be generated from information in local storage and should include the date/time when the region was recorded (and any other information you would like to display). Clicking on an entry in the list should cause the app to navigate to the View Region page and show that Region. Note: These regions should be contained within an instance of the RegionList class. Saving and loading is covered in Week 7.

Feature 6: Viewing a Region When the user views an existing region via the View Region page, the app should display the region on an interactive map. This page should provide the user a method to remove that Region, which will remove the Region from local storage and the relevant RegionList instance before returning the user to the Region List (index) page.

Feature 7: Region area and perimeter You should add methods to the Region class which calculate and return the area and perimeter of the region. Update the View Region page to display this information. Note: ● You will need to add the following script tag to each of your HTML files

MCD4290 2020-T3

●

●

Assignment 2

Then create an instance of the geodesic class in your shared.js file using the code below let geod = GeographicLib.Geodesic.WGS84; This will allow you access to the GeographicLib library. Geographiclib allows for calculation of perimeters and areas via the PolygonArea class ○ For more information see: https://geographiclib.sourceforge.io/1.49/js/moduleGeographicLib_PolygonArea.PolygonArea.html Ensure that you correctly create Region class instances when loading Regions from local storage, so that you can use these methods from the View Region page.

Feature 8: Calculating fencing required Add one more method to the Region class to return an array of fence post locations, named boundaryFencePosts. You can assume that fence posts should be spaced at most every 4 metres, equally along each side of the boundary polygon with a fence post at each corner. For example a 14 metre side requires three fence posts along that side (excluding the corners). You can assume these three posts split the side into four equal spans and so are positioned 25%, 50%, and 75% of the way along the side. When on the View Region page, the user should be given a way of toggling on and off the display of fence posts on the map (represented as markers positioned along the boundary). Note: ●

● ●

Geographiclib provides useful functions; please see resources (https://geographiclib.sourceforge.io/1.49/js/moduleGeographicLib_Geodesic.Geodesic.html) for documentation. Geodesic.Inverse() - returns the distance and direction (Azimuth) between two [lat,lng] coordinates in metres (stored as result.s12 for distance and result.azi1 for direction) Geodesic.direct() - returns a line starting at the position given and extending to X meters away in the direction specified by the Azimuth. You can extract out the coordinates of the end point using lat2 and lon2 for the latitude and longitude of the point X meters away

Feature 9: Settings Page Create a settings page accessible from each of the other pages of the app. On this page, you should allow the user to customize the following settings: 1. Maximum distance between fence posts It should also be possible to revert this setting to it’s default value (i.e. 4)

MCD4290 2020-T3

Assignment 2

These settings should be considered across all other pages of the app as appropriate

The Programming component of this assignment is worth 12% of your unit mark. Your team can modify or extend your app as you like, provided it has the required functionality. In particular, ensure you consider usability (See Week 11 prac) when designing the behavior of the app.

Technical Documentation Your team should produce three pieces of technical documentation for your app. The documents should be submitted as A4 size pdf files (font size 12). ●

A basic Project Management Plan. This is internal documentation detailing: ○ Project aim and scope ○ Team members, and their responsibilities ○ How you are going to do the project, e.g., team meetings, minutes, handling communication of changes to the code, processes ○ Any other information you would want to give to a new team member

Note: See Project Management Plan document template on Moodle for what should be included. ●

A Class Diagram: ○ The full set of classes used in the code (including all their attributes, methods, and class name), (excluding API classes) ○ The relationship(s) between different classes ■ and multiplicities for these relationships

Note: This should be contained in your project management plan in its own section Note2: You should prepare this diagram on the computer (rather than by hand) e.g. visio, powerpoint, google drawings, etc. ●

A User Guide. This is external documentation for users that detail: ○ How to get started using the app, with screenshots ○ Any known bugs or limitations

Note: See user guide document template on Moodle for what should be included. Your team will be assessed based on the quality of these documents. This will be worth 6% of your mark for the unit.

Resources ● ●

https://www.mapbox.com/mapbox-gl-js/api https://geographiclib.sourceforge.io/1.49/js/tutorial-2-interface.html

MCD4290 2020-T3

● ● ●

Assignment 2

https://geographiclib.sourceforge.io/1.49/js/tutorial-3-examples.html https://geographiclib.sourceforge.io/1.49/js/moduleGeographicLib_PolygonArea.PolygonArea.htmll https://geographiclib.sourceforge.io/1.49/js/moduleGeographicLib_Geodesic.Geodesic.html

Testing the app Using the Google Chrome Browser on your Desktop Computer The instructions you should follow to test the app on your desktop are below: 1. Open the Skeleton folder on your computer. 2. Find the “index” page, right click it and open with Google Chrome. 3. Make sure you have pressed F12 to open the developer tools, you should keep track of what the code is doing and keep an eye out for errors.

Using the local memory of your Android mobile device You can also choose to copy the files onto your mobile device for testing. 1. Follow instructions from Google [link] (See Option 2). 2. Make sure you remember where you placed the files. It is recommended that you create an assignment specific folder in the root directory. 3. Launch the Google Chrome app on your android device. 4. On the address bar, type file:///sdcard/ 5. This will open the contents of the storage on the browser. 6. You can navigate to the file (index.html) by tapping on the folders. 7. Once you have done this (once), you should bookmark the address so that you can go to the file with a single tap (presuming you replace the files each time for testing).

MCD4290 2020-T3

Assignment 2

Assessment Presentation task This assignment includes a presentation component worth 6% of your unit mark. Your team has now finished (or mostly finished) the prototype surveying app for Prop & Tee Pty Ltd. Their representative, Sir Vayer, has organised time for each of the prospective teams (yours and your competitors) to demonstrate their apps. Based on the client’s satisfaction with the prototypes and presentations, they will decide which team will be awarded the contract to produce the full app. While you will be primarily presenting to the client (Prop & Tee Pty Ltd), your team can expect both representatives from the client as well as other hopeful software teams to be in the audience. Ensure that your presentation explains the features of the app. It should explain how the app works and describe any specialised hardware required. You should talk at a high level about architecture in order to explain how the app might be extended or what additional features could conceivably be built on top of it, but you should be careful not to include much technical detail or jargon. In your week 12 prac class your team will deliver a formal client presentation. It will be based on the app you produced for Assignment 2. You should ensure that your presentation isn’t framed as a university assignment, but a formal project. Note that the purpose of this is not to sell the app, but rather to convince the client that you met the requirements. As with any good presentation, it should be prepared well in advance of the due date (including any visual aids) and it should be well rehearsed as a group and individually.

Format Each student team will deliver a 15 minute oral presentation (in prac class) describing and demonstrating the functionality of their app and detailing any limitations of the application. Every member of the team should present for 3-4 minutes. ● ●

The target audience for this presentation is the client This presentation would be delivered in a formal business setting and so your presentation should be framed as a professional project, rather than a university assignment. ● This presentation must discuss the structure and functionality of the application as well as any design decisions made ● The presentation should NOT contain a detailed description of code. As with any good presentation, it should be prepared well in advance of the due date (including visual aids) and it should be well rehearsed as a group and individually.

MCD4290 2020-T3

Assignment 2

Submission Your team should submit their final version of the application online via Moodle. You must submit the following: ●

A zip file of your Assignment 2 folder named based on your team (e.g., “Team014.zip”). This should contain your code and documents with the folder structure below. This should be a ZIP file and not any other kind of compressed folder (e.g. .rar, .7zip, .tar).

Please ensure that your Assignment 2 folder (and Git repository) use the following structure: Assignment2 | |---->code | | | |------>css | | ↳regionApp.css | |------>images | | ↳icon.png | |------>js | | | | | |------->mainPage.js | | |------->recordRegionPage.js | | |------->shared.js | | |------->utility.js | | \------>viewRegionPage.js | |------>index.html | |------>recordRegion.html | |------>settings.html | \------>viewRegion.html \---->docs | |------> ProjectManagementPlan.pdf \------> UserGuide.pdf

MCD4290 2020-T3

Assignment 2

The submission should be uploaded by the team leader and must be finalized by week 11 (local time). Please note: Your entire team needs to accept the assignment submission statement individually on Moodle. You also need to individually complete the CATME peer assessment survey as described below. Your assignment will be assessed based on the contents of the Assignment 2 folder you submit via Moodle. You should ensure that the copy of the assignment submitted to Moodle is the nal version that exists in your Git repository. We will use the same phones as your team phone when marking your assignments. Your presentation will be given during your practical classes in week 12.

Marking criteria This assignment consists of several component assessment items with the following associated marks (percentages of total marks for the unit): ● ● ● ● ● ● ●

App code...