Aurelia + Spring app to track watched films
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
api
client
screens
README.html
README.md

README.md

RememberMe

Aurelia + Spring web app to track watched films

Project created for course "JSP development" @ SGGW

Paweł Iżycki

What does it do?

  • It helps user to track films he wants to watch and leaving notes to films that he already watched.

  • For quick film look up, there is simple film catalog avaible.

  • For every film saved in user repository, there is an option to download basic details about the film (there is even a poster!).

Architecture

The whole application is based on "client-server" pattern, where client is a Single Page Application (SPA in short) and the backend is REST-like API.

Client was build with use of Aurelia framework, which is JavaScript library for creating SPA applications. It's somehow similiar to announced Angular2 framework. To serve static resource requests we used simple tool local-web-server.

The API is hosted with Spring MVC framework (altough, we don't use V in here). To make development even more simple, I choosed Spring Boot framework with Maven type project for resolving all dependancies painless. The API hosting server is Tomcat.

For gathering and browsing film catalog I've used open source data provider OMDb API. The requests are made on the server-side with RestTemplate from one of Spring components and parsed manually with JSON.Simple library.

As a data storage (a.k.a database) I used NoSQL, document database MongoDB. Quick tutorial how to use Spring MongoDB adapter can be found here.

How it works

Auto generated repositories

The app is basic CRUD-ish application. While developoing, I took the adventage of auto-implemented repositories. It saved me a lot of time by sparing me implementing all repository methods by myself.

An example of film repository, where all watched films are stored, is listed below.

import org.springframework.data.domain.Sort;
import org.springframework.data.mongodb.repository.MongoRepository;

import java.util.List;

public interface FilmRepository extends MongoRepository<Film, String> {
    List<Film> findTop10BySeen(boolean seen, Sort sort);
    List<Film> findBySeen(boolean seen);
}

As mentioned before, the implementation of interface is autogenerated basing on methods' headers. MongoRepository<Film, String> contains methods like insert (Create), find (Read), save (Update) and remove (Delete). Extending methods in FilmRepository interface, findTop10BySeen and findBySeen, are implemented by their name and parameter analysis. Convetion of naming lets compiler to create implementation of methods by itself.

As we used Spring framework in the project, we could use integrated Dependency Resolving system, based on Annotations. By simply marking property or constructor as @Autowired, the runtime will resolve all necessary dependancies once the application is booted.

Smart libraries

Spring Boot made project configuration very simple. With help of Maven librabries repository, all needed plugins can downloaded and attached to project in few seconds. Dependent libriaries, required by project, are listed between dependencies tag, inside pom.xml file.

Here's declaration of need to download library for JSON serialisation.

<dependency>
	<groupId>com.googlecode.json-simple</groupId>
	<artifactId>json-simple</artifactId>
	<version>1.1.1</version>
</dependency>

All controllers use Spring MVC annotations, where we can define how the resource can be accessed, by GET, POST, PUT or DELETE.

Here is an example of action creating film in repository.

@RequestMapping(method = RequestMethod.POST)
public ResponseEntity<Film> addFilm(@Valid @RequestBody Film film) {
    Film created = this.filmRepository.insert(film);
    return new ResponseEntity<>(created, HttpStatus.CREATED);
}

First, the posted in request body film, is being validated. If the model is not valid, the code 400 is being returned. If all goes well, the created entity, with assigned ID property is returned along with HttpStatus.CREATED = 201 status.

Having created entity, we are able to delete it, by placing ID as parameter in request URL and using DELETE method.

@RequestMapping(value = "/{id}", method = RequestMethod.DELETE)
public ResponseEntity<Film> deleteFilm(@PathVariable("id") String id){
    this.filmRepository.delete(id);
    return new ResponseEntity<>(HttpStatus.OK);
}

Setup

I'll show how to setup project in the fastest way I know. Sorry linux-lovers, I'm going to achieve this on Windows. Sorry Windows-lovers, I'm going to use cmd for most of the time.

First open your command line as Administrator user. Download chocolatey packet manager (just copy-paste&enter the first script on that page). Install git, Java SDK, JRE, Maven, NodeJS, MongoDB.

cinst git jdk8 jre8 maven nodejs mongodb -y

You can do this all manually (it means, with mouse) too, but why shouldn't we make it faster and simpler?

The installation may take several minutes. Go make yourself a cup of coffee. Afterall, we develop in Java!

When it's done, install one more thing from npm, unless you use IIS or any other HTTP server.

npm install -g local-web-server

When it's done, run MongoDB server. Just type mongod inside cmd and you should see something like this.

...
2016-02-04T13:49:03.859+0100 I CONTROL  [initandlisten] MongoDB starting : pid=10180 port=27017 dbpath=C:\data\db\ 64-bit host=DAYSTATE-PC
...

Note that C:\data\db\ is default path where MongoDB instance files are stored.

Then, open new cmd window and clone this repository onto your disk. When it's done, change to api directory.

git clone https://github.com/pizycki/RememberMe 
cd RememberMe/api/

To compile source code and run Tomcat instance with working API, simply type mvn spring-boot:run -X (paramter -X is optional but gives us more info what's going on).

It should explode with a lot of text, but in the end you should see those two lines. They mean that your API enpoint is up and running.

2016-02-04 13:55:47.363  INFO 9828 --- [           main] s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat started on port(s): 8080 (http)
2016-02-04 13:55:47.368  INFO 9828 --- [           main] izzy.sggw.RememberMeApplication          : Started RememberMeApplication in 4.018 seconds (JVM running for 7.989)

The last, but not least, is to host your SPA. Open new cmd (yup, that's already the third) and go to client directory. You can find it the root of the project.

When you're there, type ws --spa .\index.html. You should see short output

serving at http://DAYSTATE-PC:8000, http://192.168.0.15:8000, http://192.168.94.1:8000, http://192.168.154.1:8000, http://127.0.0.1:8000

And you're done!

Open your browser and navigate to one of the URL visible in the 3rd cmd. Here is mine: http://DAYSTATE-PC:8000.

There you go, your Remember Me! up and running.

Congratulations.

Screens

Browsing catalog Creating film Film with basic details Rating film Listing all films to watch Deleting film