Following the release of iOS 13 for mobile Apple devices, I was really excited to try out some of the new options and features released for developers. Dark mode, better integration with Apple Watch, and new native UI options such as swiping to close views were all added in iOS 13, and I couldn’t wait to get my hands on it and try it out. 

During this same time in my sophomore year of high school, I was currently enrolled in Honors Chemistry. As I went through the course, I had to use many tools in order to access information, including the most rudimentary tool for chemistry students-- the periodic table. The periodic table is incredibly powerful, and it contains an entire plethora of important and useful information on all 118 elements.

In class, students are given paper periodic tables, which contains the most essential information for each element, including the atomic number, which is also the number of protons an atom of the element has, the atomic symbol, the full name for the element, as well as the atomic mass. Despite this, many students used technology to access periodic tables with more information that cannot be fit onto a simple, rudimentary paper handout of the periodic table. Students who wished to know melting points, boiling points, the physical phase at standard temperature and pressure, or even the atom’s density had to either use the internet, other apps, or countless handouts to gather all of this information. This even includes other information, such as the history and uses of the element, and also more obscure information such as the element’s different isotopes. To make matters worse, we had countless handouts in class for all of the formulas, solubility rules, metric prefixes, reaction types, and more! All of this was difficult to access easily without having to pull out a massive binder or click through many websites. 

This problem gave me an idea. Was it possible to build a chemistry and periodic table app that combined all of these extremely important things, including more in-depth information on elements, all of the reference information such as formulas, metric prefixes, and rules, as well other resources such as searching information for various compounds, while simultaneously making the app portable and easy-to-use? Combining this new challenging idea and my excitement for trying out some of the new features made available in iOS 13, I began work on developing my new iOS app idea, PocketChem.

Gathering the Data

The first thing I needed to begin working on PocketChem was understanding what data I wanted to include in the app. I knew a significant portion of the app would be centered around the periodic table, so I wanted to make sure that I provided enough important information for each element without making it too dense and not easy to navigate and use. Once I decided on the data I wanted to use for each element, I needed to actually retrieve this data.

This is where a problem arose. Collecting data by-hand and copy-and-pasting would not be a very efficient method, and would likely be more error-prone. To avoid this, I actually had to use a completely other programming language, Python, to gather the data that was necessary. I used packages such as BeautifulSoup which allowed me to scrape the data I needed from the internet, such as the data on history and uses, from the free Los Alamos National Library public resource (This is attributed in the about section of the app). I also used a database to get accurate data on each of the 118 elements, in terms of values such as melting point, boiling point, ionization energy, isotopes, and more. Also using web scraping, I was able to get images of all of the electronic configurations for all of the elements from Wikimedia Commons. I converted this raw data into bundled information, stored in data structures which represented each element. Once all of the element information was stored, I could finally begin working on the design for the periodic table page.

Periodic Table Design

Once I collected all of the information for each element, I began to work on how I wanted to design the periodic table page. Taking the elegant and easy-to-use objective to heart, I began to create a design to the page that was very minimal, with each element tile not being too small where the user would have trouble tapping it on smaller screens, but also not too big to be a nuisance to navigate around the entire table. I displayed the data on each tile in a format that was familiar, with the atomic number above, then the symbol, name, and mass respectfully, while at the same time adding a color coding and making the font the right size to maintain a clean but fun design. After playing around with the color schemes to determine if each tile should be grey with a white background and vice-versa, I finally decided on the latter. Once prototyping this design for the periodic table in Adobe XD, I began to implement it into my actual app using code.

Since the periodic table was larger than the screen so that each tile was large enough to be clickable, I implemented a search button that would filter out elements depending on numbers, names, or the atomic symbol for easy location. In addition to this, I added a button to toggle between the periodic table view and a list view, for those who would rather scroll through a list of elements rather than traversing a table. Lastly, I included a button that opened up the key for the color coded elements based on their grouping within the periodic table.

Once the periodic table was done, I now needed to design the actual detail page for when the user tapped on each element tile.

I wanted to ensure that data was easily accessible without an obscene amount of scrolling, so I added an “Overview, “History”, and “Isotopes” tabs so the user could easily navigate to whichever information they wanted to access. Each page’s color-coding was consistent with the color coding from the periodic table. Each page was also easily dismissable by swiping down, utilizing a new default feature for pages in iOS 13.

Reference Tools

One of the main objectives for PocketChem was having the ability to combine many commonly used chemistry resources into one place for easy and convenient access. Using the reference sheets from my chemistry teacher, and the sheets from the state curriculum, I was able to create easy-to-access pages on a different tab in the application for users to easily access the information they needed, whether it was common chemistry formulas to solubility rules, or even the metric prefixes! On another tab, I also included the ability for users to search for chemical formulas and chemical compounds, and I provided the ability for users to be redirected to a chemistry database with more information if data for the compound was not locally stored in the app.

Chemistry Widgets

Another thing that I wanted to add to PocketChem were some extremely powerful chemistry widgets to make people’s lives easier. In this section, I included a chemical equation balancer, empirical formula solver, and a molecular formula solver. These were incredibly complex to make and I had to design an entire algorithm from scratch to do all of these things.

Dark Mode

Lastly, one of the most exciting design changes for iOS 13 was the introduction of dark mode, and I fully embraced this new feature in the app. Dark mode gave an entirely new feel to the app and made it incredibly more fun to use and more aesthetically pleasing. I made sure that all parts of the app adapted perfectly to dark mode, while at the same time integrating the already existent color coding to the new palette.

Apple Watch App

One of my main objectives when creating PocketChem was making the app and the data in it the most accessible as possible to the user. This led me to creating the final component of PocketChem-- the Apple Watch version. PocketChem brings the information on each chemical element straight to a user’s wrist, making it even more accessible and easy to quickly access information without having to pull out any other device. PocketChem for WatchOS works without direct proximity to a phone as well, so the user is able to quickly access information even if their phone is out of reach. The watch version of the app was not as complex to make as the iOS version, especially since all of the data was already ported over for easy access, and is one of the most exciting additions to PocketChem. 

Submitting to the App Store

On January 12th 2020, PocketChem was publicly released on the iOS App Store! I submitted the app, with good screenshots, and a good description for the app. Just like with Geogsmart, submitting the app is actually quite painless and simple thanks to Apple making the process as intuitive as possible, but it took a lot of work to get to this point.

Final Thoughts

PocketChem was the most rewarding project I have worked on since the release of Geogsmart a few months ago. PocketChem took a lot of planning, data manipulation, designing, and coding to create. The final app, though, fulfills and exceeds my initial objective -- to create a portable, elegant chemistry reference app that not only contained all of the information any student would ever need in one package, but also was intuitive and easy-to-use. I developed PocketChem over the many weeks preceding, during, and following winter break when I wasn't working on my many assignments for my other high school classes. I hope that my journey of creating PocketChem will inspire you to create your own app to combat a problem that you want to solve, or maybe that can make an impact and help your fellow peers in your school or community.