Remove unnecessary code listings

DEMO.md

@@ -1,8 +1,6 @@
 # Spring Boot, Ionic, and Stormpath
 
-This demo script shows Matt's IntelliJ Live Template shortcuts to build an Ionic and Spring Boot app.
-
-**Prerequisites**: Java 8, Node.js, Maven, a [Stormpath Account](https://api.stormpath.com/register), and an `apiKey.properties` file in `~/stormpath/`.
+This demo script shows pre-recorded IntelliJ Live Template shortcuts to build an Ionic and Spring Boot app. **Prerequisites**: Java 8, Node.js, Maven, a [Stormpath Account](https://api.stormpath.com/register), and an `apiKey.properties` file in `~/stormpath/`.
 
 ## Spring Boot API
 
@@ -13,166 +11,12 @@ http https://start.spring.io/starter.zip \/
 dependencies==data-jpa,data-rest,h2,web,devtools,security,stormpath -d
 ```
 
-Run the application with `./mvnw spring-boot:run`. Create a `Beer` entity class in `src/main/java/com/example/beer`. 
-
-→ **boot-entity**
-
-```java
-package com.example.beer;
-
-import javax.persistence.Entity;
-import javax.persistence.GeneratedValue;
-import javax.persistence.Id;
-
-@Entity
-public class Beer {
-
-    @Id
-    @GeneratedValue
-    private Long id;
-    private String name;
-
-    public Beer() {
-    }
-
-    public Beer(String name) {
-        this.name = name;
-    }
-
-    public Long getId() {
-        return id;
-    }
-
-    public void setId(Long id) {
-        this.id = id;
-    }
-
-    public String getName() {
-        return name;
-    }
-
-    public void setName(String name) {
-        this.name = name;
-    }
-
-    @Override
-    public String toString() {
-        return "Beer{" +
-                "id=" + id +
-                ", name='" + name + '\'' +
-                '}';
-    }
-}
-```
-
-Create a JPA Repository to manage the `Beer` entity.
-
-→ **boot-repository**
-
-```java
-package com.example.beer;
-
-import org.springframework.data.jpa.repository.JpaRepository;
-import org.springframework.data.rest.core.annotation.RepositoryRestResource;
-
-@RepositoryRestResource
-interface BeerRepository extends JpaRepository<Beer, Long> {
-}
-```
-
-Create a CommandLineRunner to populate the database.
-
-→ **boot-command**
-
-```java
-package com.example.beer;
-
-import org.springframework.boot.CommandLineRunner;
-import org.springframework.stereotype.Component;
-
-import java.util.stream.Stream;
-
-@Component
-class BeerCommandLineRunner implements CommandLineRunner {
-    private final BeerRepository repository;
-
-    public BeerCommandLineRunner(BeerRepository repository) {
-        this.repository = repository;
-    }
-
-    @Override
-    public void run(String... strings) throws Exception {
-        System.out.println(repository.findAll());
-    }
-}
-```
-
-Add default data in the `run()` method:
-
-→ **boot-add**
-
-```java
-// top 5 beers from https://www.beeradvocate.com/lists/top/
-Stream.of("Good Morning", "Kentucky Brunch Brand Stout", "ManBearPig", "King Julius",
-        "Very Hazy", "Budweiser", "Coors Light", "PBR").forEach(name ->
-        repository.save(new Beer(name))
-);
-```
-
-Create a `BeerController` for your REST API. Add some business logic that results in a `/good-beers` endpoint.
-
-→ **boot-controller**
-
-```java
-package com.example.beer;
-
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RestController;
-
-import java.util.Collection;
-import java.util.HashMap;
-import java.util.Map;
-import java.util.stream.Collectors;
-
-@RestController
-public class BeerController {
-    private BeerRepository repository;
-
-    public BeerController(BeerRepository repository) {
-        this.repository = repository;
-    }
-    
-    @GetMapping("/list-beers")
-    public Collection<Beer> list() {
-        return repository.findAll();
-    }
-}
-```
-
-Add a `/get-beers` mapping that filters out beers that aren't great.
-
-→ **boot-good**
-
-```java
-@GetMapping("/good-beers")
-public Collection<Map<String, String>> goodBeers() {
-
-    return repository.findAll().stream()
-            .filter(this::isGreat)
-            .map(b -> {
-                Map<String, String> m = new HashMap<>();
-                m.put("id", b.getId().toString());
-                m.put("name", b.getName());
-                return m;
-            }).collect(Collectors.toList());
-}
-
-private boolean isGreat(Beer beer) {
-    return !beer.getName().equals("Budweiser") &&
-            !beer.getName().equals("Coors Light") &&
-            !beer.getName().equals("PBR");
-}
-```
+1. Run the application with `./mvnw spring-boot:run`. Create a `Beer` entity class in `src/main/java/com/example/beer`. → **boot-entity**
+2. Create a JPA Repository to manage the `Beer` entity (tip: `@RepositoryRestResource`). → **boot-repository**
+3. Create a CommandLineRunner to populate the database. → **boot-command**
+4. Add default data in the `run()` method. → **boot-add**
+5. Create a `BeerController` for your REST API. Add some business logic that results in a `/good-beers` endpoint. → **boot-controller**
+6. Add a `/get-beers` mapping that filters out beers that aren't great. → **boot-good**
 
 Access the API using `http localhost:8080/good-beers --auth <user>:<password>`.
 
@@ -188,10 +32,6 @@ From a terminal window, create a new application using the following command:
 
 ```
 ionic start ionic-beer --v2
-```
-
-This may take a minute or two to complete.
-```
 cd ionic-beer
 ionic serve
 ```
@@ -200,15 +40,7 @@ ionic serve
 
 ```json
 "dependencies": {
-  "@angular/common": "2.3.1",
-  "@angular/compiler": "2.3.1",
-  "@angular/compiler-cli": "2.3.1",
-  "@angular/core": "2.3.1",
-  "@angular/forms": "2.3.1",
-  "@angular/http": "2.3.1",
-  "@angular/platform-browser": "2.3.1",
-  "@angular/platform-browser-dynamic": "2.3.1",
-  "@angular/platform-server": "2.3.1",
+  "@angular/common": "2.3.1"
 ```
 
 Run `yarn` to update to these versions.
@@ -257,46 +89,19 @@ export function stormpathConfig(): StormpathConfiguration {
 export class AppModule {}
 ```
 
-To render a login page before users can view the application, modify `src/app/app.component.ts` to use the `Stormpath` service and navigate to Stormpath's `LoginPage` if the user is not authenticated. 
-
-→ **io-app**
+To render a login page before users can view the application, modify `src/app/app.component.ts` to use the `Stormpath` service and navigate to Stormpath's `LoginPage` if the user is not authenticated. → **io-app**
 
 ```typescript
-import { Component } from '@angular/core';
-import { Platform } from 'ionic-angular';
-import { StatusBar, Splashscreen } from 'ionic-native';
-import { TabsPage } from '../pages/tabs/tabs';
-import { Stormpath } from 'angular-stormpath';
-import { LoginPage } from 'angular-stormpath-ionic';
-
-@Component({
-  templateUrl: 'app.html'
-})
-export class MyApp {
-  rootPage;
-
-  constructor(platform: Platform, private stormpath: Stormpath) {
-    stormpath.user$.subscribe(user => {
-      if (!user) {
-        this.rootPage = LoginPage;
-      } else {
-        this.rootPage = TabsPage;
-      }
-    });
+stormpath.user$.subscribe(user => {
+  if (!user) {
+    this.rootPage = LoginPage;
+  } else {
+    this.rootPage = TabsPage;
   }
-}
+});
 ```
 
-If you run `ionic serve`, you’ll likely see something similar to the following error in your browser’s console.
-
-```
-XMLHttpRequest cannot load http://localhost:8080/me. Response to preflight request
-doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on 
-the requested resource. Origin 'http://localhost:8100 is therefore not allowed access. 
-The response had HTTP status code 403.
-```
-
-To fix this, open your Spring Boot application's `src/main/resources/application.properties` and add the following line. This enables cross-origin resource sharing (CORS) from both the browser and the mobile client.
+If you run `ionic serve`, you’ll likely see a CORS error in your browser’s console. To fix this, open your Spring Boot application's `src/main/resources/application.properties` and add the following line.
 
 ```
 stormpath.web.cors.allowed.originUris = http://localhost:8100,file://
@@ -304,60 +109,13 @@ stormpath.web.cors.allowed.originUris = http://localhost:8100,file://
 
 Restart Spring Boot and your Ionic app. 
 
-In `src/pages/home.html`, add a logout link to the header and a paragraph in the content section that shows the currently logged in user.
-
-→ **io-logout**
-
-```html
-<ion-header>
-  <ion-navbar>
-    <ion-title>Home</ion-title>
-    <ion-buttons end>
-      <button ion-button icon-only (click)="logout()">
-        Logout
-      </button>
-    </ion-buttons>
-  </ion-navbar>
-</ion-header>
-```
-
-→ **io-username**
-
-```html
-<ion-content padding>
-  ...
-  <p *ngIf="(user$ | async)">
-    You are logged in as: <b>{{ ( user$ | async ).fullName }}</b>
-  </p>
-</ion-content>
-```
+In `src/pages/home.html`, add a logout link to the header and a paragraph in the content section that shows the currently logged in user. → **io-logout** and **io-username**
 
-If you login, the “Logout” button will render, but won’t work because there’s no `logout()` method in `src/pages/home.ts`. Similarly, the “You are logged in” message won’t appear because there’s no `user$` variable defined. Change the body of `home.ts` to retrieve `user$` from the `Stormpath` service and define the `logout()` method.
-
-→ **io-home**
-
-```typescript
-import { Account, Stormpath } from 'angular-stormpath';
-import { Observable } from 'rxjs';
-...
-export class HomePage {
-  user$: Observable<Account | boolean>;
-
-  constructor(private stormpath: Stormpath) {
-    this.user$ = this.stormpath.user$;
-  }
-
-  logout(): void {
-    this.stormpath.logout();
-  }
-}
-```
+Change the body of `home.ts` to retrieve `user$` from the `Stormpath` service and define the `logout()` method. → **io-home**
 
 If you’re logged in, you should see a screen with a logout button and the name of the currently logged in user.
 
-The `LoginPage` tries to auto-focus onto the `email` field when it loads. To auto-activate the keyboard you'll need to tell Cordova it’s OK to display the keyboard without user interaction. You can do this by adding the following to `config.xml` in the root directory.
-
-→ **io-keyboard**
+The `LoginPage` tries to auto-focus onto the `email` field when it loads. Tell Cordova it’s OK to display the keyboard without user interaction by adding the following to `config.xml` in the root directory. → **io-keyboard**
 
 ```xml
 <preference name="KeyboardDisplayRequiresUserAction" value="false"/>
@@ -372,223 +130,25 @@ git commit -m "Add Stormpath"
 
 ## Build a Good Beers UI
 
-Run `ionic generate page beer` to create a component and a template to display the list of good beers. 
-
-Add `BeerPage` to the `declarations` and `entryComponent` lists in `app.module.ts`.
-
-Run `ionic generate provider beer-service` to create a service to fetch the beer list from the Spring Boot API.
-
-Change `src/providers/beer-service.ts` to use have a `getGoodBeers()` method.
-
-→ **io-service**
-
-```typescript
-import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import 'rxjs/add/operator/map';
-import { Observable } from 'rxjs';
-import { StormpathConfiguration } from 'angular-stormpath';
-
-@Injectable()
-export class BeerService {
-  public API;
-  public BEER_API;
-
-  constructor(public http: Http, public config: StormpathConfiguration) {
-    this.API = config.endpointPrefix;
-    this.BEER_API = this.API + '/beers';
-  }
-
-  getGoodBeers(): Observable<any> {
-    return this.http.get(this.API + '/good-beers')
-      .map((response: Response) => response.json());
-  }
-}
-```
-
-Modify `beer.html` to show the list of beers.
+1. Run `ionic generate page beer` to create a component and a template to display the list of good beers. 
+2. Add `BeerPage` to the `declarations` and `entryComponent` lists in `app.module.ts`.
+3. Run `ionic generate provider beer-service` to create a service to fetch the beer list from the Spring Boot API.
+4. Change `src/providers/beer-service.ts` to use have a `getGoodBeers()` method. → **io-beer-service**
+5. Modify `beer.html` to show the list of beers. → **io-beer-list**
+6. Update `beer.ts` to import `BeerService` and add as a provider. Call the `getGoodBeers()` method in the `ionViewDidLoad()` lifecycle method. → **io-get-good-beers**
+7. To expose this page on the tab bar, add it to `tabs.ts`. Update `tabs.html` too!
 
-→ **io-beer-list**
+Add some fun with Giphy! Run `ionic generate provider giphy-service`. → **ng-giphy-service**
 
-```html
-<ion-header>
-  <ion-navbar>
-    <ion-title>Good Beers</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-<ion-content padding>
-  <ion-list>
-    <ion-item *ngFor="let beer of beers" >
-      <ion-item>
-        <h2>{{beer.name}}</h2>
-      </ion-item>
-    </ion-item>
-  </ion-list>
-</ion-content>
-```
+Update `beer.ts` to take advantage of `GiphyService`. → **ng-giphy-foreach**
 
-Update `beer.ts` to import `BeerService` and add as a provider. Call the `getGoodBeers()` method in the `ionViewDidLoad()` lifecycle method.
-
-```typescript
-import { Component } from '@angular/core';
-import { BeerService } from '../../providers/beer-service';
-
-@Component({
-  selector: 'page-beer',
-  templateUrl: 'beer.html',
-  providers: [BeerService]
-})
-export class BeerPage {
-  beers: Array<any>;
-
-  constructor(public beerService: BeerService) {
-  }
-
-  ionViewDidLoad() {
-    this.beerService.getGoodBeers().subscribe(beers => {
-      this.beers = beers;
-    })
-  }
-}
-```
-
-To expose this page on the tab bar, add it to `tabs.ts`
-
-```typescript
-import { Component } from '@angular/core';
-
-import { HomePage } from '../home/home';
-import { AboutPage } from '../about/about';
-import { ContactPage } from '../contact/contact';
-import { BeerPage } from '../beer/beer';
-
-@Component({
-  templateUrl: 'tabs.html'
-})
-export class TabsPage {
-  // this tells the tabs component which Pages
-  // should be each tab's root Page
-  tab1Root: any = HomePage;
-  tab2Root: any = BeerPage;
-  tab3Root: any = ContactPage;
-  tab4Root: any = AboutPage;
-
-  constructor() {
-  }
-}
-```
-
-Update `tabs.html` too!
-
-```html
-<ion-tabs>
-  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
-  <ion-tab [root]="tab2Root" tabTitle="Beer" tabIcon="beer"></ion-tab>
-  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
-  <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
-</ion-tabs>
-```
-
-Add some fun with Giphy! Run `ionic generate provider giphy-service`. Replace the code in `src/providers/giphy-service.ts` with the following TypeScript:
-
-→ **ng-giphy-service**
-
-```typescript
-import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { Observable } from 'rxjs';
-
-@Injectable()
-// http://tutorials.pluralsight.com/front-end-javascript/getting-started-with-angular-2-by-building-a-giphy-search-application
-export class GiphyService {
-
-  giphyApi = 'https://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=';
-
-  constructor(public http: Http) {
-  }
-
-  get(searchTerm): Observable<any> {
-    let apiLink = this.giphyApi + searchTerm;
-    return this.http.request(apiLink).map((res: Response) => {
-      let results = res.json().data;
-      if (results.length > 0) {
-        return results[0].images.original.url;
-      } else {
-        return 'https://media.giphy.com/media/YaOxRsmrv9IeA/giphy.gif'; // dancing cat for 404
-      }
-    });
-  }
-}
-```
-
-Update `beer.ts` to take advantage of `GiphyService`:
-
-→ **ng-giphy-foreach**
-
-```typescript
-import { Component } from '@angular/core';
-import { BeerService } from '../../providers/beer-service';
-import { GiphyService } from '../../providers/giphy-service';
-
-@Component({
-  selector: 'page-beer',
-  templateUrl: 'beer.html',
-  providers: [BeerService, GiphyService]
-})
-export class BeerPage {
-  private beers: Array<any>;
-
-  constructor(public beerService: BeerService, public giphyService: GiphyService) {
-  }
-
-  ionViewDidLoad() {
-    this.beerService.getGoodBeers().subscribe(beers => {
-      this.beers = beers;
-      for (let beer of this.beers) {
-        this.giphyService.get(beer.name).subscribe(url => {
-          beer.giphyUrl = url
-        });
-      }
-    })
-  }
-}
-```
-
-Update `beer.html` to display the image retrieved:
-
-→ **io-avatar**
-
-```html
-<ion-item>
-    <ion-avatar item-left>
-      <img src="{{beer.giphyUrl}}">
-    </ion-avatar>
-    <h2>{{beer.name}}</h2>
-</ion-item>
-```
+Update `beer.html` to display the image retrieved. → **io-avatar**
 
 If everything works as expected, you should see a page with a list of beers and images.
 
 ### Add a Modal for Editing
 
-Change the header in `beer.html` to have a button that opens a modal to add a new beer.
-
-→ **io-open-modal**
-
-```html
-<ion-header>
-  <ion-navbar>
-    <ion-title>Good Beers</ion-title>
-    <ion-buttons end>
-      <button ion-button icon-only (click)="openModal()" color="primary">
-        <ion-icon name="add-circle"></ion-icon>
-        <ion-icon name="beer"></ion-icon>
-      </button>
-    </ion-buttons>
-  </ion-navbar>
-```
+Change the header in `beer.html` to have a button that opens a modal to add a new beer. → **io-open-modal**
 
 In this same file, change `<ion-item>` to have a click handler for opening the modal for the current item.
 
@@ -596,235 +156,29 @@ In this same file, change `<ion-item>` to have a click handler for opening the m
 <ion-item (click)="openModal({id: beer.id})">
 ```
 
-Add `ModalController` as a dependency in `BeerPage` and add an `openModal()` method.
-
-→ **io-open-modal-ts**
-
-```typescript
-export class BeerPage {
-  private beers: Array<any>;
-
-  constructor(public beerService: BeerService, public giphyService: GiphyService,
-              public modalCtrl: ModalController) {
-  }
-
-  // ionViewDidLoad method
-
-  openModal(beerId) {
-    let modal = this.modalCtrl.create(BeerModalPage, beerId);
-    modal.present();
-    // refresh data after modal dismissed
-    modal.onDidDismiss(() => this.ionViewDidLoad())
-  }
-}
-```
-
-This won't compile because `BeerModalPage` doesn't exist. Create `beer-modal.ts` in the same directory. This page will retrieve the beer from the `beerId` that's passed in. It will render the name, allow it to be edited, and show the Giphy image found for the name.
-
-→ **io-beer-modal**
-
-```typescript
-import { BeerService } from '../../providers/beer-service';
-import { Component, ViewChild } from '@angular/core';
-import { GiphyService } from '../../providers/giphy-service';
-import { NavParams, ViewController, ToastController, NavController } from 'ionic-angular';
-import { NgForm } from '@angular/forms';
-
-@Component({
-  templateUrl: './beer-modal.html'
-})
-export class BeerModalPage {
-  @ViewChild('name') name;
-  beer: any = {};
-  error: any;
-
-  constructor(public beerService: BeerService,
-              public giphyService: GiphyService,
-              public params: NavParams,
-              public viewCtrl: ViewController,
-              public toastCtrl: ToastController,
-              public navCtrl: NavController) {
-    if (this.params.data.id) {
-      this.beerService.get(this.params.get('id')).subscribe(beer => {
-        this.beer = beer;
-        this.beer.href = beer._links.self.href;
-        this.giphyService.get(beer.name).subscribe(url => beer.giphyUrl = url);
-      });
-    }
-  }
-
-  dismiss() {
-    this.viewCtrl.dismiss();
-  }
-
-  save(form: NgForm) {
-    let update: boolean = form['href'];
-    this.beerService.save(form).subscribe(result => {
-      let toast = this.toastCtrl.create({
-        message: 'Beer "' + form.name + '" ' + ((update) ? 'updated' : 'added') + '.',
-        duration: 2000
-      });
-      toast.present();
-      this.dismiss();
-    }, error => this.error = error)
-  }
-
-  ionViewDidLoad() {
-    setTimeout(() => {
-      this.name.setFocus();
-    },150);
-  }
-}
-```
-
-Create `beer-modal.html` as a template for this page.
+Add `ModalController` as a dependency in `BeerPage` and add an `openModal()` method. → **io-open-modal-ts**
 
-→ **io-beer-modal-html**
+This won't compile because `BeerModalPage` doesn't exist. Create `beer-modal.ts` in the same directory. → **io-beer-modal**
 
-```html
-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      {{beer ? 'Beer Details' : 'Add Beer'}}
-    </ion-title>
-    <ion-buttons start>
-      <button ion-button (click)="dismiss()">
-        <span ion-text color="primary" showWhen="ios,core">Cancel</span>
-        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
-      </button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-<ion-content padding>
-  <form #beerForm="ngForm" (ngSubmit)="save(beerForm.value)">
-    <input type="hidden" name="href" [(ngModel)]="beer.href">
-    <ion-row>
-      <ion-col>
-        <ion-list inset>
-          <ion-item>
-            <ion-input placeholder="Beer Name" name="name" type="text"
-                       required [(ngModel)]="beer.name" #name></ion-input>
-          </ion-item>
-        </ion-list>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col *ngIf="beer" text-center>
-        <img src="{{beer.giphyUrl}}">
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col>
-        <div *ngIf="error" class="alert alert-danger">{{error}}</div>
-        <button ion-button color="primary" full type="submit"
-                [disabled]="!beerForm.form.valid">Save</button>
-      </ion-col>
-    </ion-row>
-  </form>
-</ion-content>
-```
+Create `beer-modal.html` as a template for this page. → **io-beer-modal-html**
 
 Add `BeerModalPage` to the `declarations` and `entryComponent` lists in `app.module.ts`.
 
-You'll also need to modify `beer-service.ts` to have `get()` and `save()` methods.
-
-→ **io-get-save**
-
-```typescript
-get(id: string) {
-  return this.http.get(this.BEER_API + '/' + id)
-    .map((response: Response) => response.json());
-}
-
-save(beer: any): Observable<any> {
-  let result: Observable<Response>;
-  if (beer['href']) {
-    result = this.http.put(beer.href, beer);
-  } else {
-    result = this.http.post(this.BEER_API, beer)
-  }
-  return result.map((response: Response) => response.json())
-    .catch(error => Observable.throw(error));
-}
-
-remove(id: string) {
-  return this.http.delete(this.BEER_API + '/' + id)
-    .map((response: Response) => response.json());
-}
-```
+You'll also need to modify `beer-service.ts` to have `get()` and `save()` methods. → **io-get-save**
 
 ### Add Swipe to Delete
 
-To add swipe-to-delete functionality on the list of beers, open `beer.html` and make it so `<ion-item-sliding>` wraps `<ion-item>` and contains the `*ngFor`. Add a delete button using `<ion-item-options>`.
-
-→ **io-swipe**
-
-```html
-<ion-content padding>
-  <ion-list>
-    <ion-item-sliding *ngFor="let beer of beers">
-      <ion-item (click)="openModal({id: beer.id})">
-        <ion-avatar item-left>
-          <img src="{{beer.giphyUrl}}">
-        </ion-avatar>
-        <h2>{{beer.name}}</h2>
-      </ion-item>
-      <ion-item-options>
-        <button ion-button color="danger" (click)="remove(beer)"><ion-icon name="trash"></ion-icon> Delete</button>
-      </ion-item-options>
-    </ion-item-sliding>
-  </ion-list>
-</ion-content>
-```
-
-Add a `remove()` method to `beer.ts`. 
-
-→ **io-remove**
-
-```typescript
-remove(beer) {
-  this.beerService.remove(beer.id).subscribe(response => {
-    for (let i = 0; i < this.beers.length; i++) {
-      if (this.beers[i] === beer) {
-        this.beers.splice(i, 1);
-        let toast = this.toastCtrl.create({
-          message: 'Beer "' + beer.name + '" deleted.',
-          duration: 2000,
-          position: 'top'
-        });
-        toast.present();
-      }
-    }
-  });
-}
-```
+To add swipe-to-delete functionality on the list of beers, open `beer.html` and make it so `<ion-item-sliding>` wraps `<ion-item>` and contains the `*ngFor`. → **io-swipe**
 
-Add `toastCtrl` as a dependency in the constructor so everything compiles.
+Add a `remove()` method to `beer.ts`. → **io-remove**
 
-```typescript
-constructor(public beerService: BeerService, public giphyService: GiphyService,
-          public modalCtrl: ModalController, public toastCtrl: ToastController) {
-}
-```
+Add `toastCtrl: ToastController` as a dependency in the constructor so everything compiles.
 
 After making these additions, you should be able to add, edit and delete beers.
 
 ## PWAs with Ionic
 
-Ionic 2 ships with support for creating progressive web apps (PWAs). Run the [Lighthouse Chrome extension](https://developers.google.com/web/tools/lighthouse/) on this application.
-
-To register a service worker, and improve the app’s score, uncomment the following block in `index.html`.
-
-```html
-<!-- un-comment this code to enable service worker
-<script>
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('service-worker.js')
-      .then(() => console.log('service worker installed'))
-      .catch(err => console.log('Error', err));
-  }
-</script>-->
-```
+Run the [Lighthouse Chrome extension](https://developers.google.com/web/tools/lighthouse/) on this application. To register a service worker, and improve the app’s score, uncomment the `serviceWorker` block in `index.html`.
 
 After making this change, the score should improve. In my tests, it increased to 69/100.  
 
@@ -845,8 +199,6 @@ To see how your application will look on different devices you can run `ionic se
 
 To emulate or deploy to an iOS device, you’ll need a Mac and a fresh installation of [Xcode](https://developer.apple.com/xcode/). If you’d like to build iOS apps on Windows, Ionic offers an [Ionic Package](http://ionic.io/cloud#packaging) service.
 
-Make sure to open Xcode to complete the installation.
-
 ```
 ionic platform add ios
 ```
@@ -866,8 +218,6 @@ open ionic-auth.xcodeproj
 
 Select your phone as the target in Xcode and click the play button to run your app. The first time you do this, Xcode may spin for a while with a “Processing symbol files” message at the top.
 
-See Ionic’s [deploying documentation](https://ionicframework.com/docs/v2/setup/deploying/) for information on code signing and trusting the app’s certificate.
-
 Once you’re configured your phone, computer, and Apple ID to work, you should be able to open the app and see login, register, and forgot password screens.
 
 ### Android