1 | 7

IT 358: Mobile and Cloud Computing

Assignment 06 (180 points) The initial page should be named a06_yourname.htm and all the answer should be accessible from this "home" page. When linking the pages, be sure to use relative path. Be reminded that you should use plain HTML for your answers, not Word, PDF, …, etc. The title of the home page a06_yourname.htm should be "IT 358 Assignment 06: Your Name”. Again, be sure to place all the work on the respective folder and provide screenshots for each of the questions below. Submit the whole zipped folder that includes all the html files and images if there are images. Every answer of your assignment should be accessible from the home page a0i_yourname.htm (here, the i is the assignment number). The instructor should NOT have to search your folders to locate any document at all. There is a zipped folder of html files, which you can use as a reference. As shown in the lectures, first, create a folder with name assign06_yourname, then you need to create an empty Xcode project with name assign06_code in the above folder. Next, add the following projects such as q01, q02 … into this empty project.

1. [80 points] Create an iOS app project with name q01 that shows the School of IT courses. This app is similar to the apps in assignment 05, but the Tab Bar Controller is used in this app, which needs to have the following scenes/tabs on the tab bar with icons from SF Pro (https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/): (a) All Courses: list 12 courses from the Information Technology (IT) Courses

(https://coursefinder.illinoisstate.edu/directory/it/). When the app starts, all these 12 courses will be displayed automatically.

(b) Most Viewed: list 5 courses that have been viewed at least 1 time. The ranking from high to low. If more than one course has the same number of being visited, the app will order them without considering which one is on the top

(c) Favorites: list of all courses that have been "tagged" as favorites; note that this implies that throughout the app, there needs to be a means to allow one to tag a course as a favorite.

(d) Ranking: device a rating system for users to provide rating and your app to list top rated ones. When more than one course has the same ranking number, the app will not consider the order of these courses.

(e) Settings: provide options to a. Clear the Favorites b. Clear Times Viewed c. Clear Ranking

The following figures are the screenshots of the APP as a reference. You can create any different interface incase the app can finish the required functions! Fig. 1-1 is the initial screenshot. Fig. 1-2 is the screenshot with ranking number entered and some favorite bar checked (four courses’ favorite bar checked to green color). Fig. 1-3 is the screenshot of “Favorites” tab, showing all the courses whose favorite bar checked. Fig. 1-4 is the screenshot of the

2 | 7

“Most Viewed” tab page, listing the top 5 ranked courses. Note: if there are more than one course with the same ranking number, there is no requirement about their ranking. The entered ranking number should be integer in range of 0 – 100. Fig. 1-5 and Fig. 1-6 show the detail page of course IT 428 being viewed 1 and 2 times. Each time, when user views the course description page, the number of “time Viewed” will increase one. Fig. 1-7 is the screenshot of the top 5 most viewed courses in the “Most Viewed” tab page. Fig. 1-8 is the screen of “Settings” tab page, which includes three buttons to clear the information of all the favorites, times viewed, and ranking respectively. For example, when user clicks “Clear the Favorites” button, all the selected favorites information will be deleted. Note: all you submitted screenshots should be different from the following example ones. You have to select different courses, favorites, times viewed and ranking.

3 | 7

4 | 7

2. [80 points] Persist your app data from the above by using Core Data for everything. Namely, all the information on courses, # of times viewed, favorites, top rated, and Settings must be persisted using Core Data and be made available from one session to another. When the app is closed and reopened, all these data will be kept.

For your screenshots, make sure you show that the data have been correctly persisted (namely, changes made are persisted and loaded into the app upon restart). Also, provide a screenshot of the entities and attributes. Your app can be different from the given example as long as your app has all the required functions.

As shown in Fig. 2-1, the tab view “All” is similar to Assignment 05 Q4 without preloaded courses. The first three buttons are similar to the corresponding buttons in Assignment 05 Q4. Only difference is that the first button will ask user to enter Rating (0-100) …, i.e., enter an integer number between 0 and 100. Hint: you can set String type and then cast the input to integer when sorting. As shown in Fig. 2-3, enter 10 courses from https://coursefinder.illinoisstate.edu/directory/it/, which includes course rate from 0 to 100. The initial favorite button will set to empty (false). Fig. 1-4 shows the detail page of IT166. The tab views of “Most Viewed”, “Favorites” and “Ranking” are the same as question 01. Fig. 2-5 shows the “Most Viewed” tab, Fig. 2-6 shows some favorite buttons are selected, and Fig. 2-7 shows the corresponding “Favorites” tab view. Fig. 2-8 shows the “Ranking” tab view, and Fig. 2-9 shows the “Settings”, which includes buttons “Clear the Favorites” and “Clear Times Viewed”.

5 | 7

6 | 7

3. [20 points] In the Settings tab view of question 01, add a button “Color Scheme”, which can be used to toggle the app’s color scheme between light and dark. In initial color scheme is light, when click this button, the app’s color scheme will change to dark, click this button again, the color scheme will change to light, and so on.

The following figures from Fig. 3-1 to Fig. 3-7 show the light (first one) and dark color schemes.

7 | 7