Creating a web app with user/product pages

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.

Creating a Play framework application

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

Note

It could take some time to download all the dependencies so please bear with the network speed.

This will start a HTTP server on your machine running on port 9000. Open this link: http://localhost:9000/. What do you see?

The home page

Well first up is the home page, which should be self explanatory:

The home page

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.

Product Groups

Click on Product Groups from the navigation bar:

Product Groups

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:

Product Groups

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.

Product view

In this view, we see the details of a product along with its overall rating and reviews:

Product view

Finally, for the sake of completeness we have created a basic user listing, which only enlists the customers. Again, this shows only 100 customers.

Customer views

The following view shows the Customers listing:

Customer views

The following view shows selected customer details:

Customer views

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.22.71.106