Deliverfly

• Delivery app that fetches a list of restaurants from Firebase.
• When tapping on a restaurant can see a list of food items on the Restaurant view.
• When tapping on an item, you can choose the quantity of the item.
• Some foods can be customized with up to three additional ingredients.
• After choosing your desired food items, you can move to the Order view.
• After placing an order, it is added to Firebase database and you see a success screen.
• When you go to the History view, the list of placed orders is fetched.
• You can click on each order to see what it contains.

Content

• Lesson 1 - Setup & Splash View
• Lesson 2 - Home View
• Lesson 3 - Restaurant View
• Lesson 4 - Ingredient, Food View, Navigation
• Lesson 5 - Item & Order
• Lesson 6 - Firebase
• Lesson 7 - History View
• Lesson 8 - Status, Discount, Flavor

Resources

• UI/UX Designs (Figma)
• Icon, Assets, and data.json (Google Drive)

Views & Previews

Views	Previews
HomeView	RestaurantPreview
RestaurantView	FoodPreview
OrderView	ItemPreview
StatusView	StatusPreview
HistoryView	OrderPreview
FoodView	N/A

Utilities

• Components
• Navigation
• Firebase

Three Restaurants

• In-N-Out Burger
• Five Guys
• Subway

Lesson 1 - Setup & Splash View

Task	Time
Introductions & Deliverfly demo	20 min
Setup Github & Fork	50 min
Break	10 min
[Task 0] Create Project + Import Icon & Assets	10 min
[Task 1] SplashView	30 min

Installing Xcode

1. Check macOS version -> apple (top-left corner) -> About This Mac -> macOS (last item on bottom) -> must be Sonoma 14+
2. Check if Xcode is installed -> if not Google "Xcode" -> find in App Store and start downloading
3. Agree to Terms & Conditions -> type user password
4. Select Platform to develop for: iOS (e.g. iOS 17.4 --- 7.23 GB)
5. Wait for download to complete

Join Slack

1. Join via the invite link (TUMO-SwiftUI)
2. Sign in or make an account

Explore Figma

Explore & explain Figma designs here

Setup GitHub & Fork

We'll setup a new Github repository and download Fork together. Students who don't have a Github account will make one.

Fork Download

1. Google "fork" https://git-fork.com
2. Click on Download Fork for Mac
3. Double-click and drag "dmg" file to "Applications" folder
4. Open Fork, right-click icon -> Options -> Keep in Dock

Add GitHub Account to Fork

1. Top-left corner Fork -> Accounts... -> GitHub
2. Log in -> Authentication Type: Log in on GitHub.com (OAuth) (not Personal Access Token) -> Login: username or email -> input password
3. Enable notifications in menu bar -> Close
4. Go to Fork -> Settings... -> Git -> input your name or nickname -> ⚠️ make sure the email matches your github email

Create New Repository

1. Go to github.com -> New (top-left green button)
2. Repository name: Deliverfly-GivenName-FamilyName (e.g. Deliverfly-Neli-Shahapuni)
3. Repository can be Public or Private (your choice)
4. Enable Add a README file
5. Add .gitignore -> template: Swift
6. Create Repository (green button)

Create Develop Branch & Make Default

1. Go to main (top-left gray dropdown)
2. Find or create branch... -> type "develop" (all lowercase)
3. Click: Create branch develop from main
4. Go to Settings (list on top, last item) -> Default Branch (currently: main) -> click: switch to another branch (2 arrows) -> choose "develop" from dropdown -> Update

Clone Repository to Fork

1. Go to repository -> click Code (top-right green button) -> Copy URL (post the URL via Slack channel)
2. Open Fork -> File -> Clone...
3. Location: /Documents OR /Desktop -> Open
4. Click Clone

New branch: feature/splash-view

1. Go to fork & checkout 'develop'
2. Right-click 'develop' -> New Branch... -> name it feature/splash-view

[Task 0] Create Project + Import Icon & Assets

1. Create New Project... -> App -> Next
2. Product Name: Deliverfly
3. Team: FirstName LastName (Personal Team) (e.g. Neli Shahapuni (Personal Team)) - it can also be the apple account or current user on the computer
4. Organization Identifier: givennamefamilyname (e.g. nelishahapuni)
5. Interface: SwiftUI
6. Language: Swift
7. Storage: None
8. Disable Include Tests
9. Save project inside the folder named Deliverfly-GivenName-FamilyName (e.g. Deliverfly-Neli-Shahapuni)

Explore Xcode

0. Increase Font size (if needed)
1. Show File Navigator
2. Run the app for the first time (click on the triangle, top-left) or Command + R
3. Click on the rectangle to stop running (wait for simulator to load if 1st time, don't close it)

Import Assets

1. Go to Google Drive -> click on "Deliverfly" dropdown -> download Google Drive
2. Go to downloads -> Double-click to unzip
3. Go to Xcode -> Assets -> Drag 'Assets' folder to list
4. Click on 'AppIcon' and drag the "icon" image
5. Delete "Preview Content" folder
6. Run the app (click on the triangle, top-left)
7. When you get an error, click on the error, double-click on the "Deliverfly/Preview Content" and click on the minus (-) to remove it

Commit changes

2. Make a commit on the feature/splash-view branch named [Task 0] Create Project + Import Icon & Assets -> Commit
3. Click Push (UP arrow) -> Push

[Task 1] SplashView

1. Go to Xcode -> Find 'Deliverfly' folder (top-left) -> right-click -> New File... -> SwiftUI View -> name it 'SplashView'
2. Go to 'SplashView' file & follow along (code should look like this)
3. Click on the 'DeliverflyApp' file -> replace 'ContentView' with 'SplashView'.
4. Click on 'ContentView' file -> right-click 'delete' -> Move to Trash
5. Inside 'DeliverflyApp' file & follow along (code should look like this)
6. Choose simulator (top-middle of Xcode) -> Run app (wait for simulator to load if 1st time)

Commit changes

1. Stage changes & make commit named: [Task 1] SplashView -> commit
2. Push to remote (arrow up 'push' button)

Open Pull Request (from feature/splash-view to develop)

1. Go to github.com -> find repository (list on left) -> click on 'Compare and pull request' (if you can't see it, then go to 'Pull Requests' -> New Pull Request (green button))
2. base: develop <- compare: feature/splash-view
3. Click on 'Create pull request'
4. Click on 'Merge pull request' -> click on 'Confirm merge'
5. Go to Fork -> click 'Fetch' (arrow down outline) -> go to Branches -> right-click Checkout 'develop' -> Click 'Pull' (arrow down fill)

Lesson 2 - Home View

Task	Time
[Task 2] RestaurantPreview	40 min
[Task 3] HomeView	40 min
Break	10 min
[Task 4] Add Five Guys and Subway	15 min (independently)
Check Work	15 min

New branch: feature/home-view

1. Go to fork & checkout 'develop'
2. Right-click 'develop' -> New Branch... -> name it feature/home-view

[Task 2] RestaurantPreview

1. Double-click on 'Home' -> New File... -> SwiftUI View -> Next -> RestaurantPreview -> Create
2. Add headerImage, restaurantName, menuItems, and details (code should look like this)
3. Add image, name, items, rating, time (code should look like this)

Make commit

1. Stage changes & make commit named: [Task 2] RestaurantPreview -> commit

[Task 3] HomeView

1. Go to Xcode -> Find 'Deliverfly' folder (top-left) -> right-click -> New File... -> SwiftUI View -> name it 'HomeView'
2. Select both 'SplashView' and 'HomeView' -> right click 'New Group from Selection' -> name it 'Views'
3. Open 'HomeView' file & follow along (code should look like this)
4. Inside 'DeliverflyApp' replace Text("home") with HomeView()

Make commit

1. Stage changes & make commit named: [Task 3] HomeView -> commit
2. Push to remote (arrow up 'push' button)

[Task 4] Add Five Guys and Subway

• Add 2 more 'RestaurantPreview's with the following info:

image	name	items	rating	time
.inNOut	In-N-Out Burger	Double Double - Chocolate Shake - French Fries	5.0	20
.fiveGuys	Five Guys	Cheeseburger - Fries - Milkshake - Sandwich	4.7	45
.subway	Subway	Wrap - Footlong - Salad - Cookie	3.5	50

• Check Work together

Make commit

1. Stage changes & make commit named: [Task 4] Add Five Guys and Subway -> commit
2. Push to remote (arrow up 'push' button)

Open Pull Request

1. Go to github.com -> respository -> feature/home-view had recent pushes X seconds ago -> click Compare and pull request (title is not important)
2. base: developer <- compare: feature/home-view
3. Click on 'Create pull request'
4. Click on 'Merge pull request' -> click on 'Confirm merge'
5. Go to Fork -> Fetch -> right-click 'develop' -> Check out 'develop' -> Pull

Lesson 3 - Restaurant View

Task	Time
[Task 5] Food model	10 min
[Task 6] FoodPreview	20 min (independently)
Check Work	20 min
Break	10 min
[Task 7] Restaurant model	10 min
[Task 8] RestaurantView	20 min (independently)
Check Work	30 min

New branch: feature/restaurant-view

1. Go to fork & checkout 'develop'
2. Right-click 'develop' -> New Branch... -> name it feature/restaurant-view

[Task 5] Food model

1. Go to Xcode -> Find 'Deliverfly' folder (top-left) -> right-click -> New File... -> Swift File -> name it 'Food'
2. Inside the 'Food' file, follow along so that the code looks like this
3. Copy the Food data.

[Task 6] FoodPreview

1. New File... -> SwiftUI View -> name it 'FoodPreview'
2. Select 'RestaurantPreview' and 'FoodPreview' -> right click 'New Group from Selection' -> name it 'Previews'
3. Inside 'FoodPreview' add the property let food: Food and add .previewData to the #Preview
4. In the place for the ingredients add a Text("Standard"), which will be modified later
5. Make the FoodPreview following the Figma design here (20 min)
6. Check the work together (code should look like this)
7. Commit [Task 6] FoodPreview

[Task 7] Restaurant model

1. New File... -> Swift File -> named 'Restaurant'
2. Select the 'Food' and 'Restaurant' files -> right click 'New Group from Selection' -> name it 'Models'
3. Create 'Restaurant' model (should look like this), edit HomeView (like this) and RestaurantPreview (like this)
4. Stage & make commit [Task 7] Restaurant model

[Task 8] RestaurantView

1. Select 'Views' folder -> right-click -> New File... -> SwiftUI View -> named 'RestaurantView'
2. Follow the figma design here (20 min)
3. Check work (your code should look like this)
4. Right-click on the 'Deliverfly' folder -> New File... -> SwiftUI View -> named 'Components' (code should look like this)
5. Stage changes and commit [Task 8] RestaurantView

Open Pull Request (from feature/restaurant-view to develop)

1. Go to github.com -> find repository (list on left) -> click on 'Compare and pull request' (if you can't see it, then go to 'Pull Requests' -> New Pull Request (green button))
2. base: develop <- compare: feature/restaurant-view
3. Click on 'Create pull request'
4. Click on 'Merge pull request' -> click on 'Confirm merge'
5. Go to Fork -> click 'Fetch' (arrow down outline) -> go to Branches -> right-click Checkout 'develop' -> Click 'Pull' (arrow down fill)

Lesson 4 - Ingredient, Food View, Navigation

Task	Time
[Task 9] Ingredient enum	10 min
[Task 10] FoodView	10 min (setup) + 30 min (independently)
Break	10 min
Check Work	30 min
Navigation Logic	10 min
[Task 11] Navigation	20 min

New branch: feature/food-view

1. Go to fork & checkout 'develop'
2. Right-click 'develop' -> New Branch... -> name it feature/food-view

[Task 9] Ingredient enum

1. Select 'Models' folder -> right-click -> New File... -> Swift File -> named 'Ingredient'
2. Create 'Ingredient enum (code should look like this)
3. Uncomment ingredients (command + /) in the 'Food' model (code should look like this)
4. Go to 'FoodPreview' -> var hasExtras: some View -> check if the ingredients for that item is empty (code should look like this)
5. Stage changes and commit [Task 9] Ingredient enum

[Task 10] FoodView

1. Select 'Views' folder -> right-click -> New File... -> SwiftUI View -> named 'FoodView'
2. Setup properties (dismiss, selectedIngredients, quantity, total, food)
3. Setup: @ViewBuilder func foodView(_ item: Food) -> some View and and .sheet to ScrollView (code should look like this)
4. Work independently following the figma design here
5. Check work together (code should look like this)
6. Stage changes and commit [Task 10] FoodView

[Task 11] Navigation

1. Select the 'Deliverfly' folder -> create a new Swift File named 'Navigation'
2. Inside Navigation, create a @Published var navPath, and three funcs: goTo(), goBack(), goToRoot() - code should look like this
3. Inside 'DeliverflyApp' create an @ObservedObject var navigation = Navigation() and NavigationStack (with .environmentObject(navigation)) - code should look like this
4. Add EnvironmentObject navigation inside 'HomeView' and go to restaurant view - code should look like this
5. Add EnvironmentObject navigation inside 'RestaurantView' and go back - code should look like this
6. Commit [Task 11] Navigation

Open Pull Request (from feature/food-view to develop)

1. Go to github.com -> 'Compare and pull request' (or 'Pull Requests' -> New Pull Request)
2. base: develop <- compare: feature/food-view
3. Click on 'Create pull request'
4. Click on 'Merge pull request' -> click on 'Confirm merge'
5. Go to Fork -> click 'Fetch' (arrow down outline) -> go to Branches -> right-click Checkout 'develop' -> Click 'Pull' (arrow down fill)

Lesson 5 - Item & Order

Task	Time
[Task 12] Item model	10 min
[Task 13] Order model	10 min
[Task 14] ItemPreview	10 min (independently)
[Task 15] OrderView	30 min (independently)
Break	10 min
Check work for all tasks	50 min

New branch: feature/order-view

1. Go to fork & checkout 'develop'
2. Right-click 'develop' -> New Branch... -> name it feature/food-view

[Task 12] Item model

1. Select 'Models' folder -> right-click -> New File... -> Swift File -> named 'Item'
2. Add properties, the code should look like this
3. Stage and commit changes [Task 12] Item model

[Task 13] Order model

1. Select 'Models' folder -> right-click -> New File... -> Swift File -> named 'Order'
2. Add properties, the code should look like this
3. Stage and commit changes [Task 14] Order model

[Task 14] ItemPreview

1. Select 'Previews' folder -> right-click -> New File... -> SwiftUI View -> named 'ItemPreview'
2. Follow the figma design here
3. Check the work together (later), code should look like this
4. Stage and commit changes [Task 13] ItemPreview

[Task 15] OrderView

1. Select 'Views' folder -> right-click -> New File... -> SwiftUI View -> named 'OrderView'
2. Follow the figma design here
3. Create: OrderView
4. Modify: Navigation, DeliverflyApp, RestaurantView, FoodView

Check work

1. Inside 'OrderView' the code should look like this
2. Inside 'Navigation' add 'case order' and additional configurations (should look like this)
3. Inside 'DeliverflyApp' add 'case order...' (should look like this)
4. Inside 'RestaurantView' add 'hasCartItems', 'order', init() {...}, .onChange(of: ...) {...} and 'cartIcon' (code looks like this)
5. Inside 'FoodView' add @Binding var orderItems: [Item] and func addToCartTapped() (code looks like this)
6. Stage and commit changes [Task 15] OrderView

Open Pull Request (from feature/order-view to develop)

1. Go to github.com -> 'Compare and pull request' (or 'Pull Requests' -> New Pull Request)
2. base: develop <- compare: feature/order-view
3. Click on 'Create pull request'
4. Click on 'Merge pull request' -> click on 'Confirm merge'
5. Go to Fork -> click 'Fetch' (arrow down outline) -> go to Branches -> right-click Checkout 'develop' -> Click 'Pull' (arrow down fill)

Lesson 6 - Firebase

Task	Time
Create Firebase Project	10 min
[Task 16] Setup Firebase	20 min
Input Data	20 min
Break	10 min
[Task 17] Fetch Foods	30 min
[Task 18] Fetch Restaurants	30 min

Create Firebase Project

1. Go to http://console.firebase.google.com -> Sign in
2. Sign in with your account or create an account
3. Go to "+ Add project"
4. Enter Project name -> Deliverfly-GivenName-LastName (e.g. Deliverfly-Neli-Shahapuni) -> Continue
5. Disable "Enable Google Analytics for this project" -> Create Project

New branch: feature/firebase

1. Go to fork & checkout 'develop'
2. Right-click 'develop' -> New Branch... -> name it feature/firbase

[Task 16] Setup Firebase

1. Register app
   • Bundle Identifier -> go to Xode -> Deliverfly (blue top-left file) -> Signing & Capabilities -> copy Bundle Identifier
   • App nickname: Deliverfly -> Register app
2. Download config file
   • click on: Download 'GoogleService-Info.plist'
   • Find it in downloads & drag it in bottom of project files
   • In Xcode -> Enable 'Copy items if needed' -> Finish
   • Back to firebase -> click 'Next'
3. Add Firebase SDK
   • Go to Xcode -> File -> Add Package Dependencies...
   • Paste this link in the top-right: https://github.com/firebase/firebase-ios-sdk -> Add Package
   • Select packages:
     • FirebaseDatabase
     • FirebaseDatabseSwift
     • FirebaseFirestore
     • FirebaseFirestoreSwift
   • Click 'Add Packages'
   • Press 'Command + B' to build
4. Add initialization code
   • Go to 'DeliverflyApp' file:
     • import FirebaseCore
     • under the properties, paste this code (should look like this)

init() {
    FirebaseApp.configure()
}

5. Next steps
   • click 'Continue to console'
6. Commit [Task 16] Setup Firebase and push commit (if you receive any emails, ignore them)

Input Data

1. Build -> 'Realtime Database' -> click on 'Create Database'
2. Realtime Database location -> Belgium (europe-west1) -> Next
3. Start in test mode -> Enable
4. Hover over the url and click on the "+" on the right
5. Type "Foods" (don't click enter) and click on "+"
   • id: 100
     • name: "Double Double" (write without the quotes "")
     • description: "Freshly baked buns, American cheese, two beef patties, fleshly sliced or grilled onions, lettuce, spread, and tomatoes." (write without the quotes "")
     • image: doubleDouble
     • price: 3.95
     • ingredients
       • 0: salt
       • 1: patty
       • 2: onion
       • 3: tomato
       • 4: pepper
       • 5: mayo
       • 6: cheese
       • 7: ketchup
6. Type "Restaurants" (don't click enter) and click on "+"
   • id: 1
     • name: "In-N-Out Burger"
     • description: "From the first bite of your burger to your last french fry, quality is the most important ingredient at In-N-Out Burger."
     • image: inNOut
     • rating: 5
     • time: 20
     • foods
       • 0: "101"
       • 1: "102"
       • 2: "103"
       • 3: "104
7. Click on the 3 dots in the top-right corner -> Import JSON -> upload 'data.json' from the Assets folder (can also be found here)
8. Click 'Import'
9. Now you have both 'Foods' and 'Restaurants' data

[Task 17] Fetch Foods

1. Click on 'Deliverfly' folder -> Right-click 'New File...' -> Swift File -> named 'Firebase'
2. Inside 'Firebase' -> fetch foods from firebase (code should look like this)
3. Go to 'DeliverflyApp' and add @ObservedObject firebase, initialize it & .environmentObject (should look like this)
4. Go to 'HomeView' and add @EnvironmentObject firebase. To the ScrollView add a .onAppear { ... } (code should look like this)
5. Run the app (command + R) and see the log
6. Commit [Task 17] Fetch Foods and push commit

[Task 18] Fetch Restaurants

1. Inside 'Firebase' -> fetch restaurants from firebase (code should look like this)
2. Inside 'HomeView' add ProgressView() and replace list with firebase.restaurants (code should look like this)
3. Commit [Task 18] Fetch Restaurants and push commit

Open Pull Request (from feature/firebase to develop)

1. Go to github.com -> 'Compare and pull request' (or 'Pull Requests' -> New Pull Request)
2. base: develop <- compare: feature/firebase
3. Click on 'Create pull request'
4. Click on 'Merge pull request' -> click on 'Confirm merge'
5. Go to Fork -> click 'Fetch' (arrow down outline) -> go to Branches -> right-click Checkout 'develop' -> Click 'Pull' (arrow down fill)

Lesson 7 - History View

Task	Time
[Task 19] Place Order	15 min
[Task 20] OrderPreview	10 min (Independently)
[Task 21] HistoryView	10 min (Independently)
[Task 22] Fetch Orders	25 min (Independently)
Break	10 min
Check Work	50 min

New branch: feature/history-view

1. Go to fork & checkout 'develop'
2. Right-click 'develop' -> New Branch... -> name it feature/history-view

[Task 19] Place Order

1. Go to 'Firebase' file -> add func placeOrder (code should look like this)
2. Go to 'OrderView' and add @EnvironmentObject firebase. Inside 'placeOrder' add Task { firebase.placeOrder(order) } (code should look like this)

[Task 20] OrderPreview

1. Select 'Previews' folder -> right-click -> New File... -> SwiftUI View -> named 'OrderPreview'
2. Follow the Figma design here
3. Inside 'OrderPreview' follow along (code should look like this)
4. Stage & commit [Task 19] OrderPreview and push commit

[Task 21] HistoryView

1. Select 'Views' folder -> right-click -> New File... -> SwiftUI View -> named 'HistoryView'
2. Follow the figma design here
3. Inside 'HistoryView' follow along (code should look like this)
4. Inside 'Navigation' uncomment 'case history'
5. Inside 'DeliveryApp' add case .history: HistoryView() (code should look like this)
6. Inside 'HomeView' when you click the history button, add 'navigation.goTo(view: .history)' (code should look like this)
7. Stage & commit [Task 20] HistoryView and push commit

[Task 22] Fetch Orders

1. Inside 'Firebase' add @Published var orders, func fetchOrders(), func resetOrders(), and func decodeOrder (code should look like this)
2. Inside 'HistoryView' remove 'orders' and replace it with 'firebase.orders'. Inside .task call fetchOrders() and inside .onDisappear call resetOrders() (code should look like this)

Open Pull Request (from feature/history-view to develop)

1. Go to github.com -> 'Compare and pull request' (or 'Pull Requests' -> New Pull Request)
2. base: develop <- compare: feature/history-view
3. Click on 'Create pull request'
4. Click on 'Merge pull request' -> click on 'Confirm merge'
5. Go to Fork -> click 'Fetch' (arrow down outline) -> go to Branches -> right-click Checkout 'develop' -> Click 'Pull' (arrow down fill)

Lesson 8 - Status, Discount, Flavor

Task	Time
[Bonus 1] Status	20 min
[Bonus 2] Discount	40 min (Independently)
Break	10 min
[Bonus 3] Flavor	50 min (Independently)

New branch: *feature/bonus

1. Go to fork & checkout 'develop'
2. Right-click 'develop' -> New Branch... -> name it feature/bonus

[Bonus 1] Status

• Make Status enum, StatusPreview, and StatusView.
• Add StatusView(status: .success) when pressing "Place Order" in Order View.
• Add StatusPreview(status: .error) (instead of Text("No orders")) if there are no orders in the databse.
• All changes should look like this
• (optional) Make a pull-request & merge to develop.

[Bonus 2] Discount

• Check-out feature/bonus to continue
• This task is done fully independently and doesn't have a ready solution.
• Hint: Use environment object to persist the discount info across different views (similar to navigation & firebase)
• Follow the figma designs here

[Bonus 3] Flavor

• This task is done fully independently and doesn't have a ready solution.
• Hint: Create a Flavor enum (similar to Ingredient)
• Follow the figma designs here