Browse Source

Update demo instructions

Matt Raible 7 years ago
parent
commit
16625b9e44
1 changed files with 21 additions and 39 deletions
  1. 21
    39
      DEMO.md

+ 21
- 39
DEMO.md View File

@@ -1,10 +1,6 @@
1
-Spring Boot, Ionic, and Stormpath
2
-
3
-This demo script shows pre-recorded IntelliJ Live Template shortcuts to build an Ionic and Spring Boot app. **Prerequisites**: Java 8, Node.js.
4
-
5 1
 ## Spring Boot API
6 2
 
7
-Create your Spring Boot API project using [start.spring.io](https://start.spring.io).
3
+Create your Spring Boot API project using [start.spring.io](https://start.spring.io) or the command line.
8 4
 
9 5
 ```
10 6
 http https://start.spring.io/starter.zip \
@@ -18,6 +14,8 @@ dependencies==data-jpa,data-rest,h2,web,devtools -d
18 14
 5. Create a `BeerController` for your REST API. Add some business logic that results in a `/good-beers` endpoint. → **boot-controller**
19 15
 6. Add a `/good-beers` mapping that filters out beers that aren't great. → **boot-good**
20 16
 
17
+Git Commit
18
+
21 19
 ## Create Ionic App
22 20
 
23 21
 Install Ionic and Cordova: 
@@ -33,27 +31,14 @@ ionic start ionic-beer --v2
33 31
 cd ionic-beer
34 32
 ionic serve
35 33
 ```
36
-<!--
37
-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**
38
-
39
-```xml
40
-<preference name="KeyboardDisplayRequiresUserAction" value="false"/>
41
-```
42
--->
43 34
 
44
-Check your changes into Git.
45
-
46
-```
47
-git add .
48
-git commit -m "Create client"
49
-```
35
+Git Commit
50 36
 
51 37
 ## Build a Good Beers UI
52 38
 
53
-1. Run `ionic generate page beer` to create a component and a template to display the list of good beers. 
54
-2. Add `BeerPage` to the `declarations` and `entryComponent` lists in `app.module.ts`.
55
-3. Run `ionic generate provider beer-service` to create a service to fetch the beer list from the Spring Boot API.
56
-4. Change `src/providers/beer-service.ts` to use have a `getGoodBeers()` method. → **io-beer-service**
39
+1. Run `ionic generate page beer`. 
40
+2. Add `BeerPagePage` to the `imports` list in `app.module.ts`.
41
+3. Create `src/providers/beer-service.ts`. → **io-beer-service**
57 42
 5. Modify `beer.html` to show the list of beers. → **io-beer-list**
58 43
 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**
59 44
 7. To expose this page on the tab bar, add it to `tabs.ts`. Update `tabs.html` too!
@@ -66,7 +51,7 @@ If you run `ionic serve`, you’ll likely see a CORS error in your browser’s c
66 51
 
67 52
 Restart Spring Boot and your Ionic app. 
68 53
 
69
-Add some fun with Giphy! Run `ionic generate provider giphy-service`. → **ng-giphy-service**
54
+Add some fun with Giphy! Create `giphy-service.ts`. → **ng-giphy-service**
70 55
 
71 56
 Update `beer.ts` to take advantage of `GiphyService`. → **ng-giphy-foreach**
72 57
 
@@ -90,10 +75,16 @@ This won't compile because `BeerModalPage` doesn't exist. Create `beer-modal.ts`
90 75
 
91 76
 Create `beer-modal.html` as a template for this page. → **io-beer-modal-html**
92 77
 
93
-Add `BeerModalPage` to the `declarations` and `entryComponent` lists in `app.module.ts`.
78
+Add `BeerModalPage` to the `declarations` and `entryComponent` lists in `beer.module.ts`.
94 79
 
95 80
 You'll also need to modify `beer-service.ts` to have `get()` and `save()` methods. → **io-get-save**
96 81
 
82
+Demo how editing fails, then add `CrossOrigin` annotation to `BeerRepository`.
83
+
84
+```java
85
+@CrossOrigin(origins = {"http://localhost:8100","file://"})
86
+```
87
+
97 88
 ### Add Swipe to Delete
98 89
 
99 90
 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**
@@ -108,7 +99,7 @@ After making these additions, you should be able to add, edit and delete beers.
108 99
 
109 100
 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`.
110 101
 
111
-After making this change, the score should improve. In my tests, it increased to 69/100.  
102
+After making this change, the score should improve. In my tests, it increased to 75/100.  
112 103
 
113 104
 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. 
114 105
 
@@ -128,33 +119,24 @@ To see how your application will look on different devices you can run `ionic se
128 119
 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.
129 120
 
130 121
 ```
131
-ionic platform add ios
122
+ionic cordova emulate ios
132 123
 ```
133 124
 
134
-You’ll need to run `ionic emulate ios` to open your app in Simulator.
135
-
136 125
 The biggest problem I found when running the app in Simulator was that it was difficult to get the keyboard to popup. To workaround this, I used Edit > Hardware > Keyboard > Toggle Software Keyboard when I needed to type text in a field.
137 126
 
138 127
 To deploy the app to an iPhone, start by plugging your iOS device into your computer. Then run the following commands to install ios-deploy/ios-sim, build the app, and run it on your device.
139 128
 
140 129
 ```
141 130
 npm install -g ios-deploy ios-sim
142
-ionic build ios
143
-cd platforms/ios/
144
-open ionic-beer.xcodeproj
131
+ionic build ios --prod
132
+open platforms/ios/MyApp.xcodeproj
145 133
 ```
146 134
 
147 135
 Select your phone as the target in Xcode and click the play button to run your app. 
148 136
 
149 137
 ### Android
150 138
 
151
-To deploy to the Android emulator, add support for it to the ionic-beer project using the `ionic` command.
152
-
153
-```
154
-ionic platform add android
155
-```
156
-
157
-If you run `ionic emulate android` you’ll get instructions from about how to create an emulator image.
139
+To deploy to the Android emulator, run `ionic cordova emulate android`.
158 140
 
159 141
 ```
160 142
 Error: No emulator images (avds) found.
@@ -173,4 +155,4 @@ CPU/ABI: Google APIs Intel Axom (x86_64)
173 155
 Skin: Skin with dynamic hardware controls
174 156
 ```
175 157
 
176
-After performing these steps, you should be able to run `ionic emulate android` and see your app running in the AVD.
158
+After performing these steps, you should be able to run `ionic cordova emulate android` and see your app running in the AVD.