How to Make an App - Lesson 1 (Xcode 16 Updated)

welcome to how to make an app for beginners now it doesn't matter if you've never coded before by the end of this video you will have built this app now I know it looks simple but it's so powerful because you will have proven to

yourself that you can make an nap and often times that singular belief is all it takes for you to continue growing your skills building bigger and better apps and potentially even starting a career in app development now maybe

you've been doubting yourself or maybe you've been wanting to build that app in your head for the longest time or maybe you've even tried coding and failed we're going to turn that all around my singular purpose for this lesson is to

help you believe that you can build an app and I think that once you realize that it's not as hard as people make it out to be you'll be excited to continue to grow your skills and build bigger and better apps so I really hope that you

watch till the end and you see what happens quick note in case there's any doubt in your mind why I am the right person to teach you this stuff my name is Chris and I've been teaching app development foundation since 2013 code

with Chris is also the largest iOS Channel on YouTube and the last time we did this training series it was viewed by over 5.4 million people this lesson series that you're about to watch has

even been used inside School classrooms and Apple retail stores now all that is just to say that you're in good hands I'm so excited you're here let's roll up our sleeves and get

started I'm going to walk through this diagram and then after I'll tell you where to get all of the pieces it all starts with the xcode IDE now IDE stands

for integrated development environment which is a term for the application and all of the tools a developer uses to build something for the rest of this course we'll simply call it

xcode this is where we build our app by writing Swift Code building the user interface or UI for short and connecting it with all of our data Swift is the programming language we use to express

our logic and to tell the system what we want to do we can even build the UI through Swift Code as you'll soon see now Swift UI is a UI framework that

makes it easy for us to rapidly build apps for all of Apple's platforms a nice benefit of learning xcode Swift and Swift UI is that there are the same

skills and tools used to build all apps for all of Apple's platforms including iOS iPad OS TV OS watch OS and Mac OS

and in some cases your app will be able to work on multiple platforms without much changes at all now once your app is built you can distribute it with Apple

App Store this is done by joining the Apple developer program which requires an annual enrollment fee once you're enrolled you get access to multiple benefits including the App Store connect

portal test flight and the provisioning portal there are some more benefits including access to Beta software and support from Apple engineers and I'll provide a link to the full list below

the provisioning portal gives you access to tools for identifying and code signing your app it's like putting your signature on the app so that Apple can identify who built it and this is important for the safety of the end

users downloading your app and it's also important for you because it stops malicious coders from pretending to be you once your app is in a testable state test flight allows you to invite people

to download and beta test your app they'll be able to send feedback and Bug reports directly to you through the test flight program use test flight to ensure that your app is as polished as it can

be before launch and finally App Store connect is where you'll create the app listing for your app including all of the metadata and screenshots if your app has inapp

purchases this is also where you would configure them once your app is tested and the listing is ready you can upload the app from xcode to App Store connect from there the certification team at

Apple will review your app to ensure that it meets the App Store quality guidelines this takes a couple of days and don't worry if you fail because you can fix whatever they point out and resubmit it for review if everything

looks good they'll approve the app and your app will be live congratulations all right so where can you get these different pieces of the Apple developer ecosystem you can

download XU for free from the Mac App Store I'll provide a link below you don't need to get Swift or Swift UI those just come with xcode as for the Apple developer program

I'll provide a link to the enrollment page below I want to mention that joining the Apple developer program is completely optional if you're your goal isn't to distribute apps into the App

Store don't join it you'll still be able to learn how to build apps for yourself now that you have a general idea of the app ecosystem let's start by downloading xcode and I'll show you how

easy it is to use it to build an app there are a couple ways to download xcode if you already have it installed you can go ahead and skip this section however if you don't the easiest way to

do it this is to hold command press spacebar to launch Spotlight on your computer and type in app store and let's open the Mac App Store on your computer and search for xcode and then

you're going to click on the listing and then download it like that couple of things to note here though uh don't be turned off by the ratings this is the official tool issued by Apple for us to

build apps with also take note of the large file size in my experience it does take more free hard drive space than this in order to have it install successfully and during the installation

process there may be times where you don't think it's doing anything it seems stuck it's going to take a while now if for whatever reason you can't download it from the Mac App Store you can also

Google Apple xcode and click on the listing here and you can download it from the website uh this will just lead you back to where we just were on the Mac App Store however if you download it

from the website do note that you have to sign up for a free Apple developer account or to sign in with an existing one okay so once you have X code downloaded and installed let's launch it

and let's start a new project this is going to be the welcome dialogue for xcode and we're going to start a new xcode project by clicking here you can also go if you don't see this you can go

file new and you can choose project same thing both will bring you to a screen like this where you can choose what sort of project template you want to start with so we're working with iOS make sure

you're on this tab and then go ahead and click app and for here I'm going to gloss over some of these project details because our goal is for you to get that result

and make that discovery that you can build an app so I am going to save all the explanations for lesson two right now I would recommend that you just follow along exactly what I do and get

that result and have that app in your hand all right so let's go ahead and call this L1 demo I think you probably have nothing for under the team organization identifier you can put in

Comm Dot and then your name no spaces and interface make sure this says Swift UI it should be like that by default anyways and language should be Swift now

uncheck all of those if they are checked go ahead click next and choose a place to save it um Source control this should be unchecked I'm just going to save it on my desktop for now since this is a

temporary project now you're going to give it some time it's going to boot up your new app project I'm going to open this window up a little bit you see how fast I was able to see something here on

the right hand side for you if it's a first launch it will take a little bit longer give it a couple of minutes even but but while that is going we are actually going to go ahead on this left

hand side here and click Assets Now this is the asset Library this is where you're going to store all of the image and color assets for your app project

I've prepared a uh an image file that we're going to use for this demo you can go ahead and pause the video and grab any image you want save it somewhere where you know where it is and what

you're going to do is click and drag it into this panel right here or this panel doesn't really matter this is a big panel so let's drag it there what you're going to see is this image asset that

you've added to your xcode project now take note of this name here because we're going to be referring to that image with that name you can rename it by tapping and clicking it like that and

just typing in whatever you want um or you can hit enter and you can also rename it like that so mine's going to be named Niagara FS that's perfectly fine for me so now that you've got that

done let's go ahead and click on content view so by this time you should be seeing something on here and what you see here is a preview of your user

interface so you can see what this screen looks like and this this screen right here on the rightand side is defined by the code that is written on the left hand side I'm going to make

this really easy for you to understand we are going to delete all of this uh user interface and we're going to build it from scratch and you'll see how easy

this is right now it looks like a whole bunch of code that you it's really hard to understand we're going to change that so let's highlight this code starting at

vstack and then going all the way to the end of this line 18 padding and I'm just going to highlight it all just hit delete and then I'm going to press enter

twice so I can make some space in here now xcode is going to throw a whole bunch of Errors because it can't detect anything to display but we are just

about to add some new elements on there so in the upper right hand corner you see this plus icon if you put your mouse over it it's going to say library so we're going to tap on that and then by

default it should be on this first tab actually so I was using it before so it was on the second tab but I want you to go ahead and click on this first tab this one is uh all of the views that you

can add to your screen and I want you to in here type in image and you're going to click on the second one called image and you're just going to drag and drop

it right where all of that code was that we just deleted so this is an image view it it's going to allow you to display an image you're going to click this middle

part you're going to hit enter and you're going to change the text inside the quotes so I'm going to get rid of that um notice that I still

have the two quotes here in between those two quotes we're going to type in the asset name so just to remind ourselves let's go back to the asset Library mine is called Niagra Falls like

that you're going to type in exactly Verbatim what you have here uh including any spaces dashes capital letters anything you're going to type it exactly in between

here because if it doesn't match it's not going to display and uh you can also at this point rename it to something that's easier to type if you want uh you

can do that and what you're going to see is the image this is previewing what we have here now this doesn't look quite right to me so I am going to modify this

image view I'm going to customize it we're going to open up the library Again by tapping that and this time we are going to switch over to the second Tab and these are where all the modifiers

are so modifiers are things that we add to the view to change its properties and attributes first of all let's add something called resizable so you only have to type in the first couple of

letters and you'll find this so this allows you to um it tells the system that this image can be resized so I'm going to click and drag once again and

put it you can either put it at the end or you can uh put it right underneath and right away you give it a little bit of time you'll notice that it changes the other thing you'll notice

though is that the image now looks a little bit squished right it looks squished um and the aspect ratio is not correct we're going to also add a modifier to change that uh but first I

want to round the corners that's something nice and easy and it looks Pleasant so let's go ahead and do that let's add another modifier by opening up the library we are going to this time

make sure you're on the second tab modifiers and search for Corner radius click uh drag and drop again and this is the nice thing we're going to put it underneath resizable you see that

it it's automatically going to put a space for you make sure you don't accidentally put it down here or like after this bracket or anything like that you want to put it after the resizable

so that it's going to look neat and tidy like that and you're going to notice a slight Corner rounding but we can't really see it right so we are going to change this

number let's change it to 10 and see if we see anything I can see slightly more rounding now but take a look at this as well I'm going to leave my Mouse

anywhere on image resizable or Corner radius my cursor I mean and on the rightmost side here you can see a whole bunch of things you can configure after we added that corner radius modifier you

see right here this reflects what we typed in right here and in fact if I press plus you can see it's changing the number right so this is a very easy way

for us to modify the code visually through through an interface here okay so I promised that we would UNS squish this image right uh let's go ahead and

open up the library and we are going to search for aspect ratio and we're going to drag and drop this one right under Corner radius so again make sure you put

it right there and if you accidentally put it right here for example you can go ahead and delete it and try it again now I'm going to put my cursor on aspect ratio because I want to change the type

of aspect ratio we can Define how we want um this to behave let's make a little more space you can drag this and make the preview a little

smaller so the code will fit on one line so you can see here it says fill which is exactly what we have here I'm going to pull down this drop down I want to

find one that's called fit because um that will actually shrink the image down keeping the aspect ratio until it fits the screen which is what the the

behavior that I want to see unfortunately it's not in this drop down maybe uh xcode can't detect it however don't forget we can modify it through

the code as well so I am going to get rid of this fill by just um I'm going to delete it like that and then I'm going to hit dot on my keyboard and out poops

this menu this is called the autocomplete menu and it's going to allow you to select from different options without having to type too much so just by hitting dot it opens up this

menu and it gives me different options now there we have fit right an option that resizes the content so that it's all within the available space both vertically and horizontally let's choose

that and see how that looks perfect that's what I wanted now one thing to note if you press Dot and that menu doesn't pop up that's perfectly fine

just type this out fit and you're going to get the same result next I don't really like how it's touching the edges so let's go ahead and add another

modifier this time it's called padding so we're going to drag and drop that so you can see how easy this is right you don't even have to write all of this

code you can do this visually I like the way the picture looks now let's put a piece of text underneath so we're going to open up the library again you see a common theme here this time we're going

to switch over back to the Views Tab and we're going to search for text you're going to drag and drop that this displays a piece of

text right and you want to make sure that you never um you want to respect the brackets right so you never want to put anything outside of these two brackets because you you see when I

click it right when I click this it shows the opening bracket we have to put all of the components after this opening bracket and uh before this closing

bracket so think of it as a sandwich so there's my text let's go ahead and double click placeholder and once again I can get rid of that text in between

the quotes and I can type in whatever I want but you might get some errors in xcode now or worse yet xcode might not tell you what's wrong and it might just

not show you anything as in what's happening right now so the problem is that it doesn't know how to lay out these two elements how do you want them

arranged on top of each other beside each other it doesn't know luckily we have some called the layout container to tell the system how to layout multiple

elements on the screen so again let's open up the library under views let's search for vertical stack you can type in v stack or vertical stack we're going

to choose this one not not the lazy ones so vertical stack let's drag and drop that I'm going to put this above the image this time you'll see that this one

let's add some space in between it this one comes with an opening bracket and a close closing bracket and in between it says content so what a vstack does is

whatever content is in between the opening bracket and closing bracket it will lay it out on top of each other so what we want to do is we're going to

delete that content and we are going to move this image along with all of its modifiers as well as the text element inside the vstack right in between these

two brackets so I'm going to press command X to cut that code and put my cursor in between those two brackets and press command V to paste it what you're going to see on the right hand side is

now it knows how you want to arrange those elements I want to change the text let's go ahead and add some modifiers right okay let's open up the library

change to the modifiers Tab and we're going to choose one called font and you might not see it right away because I mean the search I guess the word font is in the descriptions of all of this but

we're specifically going to look for one called font there we go let's put that at the end um and then I'm going to hit enter to just organize it a little bit

and with this font one you can change already this is a title font so you can see that it made it bigger um on the right hand side if you put your cursor

on the text you can see the font here refers to title I can go ahead and choose that and choose large title for example makes it a little bigger and uh

let's say I wanted it to be bold let's change the weight to semi bold you see when I did that it added a font weight modifier and set it to semibold so I

could have done this another way I could have actually you know I could delete that and then we could have gone via our trusty

Library method you know and I could add the font weight modifier like that and change this to sem me bold so we would get the same result okay now let's put the finishing touches on this app so

what I want to do is add a black background and then um we're done essentially okay so how do we add a background here so this is kind of not

intuitive but you're going to get used to it is if you want to add a colored background you add a color element to the screen so let's open up our library it's under views and we're going to

search for color and that's the one right there so we are going to um drag and drop it once again we're going to put it above the vstack like that and you can see you can

specify different percentages of green and blue so if I wanted a black background this would be like they would be all zeros and that would be black however there's also a different way to

specify black I can get rid of all of that like this is good if you want a really custom color but there are some presets that you can use as well so I'm going to put color you're going to leave

the two brackets like that and in between those uh two brackets I'm going to put dot it's going to open this up if it doesn't open for you that's fine just

type out dot black but I'm going to choose it from here and that's preset now notice how this color first of all it covers everything second of all it

doesn't reach the edges okay and the reason why it doesn't reach the edges is because this is what's known as the safe area this is where things like the the

battery percentage and like the time displays and down here you have that little handle that you can grab and you can you know

um uh change between apps or minimize an app so if you want your elements or your colors or whatever it may be to go into those zones the safe area you have to

add a modifier to tell it to do so so let's go ahead and add that modifier hit open the library and then switch the modif fires and let's type in ignore and there's this

one ignores safe area so you're basically saying that you don't care about the safe area and you want this element to go into that danger zone or

that safe area now you can see our color covers everything the problem is we don't see anything else so why don't we try making some space in our vstack

right here and highlighting our color with the modifier command X to cut it put it in here command V to paste it what do you know our vstack puts it

arranges it on top of each other but it's probably not what we're expecting right and you can see that it did it in a way it's pretty smart where it gave

each element enough space so this is as much space that like the text needs and then the image and then the black color takes up the rest whatever else is available that's not really what we're

after we want the image and the text is sit on top of the color element right so there's another layout container we can use let's check it out let's go to views

it's called a depth stack or in other words a z stack or Zed stack if you're Canadian like me so this one is going to

be special things can actually sit on top of each other um on the Zed axis in sort of like a a depth you can have a

yeah depth would be the best way to describe it right so let's try this out let's erase content and let's first of all move the color in there uh command X

command V and next we are going to add our entire v stack in there okay so let me just remove some of the space make sure this is very um you got to be very

careful because we're moving things around if you uh misalign one of the brackets here uh it it won't be able to

um read your code properly and it won't know what sort of layout to make so tap on this bracket and make sure that when you do this that it's highlighting the

bracket that you expect it to so you want to grab the vstack along with its opening bracket along with all the contents along with the closing bracket so I'm just highlight all of that

command X and in here inside the uh Z stack before the closing bracket and I put that in

there so what it's going to do is it's going to uh put the color at the bottom and then it's good to put the vstack along with all of its contents on top of

that uh and and so we have this unfortunately our text is not visible so let's go ahead and add um a modifier so

I could just do this and choose white or we could add a modifier and the one that we're looking for is foreground color that's what we would add to change the

color of the text however let's modify it here and see what happens see when I chose white it added the foreground color modifier for us and

set it to color white pretty simple stuff right now comes the fun part let's launch our app now later in this video series I'll definitely show you how to launch this app or any app on your phone

or your device for right now now we are going to run this in the iOS simulator so up here you're going to notice it says iPhone whatever well it depends

what version of xcode you have but I want you to tap on that and you can choose a bunch of different simulators choose choose the latest iPhone that you want I'm just going to choose iPhone 14

and I want you to hit this run button now give it a couple of minutes and then you are going to see a virtual iPhone on your screen I have to warn you though if this is the first time you're

running the iOS simulator it's going to take a few minutes to boot up but subsequent times it's going to be a lot faster now here it is this is the simulator now the cool thing about the

simulator is that you there are some quick buttons here where you can rotate it to a different orientation so you can see what it looks like uh you can take a screenshot you can even take a video

from the menus up here you can hit this to go back to the home screen this is a virtual iPhone for you to test your app now what is the difference between this

simulator and the preview that we had inside xcode well this simulator is great for testing your app because it

has features to uh look you can simulate a shake you can um you can test out face ID you can simulate locations like a

custom location you can simulate a driving car or bicycle ride uh so there are lots of things or tools for you to test your app whereas the preview is

good as exactly that a preview while you are building your user interface if you want to download this project just check in the video description below now I hope this lesson has showed you that

building apps is not some mystical Dark Art granted this app was simple but every lesson that you complete after this one you're going to gain a new skill now just in case you get stuck we also have a free community where you can

go and get help just visit codec crew.

codewithc chris.com so between this lesson series and the community I think you're going to make pretty good progress while having fun and learning a lot I mean these people did did you think I made those app icons up in the

next lesson we are going to dive a little deeper into xcode and I'll explain what the rest of the files in your app project do click over here to visit lesson 2 and I'll see you there