CS122B Project 4

Deadline: Week 9 Friday, 06/01/2018, 11:45pm. Due on Github


  1. Improving the GUI by using AJAX
  2. Developing an Android Application for Fabflix
  3. Fuzzy Searching Using User Defined Functions

Task 1: Improving the GUI by using AJAX

The "Advanced Search" feature you implemented on project 2 is not very user friendly. Most search interfaces nowadays simply have one input box that can perform search intelligently. Autocomplete feature on a search bar is now considered a must-have functionality. In this task, you need to implement a powerful search box that can search on multiple attributes and support autocomplete.

Normal Search

  • Have a search box on the main page of the Fabflix website (the page after login).
  • Do full text search using the query. If the query string has multiple keywords, then each keyword should be treated as a prefix. For example, the query "good u" is first tokenized into two words: "good" and "u". The search results will be all the movie titles that contain a word starting with "good" and a word starting with "u", such as "The Good, The Bad and The Ugly", and "Goodbye Uncle Tom". Check the following Netflix screenshot as an example of full text search.
  • This search box should search on movie title. A movie is considered a match if the title matches the query. For example, the query "logan" should return a list of movies whose title contains "logan" as a prefix.
  • If the user clicks the "Search" button, the site should jump to the movie list page to display the search results.

Autocomplete suggestion:

As the user types in the query in the search box character by character, your frontend Javascript code should send the query to the backend server to get a list of matching results, and then display them in the dropdown list. Check the IMDB and Rotten Tomatoes search interface as an example.

We recommend you use a Javascript autocomplete library instead of implementing the autocomplete on your own. There are many autocomplete libraries, such as The autocomplete library can help you easily achieve some of the requirements.

  • The user should be able to navigate the suggestions in a dropdown list using up and down arrow keys on the keyboard. During this process, when a suggested item is selected, the item should be highlighted, the text in the input box should be changed to the item's name.
  • Your autocomplete suggestion list needs to be grouped into 2 categories: movies and stars. See how Rotten Tomatoes search divides the suggestions into different groups (movies, celebrities, etc.). Optionally you can also choose not to group them explicitly, but indicate clearly on each item instead. See how IMDB search suggestion list shows each item as a movie or as an actor.
  • The autocomplete suggestion list should not have more than 10 items (the total number of items from all 2 categories).
  • Clicking on any of the suggestion items, or pressing "Enter" when an item is selected during keyboard navigation, should jump to:
    • if the item is a movie: single movie page;
    • if the item is a star: single star page.
  • If the user doesn't choose any of the suggestions using the keyboard, and just hits "Enter" key or clicks the search button, you should do the search normally as stated above in the "Normal Search" requirement.
  • When the user types only one or two characters, you should not do any search because the results may not be helpful. You should only perform the autocomplete search when the user types in at least 3 characters.
  • When the user types in the query, you should not do the autocomplete search on every keystroke because the user is still typing. Moreover you don't want to send too many requests to the backend. You should set a small delay time (300ms) so that that the frontend only performs the autocomplete search after the user stops typing for at least 300ms.
  • If the autocomplete query has been issued before, you don't want to send the request to the server again (for example, when the user deletes some of the characters). Store the suggestion list of each query in the browser. Every time before your code needs to do autocomplete search, first check if you can use the stored suggestions. If not, then send the query to the server.
  • Your autocomplete search needs to be fast. Notice that the total running time the user feels is "delay time + query time". Some points will be deducted if your autocomplete search takes too long.
  • Print to the Javascript console:
    • In order to verify that your code satisfies the constraints, you need to print messages to the Javascript console. In Javascript, "console.log()" is equivalent to "System.out.println()" in Java. To see the printed messages, in Chrome, open your webpage -> right click "Inspect", then choose "Console" tab. All popular browsers have something similar.
  • We need to see a printed message when:
    • the autocomplete search is initiated (after the delay);
    • whether the search is using cached results or sending an ajax request to the server;
    • the suggested list (either from cache or server response).

As a simple Ajax example, we have provided a Java-Servlet-based server program in this Ajax Example. Deploy the war file to your Tomcat server. Point your browser to the link http://localhost:8080/AjaxTest/order.html. The example uses the "onChange" javascript event to trigger an Ajax communication. Type in anything in the "Item Name" input box, and move the cursor to "Time" input box, which should show the current time. Here is a complete list of Javascript events supported by most browsers. Take a look at this page to learn more about how to use such events. (This example is based on the following link.)

Here's an Autocomplete Example that implemented most basic features of the autocomplete search. You are highly recommended to take a look at this example and learn from it.

Task 2: Developing an Android App for Fabflix Using Android Studio IDE

In this task you will implement an Android app as a new frontend for Fabflix.


The following guidelines are based on this Android programming tutorial.

Step 1: Download Android Studio IDE. Depending on the network speed, this step may take a while (e.g., 10-20 minutes).

Step 2: Clone the Android Example from Github. Also clone the new Tomcat login example from Github and deploy on your local Tomcat server (with HTTPS enabled).

Step 3: Install the downloaded Android Studio IDE. Once you see a page of "Welcome to Android Studio," use the option "Open an existing Android Studio project" and specify the "project4-android-example" app on your disk. Ignore the "Android SDK Sync" warning message.

Step 4: When opening the app, if you see an "Install missing platform(s) and sync project," click the link to do the installation.

Step 5: Follow the instructions on the page running an app to install an emulator. In particular, in the IDE, click "Tools > Android > AVD Manager", select a model (e.g., "Nexus 5"), then install the corresponding emulator. Again, this step could be slow depending on your network speed.

Step 6: Run the FabflixMobile app on the installed emulator. Select the project folder, and click "Run" in the menu. Choose the previous installed emulator as the target platform. If you see "Unsupported method: AndroidProject.getPluginGeneration(), you can check Unsupported method: AndroidProject.getPluginGeneration() while running project". The app has three activities called Red, Blue, and Green, as well as buttons for navigating between the activities, and text boxes for sending messages to other pages. The red page contains a button that sends an HTTP request, receives the response, and shows the response on the screen.

Step 7 (optional): If you have an Android phone, you can run the app directly on your phone, which is faster. You can check running an app on how to run applications on real phones.

Step 8: To make yourself more familiar with Android development, you can check the following tutorials.

Step 9 (main task): Develop a Fabflix Android app, which supports a subset of the features of the main Fabflix website. You are not allowed to use the Android WebView. The following capabilities are required:

  • Login page, which should behave like the website login page. (reCAPTCHA is optional).
  • Use HTTPS Connections to communicate with backend server
    • Self signed HTTPS certificates check is disabled by the NukeSSLCerts class, which is invoked inside NetworkManager.
  • Maintain session with backend server
    • Sessions are maintained by the CookieHandler and CookieManager set in the NetworkManager class.
  • Single movie page
    • Contains the movie title, year, director, list of genres (hyperlink is optional), list of stars (hyperlink is optional).
  • A search box that has the same behavior as the the searching requirement in task 1 (searching in movie title). Autocomplete is NOT required.
  • Pagination on the search result list. Previous and Next buttons are required, and the page size can be constant.

Note on reCAPTCHA on Android

  • You'll need to register a new site-key and secret-key pair on reCAPCHA's admin area in addition to the one that already exist for the web version of Fabflix.
    1. Register a new site
      • Choose reCAPTCHA Android
      • Package Names
        • Specify the android app's package name. In project4-android-example, the package name is edu.uci.ics.fabflixmobile.
    2. Replace the your-site-key in RedActivity, and replace the secret-key variable on the server side (project4-login-example).
  • Due to the limitation of Google reCAPTCHA, if you need to support both versions (web, and Android) of reCAPTCHA, you'll need to use different key pairs when verifying the client's reCAPTCHA response with Google. You should handle this logic in your LoginServlet such that if the request is from an Android client, use x as the secret key, and if it's a request from the web interface, use y as the secret instead.

Other Resources: This is a good note about how different events trigger specific Android lifecycle callback functions:

Example project on using ListView on Android

Task 3: Fuzzy Searching Using User Defined Functions

Currently, when a FabFlix customer does a search, the user must spell keywords correctly; otherwise, the desired movie will not be retrieved. For example, some star names, such as "Schwarzenegger," are sufficiently difficult to spell that customers are likely to spell them incorrectly--and so perhaps believe we do not stock the Terminator movies when, in fact, we do!

To make it more likely that customers find the movies they desire--and thus increase our likelihood of making sales--the exact string matching in FabFlix for key searches is to be replaced with a fuzzy matching, one that returns a movie whose value is close to the key's value.

The designers have decided that using the SQL LIKE command combined with an Levenshtein (Edit Distance) Algorithm (LEDA) is the approach to take.

The LEDA algorithm, to be implemented as a dynamic function in C or C++, is to be accessed using the interface SIMILARTO. SIMILARTO takes three parameters: the first is the key as a string, the second the string against which the key is being compared, the third the maximum distance he two strings can differ and still be considered similar to each other. Take the union of the results from LIKE and SIMILARTO.

name LIKE '%Schwarseneger%' OR SIMILARTO(name, 'Arnold Schwrzneggar', 2)

We will give 10 point extra credits if you: successfully implement this feature on your AWS instance AND integrate fuzzy search into the searching functionality in task 1 and 2. Your search results should combine the full text search and fuzzy search. Feel free to use the User Defined Functions (described above) from this example.

Deployment On AWS and Submissions

The same as before, use Github for your project 4 code (both web and Android app code) and deploy (web code) on AWS.

  • For Android part, you also need to submit the APK package to the Github as well as the source code .
    • Use Android Studio to build an APK package, named "fabflix.apk", of your Fabflix Android app.

Demonstration and Grading Criteria

The same as before, You are required to demonstrate this project, and time is 20 minutes per team. Please refer to this Grading checklist for detailed criteria.

Last modified 3 years ago Last modified on May 16, 2018 4:41:34 PM

Attachments (4)

Download all attachments as: .zip