Lambda School iOS Labs Project

A iOS Scribble-Stadium Children’s Mobile App continuation build out…

Lambda School is an online coding bootcamp that trains people to become software engineers, data scientists, or backend developers at no up-front cost. The computer science academy offers full-time, 6-month programs for Web Development and Data Science, and a 9-month program for Backend Development. Throughout the rigorous programs, students will demonstrate mastery of core frontend and backend technologies as well as computer science fundamentals. Remote classes are live and interactive, and include one-on-one help, professional mentorship, opportunities to build real products, and frequent code reviews.

Lambda School Labs

Our team made up with iOS developers, Data Science folks, Web developers, and back-end developers in a continuation to develop, update and engineer a fully functional Story Squad web / mobile application for our stakeholders.

Welcome to Story Squad! (Scribble-Stadium) an interactive learning platform targeted at grade school children, and we help build reading comprehension as well as artistic, writing, and analytical/critical thinking skills through weekly competitions.

Story Squad app turns “reluctant readers” into authors and illustrations in our wildly fun world-building game.

Story Squad springs storytellers into action by partnering them up in creative challenges. Kids become masters of their craft by reading new story chapters. Have the ability to uploading their own drawings & handwritten fan fiction, and giving feedback on each others’ work. A game where imagination comes to play. It’s where generating ideas scores big. Story Squad springs storytellers into action by partnering them up to participate in interactive & immersive creative challenges.

Each week features a new chapter in an exciting novel, written and serialized specifically for Story Squad . Children are provided with prompts based on the chapter they’ve just read, and participants are then divided into teams of two. Students create art and fan fiction to match the prompt, before going head to head in a bracket-style tournament.

In addition to growing their literary and artistic skills, students learn team building and critical thinking skills through a unique voting system, where each child must weight their own work against their teammate in order to increase their odds of winning. Badges and points incentivize winning and encourage participation.

Story Squad is a paid service; parents are required to create the account for their children and pay a monthly subscription fee in order for their children to compete. This brings the platform into compliance with COPPA and ensures a long future for the project.

Main User Interface

1. NSLayoutAnchorAPI

You maybe wondering what is Auto Layout constraints, well they are used to describe relationships between views. More specifically, they’re used to describe the relationship between individual properties of views. NSLayoutAnchor is another constraint where every UIView has an anchor for each attribute you can constrain. Programmatic coding its not intuitive as creating Storyboards visually. Creating UIs programmatically can be difficult and challenging at times to implement but one can customize the UI without the use of visual storyboards. Essentially, storyboard is good for visualizing the design flow and allowing for quick mockups for the application. However, your code can be more robust and reliable by programmatically creating the entire application from scratch. While this approach may take more time to learn and set up, you can definitely speed things up once you get the hang of it.

Programmatically Using Fixed Constraints

let constraint = NSLayoutConstraint(item: view1,
attribute: .width,
relatedBy: .equal,
toItem: nil,
attribute: .notAnAttribute,
multiplier: 1.0,
constant: 150.0)

Adding Constraints To a View

This is all a little complicated, and can be hard to remember. Thankfully, there’s an easier API you can use instead. You can pass the constraints you want to add to NSLayoutConstraint.activate() and they will automatically be added to the correct view.

let constraint = NSLayoutConstraint(item: view1,
attribute: .leading,
relatedBy: .equal,
toItem: view2,
attribute: .trailing,
multiplier: 1.0,
constant: 10.0)

NSLayoutConstraint.activate([constraint])

The second way of making programmatic constraints is using theNSLayoutAnchor API. Every UIView has an anchor for each attribute you can constrain. For example, view1.topAnchor would give access to the anchor for the top attribute of view1 .

Overview
Whether you initialize NSLayoutConstraint s directly or use anchors, you end up with the same object, which is an NSLayoutConstraint .

1. Setting view1’s leading edge to be spaced 10 points away from view 2’s

trailing anchor:

let constraint = view1.leadingAnchor.constraint(equalTo: view2.trailingAnchor, constant: 10)

1. Setting view1’s width to be a constant 150 points:

let constraint = view1.widthAnchor.constraint(equalToConstant: 150)

Facts about programmatic layout:

  • View setup is explicit. It is clear which properties are configured and how.
  • Merge conflicts are easier to resolve since we are dealing with code rather than XML.
  • Extensible for complex scenarios: screen rotation, animations, dynamic fonts, etc.
  • The consistent coding style of constructing UI programmatically is maintained across a mixed UIKit and SwiftUI project. With the gradual adoption of SwiftUI, this becomes more and more relevant.
  • Less noise in the codebase: no segues, string identifiers, tricky initialization from storyboard and xib, numerous helper extensions attempting to hide some part of that noise.

Below part snippet programmatic code which shows UIViews, LayoutConstraints and Anchor for PinVC.

Story Squad (Scribble-Stadium) RC-1 Release

Future trends would be to release Story Squad (Scribble-Stadium) to add below features:

  • Integration of IOT and Cloud
  • AI integration