Assignment 4 Solution

Description

 

In the class, we went through how to develop web applications in MVC pattern using Angular.js. START IMMEDIATELY. In this assignment, you will use Angular.js which is quite different from jQuery and javascript.

 

 

WARNING

 

●    The primary point of the assignment is to use MVC pattern in developing the application using Angular.js. Therefore, reference and direct modification and reference of HTML elements ( such as $(".class"), append(), document) in javascript are not allowed. For example, using jQuery or javascript code that access HTML element are NOT allowed (points will be deducted).

●    We’ve given you some starter code, and you’ll only need to write javascript code inside one controller functions and angular code in a HTML file. Please do not add js outside of the controller code blocks.

●    The above 2 rules help ensure that you properly implement View related code in HTML (index.html) using Angular.js but not in Controller (script.js file)

●   The provided index.html file includes:

○   jQuery

○   Bootstrap

○   Angular.js

●    These three files are included using CDN links so if you don’t have access to the internet, this index.html file will not work. GSIs and graders will grade your submission in Chrome with online access.

●    Note that the given HTML file has some hard-coded data. This is just to show you an example but the hard-coded data should be replaced with your code eventually.

●    Submit one .zip file that includes all four files that are included in the starter code. No additional files are needed or should be included. Once we unzip the folder, the index.html file should work as long as we have access to the internet. This is necessary for grading.

●    To complete this assignment, you will need to revise (add/modify/delete) HTML code and add javascript code in index.html file and script.js file respectively. Do not add any .css files.

●    For the Model in MVC, this assignment uses iTunes API and IMDB API, which again requires internet access. Plan ahead if you will be in a situation that has no internet access. It is your responsibility to read the documentation and figure out the data structure of the JSON object.

●    This assignment heavily requires online search and reading the documentations of Angular.js and iTunes API and IMDB API that we use. The assignment may include materials that are not covered in class. We believe that, in today’s programming practice, searching and mining information from online materials are a significant part of a programmer’s expertise. You can do this!

●    Check out Announcements and Discussions in Canvas frequently for any change or additional information.

 

 

Starter Code

 

The starter code folder (493Search.zip) contains the following folders and files:

●   script.js

Provide placeholders for ONE Angular.js controllers.

●   index.html.

The main HTML page you will work on for this assignment.

●   noimage.jpg

For the artists that have no image available.

●   loading.gif

Showing it when waiting for artist information coming back

 

 

Requirements

 

1.   Searchbar (20pt)

a.   There is one input textbox provided in the HTML file.

b.   When a user types a keyword and press enter key, the entered string should be used to make an AJAX call that requests json object. (Hint: Use ng-keyup and $event to check if the keystroke is “enter (keycode:13)” or not)

c.   The entered string will be used to search artists of which name contains the keyword. d.   Do not use jQuery $.ajax but use Angular.js AJAX call using $http.

e.   The URL that you need to make an AJAX request and the data structure of the returned

json object are specified here:

i.      iTunes Search API: https://goo.gl/UXwDce

f.    Print out the returned json object in the console when making requests for both APIs (We will take off points if you do not).

g.   When there are not artists returned from iTunes, alert the user that no artist found with the keyword.

h.   Total N found message should display the total number of artists(N) returned by the iTunes API.

2.   Artists Grid. (30pts)

a.   The returned artists should be displayed in two columns with each contains both an image and 5 types of related information.

b.   Each row should have a height of 250px, and the size of each artist image should be changing proportional to the window size (see the video for details). Additionally, make sure that there is no information overlapping when resizing (i.e., text should not be on top of image and vise versa.)

c.   One exception will be the last row that may have less than two artists depending on the number of artists returned.

d.   We provided the Bootstrap Grid system so that you should be able to accomplish this table view without adding CSS. Read the following web page for more detail.

https://getbootstrap.com/examples/grid/ Bootstrap is a great framework for all to reduce the efforts in stylizing your web application, especially good for responsive design.

Make sure you understand how it works. We would strongly recommend you to use

Bootstrap in your project because it is great to realize layouts we learned from the class. e.   Typically, iTunes will provide an image URL for each artist use the first URL in the list in general. For the case where an artist does not have an image file, use noimage.jpg that

we provide in the zip file.

f.    We provide a screenshot (and a video) of a search result in this document when a user searched “jackson”. Note that this result may change as the iTunes database changes (although not likely).

3.   Navigation Tabs (25pts)

a.   The returned artists should also have their information displayed next to them on a navigation tabs.

b.   The ‘Description’ tab should contain: artist name, collection name, price, type, and preview link. This series of information can be found in the response Json data.

c.   If any of the artist name or collection name is longer than 25 characters, limit them so that it will append ellipses (...) at the end. For example, if Artist Name is “abcdefghijklmnopqrstuvwxyzzzz”, make it as “abcdefghijklmnopqrstuvwxy…”

d.   Notice that we made a mistake in the video that the artist name only cuts off after 25

without appending (...). Please do add (...) for both artists name and collection name.

e.   Click the preview link should open the preview of the song or movie trailer from this artist

f.    You might find it’s a bit of tricky to prevent the clicking events propagation.

4.   Get Artists Information. (25pts)

a.   When clicking the ‘Artist Infor.’ tab, the system should make a request to IMDB API to find the description of this artist

i.      IMDB API: http://www.theimdbapi.org/

b.   If artist name is more than 2 words (e.g., multiple people), only search the first name. For example, if the returned artist name is “Johnny Cash with June Carter Cash”, make the IMDB API call only for Johnny Cash. This might get into very complicated if we

consider all cases (e.g. the artist name is 1 or 3+ words?) We will grade this if you can deal with any single-word, or two-word name.

c.   While waiting for the response gets back, the system should display the ‘loading.gif’ to indicate the users that system is working on it.

d.   Once the response is back, hide the loading gif and parse the data to see if it is valid. If there is no data found or there is no description (i.e., empty string) about this artist, display the string “Sorry there is no information for this artist!”.

e.   If the length of the returned response is more than 100 characters, replace the exceed characters with one ellipses (...). (i.e., three dots, like 3c.)

f.    When clicking back to the ‘Description’ tab, the 5 types of information should still be there.

g.   Do not make the IMDB API call unless a user switch the tab. For example, do not make multiple API calls when a user search a keyword. Note that we want to minimize network traffics in general for the users and the server.

h.   Print out the returned json object in the console (We will take off points if you do not).

 

 

NOTE : The following bonus tasks are completely optional.

 

 

5.   (BONUS Task 1 ) Genre Selection (10 points max)

a.   Create a list of tags of which labels are all the available genre from the search result.

b.   As a user toggle a genre, only the artists that are categorized in the selected genre should appear in the grid.

c.   If a user has multiple genres selected, the artist shown in the grid should be categorized in one of the selected genres at least (not necessarily all genres selected).

d.   See the demo video for the detail.

6.   (BONUS Task 2) Open-ended features (15 points max)

a.   Add any additional features you think it is interesting to have.

b.   If you have added any feature, please include README.txt file in the submission;

otherwise we won’t grade this task.

c.   Be creative. Here are some (boring) suggestions:

i.      A popup that shows all the songs from this collection ii.      List them in order

 

 

Sample Screenshot and Demo Videos.

 

 

https://youtu.be/99Ht3rLH6gw

(Note that the screenshot and the video does not include the BONUS tasks.)