How to check design change without creating apk?


#1

Friends,

In my app I checked the functionalities change by creating apk in each time after a small change. But now I need to modify my theme. How I can check the changes in view without creating apk like in the web development. Any methods available for it . Because creating an apk need 20 minutes in my system. Please help

Thanks

Anes


#2

At least in my case, I test most css related stuff in browser. I haven’t seen many differences between browser and app in that regard (except in some specific cases, specially in Android 4.4).

Still, it’s important to see your theme in the app, but I don’t do that very often, due to the reasons I said before. When I see some difference I can change them in the browser inspector in chrome://inspect/#devices

It would be cool a fast livereload, but at least for now I haven’t used the ionic livereload option to generate an apk whenever I change the code (have tried before, it haven’t worked very well).

If you are just testing too see your theme in the apk, not releasing it or anything of the sort, you can remove the --prod option to make the build faster (I assume your build takes 20 minutes with the prod flag). In my case it’s several times faster.


#3

Just type into command line:
ionic serve Or ionic lab


#4

Dear Evan,

I tried your both commands (I already tried it and it’'s failed that time also).

  1. ionic serve : Cordova is only available on a real device

So got error in Browser as

  1. ionic lab : In that also “Cordova not defined” Run time error occurs

You have any other options ?

Please advise

Thanks

Anes


#5

Dear Lucas,
Do you please tell the method to run the template in browser you adopted ? Sorry I did not get you.

Thanks
Anes


#6

if you install native plugins then you have to compulsorily run it on android device …because browser doesnt support native plugins


#7

Hi Nitish,
Then do you please suggest a good method to change/test the theme of current app without creating apk ?


#8

you have to create apk
1.using emulator
2.on android device

there a way where you can create apk once and automatically,it will update the apk in device or emulator


#9
add platform browser in your app, so you can able to access cordova on browser also...
>ionic cordova platform add browser

#10

Hi Rupnesh,
I explore that option also. But in my app code check the network connectivity for online operation. When I take that on browser shows “No Network” always as shown in below

Advise

Thanks
Anes


#11

Hi Nitish,
I am using my mobile phone as device. Please tell that way to update that apk in device or chrome://inspect/#devices without completely build a new apk…

Thanks
Anes


#12

Try to run the apk on mobile device and check whether this error gives on not.


#13

No dear at android device it works fine. My query is not regarding an issue , but a solution to Fasten my theme change avoiding unnecessary apk build…


#14

I have no solution for that… I have also faced this issue (while using One Signal REST API which requires Mobile Network to generate device player ID’s). To get faster output I had use Developer Options of Device, so I have to continuously attach the mobile device with my system using USB, and using command >>>ionic cordova run android , directly installs the APK on device within a minute.


#15

Hi@anespa
Why dont you use ionic serve or ionic serve --lab for these purpose?
If your error is related with cordova you have to check the condition to avoid the cordova issue on browser you can check like this

import { Platform } from 'ionic-angular';
 if (this.plt.is('cordova')) {
      // This will only print when on cordova
      console.log('I am an cordova device!');
 }

#16

@anespa I meant with ionic serve.

I see that you posted an error when running ionic serve. Does your page that has the css applied need cordova to be shown? I use cordova to access native functionality, so if it’s just to see the page, I try to make the page content be displayed even without cordova (the page will be shown, even if I can’t execute some actions in the page). So you could try to make your app work this way, it would be easier to test.

I have an app with more than 100 components and most of the time I test css/themes in the browser. I haven’t seen a significant difference between the browser and the device (except in some cases regarding flexbox in Android 4.4 and some special characters displayed differently).

After I check that it’s fine in the browser, I check in the device. In most cases it works the way i intended so I don’t need to rebuild.

Your app takes 20min to be built using the --prod flag, I presume:

ionic cordova run android --prod

In my case it also takes a long time, so if it’s just to test the css I can just execute without prod:

ionic cordova run android

About chrome://inspect/#devices, you can just type it in chrome to see and inspect your device, when you plug it with usb.


#17

@anespa, I got same issue before so I followed below approach to fix this issue.

Without running the apk in mobile we can ran the app in mobile by connecting through ip address

ionic serve -p 8080 --livereload --livereload-port=8100 -c

Open the browser and type “chrome://inspect/#devices

~Swetha~


#18

Thanks Swetha,

Open the browser and type “chrome://inspect/#devices”

I already use above method. But as we do in web edit the style on browser is not flexible.

What you mean by the below method

ionic serve -p 8080 --livereload --livereload-port=8100 -c

please advise

Thanks
Anes


#19

Hi@anespa
At present how did you check your applied style?


#20

Hi@anespa ,
Instead of choose responsive choose a device applying style.