Story Squad — Ideas Matter
Story Squad background.
Story Squad is a game where imagination comes to play. It’s where generating ideas scores big. It puts storytellers into action by partnering them up to participate in interactive & immersive creative challenges. The idea is to become a Master of your own craft by mastering your drawings and handwritten stories, by receiving and giving real feedback to others.
The problem to solve
Users will be able to take a picture of a drawing with a custom camera. Also, they will take a sequence of pictures from their handwriting stories. However, they will need assistance to capture the document they are scanning. The user will need guides to ensure they capture the correct frame size, and scanning will be in a photo form.
The user will be able to save and store the image and the document scanner in a S3 backend server. The authentication will happen with the Okta system and the basic information of the user will be copied in Core Data. No storyboards.
My Task
Making an app that looks good and plays well in all screen sizes is something that every developer needs to know and do on a daily basis. With the introduction of SwiftUI, it’s easier than ever to do so. However, since SwiftUI is still some years away from world domination, you may have to stick with your old friend Auto Layout a little longer. Although Apple created storyboards and many seem to enjoy the easy use of it in the end most development teams will prefer the programmatic UI. Storyboards may be very friendly but bring all sorts of difficulties when working in separate teams at the time of merging the project.
Let’s dive into the concept more. Storyboards, picture below. If any team member by any chance moves or changes any of the elements inside the storyboard. Even if the changes are undone, there will be merging issues to solve later
Programmatic UI, picture below. Involves hundreds of lines of code on the down side, but with a bit of knowledge and smart coding you can significantly reduce the amount of lines of code and learn to reuse elements all over the app. Also, managing different screen sizes is easier and more accurate.
I was tasked with the entire programmatic UI. This may sound like a daunting task at first, but using a rule in code called DRY and smart coding you can manipulate things to your own advantage.
Let me explain the process. Instead of creating all elements in every view controller like labels, buttons, text fields, image views which will lead to 10 to 15 lines of code for each element over and over in every view controller. You can build custom classes for each element in a separate folder just once. Then all you have to do is to call the class with one single line of code for each element in your view controller.
Another advantage of programmatic is splitting the syntax into small portions. You can actually create multiple view controllers and just add them to the main view controller as a child. know that any function related to that child UI must be inside the child view controller. This approach is very useful to keep all of your view controllers short and more readable. Some developers would agree that best practice is to keep view controllers under two hundred lines of code.
Third, to reduce confusion when navigating through the code. A interesting approach is to base all of your elements constraints into one main back view. This way once you are done setting all the constraints, you can just minimize the entire constraints function and keeped hidden and out of the way.
Fears & Concerns With My Solution
The fear of doing programmatic UI is that everyone writes and organizes the code differently. Which can cause issues or difficulties for other team members to understand. A possible way to avoid such an issue is to present the action of every button right below the viewdidLoad. All team members will know exactly where to include their code after.
Team Challenge — Implementation Matters
The solution will be to implement a Vision Kit document type scanner with guides to help the user navigate through the process inside the IOS app. Also, the user will capture the image with a custom camera to ensure the best possible quality. Once the image and the scanned document have been captured, everything will need to be stored using an S3 Bucket API provided by the Story Squad team ( The Client ). The image and story will be stored in their stories account. Also, the entire UI of the app needs to be built programmatically to avoid merging conflicts and ensure a better user flow through the app.
The Story Squad brought us a few challenges to the table. The new designs from the UI/UX team included steps within one single view controller, so I created multiple views and played them according to the order of the storyboard. Organizing the views was challenging since each view carries its own set of functions to execute.
The team needed to implement a Vision Kit document type scanner with guides to help the user navigate through the process inside the IOS app. The document feature is supposed to work as follows. The user can take a picture, and the camera will identify any rectangle in the image after you press the camera button. Then subtitles will appear at the bottom guiding the user to crop the image and save, or just continue taking more pictures of documents. Bryson Saclausa implemented the Vision Kit document. Although, we hit a roadblock since there was not a specific amount of pictures the user can take. According to the client it is meant to be between one to three, but it was not set in stone; the user can actually write a longer story and be five or nine pages long or more. The solution was I set the array to feed a horizontal uicollectionview with a custom cell, that way can be one picture or one hundred if they choose to.
Another challenge was the two different ways to load images independent from each other, one from the library using the picker view system and the AV Foundation system for the camera view. Sammy Alvarado built and implemented the custom camera view, and managed to use one single extension to be used for both the library framework and the camera framework. This allowed us to just create one single UI for both systems and switch between systems right before passing the data to the UI View.
Troubleshooting Technical Issues in IOS
Notice an issue with the camera and the view controller. The view controller that pushes the camera has multiple views that play in a sequence. Once the camera is finished, it will go back to the first view in the sequence. The same issue happens with the document scanner.
A quick way to solve this issue was by creating a new view that will hold the image or the document scanner images after it is captured. Then redirect the camera once the save button is pressed to the new view.
Conclusion
The Team successfully completed all tasks assigned to it. The Story Squad project so far is going well. It is a significantly sized app that plays altogether with a web version and two more apps that are integrated into the same backend. We implemented the programmatic UI, the custom camera, the photo library, and the document scanner.
I will say that Story Squad is a very ambitious app. Therefore will bring many new challenges in the future. Especially in the Sing-In feature. The app is the pay version of two previous apps, which makes the Auth complicated in itself. The Auth comes from three different places, a regular sign-in, an Okta sign-in, and the Clever sign-in systems. I will suggest that the login happens before you reach any of the apps, like the main area right after the launch screen. Then when the Auth is complete, move to the screen that lets you select to which you want to open.
The benefits of this project towards my career will be that it is a game for kids. Very rarely people get to work in these types of apps, and they are always lots of fun. Something that you learn from these apps for future projects is the level of security. Apps that involve kids and parents require serious levels of authentication and security. Also, these apps must have different levels of filtering for images and copy, they must ensure that no user with malicious intentions can upload inappropriate content to the database.
