Introduction
Earlier in this course, a primary concept we learned was how to separate concerns using the MVVM design pattern.
Students then practiced applying the MVVM design pattern to their arithmetic helper app.
Next, we learned how to use dynamic arrays to save a history of prior calculations in an app.
Then, students practiced using the MVVM pattern again by adding the missing view model or view layers to a couple of apps.
Finally, students had an opportunity to show that they could put all of these concepts together by writing a complete interactive app using the MVVM design pattern during one class period.
Recap
However, if you were away from class due to illness, exchange, sports, or numerous other perfectly valid reasons, you may have found yourself “playing catch-up” and missing the opportunity to fully engage with the lessons and exercises described above.
If that is the case, it is Mr. Gordon’s hope that the following video-tutorial-based recap of how to write an interactive app will help.
The following videos show, step-by-step, how to complete the Write an Interactive App task for the Tip Calculator app.
NOTE
You may use these videos to prepare for the task, or to review in advance of trying the task a second time, but you may not refer to these videos while writing the task itself in class or during Grove Time.
Please begin by reviewing any or all of the sections below.
Authoring the IPO chart
To make a plan for the model layer of the app, we make an input-process-output chart, or IPO chart.
This video explains how to do just that:
Authoring the model
Once you have a plan for a model in the form of an IPO chart, the next step is to implement and then test that model in a playground. Here’s how that is done:
Authoring the view model
The purpose of the view model is to store and check input provided by the view. Once that input is determined to be valid, the view model makes use of the model to provide the result of a calculation or processing steps. The view model then passes that new information back to the view.
In this video, see how to author and test a view model in a playground:
Authoring the view
The view accepts user input from the user, and shows output provided by the view model.
Here is how to author the view for the Tip Calculator Tip Calculator app:
Saving history in an array
Finally, to exceed expectations in the Write an Interactive App task, you need to be able to save results of prior calculations in an array, and then show those in the user interface of your app.
Here is how to do that final step: