develop

How to Make an App for Beginners (2020) - Lesson 1



Sharing buttons:

hello and welcome to how to make an app

for beginners in this video I'm going to

show you how to make an app even if

you've never programmed a single line of

code before. Now by the end of these next

10 lessons you'll have built these apps

and user interfaces and I'll also show

you how to put them on your phone so

that you can show your friends and

family but more importantly I'm going to

teach you the fundamental skills that

you'll need to build any sort of app so

by taking these beginner lessons you're

going to get a really nice and solid

foundation in iOS app development. From

there you'll want to grab my free

7 Day App Action Plan where you can

create a customized app roadmap just to

build your app you also want to join our

active Facebook community where you can

get help and support from myself and the

team and tons of other people learning

iOS just like you so that you're never

stuck or alone on your journey to create

apps. Now the last time I taught this it

was viewed by over 1.2 million people

and tons of success stories came out of

it, ton of people created their own

mobile apps as you can see some of them

on the wall behind me. Now I know that's

all going to come for you too but it all

starts right here right now are you

ready let's do it welcome to CodeWithChris

the place to be if you want to

learn how to make an app. I'm Chris and

I'm so glad you're here first things

first

how do you create an app from scratch

well it all starts with a program called

Xcode where you design the user

interface for your app and write your

code that gets turned into an iPhone app

which you can publish to the App Store

where millions of people can download

and use it before that let's backtrack a

bit though. Xcode is a program you can

download for free and the code I'll be

teaching you how to write is called the

Swift programming language don't be

intimidated if you've never coded before

because I guarantee you'll get the hang

of it

next Xcode can only be installed on Mac

computers but if you don't have access

to one you do not need to spend

thousands of dollars to buy one instead

check out my video on Xcode for Windows

using MacStadium first. Alright so with

that out of the way let's dive in and

let me show you around Xcode so the

first thing you're going to want to do

is to download Xcode if you haven't

already and all you have to do is hit

CMD + Spacebar on your keyboard to

launch Spotlight.

Type in App Store to launch it and then

in the search bar type in Xcode and

that's going to find it now I've already

got it installed so if you don't you

want to go ahead and do that I'm gonna

warn you though it's a pretty big

application so it does take a little

while to install and if you can't if it

gives you an error message or something

like that

scroll down check on the compatibility

if you click it it tells you what

version of macOS it needs for this one

it needs 10.13.6

but when ever they upgrade Xcode this

number gets higher and higher so your

you might have to update your version of

macOS in order to install Xcode also

keep in mind the size here even though

it says 6.1 Gigs it sometimes needs a

little extra space in order to do the

installation so once you have it

installed go ahead and open it you're

gonna be greeted with a dialog like this

what we're going to do in this video is

create a brand new Xcode project so

click on create a new Xcode project if

you don't see that dialog for some

reason maybe you've launched Xcode

before you can always go up to file go

to New and choose project and that's

gonna get you to the same place now

there's a bunch of different templates

that you can start with to help you just

be a little quicker in terms of what you

want to create what we're going to want

in this lesson is to be under this iOS

tab because there are different

platforms you can build for using Xcode

and Swift which is the great thing about

learning these two things but we're

going to do iOS today and we're going

to choose Single View App and that's

going to give us our basic one-page app

or one screen app next we're going to

want to configure some of the options

for our new projects such as what the

name is what the unique ID of it is and

for the product name you can name it

something I'm going to choose hello

world like that the team drop-down you

might not have a team here and that's

not going to matter right now but you

will want to create a team when it gets

to the point where you want to put the

app on your actual device and I'll show

you how to do that

later on in the

series organization name I would either

put your company name or your personal

name and then what's common under

organization identifier is comm dot and

then your name or your company name so

combine with the product name that's

going to be the bundle identifier you're

gonna see this term used quite a bit

it's basically like the unique ID for

the app that you're creating when you

publish your app when you upload it to

the app store and that sort of stuff

you're going to need that bundle ID okay

so next very important is to make sure

your language is set to Swift because

that's what we're learning here you can

leave these guys unchecked and then

click on next and you can also leave

source control unchecked as well we're

not going to go through that right now

go ahead and click create and you're

gonna have your brand new Xcode project

now it kind of looks intimidating

because there's all these checkboxes and

dropdowns and you know this interface to

someone who hasn't seen it before

is pretty confusing but I'm gonna walk

through it with you right now and I also

have a reference sheet for you with a

diagram and all the keyboard shortcuts

for Xcode so make sure you grab that in

the description below so we're going to

start on the left hand side of the

interface and this is the Navigator area

you'll notice across the top that there

are different tabs that you can click it

might not be so clear in the beginning

but these are different navigators that

you can choose by far the most common

one you'll be using is this project

navigator where you can see all of the

files in your Xcode project now clicking

on any of these files will change what's

in the middle that's called the editor

area so for instance right now we have

this first project file clicked on and

that's why we see all of the project

properties in the editor area if we

click on ViewController.Swift

you're going to see that this turns into

the code editor so that you can write

swift code go ahead and click on

Main.Storyboard and this is going to

change into an editor where you can

customize the screen for your app we're

going to be doing this shortly this is

actually called interface builder so you

can kind of get what why that name is

the way it is next let's go to

Assets.xcassets this is where you're

going to put all the images for your

project that you're going to use and

then Launchscreen.Storyboard is

another sort of interface builder file

where you can customize the launch

screen and then the info.plist has some

further properties for your project so

at a high level those are the files that

by default are included inside your

Xcode project now moving along to the

right side of the screen we've got the

utilities pane and what you see here

depends on what you're clicking on

inside of the editor area so it's like a

further drill down so for instance if we

go into the Main.Storyboard and I

click on this white area which is my

view or my screen it's going to show me

further details about that and in the

Viewcontroller.Swift

if I click on let's say some piece of

code then it's going to tell me

something related with that but keep in

mind that again there are some different

tabs with this utilities pane as you can

see up here so if we're going into the

Main.Storyboard you can see that

there are a couple more tabs and that's

because I can configure properties for

this element so it looks like Xcode has

experienced an internal error but

usually these are fine you can just

close the project and we launch it I'm

not going to do that right now it's fine

across the top of the interface you have

your Xcode toolbar now on the left side

of the toolbar you have some buttons to

run your project and stop your project

and then to the right of that this is

actually a drop-down where you can

select the destination on which to run

your project now if you plug in your

phone you can actually select your phone

from that drop-down but if you don't

have a phone plugged in don't worry

because Xcode has a bunch of simulators

where you can run your project on and

it's going to show it on the screen

we're gonna do that in just a second in

the middle here you have your status bar

it's gonna show you what's going on with

your project what it's doing right now

and then on the right-hand side there

are a couple of more controls here which

we're going to get to in

second but in the rightmost part of that

toolbar you're gonna see these buttons

which are really helpful to you right

now it's just to hide and show these

different areas that we're talking about

if you click this middle one you'll

notice that it brings up this little

tray down here that we really haven't

talked about yet and this pane down here

is called the debug console and when

you're running your project and let's

say an error happens you're gonna get

some details about that error in this

debug console so by default it's hidden

if you want to show it all you have to

do is click this button to bring it up

so these are the major sections of the

Xcode user interface it's not that

complicated once you know right what

we're gonna do now is go ahead and run

our project on a simulator so in that

drop-down that I showed you by default

right now it's iPhone XR you can

select any one you want to try out and

just click this big play button right

here it's going to launch that the iOS

Similar now the first time you do this

it might take a couple of minutes but

then subsequent times is going to be a

lot faster after the simulator has

launched so you actually don't really

need a physical iPhone device if you

don't have one you can still build and

test your app now there's one quick

thing I want to mention and that is if

your simulator is way too big for your

screen and you can't see all of it you

can actually scale it down so you can

either go up to the menu of the

simulator and choose you know physical

size or point accurate or pixel accurate

you can use these shortcuts CMD+1,

CMD+2 or CMD+3 to change

the size of the simulator that you see

so just a handy tip for you in case the

simulator is way too large for your

screen so when your app has launched

you're going to see this white screen

and that's because we haven't really

added anything to our app yet but before

we do that let's talk about how that

Xcode project turned into this app that

I'm seeing in the simulator this top

layer is the view

it's the screen that the user sees now

you can configure this view from the

Main.Storyboard file in your Xcode

project

the second layer under that is called

the ViewController. Now this code file

is responsible for managing the view for

instance when the user taps on the view

it's going to let the view controller

know and then you can write code inside

that view controller to handle that tap

to either run some process in the

background or maybe display some new

information on the screen you get the

idea now this view controller is

represented by the ViewController.Swift

file in your Xcode project and as

we said before if you click on that file

the editor area turns into the code

editor where you can write Swift code to

manage the view now if your app has

multiple screens in most cases each

screen is just going to have its own

view and view controller now let's go

back into Xcode and we're going to stop

our project and we're going to add

something to the view so that there's

something to see let's hit on the stop

icon right here and then click on main

storyboard so you're seeing the

interface builder and now I'm going to

introduce you to this button here called

the library button so if we click this

it's going to bring up a list of objects

or UI elements that you can add to your

view type in the label to search for

this guy and all you have to do is click

and drag it onto your view like this now

you're going to see that label on your

view right here now you can drag it

around and you can position it but

that's not really going to do anything

because Xcode actually has its own way

of positioning and sizing layout items

Xcode uses a system called auto layout

to position and size the elements on the

screen this system makes it easier for

you to design a single interface that

looks good on iPhone, iPad and all the

other screen sizes of future iOS devices

now basically all you have to do is

specify a list of rules for each element

that dictates how it should be

positioned and how it should be sized

relative to other elements on the screen

for example this element should be the

same height as this other element or

maybe this element should be centered on

the screen these rules are called

constraints and in lesson two you're

going to learn a lot more about Auto

layout and Auto layout constraints but

for now let's jump back into Xcode and

take a look at how we can position and

center our label on the screen alright

so back in interface builder I want you

to select your label just to make sure

that it's highlighted and then down here

there are a couple of buttons where you

can add Auto layout constraints so click

on not add new constraints but this

button called a line because we want to

basically align this label in the center

of the screen so we're gonna check

horizontally and vertically in container

and then click add to constraints and

you can instantly see these lines here

that represent the constraints you just

added as well as the label being

centered on the screen if you've made an

error don't worry

check it out right here this is called

the document outline and it basically

shows you all of the elements and all of

the constraints that are in your view

right now so just open up constraints

you can highlight your constraints that

you've added maybe you've made an error

or something like that you can either

delete them right now I can hit delete

and get rid of them or if you highlight

them in the utilities pane on the right

hand side in this size inspector or they

there's different inspectors that you

can select make sure that you're looking

at either the attributes inspector or

the size inspector and then you can edit

some of the properties for your

constraint I'm going to show you just

the leading them right now off of the

document outline so they're gone I'm

gonna do it again so you can hit your

label now and you can go into a line and

select horizontally and vertically in

container and then add two constraints

like that the next thing we're going to

do is we're going to edit that word

inside the label so make sure your label

is highlighted and then on the right

hand side again make sure you're looking

at the attributes inspector right here

under text you're going to be able to

just type in whatever you want I'm gonna

type in hello world and voila so click

on the Run button on your Xcode project

and it's gonna launch the simulator once

again and you should be seeing something

that looks like this

congratulations you built your first

step to get a copy of the recap notes of

what we went over today as well as some

practice exercises just click right over

here or find it in the description below

in the next lesson you're going to be

building this in Xcode but first if you

like this video please give it a thumbs

up and subscribe to my channel by

hitting that red subscribe button below

and if you don't want to miss the next

lesson just hit that Bell icon to get

notified of when it gets released now I

want to turn it over to you with the

skills that you're going to learn are

you going to build an app or a game let

me know by leaving a quick comment below

and then just click on that thumbnail

for lesson 2 and I'll see you there bye

for now