How to Make an App for Beginners (2018) – Lesson 1

How to Make an App for Beginners (2018) – Lesson 1


Hi, welcome to how to make an app for
beginners. If you’ve ever thought about building your own app, this is the video
for you. By the end of this video you will have built your very first app.
Watch all 10 videos and you will have built these apps. Building these apps
will teach you how to build your apps user interface, how to add graphics, text
and even buttons to your app. How to respond to user interaction, how to make
sure your layout works on multiple screen sizes and orientations. Finally
I’ll show you how to install that app on your device so that you can show all of
your friends and family the app that you’ve built. I’m Chris Ching, the founder
of Code With Chris, where beginners go to learn how to make an app with no
programming experience. Building an app is simple there are only two things you
need to know: the first thing is Xcode. This is the application you build apps
with. It’s free use it to construct your apps user interface as well to write code to respond to user interaction and to express logic. The
code that we write follows a certain structure or syntax and this brings me
to the second thing that you have to learn: the Swift programming language. To give you an example of how these two things work together imagine you had to
write in English essay. In this case Swift would be the English language and
Xcode would be your pen and paper. Now here’s the nice thing about learning
Xcode and Swift. These are the same tools you’re going to use for everything in
the Apple ecosystem. You’re going to be able to build iPad and iPhone apps, iOS
games, Apple watch apps, Apple TV apps and apps for Mac. Now that we know what we
need to learn, let’s dive right in. First let’s download Xcode. If you’re using
windows, check the description below for my guide on how to use Xcode on Windows.
if you’re on a Mac, just go to the Mac App Store and download it for free. I’m
going to warn you though: you will probably need the latest Mac OS and a
whole lot of free disk space. Once you’ve got it installed, launch the app and
click on start a new Xcode project. Across the top of the next screen you’ll
see templates for all of the different platforms we mentioned earlier. Make sure
you’re on the iOS tab and choose a single view app. Click Next. Here you’re
going to be able to specify some properties for your project. For the
product name you can just type a name for your app. I’ll just call this AppOne.
You can leave team as is. For organization name you can put your own
name in there and for the organization identifier just put com dot either your
name or your company name and together with the product name that’s going to
form an identifier for your app. The important thing is for the language, make
sure you have Swift selected and you can unselect all of these options down here.
Click Next. Choose a place to save your project. You can leave source control
unchecked and then click create. Say hello to your new project! Now this might
look intimidating but it’s really not. Let me walk you through it. Psst, at the end of
this video I’ll show you where you can download my Xcode cheat sheet. On the
left hand side you have your navigator area. What’s shown here is the file
navigator where you can see all the files in your project.
Each tab at the top is a different navigator type but leave it at the file
navigator for now because you’ll be using this most often. If you select a
file from your file navigator it will change what’s shown here in the editor
area. The interface changes depending on what sort of file you choose. For example,
choosing this project file will let you configure the project properties, while
selecting a code file will let you write Swift code in the editor area.
Furthermore, choosing the storyboard file is going to let you customize the user
interface for your app. On the right-hand side you’re going to find the utility
area. This panel is split into two panes: the inspector pane is the top one and
it’ll show you information and configurable properties for the file or
user interface element you click. On the bottom pane of the utility area is
called the library pane and this contains lists of reusable code snippets
and user interface elements that we can add to our project. Finally along the top
you have the Xcode toolbar. This gives you the controls to run your project, it
shows you the status of your project and on the right hand side, buttons to hide
or show the various parts of the Xcode interface we just talked about. Let’s try
to run our project. Xcode comes with an iOS simulator which lets you run and
test your app without needing a physical iOS device.
Let’s choose a simulator from the toolbar and then click the big play
button here. It might take a few minutes for the first time it runs but this is
going to launch the simulator and you’ll see your app running.
If the simulator is too big on your screen you can go up here to the window
menu and go under scale and change the scaling of the device to fit your screen.
You can also hit on your keyboard command + 1, command + 2, and command + 3. It’s just the white screen now sadly but that’s because we haven’t
added anything to it. Now how did that Xcode project turn into this app that
you’re seeing in the simulator? Let’s break it down: this top layer is called
view. It’s the user interface that the user sees. You can configure this from
the main storyboard file in your Xcode project. The second layer is the view
controller this code file’s responsibility is to manage the view. For
instance when the user taps on the view it will let the view controller know and
then you can write the code that you want to run when this happens. This view
controller is represented by the ViewController.swift file in your Xcode
project. If you click it, the editor area turns into the code editor where you can
write Swift code to manage the view. So back in our Xcode project, hit this stop
icon here to stop running your project. If we want to display something on the
screen we have to add some elements to the view in our storyboard so go ahead
and click on main storyboard here and the editor area will turn into interface
builder and in the library pane that’s this guy down here, make sure you’re
looking at the object library tab then in the filter box type in “label”. That’s
going to show us the label element then simply click and drag that element and
drop it into our view. We’re not finished yet because we haven’t positioned the
label on our screen. Xcode uses a system called Auto Layout to size and position
the elements on the screen. This makes it easier for you to build layouts that
work on multiple screen sizes and orientations. Basically you specify rules
that dictate how your element should be positioned and how they should be sized.
Rules such as this element should be the same height as another element or this element should be 20 points away from the right side. These rules are called Auto layout
constraints. Now you’re gonna learn a lot more about Auto layout in the next
lesson but for now let’s jump back into Xcode and position our label. Now after
you added your label you might have noticed that it also showed up here. This
area is called the document outline and it lists all the elements you have in
your view. If you don’t have this window click this little icon here to show and
hide it. Let’s centre our label in the screen by adding some constraints to it. Click on the label from your document outline to select it and then down in
the lower corner we have these little icons. If you hover over them you’ll see
their names. Click on the align icon and out pops this menu. Choose the
horizontally in container and vertically in container and then click this button
that says add two constraints and then you’ll see the label reposition itself
based on the newly added constraints. Now let’s change the text on the label. With
your label selected you should see it’s configurable properties in the inspector
pane on the right hand side make sure you’re looking at the correct tab and
then scroll to find the text property. It should be the first one and then just
erase that “label” in there and type in “hello world”. Now let’s run the project in
our simulator again. Click this little run icon here and then you should see
this. Congratulations! You’ve built your very first app. Today
you got a tour of the Xcode development environment, you learned about the view,
which is what the user sees, and the view controller whose job it is to manage
that view. You learned that you can customize that view in the Main.Storyboard file in your Xcode project. You also learned that the view
controller is represented by the ViewController.swift file in your Xcode
project. All of this is in my Xcode cheat sheet and it’s free for you to download.
But first if you like this video please subscribe to my channel by clicking the
subscribe button below and if you don’t want to miss a single video, click that
Bell icon as well. 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 are you going to build a game? Let me know by leaving a quick comment below and lastly I promised
you guys my Xcode cheat sheet. Just follow the URL on screen or the URL in
the description below to download it. Thanks for watching! I’ll see you guys in
the next lesson. The video broke up so I have to press record again

100 thoughts on “How to Make an App for Beginners (2018) – Lesson 1”

  1. QOTD ⚡ Are you going to build an app or game? Let me know! 👇 Kick start your own app with my free 7 Day App Action Plan ➡️ http://bit.ly/7dplan

  2. Hi Chris, I have a macbook pro and I just updated it yesterday but I cannot seem to download the Xcode tool. Is there any other developer tools I can use? Or how can I go about in downloading it?

    Thanks J.

  3. dear Chris, please respond, i am an Old Asian woman "57" in the last chapter of my life, i would like to learn something, i promise to be focus, but my Mc/laptop is too OLD, since 2011; my question is …should i invest on new Laptop???? thank you for your time and thank you for sharing your Intel. blessed.

  4. I would like to build an app. Thanks for the video. It looks so simple but I know it will get harder. Also can we reach out to you if we have problems?

  5. For now I would like to build an app then make a game as well in the next steps. I hope I can learn everything I need to learn.

  6. Athaariq Ardiansyah

    I was developed an app from android, now… I need to learn xcode from scratch. Anyway… thanks for your help 🙂

  7. I have a great idea of a dating app. That would make the world better in dating. To be honest it's better than Tinder.

    #sorrytinder

  8. Hello Chris, I just attempted to download XCode on my iMac that is running High Sierra 10.13.6. The app store declined my request because of the OS was not the latest greatest version. My computer is too old to download and install Mojave 10.14. I can't afford a new computer currently. Any suggestions???

    Thanks for your help,

    [email protected]

  9. You think if I made a social networking app at 12 and kept working on programming that could look good on my college paper?. Hopefully I will get expcepted to M I T.

    Okay I’m 12 wtf

  10. Is Mathematics needed, required to build software Apps? especially those topics like Boolean Algebra, Logic, Graph/Set Th., Functions, Calculus, Trigonometry etc…

  11. I have a software I work with I would like to access it from any computer or cell phone what should I be looking for to do this

    I’m thinking more of a portal

    Any recommendations

  12. Hi your explanation was very simple for beginners and I feel interested to watch rest of your videos but may I ask you something it’s really different to create app for ios than Android?

  13. When your so distracted you have to watch the video all over again because I completely missed everything you saying

  14. console onyekwere

    Thanks for the wonderful video, please I need a little assistance, I want to build an Ecommerce online sales app, and can apps formed this way be monetised.

  15. Variety Marketplace

    I would like to build an APP for business … being able to deliver personalized offers to each user.

  16. What if you want to write an app for Android, too? If your app runs automatically and the user interface is to manage data the app produces, will this still work or is it too complicated for for the codeX controls? And can the storage of your app and working on it be offline after the initial download or does that not make the library available? Thanks.

  17. I'm going to try and develop an app for my business. Everything else I've seen through the App Store doesn't work for us. Watched the first video, so we'll see how it goes.

  18. Sir , i have started a business .. and wants to learn how to make an app to increase the sales of my product ..how should I do that …??? Please do reply .
    .

  19. Hello Chris, I'm so excited that I stumbled on your page. I have added my email address to download the cheat sheet but I'm yet to get it. this was done 10mins ago

Leave a Reply

Your email address will not be published. Required fields are marked *