Hello and welcome in this Xcode Tutorial,
you're going to get familiar with the development environment
that you'll be building apps in. I'll show you where to download Xcode
and how to start a new project. And then we're going to go through the major areas of Xcode and then what
each of the files in your project is for. And then finally, we'll wrap up the lesson
with some quick tips on how to navigate around in Xcode
in case this is your first time here. Hi, my name is Chris
and welcome to CodeWithChris. The place to be if you want
to learn how to make it now. Now, before we dive into the wonderful world of Xcode, I have
a quick question for you. Have you tried to learn
how to make an app before? And if so, how did that go? Let me know by leaving
a quick comment below. And on your way down there, if you wouldn't mind,
please hit that thumbs up button because it helps this video out
more than you know. So thank you for that.
All right. With that said, let's dive in. Let's start by talking about where to get
Xcode it's free so you don't need to pay for it, just launch the Mac App Store on
your computer and then search for Xcode. You're going to get to a page like this
in the search results, click into it and you're going
to be able to download it for free. So I've already got it downloaded. So that's why it says update here. I want you to just
ignore the warning here. It's actually a very large app with a lot of different features. It's understandable
that there are a few bugs. And if you look at the reviews, there are people complaining about
other things unrelated to the app. They're complaining about the way Apple is running their business
and so on and so forth. And some of these are very, very old. OK, I want you to take note
of this important information. Click on this just to make sure what
the requirements are to install Xcode and also double check that you have
enough free, hard drive space. Now, in my experience, it actually takes more hard drive space
over time than what it says here. So if you have something like 12 gigs
free, it might not let you install this because during the installation process,
it actually takes up more space. And then I think it gets rid of a bunch
of files and it stops at this size. However, over time, when you download additional developer
components and additional Iowa simulator's, this can
actually get even higher. So make sure you have
sufficient hard drive space. All right. So if for some reason you can't get access
to the Mac App Store, you can also visit the official Xcode
page on the Apple developer site. So the URL is developer
dot Apple, dot com Xcode. And you can immediately click
on the resources link up here and then you'll be taken to a page
where you can download Xcode here. It just takes you to the Mac App Store. Actually, you can also download
beta versions of Xcode. Now, I wouldn't recommend this because oftentimes it actually is pretty buggy,
their beta software. So I would recommend to stick
with the official releases. If for some reason you want to download
an older version of Xcode, you can scroll down here and you
can click this link here. Now, just the note. In order to download beta versions
of Apple software, you need to be enrolled in their Apple Developer program,
which we talked about in the previous lesson to download older
versions of Xcode. I don't think you need to be
enrolled in that program. I think you just need a free Apple ID. And lastly, if you are on a PC,
you're running windows. Check the resources in the beginning
of the course for options for you. All right. So now take the opportunity to download
and install Xcode if you haven't already and then launch it for the first time
during your first launch. It's going to ask you for your administrative password to install
additional development components. You're going to want to do this. So go ahead and enter in your admin
password after you've done that. Let's continue on with
the rest of the video. All right, so now let's talk about how
to start a brand new Xcode Apple project, this should be the first welcome screen
that you see when you launch Xcode. If you don't see this, don't worry. You can always go to file new and choose project otherwise
from this welcome screen. You can go ahead and click create
a new Xcode project from here. From here, you're going to choose
a template for your new project. You're going to configure the project properties for this and then you're
going to choose a place to save it. So let's start by choosing a template. The most basic one for our
purposes is under iOS and app. So go ahead, choose that and hit next. And then here you're going to configure
the properties for your project. So if you don't have
a team here, don't worry. Later on you can add your Apple account here and then you can configure
the team for the project. One thing that you will want to make sure of, though, is to set your
organization identifier here. If you have a business or a website, you
can use reverse domain style name here. Com dot, whatever that may be. And you could even use your first
and last name here if you want. And then here you'd fill in the name
for your app or the product name. So here if I put it in test,
you'll see that this bundle identifier is a combination of the organization
identifier plus the product name. And this together forms this
unique bundle identifier. This bundle identifier is used in different places to identify your app,
such as in the App Store or in the provisioning portal
or in App Store Connect. So this is very important. Don't worry, you can change the bundle
identifier for your project later on. I just want to draw your attention to how
it's formed and what it's used for. All right.
Next up, for your interface, you're going to make sure
that you have Swift UI selected. And for Life-cycle, you're going to make
sure you have Swift UI app selected. And then finally for language,
choose Swift. And for these options,
just leave them all unchecked. Or if they are checked, just uncheck them. Now, a brief note on these
drop downs right here. Over time, as app development for iOS has
evolved, there have been a couple of programming languages and also a couple
of ways of building user interfaces. The latest and greatest
is SwiftUI and Swift. So that's what we want to be using. Let's go ahead and hit next. If you're happy with all of your selections here
and then choose a place to save it, I'm just going to save it on my desktop
so that it's easy to find since I've already got a project there. I was just going to replace it. All right, welcome to your
brand new Xcode project. Now, it might seem overwhelming with all
of the different panels and areas, but it's actually not so complex once
you know how it gets broken down. There are actually only
four major areas of Xcode. Let's start from the very, very left here. We have the navigator panel
or the navigator area. And as you can see here, we have a file listing of all of the
different files in our app project. The Navigator area actually has different
tabs to navigate through different things as well, which we will
get to in future lessons. For now, it's set to the first tab
and we have a listing of our files. When you click on a file, it changes what is shown in this big main
area, and this is called the ED area. It allows us to edit the files
that we choose in the file navigator. You can see that it adapts
to the type of file that you choose. If I choose a dot Swift file,
those are Xcode files. If I choose this XY assets file,
this is an image library. So it's showing me something like this. The ED area is a place to edit
the file that I choose here. So the last tab is on the very right hand side and this is called
the inspector area. And it either shows me additional supplemental information on what I select
in the ED area or it allows me to configure or edit
the thing that I select in the ED area, depending on what sort of ed
I'm currently working in. So for example, this is a Xcode Ed,
because I'm looking at a dot Swift file. So when I hover over or select the keyword
here, if I'm on this quick help tab,
it's showing me some quick information about what that piece
of code or keyword is for. The inspector panel also has
a couple of different tabs up here. For example, this one is an identity tab. It shows me information about that file that I've got selected, about where it's
located and which app it's included in. And if we were building our user interface
now, if I were to select one of those elements and go to this tab,
it would allow me to configure it. So to sum it up, the inspector panel here
is contextual to what you select in the Ed area, and the ED area is contextual
to what you select in the navigator area. So it all stems from what you select here on the left hand side first
and then across the top. We have the toolbar here. Let me explain to you what this is. There's a button here on the very left and very right to hide and show the
navigator and inspector these are handy. If you don't have a lot of screen real estate, next thing I want to draw your
attention to is in the middle here. This is the status bar. It tells you what's currently happening. What is Xcode doing? Do you have any errors? Do you have any warnings
and so on and so forth. To the left of that, you have
a dropdown to select a simulator. And this iOS simulator is basically
a virtual device that appears on the screen where you can
run your app and test it. You don't actually need a physical device. If you do have one, however,
and you plug it in and you want to run your Xcode project on your actual device,
you'll find that it will be selectable from here once you plug it in and then
to the left of this menu, you're going to see a couple
of buttons here to run your project. Hitting this button will actually run your
project in the simulator and hitting this top button will stop
running your project in the simulator. And then all the way on the right hand
side, there are also two more buttons. This is the library button where you're
going to find different user interface elements,
different ways to modify those elements, code snippets,
any assets you've added to the project, the colours that you've specified
for your project and so on. This little library panel
is useful to do a search and to quickly select and add
things into the ED area. We're going to get
to that in the next lesson. But for now, that's the library area. This you probably won't use
too much in the beginning. This is a revision or Xcode review sort of
button that will show you if you're using source control, how are your files
have been changed through time. So those are the four major areas
of the Xcode user interface. All right, now let's go over
the files in your new project. Let's start from the very top. This is the root node
or it's your project file. If you selected the ED area will change
into this configuration screen for you to edit some of those details
that pertain to your project. For example, here's the bundle
identifier that's changeable. You can configure device orientation in which devices, in which platforms
it can run on things like that. If we go down a level, you can see
that there are two folders here. This one is containing all of your
code files and project files. This products, one contains the output. When you build your app and compile it, it gets turned into this app,
which ultimately is that little deployable bundle or package that we
send into the App Store. You don't really have to do too much here
with this, but that's where it's stored. Let's take a look at this file. This will be named after your
product name app, Dot Swift. And you can see here with this main tag
here, this is the entry point to your app. At this point, there's not
too much to configure here. All it really does is create that first view that the user sees,
which is content for you. And you can see that this name
maps to content view that Swift. So let's take a look at this. This file represents
the view that the user sees. Now you can create additional views, but by default, you get this
content view to start with. And yes, it's all code here. So that means that the user
interface is generated by Xcode. But also there is a visual way to customize the user interface,
which you'll see in the next lesson. Let's move on with our other files. This one, as I mentioned before,
is our asset library. This is where we can store the colors
for our app, as well as the app icons, as well as any other images that we
want to add to our project. We just drag it and drop it in here. And this is our image asset. Well, not just images, but asset library. And then we have an info list and this is some additional configuration
information for the project. Here we have preview content and this is another asset library, but these
are only for preproduction assets. So only images and text and colors and things like that that you are testing
with, as the name Prevue suggests, if it's an asset that will ultimately make
it to the app that you're going to push the App Store, then you can put it
in the asset library here instead. So that's a quick explanation of all
of the files in your project. In a nutshell, in the future lessons, we're going to dive deeper into each one
and you're going to see how each of these files play a part in the
construction of your app. The last thing I want to do in this lesson is to give you a couple of quick tips
on navigating around Xcode in terms of going through your files
and also in terms of editing code. So, first of all, let's talk
about navigating around in files. You'll notice these two arrows here. These are really handy because it's going to let you go to the last
file you were looking at. And although it seems a little trivial now, when you're jumping around editing
and files, this becomes really handy. Instead of having to go and reselect
that file from the navigator, you can just hit back and jump
back to that previous file. You'll also notice that you can have
multiple tabs here so you can hold down control and you can click on a file and
you can always choose open in new tab. You can also open in a new
window if you'd like. So since I already have that as a tab, then it's, uh, it's not going
to open a second tab for me. Now, if you want to have things side
by side, you can do that as well. So let's say I wanted to look at both
these files side by side so I can close this and then I can go ahead and
I can add another editor pane on the right hand side so I can split
my editor area into two ed areas. You can see that here I'm looking
at content view that Swift in for here. Let's look at the test up. So there independent areas
and I might want to just get rid of my canvas and then I can
see both of us like that. If you prefer
them to be horizontally stacked, you can hold down option
and you can see that that icon changes. Right? If you hit this button again, it's going
to add another ED area to the right. So you're going to split into three or you can hold down option and you can
add an editor to the bottom instead. So you do that. You can also do that here,
hold down option and do that now a quick way. To launch a file into a split editor
review, so let's say I'm looking at test app and I want to open up content view as
a separate ED area, I can hold down option and click on the file that I want
to open in a separate editor review. So those are some of the ways that you can
work with your files, just to recap, you can navigate,
you can go back and go forward. You can have different tabs. And then also you can split up your editor area into multiple
instances of the editor. Now, I want to talk about editing code because this is a lot
of what you will be doing. And the code looks pretty short right now,
but it can get longer. So it's handy to know a couple
of ways to deal with that. At the top here, you're going to see this
sort of bread crumb menu and you'll notice that that is the root node
corresponds to that, right? This is a folder or group can see that. And then this is the content view, which is the file that you're looking at,
which is here inside. And here we can actually click this and you can
jump to different sections of your code. You can see that content view
matches that body matches that. Right. So this is a great way to jump to different sections in your code file
in case your code file gets pretty long. You can also add different
comments in here that. Will correspond to what you see up here, so you can see here
I've created my own documentation and it. Adds it here. So this is a great way
to organize your file. We're going to talk again
about this in the future. So don't worry if this is
going a little too fast. All right. Now we're going to talk about
this little button here. You've seen me use this to open up the canvas, but you can also open
up this mini map right here. And this mini map will show you
an outline of your Xcode file. You can drag this to scrub
through your Xcode. Unfortunately, I can't do it very much here because this Xcode file
isn't very long. But if you had a really long Xcode file, it would show you the outline
of that Xcode file down here. And you can navigate really easily
by clicking and dragging this. You'll notice that even as I highlight it,
it's going to show me the different parts of my code corresponding
to what we have here. Again, those were just
some quick fire tips. Don't worry if that flew by too fast because we will be using all of these
things together in the upcoming lessons. So that's a quick Xcode
tutorial to get you started. Not so complicated once you
know where things are, right. Just to recap, you found out where to download Xcode
and how to start a new project. You learned what each of the files
in your project is for. And you learn the major areas of Xcode, including the navigator, the editor,
the inspector and the toolbar. Finally, you also learn some quick tips about how to navigate
around with an Xcode. Now, don't worry,
if it's a little bit overwhelming right now, you'll feel right at home with Xcode
as we use it more often together in the upcoming lessons
to help you get settled in. I actually created an Xcode cheat sheet,
which you can print out and keep by your side as you're learning
to use Xcode to get it. Simply go to CodeWithChris dot com and either create or log into your
CodeWithChris account and then you'll find it in the resources link in the top
navigation of your student dashboard. You can also take this same 14 day
challenge on our learning platform. And in doing so, you'll benefit from all of the additional supplementary
material and quizzes. In fact, for this lesson, I have a quiz for you to take
to reinforce what you've learned today. OK, finally, as an additional exercise, I want you to try to start
your own Xcode project in. The next lesson will be diving
into Xcode to build a user interface. So if you don't want to miss that lesson, make sure you hit that subscribe button
below and turn on notifications. All right.
I'll see in that lesson. Bye for now.
