CS122B Project 4

Deadline: Week 9 Monday, 03/04/2019, 11:45pm. Due on Github


  1. Improving the Website by Full Text Search and Autocomplete
  2. Developing an Android Application for Fabflix
  3. Fuzzy Searching Using User Defined Functions, optional extra credit

Task 1: Improving the Website by Full Text Search and Autocomplete

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. Full-Text Search and Autocomplete on a main search bar is now considered a must-have functionality.

Task 1.1 Full Text Search on movie title

Full Text Search section specifies the requirements when the users click the search button and what should show up in the movie list result.

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.

Requirements for Full Text Search

  • Have a search box on the main page of the Fabflix website (the page after login).
  • Do full text search with the query on movie title.
  • If the user clicks the "Search" button, the site should jump to the movie list page that displays the full text search results.

Task 1.2 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 search interface as an example.

Requirements for Autocomplete

  • Your autocomplete is required to do full text search on movie title field.
  • The autocomplete suggestion list should not have more than 10 items.
  • Autocomplete should support keyboard navigation using ↑ ↓ arrow keys on the keyboard. When a suggestion item is selected, the item should be highlighted, the text in the input box should be changed to the item's name.
  • Clicking on any of the suggestion items, or pressing "Enter" if an item is selected during keyboard navigation, should jump to the corresponding single movie page.
  • If the user doesn't select any suggestion and just hits "Enter" key or clicks the search button, you should do the same full text search as stated above in the "Full Text 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 (>= 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 Javascript frontend. 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 very fast. Note that the total running time the user feels is "delay time + query time". Some points will be deducted if your autocomplete search takes 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 using "console.log()". 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 printed message only at these cases:
    • 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).

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.

Here's an example 2019w-project4-autocomplete-example that implemented most basic features of the autocomplete search. 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.

Steps to getting started with Android Development:

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 2019w-project4-android-example. Also clone the new project4 login example from 2019w-project4-login-example 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 "2019w-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.

Requirements for Android

  • Login page, which should behave like the website login page. (without reCAPTCHA).
  • 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 full text search requirement in task 1 (searching in movie title). Autocomplete is not required.
  • Search result list
    • Displays a ListView of the movies searched. When a user clicks on an item, it should show the corresponding single movie page in a new activity.
    • Each item on the result list should contain the information of a movie (title, year, director, list of genres (hyperlink is optional), list of stars (hyperlink is optional)).
  • Pagination on the search result list. Previous and Next buttons are required, and the page size can be constant.

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 (Optional Extra Credit): 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 5 point extra credits if:

You successfully implement this feature on your AWS instance AND integrate fuzzy search into the searching functionality in task 1 (web normal search and autocomplete) and 2 (Android search).

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.

You should carefully tune fuzzy search edit distance threshold to make the fuzzy search result meaningful. Setting the edit distance too high might give you results irrelevant to your search query. For example, you could normalize the threshold based on the length of query.

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 15 minutes per team. Please refer to this [ "Grading Rubric"] for detailed criteria.

Last modified 17 months ago Last modified on Feb 19, 2019 11:05:41 AM

Attachments (3)

Download all attachments as: .zip