Now that we have our data ready, let's create a simple UI to display it to the user. In this section, we will be creating a web application using the Play Scala framework. Check out a Play Scala tutorial at https://www.typesafe.com/activator/template/play-scala-intro before you continue.
From a Scala developer, who knows how to use SBT, a Play framework application is no different than a normal SBT project. Essentially either you can use SBT or you can use Activator (for recent Play projects).
We have already prepared the application for you, located in the webapp-recommender
folder in this book's source code. Let's go to that folder and see what we have in the project:
$ cd webapp-recommender/ $ ls -ng total 44 drwxrwxr-x 7 1000 4096 Jun 22 19:52 app -rw-rw-r-- 1 1000 1028 Jun 16 16:12 build.sbt drwxrwxr-x 2 1000 4096 Jun 16 14:23 conf drwxrwxr-x 4 1000 4096 Jun 16 01:48 project drwxrwxr-x 4 1000 4096 Jun 21 20:09 public -rw-rw-r-- 1 1000 27 Jun 16 01:42 README.md drwxrwxr-x 2 1000 4096 Jun 11 10:44 test
Notice that there is a build.sbt
file, which is the build definition file. There are other folders app
, conf
, public
, and so on which define how the web application will behave. To run the web application you need to invoke the following command (we are not covering production level setup here):
$ sbt run [info] Loading global plugins from ... [info] Loading project definition from ... [info] Set current project to webapp-recommender ... --- (Running the application from SBT, auto-reloading is enabled) --- [info] play - Listening for HTTP on /0:0:0:0:0:0:0:0:9000 (Server started, use Ctrl+D to stop and go back to the console...)
This will start a HTTP server on your machine running on port 9000. Open this link: http://localhost:9000/
. What do you see?
Well first up is the home page, which should be self explanatory:
Go back to your MongoDB console and notice that every product is assigned to a group such as DVD, Book, and so on. So the next view we have is for the different product groups.
Click on Product Groups from the navigation bar:
Next if you click on a group, say Book, you will land on Product Listing for that group. This shows only the first 100 products as shown in the following screenshot:
Further down if you click on a book named War at Sea: A Naval History of World War II (Book), we have what we call the product view.
In this view, we see the details of a product along with its overall rating and reviews:
Finally, for the sake of completeness we have created a basic user listing, which only enlists the customers. Again, this shows only 100 customers.
The following view shows the Customers listing:
The following view shows selected customer details:
Until now we have used a very simple web app to display selective data on the browser. Now it's time to add two additional views for persistent and automatic user recommendations. Recall from our discussion of the recommender interface and recommendation technology, that we discussed the top N list and aggregated rating, and so on. We will use those in the following sections.
3.22.71.106