|
|
|
|
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.
|