This demo app support iPhone and iPad layouts and implements the next screens:
- Login Keys Screen:
This screen let user to insert API keys in a secure way. The logical is like a login. The user needs to add the public and private keys. If the user write a wrong public or private key, a shake animation is displayed.
- Marvel character list with search:
The first screen consists of a list of Marvel characters. The list shows an image, the name and description of each Marvel character. All texts in this view are implemented with an automatic resize.
The list is paginated and you can see the actual character load from total in the right navigation view.
You can search a Marvel Character in entire Marvel API or filter for the first words of the name like, for exemple: "iro". The search logical has a class to implement a timer delay to avoid massive search when user write a word. The logical search made a 2 second delay between searchs but if the user stop to write the search is launched. With the search result you can see a bottom view with the numeric information of the result searching. The result it is paginated too.
Once you click on a Marvel character of the list you will be redirected to another screen with more specific information called Character Detail.
- Marvel character detail:
The second screen will display more detailed information about a Marvel character. Showing the name, description, and all the Comics and Series with two horizontal scroll views inside. The name and description have an automatic resized. And also implements a way to add pagination in both scrolls to save user internet data with infinite scroll. You can tap on a comic or serie to navigate to another modal view and show it detail.
- Marvel expand detail:
The last screen is a extend detail for comics and series information.
Example gifs with iPhone 13 Xcode simulator:
Example gif with iPad Pro (9.7 inch) Xcode simulator:
The architecture used to this app is VIPER based on my own templates this templates are based in a classic VIPER twisted with Clean Swift architecture based on SOLID principles introduced by Robert C. Martin (Uncle Bob).
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.
RxSwift is added to VIPER architecture to improve the readability and maintainability of code. The app use RxSwift in the next situations:
Login Keys Screen scene uses RxSwift to control that the user write at least a character in each textField also to control spinner loader among others.
Character list and character detail scene uses RxSwift to update data from interactor and to show or hide the spinner loader when app calls the example JSON services as well to control if the user have an internet connection among others.
- STLoaderSpinner: Helper class to show custom spinner loader.
- ShakingTextField: Helper to show error animation in logon keys scene.
- AutoSearchTimer: To implement a timer delay to avoid massive search when user write a word. The logical search made a 2 second delay between searchs but if the user stop to write the search is launched.
- SearchFooter: Helper to show the number of character that you are showing and the total number of characters filter in the searching.
- BorderBottom+UITextField: To change the design of the Login Keys scene .
- CustomAlert+UIViewController: Helper to show a custom alert to block app when internet fails until user retry connection.
- Localized+String: To improve the LocalizedString sintax.
Structs:
- Character: To model Marvel character.
- CharacterItems: To model Marvel character comics and series.
- MarvelUrl: To model marvel url format.
- MarvelImage: To model marvel image format.
- Alert: Struct to show to network alert error responses.
- APIConfiguration: Struct and enum to centralized network url and others.
- APIRequest: Class to implement request configuration.
- APIResponse: Extension to decode API response.
- APIError: Enum to handle error type.
- APIClient: Class to implement URLSession.
- APIKeys: Class to implement Marvel API keys security and requirements.
- MVReachability: Class to control internet reachability.
This app test Mocked API, Presenters, Interactors, Wireframes, Models, etc.. with XCTests and UITests.
Test Coverage 91%
The app code follows the Ray Wenderlich Swift Style Guide.
The app uses in "support" logical folder a ThemeManager.swift class to support centralized colors and images. It also uses multilanguage with Localizable.strings to centralized all the text in the app.
- RxSwift: Used to implement reactive programming in a easy way.
- KeychainAccess: Used to implement secure way to saved Marvel API keys.
- Kingfisher: Used to implement an easy way to download images from server with animation spinner and fade.
This app is developed using GifFlow, using only git commands and tool sourcetree.
The app try to implement nice design and UI/UX, respecting the iOS native elements as Apple guidelines and have a correct autolayout in its Xibs and implement the safe areas to correct view in last iPhone models. The app doesn't use storyboards and implement the SOLID Interface segregation principle.
Running in Xcode 13.2.1 and iOS 15.2 Written in Swift 5
Mock API server with tool like Swifter to launch UITests with mock data.