Funcionalidades extra

Let's start by improving our application by adding favorites functionality. This is a crucial step to offer a more personalized experience to users. Let's modify our code so that cards can be marked as favorites. We will find the heart icon code in our Cards views and adjust it to make it more maintainable. It is essential to create a specific function that manages these actions, so we will optimize our project.

How to create a reusable bookmark button?

By implementing reusable functions, we facilitate future maintenance tasks in the code. To achieve this, we must follow the following steps:

1. Create a function: we copy the code of the heart icon and convert it into a function called favoriteButton. This function will return a view containing the heart icon logic.

   func favoriteButton() -> some View { // Favorite button code }

2. Modify images: in our card views, replace the heart image with the new favoriteButton function, making sure it depends on the isFavorite state of the object.

   Image(systemName: card.isFavorite ? "heart.fill" : "heart")

3. Add gestures: to interact with the icon, we introduce a tap gesture that executes the change of state of the favorite.

   .onTapGesture { // Code to change the state of favorite }

How to handle the state change at the application level?

As the favorite change must be reflected in the whole application, it must be configured from the AppInfo:

1. Define a closure: we add a closure called onToggleFavorite to the top of the view to handle the state change and declare it as optional to avoid errors.

2. Add function in AppInfo: we need a function called toggleFavorite that will change the state of isFavorite.

   func toggleFavorite(for card: Card) { if let index = cards.firstIndex(of: card) { cards[index].isFavorite.toggle() } }

3. Call the function from the views: in the list of card views, we assign the closure to trigger the state change.

   info.toggleFavorite(for: card)

How to customize the icon of the application?

Although our application has almost all the functionalities ready, a key visual aspect is the icon. A good design can make the difference and make our application stand out.

1. Locate the Assets: first, we must access the assets folder of our project, where we will find the option for the app icon.

2. Configure the icon: we change the Appearances option to None to offer more simplicity and then we drag our design to this space.

Designing an icon can be an exciting creative challenge, and if you are looking to improve your design skills, remember that the Graphic Design School at Platzi offers many useful resources. Always remember that every detail counts in the world of app development, so make your app stand out!