Beginning SwiftUI (Lim, Greg [Lim, Greg]) (Z-Library)

📄 File Format: PDF

💾 File Size: 6.1 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

(This page has no text content)

📄 Page 3

Beginning SwiftUI Greg Lim Copyright © 2021 Greg Lim All rights reserved. Copyright © 2021 by Greg Lim All rights reserved. No part of this book may be reproduced in any form or by any electronic or mechanical means including information storage and retrieval systems, without permission in writing from the author. The only exception is by a reviewer, who may quote short excerpts in a review.

📄 Page 4

First Edition: March 2021

📄 Page 5

Table of Contents Preface Chapter 1: Introduction Chapter 2: Body Mass Index Calculator Chapter 3: To Do List App Using List Chapter 4: Persistent Data Using Core Data Chapter 5: Extending Core Data to CloudKit Chapter 6: Getting Data from an API: GitHub Users Chapter 7: Machine Learning with Core ML Chapter 8: C.R.U.D. Notes App with Firebase/Firestore Chapter 9: Building Cross Platform Apps in SwiftUI About the Author

📄 Page 6

Preface About this book In this book, we take you on a fun, hands-on and pragmatic journey to learning iOS 14 development using SwiftUI. You'll start building your first SwiftUI app within minutes. Every section is written in a bite-sized manner and straight to the point as I don’t want to waste your time (and most certainly mine) on the content you don't need. In the end, you will have the skills to create an app and submit it to the app store. In the course of this book, we will cover: Chapter 1: Introduction Chapter 2: Body Mass Index Calculator Chapter 3: To Do List App Using List Chapter 4: Persistent Data Using Core Data Chapter 5: Extending Core Data to CloudKit Chapter 6: Getting Data from an API: GitHub Users Chapter 7: Machine Learning with Core ML Chapter 8: C.R.U.D. Notes App with Firebase/Firestore Chapter 9: Building Cross Platform Apps in SwiftUI The goal of this book is to teach you SwiftUI development in a manageable way without overwhelming you. We focus only on the essentials and cover the material in a hands-on practice manner for you to code along. Requirements No previous knowledge of iOS development required, but you should have basic programming knowledge. Getting Book Updates To receive updated versions of the book, subscribe to our mailing list

📄 Page 7

by sending a mail to support@i-ducate.com . I try to update my books to use the latest version of software, libraries and will update the codes/content in this book. So do subscribe to my list to receive updated copies! Contact and Code Examples Visit www.greglim.net/swiftui to obtain the source codes used in this book. Comments or questions concerning this book can also be directed to the same.

📄 Page 8

Chapter 1: Introduction Welcome to Beginning SwiftUI iOS 14 Development! I'm Greg and I'm so excited that you decided to come along for this. With this book, you will go from absolute beginner to having your app submitted to the App Store and along the way, equip yourself with valuable iOS app development skills. SwiftUI makes it easier to build user interfaces across all Apple platforms with Swift. It uses a declarative syntax where you simply state what your user interface should do. Before SwiftUI, developers used UIKit and Storyboard to design user interfaces. We drag and drop UI controls on to View Controllers and connect them to outlets and actions on the View Controller classes. We then update view controls and handle events that occur through delegates. If you would like to learn iOS development using UIKit and Storyboard, check out my best-selling book or contact me at support@i-ducate.com . SwiftUI in contrast is a state-driven, declarative framework. There is no more dragging and dropping in the storyboard. Layouts are specified declaratively using code. For example, you can state that you want a list of items consisting of text views and then describe the value for each view. struct ContentView: View { var body: some View { List{ Text("Write SwiftUI book") Text("Read Bible") Text("Bring kids out to play") Text("Fetch wife") Text("Call mum") } } } Your code is easier to read and write than before, saving you time and maintenance.

📄 Page 9

Working Through This Book This book is purposely broken down into brief chapters where the development process of each chapter will center it on different essential topics to develop apps for the iPhone. The book takes a practical hands-on approach to learning through practice. You learn best when you code along with the examples in the book. Along the way, if you encounter any problems, drop me a mail at support@i- ducate.com where I will try to answer your query. Get a Mac Before we proceed on, you will need to have a Mac running on at least macOS version of 10.15.4 (Catalina) to run Xcode 12. This is because to use Live Preview and design canvas features in Xcode, you need at least macOS Catalina (10.15). If you do not yet have a Mac, the cheapest option is to get a Mac Mini and if you have a higher budget, get a higher model or iMac with more processing power. You might have heard of the option to run Mac on Windows machines for iOS development, but I do not recommend it. Unexpected problems will arise in development and publishing to the App store that can be avoided by just using a Mac. If you are serious about developing iOS apps and publishing them on the App Store, getting a Mac is a worthwhile investment. Downloading Xcode Next, there is an essential piece of software you need to have on your computer before we can move forward. It's called Xcode and is an integrated development environment (IDE) provided by Apple to write Swift code and make iOS apps. It includes the code editor, graphical user interface editor, debugging tools, an iPhone/iPad simulator (to test our apps without real devices) and much more. Let ’ s get it downloaded before proceeding. Download the latest version of Xcode 12 (at time of writing) from the Mac App Store (fig. 1).

📄 Page 10

Figure 1 You will need an Apple ID to login and download apps from the Mac App store. If you do not already have one, sign up for an account (https://appleid.apple.com/account). You will also need an Apple ID to be able to deploy your app to a real iPhone/iPad device for testing. The installation of Xcode might require you to update your version of MacOS. At this book ’ s time of writing, the MacOS required is Catalina version 10.15.4. Installing Xcode Just like any other Mac App, Mac App store will take care of the downloading and installation of Xcode for you. Do note that installation of Xcode 12 requires 20-30 GB of space available for the installation to proceed and installation takes quite some time. Once the installation is complete, you should see the Xcode icon on your computer. Swift and Xcode I'm going to be introducing you to two terms that you're going to encounter throughout this book. One of those is Swift and the other one is Xcode. Swift is the programming language we use to make iPhone apps. Swift came out in 2014. Previous to that, the programming language used to make iPhone apps was Objective C. But Objective C was complicated. Many developers new to the space of iOS development found that it was hard to read and write. Swift then was introduced. Swift is specifically designed with

📄 Page 11

beginners in mind and even experienced programmers think of Swift as a really clean and beautiful language. Xcode is the program that allows us to make iPhone apps. We're going to type Swift into Xcode and also use Xcode for designing the visual side of our app like where we want a button, what color do we want it to be, where do we want to place our table view, etc. Throughout this book, these are the two skills that we will be improving upon step by step. This book is written for a beginner in iOS development. So, you don ’ t need to have any prior iOS development experience. But if you have some iOS development experience, you're going to feel pretty familiar with what's going on. It will also be best if you have some basic programming experience. But if you do not have it, it ’ s alright and I will try my best to explain certain programming concepts. Xcode Walkthrough Now in this section, I want you to become acquainted with Xcode. Open Xcode. At the time of writing, this book uses Xcode 12. But make sure you're using the latest official version of Xcode from the Mac App Store. In the ‘ Welcome to Xcode ’ screen (fig. 2), you can choose to either get started with a playground which is a great way to explore the Swift language. The next option is creating a new Xcode project where you create an app for iPhone, iPad, Mac, Apple Watch or Apple TV.

📄 Page 12

Figure 2 You also have a third option to clone an existing project but we will not be covering this option in this book. For now, let's create a new project. When you do so, it's going to bring up a page (fig. 3) that asks what kind of project do you want to make, whether iOS, watchOS, tvOS, macOS or Multiplatform. Figure 3 iOS includes apps for the iPhone, iPad, iPod Touch. watchOS is for

📄 Page 13

Apple watch apps. tvOS is for Apple TV apps. macOS is for Mac apps on the desktop and Multiplatform is if you want to make an app that works across multiple platforms. For us, we focus on iOS apps. For an iOS app, there are lots of different templates that you can start with. The templates help you get started with some boilerplate code. For us, we want the App option. This is essentially the blank starting point for almost every app that we're going to make. So let's go ahead and double click on that. You will then have to input the below fields for your project (fig. 4): Product Name : (as this is our first project, we will name it HelloSwiftUI ) Team : Organization Identifier : (normally the reverse of your website e.g. com.iducate.calculator. If you do not have a website, com.firstname.lastname will do fine) Interface: select SwiftUI Life Cycle: select SwiftUI App Language : select Swift (only option available) For Use Core Data, Include Tests : leave all the boxes unchecked Figure 4 Go ahead and fill in the fields. You can change the field values later in your project, so don ’ t worry if you have inputted a wrong value.

📄 Page 14

When you have the fields filled up, hit the Next button. It's going to ask you where you want to save this new project. I'm going to put ours under ‘ Documents ’ . There will also be a checkbox to ‘ Create Git repository on my Mac ’ . This will make a GitHub repository for your app which helps you save different versions of your app and if you want to collaborate with people. Git is outside the scope of this book but just go ahead and leave this checked. You should see the project created for you (fig. 5a). Figure 5a You can see that a new folder has been added called HelloSwiftUI . On the left side of Xcode, you can see the folder-file structure of the project (fig. 5b). Figure 5b We have our HelloSwiftUI folder at the root and another HelloSwiftUI

📄 Page 15

folder with more files inside of that. Xcode will take the name of your project and put that in a folder which consists of another folder with that same name. It will also have a project file HelloSwiftUI.xcodeproj which is the project file to open our project. If we close out Xcode and wanted to open up your project to work on it again, double click on HelloSwiftUI.xcodeproj and it will open up Xcode with all your project folders and files. And then we have folders like Assets.xcassets to store resources that our app uses. For example, images, sounds, fonts, and videos. The apps in this book will have Assets.xcassets mainly storing images. Info.plist (Information Property List) contains metadata settings for your app e.g. app name, version, and other fields that we have entered in our initial project setup form. Lastly, if you click back on the root project file, you can see the General settings for your app (fig. 6). Figure 6 This is where previously you had filled in the fields at the beginning of the project. You can come back here and change it.

📄 Page 16

Figure 7 Under the ‘ Signing & Capabilities ’ tab (fig. 7) is also where we had to specify the ‘ Team ’ field. Again, you can come back here and change it. For example, we have not specified Team . Here, you can go back and change when you want to submit your app to the App Store. The main file we will work with for now is ContentView.swift. ContentView.swift contains the UI for our application's initial main screen. There is a canvas on the right side of Xcode which lets you preview the UI of your application without needing to run the application on the Simulator or a real device. Click 'Resume' to preview your UI (fig. 8a, fig. 8b). Figure 8 *if you don ’ t see ‘ Resume ’ , make sure you are running at least macOS Catalina.

📄 Page 17

Figure 8b ContentView.swift contains the following: import SwiftUI struct ContentView: View { var body: some View { Text("Hello, world!") .padding() } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } Code Explanation struct ContentView: View { The ContentView struct defines the UI of your screen. It conforms to the View protocol (everything you want to show in SwiftUI needs to conform to View ). Thus, it must declare a property called body which returns some sort of View. var body: some View { Text("Hello, world!") .padding()

📄 Page 18

} body currently consists of a Text View. A Text View is a graphical view that displays one or more lines of read-only text. In other words, it is a text label. Note: the some keyword in the above code literally means “ this will return some sort of View but SwiftUI doesn ’ t need to care what. ” Change the text in the Text View: struct ContentView: View { var body: some View { Text("Hello, SwiftUI! ") .padding() } } The preview should automatically update to reflect the text change (fig. 9). Figure 9 Sometimes, the automatic preview will pause when we make some changes. What that happens, click 'Resume' and you should see the preview again. Occasionally, you might face an error where the preview doesn't work. You might have to click 'Try Again' to rebuild the preview.

📄 Page 19

Now, what produces the preview? The next section explains it. ContentView_Previews The next struct ContentView_Previews conforms to the PreviewProvider protocol which produces the view previews. struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } For example, if we want to preview how our UI looks on an iPhone SE, we do the following: struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView(). previewDevice("iPhone SE (2nd generation)") } } The preview canvas now displays our UI on an iPhone SE (2nd generation). With this, you can test to see how your app will look different on different devices, e.g. iPhone 12, iPhone 12 Pro Max, iPad etc. We cover more on ContentView_Previews later in this book. But for now, realize the declarative nature of SwiftUI ensures we get the same consistent UI layout across different devices. In the past, with storyboards, to ensure the app looks the same across devices, we had to manually center the label by adding constraints. To run your app on the simulator, simply click the icon from the panel on the top left of Xcode. The simulator should start running and soon display your app. Buttons Other than Texts, buttons are another visual control that you see in almost all apps. Users click on buttons to call specific code to

📄 Page 20

perform some actions. Fill in the following to create a button: struct ContentView: View { var body: some View { Button(action:{ }){ Text("Press Me") } } } The Button View has a parameter action where you provide the code to be performed when the button is clicked. Below the button code block, you also have the code block which describes the look of the button. In our case, our button simply contains a Text View. We will later see how to customize the look of the button with modifiers . To create an action for our button, we simply put the code we want to run when the button is pressed. Let ’ s add a print statement in the action: Button(action:{ print("button tapped") }){ Text("Press Me") } Now when you run the app in the simulator and you click on the button, you should have “ button tapped ” printed in the console log. To show your console, go to ‘ View ’ , ‘ Debug Area ’ , ‘ Activate Console ’ (fig. 10).