A lot goes into making mobile applications, but they aren't made by magic. In this article, I'll discuss the three main components of mobile apps and explain what they do:
Before a developer writes a line of code, there needs to be a plan. Usually this plan is created by the product manager and the app designers, and is in the form of wireframes, sketches, flow diagrams, and mockups.
That's a lot of jargon to say that they've planned what each screen will look like and what will happen when I press each button.
Let's use the Headspace application as an example. Here's what their home screen looks like today:
The giant image with teeth at the top is an image made by the designer. The designer gives that image to the developer, and the developer essently drags and drops this image into the correct spot in the code.
Each of the small icons, such as the search icon in the top right, and the "meditate" icon at the bottom, are also made by the designer and added into the code.
Similarly, the font styles, the font sizes, and colors are all specified by the designer.
In addition to the images and colors, the designer or product manager gives a flow diagram to the developers describing all the actions that should happen.
For example, this would specify that when I click the search button in the top right, the screen changes from the current "home view" to a view with a search bar. When I click on the "sleep" icon at the bottom, the screen will change to a new screen displaying all of the sleep meditations available.
These are simple examples, but this "flow" gets complicated quickly when you add in situations like when I'm logged in, when I don't have an account, when I lose internet connection, and when I upgrade to a "pro" subscription.
All of these images, colors, fonts, and actions come together to form the graphic elements of the application. In the next section, we talk about the code, which is the glue that brings it all together.
The code brings everything together. With code you explain to the phone what should happen and when.
For example, let's look at the button just below the image with the teeth that we talked about above. When I click on this "play" button, the app will start playing a ten minute meditation. The button itself is an image that the designer gave to the developer, but the action of playing the meditation is done by the code. The code simply says to the phone "Hey, when the user clicks on this button, I want you to play the audio file called 'daily meditation'. Oh, and while you're at it, change the layout of the screen so it's a solid background with a simple button in the middle to start or stop the meditation."
In a more complicated example, the code might add "... but if the user isn't logged in, why don't you show the log in screen so they can connect first. Only let the meditation play if there's a good enough connection to the internet... and if the user gets a phone call in the middle of the meditation, let's pause the meditation."
The type of code varies with each type of application, but all code provides some sort of instructions like this.
The final element that most applications need is a database. This could be a database on your phone, or in the cloud somewhere. Either way, an app will most likely need to look up some information in a database, just as we look up information on an Excel sheet.
For example, in the Headspace application above, there is a section that lists my most recent meditations. Each time I complete a meditation, a line is added to the database that says a certain meditation was listened to by me on a certain date. When I use the search feature in the app, I'm essentially searching through a big excel document in the cloud that contains all the possible meditations. Similarly, when I login to the application, the application looks up my email in a database and gives the app information like my name and my profile picture.
Usually this database is located in the cloud somewhere, to avoid taking up too much space on your smartphone.
To wrap things up, three main components of mobile applications are: graphic elements, code, and the database. Each mobile app is unique, so there are many parts I have not mentioned here. In general, though, these are three major parts that all apps will have to deal with in one way or another.