Quellcode durchsuchen

Add demo instructions

Matt Raible vor 7 Jahren
Ursprung
Commit
f00500ca89
1 geänderte Dateien mit 176 neuen und 0 gelöschten Zeilen
  1. 176
    0
      DEMO.md

+ 176
- 0
DEMO.md Datei anzeigen

@@ -0,0 +1,176 @@
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
6
+
7
+Create your Spring Boot API project using [start.spring.io](https://start.spring.io).
8
+
9
+```
10
+http https://start.spring.io/starter.zip \
11
+dependencies==data-jpa,data-rest,h2,web,devtools -d
12
+```
13
+
14
+1. Run the application with `./mvnw spring-boot:run`. Create a `Beer` entity class in `src/main/java/com/example/beer`. → **boot-entity**
15
+2. Create a JPA Repository to manage the `Beer` entity (tip: `@RepositoryRestResource`). → **boot-repository**
16
+3. Create a CommandLineRunner to populate the database. → **boot-command**
17
+4. Add default data in the `run()` method. → **boot-add**
18
+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**
20
+
21
+## Create Ionic App
22
+
23
+Install Ionic and Cordova: 
24
+
25
+```
26
+yarn global add cordova ionic
27
+```
28
+
29
+From a terminal window, create a new application using the following command:
30
+
31
+```
32
+ionic start ionic-beer --v2
33
+cd ionic-beer
34
+ionic serve
35
+```
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
+
44
+Check your changes into Git.
45
+
46
+```
47
+git add .
48
+git commit -m "Create client"
49
+```
50
+
51
+## Build a Good Beers UI
52
+
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**
57
+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**
59
+7. To expose this page on the tab bar, add it to `tabs.ts`. Update `tabs.html` too!
60
+
61
+If you run `ionic serve`, you’ll likely see a CORS error in your browser’s console. To fix this, open your `BeerController` and add the following line to the good beers endpoint.
62
+
63
+```
64
+@CrossOrigin(origins = {"http://localhost:8100","file://"})
65
+```
66
+
67
+Restart Spring Boot and your Ionic app. 
68
+
69
+Add some fun with Giphy! Run `ionic generate provider giphy-service`. → **ng-giphy-service**
70
+
71
+Update `beer.ts` to take advantage of `GiphyService`. → **ng-giphy-foreach**
72
+
73
+Update `beer.html` to display the image retrieved. → **io-avatar**
74
+
75
+If everything works as expected, you should see a page with a list of beers and images.
76
+
77
+### Add a Modal for Editing
78
+
79
+Change the header in `beer.html` to have a button that opens a modal to add a new beer. → **io-open-modal**
80
+
81
+In this same file, change `<ion-item>` to have a click handler for opening the modal for the current item.
82
+
83
+```html
84
+<ion-item (click)="openModal({id: beer.id})">
85
+```
86
+
87
+Add `ModalController` as a dependency in `BeerPage` and add an `openModal()` method. → **io-open-modal-ts**
88
+
89
+This won't compile because `BeerModalPage` doesn't exist. Create `beer-modal.ts` in the same directory. → **io-beer-modal**
90
+
91
+Create `beer-modal.html` as a template for this page. → **io-beer-modal-html**
92
+
93
+Add `BeerModalPage` to the `declarations` and `entryComponent` lists in `app.module.ts`.
94
+
95
+You'll also need to modify `beer-service.ts` to have `get()` and `save()` methods. → **io-get-save**
96
+
97
+### Add Swipe to Delete
98
+
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**
100
+
101
+Add a `remove()` method to `beer.ts`. → **io-remove**
102
+
103
+Add `toastCtrl: ToastController` as a dependency in the constructor so everything compiles.
104
+
105
+After making these additions, you should be able to add, edit and delete beers.
106
+
107
+## PWAs with Ionic
108
+
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`.
110
+
111
+After making this change, the score should improve. In my tests, it increased to 69/100.  
112
+
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. 
114
+
115
+```
116
+chrome://flags/#bypass-app-banner-engagement-checks
117
+chrome://flags/#enable-add-to-shelf
118
+```
119
+
120
+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.
121
+
122
+## Deploy to a Mobile Device
123
+
124
+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. 
125
+
126
+### iOS
127
+
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.
129
+
130
+```
131
+ionic platform add ios
132
+```
133
+
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.
137
+
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.
139
+
140
+```
141
+npm install -g ios-deploy ios-sim
142
+ionic build ios
143
+cd platforms/ios/
144
+open ionic-beer.xcodeproj
145
+```
146
+
147
+Select your phone as the target in Xcode and click the play button to run your app. 
148
+
149
+### Android
150
+
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.
158
+
159
+```
160
+Error: No emulator images (avds) found.
161
+1. Download desired System Image by running: /Users/mraible/Library/Android/sdk/tools/android sdk
162
+2. Create an AVD by running: /Users/mraible/Library/Android/sdk/tools/android avd
163
+HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver
164
+```
165
+
166
+Run the first suggestion and download your desired system image. Then  run the second command and created an AVD with the following settings:
167
+
168
+```
169
+AVD Name: TestPhone
170
+Device: Nexus 5
171
+Target: Android 7.1.1
172
+CPU/ABI: Google APIs Intel Axom (x86_64)
173
+Skin: Skin with dynamic hardware controls
174
+```
175
+
176
+After performing these steps, you should be able to run `ionic emulate android` and see your app running in the AVD.