The Making of the STEMpump App V1
What is STEMpump?
STEMpump is a student-led initiative that teaches students the best of STEM technologies. I created this program as a way to give back to my community by sharing our passion for STEM. We teach three-hour bootcamps at our school teaching different STEM skills. Since its inception in September 2019, we have taught a variety of free courses.
Our program gained attention not only in our district, but all across our region. Since September, we have taught over 150 students, across all grades, coming from 21 schools within 6 districts.
“With a methodology to help students become science and technology leaders, as well as well-rounded contributors to society, it’s no wonder why a program like FIRST would inspire FMHS students to not only contribute to society but share their knowledge of science and technology with others. And, for free.”
— Lewisville Independent School District
Teaching courses to students was nothing new of course, tons of other students across our region were doing it. What makes us different was that following every one of our bootcamps, we post our online curriculum, so anyone could follow along. Every line of code to every specific instruction, all is available. We made sure everything we taught and then some was available in our online resources page.
STEMpump’s online resources catalog has been evolving over the past few months. What once was a simple static page, is now a dynamic system, working with a CMS(Content Management System) to control all the data. In developing the system that both the site and app operate on, I have learned a lot overall and am thankful for this opportunity.
When did the app come into the picture?
From the beginning, I always knew creating an app for STEMpump was the next big picture item I wanted to do. But first, I had to make sure our courses had to be completely dynamic with data that could interact with other types of uses that we would eventually create. I toyed around with the idea of making an app, and then in December 2019, I finally did so.
SwiftUI
Back in June, Apple unveiled a new framework they had been working on, SwiftUI. A competitor to React Native, SwiftUI was designed to make app development and the visual design aspect of the experience easier for the developer.
SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs.
— Apple
During the Summer, I played with it, creating a few basic apps to test the capabilities. I knew that it was a powerful framework that was in the future of app development no doubt. It could make development for both iOS and iPadOS so much easier without the need of constraints and storyboards. I left it for a while, but over the winter got back into it.
I have always been interested in development for Apple’s ecosystem, and that’s a bit of what lead me towards this over React Native’s cross-platform system.
Working with SwiftUI for this long, I definitely think it is the future for Apple’s ecosystem. Everything is very easy to use (but very buggy in some instances). A novice could get a basic interface done very quickly. The simplicity of States and Binding make it very easy to connect data, control taps and drags, as well as animate different views. While I still have a few complaints about the struggle it can be to do the simplest of things, I believe that this is a framework that has unlimited potential.
STEMpump App: Builds 1–10
So during the time in December, in a week, I created the first stable build of the STEMpump app.
I’m gonna be honest. There are a lot of issues with this app.
- Way too simple, nothing that stands out. The design is very “basic”-esque with very limited styling.
- Semi-Dynamic Data. The Courses could be added/removed through full updates of the app.
- Zero design work was put into this. This resulted in a poor user experience.
- One word. WebViews. There were WebViews everywhere. I wasn’t able to get the JSON data on our server interacting with the app dynamically, so I created arrays that pulled the website pages with modified styling. It was a very cheap way to do it.
Those were just a few problems I could list off the top of my head, but there were definitely more. School kicked in, and I didn’t spend that much time on the app for a while.
STEMpump App: Builds 11–22
Spring Break. Yay! This was the free time I’ve been waiting for. I was browsing online, and saw a video about some cool things I could do in SwiftUI. That kinda triggered the idea of continuing the development this app. I wasn’t going to give up that easy. I scrapped the original app I made in January and restarted the entire process.
The entire app was made in about 1–1.5 week(s). I spent a good portion of the week working on the design of the app, creating mockups in Adobe XD and Sketch, along with prototyping interactions. I wanted a design that felt modern and bubbly, but still approachable as user-friendly. I experimented with lots of interfaces, keeping the limitations of SwiftUI in mind at all times. Finally, I came up with a design a bit reminiscent of the original app I created, but still different. I went through tons of iterations before finally settling on one I believed checked all my boxes for the time being.
Throughout the design phase, I wanted to keep as much of the STEMpump brand as I could. I wanted the interface to be easy to use, so anyone could pick it up and learn something new. The organization of how the courses and sections were laid out was also something I focused on. I decided to use two horizontal scrollers on the home page: One for the sections, and one for featured courses. Then, within each section block, there would be a vertical scroller with each of the
Development was the harder part. I had to make sure that everything would connect to the flow of the data from the STEMpump web server. We currently had each course’s lessons in individual JSON files, which I realized was a big mistake. This would stunt how I could make Swift interpret the data. So, I ended up taking those JSON files and merging them into a single JSON file (which was the best move.)
As mentioned above, I had to make sure that the data flow was perfect. The website needed to have the exact information the app had. This meant that when I updated the course on the site, the app would auto update. In order to do this, I had to redesign how the JSON flows on our site. What once had tons of static data being added was now replaced by a super simple system. In layman’s terms: When the JSON updated, everything updated as well. Just like that. In total, the STEMpump app and website use two JSON structures: one for all of the courses, and another for all the lessons per course. This lowers the amount of files to pull from and also simplifies the data pathway.
The final data flow looks something like below in the end.
Without redesigning how our website interpreted the JSON data, we could never have 1:1 updating between the app and website. One of the big parts that I am very proud of is that I can go into the Course JSON Data, and it auto updates everywhere across the board.
Another goal I had was to make the app as small as I could. Using SDWebImage, I could make sure that images could be stored on our server, once again making everything simplified. I store a few essential images in the app, but everything else could be held off, on our server.
In the original app, I used WKWebViews that displayed a webpage on our server. In this new app, I wanted everything to be as dynamic and easy to control as possible. Using the WKWebView, I was able to reconfigure it so rather than load a webpage, it could interpret HTML, CSS, and Javascript. Right there in the app. I originally wanted to be able to display text and images natively, but there isn’t (at least not right now) a good way to display Strings and Images intertwined in SwiftUI, without any complex work to figure it out. So, I took web page, and cleaned it out, making it so only a few variables needed to be plugged in for the page to show. This improved load times as well, since most of the data was already was in Strings in the app.
The organization of the courses is something I really wanted to get done well. We organize our courses into four subjects/sections:
- Robotics
- Programming
- Creation
- Game Design
Rather than show everything we have available, I thought it was a better idea to sort the courses based on the subject they most aligned with. Each subject has a JSON file for it, that contains all the courses that align under itself. From there, it follows the same path as clicking from the featured page.
Simplified
Here is a simplified list of everything that I used during the creation of this app.
- Adobe XD/Sketch to layout a design (Extremely important, helps with SwiftUI development)
- JSON Structures to connect website and app to same data
- API configuration in Swift to interpret the JSON data
- WKWebViews to interpret HTML, CSS, and JS
- SDWebImage to receive images from URLs
- States and Bindings to control Sheets
- RGB Colors controlled by JSON data to determine colors for each
All in all, this app wasn’t that complicated to create, but has a very strong potential to get complex and better.
The future
There’s so much more I want to add and work on towards this app. It isn’t perfect, which allows me to spend more time on getting it to that position. Some of the ideas I have for future updates include:
- Information about how long each course takes
- Sharing the entire course with others
- Offline Courses
- Potential for using Adobe Fonts (?)
- User System for personal growth
- More interactivity
- More Subjects
- Less “Non-Styling”
- And so much more.
Along with all those, I am interested on making a counter-part for Android. I have learned a lot about Swift through this experience, and I want to learn to use Flutter/Dart and React Native. Using one codebase is a lot simpler than trying to juggle two at a time.
Thanks for reading!
This was my first Medium post, and I plan on doing a lot more of them in the future. If you have any questions or comments, feel free to contact me here. If you want to check out STEMpump, check it out here.
You can download the app for yourself here. Thanks again for reading my post detailing this app’s journey.
