CS122B Project 4

Due: March 8th, 2017, Wednesday, 11:45 pm Submit on EEE.
Notice that we use 1 day after the official deadline as the submission cut-off time on EEE to allow you to use the 24-hour grace period if you chose so. After that, EEE will no longer accept submissions.

Tasks

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

Consider our Project 2, in which we implemented two functionalities: search and movie list add to the shopping cart. A user had to click on a search button after typing some keywords in order to see the search results. Also, on each movie list page, a user had to click on a movie in order to see its details; also, adding to the shopping cart required us to change/refresh the page to see if the cart had been updated. We will improve these features with AJAX.

• Autocompletion Search: where you get search results while you type. Implement a search interface in your project with a single input box. When a user types in keywords character by character, your browser should send a query to the backend, which tokenizes the string into keywords. The last keyword should be treated as a prefix condition. Use MySQL full-text indexes to find movies with a title matching ALL these keywords (i.e., using the "AND semantics"). For example, the following is an (old) snapshot of the Netflix interface that supports autocompletion on movie titles. The user has typed in the keywords "good u", and the system found movies with titles that have the keyword "good" and a keyword with "u" as a prefix, such as "The Good, The Bad and the Ugly". We want such a feature on our web site!

• Auto popup window for each movie: On each page with a list of movies returned from a search query in project 2, implement the following feature on each returned movie of a search query. For each movie on the list, when the user hovers the mouse over the title of the movie, there will be a small window that shows the movie details, such as its banner, stars, release year and add to shopping cart button. To implement this feature, you need to implement a separate servlet that accepts a movie ID as the input, and replies with the required details in an HTML format. At the client side, you should place this HTML in the appropriate DIV tags and display it to the user. A similar example is GMAIL: when you hover your mouse over one user on your contact list, GMAIL shows you details of this user, such as his/her picture, email address, name, etc. We want such a feature on our web site!

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.)

---

Task 2: Developing an Android App for Fabflix

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

Steps:

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: Download the provided sample Android app​ and unzip it to get the folder of "FabflixMobile".

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 unzipped "FabflixMobile" app. 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.

• ​Android UI: the basics of building a user interface.
• ​activities: how to navigate between two pages (i.e., activities).

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, without the reCAPTCHA feature.
• A search box that supports full-text search on the movie "title" attribute. The search results page can be as simple as a list of movie titles.
• Your app should continue to work correctly (e.g., by keeping the content in those input boxes) after the following events:
  • Pressing the home and the back buttons, and
  • Turning the screen on and off.

---

Task 3 (Optional): Fuzzy Searching Using User Defined Functions

Currently, when a FabFlix customer is searching for a movie by its title, director or (one of) its stars (that is, searching via a "key" value), the user must spell that key correctly; otherwise, the desired movie will not be retrieved. For example, some stars' 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.

lastName LIKE '%Schwarseneger%' OR SIMILARTO(lastName, 'Schwarseneger', 2)

Add the fuzzy search feature in the web application of project 2. The user should be able to search with either the LIKE operator or the SIMILARTO operator with a given edit distance.

We will give you 5 points as extra credits for successfully implementing this feature on your AWS instance (running Ubuntu) following this ​example.

---

Preparing the Package for Submission

1. You are required to demonstrate this project.
2. You should take the following steps to prepare your package for submission. When prepared, submit the package to EEE (i.e., one submission per team).
   1. Create a directory, called "project4_[GROUP ID]" on your local machine. You are required to include three files in this directory: "fabflix.apk", "fabflix_app_project.zip", and "fabflix_webapp.war". Follow the next three steps to create these files.
   2. Use Android Studio to build an APK package, named "fabflix.apk", of your Fabflix Android app. Make sure to include both the source files and the binary files. For grading, your .apk file will be loaded into an emulator, and the app features will be tested. Compress the Android Studio project directory into a file called "fabflix_app_project.zip".
   3. Create a .war file of the fabflix Tomcat webapp . This .war file must be called "fabflix_webapp.war".
   4. Compress the "project4_[GROUP ID]" directory to a file called "project4_[GROUP ID].zip" and upload it to EEE.

If your project does not compile/run, it will get a very low score.