Chapter 3
Build your first iOS App
Welcome to the third chapter. I know it’s a little unconventional to write a blog like this but I hope you get the idea here. Every blog is a new chapter in this guide for iOS App Development. Now, we shall create our own app.
Open Xcode and create a new project. Then, select an iOS app as the type of application you’re creating. We will use the Storyboard interface to create the app. Select that option in the options page and the rest of the necessary options are given below.
Then, familiarize yourself with the workspace by exploring the buttons and the menus.
Hello World App
The first app we will build is extremely easy to create. You will find that on the left pane, there are several files associated with your project. The UI can be designed using the Main.storyboard interface. In order to create the emoji dictionary, we need to develop the interface that is shown above.
You can click on the + button on the top left corner to add an object. Add four buttons and a label and design them as shown in the image. To change the background and text, you can just use the pane on the right to edit the button or label.
Adding functionalities to the buttons
Now, how do you get these buttons to work? In order to do so, you need to go to the ViewController.swift tab where you can write your code. The following code will create the method to display the meaning of the emoji when the emoji button is clicked. The logic behind the code will be explained in the next chapter. For now, you should understand the basics of how the dictionary is being created and that we retrieve the label of the selected button and then use that to find the meaning of the emoji selected.
Now, how do you connect the code to the buttons (The UI). Since Xcode allows you to work with the graphical interface and the code seperately, how exactly can we apply the methdos to the buttons? In order to do so, you have to go back to the Main.storyboard tab and then select the button you need to apply the event to, then press and hold the control key on the keyboard and drag a line to the View Controller icon as shown below.
You will then see a menu of options and you need to select showMessageWithSender under the Sent Events option. This will apply the showMessageWithSender method that we created to the button. Repeat this with all the buttons.
Finally, its time to run the app. Xcode has an inbuilt simulator that works quite like an actual iPhone. You can select the iPhone model you want to view it on and then hit the play button. Your app will be displayed and you can see that it works as expected.
If you don’t quite understand how this worked, that’s alright, even I didn’t at first. But once you go through the next chapter, you will understand how the code works. Right now, just enjoy the fact that you just created an app and it works! Goodluck to you and remember that our goal is to create that app that you came up with and once you get familiarized with the basics of app creation, you can start working on the app while reading this guide. But there’s still just a little time left for that. Keep reading new chapters and keep learning!
