Assignment 1 — Mobile client applicationDue date: 11:00pm AEST, Friday Week 6 ASSIGNMENTWeighting: 20%Length: Less than 50 MB 1ObjectivesThis assessment item relates to the learning outcome 1, 2, 3 and 4. More specifically to design andimplement a complex mobile application.The objective of this assignment is for students to: Develop, test and maintain a mobile internet application using an integrated suite of mobile softwaredevelopment tools. More specifically on the client side jQuery Mobile, JavaScript and HTML5 andCSS are used. On the server side we use JavaScript and the node server with various node packages.The Mongo database is used as a data store and that data is also stored locally on the mobile device.IntroductionYou are assigned the task of creating a data logger to capture experimental data in a mobile application thatstores data in a local database. The app has fields to record data for each of five days of use of drone aircraft.When a day is selected, a page is shown to record data values for drones that are recorded by the app. Adrone entry consists of a date and log data. When the Save Log Entry button is pressed these values aresaved locally in the devices localStorage. When the Show Log Entries button is pressed a related page isshown that lists all the date/time and drone entries. More details of these pages will be given in the sectionsbelow.We will refer to our app as DroneLogs. The specification of this app will be further refined in Assignment 2.This app is to be tested using the Safari, FireFox or Chrome browser and tested on an Android or iPhonemobile device.Client Side HTML / CSS / JavaScript Mobile ApplicationYou are to implement this app using HTML5, CSS and JQueryMobile. The app is used by a company whohas to collect data on who is using their drones over rolling 5 day periods. A number of individual dronesexist and for each drone a unique ID number is used to identify it. For each individual drone the companyneeds to record data that can be used to document who flies the drone and from where the drone is flown.The app should be based on a multi-page template structure. The client side application home page is shownin Fig. 1. The Day 1, Day 2, Day 3, Day 4 and Day 5 buttons should link to pages in a JQuery-mobile multipagestructure.Images for the page/views required to implement the assignment are given in the following figures. Pleasenote that the illustrations are for reference only, and your actual pages will be based on the CSS style-guidein use on your actual mobile device.Home page viewThe home page view is shown in Fig. 1. This is the opening page for the app. A user clicks on a page linkand is transferred to that page.Page 2 of 7Fig 1: Home page viewDrone viewThe pages for entering the drone data are all the same so it makes sense to use one html page to show thebasic structure and then use Javascript to customise the page based on what day we clicked on the homepage. The view shown in Fig. 2 is for the Day 1 page.The header has titles from the variety sequence {Day 1, Day 2, Day 3, Day 4, Day 5} based on what buttonis pressed on the Home page. It also has a Clear and Show logs buttons visible in the header bar. The Clearbutton will clear the values in all the text entry fields on the page.The footer has 3 buttons. The Next button will take you to the next element in the sequence Day 1, Day 2,Day 3, Day 4, Day 5}. The Previous button will take you to the previous element. The Home button willtake you back to the home page.The content of a drone page has text entry fields with labels, Serial #:, Pilot:, Key:, Contract #: and a dropdown Category field (“”, “Civil”, “Government”, “Military”) as shown in Fig. 2.When valid data is entered into all the text entry fields the Save log entry button can be pushed to save a logfor the drone. If any of the data values are out of range or nothing is in a text entry then an alert should beshown to indicate the problem, as in Fig. 3. Page 3 of 7Fig 2: Cow variety page viewFig 3. Sample error dialogs.A second dialog must also be shown when there were problems saving the log (Fig. 4a), alternatively asuccess dialog should be shown (Fig 4b).Any number of log entries can be made to record any number of drones being flown on a day in this manner. Page 4 of 7DroneLogs viewWhen the Show logs button in the droness page header is pressed, the current date/time should be added tothe data structure used to store the drone data values being recorded. Pressing this button also triggers arequest for the loc代写Mobile client作业、代做JavaScript编程作业、代写Java实验作业、代做jQuery Mobilation (latitude/longitude) to be added to the drone data. The log entries should then besaved in the devices localStorage. A drones logs page is then shown with all the saved logs for the dronelisted, as shown in Fig. 5. Fig. 5 shows the display when more than 1 entry has been saved. Pressing theBack button on the footer should take you to the previous page.(a) (b)Fig 4. Save log completion dialog.Fig. 5: Drone logs page.Page 5 of 7Send buttonThe Send button on the drone logs header bar is used to send the data over the WWW and clear theparticular drone logs. This will be done in the second assignment. For now we will use this to clear all thisdrone data in the localStorage, and thus clear the existing drone logs. As this deletes data you must present adialog box to the user with the choice to either send the logs or not, as shown in Fig. 6Fig. 6: Send logs confirmation dialog.If the Yes button is pressed the Send logs dialog shown in Fig. 7 is presented and we return the drones viewshown in Fig. 2. If the No button is pressed we just return to the drones view page shown in Fig. 2.Fig. 7: Logs sent confirmation.Required DocumentationYou are also to prepare a Word document. Your document should include an appropriate title page.Your document should have two sections that address the hardware and software requirements andapplication commentary given below.Hardware and Software RequirementsYour document should: Create a list of mobile devices targeted for the mobile web app. State what devices you tested theweb app on.Application CommentaryYour document should: List the features you successfully implemented and those you were unable to successfullyimplement; you should describe the problem in a few sentences and also briefly describe anythingyou attempted to do to get it to work. Your approach to identifying and attempting to fix these bugsmay gain you some partial credit for those features you were unable to implement.Include a description of any additional functionality you believe would be useful to add to thisWebsite. Explain what these new features are and how they would help to improve the web app. Page 6 of 7SubmissionYou are required to submit your assignment electronically via the Moodle course website. The deliverableis a rar or zipped directory containing all the code and resources needed for testing. You must tar, rar orzip together: The directory containing all the files, folders, images required to test your mobile application Your Word documentThe resulting gzip, rar or zip file should be submitted on the course website. Please note that you should useyour student number as the name for your gzip, rar or zip file when uploading to Moodle so that allstudents work can be linked back to the author.Page 7 of 7Assessment criteriaAssignmentComponent Criteria Marks TotalClient SideapplicationDroneLogs.html /drone.css- The required scripts are all correct and available- The multi-page logic is correct- The home page displays and works as intended- The navigation header/footers of the pages are correct and functionsas expected- The date, latitude, longitude, Serial #, Pilot, Key, Contract # andCategory fields are displayed correctly and have the right hints- The Show log page shows all the drones data logs, and has therequired functionality- The date in the show logs page is formatted correctly7DroneLogs.js- Click on a days button on home page takes you to the correct dronepage- Drone values range checked and all save log entries dialogs shownbased on contents of the drones fields- All required dialogs are displayed- The Clear button on the page header clears all fields- Clicking on the Show logs button takes you to a new page where thecurrent logs are all listed in required form- The drones page pageinit and pageshow methods are implementedcorrectly- All navigation buttons have the required effect on the page view- The drone data is saved in localStorage so when the application quitsand restarts the values are retained (unless the Send logs button isused).- The user interface of the drone app meets the guidelines given in theassignment9Hardware/Software& commentaryHardware / Software requirements 1Application commentary 2General- Feedback given as required- Use appropriate naming conventions- Adequate commenting- Correct grammar- Citation of references, copyright use1PenaltiesTotal 20Lecturer CommentsLecturer’s Signature Date: 转自：http://www.7daixie.com/2019042612619705.html
