About the app
The ACIMS app was developed after experiencing the frustration of forgetting the ACIMS list at home and trying to download the spreadsheet onto my phone. Spreadsheets in general aren’t awesome experiences on mobile and can be quite cumbersome. This was definitely the case with the massive ACIMS list and so I wanted to make it better. I also have always been interested in learning to code for a long time but hadn’t had the motivation to seriously learn. With a project in mind I started to look into what I actually needed to learn to get there.
Free Code Camp
After deciding that my best course of action was to learn JavaScript as a language (more on this later) I signed up with a website called FreeCodeCamp. They offer an excellent free resource that can help you kickstart learning to code for basic web development.
JavaScript
I chose to learn JavaScript as it seemed to me that was one of the broadest languages in terms of applicability. It is what makes up majority of the front end of the web as well as having a ton of great online learning resources. Given that I never took anything like this in school, it seemed best to start with what seemed biggest and go from there. As well the nice part of JavaScript is every browser is your interpreter which made it seem much less daunting to ‘check as I went’ and see how changing components of the code altered the outputs in the browser. I fell in love with this! I have always enjoyed trying to work through things in a logical manner and was always attracted to computers in this way, however I have never been strong with grammar… and well coding has a ton of grammar, or ‘syntax’ rules. Any previous attempts to learn always ended up with me being frustrated by getting bogged down in syntax issues. However with JavaScript and being more comfortable with watching my codes impact ‘live’ I eventually got comfortable enough with the syntax that I could forget about it and enjoy the writing.
Ionic Framework
Since JavaScript is in general a web language, why did I learn it if I intended on developing an app? Since both iOS and Android apps typically run on different languages (swift and java) and given I was new, I wanted to be able to code in one language (easier to learn) and yet develop for both. This was made possible with the Ionic Framework. It essentially wraps around the ‘web-app’ that I wrote and allows me to build out both the Android and iOS apps from the same codebase. This was a massive help as it reduces the maintenance required (1 codebase vs 2) as well as helps ensure that both apps look the same.
Development
In developing the app I generally used what is called AngularJS as a JavaScript framework. One thing I found while learning was that there are so many excellent tools available, however it can be extremely daunting to choose what to use. I chatted with some friends who are skilled programming as well as created a lot of very small mini projects. Trying out little features on their own before attempting to combine things together. Eventually I started to put together the app working out the kinks as I went and iteratively adding features.
I had outlined prior to starting the general features I wanted to be involved in the app. the ability to query the entire ACIMS list by common or scientific name and to see the current ACIMS rank. As well I thought it would be handy if some synonyms could be queried as well, as that tends to be handy. Once I knew the features I drew out on paper the various ‘pages’ of the app and how I wanted them to look. These were very basic views but I found them help me focus on what I was doing and gave me a better mental map of the final product.
As I was developing the apps ‘pages’ I started to work on the logic component of the app. This essentially was to take a users input in the search and return the species that related to it. To do this efficiently and make sure later updates to the ACIMS list could be incorporated simply (ie. not recreating individual species pages) I wanted to use an object to hold the ACIMS data (I used a JSON) and then created a service within the app that would access it. In this way, updating the ACIMS app means I just need to update that JSON file and the rest of the app will update with it. Once this was done I then needed to focus on how to display that data. Initially this was simple, display the entire list and just filter it as a user provided input. This worked great on my computer, however as soon as I tested it on a phone it was clearly not a very efficient way to do this. What I needed to do was reduce the number of species cards the phone had to render at one time. Which eventually I figured out, though it took me a few tries and I released the app originally with the main page just limited to 25 results. This worked if you knew that’s what it was doing, but was very confusing to users that didn’t.
If you want to see what all of this looks like you can see the full codebase on github.