% Lokální makra patří do hlavního souboru, ne sem.
% Tady je mám výjimečně proto, že chci nechat hlavní soubor bez maker,
% která jsou jen pro tento dokument. Uživatelé si pravděpodobně budou
% hlavní soubor kopírovat do svého dokumentu.

\def\ctustyle{{\tenss CTUstyle}}
\def\ttb{\tt\char`\\} % pro tisk kontrolních sekvencí v tabulkách

\label[Implementation]
\chap{Implementation}

In this part, I would like to go through a high-level overview of the implementation of the front-end and the back-end of the application. 

\label[Front-end]
\sec Front-end

This segmented would be dedicated mostly to the high fidelity model of the application. All the designs were created in an application called Sketch.

\medskip \clabel[Front-end uml diagram]{Front-end uml diagram}
\picw= 14.3 cm \cinspic img/uml.png
\caption/f Front-end uml diagram
\medskip

\label[Navigation]
\secc Navigation

When it comes to navigation withing in the application the user can expect the same style as in other modern application. This means he could use gestures to go back in the way of swiping from left edge of the screen to the right. 

The other thing about navigation is that the application is branched into two ways. The first branch being the movies and second, the cinemas, represented by icons on the bottom of the screen. When switching between branches the application remembers the state of it when left so you can switch branches without losing the last opened screen. 

When it comes to ways you can go back, there are three ways. The first was already mentioned the gesture swiping from left to right. The other is in the left corner of each screen is a back button to go one screen back. And the last one is when tapping the navigation icon on the bottom will also return you one screen back

\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}
\phantom{somespacesomespacesomespace}

\break
\label[Movie screen]
\secc Movie screen

This screen displays all the movies that are currently in the cinema. It will also be the first screen that gets loaded when a user opens the application.

\medskip \clabel[Movie screen design]{Movie screen design}
\picw=7.5 cm \cinspic img/movie.png
\caption/f Movie screen design
\medskip

The movies are sorted by their rating (gotten from CSFD) from top to bottom and user has the option to search through them using the search bar. When searching the number of posters displayed narrows by the search and if no film meets the criteria no poster will be displayed.

From this screen, the user has few options to go to. The first one is to pick a certain film this will take the user to a screen that contains information about the screenings for that film. The next would be to on the bottom to select the next tab that is the cinemas. This will take the user to a list of all the cinemas that are available to view.

\break
\label[Cinema screen]
\secc Cinema screen

The cinema screen will contain a list of all the cinemas available in the app. The user will be able to search to narrow the number of displayed cinemas.

\medskip \clabel[Cinema screen design]{Cinema screen design}
\picw=7.5 cm \cinspic img/cinema.png
\caption/f Cinema screen design
\medskip

The list will be ordered based on the name, with a future option to sort by distance to the cinema. Also, the user will see some films in the cinema itself.

When a cinema is selected the user will be redirected to a screen with a list of the screenings in a similar way that would be if he picked a film.

\break
\label [Film screenings screen]
\secc Film screenings screen

This screen will be displayed when a film is selected from the movie screen. It will contain a poster and basic information about the movie itself. Then the user will have an option to move on to a screen with even more information about it. 

\medskip \clabel[Film screenings screen design]{Film screenings screen design}
\picw=7.5 cm \cinspic img/filmdet.png
\caption/f Film screenings screen design
\medskip

The main focus of this screen is the list of all the screenings. They will be ordered in chronological order showing just the screenings that are still available. Each line of the list will contain the cinema name, time and a button to see information about the cinema. When a line is selected, a web browser opens with a reservation. 

\break
\label [Cinema screenings screen]
\secc Cinema screenings screen

The cinema screen has a similar look and feel like the film screening screen. They are representing similar data to user but from a different end. Instead of displaying cinemas it displays film that is being screened in the cinema.

\medskip \clabel[Cinema screenings screen design]{Cinema screenings screen design}
\picw=7.5 cm \cinspic img/cinemascren.png
\caption/f Cinema screenings screen design
\medskip

The navigation is also similar. Displaying the name of the film, time of screening and a button to display more information about the film itself. With the addition of a map with the location of the cinema. With the option to open a navigation application.

\break
\label [Movie detail screen]
\secc Movie detail screen

This screen contains more detail information about a film. At the moment it will contain director name, actors, genre, rating, length, and film description. In the future, there is a possibility to add film trailer and marketing pictures for the film.

\medskip \clabel[Film detail screen design]{Film detail screen design}
\picw=7.5 cm \cinspic img/filmdetail.png
\caption/f Film detail screen design
\medskip

\break
\label[Back-end]
\sec Back-end
As mentioned in the design chapter the back end will have two main functions, and that is to provide information to the front end and aggregate data for screenings and films.

For the programming language, I've decided to choose Python as a scripting language it's easier to prototype and quickly iterate on designs, and each segment can be run independently to minimize the overall complexity of the application. As a framework, I've chosen Flask [8] as it makes very easy to implement endpoints and simplifies connection to a database. When it comes to the database, I've chosen MongoDB [9] as a NoSQL database it enables to work with the database programmatically, and when inserting into it, we don't have to always know all the fields.

The first part of the back-end would be a basic API application for the front-end to get information. This would directly get preprepared data from the database. 

\medskip \clabel[Component diagram]{Component diagram}
\picw=16 cm \cinspic img/comp.png
\caption/f Component diagram
\medskip

\break 
The second part is much more complicated because needs to get information about screenings and the films themselves. For that, we have two options. The first is to have an API of the cinema to get all the information, this way it's very easy and quick to go through all the information and map it to films and save into our database. The second way is to parse the website HTML to get all the necessary information a gives us the power to have information for any cinema. The downside of this is not safe, and any change on the side of the cinema will mean a needed change on our end. 

In this project, both ways are used. For Cinemacity chain the API approach is used and for Cinestar the HTML parsing approach. The source is different, but the work with data is similar. The data is mapped in the same way for both so after there is everything collected we could merge both cinemas so there would no duplicates, also dates for the cinemas are dynamically set. The films get added information about in Czech. 

All of this is automated so if the application gets deployed these scripts can be scheduled to run every day, and we would have up to date data with all the information.

\medskip \clabel[Example of a film in database ]{Example of a film in database }
\picw=17 cm \cinspic img/db.png
\caption/f Example of a film in database 
\medskip


\break
\label [Application sequence]
\sec Application sequence

The communication between front-end and back-end will be done via API. All the data will be preloaded into the application when it starts and then no more communication with the back-end would be necessary. 

\medskip \clabel[Sequence diagram]{Sequence diagram}
\picw=16 cm \cinspic img/seq.png
\caption/f Sequence diagram
\medskip






