Xcode Tutorial - Step by Step for Beginners

Summary

This tutorial offers an in-depth guide for beginners on using Xcode to build iOS apps. It covers installing Xcode, creating a new project, and navigating its interface. The instructor emphasizes using Swift UI for modern app development and demonstrates coding a basic user interface. The video also explores the asset library, debugging tools, and testing apps on simulators and real devices. Finally, it touches on publishing apps to the App Store and using Xcode's features for efficient coding.

Takeaways

• 📘 Xcode is the official software by Apple for building iOS apps, and even professionals use it daily.
• 🚫 For beginners, it's recommended to avoid Xcode betas due to potential bugs and ongoing changes that can complicate learning.
• 🔍 When starting a new project in Xcode, selecting the correct options such as platform (iOS, macOS), user interface technology (Swift UI, Storyboard), and programming language (Swift, Objective-C) is crucial.
• 💼 The project file with the '.xcodeproj' extension is essential as it links all project files into a single package.
• 🖼️ Resources like app icons, colors, and images are managed in the asset catalog, which is important for maintaining a consistent UI across different devices.
• 🔑 The unique bundle identifier, usually in the format of 'com.[yourname].productname', is used to distinguish apps on the App Store.
• 📝 Xcode's interface can be customized to focus on the editor and canvas, or to include navigators, inspectors, and debug areas based on the user's preference.
• 🎨 The use of Swift UI is encouraged for beginners as it's Apple's direction for the future, offering an easier learning curve compared to UIKit and Storyboards.
• 🔍 The inspector panel provides a visual way to adjust attributes of UI elements, which can also help in learning the corresponding code syntax.
• 📱 Testing apps can be done on iOS simulators, which offer a variety of conditions to emulate real device scenarios, but ultimately testing on a real device is recommended.
• 🛠️ Debugging in Xcode involves using breakpoints, stepping through code, and examining variables to identify and fix issues in the code.

Q & A

What is the purpose of the tutorial presented in the script?

The purpose of the tutorial is to teach students how to use Xcode to build apps, focusing on the context of building an app with a working knowledge that can be immediately applied.

Why should beginners avoid Xcode betas according to the tutorial?

Beginners should avoid Xcode betas because they contain bugs and are still undergoing changes, which can add unnecessary roadblocks to the learning process of building apps.

What is the recommended user interface technology for building apps in Xcode as per the tutorial?

The recommended user interface technology for building apps in Xcode is Swift UI, as it is the direction Apple is moving in and is considered easier for beginners to pick up.

How does the tutorial suggest managing different screen resolutions for images in an app?

The tutorial suggests using different sizes for images (1X, 2X, and 3X) and placing them in the asset catalog with appropriate names, so the app can choose the correct image size based on the user's device resolution.

What is the role of the 'entry point' file in an Xcode project?

The 'entry point' file is the first code that gets executed in an app. It is responsible for creating the initial screen or 'content view' of the app.

How can a developer preview their app in different states using Xcode?

Developers can use the 'preview' feature in Xcode to see their app in different states such as dark mode, light mode, different device orientations, and form factors.

What is the function of the 'Inspector' panel in Xcode?

The 'Inspector' panel in Xcode allows developers to view and modify the attributes of the selected component or file, providing a visual way to adjust properties without directly editing the code.

How can a developer run their app on an iOS simulator?

A developer can run their app on an iOS simulator by selecting the desired simulator device in Xcode, and then clicking the 'Play' button to build and launch the app within the simulator.

What is the significance of the 'toolbar' in Xcode's interface?

The 'toolbar' in Xcode's interface provides quick access to various functions such as hiding and showing panels, accessing the library of components and modifiers, and viewing the status of the project.

What are some benefits of enrolling in the Apple Developer Program mentioned in the tutorial?

Enrolling in the Apple Developer Program allows developers to submit unlimited apps to the App Store, invite beta testers, access analytics, and get support from Apple experts for troubleshooting.

How can a developer test their app on an actual device as described in the tutorial?

To test an app on an actual device, a developer needs to connect their iPhone to their computer using a USB cable, ensure the phone is trusted by the computer, and then select the device in Xcode to build and run the app.

What is the process of archiving an Xcode project and how does it help in deploying the app to the App Store?

Archiving an Xcode project prepares the package for distribution in the App Store. After archiving, the project appears in the organizer window, where developers can validate and then submit the build to App Store Connect for review and eventual release on the App Store.

How does the tutorial suggest using breakpoints for debugging in Xcode?

The tutorial suggests setting breakpoints by tapping on the line numbers in the code to pause execution at that point. Developers can then step through the code line by line to diagnose and fix issues.

What are some tips and tricks mentioned in the tutorial for efficient use of Xcode?

Some tips and tricks mentioned include using comments for documentation, navigating through the editor with breadcrumbs, using the back and forward arrows to switch between files, and using the search functionality to find text within the project or the entire project.

Outlines

00:00

📱 Introduction to Xcode Tutorial

The speaker, Chris, introduces the tutorial aimed at teaching students how to use Xcode for app development. He mentions that this tutorial will differ by integrating Xcode usage within the context of building an app, ensuring learners gain practical knowledge by the end. Chris advises installing Xcode from the Mac App Store, cautioning about its large file size and to avoid beta versions for stability. The tutorial then guides through launching Xcode and starting a new project, discussing platform options, and emphasizing the importance of a unique bundle identifier for App Store publishing.

05:03

🛠️ Navigating Xcode Interface and Project Structure

This paragraph delves into the Xcode interface, breaking it down into six main parts: Navigator, Editor, Canvas, Inspector, Debug area, and Toolbar. It explains the functionality of each component and how they can be hidden for more space. The speaker then discusses the project files, explaining the role of the project file in linking all files together and the importance of the root node in encapsulating all files. The entry point file of the app and its significance as the first executed code are also highlighted.

10:04

🌿 Exploring the Content View and Assets in Xcode

The tutorial continues by focusing on the content view, which represents the app's user interface. It describes how the entry point file creates a new screen and how additional views can be added. The assets section is explored, detailing where to store resources like app icons, colors, and images. The process of adding different sized image assets for various screen resolutions and how to reference them in code is explained. The paragraph concludes with a demonstration of adding an image asset and using it within the app.

15:09

🎨 Customizing UI Elements and Previewing Changes

This section teaches how to customize UI elements using code and the Inspector panel. It covers changing the image source, using modifiers to alter properties like color and scale, and updating text elements. The use of padding and the 'Content view previews' feature to test UI under different conditions is discussed. The paragraph also explains how to use the library to add new components and modifiers to the UI, emphasizing the ease of dragging and dropping elements to generate corresponding code.

20:17

🔧 Utilizing the Inspector Panel for Attribute Configuration

The Inspector panel's role in configuring attributes of selected components is highlighted. The paragraph explains how to modify properties like corner radius and padding directly through the Inspector, which updates the code in real-time. It also demonstrates how to explore available modifiers and add them to elements without memorizing code. The convenience of the attributes inspector for learning code representations and the efficiency of autocomplete in Xcode are also discussed.

25:22

📱 Simulating and Testing Apps with Xcode

The paragraph introduces the use of iOS simulators for testing apps under various conditions, such as different device orientations and memory states. It explains how to launch the simulator, interact with the app, and access additional simulation options. The tutorial also covers running apps on actual devices, detailing the process of connecting a device, trusting the computer, and deploying the app for testing. The limitations of simulators and the benefits of real-device testing are discussed.

30:23

🛑 Debugging Code with Xcode's Tools

Debugging is introduced as an essential part of app development, with Xcode's tools facilitating the process. The paragraph explains how to use breakpoints to pause execution and examine variables, step through code line by line, and navigate through breakpoints. It also covers how to set, disable, and remove breakpoints, and the importance of understanding code flow to diagnose issues effectively.

35:26

✍️ Enhancing Productivity with Xcode Tips and Tricks

The final paragraph offers productivity tips for using Xcode, starting with the use of comments to document code and logic. It suggests using comments to explain reasoning behind code decisions and to temporarily disable code lines. The paragraph also covers navigating the editor with breadcrumbs, using back and forward arrows, and collapsing code blocks for better readability. Searching through the project and accessing documentation quickly using the option key are additional tips provided to streamline the development process.

Keywords

💡Xcode

Xcode is an integrated development environment (IDE) developed by Apple for macOS, used for creating software for macOS, iOS, iPadOS, watchOS, and tvOS. In the video's context, Xcode is the central tool for teaching and building iOS apps, with the script detailing its installation and use for app development.

💡iOS Apps

iOS Apps refer to applications designed to run on Apple's iOS mobile operating system. The video's theme revolves around using Xcode to code and publish iOS apps, with the script providing a step-by-step guide for beginners to understand the process.

💡Swift UI

Swift UI is a user interface toolkit introduced by Apple that allows developers to design apps in a declarative manner. The script emphasizes learning Swift UI for building the user interface of iOS apps, as it is the future direction of Apple's UI framework.

💡Storyboard

A Storyboard in Xcode is a visual representation of the app's user interface and the transitions between different scenes. The script mentions Storyboard as an older UI framework compared to Swift UI, which is still in use but not recommended for new learners.

💡Bundle Identifier

A Bundle Identifier is a unique string that identifies an app across Apple's ecosystem. The script explains that the bundle identifier, usually in the format of 'com.[yourname].yourapp', is essential for publishing apps on the App Store.

💡App Store

The App Store is the digital distribution platform developed by Apple for iOS, iPadOS, and macOS where users can download and install apps. The video discusses the process of submitting apps to the App Store for distribution once they are developed using Xcode.

💡iOS Simulator

The iOS Simulator is a part of Xcode that allows developers to test their apps on virtual devices. The script describes using the iOS Simulator to preview and interact with the app during development before deploying it on actual devices.

💡Breakpoints

Breakpoints are a debugging feature in Xcode that allows developers to pause the execution of their code and inspect the state of the application. The script provides an example of setting a breakpoint to debug the app's functionality.

💡Debugging

Debugging is the process of finding and resolving defects or problems in a software program. The video script includes a section on debugging within Xcode, showcasing how to use the IDE's tools to identify and fix issues in the code.

💡Swift Programming Language

Swift is a powerful and intuitive programming language developed by Apple for macOS, iOS, watchOS, tvOS, and Linux. The script recommends learning Swift for new developers, as it is the recommended language for iOS app development in Xcode.

💡App Development Lifecycle

The App Development Lifecycle encompasses the stages a software application goes through from its conception to its retirement. The video script outlines the lifecycle in the context of using Xcode, from creating a project, coding, debugging, testing, to publishing the app on the App Store.

Highlights

Introduction to a tutorial on using Xcode for app development, taught by a team with experience in teaching thousands of students.

Emphasis on avoiding Xcode betas for beginners due to potential bugs and ongoing changes that can hinder the learning process.

Instructions on installing Xcode from the Mac App Store and the importance of having sufficient storage space.

Overview of creating a new project in Xcode, including selecting the appropriate options for an iOS app.

Explanation of project properties such as naming, team selection, organization identifier, and bundle identifier.

Discussion on choosing the user interface technology, with a recommendation for Swift UI over Storyboard for beginners.

Introduction to the Xcode interface, including the Navigator, Editor, Canvas, Inspector, and Debug area.

Description of the project file structure and the role of the .xcodeproj file in linking all project files.

Explanation of the App's entry point file and its role in creating the initial screen or 'ContentView'.

Details on the Assets folder, which houses resources like app icons, colors, and image assets.

Demonstration of adding and configuring images in different resolutions for various iPhone models.

Overview of the Editor and Canvas area, showing how code changes are reflected in real-time previews.

Introduction to the Inspector panel and its use for configuring attributes of selected UI components.

Explanation of the Toolbar's functions, including accessing the Library for additional views, components, and modifiers.

Instructions on running an app on an iOS Simulator, including selecting different devices and orientations.

Process for testing an app on a physical device, including connecting the device and selecting it within Xcode.

Discussion on the limitations of simulators and the importance of testing on real devices for accurate app behavior.

Overview of the Apple Developer Program, its benefits, and the process of submitting apps to the App Store.

Explanation of the archiving process in Xcode and the subsequent steps to deploy an app to the App Store.

Introduction to debugging in Xcode, including using breakpoints, the debug area, and stepping through code.

Tips and tricks for efficient coding in Xcode, such as using comments, navigating the editor, and accessing documentation.

Transcripts

if you want to learn how to use xcode to build  apps you're in the right place my name is Chris  

and our team has taught thousands of students how  to use xcode how to code and how to publish apps  

now I have to tell you though this extra tutorial  is going to be a little different than the others  

that you've seen instead of just giving you a  walkthrough I'm going to show you how to use  

the xcode in the context of building an app so  that by the end of this tutorial you're going  

to have working knowledge that you can put to use  right away all right enough talking let's Dive In  

if you don't have xcode installed go ahead open  the Mac App Store type in xcode and click this  

and install it now I will say that it's a pretty  big file size you're going to need even more space  

than this just to get it installed and the second  thing is I would ignore these bad ratings xcode  

is the official software that Apple gives us to  build iOS apps and even iOS professionals who  

are developing apps day to day are using xcode  to do it also I would mention that if you're  

just starting out avoid the xcode betas because  they contain bugs and their apple still changing  

things and these things just add roadblocks to  you if you're trying to learn how to build apps  

so stick to the releases in the App Store these  are the official public releases okay once xcode  

is installed go ahead launch it and let's start  your new project all right xcode is launched and  

you're going to see this welcome dialog if you  don't see this don't fear just go to file new  

and choose project and uh what we're going  to do here uh you probably won't have these  

because these are recent projects if this is your  first project you're going to hit create new xcode  

project right here and it's going to give you  some options so up here notice you can develop  

for different platforms I think when you install  xcode it's going to ask you if you want to install  

things like for TV OS and watch OS if you're not  developing for those platforms you don't need to  

install those things by default you're going to  have IOS and Mac OS and here you can create a  

multi-platform app that means an app that can run  on let's say iPad iPhone you know different Apple  

platforms what we're going to do here for the  purpose of this tutorial is to take you through  

building an iOS in other words iPhone app so we're  going to go under the iOS tab here and we're going  

to choose app right here so click next and let me  walk you through some of these project properties  

so first of all you're going to give your project  a name uh I'm going to give this let's call this  

xcode tutorial demo and for the team if you aren't  part of the Apple developer program then you  

probably don't have anything to put here you might  have a personal team if you have an Apple account  

but you don't have to worry too much about that  organization identifier combines with your product  

name to create a unique bundle identifier now  this is going to be unique for every single app  

that gets published in the App Store so usually it  goes like com Dot and then it might be your name  

or your company name or your website whatever  it may be followed by dot followed by your prod  

project name or product name so uh right here  put com dot your name or your website or company  

uh and then the interface is basically what sort  of user interface technology do you want to use  

to build your app by default it should say Swift  UI this is the direction that apple is moving in  

all of the latest things that get announced is  regarding Swift UI storyboard is sort of their  

older UI framework that's as of this recording  still in use a lot out there but Swift UI is maybe  

about as of this recording maybe three years old  but it is the future as Apple's sees so I would  

recommend that you learn Swift UI especially  as a beginner because it's much easier to pick  

up you can always go back and learn UI kit and  storyboards language definitely choose Swift  

or I don't even have the option okay if you choose  storyboard you have the option to select Objective  

C which is the I guess you could call the original  programming language used since then Apple has  

introduced the Swift programming language which is  the recommended option uh to learn these days so  

I would definitely select Swift whether you are  using Swift UI or storyboards and then I would  

uncheck any of these options if you have any of  these checked because we don't need these things  

right now it's just going to complicate things and  as you grow as an app developer you'll learn more  

about these options so let's go ahead and hit next  and create our brand new project it's going to ask  

you where to save it this you can leave unchecked  as well because again it's not something that  

we're going to cover in this tutorial if this is  your first time creating an app I would recommend  

that you create a dedicated place for all of  your apps for me I'm just going to save this  

on my desktop hit create and it's going to give  it a word and let me just expand this window and  

then we're going to go through all of our new  files because we're going to do this tutorial  

in the context of building an app all right after  you give a few moments for your xcode to load up  

the new project you're going to see a giant iPhone  on your screen here now before we dive into this  

project and tell you what all of this means it is  a little overwhelming at first glance we can split  

this interface up into six distinct Parts on your  left hand side here this is your Navigator this  

is where you're going to look at the different  files of your project this part right here where  

you edit the code is called the editor and it's  where you're going to write your code this is the  

canvas where you can preview what code you've  written like this is what is being generated  

from what you write in the editor and then to  the right of the canvas we have the inspector  

area notice that there are a couple of tabs here  in the inspector and also notice that we have a  

couple of tabs up here uh for The Navigators as  well because you can navigate between different  

things in your project now the inspector area is  for looking at details in your editor more closely  

we'll dive deeper into each of these sections but  right now let's give you an overview across the  

top you have your toolbar and this is where you  can see the status of what is happening to your  

project whether you are building it to run where  you are running it because you can select to run  

it on different devices and things like that down  here this is hidden but you can bring this up to  

show the debug area and this is where you're going  to troubleshoot some of the errors or code that's  

happening with your project but you can hide  that for now so that's there's a little button  

there for that in order to create more space for  yourself you can hide these different panes as  

well so for example this button right here hides  all of your inspectors this button up here hides  

your Navigators so now you only have your editor  and canvas where you'll be spending the majority  

of your time and if you're used to just writing  code and not really looking at your preview you  

can even turn this off by tapping on this button  and then saying show editor only and you're going  

to get a screen full of code so those are the  six main areas you'll be spending your time in  

this is the code editor we can click this button  and choose canvas to bring that back and then we  

can tap on this button to bring the inspectors  back which allow us to dive into elements inside  

our editor we can tap on this button to bring  back our Navigators and this button down here  

to bring up our debug area now that you know the  main areas of xcode let's dive into your project  

files so we can explain what an xcode project  is made up of so first let's ask the question  

what is an xcode project we created a brand new  project here and we were asked where to save it  

so let's pull up that location on disk and take  a look at what files I've created so first of all  

there's a folder with all of your project files  inside and notice how these map to what you see  

here in the file Navigator and then there's also  this xcode proj extension this is your project  

file that links all of these files together into a  single package and so when you're sending someone  

an xcode project you don't just send this file you  also need all of the files in this folder together  

so usually I'll just zip it up but anyways these  are your files representing your new xcode project  

and then you can look at them through here your  file Navigator if you don't see these files you  

might be on a different tab so make sure you are  on this first file Navigator tab let's go through  

these files so you can understand what your  project consists of so if you click on this first  

root node up here in fact you can collapse it you  can see this encapsulates all of your files which  

is representative of this right here so if you  click on that the editor area is going to change  

and these are all of the configuration details for  your project this is where you can figure things  

like version numbers and orientations and things  like that there is a lot that you can do here but  

we're not going to dive into that for now you  don't need to know any of that just know if you  

need to configure something with your project  or enable a certain capability let's say in-app  

purchase or something this is where you would go  next we have that folder that houses all of our  

files right we saw that in the font system if you  expand that we have this this file is going to be  

your product name and this is the entry point for  your app this is the code that gets executed first  

so what I want you to notice in here is we're  going to gloss over a lot of this code if you  

want to dive deeper and understand what these  things mean I definitely urge you to check our  

app beginner challenge where we have 10 lessons  to spend together and it's on YouTube and I will  

explain in detail what all these things are for  now I want you to notice that this content view  

right here what it's doing is it's creating a  brand new content View and if you look we have a  

Content view file up here so let's click on that  and this is basically your content view you can  

see a visual representation of it here and right  here you'll see that it is declared as content  

View and this is the code that generates all of  this UI and all these elements that you see here  

so if we go back to this entry point file what  is it doing it's creating a new content view so  

essentially it's creating a new screen and that  screen is content View and that screen is is  

dictated by this code right here that's what the  screen looks like so hopefully you get a sense now  

of the flow of the app right you have the entry  point it's creating a brand new screen and that  

screen's called content View and that's what you  have right here and this is this code right here  

is what represents the content view UI now you're  not limited to one screen as you know so you can  

always right click and choose new file and you're  going to be able to add a new view and we're not  

going to touch into that today definitely check  out the app beginner series like I mentioned  

in order to learn more about creating multiple  screens and things like that and how to link them  

together and navigate between them for now let's  move on to the other files in our project we have  

this assets right here here you're going to store  the resources for your app so what do I mean by  

resources I mean things like your app icon you can  simply drag and drop an image in here colors for  

your app so here you have a default accent color  for your app but you can Define your own colors  

so maybe you have three or four colors that you  reuse throughout your entire app so this is where  

you would declare those colors and then you could  also let's just click that you could say this is  

you know like button color or something like that  maybe you heard a little more descriptive than me  

but you would basically Define perhaps a color for  all your buttons and you would then choose a color  

for light mode or any mode and you can define a  color for dark mode so if the user is using dark  

mode it's automatically going to choose this color  for your buttons and when you're writing code in  

here you can reference that color by this name  right here so you can also create images like  

a new image set so when we do that let's say we  have an image that we want to use in our app so  

I'm going to name this image plant like that  notice that for plant I have one X2 X and 3X  

now these are different sizes for my image because  there are different screen resolutions for iPhone  

so essentially you're going to have the same  image asset but in three different sizes one  

that's double the size and one that's triple the  size you're going to drag all three versions into  

here and when the app runs it's going to choose  the appropriate image size to use based on the  

user's device resolution alright so let's try  it out I actually have an image that I prepared  

um for us to take a look at and that's just this  this plant right here so I'm going to drag it into  

here it's going to automatically create that asset  name for me and it's going to treat this as 1X now  

if I had the 2X and 3X versions I would drag it  in here as well and I would name it the same thing  

but it would be named it would essentially be like  something like this so let me just duplicate this  

file and show you how the file name would go  it'd be like the at 2X and then if I drag it  

in here I could put it in the 2x now obviously  I just duplicated it so it's both actually the  

same size but that's how you would name your three  different sizes and the other one would be at 3x  

and you drag it right there so if I were to use  this image inside my app I would reference it by  

this so we're going to try that in just a moment  when we get to talking about the editor area but  

for now let's finish off talking about the rest  of the files in our project we have this last  

folder called preview content and here we have  another resource library and this is where you  

can Define your assets for previewing specifically  this is for when you're building your app and you  

are seeing these previews perhaps you're not able  to fully visualize what your UI will look like  

unless you have some sample images so that is  where you would put your test or sample or demo  

assets that's where you put that there in preview  assets all right now that you're familiar with all  

the files in your project and navigating through  them using the file Navigator let's move on to the  

editor and canvas area as you can probably guess  by now the editor area including the canvas here  

changes depending on what you select so that  you can edit your selected file if I select  

this project file it's going to let me edit the  project configuration details if I select let's  

say the resource Library it's going to let me  edit those things and when I select this is a  

pure code file it's only code but when I have a  view it gives me a code plus canvas preview type  

of editor layout here so there's actually a lot  of cool productivity things with the editor here  

such as being able to jump to different parts of  the code if you have a really long code file you  

can adjust the sizing of this and up here along  this bar you can see that we have multiple tabs  

so you can switch files easily you also have  these arrows here which are very easily missed  

that allow you to jump backwards and forwards kind  of like a browser like a chrome or a safari or  

something like that you also have the ability to  open up side by side files so this window can be  

showing one code file while this one shows another  and because sometimes you want to compare or  

maybe look at two files at once you can rearrange  these windows you can even have four depending on  

your screen real estate but we can get deeper  into those tips and tricks at the end of this  

tutorial for now I want to show you how you can  write code in the code Editor to build your user  

interface that you can preview here so what I want  to bring your attention to is this block of code  

right here these few lines of code represent what  you see here so let's break it down a little bit  

you see this v stack right here that stands for  vertical stack and it basically allows you to put  

multiple things on top of each other if you look  at the vertical stack let me just collapse this  

code a little bit so you can see you write v stack  and then you have an opening bracket and a closing  

bracket and whatever you put between those two  brackets are the elements that you're stacking  

on top of each other so if you take a look at the  preview right here you have a little image of a  

globe and you have this hello world label here  those two things are on top of each other so let  

me open up the contents of the v-stack and you'll  see that we have an image element that's this  

globe right here and we have the text hello world  that's this label right here and because both of  

those two things are inside the v-stack they're  stacked on top of each other and furthermore the  

image is on top of the text so you can see how  writing this code is very intuitive to be able to  

imagine what this UI would look like so now let's  dive a little deeper into the image element you  

have an image and this part inside the brackets is  specifying what image to show now Globe is an icon  

that comes pre-installed in fact we can change  this globe to another pre-installed icon these  

icons are called SF symbols and they come with  iOS these are the standard symbols that iOS users  

are used to seeing on iPads and iPhones and you  can download this SF symbols beta app and I know  

in the beginning of this video I told you not to  download any betas but there is no public release  

of this it's still in beta let me launch it for  you because I have it right here and I'll show you  

what this looks like so this is just an easy way  to grab different icons to use in your app so you  

don't have to you don't have to download anything  or add any images so let's for example pick this  

one the name of it is scribble dot variable so  I'm just going to go ahead and copy the name  

and then I'm going to replace  that in here with globe and let's

it's it's doing something and then you'll see it  update here in the preview and you see that is  

exactly the symbol that we have now what are these  let me just open this up a little bit so we see  

these in a line now image scale large it modifies  the image element so this is indicating what scale  

should we show the image this is another modifier  it changes the color of the image element so for  

example I can change instead of the accent  color I can change green but before I do that  

where have you heard accent color before that's  right inside our resource Library accent color  

right because I haven't specified any color there  it's using the default accent color which is blue  

so we can change the accent color or you could  just put green there or perhaps red and change  

it to Red next below that we have a text element  which is essentially just a label you can't really  

do anything with it but it displays text so  we have hello world or we can change that text

the quote inside here is  the text that is displayed

so it's really as simple as that furthermore if  you want to modify this text element maybe you  

want to make it bold let's add a bold modifier  to the text and now you can see that it's bold  

so these two elements are contained within the  v-stack I can collapse the v-stack like that  

and then you can see what is this this is a  modifier for the v-stack this padding will add  

padding along all four sides of the v-stack  itself if I remove this modifier you can  

visually see anything because the padding  is sort of invisible here but if it filled  

if we had a line of text that went all  the way from the left to the right if  

I didn't have the padding modifier it  would touch the two edges of the screen  

if I added the padding modifier back then we would  get the left and the right margin now let's take  

a look at using the image that we had added to  the asset catalog here this this asset monstera  

deliciosa I don't even know if I'm pronouncing  that correctly so I apologize if I mess that up

it's a little ciosa and then for the  image we have system name but that's  

not what we use for our own added  image that's what we use for the  

SF symbols that I just showed you so  we're going to get rid of all of that  

and in in between the two brackets here we're  just going to put two quotes and then we're  

going to put the name of the asset that we added  so going back here so just taking a look at that  

name all lowercase with a dash in between right  that's exactly how we have to spell it right here

all right so that appears right  there and if we wanted to let's say  

give it rounded corners we can use another  modifier called Corner radius and it might  

be a little hard for you to remember all of these  different modifiers but over time as you use them  

you're going to get to know them and you're just  going to remember and I will show you coming up  

when we look at the inspector tab how you can add  these modifiers without actually remembering them  

okay so what I do here I added this modifier  for the image element and I put 20. that's the I  

guess the degree of rounding that I want and then  furthermore I might say like hey this text is too  

close to the image perhaps I will add another  modifier to this text and I would add padding  

and you can see that it's going to add padding on  all four sides so then if we move a little farther  

down in this code file you'll see that it says  content view previews right previews right here  

this is the little bit of code that is generating  what you see in the preview right you can see here  

it's creating a new content view which is what  this is right the cool thing about the preview  

is that we can actually put this in different  states we can see this UI that we've built in  

let's say a dark mode or an iPad or a smaller  form factor or maybe landscape orientation all  

those things you can do by adding modifiers on  the preview here but there's also an easier way  

to do that we've have buttons down here now where  you can just click and do those things so if you  

click on variants for example you can change the  color scheme or you can see the dark mode version  

and the light mode version perhaps you'd like  to look at orientation differences and how your  

UI would be affected and how it would look in  those orientations you could do that you can do  

type like different size types and there's there's  a lot of different things that you can do here  

okay so let's go back to our initial view here  so I hope that gives you an overview of the code  

editor and the preview and how editing the code in  here affects what you see in the preview now there  

are like I said a lot more intricacies with the  code Editor to make writing code easier as well  

as with the preview but we'll save those for the  tips and tricks section at the end of this video  

for now let's move on to explore the right side of  the screen the inspector panel the inspector panel  

all the way on the right hand side has different  tabs as well that give you various information  

and configuration for whatever you select either  within the editor or files so let me give you a  

demonstration for example we were talking about  the v-stack if I put my cursor on the v-stack  

you'll see that the inspector panel changed and  I went into this panel right here for some quick  

help this one gives me a summary about what the  v-stack does um and some sample code about how  

to use it and furthermore I can click on this link  to open up the developer documentation which gives  

me more information about the v-stack and uh how  to use it and all all that sort of stuff so that's  

very very handy if I select let's say the image  again this changes to the image component and  

how to use it and all about it super helpful if  I select a file for example let's say I select  

the asset library and I select let's say accent  color and then I select this if we switch over  

to a different tab so this last tab here in  the inspector panel is called the attributes  

inspector I can configure different attributes  about what I've selected in the editor here so  

for this accent color I could select what devices  I want it to be available on does it appear on  

light dark or any and then actually I can I can  choose the actual color for example for images  

for example I can select an image and you can see  there's all these different attributes that I can  

set in this attributes inspector if I select a  file for example I can go over to the identity  

and type inspector which gives me information  about the file itself such as where it's located  

and is it part of this project like right here  now this is where it gets really interesting if  

I go to the attributes inspector and I highlight  a component here you can see that I can configure  

different things for that image component you  know how we were writing code right here for  

Corner radius well I'm not limited to just writing  code I can actually modify things here for example  

you can see here that I have a corner radius it  20 and this is because it's reading the code that  

I've written so I can see it here if I wanted to  change this to let's say 10 I can either modify  

the number here or I can change the attribute  to 10 right there and you'll see it reflected  

in the preview and also the code and if I'm not  sure about what modifiers are available to me  

for the image component I can come down here I can  then I can take a look at the different available  

modifiers I can type in one to filter for example  if I want to make this image smaller I might add  

a resizable modifier actually I might not need to  do that through here because I can just modify the  

size so for example if I let's say change the  width to let me just type this out 200 and um

300 or something like that then I can change  that right there now you'll notice that it  

just sort of cropped it it didn't actually change  the image size if I wanted to actually change the  

size of the image I would need to add a modifier  here called resizable like that and then you'll  

see that now it actually changes the size of the  image rather than just cropping it furthermore do  

you know how in the text element here we had  added padding right so there's this padding  

modifier right here if I got rid of this padding  you'll see that it goes back to being too close  

to the image but what I can do is I can just  add top padding so I can select that top and  

furthermore I can either leave it to the default  or I can change the amount of padding that I want  

and then you can see it reflected here in the code  so using this inspector to add and edit modifiers  

for your element is also a very good way to learn  what the code representation for that would be and  

if you continue building apps and working inside  xcode there come to be a point where it's faster  

for you to just type it out rather than going over  here into the attributes inspector to configure  

things because you'll notice that as I'm typing  things there's something called autocomplete  

right typing that out I just had to type dot Cor  and then enter and then 10. and just typing that  

out takes it's way faster than clicking this  and then coming here and selecting things so  

there'll come a time if you keep at it where  you just remember these modifiers and you can  

just type everything out in code and I want to  point out something else as well with this text  

element you can see different types of attributes  that you can configure versus the image element  

so for text obviously you can configure the font  the weight the alignment and the line limits and  

things like that with the image you get different  things so that's the important thing to know about  

the inspector panel let's move on to this strip  along the top called the toolbar now there are  

a few remarkable things about the toolbar you know  how I said if you highlight a component right here  

and you go over to the attributes inspector  you can configure different properties for it  

well what if you don't know what components are  available to you in Swift UI to build your user  

interface with well that's where the library comes  in handy if you click on this little plus icon in  

your xcode toolbar that brings up the library and  there are few different tabs here but we'll go  

through the first tab because that shows all of  the different views and components that you can  

add to your user interface and the best thing is  that you can either double click this or you can  

drag and literally drop it into your code editor  and then you can see what the resulting code would  

be so this is what a button looks like you can  see here it's green and it's green because in  

our asset Library we change the accent color to  be a default of green so actually I don't really  

like that so why don't we go ahead and just  change that to a the default blue for example  

so we'll go back to the content view you'll  see that the button is blue furthermore this  

text inside the button here you can change that  to say you know tap on me and then inside here  

action you see this is uh opening bracket  this is a closing bracket in between these  

two brackets you would put the code that you  want to run when the user Taps on the button  

let's open up the library again for example if  you know what you're looking for you can just  

filter you can add a toggle if you don't know what  you're looking for you don't know what this is you  

can always look at this documentation on the right  hand side again you just drag it and drop it and  

let's put that on a new line and you can see there  is your toggle switch now the library doesn't only  

have views that you can add also has a collection  of modifiers see that's what what the second tab  

is so that also answers the question what if you  don't know what modifications you can do to those  

elements again you can try to drag and drop these  different things see their blur effects accent  

colors brightness clip shapes like all sorts of  things you can explore here's one that we just  

used Corner radius gives you some documentation  about that you can have different code Snippets  

like if you can't remember how to write something  in the Swift programming language you can look it  

up here so let's say an if statement this allows  you to specify different branches of code like  

if this is true then do this if it's not true  like if it's false then do that that's what an  

if statement is and then you can just drag this  and drop it in here and you can look at what that  

Swift Code looks like so this is a great way of  actually learning as well because you can see  

what the code representation of a button is you  can see what a code representation of a toggle is  

and you can don't forget you can put your cursor  on that and then you can configure that toggle or  

button over here in the attributes inspector now  returning to the library for a second we also have  

let's get rid of this uh you also have easy access  to all of the images you've added to your resource  

libraries you also have all of the custom colors  that you have specified in your resource library  

in this last one surprise are the symbols so you  don't even need that SF symbols app although that  

does give you an easier way to browse because all  the icons are broken up into categories but this  

is another way here's the one we use for scribble  variable so the library is very very useful  

also in the xcode toolbar are the buttons here  to hide and show the file Navigator and the  

inspector panels respectively another thing I'll  draw your attention to is this status right here  

this tells you what xcode is doing behind the  scenes sometimes when you just launched xcode  

and you're booting up your project or you're  starting a new project you'll see you're going  

to be waiting you're going to see a progress  indicator and it's going to tell you what's  

happening behind the scenes also you'll notice  that there's your product name right here and that  

might seem a little redundant because nothing  happens but it's because sometimes for larger  

projects you have what's called an xcode workspace  and you might have multiple xcode projects inside  

a single workspace but more importantly for you  right now is probably this area right here so  

this indicates what project you're looking at and  this indicates what simulator you want to use now  

before we get into simulators let me first mention  about this preview right here so this preview is a  

great way to take a look at what your code looks  like visually you can even interact with this see  

I can tap on this I can toggle the switch right  like that now a preview is great for seeing how  

this single view or screen looks like however  if you want to go through the flow of your  

multi-screened app you'd want to launch your app  either on your phone on your actual device or on  

an iOS simulator which is what you are selecting  up here so a simulator is just exactly what it  

sounds it's going to be a representation of your  app on a virtual device that appears on your  

screen so let's let's show you an example of this  now just a note before we do this after I show you  

the iOS simulator I will show you how to run it on  an actual device okay so let's go ahead and select  

iPhone 14 pro and look at this play button right  here right we are going to tap on this button  

which will build the project and it's going to you  can see the status part is is doing stuff xcode's  

performing all of these operations behind the  scenes and it's getting ready to launch your app  

inside a virtual simulator which it'll take some  time if this is the first time you're launching  

the iOS simulator give it some time it's going  to bring it up on the screen but you'll notice  

there's a stop Button as well so if you want to  cancel the operation just go ahead and hit stop  

all right so my iOS simulator has launched here  it is I can tap on this and drag it around I can  

interact with it if I had multiple screens I could  navigate and use my app there are different things  

you can do here such as rotate the orientation or  change the orientation I mean you can also take a  

screenshot you can even take a video actually  in one of these menu options up here you can  

hit the home to go back to the home screen and you  know this this is really a simulator you can have  

different contacts you can have different apps in  here but this is primarily to test your app under  

different conditions if you dive into the menu  you can simulate a lot of different scenarios that  

would happen with a real device so you can check  out all the menu options here but what I want to

um right here so we can simulate a fall you can  play around with face ID you can yeah there's a  

lot of different things you can do in here you can  even put in a custom location so you can simulate  

as if the user were at whatever location that you  would want if you're building let's say a Maps  

app or something like that under the debug menu  you can simulate if the device is low on memory  

you know there's a lot you can do here and that's  why the simulator is so helpful however there is  

a limit with what you can do on the simulator it  is not perfect the best thing would be to actually  

test it on a real device but before we do that one  more thing I want to mention about the simulator  

is that you can have multiple simulators open at  the same time so you can hit stop you can pick a  

different one like let's say iPad or iPad Air and  you can launch that and you can have two cylinders  

up and running at the same time another thing  you can do with the simulator is you can reset  

it so you can either restart the device or you  can completely erase content and settings which  

would be kind of simulate a brand new phone type  of feeling okay so if you want to run your app on  

an actual device what would you do well you would  need an iPhone cable and you would need to plug  

your device into your computer or your laptop  so I'm going to plug mine in what you're going  

to see on your phone if it recognizes your phone  at all is you're going to see a menu that says do  

you trust this computer if this is the first  time you've plugged in your phone it's going  

to say that and you're going to say trust you're  going to enter in your passcode and here you can  

see that it's preparing my phone for development  and then what you should see is your device here  

now for me I haven't updated my iOS version on  my phone yet so it's telling me that I I'm on  

15.6.1 and because this is the new xcode 14 it's  running things on iOS 16. it can't put this app  

on my device until I update to iOS 16 on my device  however if in theory we didn't have this problem  

my phone would show up right here on the list and  I'd be able to select it like that just like that  

and I would be able to hit this button to run and  it would actually launch the phone just like you  

saw it launched in the simulator except it would  launch it on my phone and I would get to interact  

with it so that's a really cool way to build  something and very easily put it on your device  

and go around and show people now the ability  to do this to put your app on your own device is  

for testing only so in about 14 days I forget if  it's 7 or 14 days it will start to expire and it's  

going to warn you about that and that that point  in time you either plug it in again and reinstall  

the app on your device again to get another 14  days or if you want a more permanent solution you  

need to sign up for the Apple developer program  which is a paid program you can Google it which  

would then give you the ability to install your  app on your devices for the long term as well as  

to publish it onto the App Store as many apps that  you want alright so now you have a real sense of  

building your app you know how to preview your  screen using previews you know how to test your  

app on the iOS simulator you know how to test your  app on a real device so how do you actually submit  

your app into the App Store and get it approved  so that it can be used by millions of people let's  

talk a little bit more about that Apple developer  program I just mentioned so if we pull up the  

Apple page on the Apple developer program it's  about a hundred dollars USD to enroll per year  

and that allows you to submit unlimited apps into  the App Store it allows you to invite beta testers  

to your app and they can you can make it available  for them to install here it says you can put it on  

the App Store and distribute your apps you can get  analytics about your sales about like Impressions  

on your app store listing conversions on the you  know clicking the download button and things like  

that and you get a couple of credits to connect  with apple experts to troubleshoot your issue so  

once you enroll in this apple developer program  you have access to What's called the App Store  

connect and as it sounds it's basically your  dashboard for all things that have to do with  

the App Store now these are some of the apps that  they're not currently all on the App Store however  

I want to show you an example of how you would  list your app and then how you would use xcode to  

deploy your app into the App Store and deploy is  just a fancy word of saying sending or installing  

so let's take this for example I'm going to click  into this existing app store listing if you were  

to create a brand new app you'd click this plus  button to create a new app store listing and in  

here you would configure all things about your  app such as the screenshots app information  

pricing availability you can manage ratings and  reviews you can configure in-app purchases and  

subscriptions and promotions and things like  that and this is where you'd also put your app  

store description now once you've configured all  of this app store listing information what you'd  

want to do is it depends what platforms you have  but for iOS come into here and you would specify a  

new release so we are at 1.0.3 and here you can  talk about what's changed in this version you  

can add screenshots for this specific version  write the description all of this metadata is  

associated with that version and then when it  comes down to here build this is where you are  

going to specify your xcode project so how do  you send your xcode project from xcode to App  

Store connect specifically linking it to this  app store listing so you might think that oh I  

need to zip up all my files here you know all  these project files that I told you about and  

then upload it here but no it's actually easier  than that so you go into xcode and what you want  

to do once you've tested your project it's ready  to launch into the App Store you go into product  

right here and you choose archive what's gonna  I'm not going to do it right now well actually  

okay let's do it right now so I'm going to  hit archive and it's gonna yeah it's not ready  

it's not ready for archiving right now but you're  basically preparing that package for distribution  

in the app store that's what archiving does  so if I were to successfully archive this  

project then it would pop open this window this  organizer window and I would see my app here  

and if I I don't even have it here  because we didn't set this project up  

um and we didn't connect it to the team that is  associated with this app store connect account  

otherwise my app listing would automatically  appear here but anyhow let's pretend that this is  

the app under archives right here I would see the  archive that I just made right and I would also  

give it a specific version number right so you  can put it right here version two version 1.0.5 or  

whatever it may be and then you would go product  archive and then it would appear in this organizer  

window and you'd be able to select it and then you  would be able to hit a button it would run some a  

couple of checks to make sure it's ready for the  App Store and then it would send that archive  

here and it will know to send it to the app to  the specific version and then it will show up  

here and then once you have that build right here  put in any information that you would want the App  

Store reviewer to know as they review your app  for App Store certification and then you just  

hit the release button you can also specify when  to release it you can manually release it after  

it gets approved or you can automatically release  the app after the reviewer approves it and that's  

pretty much how you publish an app onto the  App Store now this is the end goal of all of  

us developers right but before you even get there  in the process of building your app you're going  

to run into obstacles and roadblocks and there's  going to be code that doesn't work the way that  

you intended it to work how do you troubleshoot  these issues and how do you resolve them let's  

take a quick look at debugging using the tools  in xcode which is just the fancy way of saying  

fixing your bugs and resolving your issues okay  so we're back inside xcode you'll notice that  

when we launched this project in an iOS simulator  that this tray this debug area popped up now I  

mentioned you can tap on this button to open this  area but it popped open automatically because  

there there was diagnostic information to display  furthermore there are two panels here and that  

is controlled by these two buttons so this one  hides the right one this one hides the left one  

or shows it and this trash can icon clears this  sort of log right here so in order to debug your  

code oftentimes it's just a process of trying  to figure out where the problem is happening  

and then walking through step by step as the code  is being executed and looking at if everything  

is as you expect so once you can identify where  things are going wrong then you can see what the  

issue is and fix it so here are some methods to  display information and then also to walk through  

the code line by line let's start by removing  this toggle element and we'll use the button  

right now so let's say when the button is tapped  on we are going to print something out into the  

uh the console window here so let's go ahead  and launch the simulator again in an uh on an  

iPhone 14. so this is a subsequent launch so it  should be a lot faster all right so when I tap  

on a button you can see that each time I tap on it  it runs the code inside here and it prints it out  

right furthermore we can set What's called the  break point inside xcode so you see these line  

numbers if I tap on line 14 I add this blue marker  here when the code is running if it gets to that  

line where I have this blue marker it's going  to pause the execution and then I can go peek  

at different things to see what's happening so  let's try that out I've set a break point on this  

and if I tap on this now it reaches here and  it highlights this line in green because that's  

where the execution it's about to execute that  line of code it hasn't yet because it sees I've  

set a break point it stops there and then at this  point I can peek at different things I can examine  

different variables or components or whatever  the case may be furthermore once the execution  

has paused on one of my breakpoints I can start  stepping through the code line by line and that  

is controlled by these buttons here so this button  here is just continue the program execution which  

is basically like continue executing from this  breakpoint so then it's going to run this line and  

keep going or this one right here which is step  over which is then going to continue to the next  

line of code like that you see what just happened  it executed this line and then it moved to the  

next line and it stopped again so this way you can  control the flow and you can slowly diagnose what  

is going on now as a beginner sometimes you're  going to accidentally set a breakpoint and you're  

not going to know how to turn it off so here's  how you get a breakpoint away you can either tap  

on it to disable it or you can completely drag  it off the line and get rid of it you can tap  

it off you tap it on you drag it off furthermore  if you have multiple break points let's say here  

and here you can go over to the Navigator  there's a breakpoint navigator it'll tell  

you exactly where you've set break points in your  project it even shows you which ones are disabled  

okay so I think that's a really good starter  primer to debugging an xcode there's obviously  

a lot more that you can do once your code gets  more complex but it's a little hard to demonstrate  

those things with this simple project again check  out the beginner app series that we have here on  

the code with Chris YouTube channel and it will  talk about all of those things what I want to  

show you next are some cool tips and tricks to  make using xcode a lot more fun and efficient for  

you let's start off with the basic thing which is  comments Now comments are basically little notes  

that you can leave yourself without affecting the  code so it is just documentation or comments for  

yourself to understand what's going on for example  up here on top of the file you'll see these two  

forward slashes that indicates uh the start of a  comment and anything after that for that entire  

line will not be treated as code so this is just  information right this is not code that actually  

gets run so for example as I'm writing this  code and I want to remind myself what these  

things are I can write two forward slashes and I  can write vertical stack layout and that is just  

treated as documentation it's not code that will  be run I can write it here image for the plant  

I can write down here label for whatever now this  is not the best use of a comment because this is  

just describing what this element is anyone who  is fluent in Reading Swift Code can immediately  

see this and that makes your comment irrelevant  like they're just going to understand what this is  

oh I know that's an image I know that's a label  I know that's a vertical stack the best use of  

comments is actually to describe your logic in  your head so if you have multiple people working  

on the same project or you're going to pass off  this project to someone else it's very helpful  

to describe why you're doing the things you are so  it's literally like uh you know a note that says  

you know I'm doing this because of this  or whatever and like watch out for this so  

when someone reads your code they can read these  comments and get the context for why you're doing  

what you're doing the other cool thing you can do  with comments is you can comment out lines of code  

for example you want to test something you don't  want to print hello just put two forward slashes  

in front of it and when you put two forward  slashes like that the it's not going to execute  

that line of code and you can very easily just  uncomment it if you want to comment out multiple  

lines of code you can also use forward slash star  and star forward slash and anything in between  

those two markers will be treated as a comment as  you can see here can see here on the preview it's  

going to disappear okay so that's commenting  and documentation the other thing I want to  

show you is navigating around in the editor area  because that's where you're going to be spending  

a lot of time so this breadcrumb area at least  that's what I call it I don't know if that's the  

official name but you can see it's sort of like  a breadcrumb where there's your root node folder  

there's your file and this is within the current  file so if this file gets really long and there's  

a lot of code you can tap on something to jump  right to that section now that you know how to  

use comments you can actually also put different  sections yourself using comments for example  

this is this is the format you would use you type  mark followed by colon and a line and you can say  

this is uh for previews you can see this is bolded  because this is a special syntax right here and  

you can also see a line going across which gives  you some visual separation and when you tap on  

this now you can see that that note is right there  and there's a line here so that helps you sort of  

uh section your file and group group your long  code file into more legible chunks now the other  

thing is that when you start adding views you're  going to have more files and sometimes you'll be  

working in this area then you're going to jump  to another file and work in this area and then  

you just want to go back so instead of tapping  on this file and going back here you can very  

easily use the back and forward arrows they work  just like a web browser back and forward so this  

is very handy there are even shortcut keys  to do this as well so you can find them in  

here and navigate go forward and backward this  is your your keys right here another thing is  

that sometimes and you saw me use this earlier  sometimes when let's say your code gets really  

long and you want to collapse this element because  all of this code right here is inside this v-stack  

so you can collapse it and there's also shortcut  keys for this this one I usually use right here  

code folding fold and unfold this I usually just  use shortcut keys so for me it's command option  

and then left or right and that will collapse it  so you can do that now I'm going to talk about  

searching through your project first of all if  you press command F you're going to bring up  

this little search menu here and you're going to  be able to look for something inside this current  

file right there but if you want to search  throughout your entire project you can also  

do that press command shift and F and that you're  going to be looking through your entire project

okay it's going to tell you all the lines here and  this is useful in some cases as well tapping on  

any of these lines will bring you to exactly that  file in that section all right now I want to talk  

about bringing up documentation because that is  oftentimes very helpful when you're starting to  

learn so you can either place your cursor on  the component and then you can come here into  

the quick help right here and you can look at  the quick help documentation here if that's not  

enough you can also open developer documentation  and open that up right here however there's an  

easier way if you hold down option and you see  that when I hover over image my cursor turns into  

a question mark and I tap on that it's going to  bring that up right there so hold down option or  

alt it may be on your keyboard and it turns your  cursor into question mark so that's really helpful  

so I hope that was helpful if you ever  need a reminder simply use the timestamps  

and chapters below the video and if you want  to keep growing your app development skills  

I recommend that you try our beginner  app challenge next it's going to help  

grow your app skills and give you more  practice inside xcode I'll see you there