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 to 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 an 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, 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. Click Now For Further Info: App Creator Android
How to Build a Shopping App without Coding?
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.
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 the 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.
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.
5 Excellent Platforms for Building Mobile Apps
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 with 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.
If You Want To Know More Visit Here: http://gtscomputers.org/how-to-create-an-app/
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 the 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 see 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 topic on 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’relooking at the object library tab then in the filter box type in “label”.
That 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 center our label on 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.
Create Apps for Android. No Coding Required
If you hover over them, you’ll see their names.
Click on the align icon and out pops this menu.
Choose them horizontally in a container and vertically in a container and then click this button that says to 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 could 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.