Cities to Visit, Travel Planner
This is an app that allows you to plan a trip to one of the available cities.
Fall 2022
Project Overview
This project provides a display of the available cities or destinations that the user can view and plan their trip to. One of my goals was to use the Core Data Model to be able to save the information inputted by the user when planning their trip, then display the plan under an account or page for the user to view again. They are also able to edit the dates or notes, as well as to delete if they no longer want to plan that trip.
The Challenge
One of the challenges that I encountered during my project was using the Core Data Model as it was something new and different from what we did in class. When saving the information inputted by the user or when trying to display this information, my project would crash or the File View would display blank. In order to get this to work, I had to figure out when to include a PersistanceController for context and the FetchRequest throughout my files. Another challenge that I encountered was when filling out the form to plan a trip. For my destination field, I tried to use a Picker to display the destination options but although it displayed all options it would not switch between them. Unfortunately, I had to resort to a TextField, which was not ideal for the destination option.
The Solution
I used a project from a homework assignment, where we created are own array list, as my starting point. It includes a list of cities and when clicking on one of the cities, it shows a modal view with the city name, rating, and image. From here, I wanted to implement a description of the city, an option to plan a trip to the chosen city, and a page that will allow the user to view all the saved plans.
I did not like the initial list of available destinations, as it looked plain and the look was not appealing. I followed Chapter 27 to make a scroll view with the DragGesture() in order to swipe and view the available cities and it also added an animation when swiping between each card. It also allows to click on each card and open up a modal view for each city.
Since the modal view didn’t have much information nor any design, I went ahead and placed the image at the top, followed by the city name, country, and a like button, then I added a description of the selected city, and a button to start planning a trip.
When clicking on the button to plan a trip, it showed a new page or modal view of a form. The user here has the option to pick the destination, the depart date, return date, and the option to add notes. When making this page, I was attempting to use a picker option for the user to choose and save the destination. It would show the list of destination options but it would not change or save the chosen option and it would go back to the first option which was Paris. I resorted to the text field which was not ideal nor my preferred form of choosing the destination. Another issue that I encountered was that I kept getting the error “Preview Crashed” but I was not getting any errors in my code. So the only way I could view the form was going to the ContentView file or the CityDetailView file. I then realized that in my CoreDataModel, one of the variables was missing, which was the tripId variable that kept track of the saved trips.
Going back to the home page, I changed the look of the title by removing the .navigationTitle(…) and init() {…} code that modified the color and font of the title and used an HStack instead. I added a symbol as a button to mimic a user profile or account and be able to view the saved plans.
Here is the Saved Trips page, the Paris trip is programmed in but when testing my code I planned the Mexico City trip. Here I was also having trouble getting the saved user plan information as I was missing the FetchRequest that gets the information so the page would show up just with the title and color. When I did add it, I placed it in the ContentView file instead of the SavedTripsView file, in which the saved trip plans showed up but kept giving me issues when trying to clicked on each individual plan. After figuring out these issues, I added the edit and delete buttons that show up on each trip.
When clicking on the saved plans that show on the Saved Trips page, I added a Detail View for each of the trips. I wasn’t sure about including this page as when making the edit option, the form would come back blank but I couldn’t figure out why. But I then realized that it only occurred when previewing it on the SavedDetailView file and when previewing it in the ContentView file, the form would include the information inputted by the user. In this detail view, I wanted to add the image of the city the user planned the trip to but since the Destination has to be typed in instead of having the option to select it, the image will only show if the user writes the city correctly otherwise the detail view will not include an image.
Results
At first, I thought that I was not going to be able to figure out how to use the CoreDataModel but after some research and some playing around with the code, I was successful in implementing this feature into my project. I was able to figure out how it works and understand how to use this model to save user data and fetch the data to display the information back to the user to make changes or delete it. It is definitely something that I would like to continue to expand my knowledge on. For a future instance, I would like to incorporate the Picker() and figure out how to get it to work with the CoreDataModel.