A Swift Experience: The Building of an iPhone Application (Part 2 of 2)

Antonio Conde
6 min readAug 2, 2021

--

Swift Logo. Source: https://blackthorn-vision.com/blog/what-is-swift-programming-language-and-why-should-you-use-it

Here is Part 1 for those curious.

Introduction

Hello world! It has been a long while since I posted my journey on learning the Swift programming language. A lot has happened since I first posted the basics of Swift, but those events are irrelevant to this blog post. I will say this — learning Swift is challenging at first but it becomes an enjoyable journey the more I learned and coded. I enjoyed Swift so much that I started building a simple mobile application from scratch. With that said, today, I am proud to share my journey on the many things I have learned that is associated with this interesting programming language.

First, we will dig deep into the basics of building a mobile application on Swift, and then I will share a detailed journey on how I was building that simple application in a slow but sure manner.

Mobile Application Prototyping in Swift

While most programming languages encourage you to learn the basic codes and then move on to building programs, this is not the case for Swift.

The thing is, you can build a Swift-based application and have it act like an Apple application by using the Storyboard technology. Storyboard is like doing Swift but without the code and more basic features. It gives developers an opportunity to design the mobile application well so that they are more likely to code better and faster.

Seen below is how to set up XCode in order to build a Swift-based mobile application. I would recommend that you guys play this video and the others videos below and not just skip them. Everything seen on this post and the videos will be of great importance.

Once you master using this feature, it’s coding time!

My Mobile Application Development Journey…So Far

As I mentioned earlier, I was working on a mobile application to justify the great things Swift can do. Building it is not as simple as 1–2–3. I literally went through two step-by-step processes to get to where I am right now. I came up with my own phases based on my previous projects and I also read and learned new ways on how to build a simple mobile application. I literally had to explore concepts related to software development, along with user experience (UX) and user (UI) design in great depth.

Phase I: Planning

To be honest, I initially wanted to build a pretty complex mobile application that is comparable to that of Facebook or Instagram. But I decided to give more priority to personal and academic opportunities so I decided to build a simple one instead. And rightfully so. If I were to build a complex mobile application, there will be too many concepts and explanations to make and that will confuse you for sure.

From there, I explored mobile application ideas. Some of the ideas I initially considered were tourism, religion, note organization, and sports. A hundred Google links later, I came up with a conclusion — a simple calendar application would make most sense right now. The calendar will be sports-based and it will be called “GamePlan”.

What happens is that when a user taps on the mobile application, he/she/they will tap on a league of their choice to check the league’s upcoming events. For example, Herbert would like to check the upcoming dates and times for the National Hockey League (NHL). Specifically, he wants to know when the rookie draft is, when official free agent signings start, and when the upcoming 2021–2022 season will officially start. This idea felt right, but I also realized that I needed to avoid legal issues by making fictional schedules (What? Where? When?) and putting generic balls as icons instead of putting sports league logos.

Shown below are a few planning elements I did for the “GamePlan” mobile application:

The application’s icon (GP in small letters; G as in Game and P as in Plan):

The style guide (application colours and fonts used) implemented:

I made sure that the logo would be something that “looks active” and “vibrant”, which is why I chose the colours I chose. I bet the colours remind you of Gatorade, eh?

The sketches I made for the application:

Finally, here are the stock pictures I used:

Source: https://www.youtube.com/watch?v=fKDrB_HI4nY
Source: https://en.wikipedia.org/wiki/File:Baseball_(crop)_transparent.png
Source: https://www.pinclipart.com/maxpin/ibRRJwh/

Phase II: Prototyping

Once I was done planning, it was prototyping time. Initially, I planned to code right away since that was the practice I was familiar with. I did promise that on my first post, but I realized that those plans needed to be modified the more I worked with Swift. While researching, I stumbled upon a more organized process to build a Swift mobile application in prototyping (specifically, by using Storyboard). Upon learning it, I was surprised and amazed this process exists. It felt so right to prototype and build code on XCode at the same time. At least I can slow down and not code right away. I am so glad I was introduced to Storyboard.

Let me share my journey about prototyping the “GamePlan” application in more detail:

I basically enjoyed working with transitions and graphics. And here is a demonstration of the “GamePlan” mobile application:

It was challenging to run the application on an iPhone. It involved me inputting my Apple MacBook Pro account password on the laptop and this video to make the demo possible.

Conclusion

And that wraps up my journey of learning the Swift programming language…for now. I hope you guys enjoyed working with View Controllers, images, texts, buttons, and the everything else seen on the Storyboard feature.

The truth is, I am not finished yet. I am still looking forward to learn the following on Swift:

  • What is the difference between a “class” and a “struct”?
  • How does one build a Swift-based app by using Swift UI instead of Storyboard?
  • How can I translate the UI elements from real elements to those being part of a Swift file?
  • How can I manage events on the application? For example, when I tap on a “Free” button, how can I make a popup that says “You will get this Calgary Flames jersey for Free!” show after the button is tapped?
  • How can I add and implement a database on my mobile application?
  • How can I deploy the mobile application and have it be available on the Apple App Store?
  • How can I build a Swift-based mobile application on XCode while using a Windows-based computer? Shout out to virtual machines.
  • How can I push the Swift-based mobile application code from XCode to GitHub?

These are lots of questions for sure. And I bet you guys are asking these same questions, too.

Those questions could have represented the third phase, which is called “Development”. But I am not sure if I have the time to share that journey. I do have a lot of resources though, so that is not an area of concern. We will see what what the future will hold for me. Stay tuned.

When all is said and done, there were ups and downs, but it was a memorable journey overall. I definitely enjoyed working on all things Swift.

With that said, thank you very much for reading through both of my posts. Swift Up as always, stay safe and happy, and chillax!

If you would like to like post anything related to what I just wrote, feel free to comment on this blog post.

References

Feel free to click this link as I used the links on the text file to make this blog post possible.

--

--

Antonio Conde

Creative. Inquisitive. Cooperative. UX/UI Designer from the YYC. Born and Raised in MNL.