Ionic/Angular Android app crash with Barcode Scanner - javascript

I've started writing a basic app so I can scan barcodes and email them out to people. It's using latest version of Ionic and the barcode scanner (GitHub).
Scanning works and I can display the list of scanned results. I'm currently using HTML local storage via a service/factory but I ran into this same issue using ngCordova/sqlite. If I scan a new barcode and then open the modal so as to change an attribute (which works) upon closing the modal the app crashes after a few moments. The change does get written to storage, as upon re-opening what I changed is present.
It appears to only crash when I do this for the first time for each object. If I start the application back up and change it to something else I don't get a crash. I can't for the life of me figure out what's causing the crash (I've re-written it in case I messed up along the way) and the I can't find anything in the logcat results (wasn't sure what to post).
What's worse, if I remove the scanning function and just enter something directly into storage so I can test in a web browser, things don't crash in a web browser or on Android. It appears something between the Barcode Scanner and the modal or local storage doesn't get along. I've tried this using routes and same result.
Relevant code samples are at http://git.io/vm4W7
P.S. I don't have iOS developer account or device so couldn't test if it Android or iOS specific.
EDIT: Using adb logcat | grep -i "console" with my device plugged into the only errors I get are below
I/chromium(29216): [INFO:CONSOLE(173)] "No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.", source: file:///android_asset/www/plugins/cordova-plugin-console/www/console-via-logger.js (173)
D/PluginManager(29216): exec() call to unknown plugin: Console
I/chromium(29216): [INFO:CONSOLE(173)] "No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.", source: file:///android_asset/www/plugins/cordova-plugin-console/www/console-via-logger.js (173)
D/PluginManager(29216): exec() call to unknown plugin: Console
EDIT 2: GapDebug shows same messages on crash, with nothing more informative.

Related

Why does my Google Cast sender not find my receiver?

I have an existing Google Cast app. It's been quite a while since I've touched it because it's been working just fine, but now I want to add some features to it so I'm digging back in.
I've created a second Google Cast app in the Google Cast SDK Developer Console (https://cast.google.com/u/0/publish/#/applications) so I can do some testing without interrupting people using the existing app. This new one has basically all the same settings: it's a Custom Receiver and it points to a URL -- very simple. The only difference is that the new URL is my test server instead of our production server. It's published.
When I run my sender in my test environment and leave the app ID as the existing app, everything works fine. Chrome prompts me to chose a destination device and my Chromecast shows up in there.
Now when I change the app ID in sender code to the new app ID, Chrome says
No cast destinations found.
I change it back to the original app ID and it finds my Chromecast again no problem.
So, I assume that behind the scenes something is wrong with the configuration of my new app ID but I don't know how to figure out what's wrong. Additionally, I can watch the logging on the test server and I can see that nothing is hitting my server, so I don't believe Google is making a request to my new URL.
I'm just not really sure where to start to try to figure out whats going on.
Double check the serial number you entered in the Google Cast Developer console. It is very easy to get the number wrong. Also, restart your cast device to force it to sync with the servers that track the developer device registrations.

How to debug JavaScript in IOS Action App Extension?

With iOS, Action App Extension, one could run a JavaScript code against HTML. However, after quite some search on Google, I have not found any document explaining how to debug in this situation (insert a break point or simply add/view console out statement).
It's not too hard, although recently I've had an issue with the page showing up when connected to the simulator. In that case I just ended up using my phone directly. (Apparently you need to start desktop Safari after the iOS Simulator has started to inspect "remote" Simulator sessions)
Ensure that on the device Settings->Safari->Advanced->Web Inspector is on
(Make sure you've Trusted the computer from the device)
Start MobileSafari on your device by running from Xcode and choosing Safari
-- this isn't necessary but you can decode the iOS Objective-C/Swift code as well. You can just start MobileSafari manually and it will be visible in desktop Safari.
Start Safari on your desktop, make sure Show Develop menu in menu bar is on in Preferences.
In the Develop menu you will see your device name, say 'BSharer's iPhone'
select the page name underneath your device name, say 'en.m.wikipedia.org - Wikipedia'.
You are now debugging that device page on your desktop.
There are options to 'Automatically start debugger etc...', but I've found that when I tried these my code would not execute.
You can't place debugger statements in the app extension JavaScript as it isn't injected until your App Extension starts. Instead I would add a debugger; statement to my app extension JavaScript code which will pause the debugger in the app extension JavaScript code at the debugger; statement.
Start your app extension by selecting it in the Share menu, set any other breakpoints you are interested in, then hit the continue button on the debugger.
You will also catch uncaught exceptions of course.
The official documentation for this is here.
Make sure you remove the debugger; line from production code.

How do I test the Sync feature of the chrome extension during development

I am building a chrome extension which requires you to sign in to chrome before using it, post which you could save some values (which I store it in the Sync storage) and the same is expected to get Synced whenever I Sign into chrome from some other machine using the same Sign in info.
I tested the extension and the info is being stored successfully on the machine where i am saving it. But the same info is not synced to the other machine. Just to make it clear,I have also installed the extension in the other machine's chrome as well.
I have used the following code in the background js for syncing purpose-
chrome.storage.onChanged.addListener(function(changes, areaname) {
if(areaname=="sync")
{alert('Storage Changed' + changes);}}
so that I get an alert indicating that the event is getting fired.
I don't get this alert in the other machine; indicating the sync didnt happen.
I looked up Sync settings,it shows that the sync just happened. But there was no alert.
Is it so, that we can test syncing during development of the extension ?
I have been through Does-chrome-app-id-for-extensions-affect-sync-storage
Does the App Id has to do anything with it ??
UPDATE - I found the answer. Let me elaborate how I did it. -
This page developer.chrome.com/extensions/packaging explains how to package and extension manually. Please go through that before proceeding.
Step 1 - I deleted the extension that I had installed in both the machines.( I had installed it using the Load unpacked extension option before)
Step 2 - I followed the link above and made a manual package file with .crx and .pem file
Step 3 - While I was signed in into the two machines using the same gmail account, I shared and installed this .crx file by drag-dropping the file into the browser. (It asks for confirmation and proceeds to install)
Step 4 - After following Step-3 on both the machines, I now have my extensions installed in both browsers.
Step 5- I saved values using my extension in one browser and voila, after a while, it appeared in the other machine.
Step 6- But One important thing though, the data was synced automatically without the alert that I wanted to display-
if(areaname=="sync") {alert('Storage Changed' + changes);}}
So I assume that this listener code was not important in my case anyways. Hope this helps other guys looking for the solution.

Meteor rendering in Adobe DPS Overlay after redirect from Facebook Login

I'm running into a pretty specific problem (2 problems, actually, but I believe they're related) and am hoping someone out there can shed some light on what's going on.
I have a Meteor application running inside an HTML overlay inside of an Adobe Digital Publishing Suite (DPS) article. I've tested this with as simple of a configuration as possible, and am able to reproduce the issue consistently.
Overview
1- Meteor works fine in Mobile Safari, and Mobile Chrome on an iPad (3rd gen, ios 6.1.7) but the rendering inside of an Adobe DPS article is generating an error:
TypeError: 'undefined' is not a function
While this error doesn't affect rendering, I believe it's related to my 2nd problem:
2- Upon redirect from facebook authentication (alt. / non-JSSDK flow) the page will not render at all, but there is no additional error message other than #1 above.
Code Example / Details
1. "Headless" browser
I'm Using an HTML overlay in an article, set up inside of InDesign and published to DPS using Folio Producer. The overlay is pointing to a test url (e.g. http://dmx.dod.fbchat.meteor.com), and is refreshed each time the specific page on the article is brought into view.
The details of the browser are as follows:
appVersion: 5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329
userAgent: Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329
I do know that there are some restrictions on this browser (for example, alert = null;), and it's considered "headless" because it's not a legitimate version of chrome or safari, with no address bars, etc.
2. The redirect is achieved via the following method
create a brand new Meteor project (e.g. meteor create DPSFBRender)
decide on the meteor uri you're going to host it from (e.g. dmx.dod.fbchat.meteor.com)
create an application on facebook (https://developers.facebook.com/apps), note the App ID.
add your meteor uri to the domain and to the redirect uri on facebook. for example:
domain: dmx.dod.fbchat.meteor.com
redirect uri: http://dmx.dod.fbchat.meteor.com/
add the following two lines to the click event for the button inside your default meteor project js file:
var randID = Meteor.uuid();
window.location.href = 'https://www.facebook.com/dialog/oauth?client_id=[FB APP ID]&redirect_uri=[URL WHERE YOU'LL HOST TEST]&state='+randID+'&response_type=token&scope=[LIST OF PERMISSIONS];
So, for example, if my testing URL were dmx.dod.fbchat.meteor.com, my FB App ID were 514080555337856 and my list of permissions were lengthy (see below), my 2nd line would look like this:
var randID = Meteor.uuid();
window.location.href = 'https://www.facebook.com/dialog/oauth?client_id=514080555337856&redirect_uri=http://dmx.dod.fbchat.meteor.com/&state='+randID+'&response_type=token&scope=create_note,email,friends_about_me,friends_actions.books,friends_actions.music,friends_actions.news,friends_actions.video,friends_activities,friends_birthday,friends_education_history,friends_events,friends_games_activity,friends_groups,friends_hometown,friends_interests,friends_likes,friends_location,friends_notes,friends_photo_video_tags,friends_photos,friends_questions,friends_relationship_details,friends_relationships,friends_religion_politics,friends_status,friends_subscriptions,friends_videos,friends_website,friends_work_history,photo_upload,publish_actions,publish_stream,read_friendlists,read_mailbox,share_item,status_update,user_about_me,user_friends,user_groups,user_interests,user_photos,user_relationship_details,user_status,video_upload,xmpp_login';
deploy your meteor app to the test uri (e.g. meteor deploy dms.dod.fbchat.meteor.com)
point your html overlay inside your DPS article to your URL
deploy / publish your article, open it up inside DPS viewer on the iPad, and click on the button, to activate the redirect.
You'll be prompted to allow the FB app permissions, accept.
You'll be navigated back to your meteor url, but the page will not appear.
If you change article pages, go out of the article and back in, or just bring up your app bar, and then go back to the article, the page will refresh, and render.
As long as you have your permissions set (as long as you aren't prompted to accept), the page will render fine. It is only after the FB prompts from the custom login and the subsequent redirect that the page won't render.
If you want to test it again, log into your fb account in a regular browser, and delete the app.
3. Debugging / Discovery
I started debugging this, using debuggify, and that's when I was able to see the TypeError: 'undefined' is not a function error. It doesn't stop anything from rendering at first glance, but I believe on the redirect that it is the culprit (see thoughts section below).
This error will appear on ANY meteor page that is rendered inside a DPS overlay. It doesn't have to be a redirect, or have anything on it. You can simply create a new meteor project, deploy it, point an HTML overlay in DPS to it, and the error will appear (only noticeable with a remote debugging tool like debuggify).
Likewise, this error will not occur inside of the IOS safari mobile browser, or the chrome browser. The above-mentioned rendering problem after redirect from FB will also work as expected in both browsers (the page will render after the "accept permissions" screens).
The 'undefined'... error has no stack trace:
Stack: TypeError: 'undefined' is not a function at ? (http://dmx.dod.fbchat.meteor.com/:1:0)
..although we do know that it happens after the load event:
Happened: After onload
Thoughts
I'm thinking this may be a combination of the dynamic JS loading inherent in Meteor, combined with the redirect. Simply, the redirect isn't waiting long enough for the JS to load (especially handlebars) and it therefore isn't rendering.
I don't believe the entire page is shut down, because in my app (not the tests) I am harvesting the App Key inside the URL Hash, and successfully storing it. So, I know that Javascript isn't completely shut down on the page. It's just the rendering portion for some reason that is not working.
I believe the 'undefined' is not a function error is related - could be Jquery, Handlebars, DDP.... something isn't loaded when expected. On a normal page load (e.g. a refresh) the browser is overcoming this. On the redirect from FB, it isn't.
It may have to do with the JS/Browser restrictions for the embedded DPS browser. Adobe limits some functionality (for security and for performance reasons), and maybe they're turning something off that meteor needs to run.
Workarounds I've tried:
Using the Default Meteor FB Login -- doesn't recognize the 'headless browser', and popups are disallowed in DPS anyway.
Using the standard JSSDK login flow from FB -- same deal, popups aren't allowed
Ideas?
So, at this point, I'm open to anything, even if it's not solving this specific problem.
Workarounds, similar problems you've experienced, thoughts, speculation on why this may be happening on the redirect, but not normally, etc.
I know there may be several ways to skin this cat, but I'm stuck right now, and would love to hear some suggestions. I just need to get FB login to work, inside of DPS. I don't care how, even if all the code is client side (this is just a test, not a production system)
I've even considered trying to edit the accounts-facebook and accounts-base packages in meteor to recognize a headless browser, but don't even know where to start on that...
Also, the 'undefined'... error happens on every single meteor page inside a DPS article, no matter what. That's annoying, and may be useful for some mobile headless browser compatibility improvements, if someone has any idea why it's occurring.
Follow ups are welcome as well. I'll be monitoring this thread.
It turns out that Tom Coleman helped me find this specific problem.
When JS is minified, if there's a missing semicolon, it can wreak havoc, and cause the above-mentioned 'undefined' error.
So, after further testing, I've discovered that this is most likely inside of the Adobe-specific DPS Javascript that is loaded with every overlay.
I've filed a bug with Adobe and will see if/when it's fixed, if it fixes the rendering problem as well.

Phonegap app working locally, not working on phone

I have written a phonegap application, and it performs a pretty simple task, it gets some JSON from a YQL link, and then displays it nicely to the user. This works excellently when I run it using Google Chrome on a Desktop, but, my client tells me that it does not work on his device which is Android 2.3. What can be going wrong? I'm using phonegap build to build to app, and they tell me that it is given internet permission, but, when my client puts the APK on the phone (its not on the market yet), does he need to do something special for it to access the internet?
Thanks a lot,
Dhaivat
in phonegap, allow external host : Open phonegap.plist -> external host and add your url or * to allow all
within the phonegap app the webapp runs under the file:// protocol - this might affect things.
you should test this at least on an emulator yourself - clients usually screw up anything some might screw up when testing ;) best would be to test on an actual device tho.
I'm not sure if this will help but I had a similar problem testing my app here:
https://stackoverflow.com/questions/17496104/json-wordpress-feed-not-appearing-in-android-studio-emulator-using-phonegap
I needed to change access origin to ="*"/ in my config.xml

Categories

Resources