ساخت اپلیکیشن چت برای iOS با SwiftUI — از صفر تا صد

1//
2//  ContentView.swift
3//  SwiftUI Chat
4//
5//  Created by Nick Halavins on 6/7/19. Updated 10/11/19
6//  Copyright © 2019 AntiLand. All rights reserved.
7//
8import SwiftUI
9
10// let's create a structure that will represent each message in chat
11struct ChatMessage : Hashable {
12    var message: String
13    var avatar: String
14}
15
16struct ContentView : View {
17    
18    // let's add some dummy values to the messages
19    // suppose, there are only two messages in the chat room sent by two users: A and B
20    // A sent "Hello world" with a red message bubble color
21    // B sent "Hi" with a blue message color
22    var messages = [
23        ChatMessage(message: "Hello world", avatar: "A"),
24        ChatMessage(message: "Hi", avatar: "B")
25    ]
26    
27    var body: some View {
28      
29        // I've removed the text line from here and replaced it with a list
30        // List is the way you should create any list in SwiftUI
31        List {
32            // we have several messages so we use the For Loop
33            ForEach(messages, id: \.self) { msg in
34                Group {
35                    Text(msg.avatar)
36                    Text(msg.message)
37                 // then we just show the avatars of the users and their messages
38                 // by using these two Text functions
39                }
40            }
41        }
42    }
43}
44
45#if DEBUG
46struct ContentView_Previews : PreviewProvider {
47    static var previews: some View {
48        ContentView()
49    }
50}
51#endif

1struct ChatMessage : Hashable {
2var message: String
3var avatar: String
4var color: Color
5}

1var messages = [
2ChatMessage(message: “Hello world”, avatar: “A”, color: .red),
3ChatMessage(message: “Hi”, avatar: “B”, color: .blue)
4]

1List {
2   ForEach(messages, id: \.self) { msg in
3      Group {
4         Text(msg.avatar)
5         Text(msg.message)
6            .bold()
7            .foregroundColor(Color.white)
8            .padding(10)
9            .background(msg.color)
10            .cornerRadius(10)
11      }
12   }
13}

1// ChatRow will be a view similar to a Cell in standard Swift
2struct ChatRow : View {
3    
4    // we will need to access and represent the chatMessages here
5    var chatMessage: ChatMessage
6    
7    // body - is the body of the view, just like the body of the first view we created when opened the project
8    var body: some View {
9        // HStack - is a horizontal stack. We let the SwiftUI know that we need to place 
10        // all the following contents horizontally one after another
11        HStack {
12            Group {
13                Text(chatMessage.avatar)
14                Text(chatMessage.message)
15                    .bold()
16                    .padding(10)
17                    .foregroundColor(Color.white)
18                    .background(chatMessage.color)
19                    .cornerRadius(10)
20            }
21        }
22    }
23}

1ForEach(messages, id: \.self) { msg in
2   ChatRow(chatMessage: msg)
3}

1//
2//  ChatController.swift
3//  SwiftUI Chat
4//
5//  Created by Nick Halavins on 6/7/19. Updated 10/11/19
6//  Copyright © 2019 AntiLand. All rights reserved.
7//
8import Combine
9import SwiftUI
10
11// ChatController needs to be a ObservableObject in order
12// to be accessible by SwiftUI
13class ChatController : ObservableObject {
14    // didChange will let the SwiftUI know that some changes have happened in this object
15    // and we need to rebuild all the views related to that object
16    var didChange = PassthroughSubject<Void, Never>()
17    
18    // We've relocated the messages from the main SwiftUI View. Now, if you wish, you can handle the networking part here and populate this array with any data from your database. If you do so, please share your code and let's build the first global open-source chat app in SwiftUI together
19    // It has to be @Published in order for the new updated values to be accessible from the ContentView Controller
20    @Published var messages = [
21        ChatMessage(message: "Hello world", avatar: "A", color: .red),
22        ChatMessage(message: "Hi", avatar: "B", color: .blue)
23    ]
24    
25    // this function will be accessible from SwiftUI main view
26    // here you can add the necessary code to send your messages not only to the SwiftUI view, but also to the database so that other users of the app would be able to see it
27    func sendMessage(_ chatMessage: ChatMessage) {
28        // here we populate the messages array
29        messages.append(chatMessage)
30        // here we let the SwiftUI know that we need to rebuild the views
31        didChange.send(())
32    }
33    
34}

1var window: UIWindow?
2var chatController = ChatController()

1let window = UIWindow(frame: UIScreen.main.bounds)
2window.rootViewController = UIHostingController(rootView: ContentView().environmentObject(chatController))
3self.window = window

1#if DEBUG
2struct ContentView_Previews : PreviewProvider {
3  static var previews: some View {
4    ContentView()
5    .environmentObject(ChatController())
6  }
7}
8#endif

1//
2//  ContentView.swift
3//  SwiftUI Chat
4//
5//  Created by Nick Halavins on 6/7/19. Updated 10/11/19
6//  Copyright © 2019 AntiLand. All rights reserved.
7//
8import SwiftUI
9
10// let's create a structure that will represent each message in chat
11struct ChatMessage : Hashable {
12    var message: String
13    var avatar: String
14    var color: Color
15     // isMe will be true if We sent the message
16    var isMe: Bool = false
17}
18
19// ChatRow will be a view similar to a Cell in standard Swift
20struct ChatRow : View {
21    // we will need to access and represent the chatMessages here
22    var chatMessage: ChatMessage
23    // body - is the body of the view, just like the body of the first view we created when opened the project
24    var body: some View {
25        // HStack - is a horizontal stack. We let the SwiftUI know that we need to place
26        // all the following contents horizontally one after another
27        Group {
28            if !chatMessage.isMe {
29                HStack {
30                    Group {
31                        Text(chatMessage.avatar)
32                        Text(chatMessage.message)
33                            .bold()
34                            .padding(10)
35                            .foregroundColor(Color.white)
36                            .background(chatMessage.color)
37                            .cornerRadius(10)
38                    }
39                }
40            } else {
41                HStack {
42                    Group {
43                        Spacer()
44                        Text(chatMessage.message)
45                            .bold()
46                            .foregroundColor(Color.white)
47                            .padding(10)
48                            .background(chatMessage.color)
49                        .cornerRadius(10)
50                        Text(chatMessage.avatar)
51                    }
52                }
53            }
54        }
55
56    }
57}
58
59struct ContentView : View {
60    
61     // @State here is necessary to make the composedMessage variable accessible from different views
62    @State var composedMessage: String = ""
63    @EnvironmentObject var chatController: ChatController
64    
65    var body: some View {
66      
67        // the VStack is a vertical stack where we place all our substacks like the List and the TextField
68        VStack {
69            // I've removed the text line from here and replaced it with a list
70            // List is the way you should create any list in SwiftUI
71            List {
72                // we have several messages so we use the For Loop
73                ForEach(chatController.messages, id: \.self) { msg in
74                    ChatRow(chatMessage: msg)
75                }
76            }
77            
78            // TextField are aligned with the Send Button in the same line so we put them in HStack
79            HStack {
80                // this textField generates the value for the composedMessage @State var
81                TextField("Message...", text: $composedMessage).frame(minHeight: CGFloat(30))
82                // the button triggers the sendMessage() function written in the end of current View
83                Button(action: sendMessage) {
84                    Text("Send")
85                }
86            }.frame(minHeight: CGFloat(50)).padding()
87            // that's the height of the HStack
88        }
89    }
90    func sendMessage() {
91        chatController.sendMessage(ChatMessage(message: composedMessage, avatar: "C", color: .green, isMe: true))
92        composedMessage = ""
93    }
94}
95
96#if DEBUG
97struct ContentView_Previews : PreviewProvider {
98    static var previews: some View {
99        ContentView()
100        .environmentObject(ChatController())
101    }
102}
103#endif

1//
2//  SceneDelegate.swift
3//  SwiftUI Chat App
4//
5//  Created by Nick Halavins on 10/11/19.
6//  Copyright © 2019 AntiChat, Inc. All rights reserved.
7//
8import UIKit
9import SwiftUI
10
11class SceneDelegate: UIResponder, UIWindowSceneDelegate {
12
13    var window: UIWindow?
14    var chatController = ChatController()
15
16    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
17        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
18        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
19        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
20        // Create the SwiftUI view that provides the window contents.
21        let contentView = ContentView()
22
23        // Use a UIHostingController as window root view controller.
24        if let windowScene = scene as? UIWindowScene {
25            let window = UIWindow(windowScene: windowScene)
26            window.rootViewController = UIHostingController(rootView: contentView.environmentObject(chatController))
27            self.window = window
28            window.makeKeyAndVisible()
29        }
30    }
31
32    func sceneDidDisconnect(_ scene: UIScene) {
33        // Called as the scene is being released by the system.
34        // This occurs shortly after the scene enters the background, or when its session is discarded.
35        // Release any resources associated with this scene that can be re-created the next time the scene connects.
36        // The scene may re-connect later, as its session was not neccessarily discarded (see `application:didDiscardSceneSessions` instead).
37    }
38
39    func sceneDidBecomeActive(_ scene: UIScene) {
40        // Called when the scene has moved from an inactive state to an active state.
41        // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
42    }
43
44    func sceneWillResignActive(_ scene: UIScene) {
45        // Called when the scene will move from an active state to an inactive state.
46        // This may occur due to temporary interruptions (ex. an incoming phone call).
47    }
48
49    func sceneWillEnterForeground(_ scene: UIScene) {
50        // Called as the scene transitions from the background to the foreground.
51        // Use this method to undo the changes made on entering the background.
52    }
53
54    func sceneDidEnterBackground(_ scene: UIScene) {
55        // Called as the scene transitions from the foreground to the background.
56        // Use this method to save data, release shared resources, and store enough scene-specific state information
57        // to restore the scene back to its current state.
58    }
59
60
61}