Displaying apps in Ionic View

Hi

I am trying to view an app on a iPad using ionic view

I tried the following steps. I am missing something?

  1. Created an app in ionic.io
  2. Created a blank app using ionic 3
  3. Built for iOS
  4. Linked app
  5. Uploaded app.

On the iPad I have logged into Ionic view but there are no apps there. I have also added a developer cert and provisioning cert for iOS in the app settings and have added a security profile.

Are there any docs for ionic3 available?

Has anyone managed to get an ionic 3 app in Ionic view.

Thanks for your help
-Ben

That is not relevant for testing with Ionic View.[quote=“Bendeverell, post:1, topic:99487”]
Are there any docs for ionic3 available?
[/quote]

https://ionicframework.com/docs/ - but this doesn’t seem relevant here.[quote=“Bendeverell, post:1, topic:99487”]
Has anyone managed to get an ionic 3 app in Ionic view.
[/quote]

Yes, of course.

The docs for Ionic View are here: https://docs.ionic.io/tools/view/

Is your app visible on apps.ionic.io?
Are you logged into the same account in Ionic View as on apps.ionic.io?
Is the upload visible for your app on apps.ionic.io in the “Deploy” tab with “No Note: upload”?
Can you test with Ionic View other devices?

Hi ,
in ionic.config.json add your app_id :

{
  "name": "NAME",
  "app_id": "",
  "type": "ionic-angular"
}

Hi

I did not inject Deploy into the app. The app doesn’t appear in the deploy tab.
Thanks for your quick reply

That tab only has several functionalities - one of them is “containing” the app snapshots that are visible in Ionic View.

It seems your ionic upload wasn’t successful. Can you run it again and post the output here please?
Also run ionic info and post the output.

Hi Sujan

I have compiled this and got it to run in xcode. This is the upload and info output from the my mac. Its a test application from a Ionic2/3 course . Thanks for your help

Tue Jul 25 20:22: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic upload
Running app-scripts build:

[20:22:34] build dev started …
[20:22:34] clean started …
[20:22:34] clean finished in 30 ms
[20:22:34] copy started …
[20:22:34] transpile started …
[20:22:41] transpile finished in 6.91 s
[20:22:41] webpack started …
[20:22:42] copy finished in 7.59 s
[20:22:50] webpack finished in 8.31 s
[20:22:50] sass started …
[20:22:53] sass finished in 3.42 s
[20:22:53] build dev finished in 18.75 s
⠙ Requesting snapshot upload
_stream_readable.js:545
switch (state.pipesCount) {
^

TypeError: Cannot read property ‘pipesCount’ of undefined
at module.exports.Readable.pipe (_stream_readable.js:545:16)
at module.exports.ZipArchiveOutputStream._smartStream (/usr/local/lib/node_modules/ionic/node_modules/compress-commons/lib/archivers/zip/zip-archive-output-stream.js:184:11)
at module.exports.ZipArchiveOutputStream._appendStream (/usr/local/lib/node_modules/ionic/node_modules/compress-commons/lib/archivers/zip/zip-archive-output-stream.js:96:20)
at module.exports.ArchiveOutputStream.entry (/usr/local/lib/node_modules/ionic/node_modules/compress-commons/lib/archivers/archive-output-stream.js:88:10)
at module.exports.ZipStream.entry (/usr/local/lib/node_modules/ionic/node_modules/zip-stream/index.js:157:49)
at Zip.append (/usr/local/lib/node_modules/ionic/node_modules/archiver/lib/plugins/zip.js:53:15)
at Archiver._moduleAppend (/usr/local/lib/node_modules/ionic/node_modules/archiver/lib/core.js:172:16)
at Archiver._onQueueTask (/usr/local/lib/node_modules/ionic/node_modules/archiver/lib/core.js:370:8)
at /usr/local/lib/node_modules/ionic/node_modules/async/dist/async.js:4069:9
at Object.process (/usr/local/lib/node_modules/ionic/node_modules/async/dist/async.js:2317:17)
Tue Jul 25 20:22: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >>
Tue Jul 25 20:23: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic info

global packages:

@ionic/cli-utils : 1.5.0
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 1.0.0
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework                 : ionic-angular 2.0.0-rc.5

System:

Node       : v8.0.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : not installed
npm        : 5.3.0 

Tue Jul 25 20:23: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >>

I found this:

So either use Node 6.x or 8.1.2+ for this to work.

Thanks Sujan

As advised I updated node and the process seems to have run correctly.

Tue Jul 25 22:06: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic info

global packages:

@ionic/cli-utils : 1.5.0
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 1.0.0
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework                 : ionic-angular 2.0.0-rc.5

System:

Node       : v8.2.1
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : not installed
npm        : 5.3.0 

Tue Jul 25 22:06: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic upload
Running app-scripts build:

[22:07:30] build dev started …
[22:07:30] clean started …
[22:07:30] clean finished in 25 ms
[22:07:30] copy started …
[22:07:30] transpile started …
[22:07:33] transpile finished in 2.95 s
[22:07:33] webpack started …
[22:07:34] copy finished in 3.86 s
[22:07:42] webpack finished in 9.14 s
[22:07:42] sass started …
[22:07:45] sass finished in 2.09 s
[22:07:45] build dev finished in 14.27 s
:heavy_check_mark: Requesting snapshot upload - done!
:heavy_check_mark: Uploading snapshot - done!
[OK] Uploaded snapshot 0f703f0a-eedc-4cfd-8f12-064d0ce9f50f!
Tue Jul 25 22:08: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >>

Great. Now it should appear in “Deploys” on apps.ionic.io and also in Ionic View. Lets us know if this worked.

Perfect thanks for your help. :smile: I am new to ionic but so far looking good. I see the app on Ionic View on my ipad.

1 Like

Hello

I have got the app to work on my apple iphone/ipad. The android package seems to have failed.

BUILD STATUS PLATFORM STARTED BUILD TIME
#2 Failed Android 2017-07-26 6:36 AM
OUTPUT
#1 Failed Android 2017-07-25 10:19 PM
OUTPUT

the output message is

ANDROID_HOME=/opt/android-sdk
JAVA_HOME=/usr/lib/jvm/java-8-oracle
Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /opt/android-sdk/tools/templates/gradle/wrapper

I download Android studio yesterday afternoon so hope its the latest version.

The output from the command line looks ok.

Wed Jul 26 06:35: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic package build
? What platform would you like to target: android
Running app-scripts build:

[06:35:52] build dev started …
[06:35:52] clean started …
[06:35:52] clean finished in 46 ms
[06:35:52] copy started …
[06:35:52] transpile started …
[06:36:00] transpile finished in 7.84 s
[06:36:00] webpack started …
[06:36:01] copy finished in 9.40 s
[06:36:09] webpack finished in 9.39 s
[06:36:09] sass started …
[06:36:12] sass finished in 2.81 s
[06:36:12] build dev finished in 20.16 s
:heavy_check_mark: Requesting snapshot upload - done!
:heavy_check_mark: Uploading snapshot - done!
[OK] Uploaded snapshot 7de64d90-4019-428c-abee-513066509c36!
:heavy_check_mark: Requesting project upload - done!
:heavy_check_mark: Uploading project - done!
:heavy_check_mark: Queuing build - done!
[OK] Build 2 has been submitted!
Wed Jul 26 06:36: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished)

Is there an additional step I have missed?

Thanks for your help

Ben

Post your ionic info output please.

Hello

Please find the ionic info below.

Thanks for your help

Wed Jul 26 06:57: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic package list
:heavy_check_mark: Retrieving package builds - done!

id | status | platform | profile | mode | started | finished

2 | FAILED | Android | | debug | 2017-07-26T05:36:56.376Z |
1 | FAILED | Android | | debug | 2017-07-25T21:19:11.910Z |

[OK] Showing 2 of your latest builds.

Wed Jul 26 06:57: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic info

global packages:

@ionic/cli-utils : 1.5.0
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 1.0.0
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework                 : ionic-angular 2.0.0-rc.5

System:

Node       : v8.2.1
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : not installed
npm        : 5.3.0 

Wed Jul 26 10:40: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished)

Hi

I have a successful android build. I ran the following command to add the platform for android.

ionic cordova platform add android

I wrongly assumed when running the ionic package build command with the android option a sub folder under platforms would be created.

My understanding is a limited. If I run the command > ionic package build
-IOS
and
-Android
and then run > ionic upload. Will both versions be able in Ionic View?

Thanks in advance for your help

Ben

Wed Jul 26 10:40: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic cordova platform add android
? The plugin @ionic/cli-plugin-cordova is not installed. Would you lik
e to install it and continue? Yes

npm install --save-dev --save-exact @ionic/cli-plugin-cordova@latest
:heavy_check_mark: Running command - done!
cordova platform add android --save
:heavy_check_mark: Running command - done!
Using cordova-fetch for cordova-android@~6.2.2
Adding android project…
Creating Cordova project for the Android platform:
Path: platforms/android
Package: com.ionicframework.favoritequotes
Name: Favorite_Quotes
Activity: MainActivity
Android target: android-25
Subproject Path: CordovaLib
Android project created with cordova-android@6.2.3
Installing “cordova-plugin-console” for android
Installing “cordova-plugin-device” for android
Installing “cordova-plugin-splashscreen” for android
Installing “cordova-plugin-statusbar” for android
Installing “cordova-plugin-whitelist” for android

           This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

Installing “ionic-plugin-deploy” for android
Installing “ionic-plugin-keyboard” for android
–save flag or autosave detected
Saving android@~6.2.3 into config.xml file …
:heavy_check_mark: Copying default image resources into ./resources/android - done!
Wed Jul 26 10:59: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic package build
? What platform would you like to target: android
Running app-scripts build:

[11:06:11] build dev started …
[11:06:12] clean started …
[11:06:12] clean finished in 10 ms
[11:06:12] copy started …
[11:06:12] transpile started …
[11:06:31] transpile finished in 19.34 s
[11:06:31] webpack started …
[11:06:36] copy finished in 23.96 s
[11:06:46] webpack finished in 14.91 s
[11:06:46] sass started …
[11:06:54] sass finished in 7.68 s
[11:06:54] build dev finished in 42.75 s
:heavy_check_mark: Requesting snapshot upload - done!
:heavy_check_mark: Uploading snapshot - done!
[OK] Uploaded snapshot 97dbc20e-323f-45f4-bebd-cebe41d0036f!
:heavy_check_mark: Requesting project upload - done!
:heavy_check_mark: Uploading project - done!
:heavy_check_mark: Queuing build - done!
[OK] Build 3 has been submitted!
Wed Jul 26 11:07: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic package list
:heavy_check_mark: Retrieving package builds - done!

id | status | platform | profile | mode | started | finished

3 | SUCCESS | Android | | debug | 2017-07-26T10:07:41.533Z | 2017-07-26T10:07:56.392Z
2 | FAILED | Android | | debug | 2017-07-26T05:36:56.376Z |
1 | FAILED | Android | | debug | 2017-07-25T21:19:11.910Z |

[OK] Showing 3 of your latest builds.

Wed Jul 26 11:08: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >>

Ionic View has nothing to do with ionic package:
Ionic View basically just shows /www in an app on your phone. Running ionic upload once makes your app available on all devices that can run an Ionic View app.
ionic package takes /www and builds it into its own app that you can install on phones.

You Android build was failing on ionic package because it needs some input for which cordova-android version to use. As oyu hadn’t added the Android platform locally, it didn’t have that information. When you run ionic info now again, you will see that there is additional information available.

Hi

I have this app working on the xcode and android studio emulators and within Ionic View on my physical devices. Thanks for your help over the last couple of days.

Best wishes

Ben

1 Like