Using Ionic View for your app testing

Introduction

Ionic View is an app and has by far has been one of my favorite things Ionic Provides. The first and foremost problem with Ionic apps is that we need to see them on the real device and for our clients to believe that hybrid apps work like crazy we need to showcase them with the app prototype or the entire app in their own hands so that they can test run it and can also review the product.

Ionic View is a standard solution/app for people who are getting started wit this approach. Once can easily upload his/her application to the Ionic View and see the application in real time. Let’s get our hands dirty and understand the process of doing so.

Setting up Ionic View

In order to set this up, one needs to sign up for an account with the Ionic site. Go to the Ionic Signup Page and then sign up for a free account. After this, I will recommend you guys to log into the ionic website.

Now you can either create a new application through the web console which we will cover in our video tutorial series or you can directly use the ionic console as we see here. Please follow these steps and see the application working.

NOTE : We have assumed you have created an account with Ionic and are ready with your credentials.

We first require to link the application and then upload it to Ionic Platform and this will help us to see it in Ionic View. The linking process is pretty easy. Assuming your project name is sampleApp

cd sampleApp
ionic link

If you have already created an app through the web console, you will find it out here in command prompt and if not it will ask you to create an application.

Go to the site and create an application and run the command again and select the app which you want to connect it to.

ionic link

Once done run the command below to upload the application

ionic upload

Running app-scripts build:

[15:22:46] build dev started ...
[15:22:46] clean started ...
[15:22:46] clean finished in 2 ms
[15:22:46] copy started ...
[15:22:46] transpile started ...
[15:22:48] transpile finished in 1.57 s
[15:22:48] preprocess started ...
[15:22:48] deeplinks started ...
[15:22:48] deeplinks finished in 39 ms
[15:22:48] preprocess finished in 40 ms
[15:22:48] webpack started ...
[15:22:48] copy finished in 1.73 s
[15:22:54] webpack finished in 5.50 s
[15:22:54] sass started ...
[15:22:54] sass finished in 853 ms
[15:22:54] postprocess started ...
[15:22:54] postprocess finished in 3 ms
[15:22:54] lint started ...
[15:22:54] build dev finished in 8.00 s
[15:22:55] lint finished in 1.12 s
Requesting snapshot upload - done!
Uploading snapshot - done!
[OK] Uploaded snapshot 10da41b7-cd0d-4994-88a3-f9c0ad1184b0!

And you are done. You can comfortable go ahead and download the Ionic View Application if you have not done it till now.

Click here to download Ionic View application

Login into the App and you should be able to see your app which you have uploaded coming onto the screen. You can verify the application and with each build upload it onto the system.

Ionic View on device

Ionic View on device

If you want you can also attach notes to the builds that you are uploading by using the following command.

ionic upload --note "Some notes specific to the build which you want to distribute"

Conclusion

By now you must have understood the power of Ionic view and how can it affect your day to day development activities. Try this out and let us know if you have any concerns or find any difficulty in setting this up.


Originally published at The Web Juice.

Show your support

Clapping shows how much you appreciated Shiv Kumar Ganesh’s story.