Ver código fonte

Update demo instructions

Matt Raible 7 anos atrás
pai
commit
16625b9e44
1 arquivos alterados com 21 adições e 39 exclusões
  1. 21
    39
      DEMO.md

+ 21
- 39
DEMO.md Ver arquivo

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
 ## Spring Boot API
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
 http https://start.spring.io/starter.zip \
6
 http https://start.spring.io/starter.zip \
18
 5. Create a `BeerController` for your REST API. Add some business logic that results in a `/good-beers` endpoint. → **boot-controller**
14
 5. Create a `BeerController` for your REST API. Add some business logic that results in a `/good-beers` endpoint. → **boot-controller**
19
 6. Add a `/good-beers` mapping that filters out beers that aren't great. → **boot-good**
15
 6. Add a `/good-beers` mapping that filters out beers that aren't great. → **boot-good**
20
 
16
 
17
+Git Commit
18
+
21
 ## Create Ionic App
19
 ## Create Ionic App
22
 
20
 
23
 Install Ionic and Cordova: 
21
 Install Ionic and Cordova: 
33
 cd ionic-beer
31
 cd ionic-beer
34
 ionic serve
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
 ## Build a Good Beers UI
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
 5. Modify `beer.html` to show the list of beers. → **io-beer-list**
42
 5. Modify `beer.html` to show the list of beers. → **io-beer-list**
58
 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**
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
 7. To expose this page on the tab bar, add it to `tabs.ts`. Update `tabs.html` too!
44
 7. To expose this page on the tab bar, add it to `tabs.ts`. Update `tabs.html` too!
66
 
51
 
67
 Restart Spring Boot and your Ionic app. 
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
 Update `beer.ts` to take advantage of `GiphyService`. → **ng-giphy-foreach**
56
 Update `beer.ts` to take advantage of `GiphyService`. → **ng-giphy-foreach**
72
 
57
 
90
 
75
 
91
 Create `beer-modal.html` as a template for this page. → **io-beer-modal-html**
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
 You'll also need to modify `beer-service.ts` to have `get()` and `save()` methods. → **io-get-save**
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
 ### Add Swipe to Delete
88
 ### Add Swipe to Delete
98
 
89
 
99
 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**
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
 
99
 
109
 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`.
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
 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. 
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
 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.
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
 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.
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
 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.
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
 npm install -g ios-deploy ios-sim
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
 Select your phone as the target in Xcode and click the play button to run your app. 
135
 Select your phone as the target in Xcode and click the play button to run your app. 
148
 
136
 
149
 ### Android
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
 Error: No emulator images (avds) found.
142
 Error: No emulator images (avds) found.
173
 Skin: Skin with dynamic hardware controls
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.