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

Lambda School Labs is the last part of this bootcamp which is in-house apprenticeship. Lambda school try’s to simulate or recreate what it’s really like to work on an actual development of a product. We work with product managers, software developers, data scientist, code reviews, stakeholders and its a simulation on what it’s really like working at a company.

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

Lambda iOS developers was tasked to build out the Sign-In button connected to the Okta Login, Core-Data components, PIN-UI (User Interface) and develop the ReadVC using programmatic coding. The challenge we had was to research on the programmatic coding and what was required to put together the ReadVC and PIN- UI by means of engaging our stake holders, iOS project lead, iOS developers and web teams. The programmatic coding styles that was approved and used through out the project follows:

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

One question this might raise is, how do you create fixed width/height constraints? With a fixed dimension constraint, you’re really not describing a relationship between two properties, you’re just describing a fixed value for one property. It turns out that v1 You can express something like view2Width = 150 by doing:

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

Adding Constraints To a View

Once you’ve created a constraint, you must add it to a view for it to have any effect.You do that using UIView.addConstraints(). All constraints must involve only views that are within scope of the receiving view. Specifically, any views involved must be either the receiving view itself, or a subview of the receiving view. Constraints that are added to a view are said to be held by that view. n practice this means that if the two views involved in the constraint are siblings, you add the constraint to their superview. If they’re a parent/child, you add the constraint to the parent . If the constraint only involves one view , you add the constraint to that 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:

• Code is a single source of truth of a UI component.
• 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

iOS Developers was able to accomplish, Okta login to work for been “shipped” also made concessions to addressed the UI completion for many of the multi- screens. Today Story Squad (Scribble-Stadium) is still a work in progress but close to completion for a fully functional mobile app with all features.

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

• Integration of IOT and Cloud
• AI integration