Add Ionic App with Spring Boot API

README.md

@@ -1,15 +1,10 @@
-# Stormpath is Joining Okta
-We are incredibly excited to announce that [Stormpath is joining forces with Okta](https://stormpath.com/blog/stormpaths-new-path?utm_source=github&utm_medium=readme&utm-campaign=okta-announcement). Please visit [the Migration FAQs](https://stormpath.com/oktaplusstormpath?utm_source=github&utm_medium=readme&utm-campaign=okta-announcement) for a detailed look at what this means for Stormpath users.
-
-We're available to answer all questions at [support@stormpath.com](mailto:support@stormpath.com).
-
-# Spring Boot, Ionic, and Stormpath 🍻
+# Spring Boot + Ionic 🍻
 
 This project is an example application for a typical [Ionic](https://ionicframework.com/) app with a [Spring Boot](https://projects.spring.io/spring-boot/) backend.
 
 You can read about how this application was created in [this tutorial](./TUTORIAL.md). Feel free to copy any code in this project for your own use in accordance with the [MIT license](LICENSE).
 
-**Prerequisites**: Java 8, Node.js, Maven, a [Stormpath Account](https://api.stormpath.com/register), and an `apiKey.properties` file in `~/stormpath/`.
+**Prerequisites**: Java 8, Node.js, and Maven.
 
 To run the Spring Boot backend, cd into `server` and run `mvn spring-boot:run`.
 

TUTORIAL.md

@@ -1,93 +1,31 @@
-# Spring Boot, Ionic, and Stormpath
+# Tutorial: Develop a Mobile App with Ionic and Spring Boot
 
-This tutorial shows how to build a secure Spring Boot API with Stormpath. It also shows how to build an Ionic app that securely connects to this API and can be deployed to a mobile device.
+Ionic 3.0 was [recently released](http://blog.ionic.io/ionic-3-0-has-arrived/), with support for 
+Angular 4, TypeScript 2.2, and lazy loading. Ionic, often called Ionic framework, is an open source
+(MIT-licensed) project that simplifies building native and progressive web apps. When developing an Ionic app, you'll use Angular and have access to native APIs via [Ionic Native](https://ionicframework.com/docs/native/) and [Apache Cordova](https://cordova.apache.org/). This means you can develop slick-looking UIs using the technologies you know and love: HTML, CSS, and JavaScript/TypeScript.
 
-**Prerequisites**: Java 8, Node.js, Maven, a [Stormpath Account](https://api.stormpath.com/register), and an `apiKey.properties` file in `~/stormpath/`.
+This tutorial shows how to build a Spring Boot API, how to build an Ionic app, and how to deploy it to a mobile device.
 
-## Spring Boot API
-
-Create your Spring Boot API project using [start.spring.io](https://start.spring.io).
-
-```
-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`.
+**Prerequisites**: [Java 8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) and [Node.js](https://nodejs.org) installed.
 
-```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;
+## Create a Project
 
-    public Beer() {
-    }
-
-    public Beer(String name) {
-        this.name = name;
-    }
+To begin, create a directory on your hard drive called `spring-boot-ionic-example`. During this tutorial, you will create `server` and `ionic-beer` directories to hold the server and client applications, respectively.  
 
-    public Long getId() {
-        return id;
-    }
-
-    public void setId(Long id) {
-        this.id = id;
-    }
-
-    public String getName() {
-        return name;
-    }
+## Spring Boot API
 
-    public void setName(String name) {
-        this.name = name;
-    }
+I recently wrote about how to build a Spring Boot API in a [QuickStart Guide to Spring Boot with Angular]. Rather than covering that again, you can clone the existing project and copy the `server` directory into `spring-boot-ionic-example`.
 
-    @Override
-    public String toString() {
-        return "Beer{" +
-                "id=" + id +
-                ", name='" + name + '\'' +
-                '}';
-    }
-}
+```bash
+git clone https://github.com/oktadeveloper/spring-boot-angular-example.git
+cp -r spring-boot-angular-example/server ~/spring-boot-ionic-example/.
 ```
 
-Create a JPA Repository to manage the `Beer` entity.
-
-```java
-package com.example.beer;
-
-import org.springframework.data.jpa.repository.JpaRepository;
-import org.springframework.data.rest.core.annotation.RepositoryRestResource;
+This project contains a `beers` API that allows you to <abbr title="Create, Read, Update, and Delete">CRUD</abbr> a list of beer names. It also contains a `/good-beers` endpoint that filters out less-than-great beers.
 
-@RepositoryRestResource
-interface BeerRepository extends JpaRepository<Beer, Long> {
-}
-```
-
-Create a CommandLineRunner to populate the database.
+The default list of beers is created by a `BeerCommandLineRunner` class:
 
 ```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;
@@ -98,29 +36,26 @@ class BeerCommandLineRunner implements CommandLineRunner {
 
     @Override
     public void run(String... strings) throws Exception {
-        // 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 ->
+        // Top beers from https://www.beeradvocate.com/lists/top/
+        Stream.of("Kentucky Brunch Brand Stout", "Good Morning", "Very Hazy", "King Julius",
+                "Budweiser", "Coors Light", "PBR").forEach(name ->
                 repository.save(new Beer(name))
         );
-        System.out.println(repository.findAll());
+        repository.findAll().forEach(System.out::println);
     }
 }
 ```
 
-Create a `BeerController` for your REST API. Add some business logic that results in a `/good-beers` endpoint.
+The `BeerRepository` interface is decorated with `@RepositoryRestResource` to expose CRUD endpoints for the `Beer` entity.
 
 ```java
-package com.example.beer;
-
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RestController;
+@RepositoryRestResource
+interface BeerRepository extends JpaRepository<Beer, Long> {}
+```
 
-import java.util.Collection;
-import java.util.HashMap;
-import java.util.Map;
-import java.util.stream.Collectors;
+The last piece of the API is the `BeerController` that exposes `/good-beers` and specifies cross-origin resource sharing (CORS) settings.
 
+```java
 @RestController
 public class BeerController {
     private BeerRepository repository;
@@ -130,6 +65,7 @@ public class BeerController {
     }
 
     @GetMapping("/good-beers")
+    @CrossOrigin(origins = "http://localhost:4200")
     public Collection<Map<String, String>> goodBeers() {
 
         return repository.findAll().stream()
@@ -148,251 +84,128 @@ public class BeerController {
                 !beer.getName().equals("PBR");
     }
 }
-
 ```
 
-Access the API using `http localhost:8080/good-beers --auth <user>:<password>`.
+You should be able to start the `server` application by running it in your favorite IDE or from the command line using `mvn spring-boot:run`. If you don't have Maven installed, you can use the Maven wrapper that's included in the project (`./mvnw spring-boot:run` on *nix, `\mvnw spring-boot:run` on Windows).
 
-## Create Ionic App
+After the app has started, navigate to <http://localhost:8080/good-beers>. You should see the list of good beers in your browser.
 
-Install Ionic and Cordova: `yarn global add cordova ionic`
+![Good Beers JSON](static/good-beers-json.png) 
 
-From a terminal window, create a new application using the following command:
+## Create Ionic App
 
+To create an Ionic app to display data from your API, you'll first need to install Ionic CLI and Cordova: 
+
+```bash
+npm install -g ionic cordova
 ```
+
+The [Ionic CLI](http://ionicframework.com/docs/cli/) is a command-line tool that greatly reduces the time it takes to develop an Ionic app. It’s like a Swiss Army Knife: It brings together a bunch of miscellaneous tools under a single interface. The CLI contains a number of useful commands for Ionic development, such as `start`, `build`, `generate`, `serve`, and `run`.
+
+After installation completes, create a new application using the following command:
+
+```bash
 ionic start ionic-beer --v2
 ```
 
 This may take a minute or two to complete, depending on your internet connection speed. In the same terminal window, change to be in your application’s directory and run it.
 
-```
+```bash
 cd ionic-beer
 ionic serve
 ```
 
 This will open your default browser on [http://localhost:8100](http://localhost:8100). You can click through the tabbed interface to see the default structure of the app.
 
-## Upgrade to Angular 2.3
+![Ionic shell with tabs](static/ionic-tabs.png)
 
-With Angular versions less than 2.3, you can’t extend components and override their templates. The Ionic pages for Stormpath module uses component extension to override the templates in its pages. Because of this, you have to upgrade your project to use Angular 2.3. The only downside to use Angular 2.3 with Ionic 2.0.0 is that you won’t be able to use the `--prod` build flag when compiling. This is because its compiler does not support Angular 2.3.
+## Create a Good Beers UI
 
-To begin, modify `package.json` so all the `angular` dependencies use version `2.3.1` rather than `2.2.1`.
+Run `ionic generate page beer` to create a component and a template to display the list of good beers. This creates a number of files in `src/app/pages/beer`:
 
-```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",
+```
+beer.html
+beer.module.ts
+beer.scss
+beer.ts
 ```
 
-Run `yarn` to update to these versions.
+Open `beer.ts` and change the name of the class to be `BeerPage`.
 
-## Install Ionic Pages for Stormpath
+```typescript
+export class BeerPage {
 
-Install [Ionic pages for Stormpath](https://github.com/stormpath/stormpath-sdk-angular-ionic):
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
 
-```
-yarn add angular-stormpath-ionic
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad BeerPage');
+  }
+
+}
 ```
 
-Modify `src/app/app.module.ts` to define a `stormpathConfig` function. This function is used to configure the `endpointPrefix` to point to your Spring Boot API. Import `StormpathModule`, `StormpathIonicModule`, and override the provider of `StormpathConfiguration`. You’ll also need to append Stormpath's pre-built Ionic pages to `entryComponents`.
+Modify `beer.module.ts` to change the class name too.
 
 ```typescript
-import { StormpathConfiguration, StormpathModule } from 'angular-stormpath';
-import { StormpathIonicModule, LoginPage, ForgotPasswordPage, RegisterPage } from 'angular-stormpath-ionic';
-
-export function stormpathConfig(): StormpathConfiguration {
-  let spConfig: StormpathConfiguration = new StormpathConfiguration();
-  spConfig.endpointPrefix = 'http://localhost:8080';
-  return spConfig;
-}
+import { NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+import { BeerPage } from './beer';
 
 @NgModule({
-  ...
-  imports: [
-    IonicModule.forRoot(MyApp),
-    StormpathModule,
-    StormpathIonicModule
+  declarations: [
+    BeerPage
   ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    ...
-    LoginPage,
-    ForgotPasswordPage,
-    RegisterPage
+  imports: [
+    IonicModule.forRoot(BeerPage),
   ],
-  providers: [
-    {provide: ErrorHandler, useClass: IonicErrorHandler},
-    {provide: StormpathConfiguration, useFactory: stormpathConfig}
+  exports: [
+    BeerPage
   ]
 })
-export class AppModule {}
+export class BeerModule {}
 ```
 
-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.
+Add `BeerModule` to the `imports` list in `app.module.ts`.
 
 ```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;
-      }
-    });
-
-    platform.ready().then(() => {
-      // Okay, so the platform is ready and our plugins are available.
-      // Here you can do any higher level native things you might need.
-      StatusBar.styleDefault();
-      Splashscreen.hide();
-    });
-  }
-}
-```
-
-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.
-```
+import { BeerModule } from '../pages/beer/beer.module';
 
-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.
-
-```
-stormpath.web.cors.allowed.originUris = http://localhost:8100,file://
-```
-
-Restart Spring Boot and your Ionic app. You should see a login screen when you run `ionic serve`.
-
-![Stormpath Login for Ionic](./static/ionic-login.png)
-
-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.
-
-```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>
-
-<ion-content padding>
+@NgModule({
   ...
-  <p *ngIf="(user$ | async)">
-    You are logged in as: <b>{{ ( user$ | async ).fullName }}</b>
-  </p>
-</ion-content>
-```
-
-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.
-
-```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();
-  }
-}
-```
-
-If you’re logged in, you should see a screen with a logout button and the name of the currently logged in user.
-
-![Logged in as: Hip User](./static/ionic-home.png)
-
-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.
-
-```xml
-<preference name="KeyboardDisplayRequiresUserAction" value="false"/>
-```
-
-Check your changes into Git.
-
-```
-git add .
-git commit -m "Add Stormpath"
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(MyApp),
+    BeerModule
+  ],
+  ...
+})
 ```
 
-## Build a Good Beers UI
-
-Run `ionic generate page beer` to create a component and a template to display the list of good beers.
+Run `ionic g provider beer-service` to create a service to fetch the beer list from the Spring Boot API.
 
-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.
+Change `src/providers/beer-service.ts` to have constants for the API path and add a `getGoodBeers()` method.
 
 ```typescript
 import { Injectable } from '@angular/core';
-import { Http, Response, RequestOptions } from '@angular/http';
+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;
+  public API = 'http://localhost:8080';
+  public BEER_API = this.API + '/beers';
 
-  constructor(public http: Http, public config: StormpathConfiguration) {
-    this.API = config.endpointPrefix;
-    this.BEER_API = this.API + '/beers';
-  }
+  constructor(private http: Http) {}
 
   getGoodBeers(): Observable<any> {
-    let options = new RequestOptions({ withCredentials: true });
-    return this.http.get(this.API + '/good-beers', options)
+    return this.http.get(this.API + '/good-beers')
       .map((response: Response) => response.json());
   }
 }
 ```
 
-**TIP:** If you don’t want to pass in `withCredentials: true`, you can add the API URI as an `autoAuthorizeUri` in `StormpathConfiguration`.
-
-```typescript
-export function stormpathConfig(): StormpathConfiguration {
-  let spConfig: StormpathConfiguration = new StormpathConfiguration();
-  spConfig.endpointPrefix = 'http://localhost:8080';
-  spConfig.autoAuthorizedUris.push(new RegExp(spConfig.endpointPrefix + '/*'));
-  return spConfig;
-}
-```
-
 Modify `beer.html` to show the list of beers.
 
 ```html
@@ -405,28 +218,43 @@ Modify `beer.html` to show the list of beers.
 
 <ion-content padding>
   <ion-list>
-    <ion-item *ngFor="let beer of beers" >
+    <ion-item *ngFor="let beer of beers">
       <h2>{{beer.name}}</h2>
     </ion-item>
   </ion-list>
 </ion-content>
 ```
 
-Update `beer.ts` to import `BeerService` and add as a provider. Call the `getGoodBeers()` method in the `ionViewDidLoad()` lifecycle method.
+Modify `beer.module.ts` to import `BeerService` and add it as a provider. You could add it as a provider in each component, but adding it in the module allows all components to use it. 
+
+```typescript
+import { BeerService } from '../../providers/beer-service';
+
+@NgModule({
+  ...
+  providers: [
+    BeerService
+  ]
+})
+```
+
+Update `beer.ts` to import `BeerService` and add it as a dependency in the constructor. Call the `getGoodBeers()` method in the `ionViewDidLoad()` lifecycle method.
 
 ```typescript
 import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { BeerService } from '../../providers/beer-service';
 
+@IonicPage()
 @Component({
   selector: 'page-beer',
-  templateUrl: 'beer.html',
-  providers: [BeerService]
+  templateUrl: 'beer.html'
 })
 export class BeerPage {
   private beers: Array<any>;
 
-  constructor(public beerService: BeerService) {
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+              public beerService: BeerService) {
   }
 
   ionViewDidLoad() {
@@ -451,19 +279,16 @@ import { BeerPage } from '../beer/beer';
   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() {
-  }
+  constructor() {}
 }
 ```
 
-Update `tabs.html` too!
+You'll also need to update `tabs.html` to have the new tab order.
 
 ```html
 <ion-tabs>
@@ -474,7 +299,9 @@ Update `tabs.html` too!
 </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:
+### Add Some Fun with Animated GIFs
+
+Run `ionic g provider giphy-service` to generate a `GiphyService` class. Replace the code in `src/providers/giphy-service.ts` with code that searches Giphy's API:
 
 ```typescript
 import { Injectable } from '@angular/core';
@@ -485,6 +312,7 @@ import { Observable } from 'rxjs';
 // http://tutorials.pluralsight.com/front-end-javascript/getting-started-with-angular-2-by-building-a-giphy-search-application
 export class GiphyService {
 
+  // Public beta key: https://github.com/Giphy/GiphyAPI#public-beta-key
   giphyApi = 'https://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=';
 
   constructor(public http: Http) {
@@ -504,22 +332,38 @@ export class GiphyService {
 }
 ```
 
-Update `beer.ts` to take advantage of `GiphyService`:
+Update `beer.module.ts` to import `GiphyService` and include it is as a provider.
+
+```typescript
+import { GiphyService } from '../../providers/giphy-service';
+
+@NgModule({
+  ...
+  providers: [
+    BeerService,
+    GiphyService
+  ]
+})
+```
+
+Modify `beer.ts` to import `GiphyService` and set a `giphyUrl` on each beer.
 
 ```typescript
 import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { BeerService } from '../../providers/beer-service';
 import { GiphyService } from '../../providers/giphy-service';
 
+@IonicPage()
 @Component({
   selector: 'page-beer',
-  templateUrl: 'beer.html',
-  providers: [BeerService, GiphyService]
+  templateUrl: 'beer.html'
 })
 export class BeerPage {
   private beers: Array<any>;
 
-  constructor(public beerService: BeerService, public giphyService: GiphyService) {
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+              public beerService: BeerService, public giphyService: GiphyService) {
   }
 
   ionViewDidLoad() {
@@ -546,11 +390,49 @@ Update `beer.html` to display the image retrieved:
 </ion-item>
 ```
 
+Start the Spring Boot app in one terminal and run `ionic serve` in another. Open <http://localhost:8100> in your browser. Click on the Beer icon and you'll likely see an error in your browser.
+
+```
+Uncaught (in promise): Error: No provider for Http! 
+```
+
+![No provider for Http!](static/no-http-provider.png)
+
+This highlights one of the slick features of Ionic: errors are displayed in your browser, not just the browser's console. Add `HttpModule` to the list of imports in `src/app/app.module.ts` to solve this issue.
+
+```typescript
+import { HttpModule } from '@angular/http';
+
+@NgModule({
+  ...
+  imports: [
+    BrowserModule,
+    HttpModule,
+    IonicModule.forRoot(MyApp),
+    BeerModule
+  ],
+```
+
+After making this change, you’ll likely see the following error in your browser’s console.
+
+```
+XMLHttpRequest cannot load http://localhost:8080/good-beers. 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 401.
+```
+
+To fix this, open your Spring Boot application's `BeerController.java` class and change its `@CrossOrigin` annotation to allow `http://localhost:8100` and `file://`. This enables cross-origin resource sharing (CORS) from both the browser and the mobile client.
+
+```java
+@CrossOrigin(origins = {"http://localhost:8100","file://"})
+public Collection<Map<String, String>> goodBeers() {
+```
+
+Recompile this class and DevTools should restart the application.
+
 If everything works as expected, you should see a page similar to the one below in your browser.
 
-<p align="center">
-<img src="./static/good-beers-ui.png" width="600" alt="Good Beers UI">
-</p>
+![Good Beers UI](static/good-beers-ui.png)
 
 ### Add a Modal for Editing
 
@@ -578,12 +460,13 @@ In this same file, change `<ion-item>` to have a click handler for opening the m
 Add `ModalController` as a dependency in `BeerPage` and add an `openModal()` method.
 
 ```typescript
-import { ModalController } from 'ionic-angular';
+import { IonicPage, ModalController, NavController, NavParams } from 'ionic-angular';
 
 export class BeerPage {
   private beers: Array<any>;
 
-  constructor(public beerService: BeerService, public giphyService: GiphyService,
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+              public beerService: BeerService, public giphyService: GiphyService,
               public modalCtrl: ModalController) {
   }
 
@@ -654,7 +537,7 @@ export class BeerModalPage {
 }
 ```
 
-Create `beer-modal.html` as a template for this page.
+Add the import for `BeerModalPage` to `beer.ts`, then create `beer-modal.html` as a template for this page.
 
 ```html
 <ion-header>
@@ -699,7 +582,7 @@ Create `beer-modal.html` as a template for this page.
 </ion-content>
 ```
 
-Add `BeerModalPage` to the `declarations` and `entryComponent` lists in `app.module.ts`.
+Add `BeerModalPage` to the `declarations` and `entryComponent` lists in `beer.module.ts`.
 
 You'll also need to modify `beer-service.ts` to have `get()` and `save()` methods.
 
@@ -721,6 +604,40 @@ save(beer: any): Observable<any> {
 }
 ```
 
+At this point, if you try to add or edit a beer name, you'll likely see an error in your browser's console.
+
+```
+ModalCmp ionViewPreLoad error: No component factory found for BeerModalPage. 
+Did you add it to @NgModule.entryComponents?
+```
+
+Add `BeerModalPage` to the list of `entryComponents` in `app.module.ts`. While you're in there, add `BeerService` to the list of global providers so you don't have to add it to each component that uses it.
+
+```typescript
+@NgModule({
+  ...
+  entryComponents: [
+    ...
+    BeerModalPage
+  ],
+  providers: [
+    BeerService,
+    ...
+  ]
+})
+```
+
+Now if you try to edit a beer's name, you'll see another CORS in your browser's console. Add a `@CrossOrigin` annotation to `BeerRepository.java` (in your Spring Boot project) that matches the one in `BeerController`.
+ 
+```java
+@RepositoryRestResource
+@CrossOrigin(origins = {"http://localhost:8100","file://"})
+```
+
+Re-compile and now everything should work as expected. For example, below is a screenshot that shows I added a new beer and what it looks like when editing it.
+ 
+![Mmmmm, Guinness](static/beer-modal.png)
+
 ### 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>`.
@@ -766,7 +683,8 @@ remove(beer) {
 Add `toastCtrl` as a dependency in the constructor so everything compiles.
 
 ```typescript
-constructor(public beerService: BeerService, public giphyService: GiphyService,
+constructor(public navCtrl: NavController, public navParams: NavParams,
+          public beerService: BeerService, public giphyService: GiphyService,
           public modalCtrl: ModalController, public toastCtrl: ToastController) {
 }
 ```
@@ -780,37 +698,36 @@ remove(id: string) {
 }
 ```
 
-After making these additions, you should be able to add, edit and delete beers.
+After making these additions, you should be able to delete beer names. To emulate a left swipe in your browser, click on the item and drag it to the left.
 
-<p align="center">
-<img src="./static/beer-modal.png" width="350">&nbsp;&nbsp;
-<img src="./static/beer-delete.png" width="350">
-</p>
+![Left swipe](static/beer-delete.png)
 
 ## PWAs with Ionic
 
-Ionic 2 ships with support for creating progressive web apps (PWAs). If you’d like to learn more about what PWAs are, see [Navigating the World of Progressive Web Apps with Ionic 2](http://blog.ionic.io/navigating-the-world-of-progressive-web-apps-with-ionic-2/).
+Ionic ships with support for creating progressive web apps (PWAs). If you’d like to learn more about what PWAs are, see [Navigating the World of Progressive Web Apps with Ionic 2](http://blog.ionic.io/navigating-the-world-of-progressive-web-apps-with-ionic-2/). This blog post is still relevant for Ionic 3.
+
+If you run the [Lighthouse Chrome extension](https://developers.google.com/web/tools/lighthouse/) on this application, you’ll get a mediocre score (51/100).
 
-If you run the [Lighthouse Chrome extension](https://developers.google.com/web/tools/lighthouse/) on this application, you’ll get a mediocre score (54/100).
+![Lighthouse: 51](static/lighthouse-51.png)
 
-To register a service worker, and improve the app’s score, uncomment the following block in `index.html`.
+To register a service worker, and improve the app’s score, uncomment the following block in `src/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));
-  }
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js')
+    .then(() => console.log('service worker installed'))
+    .catch(err => console.log('Error', err));
+}
 </script>-->
 ```
 
-After making this change, the score should improve. In my tests, it increased to 69/100. The remaining issues were:
+After making this change, the score should improve. In my tests, it increased to 66/100. The remaining issues were:
 
-* The page body should render some content if its scripts are not available. This could likely be solved with [Angular’s app-shell directives](https://www.npmjs.com/package/@angular/app-shell).
-* Site is not on HTTPS and does not redirect HTTP to HTTPS.
 * A couple -1’s in performance for "Cannot read property 'ts' of undefined”.
+* Site is not progressively enhanced (page should contain some content when JavaScript is not available). This could likely be solved with [Angular’s app-shell directives](https://www.npmjs.com/package/@angular/app-shell).
+* Site is not on HTTPS and does not redirect HTTP to HTTPS.
 
 If you refresh the app and Chrome doesn’t prompt you to install the app (a PWA feature), you probably need to turn on a couple of features. Copy and paste the following URLs into Chrome and enable each feature.
 
@@ -819,7 +736,7 @@ chrome://flags/#bypass-app-banner-engagement-checks
 chrome://flags/#enable-add-to-shelf
 ```
 
-After enabling these flags, you’ll see an error in your browser’s console about `assets/imgs/logo.png` not being found. This files is referenced in `src/manifest.json`. You can fix this by copying a 512x512 PNG into this location or by modifying `manifest.json` accordingly.
+After enabling these flags, you’ll see an error in your browser’s console about `assets/imgs/logo.png` not being found. This file is referenced in `src/manifest.json`. You can fix this by copying a 512x512 PNG ([like this one](http://www.iconsdb.com/orange-icons/beer-icon.html)) into this location or by modifying `manifest.json` accordingly. At the very least, you should modify `manifest.json` to have your app's name.
 
 ## Deploy to a Mobile Device
 
@@ -827,6 +744,8 @@ It’s pretty cool that you’re able to develop mobile apps with Ionic in your
 
 To see how your application will look on different devices you can run `ionic serve --lab`. The `--lab` flag opens opens a page in your browser that lets you see how your app looks on different devices.
 
+![Ionic Labs](static/ionic-labs.png)
+
 ### iOS
 
 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.
@@ -854,7 +773,7 @@ open ionic-beer.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.
 
-Deploying to your phone will likely fail because it won't be able to connect to `http://localhost:8080`. To fix this, copy [this script](./deploy.sh) to your hard drive. It expects to be in a directory above your apps. It also expects your apps to be named `client` and `server`.
+Deploying to your phone will likely fail because it won't be able to connect to `http://localhost:8080`. To fix this, copy [this script](./deploy.sh) to your hard drive. It expects to be in a directory above your apps. It also expects your apps to be named `ionic-beer` and `server`.
 
 If you don't have a Cloud Foundry account, you'll need to [create one](https://account.run.pivotal.io/z/uaa/sign-up) and install its command line tools for this script to work.
 
@@ -862,13 +781,9 @@ If you don't have a Cloud Foundry account, you'll need to [create one](https://a
 brew tap cloudfoundry/tap && brew install cf-cli
 ```
 
-Once you’re configured your phone, computer, and Apple ID to work, you should be able to open the app and see all the screens you created. Below are the ones the ones I captured on my iPhone 6s Plus.
+Once you’re configured your phone, computer, and Apple ID to work, you should be able to open the app and see the beer list you created. Below is how it looks on my iPhone 6s Plus.
 
-<p align="center">
-<img src="./static/iphone-login.png" width="250">&nbsp;&nbsp;
-<img src="./static/iphone-register.png" width="250">&nbsp;&nbsp;
-<img src="./static/iphone-forgot-password.png" width="250">
-</p>
+![iPhone Beer List](static/iphone-beer-list.png)
 
 ### Android
 
@@ -903,11 +818,18 @@ Skin: Skin with dynamic hardware controls
 
 After performing these steps, you should be able to run `ionic emulate android` and see your app running in the AVD.
 
+![Android Beer List](static/android-beer-list.png)
+
 ## Learn More
-I hope you’ve enjoyed this tour of Ionic, Angular, and Stormpath. I like how Ionic takes your web development skills up a notch and allows you to create mobile applications that look and behave natively.
 
-To learn more about Ionic, Angular, or Stormpath, please see the following resources:
+I hope you’ve enjoyed this tour of Ionic and Angular. I like how Ionic takes your web development skills up a notch and allows you to create mobile applications that look and behave natively.
+
+You can find a completed version of the application created in this blog post [on GitHub](https://github.com/oktadeveloper/spring-boot-ionic-example).
+
+If you encountered issues, please [create an issue in GitHub](TODO) or hit me up on Twitter [@mraible](https://twitter.com/mraible).
+
+To learn more about Ionic or Angular, please see the following resources:
 
 * [Get started with Ionic Framework](http://ionicframework.com/getting-started/)
+* [Angular Authentication with OpenID Connect and Okta in 20 Minutes](http://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc)
 * [Getting Started with Angular](https://www.youtube.com/watch?v=Jq3szz2KOOs) A YouTube webinar by yours truly. ;)
-* [Stormpath Client API Guide](https://docs.stormpath.com/client-api/product-guide/latest/)

client/config.xml

@@ -1,40 +0,0 @@
-<?xml version='1.0' encoding='utf-8'?>
-<widget id="com.ionicframework.ionicauth613285" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-    <name>ionic-beer</name>
-    <description>An awesome Ionic/Cordova app.</description>
-    <author email="matt.raible@stormpath.com" href="https://stormpath.com/">Matt Raible</author>
-    <content src="index.html" />
-    <access origin="*" />
-    <allow-navigation href="http://ionic.local/*" />
-    <allow-intent href="http://*/*" />
-    <allow-intent href="https://*/*" />
-    <allow-intent href="tel:*" />
-    <allow-intent href="sms:*" />
-    <allow-intent href="mailto:*" />
-    <allow-intent href="geo:*" />
-    <platform name="android">
-        <allow-intent href="market:*" />
-    </platform>
-    <platform name="ios">
-        <allow-intent href="itms:*" />
-        <allow-intent href="itms-apps:*" />
-    </platform>
-    <preference name="webviewbounce" value="false" />
-    <preference name="UIWebViewBounce" value="false" />
-    <preference name="DisallowOverscroll" value="true" />
-    <preference name="android-minSdkVersion" value="16" />
-    <preference name="BackupWebStorage" value="none" />
-    <preference name="SplashMaintainAspectRatio" value="true" />
-    <preference name="FadeSplashScreenDuration" value="300" />
-    <preference name="SplashShowOnlyFirstTime" value="false" />
-    <preference name="KeyboardDisplayRequiresUserAction" value="false" />
-    <feature name="StatusBar">
-        <param name="ios-package" onload="true" value="CDVStatusBar" />
-    </feature>
-    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
-    <plugin name="cordova-plugin-whitelist" spec="~1.3.1" />
-    <plugin name="cordova-plugin-console" spec="~1.0.5" />
-    <plugin name="cordova-plugin-statusbar" spec="~2.2.1" />
-    <plugin name="cordova-plugin-device" spec="~1.1.4" />
-    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
-</widget>

client/src/app/app.component.ts

@@ -1,29 +0,0 @@
-import { Component } from '@angular/core';
-import { Platform } from 'ionic-angular';
-import { StatusBar, Splashscreen } from 'ionic-native';
-import { TabsPage } from '../pages/tabs/tabs';
-import { Stormpath, LoginPage } from 'angular-stormpath';
-
-@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;
-      }
-    });
-
-    platform.ready().then(() => {
-      // Okay, so the platform is ready and our plugins are available.
-      // Here you can do any higher level native things you might need.
-      StatusBar.styleDefault();
-      Splashscreen.hide();
-    });
-  }
-}

client/src/app/app.module.ts

@@ -1,56 +0,0 @@
-import { NgModule, ErrorHandler } from '@angular/core';
-import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
-import { MyApp } from './app.component';
-import { AboutPage } from '../pages/about/about';
-import { ContactPage } from '../pages/contact/contact';
-import { HomePage } from '../pages/home/home';
-import { TabsPage } from '../pages/tabs/tabs';
-import { StormpathConfiguration, StormpathModule } from 'angular-stormpath';
-import { StormpathIonicModule, LoginPage, RegisterPage, ForgotPasswordPage } from 'angular-stormpath-ionic';
-import { BeerPage } from '../pages/beer/beer';
-import { BeerService } from '../providers/beer-service';
-import { GiphyService } from '../providers/giphy-service';
-import { BeerModalPage } from '../pages/beer/beer-modal';
-
-export function stormpathConfig(): StormpathConfiguration {
-  let spConfig: StormpathConfiguration = new StormpathConfiguration();
-  spConfig.endpointPrefix = 'http://localhost:8080';
-  spConfig.autoAuthorizedUris.push(new RegExp(spConfig.endpointPrefix + '/*'));
-  return spConfig;
-}
-
-@NgModule({
-  declarations: [
-    MyApp,
-    AboutPage,
-    ContactPage,
-    HomePage,
-    TabsPage,
-    BeerPage,
-    BeerModalPage
-  ],
-  imports: [
-    IonicModule.forRoot(MyApp),
-    StormpathModule,
-    StormpathIonicModule
-  ],
-  bootstrap: [IonicApp],
-  entryComponents: [
-    MyApp,
-    AboutPage,
-    ContactPage,
-    HomePage,
-    TabsPage,
-    LoginPage,
-    ForgotPasswordPage,
-    RegisterPage,
-    BeerPage,
-    BeerModalPage
-  ],
-  providers: [
-    {provide: ErrorHandler, useClass: IonicErrorHandler},
-    {provide: StormpathConfiguration, useFactory: stormpathConfig},
-    BeerService, GiphyService
-  ]
-})
-export class AppModule {}

client/src/pages/about/about.html

@@ -1,18 +0,0 @@
-<ion-header>
-  <ion-navbar>
-    <ion-title>
-      About
-    </ion-title>
-  </ion-navbar>
-</ion-header>
-
-<ion-content padding>
-  <p><a href="https://stormpath.com">Stormpath</a> is an API service that allows developers to create, edit, and
-    securely store user accounts and user account data, and connect them with one or multiple applications. We make user
-    account management a lot easier, more secure, and infinitely scalable.</p>
-
-  <p>
-    Click the image below to see all the language and framework integrations we provide.
-    <a href="https://docs.stormpath.com"><img src="assets/imgs/stormpath-sdks.jpg" alt="Stormpath SDKs"></a>
-  </p>
-</ion-content>

client/src/pages/home/home.ts

@@ -1,20 +0,0 @@
-import { Component } from '@angular/core';
-
-import { Account, Stormpath } from 'angular-stormpath';
-import { Observable } from 'rxjs';
-
-@Component({
-  selector: 'page-home',
-  templateUrl: 'home.html'
-})
-export class HomePage {
-  user$: Observable<Account | boolean>;
-
-  constructor(private stormpath: Stormpath) {
-    this.user$ = this.stormpath.user$;
-  }
-
-  logout(): void {
-    this.stormpath.logout();
-  }
-}

deploy.sh

@@ -36,16 +36,10 @@ cf d -f ionic-server
 
 cf a
 
-# Stormpath
-stormpathApiKeyId=`cat ~/.stormpath/apiKey.properties | grep apiKey.id | cut -f3 -d\ `
-stormpathApiKeySecret=`cat ~/.stormpath/apiKey.properties | grep apiKey.secret | cut -f3 -d\ `
-
 # Deploy the server
 cd $r/server
 mvn clean package
 cf push -p target/*jar ionic-server --no-start  --random-route
-cf set-env ionic-server STORMPATH_API_KEY_ID $stormpathApiKeyId
-cf set-env ionic-server STORMPATH_API_KEY_SECRET $stormpathApiKeySecret
 cf set-env ionic-server FORCE_HTTPS true
 cf start ionic-server
 
@@ -53,7 +47,7 @@ cf start ionic-server
 serverUri=https://`app_domain ionic-server`
 
 # Deploy the client
-cd $r/client
+cd $r/ionic-beer
 npm run clean
 # replace the server URL in the client
 sed -i -e "s|http://localhost:8080|$serverUri|g" src/app/app.module.ts
@@ -63,5 +57,5 @@ npm install && ionic build ios
 ionic run ios
 
 # cleanup changed files
-git checkout $r/client
-rm $r/client/src/app/app.module.ts-e
+git checkout $r/ionic-beer
+rm $r/ionic-beer/src/app/app.module.ts-e

ionic-beer/config.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<widget id="com.ionicframework.ionicbeer926596" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <name>ionic-beer</name>
+  <description>An awesome Ionic/Cordova app.</description>
+  <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
+  <content src="index.html"/>
+  <access origin="*"/>
+  <allow-navigation href="http://ionic.local/*"/>
+  <allow-intent href="http://*/*"/>
+  <allow-intent href="https://*/*"/>
+  <allow-intent href="tel:*"/>
+  <allow-intent href="sms:*"/>
+  <allow-intent href="mailto:*"/>
+  <allow-intent href="geo:*"/>
+  <platform name="android">
+    <allow-intent href="market:*"/>
+  </platform>
+  <platform name="ios">
+    <allow-intent href="itms:*"/>
+    <allow-intent href="itms-apps:*"/>
+  </platform>
+  <preference name="webviewbounce" value="false"/>
+  <preference name="UIWebViewBounce" value="false"/>
+  <preference name="DisallowOverscroll" value="true"/>
+  <preference name="android-minSdkVersion" value="16"/>
+  <preference name="BackupWebStorage" value="none"/>
+  <preference name="SplashMaintainAspectRatio" value="true"/>
+  <preference name="FadeSplashScreenDuration" value="300"/>
+  <preference name="SplashShowOnlyFirstTime" value="false"/>
+  <feature name="StatusBar">
+    <param name="ios-package" onload="true" value="CDVStatusBar"/>
+  </feature>
+  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
+  <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
+  <plugin name="cordova-plugin-console" spec="1.0.5"/>
+  <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
+  <plugin name="cordova-plugin-device" spec="1.1.4"/>
+  <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
+</widget>

client/package.json → ionic-beer/package.json

@@ -10,32 +10,32 @@
     "ionic:serve": "ionic-app-scripts serve"
   },
   "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",
-    "@ionic/storage": "1.1.7",
-    "angular-stormpath-ionic": "^0.0.3",
-    "ionic-angular": "2.0.0",
-    "ionic-native": "2.4.1",
+    "@angular/common": "4.0.0",
+    "@angular/compiler": "4.0.0",
+    "@angular/compiler-cli": "4.0.0",
+    "@angular/core": "4.0.0",
+    "@angular/forms": "4.0.0",
+    "@angular/http": "4.0.0",
+    "@angular/platform-browser": "4.0.0",
+    "@angular/platform-browser-dynamic": "4.0.0",
+    "@ionic-native/core": "3.4.2",
+    "@ionic-native/splash-screen": "3.4.2",
+    "@ionic-native/status-bar": "3.4.2",
+    "@ionic/storage": "2.0.1",
+    "ionic-angular": "3.0.1",
     "ionicons": "3.0.0",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.1.1",
     "sw-toolbox": "3.4.0",
-    "zone.js": "0.6.26"
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@ionic/app-scripts": "1.0.0",
-    "typescript": "2.0.9"
+    "@ionic/app-scripts": "1.3.0",
+    "typescript": "~2.2.1"
   },
   "cordovaPlugins": [
+    "cordova-plugin-statusbar",
     "cordova-plugin-whitelist",
     "cordova-plugin-console",
-    "cordova-plugin-statusbar",
     "cordova-plugin-device",
     "cordova-plugin-splashscreen",
     "ionic-plugin-keyboard"

ionic-beer/src/app/app.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { Platform } from 'ionic-angular';
+import { StatusBar } from '@ionic-native/status-bar';
+import { SplashScreen } from '@ionic-native/splash-screen';
+
+import { TabsPage } from '../pages/tabs/tabs';
+
+@Component({
+  templateUrl: 'app.html'
+})
+export class MyApp {
+  rootPage:any = TabsPage;
+
+  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
+    platform.ready().then(() => {
+      // Okay, so the platform is ready and our plugins are available.
+      // Here you can do any higher level native things you might need.
+      statusBar.styleDefault();
+      splashScreen.hide();
+    });
+  }
+}

ionic-beer/src/app/app.module.ts

@@ -0,0 +1,46 @@
+import { NgModule, ErrorHandler } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
+import { MyApp } from './app.component';
+
+import { AboutPage } from '../pages/about/about';
+import { ContactPage } from '../pages/contact/contact';
+import { HomePage } from '../pages/home/home';
+import { TabsPage } from '../pages/tabs/tabs';
+
+import { StatusBar } from '@ionic-native/status-bar';
+import { SplashScreen } from '@ionic-native/splash-screen';
+import { BeerModule } from '../pages/beer/beer.module';
+import { HttpModule } from '@angular/http';
+import { BeerModalPage } from '../pages/beer/beer-modal';
+
+@NgModule({
+  declarations: [
+    MyApp,
+    AboutPage,
+    ContactPage,
+    HomePage,
+    TabsPage
+  ],
+  imports: [
+    BrowserModule,
+    HttpModule,
+    IonicModule.forRoot(MyApp),
+    BeerModule
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    MyApp,
+    AboutPage,
+    ContactPage,
+    HomePage,
+    TabsPage,
+    BeerModalPage
+  ],
+  providers: [
+    StatusBar,
+    SplashScreen,
+    {provide: ErrorHandler, useClass: IonicErrorHandler}
+  ]
+})
+export class AppModule {}

client/src/app/app.scss → ionic-beer/src/app/app.scss

@@ -14,21 +14,3 @@
 // To declare rules for a specific mode, create a child rule
 // for the .md, .ios, or .wp mode classes. The mode class is
 // automatically applied to the <body> element in the app.
-
-.alert {
-  padding: 15px;
-  margin-bottom: 20px;
-  border: 1px solid transparent;
-}
-
-.alert-danger {
-  color: #a94442;
-  background-color: #f2dede;
-  border-color: #ebccd1;
-}
-
-.alert-success {
-  color: #3c763d;
-  background-color: #dff0d8;
-  border-color: #d6e9c6;
-}

client/src/index.html → ionic-beer/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
 <head>
   <meta charset="UTF-8">
-  <title>Ionic Beer</title>
+  <title>Ionic App</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">
@@ -14,13 +14,13 @@
   <!-- cordova.js required for cordova apps -->
   <script src="cordova.js"></script>
 
-  <!--<script>
+  <script>
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('service-worker.js')
         .then(() => console.log('service worker installed'))
         .catch(err => console.log('Error', err));
     }
-  </script>-->
+  </script>
 
   <link href="build/main.css" rel="stylesheet">
 

client/src/manifest.json → ionic-beer/src/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "Ionic Beer",
-  "short_name": "Ionic Beer",
+  "name": "Ionic Beers",
+  "short_name": "Ionic Beers",
   "start_url": "index.html",
   "display": "standalone",
   "icons": [{

ionic-beer/src/pages/about/about.html

@@ -0,0 +1,11 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>
+      About
+    </ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding>
+
+</ion-content>

client/src/pages/about/about.ts → ionic-beer/src/pages/about/about.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-
 import { NavController } from 'ionic-angular';
 
 @Component({

client/src/pages/beer/beer.html → ionic-beer/src/pages/beer/beer.html

@@ -13,7 +13,7 @@
 
 <ion-content padding>
   <ion-list>
-    <ion-item-sliding *ngFor="let beer of beers" >
+    <ion-item-sliding *ngFor="let beer of beers">
       <ion-item (click)="openModal({id: beer.id})">
         <ion-avatar item-left>
           <img src="{{beer.giphyUrl}}">

ionic-beer/src/pages/beer/beer.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+import { BeerPage } from './beer';
+import { BeerModalPage } from './beer-modal';
+import { BeerService } from '../../providers/beer-service';
+import { GiphyService } from '../../providers/giphy-service';
+
+@NgModule({
+  declarations: [
+    BeerPage,
+    BeerModalPage
+  ],
+  imports: [
+    IonicModule.forRoot(BeerPage)
+  ],
+  exports: [
+    BeerPage,
+    BeerModalPage
+  ],
+  providers: [
+    BeerService,
+    GiphyService
+  ]
+})
+export class BeerModule {}

client/src/pages/beer/beer.ts → ionic-beer/src/pages/beer/beer.ts

@@ -1,20 +1,21 @@
 import { Component } from '@angular/core';
-import { ModalController, ToastController } from 'ionic-angular';
+import { IonicPage, ModalController, NavController, NavParams, ToastController } from 'ionic-angular';
 import { BeerService } from '../../providers/beer-service';
 import { GiphyService } from '../../providers/giphy-service';
 import { BeerModalPage } from './beer-modal';
 
+@IonicPage()
 @Component({
   selector: 'page-beer',
-  templateUrl: 'beer.html',
-  providers: [BeerService, GiphyService]
+  templateUrl: 'beer.html'
 })
 export class BeerPage {
   private beers: Array<any>;
 
-  constructor(public beerService: BeerService, public giphyService: GiphyService,
-              public modalCtrl: ModalController, public toastCtrl: ToastController) {
-  }
+constructor(public navCtrl: NavController, public navParams: NavParams,
+          public beerService: BeerService, public giphyService: GiphyService,
+          public modalCtrl: ModalController, public toastCtrl: ToastController) {
+}
 
   ionViewDidLoad() {
     this.beerService.getGoodBeers().subscribe(beers => {

client/src/pages/contact/contact.html → ionic-beer/src/pages/contact/contact.html

@@ -11,11 +11,7 @@
     <ion-list-header>Follow us on Twitter</ion-list-header>
     <ion-item>
       <ion-icon name="ionic" item-left></ion-icon>
-      <a href="https://twitter.com/ionicframework">@ionicframework</a>
-    </ion-item>
-    <ion-item>
-      <ion-icon item-left><img src="assets/imgs/logo.png" width="24"></ion-icon>
-      <a href="https://twitter.com/gostormpath">@goStormpath</a>
+      @ionicframework
     </ion-item>
   </ion-list>
 </ion-content>

client/src/pages/contact/contact.ts → ionic-beer/src/pages/contact/contact.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-
 import { NavController } from 'ionic-angular';
 
 @Component({

client/src/pages/home/home.html → ionic-beer/src/pages/home/home.html

@@ -1,11 +1,6 @@
 <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>
 
@@ -19,7 +14,4 @@
     Take a look at the <code>src/pages/</code> directory to add or change tabs,
     update any existing page or create new pages.
   </p>
-  <p *ngIf="(user$ | async)">
-    You are logged in as: <b>{{ ( user$ | async ).fullName }}</b>
-  </p>
 </ion-content>

ionic-beer/src/pages/home/home.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { NavController } from 'ionic-angular';
+
+@Component({
+  selector: 'page-home',
+  templateUrl: 'home.html'
+})
+export class HomePage {
+
+  constructor(public navCtrl: NavController) {
+
+  }
+
+}

client/src/pages/tabs/tabs.ts → ionic-beer/src/pages/tabs/tabs.ts

@@ -1,22 +1,18 @@
 import { Component } from '@angular/core';
 
-import { HomePage } from '../home/home';
 import { AboutPage } from '../about/about';
 import { ContactPage } from '../contact/contact';
+import { HomePage } from '../home/home';
 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() {
-
-  }
+  constructor() {}
 }

client/src/providers/beer-service.ts → ionic-beer/src/providers/beer-service.ts

@@ -2,17 +2,13 @@ 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;
+  public API = 'http://localhost:8080';
+  public BEER_API = this.API + '/beers';
 
-  constructor(public http: Http, public config: StormpathConfiguration) {
-    this.API = config.endpointPrefix;
-    this.BEER_API = this.API + '/beers';
-  }
+  constructor(private http: Http) {}
 
   getGoodBeers(): Observable<any> {
     return this.http.get(this.API + '/good-beers')
@@ -24,11 +20,6 @@ export class BeerService {
       .map((response: Response) => response.json());
   }
 
-  remove(id: string) {
-    return this.http.delete(this.BEER_API + '/' + id)
-      .map((response: Response) => response.json());
-  }
-
   save(beer: any): Observable<any> {
     let result: Observable<Response>;
     if (beer['href']) {
@@ -39,4 +30,9 @@ export class BeerService {
     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());
+  }
 }

client/src/providers/giphy-service.ts → ionic-beer/src/providers/giphy-service.ts

@@ -6,6 +6,7 @@ import { Observable } from 'rxjs';
 // http://tutorials.pluralsight.com/front-end-javascript/getting-started-with-angular-2-by-building-a-giphy-search-application
 export class GiphyService {
 
+  // Public beta key: https://github.com/Giphy/GiphyAPI#public-beta-key
   giphyApi = 'https://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=';
 
   constructor(public http: Http) {

client/src/theme/variables.scss → ionic-beer/src/theme/variables.scss

@@ -24,7 +24,7 @@ $font-path: "../assets/fonts";
 // The "primary" color is the only required color in the map.
 
 $colors: (
-  primary:    #387ef5,
+  primary:    #488aff,
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,

server/.mvn/wrapper/maven-wrapper.properties

@@ -1 +1 @@
-distributionUrl=https://repo1.maven.org/maven2/org/apache/maven/apache-maven/3.3.9/apache-maven-3.3.9-bin.zip
+distributionUrl=https://repo1.maven.org/maven2/org/apache/maven/apache-maven/3.3.9/apache-maven-3.3.9-bin.zip

server/mvnw

@@ -184,6 +184,16 @@ fi
 
 CLASSWORLDS_LAUNCHER=org.codehaus.plexus.classworlds.launcher.Launcher
 
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin; then
+  [ -n "$M2_HOME" ] &&
+    M2_HOME=`cygpath --path --windows "$M2_HOME"`
+  [ -n "$JAVA_HOME" ] &&
+    JAVA_HOME=`cygpath --path --windows "$JAVA_HOME"`
+  [ -n "$CLASSPATH" ] &&
+    CLASSPATH=`cygpath --path --windows "$CLASSPATH"`
+fi
+
 # traverses directory structure from process work directory to filesystem root
 # first directory with .mvn subdirectory is considered project base directory
 find_maven_basedir() {
@@ -209,18 +219,6 @@ concat_lines() {
 export MAVEN_PROJECTBASEDIR=${MAVEN_BASEDIR:-$(find_maven_basedir)}
 MAVEN_OPTS="$(concat_lines "$MAVEN_PROJECTBASEDIR/.mvn/jvm.config") $MAVEN_OPTS"
 
-# For Cygwin, switch paths to Windows format before running java
-if $cygwin; then
-  [ -n "$M2_HOME" ] &&
-    M2_HOME=`cygpath --path --windows "$M2_HOME"`
-  [ -n "$JAVA_HOME" ] &&
-    JAVA_HOME=`cygpath --path --windows "$JAVA_HOME"`
-  [ -n "$CLASSPATH" ] &&
-    CLASSPATH=`cygpath --path --windows "$CLASSPATH"`
-  [ -n "$MAVEN_PROJECTBASEDIR" ] &&
-    MAVEN_PROJECTBASEDIR=`cygpath --path --windows "$MAVEN_PROJECTBASEDIR"`
-fi
-
 # Provide a "standardized" way to retrieve the CLI args that will
 # work with both Windows and non-Windows executions.
 MAVEN_CMD_LINE_ARGS="$MAVEN_CONFIG $@"
@@ -228,9 +226,8 @@ export MAVEN_CMD_LINE_ARGS
 
 WRAPPER_LAUNCHER=org.apache.maven.wrapper.MavenWrapperMain
 
-# avoid using MAVEN_CMD_LINE_ARGS below since that would loose parameter escaping in $@
 exec "$JAVACMD" \
   $MAVEN_OPTS \
   -classpath "$MAVEN_PROJECTBASEDIR/.mvn/wrapper/maven-wrapper.jar" \
   "-Dmaven.home=${M2_HOME}" "-Dmaven.multiModuleProjectDirectory=${MAVEN_PROJECTBASEDIR}" \
-  ${WRAPPER_LAUNCHER} $MAVEN_CONFIG "$@"
+  ${WRAPPER_LAUNCHER} "$@"