I was going through my old Swift Playgrounds projects earlier last week and was reminded of one of the first apps I built during my App Development Journey with SwiftUI. This article is a flashback to Grade 9 when I built an app to help myself learn Chemistry, and how I built one of my first apps using Swift Playgrounds on iPad.
I have always struggled with Chemistry, especially since it involved a lot of memorizing and rote-learning, and my logic-driven self could never get anything to make any sense (except organic chemistry, where I did really well). Perhaps that can be attributed to the way I was taught the subject, or the curriculum of the education board, but that’s a completely different can of worms.
In March of 2022, nearing the end of grade 9, I was struggling to memorize the periodic table… For context, as a part of our ICSE (Indian Certificate of Secondary Education) school curriculum, I had to remember the names of the first 20 elements of the periodic table along with their atomic numbers and electronic configurations. Mnemonics were often used by my peers to aid the retention process for these elements, but they were rather clunky and unrelatable for me, and they would allow you to remember the order but getting the exact atomic number and electronic configuration would take a lot of time. Around that time, a method that I was using a lot for revision: was flashcards, they seemed to work for me since they were really helping me practice active recall.
I had recently, in January of that year, also completed my 100DaysOfSwiftUI course from Hacking with Swift, and was in need for some practice to prevent my programming skills from getting rusty. Swift Playgrounds had also recently launched on the iPad, and I was excited to get a chance to use the iPad ”as a computer”. So I had three things just waiting to be brought together, and that’s exactly what I did…
Introducing Periodic Assistant
I decided to build a dedicated revision app that would make Periodic Table flashcards for me, allowing me to practice the elements of the periodic table with the atomic numbers and the electronic configurations.
I started off by making a [Int:String] dictionary of all the elements on the Periodic table. The keys would have the atomic number, and the values were the name of the element.
I also made another [Int:String] dictionary, this time to store the electronic configurations for these elements. The keys were the atomic number, and the values the electronic configuration.
I created a Settings View for the app that would let me choose the number of elements I wanted to practice, and would pass the chosen values into the main view.
In the ContentView, I made an array of Integers called askable. When the view appeared, this array was filled with numbers based on my selection in Settings.
To pick a random element to be asked, the randomNumber() function chose a random element from the askable array and assigned it to the integer currentAtomicNumber. It also had a for loop that would ensure that the newly chosen element wasn’t the same as the previous one.
Now for the main user interface, I am showing you the first “MVP (minimum viable product) implementation” that I initially made since it is a little less complex but still gets the job done. If you’re interested in seeing the slightly more complex version of the same functionality but with a few added cooler animations, you can view the full project on GitHub.
I made it so that the ContentView would display a question asking for the element with a specific atomic number, and a button to reveal the answer. I can try to recall what the name and electronic configuration was for the shown atomic number and then upon clicking “Reveal Answer,” the element’s name and electronic configuration would be shown along with two buttons to mark it as correct or incorrect. If I remembered the details correctly, I can click the checkmark button, and if not, the X button. Marking it as correct would remove that element from the askable array so it wouldn’t be repeated as a question, otherwise it would just keep it there and move onto the next element. To add some visual feedback, I also made the background material of the ”flashcard” change to green or red for 0.2 seconds when the answer is marked as correct or incorrect respectively.
To sprinkle in a little bit of tactile feedback, I also added in haptic feedback to the app upon clicking the checkmark and xmark button, using the system’s default success and error haptics for a subtle improvement in the user experience.
And voilà! That about wraps up this rather simple yet effective app. Here's how it looks in it's final version:
I am making this project open source, and it will be available on GitHub. Also, it’s important to keep in mind that this is one of the first apps I ever built, so expect the code structure to be *okay* at best.
This app may have raised the question in your mind, “Why did you make an entire app?”, “It’s so easy, why can’t you just remember it?”, “Why not just use a flashcards app online?”, and I totally get where you are coming from. I had a lot of friends ask me these questions when I showed the app to them. But the thing is, this app let me bring two things together; a subject I hated and I subject I really loved. It made Chemistry fun for once (two words I would otherwise never put next to each other), it let me practice the skills I had just learnt from a SwiftUI course and put them into use, and it let me try out the Swift Playgrounds app and put it to the test for building an actual app, something I hadn’t the chance to do until then. A single stone, and three birds down. I used this app for my Grade 9 finals and Grade 10 board exams, and I am more than certain that it did help me for those last minute revision sessions. (I ended up scoring 87% on my Chemistry board exam)
The goal of this article was to share how I grabbed the opportunity to solve a problem I was facing in my own life, and I wrote it hoping it inspires some of you developers to start building your own apps or projects that solve such problems in your life, no matter how small or insignificant they may appear to be; and maybe you can bring something you hate and combine it with something you love to make things more interesting. The only way you end up improving your skills if you put them to use in the first place. A little over two years ago, Periodic Assistant was one of my first apps I ever made and it’s far from a good one, but I went on to making more such smaller projects and then eventually started working as a freelance developer for an app called OneTap, started my own Software Development LLP, Starlight Apps LLP and published two apps there- Linkeeper and snApp- and some of these went on to be recognised by Apple, and I’m continuing to build more software. In fact, I’m currently working on another app built completely on iPad that will soon be published on the app store and I can’t wait for you to check it out! So go out there and build something, build something cool and simple, because something will always be better than nothing.
Comments