Przeglądaj źródła

Finished deploying to phones

Matt Raible 7 lat temu
rodzic
commit
7b65f82029

+ 32
- 25
TUTORIAL.md Wyświetl plik

100
 npm install -g ionic cordova
100
 npm install -g ionic cordova
101
 ```
101
 ```
102
 
102
 
103
-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. Its 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`.
103
+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`.
104
 
104
 
105
 After installation completes, create a new application using the following command:
105
 After installation completes, create a new application using the following command:
106
 
106
 
108
 ionic start ionic-beer --v2
108
 ionic start ionic-beer --v2
109
 ```
109
 ```
110
 
110
 
111
-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 applications directory and run it.
111
+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.
112
 
112
 
113
 ```bash
113
 ```bash
114
 cd ionic-beer
114
 cd ionic-beer
413
   ],
413
   ],
414
 ```
414
 ```
415
 
415
 
416
-After making this change, you’ll likely see the following error in your browser’s console.
416
+After making this change, you'll likely see the following error in your browser's console.
417
 
417
 
418
 ```
418
 ```
419
 XMLHttpRequest cannot load http://localhost:8080/good-beers. No 'Access-Control-Allow-Origin' 
419
 XMLHttpRequest cannot load http://localhost:8080/good-beers. No 'Access-Control-Allow-Origin' 
704
 
704
 
705
 ## PWAs with Ionic
705
 ## PWAs with Ionic
706
 
706
 
707
-Ionic ships with support for creating progressive web apps (PWAs). If youd 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.
707
+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.
708
 
708
 
709
-If you run the [Lighthouse Chrome extension](https://developers.google.com/web/tools/lighthouse/) on this application, youll get a mediocre score (51/100).
709
+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).
710
 
710
 
711
 ![Lighthouse: 51](static/lighthouse-51.png)
711
 ![Lighthouse: 51](static/lighthouse-51.png)
712
 
712
 
713
-To register a service worker, and improve the apps score, uncomment the following block in `src/index.html`.
713
+To register a service worker, and improve the app's score, uncomment the following block in `src/index.html`.
714
 
714
 
715
 ```html
715
 ```html
716
 <!-- un-comment this code to enable service worker
716
 <!-- un-comment this code to enable service worker
725
 
725
 
726
 After making this change, the score should improve. In my tests, it increased to 66/100. The remaining issues were:
726
 After making this change, the score should improve. In my tests, it increased to 66/100. The remaining issues were:
727
 
727
 
728
-* A couple -1s in performance for "Cannot read property 'ts' of undefined".
729
-* Site is not progressively enhanced (page should contain some content when JavaScript is not available). This could likely be solved with [Angulars app-shell directives](https://www.npmjs.com/package/@angular/app-shell).
728
+* A couple -1's in performance for "Cannot read property 'ts' of undefined".
729
+* 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).
730
 * Site is not on HTTPS and does not redirect HTTP to HTTPS.
730
 * Site is not on HTTPS and does not redirect HTTP to HTTPS.
731
 
731
 
732
-If you refresh the app and Chrome doesnt 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.
732
+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.
733
 
733
 
734
 ```
734
 ```
735
 chrome://flags/#bypass-app-banner-engagement-checks
735
 chrome://flags/#bypass-app-banner-engagement-checks
736
 chrome://flags/#enable-add-to-shelf
736
 chrome://flags/#enable-add-to-shelf
737
 ```
737
 ```
738
 
738
 
739
-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.
739
+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.
740
 
740
 
741
 ## Deploy to a Mobile Device
741
 ## Deploy to a Mobile Device
742
 
742
 
743
-It’s pretty cool that you’re able to develop mobile apps with Ionic in your browser. However, it’s nice to see the fruits of your labor and see how awesome your app looks on a phone. It really does look and behave like a native app!
743
+It's pretty cool that you're able to develop mobile apps with Ionic in your browser. However, it's nice to see the fruits of your labor and see how awesome your app looks on a phone. It really does look and behave like a native app!
744
 
744
 
745
 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.
745
 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.
746
 
746
 
748
 
748
 
749
 ### iOS
749
 ### iOS
750
 
750
 
751
-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.
751
+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.
752
 
752
 
753
 Make sure to open Xcode to complete the installation.
753
 Make sure to open Xcode to complete the installation.
754
 
754
 
758
 ionic platform add ios
758
 ionic platform add ios
759
 ```
759
 ```
760
 
760
 
761
-Then run `ionic emulate ios` to open your app in Simulator.
761
+Then run `ionic emulate ios` to open your app in Simulator. 
762
 
762
 
763
-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.
763
+**TIP:** 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 **Hardware** > **Keyboard** > **Toggle Software Keyboard** when I needed to type text in a field.
764
 
764
 
765
-Deploying to your phone will likely fail because it won't be able to connect to `http://localhost:8080`. To fix this, you can deploy your Spring Boot app to the internet, or use your computer's IP address (if you're on the same network). 
765
+Deploying to your phone will likely fail because it won't be able to connect to `http://localhost:8080`. To fix this, you can deploy your Spring Boot app to a public server, or use your computer's IP address in `beer.service.ts` (if you're on the same network). 
766
 
766
 
767
 <div style="padding: 5px; background: #eee; border: 1px solid silver; margin-bottom: 10px">
767
 <div style="padding: 5px; background: #eee; border: 1px solid silver; margin-bottom: 10px">
768
 <p>To deploy to Cloud Foundry, copy <a href="https://github.com/oktadeveloper/spring-boot-ionic-example/blob/master/deploy.sh">this deploy script</a> to your hard drive. It expects to be in a directory above your apps (e.g. <code>spring-boot-ionic-example</code>). It also expects your apps to be named <code>ionic-beer</code> and <code>server</code>.
768
 <p>To deploy to Cloud Foundry, copy <a href="https://github.com/oktadeveloper/spring-boot-ionic-example/blob/master/deploy.sh">this deploy script</a> to your hard drive. It expects to be in a directory above your apps (e.g. <code>spring-boot-ionic-example</code>). It also expects your apps to be named <code>ionic-beer</code> and <code>server</code>.
779
 
779
 
780
 ```
780
 ```
781
 npm install -g ios-deploy ios-sim
781
 npm install -g ios-deploy ios-sim
782
-ionic build ios
782
+ionic build ios --prod
783
 cd platforms/ios/
783
 cd platforms/ios/
784
 open ionic-beer.xcodeproj
784
 open ionic-beer.xcodeproj
785
 ```
785
 ```
788
 
788
 
789
 **NOTE:** If you run into code signing issues, see [Ionic's deployment documentation](http://ionicframework.com/docs/intro/deploying/#ios-devices) to see how to solve.
789
 **NOTE:** If you run into code signing issues, see [Ionic's deployment documentation](http://ionicframework.com/docs/intro/deploying/#ios-devices) to see how to solve.
790
 
790
 
791
-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.
791
+Once you've 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.
792
 
792
 
793
-![iPhone Beer List](static/iphone-beer-list.png)
793
+<img src="static/iphone-beer-list.jpg" style="width: 621px" alt="iPhone Beer List">
794
 
794
 
795
 ### Android
795
 ### Android
796
 
796
 
797
-To emulate or deploy to an Android device, youll first need to install [Android Studio](https://developer.android.com/studio/index.html). As part of the install, it will show you where it installed the Android SDK. Set this path as an ANDROID_HOME environment variable. On a Mac, it should be `~/Library/Android/sdk/`.
797
+To emulate or deploy to an Android device, you'll first need to install [Android Studio](https://developer.android.com/studio/index.html). As part of the install, it will show you where it installed the Android SDK. Set this path as an ANDROID_HOME environment variable. On a Mac, it should be `~/Library/Android/sdk/`.
798
 
798
 
799
-Make sure to open Android Studio to complete the installation.
799
+If you've just installed Android Studio, make sure to open it to complete the installation.
800
 
800
 
801
 To deploy to the Android emulator, add support for it to the ionic-beer project using the `ionic` command.
801
 To deploy to the Android emulator, add support for it to the ionic-beer project using the `ionic` command.
802
 
802
 
804
 ionic platform add android
804
 ionic platform add android
805
 ```
805
 ```
806
 
806
 
807
-If you run `ionic emulate android` youll get instructions from about how to create an emulator image.
807
+If you run `ionic emulate android` you'll get instructions from about how to create an emulator image.
808
 
808
 
809
 ```
809
 ```
810
 Error: No emulator images (avds) found.
810
 Error: No emulator images (avds) found.
813
 HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver
813
 HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver
814
 ```
814
 ```
815
 
815
 
816
-Run the first suggestion and download your desired system image. Then  run the second command and created an AVD with the following settings:
816
+Run the first suggestion and download your desired system image. Then  run the second command and created an AVD (Android Virtual Device) with the following settings:
817
 
817
 
818
 ```
818
 ```
819
 AVD Name: TestPhone
819
 AVD Name: TestPhone
825
 
825
 
826
 After performing these steps, you should be able to run `ionic emulate android` and see your app running in the AVD.
826
 After performing these steps, you should be able to run `ionic emulate android` and see your app running in the AVD.
827
 
827
 
828
-![Android Beer List](static/android-beer-list.png)
828
+<img src="static/android-beer-list.jpg" style="width: 540px" alt="Android Beer List">
829
+
830
+**NOTE**: If you get an application error that says "The connection to the server was unsuccessful. (file:///android/www/index.html)", add the following line to `config.xml`. This sets the default timeout to 60 seconds (default is 20). Thanks to [Stack Overflow](http://stackoverflow.com/a/31377846) for the answer.
831
+
832
+```xml
833
+<preference name="loadUrlTimeoutValue" value="60000"/>
834
+```
829
 
835
 
830
 ## Learn More
836
 ## Learn More
831
 
837
 
832
-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.
838
+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.
833
 
839
 
834
 You can find a completed version of the application created in this blog post [on GitHub](https://github.com/oktadeveloper/spring-boot-ionic-example).
840
 You can find a completed version of the application created in this blog post [on GitHub](https://github.com/oktadeveloper/spring-boot-ionic-example).
835
 
841
 
836
-If you encountered issues, please [create an issue in GitHub](TODO) or hit me up on Twitter [@mraible](https://twitter.com/mraible).
842
+If you encountered issues, please [create an issue in GitHub](https://github.com/oktadeveloper/spring-boot-ionic-example/issues/new) or hit me up on Twitter [@mraible](https://twitter.com/mraible).
837
 
843
 
838
 To learn more about Ionic or Angular, please see the following resources:
844
 To learn more about Ionic or Angular, please see the following resources:
839
 
845
 
840
 * [Get started with Ionic Framework](http://ionicframework.com/getting-started/)
846
 * [Get started with Ionic Framework](http://ionicframework.com/getting-started/)
847
+* [Angular + Spring Boot](developer blog URL tbd)
841
 * [Angular Authentication with OpenID Connect and Okta in 20 Minutes](http://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc)
848
 * [Angular Authentication with OpenID Connect and Okta in 20 Minutes](http://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc)
842
 * [Getting Started with Angular](https://www.youtube.com/watch?v=Jq3szz2KOOs) A YouTube webinar by yours truly. ;)
849
 * [Getting Started with Angular](https://www.youtube.com/watch?v=Jq3szz2KOOs) A YouTube webinar by yours truly. ;)

+ 8
- 2
deploy.sh Wyświetl plik

39
 # Deploy the server
39
 # Deploy the server
40
 cd $r/server
40
 cd $r/server
41
 mvn clean package
41
 mvn clean package
42
-cf push -p target/*jar ionic-server --no-start  --random-route
42
+cf push -p target/*jar ionic-server --no-start --random-route
43
 cf set-env ionic-server FORCE_HTTPS true
43
 cf set-env ionic-server FORCE_HTTPS true
44
 cf start ionic-server
44
 cf start ionic-server
45
 
45
 
53
 sed -i -e "s|http://localhost:8080|$serverUri|g" src/providers/beer-service.ts
53
 sed -i -e "s|http://localhost:8080|$serverUri|g" src/providers/beer-service.ts
54
 npm install
54
 npm install
55
 
55
 
56
-# deploy client to phone
56
+# build ios
57
+ionic build ios --prod
58
+# Run on ios
57
 ionic run ios --device
59
 ionic run ios --device
58
 
60
 
61
+# If the above command fails with the following error:
62
+# xcrun: error: unable to find utility "PackageApplication", not a developer tool or in PATH
63
+# See http://stackoverflow.com/a/43363820
64
+
59
 # cleanup changed files
65
 # cleanup changed files
60
 git checkout $r/ionic-beer
66
 git checkout $r/ionic-beer
61
 rm $r/ionic-beer/src/providers/beer-service.ts-e
67
 rm $r/ionic-beer/src/providers/beer-service.ts-e

+ 3
- 1
ionic-beer/config.xml Wyświetl plik

27
   <preference name="SplashMaintainAspectRatio" value="true"/>
27
   <preference name="SplashMaintainAspectRatio" value="true"/>
28
   <preference name="FadeSplashScreenDuration" value="300"/>
28
   <preference name="FadeSplashScreenDuration" value="300"/>
29
   <preference name="SplashShowOnlyFirstTime" value="false"/>
29
   <preference name="SplashShowOnlyFirstTime" value="false"/>
30
+  <preference name="loadUrlTimeoutValue" value="60000"/>
30
   <feature name="StatusBar">
31
   <feature name="StatusBar">
31
     <param name="ios-package" onload="true" value="CDVStatusBar"/>
32
     <param name="ios-package" onload="true" value="CDVStatusBar"/>
32
   </feature>
33
   </feature>
36
   <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
37
   <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
37
   <plugin name="cordova-plugin-device" spec="1.1.4"/>
38
   <plugin name="cordova-plugin-device" spec="1.1.4"/>
38
   <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
39
   <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
39
-</widget>
40
+
41
+</widget>

+ 1
- 1
ionic-beer/src/pages/beer/beer-modal.ts Wyświetl plik

32
   }
32
   }
33
 
33
 
34
   save(form: NgForm) {
34
   save(form: NgForm) {
35
-    let update: boolean = form['href'];
35
+    let update: boolean = form['id'];
36
     this.beerService.save(form).subscribe(result => {
36
     this.beerService.save(form).subscribe(result => {
37
       let toast = this.toastCtrl.create({
37
       let toast = this.toastCtrl.create({
38
         message: 'Beer "' + form.name + '" ' + ((update) ? 'updated' : 'added') + '.',
38
         message: 'Beer "' + form.name + '" ' + ((update) ? 'updated' : 'added') + '.',

+ 1
- 1
ionic-beer/src/providers/beer-service.ts Wyświetl plik

5
 
5
 
6
 @Injectable()
6
 @Injectable()
7
 export class BeerService {
7
 export class BeerService {
8
-  public API = 'http://localhost:8080';
8
+  public API = 'https://ionic-server-acrodont-protyle.cfapps.io';
9
   public BEER_API = this.API + '/beers';
9
   public BEER_API = this.API + '/beers';
10
 
10
 
11
   constructor(private http: Http) {}
11
   constructor(private http: Http) {}

BIN
static/android-beer-list.png Wyświetl plik


BIN
static/ionic-home.png Wyświetl plik


BIN
static/iphone-beer-list.jpg Wyświetl plik