Skip to content

iOS app that allows you to search for any comic character and save your favorites in a list.

License

Notifications You must be signed in to change notification settings

silviaespanagil/my-comics-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 

Repository files navigation

iOS App: My Comics

Swift exercise

¡Hola mundo!

In my Swift learning journey my mentor and I decided to do an app using the Comic Vine API. This API gives a lot of information about comic characters so we decided to do a search app where you can look for any character and add it into a favorite list ⭐️

App view after you do a search on the search bar Character detail, after you click on a character. Shows all the api information: photo, gender, description, powers and also renders a heart to make it favorite Favorites view

Screen.Recording.2021-11-02.at.13.10.04.mov

Some Requirements 📋

  • Create a Swift App
  • App must be feed via API
  • Main components must be tested
  • Add and render a favorite list
  • User must be able to search characters in a search bar
  • There must be at least one filter other than the search

Extra features 🌟

  • Allow users to erase the search input
  • Add a tab bar
  • Support dark mode 🌙

Built with 🔨

  • XCode
  • SwiftUI
  • Combine
  • CoreData

Development ⌨️

This has been a team work between my mentor and I, as the app was and is part of my Swift learning path 📱. So we started managing the API for so he used and explain to me some of the Combine functionalities. With the API communication working properly we started shaping all the views that are stored in the "Scenes" and "View" folders.

Here is important to tell that, as a good practice, our view's structs do not have any logic in them, for so we have worked with the View Models. This way the view's structs are as clean and possible and they do one thing: to render. And the View Models are the brain 🧠 behind, sending in all the possible information, or logic needed to do so correctly.

The view can be separated in five main components:

🦹🏽‍♀️🦸 Character List 🦹🏽‍♀️🦸🏻‍♂️

This view shows the image and name of the character searched. This is the most basic view and is the only one that has no viewModel attached to it.

App screenshot of Mafalda showing the character list view

👁 Character Detail 👁

As is name say, is the detailed view. When the user click on a character, this view will be rendered showing more information of it. In this view the user will also find a heart, clicking on it will "favorite" the character. This action will allow the user to later find, all its favorites characters in the "Favorite" tab.

🔎 Search bar 🔎

This is our main view as the search action is necessary in order to call the API and show the user the information. This view comes with three main components: - The TextField() itself that will take the user input that we will search in the API to later render it in the Character's components. - The delete search icon, an icon that will be shown after the user starts writing and that allows it to delete the input - The Picker that allows the user to filter the characters by gender. This filter will only be available after the user has done a search and results are rendered

❤️ Favorites ❤️

This is the favorites view. Any character that has been favorited by the user will be shown here

👆 Tab Bar 👆

As a navigation treat we implemented a tab bar that makes it easier to the user to move between the search area and the favorite list.

Screenshot 2021-11-02 at 13 54 06

As the views where ready we went a little further. My mentor created a Data Base using CoreData. This Data Base saves all the characters that the user favorited in order to later render them in the favorite area. Finally we went into the testing, we decided to test all the main components and functions.

Some things I really like 💖

Delete search icon

This is a really small functionality but for the user is a very interesting one. Also I do think that this kind of details really make the app to look and feel really polished.

The delete search icon is a little icon that will be shown in the search bar as soon as the user starts typing. If clicked before the search it will erase whatever the user was writting and empty the field. However if clicked after the user has done a search, it will not only erase the text field input it will also clean up the characters area.

Screen.Recording.2021-11-02.at.14.06.45.mov

Testing

Prior to this project my experience in doing unitary test has been almost unexistant so this was a rollercoaster 🎢 but I had a lot of fun. For the testing my mentor did 4 components to help me understand a little bit more about unit testing, but also for me to have some guidance on how and what to test. After it I was able to do more than 20 test! I'm still in awe about this.

🌙 Dark mode 🌙

As we know, users can activate in their devices dark mode, however the app has certain views that do not cope well with it. So, as a way to support the Dark Mode we used the colorScheme environment key that allow us to detect which mode is enable and to render the views acording it. This was really easy to do but yet I found it very satisfactory as the result is truly great

Screen.Recording.2021-11-03.at.16.04.30.mov

My challenges 🚩

I definetly need to keep digging into the testing as I still find it really hard and takes me lots of time. Combine a CoreData are huge challenges, they are SUPER important, and without them the app would just not work. Both the Combine and CoreData implementations were done by my mentor so I would definetly love to practice them on my own in order to be able to develop them by myself.

Want to clone this repo? 🐑

If you want to clone this repo please feel free to. Notice that there's a file called "Constants" if you want the code to compile correctly you will need to change the constant "apiKey" assign it your own API key 🔑 .

struct Constants {
    
    static let baseURL = "https://comicvine.gamespot.com/api/"
    static let apiKey = "yourApiKey"
}

Codefactor

CodeFactor

About

iOS app that allows you to search for any comic character and save your favorites in a list.

Topics

Resources

License

Stars

Watchers

Forks

Languages