Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
Improve texts
  • Loading branch information
carlosmobile authored Feb 13, 2024
1 parent 986b83b commit d52e2b3
Showing 1 changed file with 22 additions and 25 deletions.
47 changes: 22 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
# Cine app example

This demo app support iPhone and iPad layouts and implements the next screens:
This demo app supports iPhone and iPad layouts and implements the following screens:
<br>
- <b>Movie list with search and tags:</b>

The first screen consists of a list of movies. The header of the view has a list of tags to search grouped movies by country. The list shows movie images in a Grid. All Grid images are implemented with an automatic resize. The Grid was implemented as lazy memory and images caches don't use device memory.
The first screen displays a list of movies. The view's header includes a list of tags for searching movies grouped by country. The list presents movie images in a grid, with all grid images featuring automatic resizing. The grid is implemented to be memory-efficient, and image caching does not utilize device memory.

You can search a movie too by title of the movie or director (or one of directors) of the movie.
Users can also search for a movie by the movie's title or by the director (or one of the directors).

[MovieListView](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/MovieListView.swift): Movie list principal view. It load tags and child tag view.<br>
[MovieListViewModel](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/MovieListViewModel.swift): Movie list viewModel.<br>
[MovieListView](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/MovieListView.swift): The main movie list view. It loads tags and child tag views.<br>
[MovieListViewModel](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/MovieListViewModel.swift): The view model for the movie list.<br>

Tags:<br>
[TagType](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/Tags/TagType.swift): To get selected tag view.<br><br>
Tags Views:<br>
[MoviesView](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/TagsViews/MoviesView.swift): To load a tag view A-Z with animated search textfield.<br>
[MoviesViewModel](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/TagsViews/MoviesViewModel.swift): The view model to movies tag view.<br>
[GroupedMoviesView](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/TagsViews/GroupedMoviesView.swift): To show each country tag. This view show movies grouped by tag region countries<br>
[GroupedMoviesViewModel](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/TagsViews/GroupedMoviesViewModel.swift): The viewModel to grouped movies tag view.
[MoviesView](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/TagsViews/MoviesView.swift): Loads an A-Z tag view with an animated search text field.<br>
[MoviesViewModel](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/TagsViews/MoviesViewModel.swift): The view model for the movies tag view.<br>
[GroupedMoviesView](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/TagsViews/GroupedMoviesView.swift): Displays movies grouped by country tag. This view shows movies grouped by tag region countries.<br>
[GroupedMoviesViewModel](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/TagsViews/GroupedMoviesViewModel.swift): The view model for the grouped movies tag view.
<br>

Once you click on a movie poster of the list you will be redirected to another screen with more specific information about the movie.
Clicking on a movie poster in the list redirects you to another screen with more specific information about the movie.
<br>
- <b>Movie detail:</b>

The second screen will display more detailed information about a movie. Showing the title, year, lenght in minutes, country or countries are from, score, director or directors, writers, actors and synopsis. The synopsis has a vertical scroll.
The second screen provides detailed information about a movie, including the title, year, length in minutes, countries of origin, score, directors, writers, actors, and synopsis. The synopsis is scrollable vertically.

[MovieDetailView](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/MovieDetailView.swift): To show movie detail view. Its present like a modal view with shadows.<br>
[MovieDetailViewModel](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/MovieDetailViewModel.swift): The viewModel to movie detail view.<br>
[MovieDetailView](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/MovieDetailView.swift): Displays the movie detail view. It is presented as a modal view with shadows.<br>
[MovieDetailViewModel](https://github.com/carlosmobile/Cine/blob/main/CineApp/CineApp/Scenes/MovieDetailViewModel.swift): The view model for the movie detail view.<br>
<br><br>

Example gifs with iPhone 14 Xcode simulator:
Expand All @@ -45,23 +45,21 @@ Example gif with iPad Pro (11 inch) Xcode simulator:

# Architecture

I use native <b>SwiftUI MVVM</b>, of course this is a flexible architecture and I can implement it in a basic or advanced way as needed.
This project supports UIKit and SwiftUI views. In case that we need to solve some issue with SwiftUI we can solve it using ViewModel fully compatible with both UIKit and SwiftUI views.<br><br>
MVVM is a "reactive" architecture. Its a perfect fit to use SwiftUI with Combine. The view reacts to changes on the view model, and the view model updates its state based on data from the model.
I use native <b>SwiftUI MVVM</b>, which is a flexible architecture that can be implemented in a basic or advanced manner as needed. This project supports both UIKit and SwiftUI views. In case of issues with SwiftUI, we can address them using the ViewModel, which is fully compatible with both UIKit and SwiftUI views.<br><br>
MVVM is a "reactive" architecture, ideally suited for use with SwiftUI and Combine. The view reacts to changes in the view model, and the view model updates its state based on data from the model.

<p align="left">
<img src="readme_images/basic-mvvm.png" width="700" height="382"/>
</p>

MVVM involves three layers:

- The <b>model layer</b> contains data access objects and validation logic. It knows how to read and write data, and it notifies the view model when data changes.<br><br>
- The <b>view model layer</b> contains the state of the view and has methods to handle user interaction. It calls methods on the model layer to read and write data, and it notifies the view when the model’s data changes.<br><br>
- The <b>view layer</b> styles and displays on-screen elements. It doesn’t contain business or validation logic. Instead, it binds its visual elements to properties on the view model. It also receives user inputs and interaction, and it calls methods on the view model in response.<br><br>
As a result, the view layer and model layer are completely decoupled. The view layer and model layer only communicate with the view model layer but we can binding model to view with Combine if we need to use reactive programming way.

This architecture has been used because it's considered an advance architecture that modulates the code and respect the clean code, SOLID principles and the best practices.
- The <b>model layer</b> contains data access objects and validation logic. It is responsible for reading and writing data, and it notifies the view model when data changes.<br><br>
- The <b>view model layer</b> contains the state of the view and has methods to handle user interaction. It calls methods on the model layer for data access and updates the view when the model's data changes.<br><br>
- The <b>view layer</b> is responsible for styling and displaying on-screen elements without containing business or validation logic. It binds visual elements to the view model's properties, receives user inputs and interactions, and calls methods on the view model in response.<br><br>
As a result, the view and model layers are completely decoupled, communicating only through the view model layer. However, data binding between the model and view can be achieved with Combine for reactive programming.

This architecture is adopted for its advanced approach, facilitating modular code and adherence to clean code principles, SOLID principles, and best practices.
<br><br>

# Tools
Expand Down Expand Up @@ -131,8 +129,7 @@ This app is developed using [GifFlow](https://www.atlassian.com/git/tutorials/co
<br><br>
# Design

The app try to implement nice design and UI/UX, respecting the iOS native elements as Apple guidelines and have a correct layout and implement the safe areas to correct view in last iPhone models.

The app aims to implement appealing design and UI/UX, adhering to iOS native elements as per Apple guidelines, ensuring a proper layout, and incorporating safe areas for optimal viewing on the latest iPhone models.
<br><br>

# Getting Started
Expand All @@ -142,5 +139,5 @@ Running in Xcode 14.2 and iOS 16.3 Written in Swift 5

# Next..

Add network layer with real API service, add favourites, persistence of data, etc..
Add network layer with real API service, add favourites, data persistence, etc..
<br><br>

0 comments on commit d52e2b3

Please sign in to comment.