Finishing a second pass through section 5.0

Author: tjvantoll

images/chapter5/android/1.png

@@ -661,7 +661,7 @@ <h4 class="exercise-start">
     <b>Exercise</b>: Add a model object
 </h4>
 
-<p>Let’s start by creating a simple model object to store user data. Open <code>app/user/user.ts</code> and paste in the following code:</p>
+<p>Let’s start by creating a simple model object to store user data. Open <code>app/shared/user/user.ts</code> and paste in the following code:</p>
 <pre><code class="lang-JavaScript">export class User {
   email: string;
   password: string;
@@ -1580,8 +1580,25 @@ <h4 class="exercise-start">
 </code></pre>
 <div class="exercise-end"></div>
 
-<p>Explain this code.</p>
-<p>TODO: Add images</p>
+<p>Now, if the user attempts to login or register with an invalid email address, they’ll see an alert that points out the error. However in order to test out this change you’ll need to do one more thing.</p>
+<h4 class="exercise-start">
+    <b>Exercise</b>: Rebuild your app
+</h4>
+
+<p>As we mentioned in chapter 1.4, although the <code>tns livesync</code> command is smart enough to reload your app for most changes you make to your app, the command cannot hot reload your app for all changes—most notably, changes to native files in <code>app/App_Resources</code>, new modules installed with <code>npm install</code>, and new NativeScript plugins.</p>
+<p>For NativeScript to recognize this new email-validator npm module, type <code>Ctrl+C</code> in your terminal to kill the existing <code>tns livesync</code> watcher if it’s still running, and then use <code>tns run</code> to rebuild your application and deploy it to an emulator or device.</p>
+<pre><code>tns run ios --emulator
+</code></pre><p>Or</p>
+<pre><code>tns run android --emulator
+</code></pre><p>After the app deploys you can again run the <code>livesync</code> command to setup the watcher again.</p>
+<pre><code>tns livesync ios --emulator --watch
+</code></pre><p>Or</p>
+<pre><code>tns livesync android --emulator --watch
+</code></pre><div class="exercise-end"></div>
+
+<p>After your app launches again, if you type an invalid email address and attempt to login, you should see an alert that prevents the submission:</p>
+<p><img src="images/chapter5/android/1.png" alt="Validation alert on Android">
+<img src="images/chapter5/ios/1.png" alt="Validation alert on iOS"></p>
 <p>In general npm modules greatly expand the number of things you&#39;re able to do in your NativeScript apps. Need date and time formatting? Use <a href="https://www.npmjs.com/package/moment">moment</a>. Need utility functions for objects and arrays? Use <a href="https://www.npmjs.com/package/lodash">lodash</a> or <a href="https://www.npmjs.com/package/underscore">underscore</a>. This code reuse benefit gets even more powerful when you bring NativeScript plugins into the picture.</p>
 <blockquote>
 <p><strong>WARNING</strong>: Not all npm modules work in NativeScript apps. Specifically, modules that depend on Node.js or browser APIs will not work, as those APIs do not exist in NativeScript. The NativeScript wiki contains a <a href="https://github.com/NativeScript/NativeScript/wiki/supported-npm-modules">list of some of the more popular npm modules that have been verified to work in NativeScript apps</a>.</p>

images/chapter5/android/2.gif

@@ -79,9 +79,44 @@ if (!this.user.isValidEmail()) {
 
 <div class="exercise-end"></div>
 
-Explain this code.
+Now, if the user attempts to login or register with an invalid email address, they’ll see an alert that points out the error. However in order to test out this change you’ll need to do one more thing.
 
-TODO: Add images
+<h4 class="exercise-start">
+    <b>Exercise</b>: Rebuild your app
+</h4>
+
+As we mentioned in chapter 1.4, although the `tns livesync` command is smart enough to reload your app for most changes you make to your app, the command cannot hot reload your app for all changes—most notably, changes to native files in `app/App_Resources`, new modules installed with `npm install`, and new NativeScript plugins.
+
+For NativeScript to recognize this new email-validator npm module, type `Ctrl+C` in your terminal to kill the existing `tns livesync` watcher if it’s still running, and then use `tns run` to rebuild your application and deploy it to an emulator or device.
+
+```
+tns run ios --emulator
+```
+
+Or
+
+```
+tns run android --emulator
+```
+
+After the app deploys you can again run the `livesync` command to setup the watcher again.
+
+```
+tns livesync ios --emulator --watch
+```
+
+Or
+
+```
+tns livesync android --emulator --watch
+```
+
+<div class="exercise-end"></div>
+
+After your app launches again, if you type an invalid email address and attempt to login, you should see an alert that prevents the submission:
+
+![Validation alert on Android](images/chapter5/android/1.png)
+![Validation alert on iOS](images/chapter5/ios/1.png)
 
 In general npm modules greatly expand the number of things you're able to do in your NativeScript apps. Need date and time formatting? Use [moment](https://www.npmjs.com/package/moment). Need utility functions for objects and arrays? Use [lodash](https://www.npmjs.com/package/lodash) or [underscore](https://www.npmjs.com/package/underscore). This code reuse benefit gets even more powerful when you bring NativeScript plugins into the picture.