search

cormacmchale / ProfPractice

An ionic App
0 stars 0 forks source link

Producing A build of the app #7

Closed cormacmchale closed 5 years ago

cormacmchale commented 5 years ago

This section will document the changes encountered while trying to get a production build off the app. The reason for producing a production build of the app came about after meeting various lecturers and their advice as to getting the google maps plugin to work.

cormacmchale commented 5 years ago

To give some context as to why we sought advice on the matter. One of the benefits of developing in ionic was that you can work on the app in whats known as Live-Reload mode. This means that you can keep the app live as you make changes. Now when we initially got the Google Maps Plugin to work (See google Maps Issue) we couldn't get the google maps plugin to work in Live-Reload. This is the error that it gives.

Capture

You can see that the error is not something on our end and it seems to be a message given back from the google maps object. So at this point we decided to ask out lecturers.. I e-mailed Martin Kenirons as he was the one who taught us Ionic and Angular development at GMIT.

cormacmchale commented 5 years ago

After meeting with Martin and showing him this error he agreed that it just seemed to be an issue on the Google developers end and not ours. After some small research on the spot he was able to tell us that the plugin worked only in the browser full build deployment and on android and IOS deployment. His advice was to try and get a proper build to work on the phone. Gerard Harrison another of our lecturers who shares an office with Martin was able to point us in the direction of this https://ionicframework.com/docs/v1/guide/publishing.html So with this advice and guidance we decided to get the build deployed on Android.

cormacmchale commented 5 years ago

Following this Guide after about 5 hours of trying everything and moving things around, creating password and accounts I finally managed to get a production build of the app. Only for it to show me a blank screen on my phone, it was progress at least!

cormacmchale commented 5 years ago

So now the issue was to debug the app! So after some research online I found information online claiming that you can debug your app in Google chrome, which seemed extremely handy so I decided first to follow this guide. https://developers.google.com/web/tools/chrome-devtools/remote-debugging/ The only issue I was having was that Chrome couldn't find my device as shown in the Guide so this became the next issue. After extensively Googling and the slow realization that lots of developers are willing to post answers online without fully understanding what they are being asked, I came across a small piece of software.

Capture

From what I can tell it's something along the lines of an abstraction of what android studio uses to locate android devices but truth be told I don't fully understand it. So basically while my phone was connected to my laptop and the correct options open on chrome I was able use this command line tool by running 'adb devices'. It found my phone and all of a sudden chrome also knew my phone was there! Magic. This achievement was short lived as it turns out that chrome just provides 'remote-debugging' of the web-view which was still blank so at least I had eliminated this as a possible solution. Back to the drawing board.

cormacmchale commented 5 years ago

The next step was the discovery of Android Studio and Logcat..! Having never done any work in android studio before this point I didn't know that this existed. So I downloaded Android Studio and the correct SDK for my phone. I imported the app.apk into android studio and attempted to deploy it to my phone from there. You would think that would be easy, however, while in android studio first you need it to find your phone which did not always work. Thankfully I had that ADB software so I got around this. Then underneath the file you need to have the correct SDK in external library as seen here or it won't allow you deploy to your phone.

externalLibraryAndroid

This caused me untold grief.. you would think that it would be easy to do this, even with the correct SDK android studio makes it very difficult to this, usually I would select the option and nothing would happen. I randomly got lucky eventually and it worked so again this was progress.

cormacmchale commented 5 years ago

At this point I had android Studio deploying the app to my phone and now figured out that having built a full production I had during this process removed all the debug flags from my app and it wasn't actually in a position to be debugged. So after some more research I found out that running 'ionic cordova build android' will build you an appdebug.apk and place it in the folder hirearchy of the ionic project. debug

cormacmchale commented 5 years ago

So I installed this on my phone and again I still had a white screen. So I returned to Android Studio and discovered that as long as your phone is connected and your app is installed, Running the app on your phone will give you the logcat information without any need to deploy the apk from android studio. This was huge progress as now all I had to do was make changes in VS code. Get the debug.apk from running the ionic command, e-mail it to myself and install it on my phone and check logcat in android studio to fins out what was happening.

cormacmchale commented 5 years ago

At this point I was confronted with three errors on getting the white screen on loading the app on my phone.

  1. Zygote - Process whitelisting ZygoteError So after doing some research I discovered I found out that this is the Kernal thread in my phone deciding that the process is okay to allow run. It's logged as an error which is confusing to a novice developer but I don't think this was an issue. I ran the npm install 'cordova plugin add cordova-plugin-whitelist' anyway just in case.

  2. libsPersona - reading file that's not there libsPersona Again something to do with the inner workings of the android kernal, just interesting that this always tries to read some file that does not exist. I decided to ignore this unless I couldn't figure anything out at all.

  3. MyPluginLayout - Google ErrorGoogle This is actually what I thought was breaking the app at first. It seems to be an error in the value zoomScale which I just assumed maybe we had done something with in our code! But after some searching through files in the project folder I found that no matter what value zoomScale gets it is logged as an error. myPluginLayout zoomScale I tried a few hard coded Values with fresh builds of the app but nothing was working. I even re-installed the API key a few times. api

Still though I was getting a white screen and was ready to give up on getting a build working.

cormacmchale commented 5 years ago

Then finally as I was just about deciding to give up I came across some advice on a thread on the internet about installing the latest web-view package web After this install the app started to work! Without having to debug it, it just loaded up and worked instantly.

cormacmchale commented 5 years ago

So now we had a proper build of the app as it would appear on a phone and it was probably the most significant development we had in the developing of our app. Now after we added a new feature we could actually see how it would function for a mobile user. Which really was our target market in terms of who we were making the app for. Our development had now become much more user oriented. Also a lot of the pressure was off knowing we would have an actual build for the presentation and this I believe reflected in the finished app and documentation.