How to develop a SwiftUI News App in 3 minutes

Original: Peng Quanhua first: “know cloud” public number – small program development fast person step

SwiftUI is Apple’s latest UI development tool. SwiftUI has the following features: declarative syntax, easy to read and less code; A common API across all Apple platforms; Automatic support for dynamic typing, dark mode, localization, etc. Adopting SwiftUI will greatly improve the efficiency of UI development.

In the previous article, We learned how to quickly build a news and information app page using SwiftUI. But it is only a static page, can not meet our need to update information at any time. So in this article, Xiao Pen will introduce how to use the Cloud to dynamically publish news and information, and use SwiftUI’s ObservableObject, @observedobject, @Published and other features to automatically update the interface after the app gets the news and information.

[Follow the public account of “Knowing cloud”, reply with the keyword “SwiftUI” to get the complete code]

Know the cloud

To realize the traditional way of real-time release of information, it is necessary to build a server, database, domain name record, data interface implementation and other tedious processes. Using the Awareness Cloud eliminates these steps and allows us to focus on the implementation of the business logic. We just need to create an application and data table in the cloud, store the data in the data table, and operate the data in the app quickly and easily. We will use the knowing Cloud to store news and information.

Create an

Go to know cloud register know cloud account. After successful registration, enter the Dashboard page of the Knowing Cloud Console. Create an application called Daliy and choose the free version of the package.

Create data table

Select the data module in the left sidebar, and the page of creating a data table is displayed. The name of the data table is Daliy, and the entry permission of the data table is set as the login user. Set the default read/write permission of the row to everyone and the login user can write.

To add a column for Daliy, select Add Column and enter title on the page that is displayed.

Add the author, date, Content, and thumbnail columns of type string.

Input news information, select “Add” line, and input information in the popup interface:

MinCloud installation and configuration

To obtain the information on the awareness cloud, you need to install the awareness cloud SDK — MinCloud. Install MinCloud via Cocoapods. In the root of your Daliy project, create a new Podfile file and enter the following:

Platform: ios, '9.0' use_frameworks! target 'MinCloud' do pod 'MinCloud', :git => 'https://github.com/ifanrx/hydrogen-ios-sdk.git'endCopy the code

Go to the project root directory on the terminal and run the following command to complete the installation:

pod install
Copy the code

Initialize MinCloud

In the application starts up, need to register known cloud distribution clientId, namely the AppDelegate. Swift file, import MinCloud, and find application: didFinishLaunchingWithOptions method, insert the following code:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {    BaaS.register(clientID: "fdc4feb5403a985fe681")    return true}
Copy the code

Replace clientID with your app ID. ClientID is available in dashboard Settings – Apps).

Get news and information from the knowing Cloud

Create a Swift file and name it DaliyStore. In MinCloud, Table corresponds to the data Table that is aware of the cloud, and operating on this object is equivalent to operating on the data Table that is aware of the cloud. In the daliyStore. swift file, import MinCloud and create the DaliyStore class. Add a property called daliyTable to the DaliyStore class. DaliyTable is a Table instance associated with the data Table Daliy.

let daliyTable = Table(name: "Daliy")
Copy the code

Add a new property, newList, to the News array, to hold News information.

@Published var newsList: [News] = []
Copy the code

Next we can manipulate the data table with daliyTable. Implement the DaliyStore class method fetchDaliy(), which requests news information from Daliy knowing the cloud data table and saves it to newsList. The specific implementation is as follows:

import Foundationimport MinCloudfinal class DaliyStore: ObservableObject { let daliyTable = Table(name: "Daliy") @Published var newsList: [News] = [] func fetchDalily() { daliyTable.find { (recordList, error) in var _newsList: [News] = [] recordList? .records? .forEach({ (record) in let id = record.Id let title = record.get(key: "title") as? String let author = record.get(key: "author") as? String let date = record.get(key: "date") as? String let content = record.get(key: "content") as? String let thumbnail = record.get(key: "thumbnail") as? String if let id = id, let title = title, let author = author, let date = date, let content = content, let thumbnail = thumbnail { let news = News(id: id, title: title, author: author, date: date, content: content, thumbnail: thumbnail) _newsList.append(news) } }) DispatchQueue.main.async { self.newsList = _newsList } } }}Copy the code

struct NewsListView: View { @ObservedObject var store = DaliyStore() var body: some View { List(store.newsList) { (news) in NavigationLink(destination: NewsDetailView(news: news)) { NewsListRow(news: news) Text("Hello World") .foregroundColor(.red) .font(.system(size: 16))}}.onappear (perform: {self.store.fetchdalily ()}).navigationBarTitle(" news ")}}Copy the code

Running the code, we can see that the home page displays news information from the awareness cloud. You might wonder why news is displayed when you get it from the knowledge cloud without manually calling code to update the page. That’s what ObseverableObject, @observeDobject, and @Published do. When the @Published property of an @observeDobject changes, the @observeDobject view also automatically updates the body. In addition, the @obServeDobject object must implement the ObserverableObject protocol.

summary

The basics of SwiftUI that you learned in this tutorial include: View protocol, modifier, preview, data flow (@state, ObservableObject, @Observedobject, @Published), basic View, etc., and use SwiftUI to create a news list page and a details page. Implement data and view interaction. We also learned how to use MinCloud to store data and provide data for apps. For more information about SwiftUI, see here. To learn more about clouds, see here.

[Follow “know cloud” public number, click the menu bar “know cloud” – “know classroom”, get more development tutorials.]