Download Swift Cab Booking App Project<\/h3>\n
Please download the source code of Swift Cab Booking App from the following link: Swift Cab Booking App Project Code.<\/strong><\/a><\/p>\n Step 1:<\/strong> Create a new SwiftUI project in Xcode.<\/p>\n Step 2:<\/strong> Set Up Firebase Firestore<\/p>\n Step 3:<\/strong> Designing the MapView<\/p>\n Step 4:<\/strong> Designing the SearchView<\/p>\n Step 5:<\/strong> Designing the BookedView<\/p>\n Step 6:<\/strong> Designing the Loader View<\/p>\n Step 7:<\/strong> Designing the Home View<\/p>\n Step 8:<\/strong> Connecting Views in ContentView<\/p>\n a.<\/strong> Open Xcode and click on the \u201cCreate a new Xcode Project\u201d option.<\/p>\n b.<\/strong> Now select the platform as \u201ciOS\u201d and the application type as \u201cApp\u201d.<\/p>\n c.<\/strong> Now, Enter the name of the app, and organization identifier, and select SwiftUI interface for `building the UI of the app. Also, select Swift as a language for creating the app.<\/p>\n d.<\/strong> Select the folder where you want to save the app and click on Create.<\/p>\n e.<\/strong> Now your project is ready for development, and you will see something like below.<\/p>\n a.<\/strong> Go to the Firebase console<\/a>\u00a0and create a new project.<\/p>\n b.<\/strong> Complete All the Steps in the order it guides you to complete<\/p>\n c.<\/strong> After Completing all the tasks, your project in Xcode will look like this.<\/p>\n d.<\/strong> Enable Firestore for your project by selecting the Firestore Database in then following the guide. Now your Firestore will be created and will look like below.<\/p>\n Make sure you have the necessary Firebase configurations added to your Xcode project.<\/p>\n a.<\/strong> Create a new Swift file called “MapView.swift”<\/strong> in your project. a.<\/strong> Create a new Swift file called “SearchView.swift”<\/strong> in your project. a.<\/strong> Create a new Swift file called “BookedView.swift”<\/strong> in your project. a.<\/strong> Create a new Swift file called “Loader.swift”<\/strong> in your project. a.<\/strong> Create a new Swift file called “Home.swift”<\/strong> in your project. a.<\/strong> Open the “ContentView.swift”<\/strong> file. Output<\/strong><\/p>\nSteps to Create a Cab Booking App Project Using Swift<\/h3>\n
Step 1: Create a new SwiftUI project in Xcode.<\/h4>\n
![\"create](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/create-a-new-xcode-project.webp\")
<\/a><\/p>\n![\"application](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/application-type-as-app.webp\")
<\/a><\/p>\n![\"select](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/select-swiftui-interface.webp\")
<\/a><\/p>\n![\"save](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/save-the-app.webp\")
<\/a><\/p>\n![\"project](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/project-is-ready-for-development-scaled.webp\")
<\/a><\/p>\nStep 2: Set Up Firebase Firestore<\/h4>\n
![\"firebase](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/firebase-console-scaled.webp\")
<\/a><\/p>\n![\"complete](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/complete-all-steps-scaled.webp\")
<\/a><\/p>\n![\"after](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/after-completing-all-tasks-scaled.webp\")
<\/a><\/p>\n![\"enable](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/enable-firebase-scaled.webp\")
<\/a><\/p>\nStep 3: Designing the MapView<\/h4>\n
\nb.<\/strong> Define a SwiftUI view named MapView<\/strong> as given below code.<\/p>\nimport SwiftUI\r\nimport MapKit\r\nimport CoreLocation\r\nstruct MapView : UIViewRepresentable {\r\n \r\n \/\/ Create a coordinator to handle interactions between the MapView and the rest of the app\r\n func makeCoordinator() -> Coordinator {\r\n return MapView.Coordinator(parent1: self)\r\n }\r\n \r\n \/\/ Bindings to various properties that are used to update the UI\r\n @Binding var map : MKMapView\r\n @Binding var manager : CLLocationManager\r\n @Binding var alert : Bool\r\n @Binding var source : CLLocationCoordinate2D!\r\n @Binding var destination : CLLocationCoordinate2D!\r\n @Binding var name : String\r\n @Binding var distance : String\r\n @Binding var time : String\r\n @Binding var show : Bool\r\n \r\n \/\/ Create the initial MapView\r\n func makeUIView(context: Context) -> MKMapView {\r\n \/\/ Set up the delegate and gesture recognizer\r\n map.delegate = context.coordinator\r\n manager.delegate = context.coordinator\r\n map.showsUserLocation = true\r\n let gesture = UITapGestureRecognizer(target: context.coordinator, action: #selector(context.coordinator.tap(ges:)))\r\n map.addGestureRecognizer(gesture)\r\n return map\r\n }\r\n \r\n \/\/ Update the MapView\r\n func updateUIView(_ uiView: MKMapView, context: Context) {\r\n }\r\n \r\n \/\/ The coordinator handles interactions between the MapView and the rest of the app\r\n class Coordinator : NSObject,MKMapViewDelegate,CLLocationManagerDelegate{\r\n \r\n var parent : MapView\r\n \r\n init(parent1 : MapView) {\r\n parent = parent1\r\n }\r\n \r\n \/\/ Handle changes to the user's location authorization status\r\n func locationManager(_ manager: CLLocationManager, didChangeAuthorization status: CLAuthorizationStatus) {\r\n if status == .denied{\r\n self.parent.alert.toggle()\r\n }\r\n else{\r\n self.parent.manager.startUpdatingLocation()\r\n }\r\n }\r\n \r\n \/\/ Handle updates to the user's location\r\n func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {\r\n let region = MKCoordinateRegion(center: locations.last!.coordinate, latitudinalMeters: 10000, longitudinalMeters: 10000)\r\n self.parent.source = locations.last!.coordinate\r\n self.parent.map.region = region\r\n }\r\n \r\n \/\/ Handle taps on the MapView\r\n @objc func tap(ges: UITapGestureRecognizer){\r\n let location = ges.location(in: self.parent.map)\r\n let mplocation = self.parent.map.convert(location, toCoordinateFrom: self.parent.map)\r\n \r\n \/\/ Create a point annotation for the destination\r\n let point = MKPointAnnotation()\r\n point.subtitle = \"Destination\"\r\n point.coordinate = mplocation\r\n \r\n \/\/ Update the destination and name properties\r\n self.parent.destination = mplocation\r\n let decoder = CLGeocoder()\r\n decoder.reverseGeocodeLocation(CLLocation(latitude: mplocation.latitude, longitude: mplocation.longitude)) { (places, err) in\r\n if err != nil{\r\n print((err?.localizedDescription)!)\r\n return\r\n }\r\n self.parent.name = places?.first?.name ?? \"\"\r\n point.title = places?.first?.name ?? \"\"\r\n self.parent.show = true\r\n }\r\n \r\n \/\/ Calculate the directions between the source and destination\r\n let req = MKDirections.Request()\r\n req.source = MKMapItem(placemark: MKPlacemark(coordinate: self.parent.source))\r\n req.destination = MKMapItem(placemark: MKPlacemark(coordinate: mplocation))\r\n let directions = MKDirections(request: req)\r\n directions.calculate { (dir, err) in\r\n if err != nil{\r\n print((err?.localizedDescription)!)\r\n return\r\n }\r\n \r\n \/\/ Update the distance and time properties\r\n let polyline = dir?.routes[0].polyline\r\n let dis = dir?.routes[0].distance as! Double\r\n self.parent.distance = String(format: \"%.1f\", dis \/ 1000)\r\n let time = dir?.routes[0].expectedTravelTime as! Double\r\n self.parent.time = String(format: \"%.1f\", time \/ 60)\r\n \r\n \/\/ Add the polyline to the map\r\n self.parent.map.removeOverlays(self.parent.map.overlays)\r\n self.parent.map.addOverlay(polyline!)\r\n self.parent.map.setRegion(MKCoordinateRegion(polyline!.boundingMapRect), animated: true)\r\n }\r\n \r\n \/\/ Add the point annotation to the map\r\n self.parent.map.removeAnnotations(self.parent.map.annotations)\r\n self.parent.map.addAnnotation(point)\r\n }\r\n \r\n \/\/ Render the polyline on the map\r\n func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {\r\n let over = MKPolylineRenderer(overlay: overlay)\r\n over.strokeColor = .red\r\n over.lineWidth = 3\r\n return over\r\n }\r\n }\r\n}<\/pre>\n\n
Step 4: Designing the SearchView<\/h4>\n
\nb.<\/strong> Define a SwiftUI view named SearchView<\/strong> as given below code.<\/p>\nimport SwiftUI\r\nimport CoreLocation\r\nimport MapKit\r\nstruct SearchView: View {\r\n \r\n \/\/ State and Binding properties used in the view\r\n @State var result : [SearchData] = []\r\n @Binding var show : Bool\r\n @Binding var map : MKMapView\r\n @Binding var source : CLLocationCoordinate2D!\r\n @Binding var destination : CLLocationCoordinate2D!\r\n @Binding var name : String\r\n @Binding var distance : String\r\n @Binding var time : String\r\n @State var txt = \"\"\r\n @Binding var detail : Bool\r\n \r\n var body: some View {\r\n \r\n \/\/ A ZStack is used to layer views on top of each other\r\n ZStack {\r\n \r\n \/\/ A gradient background color is added to the ZStack\r\n LinearGradient(gradient: Gradient(colors: [.blue, .purple]), startPoint: .topLeading, endPoint: .bottomTrailing)\r\n .edgesIgnoringSafeArea(.all)\r\n \r\n \/\/ A GeometryReader is used to get the size of the screen\r\n GeometryReader{_ in\r\n \r\n \/\/ A VStack is used to stack views vertically\r\n VStack{\r\n \r\n \/\/ A custom SearchBar view is added to the VStack\r\n SearchBar(map: self.$map, source: self.$source, destination: self.$destination, result: self.$result, name: self.$name, distance: self.$distance, time: self.$time,txt: self.$txt)\r\n \r\n \/\/ If there is text in the search bar, a list of search results is displayed\r\n if self.txt != \"\"{\r\n \r\n List(self.result){i in\r\n \r\n VStack(alignment: .leading){\r\n \r\n Text(i.name)\r\n \r\n Text(i.address)\r\n .font(.caption)\r\n }\r\n .onTapGesture {\r\n \r\n \/\/ When a search result is tapped, the destination is updated and the map is updated\r\n self.destination = i.coordinate\r\n self.UpdateMap()\r\n self.show.toggle()\r\n }\r\n }\r\n .frame(height: UIScreen.main.bounds.height \/ 2)\r\n }\r\n }\r\n .padding(.horizontal, 25)\r\n }\r\n \/\/ A background color is added to the GeometryReader to dismiss the keyboard when tapped\r\n .background(Color.black.opacity(0.2).edgesIgnoringSafeArea(.all)\r\n .onTapGesture {\r\n self.show.toggle()\r\n })\r\n \r\n \/\/ If the detail property is true, a QRCodeView is displayed\r\n if self.detail {\r\n QRCodeView()\r\n }\r\n }\r\n }\r\n \r\n \/\/ A function to update the map with the new destination\r\n func UpdateMap(){\r\n \r\n \/\/ A point annotation is created for the destination\r\n let point = MKPointAnnotation()\r\n point.subtitle = \"Destination\"\r\n point.coordinate = destination\r\n \r\n \/\/ A CLGeocoder is used to get the name of the destination\r\n let decoder = CLGeocoder()\r\n decoder.reverseGeocodeLocation(CLLocation(latitude: destination.latitude, longitude: destination.longitude)) { (places, err) in\r\n \r\n if err != nil{\r\n \r\n print((err?.localizedDescription)!)\r\n return\r\n }\r\n \r\n \/\/ The name of the destination is set as the title of the point annotation\r\n self.name = places?.first?.name ?? \"\"\r\n point.title = places?.first?.name ?? \"\"\r\n \/\/ The detail property is set to true to display the QRCodeView\r\n self.detail = true\r\n }\r\n \r\n \/\/ A MKDirections.Request is created to get the route from the source to the destination\r\n let req = MKDirections.Request()\r\n req.source = MKMapItem(placemark: MKPlacemark(coordinate: self.source))\r\n req.destination = MKMapItem(placemark: MKPlacemark(coordinate: destination))\r\n \r\n let directions = MKDirections(request: req)\r\n \r\n directions.calculate { (dir, err) in\r\n \r\n if err != nil{\r\n \r\n print((err?.localizedDescription)!)\r\n return\r\n }\r\n \r\n \/\/ The polyline for the route is added to the map\r\n let polyline = dir?.routes[0].polyline\r\n \r\n \/\/ The distance and time for the route are calculated and set as properties\r\n let dis = dir?.routes[0].distance as! Double\r\n self.distance = String(format: \"%.1f\", dis \/ 1000)\r\n \r\n let time = dir?.routes[0].expectedTravelTime as! Double\r\n self.time = String(format: \"%.1f\", time \/ 60)\r\n \r\n \/\/ The previous overlays are removed and the new polyline is added to the map\r\n self.map.removeOverlays(self.map.overlays)\r\n self.map.addOverlay(polyline!)\r\n \r\n \/\/ The map is centered on the polyline\r\n self.map.setRegion(MKCoordinateRegion(polyline!.boundingMapRect), animated: true)\r\n }\r\n \r\n \/\/ The previous annotations are removed and the new point annotation is added to the map\r\n self.map.removeAnnotations(self.map.annotations)\r\n self.map.addAnnotation(point)\r\n }\r\n}\r\nstruct SearchBar : UIViewRepresentable {\r\n \r\n \/\/ Binding properties used in the view\r\n @Binding var map : MKMapView\r\n @Binding var source : CLLocationCoordinate2D!\r\n @Binding var destination : CLLocationCoordinate2D!\r\n @Binding var result : [SearchData]\r\n @Binding var name : String\r\n @Binding var distance : String\r\n @Binding var time : String\r\n @Binding var txt : String\r\n \r\n func makeCoordinator() -> Coordinator {\r\n \r\n return SearchBar.Coordinator(parent1: self)\r\n }\r\n \r\n func makeUIView(context: Context) -> UISearchBar {\r\n \r\n \/\/ A UISearchBar is created and configured\r\n let view = UISearchBar()\r\n view.autocorrectionType = .no\r\n view.autocapitalizationType = .none\r\n view.delegate = context.coordinator\r\n \r\n return view\r\n }\r\n \r\n func updateUIView(_ uiView: UISearchBar, context: Context) {\r\n \r\n \r\n }\r\n \r\n class Coordinator : NSObject,UISearchBarDelegate{\r\n \r\n var parent : SearchBar\r\n \r\n init(parent1 : SearchBar) {\r\n \r\n parent = parent1\r\n }\r\n \r\n func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {\r\n \r\n \/\/ The text in the search bar is set as a property\r\n self.parent.txt = searchText\r\n \r\n \/\/ A MKLocalSearch.Request is created to get the search results\r\n let req = MKLocalSearch.Request()\r\n req.naturalLanguageQuery = searchText\r\n req.region = self.parent.map.region\r\n \r\n let search = MKLocalSearch(request: req)\r\n \r\n DispatchQueue.main.async {\r\n \r\n \/\/ The previous search results are removed\r\n self.parent.result.removeAll()\r\n }\r\n \r\n search.start { (res, err) in\r\n \r\n if err != nil{\r\n \r\n print((err?.localizedDescription)!)\r\n return\r\n }\r\n \r\n \/\/ The search results are added to the result array\r\n for i in 0..<res!.mapItems.count{\r\n \r\n let temp = SearchData(id: i, name: res!.mapItems[i].name!, address: res!.mapItems[i].placemark.title!, coordinate: res!.mapItems[i].placemark.coordinate)\r\n \r\n self.parent.result.append(temp)\r\n }\r\n }\r\n }\r\n }\r\n}\r\nstruct SearchData : Identifiable {\r\n \r\n \/\/ Properties for the search data\r\n var id : Int\r\n var name : String\r\n var address : String\r\n var coordinate : CLLocationCoordinate2D\r\n}\r\nstruct QRCodeView: View {\r\n var body: some View {\r\n \r\n \/\/ A view to display the QR code\r\n ZStack {\r\n Color.white\r\n Text(\"QR Code\")\r\n .font(.title)\r\n }\r\n .frame(width: 200, height: 200)\r\n .cornerRadius(10)\r\n .shadow(radius: 10)\r\n }\r\n}<\/pre>\n\n
Step 5: Designing the BookedView<\/h4>\n
\nb.<\/strong> Define a SwiftUI view named BookedView<\/strong> as given below code.<\/p>\nimport SwiftUI\r\nimport Firebase\r\nstruct Booked : View {\r\n \r\n \/\/ Binding properties that are passed in from the parent view\r\n @Binding var data : Data\r\n @Binding var doc : String\r\n @Binding var loading : Bool\r\n @Binding var book : Bool\r\n \r\n var body: some View{\r\n \r\n \/\/ A ZStack is used to layer views on top of each other\r\n ZStack{\r\n \r\n \/\/ A white background color is added to the ZStack\r\n Color.white\r\n \r\n \/\/ A VStack is used to stack views vertically\r\n VStack{\r\n \r\n \/\/ A Spacer is added to center the QR code\r\n Spacer()\r\n \r\n \/\/ An image view is created with the QR code data\r\n Image(uiImage: UIImage(data: self.data)!)\r\n .resizable()\r\n .frame(width: 250, height: 250)\r\n \r\n \/\/ A text label is added to display the booking ID\r\n Text(\"Booking ID : \\(self.doc)\")\r\n .fontWeight(.bold)\r\n .padding(.top)\r\n \r\n \/\/ Another Spacer is added to push the button to the bottom of the screen\r\n Spacer()\r\n \r\n \/\/ A button is added to cancel the booking\r\n Button(action: {\r\n \r\n \/\/ The loading and book properties are toggled\r\n self.loading.toggle()\r\n self.book.toggle()\r\n \/\/ A reference to the Firestore database is created\r\n let db = Firestore.firestore()\r\n \/\/ The document with the specified ID is deleted\r\n db.collection(\"Booking\").document(self.doc).delete { (err) in\r\n if err != nil{\r\n \/\/ If there is an error, it is printed to the console\r\n print((err?.localizedDescription)!)\r\n return\r\n }\r\n \/\/ The loading property is toggled again\r\n self.loading.toggle()\r\n }\r\n }) {\r\n \r\n \/\/ The button text is added\r\n Text(\"Cancel\")\r\n .foregroundColor(.white)\r\n .padding(.vertical, 10)\r\n .frame(width: UIScreen.main.bounds.width \/ 2)\r\n }\r\n \/\/ The button is styled with a gradient background, white text, and a capsule shape\r\n .background(LinearGradient(gradient: Gradient(colors: [.blue, .purple]), startPoint: .leading, endPoint: .trailing))\r\n .clipShape(Capsule())\r\n .padding(.top, 25)\r\n }\r\n .padding()\r\n }\r\n }\r\n}<\/pre>\n\n
Step 6: Designing the Loader View<\/h4>\n
\nb.<\/strong> Define a SwiftUI view named Loader view<\/strong> as given below code.<\/p>\nimport SwiftUI\r\nstruct Loader : View {\r\n \r\n \/\/ A state property that toggles the animation\r\n @State var show = false\r\n \r\n var body: some View{\r\n \r\n \/\/ A GeometryReader is used to get the size of the parent view\r\n GeometryReader{_ in\r\n \r\n \/\/ A VStack is used to stack views vertically\r\n VStack(spacing: 20){\r\n \r\n \/\/ A Circle view is created with a red stroke\r\n Circle()\r\n .trim(from: 0, to: 0.7)\r\n .stroke(Color.red, style: StrokeStyle(lineWidth: 4, lineCap: .round))\r\n .frame(width: 30, height: 30)\r\n .rotationEffect(.init(degrees: self.show ? 360 : 0))\r\n .onAppear {\r\n \r\n \/\/ The Circle view is animated using a repeatForever animation\r\n withAnimation(Animation.default.speed(0.45).repeatForever(autoreverses: false)){\r\n \r\n self.show.toggle()\r\n }\r\n }\r\n \r\n \/\/ A text label is added to display a loading message\r\n Text(\"Please Wait....\")\r\n }\r\n .padding(.vertical, 25)\r\n .padding(.horizontal, 40)\r\n .background(Color.white)\r\n .cornerRadius(12)\r\n }\r\n .background(Color.black.opacity(0.25).edgesIgnoringSafeArea(.all))\r\n }\r\n}<\/pre>\n\n
Step 7: Designing the Home View<\/h4>\n
\nb.<\/strong> Define a SwiftUI view named Home view<\/strong> as given below code.<\/p>\nimport SwiftUI\r\nimport MapKit\r\nimport CoreLocation\r\nimport Firebase\r\nstruct Home : View {\r\n \r\n \/\/ Map view and location manager\r\n @State var map = MKMapView()\r\n @State var manager = CLLocationManager()\r\n \r\n \/\/ Alert for location permission\r\n @State var alert = false\r\n \r\n \/\/ Coordinates for source and destination\r\n @State var source : CLLocationCoordinate2D!\r\n @State var destination : CLLocationCoordinate2D!\r\n \r\n \/\/ Name of destination\r\n @State var name = \"\"\r\n \r\n \/\/ Distance and time to destination\r\n @State var distance = \"\"\r\n @State var time = \"\"\r\n \r\n \/\/ Show booking details\r\n @State var show = false\r\n \r\n \/\/ Show loading indicator\r\n @State var loading = false\r\n \r\n \/\/ Show booking confirmation\r\n @State var book = false\r\n \r\n \/\/ Document ID for booking\r\n @State var doc = \"\"\r\n \r\n \/\/ QR code data for booking\r\n @State var data : Data = .init(count: 0)\r\n \r\n \/\/ Show search view\r\n @State var search = false\r\n \r\n var body: some View{\r\n \r\n ZStack{\r\n \r\n ZStack(alignment: .bottom){\r\n \r\n VStack(spacing: 0){\r\n \r\n HStack{\r\n \r\n VStack(alignment: .leading, spacing: 15) {\r\n \r\n \/\/ Show destination or pick a location\r\n Text(self.destination != nil ? \"Destination\" : \"Pick a Location\")\r\n .font(.title)\r\n \r\n if self.destination != nil{\r\n \r\n \/\/ Show name of destination\r\n Text(self.name)\r\n .fontWeight(.bold)\r\n }\r\n }\r\n \r\n Spacer()\r\n \r\n \/\/ Show search button\r\n Button(action: {\r\n \r\n self.search.toggle()\r\n \r\n }) {\r\n \r\n Image(systemName: \"magnifyingglass\")\r\n .foregroundColor(.black)\r\n }\r\n \r\n }\r\n .padding()\r\n .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top)\r\n .background(Color.white)\r\n \r\n \/\/ Show map view\r\n MapView(map: self.$map, manager: self.$manager, alert: self.$alert, source: self.$source, destination: self.$destination, name: self.$name,distance: self.$distance,time: self.$time, show: self.$show)\r\n .onAppear {\r\n \r\n \/\/ Request location permission\r\n self.manager.requestAlwaysAuthorization()\r\n \r\n }\r\n .ignoresSafeArea(.all)\r\n }\r\n \r\n if self.destination != nil && self.show{\r\n \r\n ZStack(alignment: .topTrailing){\r\n \r\n VStack(spacing: 20){\r\n \r\n HStack{\r\n \r\n VStack(alignment: .leading,spacing: 15){\r\n \r\n \/\/ Show destination name, distance and time\r\n Text(\"Destination\")\r\n .fontWeight(.bold)\r\n Text(self.name)\r\n \r\n Text(\"Distance - \"+self.distance+\" KM\")\r\n \r\n Text(\"Expexted Time - \"+self.time + \"Min\")\r\n }\r\n \r\n Spacer()\r\n }\r\n \r\n \/\/ Show book now button\r\n Button(action: {\r\n \r\n self.loading.toggle()\r\n \r\n self.Book()\r\n \r\n }) {\r\n \r\n Text(\"Book Now\")\r\n .foregroundColor(.white)\r\n .padding(.vertical, 10)\r\n .frame(width: UIScreen.main.bounds.width \/ 2)\r\n }\r\n .background(LinearGradient(gradient: Gradient(colors: [.blue, .purple]), startPoint: .leading, endPoint: .trailing))\r\n .clipShape(Capsule())\r\n \r\n }\r\n \r\n \/\/ Show close button\r\n Button(action: {\r\n \r\n self.map.removeOverlays(self.map.overlays)\r\n self.map.removeAnnotations(self.map.annotations)\r\n self.destination = nil\r\n \r\n self.show.toggle()\r\n \r\n }) {\r\n \r\n Image(systemName: \"xmark\")\r\n .foregroundColor(.black)\r\n }\r\n }\r\n .padding(.vertical, 10)\r\n .padding(.horizontal)\r\n .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom)\r\n .background(Color.white)\r\n .cornerRadius(20)\r\n .overlay(\r\n RoundedRectangle(cornerRadius: 20)\r\n .stroke(Color.black, lineWidth: 1)\r\n )\r\n .padding(.horizontal, 20)\r\n }\r\n }\r\n \r\n \/\/ Show loading indicator\r\n if self.loading{\r\n \r\n Loader()\r\n }\r\n \r\n \/\/ Show booking confirmation\r\n if self.book{\r\n \r\n Booked(data: self.$data, doc: self.$doc, loading: self.$loading, book: self.$book)\r\n }\r\n \r\n \/\/ Show search view\r\n if self.search{\r\n \r\n SearchView(show: self.$search, map: self.$map, source: self.$source, destination: self.$destination, name: self.$name, distance: self.$distance, time: self.$time,detail: self.$show)\r\n }\r\n }\r\n .alert(isPresented: self.$alert) { () -> Alert in\r\n \r\n \/\/ Show location permission error\r\n Alert(title: Text(\"Error\"), message: Text(\"Please Enable Location In Settings !!!\"), dismissButton: .destructive(Text(\"Ok\")))\r\n }\r\n }\r\n \r\n \/\/ Book a ride\r\n func Book(){\r\n \r\n let db = Firestore.firestore()\r\n let doc = db.collection(\"Booking\").document()\r\n self.doc = doc.documentID\r\n \r\n let from = GeoPoint(latitude: self.source.latitude, longitude: self.source.longitude)\r\n let to = GeoPoint(latitude: self.destination.latitude, longitude: self.destination.longitude)\r\n \r\n \/\/ Save booking details to Firestore\r\n doc.setData([\"name\":\"DataFlair\",\"from\":from,\"to\":to,\"distance\":self.distance,\"fair\": (self.distance as NSString).floatValue * 1.2]) { (err) in\r\n \r\n if err != nil{\r\n \r\n print((err?.localizedDescription)!)\r\n return\r\n }\r\n \r\n \/\/ Generate QR code for booking\r\n let filter = CIFilter(name: \"CIQRCodeGenerator\")\r\n filter?.setValue(self.doc.data(using: .ascii), forKey: \"inputMessage\")\r\n \r\n let image = UIImage(ciImage: (filter?.outputImage?.transformed(by: CGAffineTransform(scaleX: 5, y: 5)))!)\r\n \r\n self.data = image.pngData()!\r\n \r\n \/\/ Show booking confirmation\r\n self.loading.toggle()\r\n self.book.toggle()\r\n \r\n }\r\n }\r\n}\r\nstruct HomeView_Previews: PreviewProvider {\r\n static var previews: some View {\r\n Home()\r\n }\r\n}<\/pre>\n![\"home](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/home-view-1-scaled.webp\")
<\/a><\/p>\n\n
Step 8: Connect Views in ContentView<\/h4>\n
\nb.<\/strong> Replace the default implementation of the ContentView struct with a new implementation that returns an instance of the Home<\/strong> view.<\/p>\nimport SwiftUI\r\nstruct ContentView: View {\r\n var body: some View {\r\n \r\n \/\/ The Home view is displayed\r\n Home()\r\n }\r\n}\r\nstruct ContentView_Previews: PreviewProvider {\r\n static var previews: some View {\r\n \r\n \/\/ The ContentView is displayed in the preview\r\n ContentView()\r\n }\r\n}<\/pre>\n![\"connecting](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/connecting-views-scaled.webp\")
<\/a><\/p>\n![\"cab](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/cab-booking-app-output.webp\")
<\/a><\/p>\n
![\"swift](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/swift-cab-booking-app-output.webp\")
<\/a><\/p>\n![\"firebase](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/07\/firebase-strores-fares-details-scaled.webp\")
<\/a><\/p>\n