Orlando Spencer Inc.’s S61C app allows students to request training with instructors, allows instructors to advertise themselves to students, provides FAA documentation, and serves as a sort of social media app for aviation enthusiasts of all stripes. There’s a staggering amount of features, and I got to not only work on a number of them, but rebuild some from scratch. I also did a lot of converting UIKit pages to SwiftUI as well as taking large SwiftUI files and breaking them up into views and view models. I’m really proud of my work on S61C; I feel like I got quite a bit done in just four months.
First up, the post comments.
I started small. There were some issues with the comments on forum posts – the like count icon was in the middle of the comment text, things weren’t aligned properly, it just didn’t look great. The team said they liked the style of Instagram’s comments, so I took inspiration from them in redesigning the comments section. Here are some steps I took:
• Bolded the user name and realigned the HStacks
• Created a global SwiftUI modifier to implement the design team’s preferred font that takes size and optional weight parameters (with default value of .regular)
• Combined the like button and like count icon, so it’s gray if the user hasn’t liked the comment and blue/filled if they have
• Added a vertical divider between the timestamp and the reply button to demarcate items of different functionality or purpose in the same row
• Added a minimally stylized show/hide replies button to keep the screen from being cluttered with sub-comments
• Implemented SwiftUI animations for the reply text field (move animation) and sub-comments (scale animation)
• I also fixed the top tab bar, which wasn’t functioning properly (didn’t have indexes implemented properly)
Next up, the chat feature. Chat utilizes Firebase Realtime Database to present up-to-date views using observers. I took a massive view with all the business logic crammed into it and separated it into a view and view model. I identified bottlenecks in the database calls, redundant database calls, and inefficient operations and streamlined things, resulting in a snappier user experience.
It was also around this time that I noticed navigation bar back/close buttons were used throughout the app, but they were coded differently on each page, sometimes a different size, sometimes a different icon. I created a global struct called NavBar, which includes static functions that return reusable toolbar items, such as the back arrow for navigation views, the X icon for sheets and modular pages, and a title for navigation bar titles, styled in the app’s font in a specific size. You’ll see them in all the videos on this page.
• Users can search their chats as well as the entire user base
• Using a ScrollViewReader, the app auto scrolls to the most recent message when the chat is opened and when the user taps the text field to type
• Timestamps for messages from either user can be viewed by dragging horizontally
• Sent messages have read receipts, and unread messages add to the unread message count on the chats screen
• 30 messages are initially loaded to reduce load time, and the user can scroll to the top and pull down to load another 15 at a time.
This feature required a lot of time and research. It uses a custom preference key, a geometry reader, and… well, math
• Users can send images, videos, files, and take photos via chat
• Selected media files (before sending) are sized proportionally to the “select media” buttons and tile nicely above them
• All media messages have a progress bar indicating how much of the file has been sent
• Images and videos can be viewed conveniently in the chat window; tapping outside of them closes the previewer
• Files open in Safari
• Users can block others, which will prevent them from messaging or being messaged by the blocked user
• Blocked users are indicated in the chats view
• Users are alerted when attempting to message a blocked user, with the option to unblock in the alert
• Users can also delete chats, which essentially deletes the pointer to the chat in the database. The chat itself remains, with each message encrypted by default
• If a message is sent to the same user, or the same user messages them again, the chat pointer is recreated, and the conversation is picked back up where it left off
The next page I worked on was the Instructor Profile Page, which turned out to be one hell of a project. I figured it wouldn’t take very long, but it was quite a ball of yarn. Lots to work on!
Tapping the follow button adds the user’s posts to the followed section of the home page. The indicator beside the instructor’s name is used to display whether or not the instructor has been verified as a CFI (Certified Flight Instructor) – pretty important when looking for aviation training. If they’re not verified, the badge is red and not filled. Tapping message opens the (aforementioned) chat window for you and the instructor. Tapping the ellipsis button allows you to review or block the instructor.
One of the key features of the app is requesting training sessions with certified instructors. This screen allows you to set the parameters of the training request. The title section is auto-focused when the view opens, and the location field is auto-focused when you go to that screen. It allows you to send the request to a single instructor or to post it generally to see who bites. It won’t allow you to submit the request until all fields are filled out properly.
As part of the Instructor Profile Page, I had to code the views that display reviews for training sessions the instructor has given (within the past year). There was a design provided by the aesthetics team, but I made a few design changes that were approved, and implemented it such that you can tab through the reviews at the bottom rather than the reviews being stacked on top of each other.
I also coded an all reviews page, which shows all the reviews at once. Then, I coded the page to review a training session, including a nice little animated view with a star rating and a review body. The average of the instructor’s reviews displays in the star rating beneath their name at the top. The skills ratings section averages out the scores the instructor has received for each type of aircraft.
Brad Cook Developer 