莫纳什大学MCD4290课业解析

  • May 15, 2020

题意:开发一个能记录位置等信息应用程序帮助运动员使用手机进行训练,目的是加深对面向对象、持久存储和API的理解解析:按照给出的APP框架和逻辑功能进行完善,主要完成以下功能:创建一个Run类:有起始位置,目标位置,表示路径的数组、开始的时间、完成的时间以及其他必要的信息。位置检测和追踪:当用户开始运动时,应用程序显示用户在地图上的位置和位置的准确性,当用户位置更改或准确性提升后应该更新这个消息,这会用到JavaScript的geolocationAPI。目的地的生成和显示:应该有一个新建的按钮,可以基于用户当前的位置生成随机目的地。生成的目的地应该显示在地图上,并且显示用户当前位置到目的地之间的估计距离。开始跑步:有一个开始跑步的按钮,点击此按钮后用户跑到目的地。这时应用程序记录起始位置和时间,并开始记录路线。完成跑步:当用户非常靠近目的地时,应用程序结束并记录运行的完成时间。信息保存:用户的运动信息应该被保存到本地,能够查看到过去的运动情况信息。历史记录:根据本地的跑步信息生成一个历史记录列表。查看当前的跑步:可以查看现在跑步在地图上的信息,包括起始地点、目的地和路径的显示。重复一次跑步:允许用户开始预先设置的跑步路径,只有当用户接近预设的起点时才能开始。涉及知识点:面向对象,使用现有API更多可加微信讨论微信号:lili_950826pdf全文Team Assignment 2Run Challenge appMCD4290 Trimester 2 2019Due: Friday Week 11, 11:55PM Local TimeWorth: 24% of final markAimYour team will develop a location-aware app which allows the user to test themselvesrunning to random nearby locations and improve their overall fitness. Your app willdetermine the user’s initial location and allow them to request a random location to runto. As they run, the app will track their location and calculate the time, distance andspeed of the run. Users will then be able to compare runs and reattempt previous ones toimprove.This assignment will require you to demonstrate an understanding of object orientation,persistent storage, use of external APIs, as well as related of code style, documentation,and principles of interface design.BackgroundYour team, along with 23 others, have been flown to Osnea (a mid-msized pacific nation)on behalf of the Osnean Institute of Sport (OIS), which trains famous athletes such as“Fast-Terry Van Zanzebolt”, “Riley Quick”, “Fi Targoing” and “Mani Kays”. As part of atender process, they have tasked each team with developing a proof of concept app tohelp their athletes train using their phones.The best proof of concept app will result in further work for that team as they will betasked in developing and maintaining a full app that can be distributed to all those at OISto help runners and hurdlers prepare for upcoming events. If it is well received by theirathletes, OIS may also consider asking the winning organisation to make the app accessibleas a paid product via app stores for Android, Apple and Windows Phone.What you are provided withWe have made available a skeleton version of the app. The skeleton provides you withseveral HTML pages and associated JavaScript and CSS files representing the structure ofthe app. You will need to implement the logic and functionality for each of these pages asdescribed below.The app skeleton contains three web pages that utilise MDL for their interface:● Runs List page (main index page)● New Run page● View Run pageA “Run” is a series of ordered points representing the path the user runs to reach theirdestination.In the app skeleton, these pages are mostly blank. They include sample entries only todemonstrate how to navigate and pass information from one page to another. You maymodify these files as you like, however you should not change the file names.The app skeleton contains a displayMessage function in the utility.js that you can use todisplay toast messages.What you need to doThis assignment consists of multiple tasks, including programming, documentation, anduse of software tools. For the programming tasks, we suggest you complete each steptogether as a team before moving onto the next one. It is strongly recommended that youpractice pair programming rather than trying to split up the coding and attempting partsindividually.You will need to communicate effectively with your team while working on theassignment. Your use of Bitbucket, Asana, and Google Drive will affect your final marks onthis assignment and as with Assignment 1, your final marks will be scaled by your teamcontribution as determined by CATME.Finally, there will be a team “client” presentation as well as an individual interview onyour submitted code, both of which will occur during your week 12 practical class.Getting startedOne team member should create an “assignment2” directory with the necessaryinitial directory structure in your team’s repository by committing the providedskeleton code (see the Skeleton code and the “Submission” section below).One of your team members should set up an API key for Mapbox attached to a teamGoogle account (if you didn’t do this already as part of the Week 6 prac exercise).Your team should read and discuss the list of required functionalities below andcreate Asana tasks for the necessary features. You should discuss these and breakthem down into necessary subtasks.Required functionalityCreate a Run classThe app should allow the user to track several different runs and calculate someinformation for these. It will be necessary for the app to distinguish runs from oneanother. You should create a Run class with several private attributes: the startlocation (a LngLat object), the destination location (a LngLat object), an array oflocations (of LngLat objects) representing the path taken by the user, the date(incl. time) the run was started, the date (and time) the run was completed, andany other information you feel is necessary.Location detection and trackingWhen the user launches the New Run page, the app should locate the user anddisplay their position and location accuracy on an interactive map. Thisinformation should be updated as the user’s location changes or increases inaccuracy.Note:● The builtin JavaScript geolocation API can be used to watch the user’slocation. Using the watchLocation method, this code will call a callbackfunction for every location change and give the new location as anargument. This is the approach used in the ENG1003 sensor test app weexplored in prac classes.Destination generation and displayThere should be a button on the app’s New Run page which can be tapped togenerate a new destination (a random nearby location). This random locationshould be based off the current position of the user (between 60m and 150m awayfrom it). This button should be initially disabled and should become enabled whenthe user’s location accuracy first drops below 20 metres for the first time.You should ensure that the logic for generating a random destination isimplemented as a function called ‘randomDestination’ which takes as a singleargument, a LngLat object, representing the current location, and returns a LngLatobject representing the new random location.Function Name File Input OutputrandomDestination newRunPage.js LngLat of currentlocationLngLat of newlocationThe destination should be displayed on the map and the app should display anestimated distance from the user’s current location to the destination (assuming adirect path from one to the other). This distance estimate should update as theuser’s position changes.Note:● Random values can be generated in JavaScript with the builtinMath.random function, as we did in the Dice Rolling prac exercise.● Modifying a longitude and latitude by a random amount up to ±0.001 willresult in a change of no more than 150m.● You should check that your randomly generated location is not less that 60metres from the user’s current location. If it is, you should silently select anew destination, so the user doesn’t receive destinations too close to theirposition.Beginning a runThe New Run page should have a button to begin the run. When this button istapped, the user is expected to run to the destination. The app should set the startlocation and time for the run and begin recording the route. You should store thisin a new instance of your Run class.This “begin run” button should be disabled until the user has selected a destination.As the user runs, the app should continue tracking and displaying their position onthe map and displaying the estimated distance to the destination. In addition to this,the app should display the estimated distance from the starting location (assuming adirect path from one to the other).Completing a runWhen the user is very close to their destination (for example, within 10 meters)the app should end the run and record the completion time for the run.You should add two methods to the Run class which calculate the total distancetravelled by the user and the duration (time taken). The app should display thetime taken for the run and distance travelled.Persistent storage of Run instancesThe New Run page should provide the user the ability to save the new run oncethey have completed it (disabling the button before this). This “save” action shouldstore the new Run instance in local storage and then return the user to the PastRuns List (index) page.Note:● Be sure that you store runs in such a way that you can retrieve all of yourruns from local storage later.● You may choose to allow the user to store a given run with anickname/short description for easy identification later.Showing a list of RunsOnce you have one or more Run instances stored in local storage, you shouldmodify the Past Runs List (index) page so that it displays a list of Runs that can beviewed. This list should be generated from information in local storage and shouldinclude the date/time when the run was recorded (and any other information youwould like to display). Clicking on an entry in the list should cause the app tonavigate to the View Run page and display that Run.Viewing a RunWhen the user views an existing run via the View Run page, the app should displaythe run on an interactive map, including the start location, destination andintermediate path.This page should provide the user a method to delete that Run, which shouldremove the Run from local storage and return the user to Runs List (index) page.This page should display the distance of the run and the duration, along with theaverage speed for this run.Repeating a RunThe app should allow the user to try and improve their time for a given run. TheView Run page should have a “Reattempt” button that takes the user to the NewRun page but pre-sets the starting location and destination rather than allowing theusers to select these.When the user reattempts the run, the app should prevent them from starting therun until they are near the start location of that run. For this the new Run pagewill need to respond differently for reattempted runs, i.e., track the user prior tobeginning the run.The programming tasks together are worth 12% of your unit mark.Your team can modify or extend your app as you like, provided it has the requiredfunctionality. In particular, ensure you consider usability when designing the behaviour ofthe app.Technical documentationYour team should produce two short pieces of technical documentation for your app:● 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○ Any other information you would want to give to a new team member● A User Guide. This is external documentation detailing:○ How to get started using the app, with screenshots○ Any known bugs or limitations● 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○ These should be prepared as a diagram on the computer e.g viso,powerpoint, google drawings etc.Your team will be assessed based on the quality of these documents. This will be worth 6%of your final mark for the unit.PresentationYour team has now finished (or mostly finished) the prototype running app for the OsneanInstitute of Sport. Their representative, Tony Heelson, has organised time for each of theprospective teams (yours and your competitors) to demonstrate their apps. Based on theclient’s satisfaction with the prototypes and presentations, they will decide which team will beawarded the contract to produce the full app.While you will be primarily presenting to the client (OIS), your team can expect bothrepresentatives from the client as well as other hopeful software teams to be in theaudience. Ensure that your presentation explains the features of the app. It should explainhow the app works and describe any specialised hardware required. You should talk at ahigh-level about architecture in order to explain how the app might be extended or whatadditional features could conceivably be built on top of it, but you should be careful not toinclude too much technical detail or jargon.This presentation will be a formal client presentation delivered in front of your prac class. Itwill be based on the app you produced for Assignment 2. As with any good presentation, itshould be prepared well in advance of the due date (including any visual aids) and it shouldbe well rehearsed as a team.FormatEach student team will deliver a 15-minute oral presentation (in week 12 prac class)describing and demonstrating their app and detailing any issues. Every member of the teamshould present for 3-5 minutes.● The target audience for this presentation is the client for the project● This presentation will be delivered in a business setting and so all team membersshould be dressed appropriately● This presentation must discuss the design, structure and functionality of theapplicationThis presentation will be worth 6% of your final mark for the unit.Testing the appSave your assignment folder on your mobile device selecting \Transfer _les (MTP)option” under “Use USB for”.Go to file:///sdcard/ using google browser (on your mobile phone, open googlebrowser and write file:///sdcard/ in the address bar),Then select your folder and click on the index.html fileResources● MDL: Material Design Lite documentation● Mozilla Developer Network: Using geolocation guide● Mozilla Developer Network: Date documentation● Mozilla Developer Network: random function● Mapbox API: Map class● Mapbox API: Marker class● Mapbox API: other useful classesSubmissionYour team should submit their final version of the application online via Moodle; You mustsubmit 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 folderstructure below. This should be a ZIP file and not any other kind of compressedfolder (e.g. .rar, .7zip, .tar).Please ensure that your Assignment 2 folder (and Bitbucket remote repository) use thefollowing structure:assignment2├── code│ ├── css│ │ └── runChallenge.css│ ├── images│ │ └── icon.png│ ├── index.html│ ├── js│ │ ├── mainPage.js│ │ ├── newRunPage.js│ │ ├── shared.js│ │ ├── utility.js│ │ └── viewRunPage.js│ ├── newRun.html│ └── viewRun.html└── docs├── ProjectManagementPlan.pdf├── UserGuide.pdf└── ClassDiagram.pdfThe submission should be uploaded to Moodle by the team leader and must be finalised byFriday Week 11, 11:55PM (Local Campus Time). Please note: Your entire team needs toaccept the assignment submission statement individually on Moodle.You also need to individually complete the CATME peer assessment survey as describedbelow.Your assignment will be assessed based on the contents of the assignment 2 folder yousubmit via Moodle. You should ensure that the copy of the assignment submitted toMoodle is the final version that exists in your repository. We will use the same phones asyour team phone when marking your assignment.Your presentation will be during your practical classes in Week 12.Marking criteriaProgramming tasksThis assignment consists of several component assessment items with the followingassociated marks (percentages of total marks for the unit):● App code and functionality — 12% (group)● Production of technical documentation — 6% (group)● Presentation – individual component — 3% (individual)● Presentation – Team component — 3% (group)● Use of appropriate tools — (used to calculate individual contribution factor)Assessment criteria:● Required functionality and correct behaviour of the produced app● Quality of app source code, including code documentation and overall structure● Clarity and quality of individual oral presentations● Structure, appropriateness, and level of team-client presentation● Participation and appropriate use of tools for team software development, includingcommunication style● Appropriateness of technical documentation, including structure, completeness andcommunication qualityYou will be marked as a group however your individual marks will be subject to peer reviewmoderation based on CATME feedback and scaling factors.A detailed marking rubric will be available on the unit Moodle page.CATME Peer AssessmentYou are expected to work together as a team on this assignment and contribute roughlyequal amounts of work. Peer assessment will be conducted via the CATME online system.You will receive email reminders at the appropriate time.Not completing the CATME peer assessment component may result in a score of zero forthe assignment.Do:● Give your teammates accurate and honest feedback for improvement● Leave a short comment at the end of the survey to justify your rating● If there are issues/problems, raise them with your team early● Contact your demonstrators if the problems cannot be solved amongst yourselvesDo NOT:● Opt out of this process or give each person the same rating● Make an agreement amongst your team to give the same range of markContribution through use of collaborative toolsEach team member will be individually assessed on their use of three tools forcollaborative software development:● Bitbucket (and GitKraken desktop client) for managing revisions of the app source,and handling commits by multiple team members.● Asana for team communication, project management and issue tracking.● Google Drive for document authoring.The history of your contribution over the entire period of the assignment, on Bitbucket,Asana and Google Drive will be individually considered. For the use of each of these toolsyou will be given a score depending on your observed level of contribution. Students withless than the acceptable level of contribution for will incur a penalty to their assignmentmark:Score PenaltyNo contribution 10%Some contribution 5%Appropriate contribution 0%Note: it is not enough to just use these tools for some dummy actions just prior tosubmission—this will not be counted. It is expected that you will use these tools regularlythroughout the term of the assignment. You must give your demonstrator access to yourteam Asana workspace and Google Drive folder for Assignment 2.Assignment code interviewDuring your week 12 prac class your demonstrator will spend a few minutes interviewingeach team member to individually gauge the student’s personal understanding of yourAssignment 2 code. The purpose of this is to ensure that each member of a team hascontributed to the assignment and understands the code submitted by the team in theirname.You will be assigned a score based on your interview, and your code mark will be penalisedif you are unable to explain your team’s submission:Category Description PenaltyNounderstandingThe student has not prepared, cannot answer even the most basicquestions and likely has not even seen the code before.100%TrivialunderstandingThe student may have seen the code before and can answer somethingpartially relevant or correct to a question but they clearly can’t engage ina serious discussion of the code.30%SelectiveunderstandingThe student gives answers that are partially correct or can answerquestions about one area correctly but another not at all. The student hasnot prepared sufficiently.20%GoodunderstandingThe student is reasonably well prepared and can consistently provideanswers that are mostly correct, possibly with some prompting. Thestudent may lack confidence or speed in answering.10%CompleteunderstandingThe student has clearly prepared and understands the code. They cananswer questions correctly and concisely with little to no prompting.0%PresentationStudents are assessed on their individual presentation skills using the following criteria:● Voice is of appropriate volume, speed and enthusiasm● Language is appropriate for a formal context and doesn’t include unnecessary jargon● Eye contact is consistent and covers most of the audience● Body language complements the presentation● Explanations are clear and visual aids used appropriatelyTeams are assessed on the structure and management of the presentation using thefollowing criteria:● Introduction clearly identifies the members of the team, what is to be spoken about,and who is talking about what● Conclusion clearly closes the presentation and refers to previously covered content● Material included is relevant, justified and of high quality● Speakers are given an equal share of time and are smoothly transitioned between● The presentation adheres to the required time limit and the time spent on a section isappropriate for the complexity of that section● Attire is appropriate for a formal setting● Appropriate use of visual aidsFinal marks will be a combination of both the individual and team marks.Other informationWhere to get helpFAQs are at the end of this document and you can also ask questions about the assignmenton the General Discussion forum on the unit’s Moodle page. This is the preferred venue forassignment clarification-type questions. You should check this forum (and the News andAnnouncements forum) regularly, as the responses of the teaching staff are “official” andcan constitute amendments or additions to the assignment specification. Before asking for aclarification, please check the FAQ and forum.Plagiarism and collusionCheating and plagiarism are serious academic offenses at Monash University. Studentsmust not share their team’s work with any student outside of their team. Students shouldconsult the policies linked below for more information.https://www.monash.edu/students/academic/policies/academic-integrityhttp://eng.monash.edu.au/current-students/cheating-and-plagiarism.htmlStudents involved in collusion or plagiarism will be subject to disciplinary penalties, whichcan include:● The work not being assessed● A zero grade for the unit● Suspension from the University● Exclusion from the UniversityLate submissionsWe do not accept late submissions without special consideration. Such special considerationapplications should be made to the unit email address with a completed form and supportingdocumentation within two business days of the assignment deadline.http://www.monash.edu/exams/changes/special-considerationUnavailable team membersIf team members are missing on the day of the presentation, the remaining members shouldproceed without them. Missing team members will receive a mark of zero unless they aregranted special consideration. Such special consideration applications should be made tothe unit email address with a completed form and supporting documentation within twobusiness days of the presentation date.http://www.monash.edu/exams/changes/special-considerationYou must also inform your teammates if you will be absent on the day of the presentation.Frequently Asked QuestionsWill the assignment app work on iPhone?Yes, this app should work fine on iPhone.Where should I start for Assignment 2?You should look into the Assignment 2 instruction under “Getting Started” subsection.I have correctly setup the Mapbox API, my initMap function and there are noerrors, but still my map doesn’t display. Why?The map is being given a height of zero. You can specify a height for it in one of twoways (in the .css file for the app):#map {height: 400px;}which makes the map 400 pixels high, or the more complicated expression#map {height: calc(100vh – 300px);}can be used to set the map height to be 100% of the view height minus 300 pixels. Thiscan be useful if you have other things on the page with fixed height and you want themap to take up the rest of the available screen space.Does the assignment need to be tested on the server and the team phone?No, most of the assignment can be tested on Desktop Chrome. Only the GeoLocation(GPS) API does not work on desktop Chrome and will require you to test it on the teamphone.How can JavaScript on one page access and modify content in a div on anotherHTML page?You can’t do this, i.e., the code for the Add Region page can’t reference and populatethe regionsList div on the Main page. The browser only has the DOM instance for thecurrently loaded page. The JavaScript on the page only has access to the DOMinstance for the current page.In order to affect the content of another page, you need to have the current page saveinformation you want the second age to see to local storage, update the location to thesecond page, and then have the code of the second page look at that information inlocal storage to determine what it displays. This was demonstrated by the locationselection code (and subsequent title display on the View Region page) in the appskeleton. This is exactly the Settings page for the Playground works.Why are my initial GPS locations so inaccurate?There is a setting on your phone under Settings -> Location. This should be set to “HighAccuracy”. Sometimes it may default to “Battery saving”.It takes around one minute before you will start to receive really accurate locationinformation after you first initialise the GPS, since it takes time to get a full signal from acouple of satellites (see our notes on this). You may findnavigator.geolocation.watchPosition() to work better thannavigator.geolocation.getPosition() as it constantly polls the GPS watching for locationchanges.You can also find the accuracy will get worse when you walk under buildings, orbetween buildings with a narrow view of the sky.WiFi connectivity shouldn’t matter when using the app (other than you might not seenew map tiles). WiFi networks are only used for location information in the first minutebefore the GPS really kicks in.I have a lot of overlapping circles/markers/polygons displayed on the map.Why? Or When I hit “Reset” only the last polygon/marker is removed. Why?This is because you are creating an additional copy of a newMarker/Polygon/Polyline/Circle class instance each time you want to remove it. Eventhough you don’t have a reference to the old ones, the Map does and still displays them.You likely only have a reference to the latest copy.If you are going to create a new annotation each time you want to redraw it, you need toremove the old ones from the map. This can be done by setting the map propertyto null via the addTo(null); method.I tried to connect GitKraken from home, but it doesn’t work. Why?If you are accessing from home, you may need to VPN to Monash network first. Furtherinstructions are available here.Can we add images to use in the app for buttons, pictures and custom markers?No, sorry. However, you can upload images files via https://postimage.org/ and then usethe direct link to the image file that they provide in order to use the image from your app.What constitute a good use of Tools (Asana, Bitbucket & Google Drive)?The history of your contribution over the entire period of the assignment. It isexpected that you will use each of these tools regularly throughout the term of theassignment. Note that it is not enough to just use these tools for some dummy actionsjust prior to the submission deadline—this will not be counted. For the use of each ofthese tools you will be given a score of “appropriate”, “some” or “none” depending onyour observed level of contribution. Students with less than the “appropriate” level ofcontribution will incur a penalty to their assignment mark.Some examples of contribution below:AsanaGood: Regularly participated in creating and commenting on tasks in Asana overassignment period. Worked with tasks effectively, e.g., adding descriptions, creatingsubtasks, commenting on tasks, assigning tasks to team members/themselves,completing tasks.Bad: Created dummy tasks with meaningless titles or created and completed severaltasks just prior to submission.BitbucketGood: Regularly committed and pushed meaningful changes (incl. log messages) toteam repository during the assignment period.Bad: Committed and pushed a couple of trivial or unnecessary changes (such aschanging lowercase to uppercase or renaming files/functions) to remote repository,or made some commits only immediately prior to submission.Google DriveGood: Regularly collaborated with team members to contribute to the authoring ofthe PMP and User Guide drafts using Google DocsBad: Made only trivial contributions to documents, or only made changes to GoogleDocs just prior to submission.There are five different JavaScript files. Where should we put our code?Code of any JavaScript file included via a script tag in an HTML file is available to othercode in the HTML file loaded after it. That is, code in a JavaScript file can use anyclasses, function and global variables from itself or any JavaScript file loaded before it.The utility.js file is included in each HTML page but shouldn’t be edited. This containssome shared code we have written: the displayMessage function that can be used toshow a toast (alert) message on the screen. Since it is included before the otherJavaScript files, you can call the displayMessage function from anywhere in your code.The shared.js file is included in all HTML files too. It should contain any of your codethat you need to use from multiple places. This is likely to be the Run class, code to loadand save the Runs to/from localStorage, and any other helper functions you write. Youcan use/call code in here from any of the three page specific JavaScript files.There is a corresponding JavaScript file for each HTML file. Each of these shouldcontain code specific to that page, or code that needs to run when that page loads.Since each of these files are included as the last JavaScript file, things defined in thesecan’t be used from shared.js or anywhere else.I’m getting a weird error that mentions the snackbar. I’m pretty sure I didn’tchange anything there, what gives?You can fix this by ensuring the scripts are called on your html page and ensuring that ifyou use displayMessage when the page loads, it uses what we describe in the questionbelow.My displayMessage that runs when the page or js file is loaded doesn’t work, andI don’t get any errors. How can I fix this?This happens when the mdl js file is loaded but has not completed execution. You canfix this by doing the following:Assuming you have some functions or code that should run when the file is loaded… i.e.makeRunList();displayMessage(“Runs loaded”,2000);Put these into a function called initPage(), so you havefunction initPage(){makeRunList();displayMessage(“Runs loaded”,2000);}and add this function to the same js file:window.addEventListener(“pageshow”, function(event) {initPage()});What this does is ensure that the code only fires when the page is fully loaded (i.e. themdl js has finished executing).You will need to ensure that the mdl script tag in your html page has defer set, i.e.

LATEST POSTS
MOST POPULAR

ezAce多年来为广大留学生提供定制写作、留学文书定制、语法润色以及网课代修等服务,超过200位指导老师为您提供24小时不间断地服务。