Lab 2: Virtual Pet App Solution

Overview




In this lab, you will create an app to take care of your very own virtual pets! The app will only have one screen and simple logic, but we will use this as an opportunity to learn about creating custom layouts using Auto Layout. This will also be a great opportunity to learn how to program with the MVC programming paradigm and adhere to best practices in Swift.




Please read this entire PDF prior to starting work on your lab. Every section contains information relevant to how you will be graded, not just the Requirements section.







Details




Due date: Wednesday, June 27th, 11:59pm




Grading: This lab is out of 75 points total. The exact point distribution is described in the “Requirements” section below.




Submission: Zip the entire project folder and email it to cse438ta@gmail.com. Please name the file “FirstNameLastName-Lab2.zip” and include a brief summary of your creative portion in the email body.




Description




This lab requires you to create your own app from scratch. Although many of the implementation details are left to you, there are some helpful guidelines and code snippets to get you started in the “Helpful Advice and Code Snippets” section below. Many of the topics covered in this lab have been discussed in lecture as well. Additional resources are available online in the Swift documentation and UIKit documentation that Apple provides.




The goal of this lab is to create an app that allows users to play with their virtual pets. There should be only one screen, but the layout should work correctly no matter what device size or orientation is used.

This lab will be graded quite different from most. We will be grading on a variety of device sizes and orientations (not just an iPhone 8 in portrait), and we will grade the quality of your code. In terms of code quality, you should adhere to the MVC pattern and follow modern Swift style guidelines. More information about this is provided later in this document.




Requirements




[25 points] The layout is correct no matter the device size or orientation.




[10 points] Five pets can be fed and played with, and their values update appropriately.




[5 points] Each pet has a custom image and color. Switching between pets updates the image, background color, and color of each display bar.




[5 points] The display bars animate when the pet is played or fed, but jump immediately to the correct values when switching between pets.




[10 points] The code adheres to the MVC design pattern.




[10 points] The code follows the Swift guidelines in the “Swift Guidelines” section.




[10 points] Creative portion: Add one other small feature. Be creative!




Helpful Advice and Code Snippets




Images and DisplayView




To help you out, a zip file containing all the pet images is included on the course website. To use these in your project, create new image sets in the blue Assets folder, and drag the images into the slots. Feel free to use your own images instead.




The colored display bar is a custom UIView subclass, and is included on the course website as DisplayView.swift. Simply drag the file into your project to use it! The DisplayView class has three public properties/functions: value, color, and animateValue. There should be no need to modify this file.




Layout




In order to create a layout that works on any screen size, use Auto Layout in the storyboard (constraints, stack views, etc) in order to make the layout dynamic. Xcode has many great tools to test your layout including the storyboard sizes and multiple simulator options. Most of the time you won’t even have to run the app to see your layout — just choose one of the devices from the menu at the bottom of the storyboard.




The app should be Universal (meaning that it works on both iPhones and iPads). The layout is optimized for smaller devices, but it should still work on a large iPad.




The layout should match the screenshots at the end of the document. The alignment, relative positioning between elements, and ratios should be the same, but the precise spacing and color values are up to you. It doesn’t matter if the spacing between the text and display view is 5pt or 7pt, or if the gray is rgb(120,120,120) or rgb(130,130,130).





































Introducing variation by element.




One convenient (and slightly hidden) feature is the ability to introduce variation to a property based on the size class of the device. To introduce variation, use the small “+” button next to a property in the storyboard. In the screenshot below, variation is added to a stack view’s axis


































Vary for Traits option in the Storyboard.




when the height is “compact”.




You can achieve the same effect with the “Vary for Traits” button in the bottom bar of the storyboard. When the bar is blue, any changes to the storyboard will only be applied to the devices listed.




One of the most important layout challenges is deciding what UIKit objects to use for each element. There are many ways to achieve the same layouts, and each strategy has subtle benefits and drawbacks. You will get a feel for these as you build more apps, but for now here is an example of the elements to use to build the app.




UIView
















UIImageView































UILabel




























UIButton












































UILabel


















Stack View




























DisplayView


















































UIView


















Stack View


















































































UIButton


























































































































































Because the layout is quite complex, screenshots of various sizes and orientations are provided at the end of this document. If the layout is giving you trouble, don’t give up! Take everything one step at a time and you’ll get there eventually.




App Functionality




The user should be able to select from a list of their pets, and see information about the pet’s current happiness and food level. When the user selects a new pet, that new pet’s information should be shown. If they go back to a previous pet, the values should have been saved from before (values do not need to be saved between app launches however).

A user can interact with a pet in two ways: by playing and feeding. A pet can only be played with if it’s food level is above zero. If a pet is played with, its happiness increases by 1, and its food level decreases by 1. If a pet is fed, its food levels increases by 1. Display the data in the bars such that the bar is full if either the happiness or food level is 10. The total number of times fed and played should be listed above the bar.




Model View Controller (MVC)




MVC is an object-oriented programming paradigm that separates the concerns of your code. There should be clear model objects with data-related abilities, view objects which exclusively display data, and controller objects, which operate between the model and the view. In the case of this lab, you should create a model object to represent a pet, and have this object handle all calculations. The view should be handled via Storyboard, and the controller via your UIViewController subclass. Think about the interaction between your objects and make each object’s role clear.




Swift Guidelines




Swift is still an evolving language, and the true “best practices” haven’t been cemented yet. Despite this, there are many basic conventions that will make your code easier to read. Your code should adhere to the following guidelines:




Types begin with a capital letter. (ex: struct String)



Properties and functions begin with a lowercase letter and use camel case. (ex: let myString = …, func sayHello() { …)
Optionals are safely unwrapped. (using “if let”, “guard”, or “??”)



Compiler gives no warnings (yes, even storyboard warnings).















































































































iPhone SE Portrait















































































iPhone SE Landscape

























































iPhone 7 Portrait & Landscape

























































































































iPhone 7 Plus Portrait & Landscape























































































iPad Pro (12.9 in) Landscape



















































































































iPad Pro (12.9 in) Landscape Split View















































































































iPhone X Portrait


















































































iPhone X Landscape