Description

ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ

ΕΡΓΑΣΙΑ 2

(ομαδική, 2 ατόμων)

Το ακόλουθο API για ταινίες δουλεύει απλά με query params και ένα API key:
http://www.omdbapi.com/#usage

Το key το εκδίδει ο καθένας με το mail του.

Η εργασία που καλείστε να υλοποιήσετε αποτελεί μία σελίδα με τα ακόλουθα:

1. ένα search-bar όπου ο χρήστης ψάχνει με τίτλο ταινίας και εμφανίζεται το ακόλουθο σύντομο αποτέλεσμα: • το Poster,
• μία σύντομη περιγραφή,
• meta data,
• λοιπές πληροφορίες.

Επίσης στο search ΔΕΝ πρέπει να υπάρχει κουμπί, αλλά όταν ο χρήστης σταματήσει να γράφει, τότε να φέρνει τα αποτελέσματα.

2. Όταν ο χρήστης πατά “περισσότερα” πρέπει να εμφανίζεται ολόκληρη η περιγραφή και τα παραπάνω στοιχεία.

Καλείστε να χρησιμοποιήσετε plain JavaScript, HTML5 και CSS για τα παράθυρα, την εμφάνιση, τα κουμπιά και την λειτουργικότητα.

Αν θέλετε, καλείστε να χρησιμοποιήσετε ajax ή/και jQuery για Request και DOM Manipulation. Αν θέλετε utility library καλείστε να εξερευνήσετε την Lodash.

Έπειτα, καλείστε να υλοποιήσετε την επέκταση σε back-end του ανωτέρω front-end. Το back-end πρέπει να έχει τις ανωτέρω λειτουργικότητες:

• Να υπάρχει λειτουργικότητα για δημιουργία λογαριασμού (login-logout) με ένα email και ένα κωδικό.
1

• Να μπορείτε να κάνετε login με το account που δημιουργήσατε για τον χρήστη.
• Με βάση το account να μπορείτε να κάνετε save ταινίες (bookmarks) στο profile σας. o Όταν θα ψάχνετε μια ταινία θα πρέπει να επεκτείνετε το frontend για να κάνει save την ταινία που ψάξατε και κάποιο από τα αποτελέσματα που επεστράφησαν. o Το save θα γίνεται μέσω του id ή title της ταινίας (θα γίνεται save μόνο αυτή η πληροφορία 1-πολλά). o Να υπάρχει μια σελίδα My bookmarks που όταν θα μπαίνει ο χρήστης θα βλέπει τις ταινίες που έσωσε, με το να ξαναφέρνει από το API τις ταινίες. Δεν χρειάζεται να κάνετε save τις ταινίες.
• Βάλετε ό,τι βάση δεδομένων θέλετε (DB). O server μπορεί να είναι ένας απλός Tomcat.
• Χρησιμοποιείστε Spring MVC. Μπορείτε να χρησιμοποιήσετε ό,τι IDE θέλετε (IntelliJ, Eclipse, Netbeans).
o Π.χ. χρησιμοποιήστε “Create new Spring Project”
• Να κατασκευάσετε ένα mini web app σε Spring που όταν χρησιμοποιείται η λειτουργικότητα save να αποθηκεύει το id της ταινίας για τον συγκεκριμένο χρήστη και όταν ανοίγεται το My bookmarks να τραβάει το front end από το back-end τα movie Ids και να τα ζητάει από το API.
o Την σελίδα που έχετε φτιάξει στην Εργασία θα πρέπει να την σερβίρει o Tomcat. o Το backend θα τρέχει μέσω Tomcat. Η εφαρμογή θα τρέχει όλη από localhost.

Προσοχή:
• Η διασύνδεση μεταξύ front-end και back-end πρέπει να γίνεται μέσω ενός REST API που θα σχεδιάσετε και υλοποιήσετε όπως παρουσιάζεται στο μάθημα.
• Αν θέλετε μπορείτε να χρησιμοποιήσετε το Spring Boot.

Διευκρίνηση:
• Mini Web App σημαίνει ότι καλείστε να φτιάξετε ενα front-end σε Javascript για επικοινωνία με το API και, μέσα στο ίδιο front end, θα μπορείτε να κάνετε save/like κάποιες ταινίες. • Τα saves/likes καθώς και τα logins πρέπει να σώζονται στο backend που θα φτιάξετε. Θα δουλεύει δηλαδή συνεργατικά το front-end με το API που δίνεται και το backend που θα φτιάξετε.
2