I have a problem using an actual Ionic Angular in combination with NFC reader.
I can successfully read the NFC Tag with the example provided in:
https://ionicframework.com/docs/native/nfc
The Problem that i have is, that after the reading of the NFC somehow the Angular ChangeDetection is broken and the changes are not displayed. When i click on a button that does nothing, the changes are displayed.
I know i can trigger the ChangeDetection manually, which would work, but then i would have to trigger the ChangeDetection everywhere in the component, which i think should not be the case.
Does anyone have an idea what i am doing wrong?
First i thought maybe it has something to do with the observable, but i tried adding a interval observable, which works just like expected.
Template:
<p><ion-button (click)="startNFC()">start NFC readermode</ion-button></p>
<p><ion-button (click)="startNFCListener()">start NFC listener</ion-button></p>
<p><ion-button (click)="startInterval()">start Interval</ion-button></p>
<p><ion-button (click)="doNothing()">do nothing</ion-button></p>
<p>
{{nfcReading}}
{{nfcTag}}
<ion-spinner *ngIf="nfcReading"> </ion-spinner>
</p>
Code:
startNFC() {
console.log("startNFC");
this.nfcReading = true;
let flags = this.nfc.FLAG_READER_NFC_A | this.nfc.FLAG_READER_NFC_V;
this.readerModeSub = this.nfc.readerMode(flags).subscribe(
tag => {
console.log(JSON.stringify(tag));
this.nfcTag = this.nfc.bytesToHexString(tag.id);
this.nfcReading = false;
this.readerModeSub.unsubscribe();
},
err => {
console.log("Error reading tag", err);
this.nfcReading = false;
}
);
}
doNothing() {
// this really does nothing... it is just to demonstrate that this triggers the changedetection
}
i get can see that the subsciption event is triggered in console, but it is not shown in the HTML.
When clicking the do nothing Button. The tag is shown.
I created a fresh type=angular blank project and test on a Google Pixel 3a hardware.
i have uploaded a sample project to demonstrate my problem.
https://github.com/autlunatic/Ionic-NFC-Android-Test/
Related
When using MOBILE SHARE (navigator.share), canceling the Share flow causes an unexpected error to appear.
The message can be acknowledged and user is allowed to proceed but this error response is unexpected.
STEPS TO REPLICATE
1.Tap the SHARE icon to initiate the share dialog then:
2.a on iOS, find and tap the close [ x ] control in the upper righthand corner of the dialog to dismiss
2.b on Android, swipe the share overlay down (or whatever way to close/exit this dialog?)
3.The error "AbortError: About due to cancellation of share" appears when:
on iOS, immediately on cancellation
on Android, when attempting to re-engage the Share control.
The error message:
www.example.com says: AbordError: Share canceled
Im using this Vue plugin https://github.com/GabrielBibiano/vue-navigator-share
This is not an issue with Vue.js or any plugin, but something that navigator.share function does.
It is throwing this on canceling/dismissing share action.
Check this example on phone which supports navigator.share.
(NOTE: open this page as desktop site since phones can not run examples)
You can also see this (LOC: 303): https://chromium.googlesource.com/chromium/src/+/34eacf936ac3255925c5045c4385dc9b5f19fa78/chrome/android/javatests/src/org/chromium/chrome/browser/webshare/WebShareTest.java
const share = async () => {
try {
await navigator.share({ url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' });
} catch (e) {
if (e.toString().includes('AbortError')) {
alert('Hello world aborted :(');
}
}
}
<button onclick="share()">share (only for phones)</button>
I'm building a Cordova Ionic application which fetches JSON response on button click and display it. It's working fine in browser but it's not displaying anything in android.
angular.module('starter', ['ionic'])
.config(function($ionicConfigProvider) {
$ionicConfigProvider.navBar.alignTitle('center'); //align title in center
})
.controller('ControllerOne',[ '$scope', 'freshlyPressed', Ctrl])
.service('freshlyPressed', ['$http','$log', freshlyPressed]);
function Ctrl($scope, freshlyPressed){
$scope.refreshClicked = function(){
freshlyPressed.getBlogs($scope);
}
};
function freshlyPressed($http,$log){
this.getBlogs = function($scope){
$http.jsonp("https://public-api.wordpress.com/rest/v1.1/freshly-pressed?callback=JSON_CALLBACK")
.success(function(result, posts){
$scope.posts = result.posts;
});
};
};
How would I know if any exception occurred while testing the app in android?
[Edit] I'm new to Android & Cordova.
The only way you can find out if something goes wrong is if you add a .error function after the .success function, otherwise errors will not be caught.
Here is a code example for your current situation:
function freshlyPressed($http,$log){
this.getBlogs = function($scope){
$http.jsonp("https://public-api.wordpress.com/rest/v1.1/freshly-pressed?callback=JSON_CALLBACK")
.success(function(result, posts){
$scope.posts = result.posts;
})
.error(function(error){
console.log(error);
});
};
};
Although, I would highly recommend you switch to the .then() function, as .error and .success have been deprecated as described here.
You can debug your android apps with Chrome using DevTool.
To enable Remote Debugging follow these Remote Debugging Devices Documetation
.
To use it follow Chrome Inspector (Ionic Docs).
Hope this may help you.
I am working on Cordova hybrid mobile app currently am doing in android app it runs fine now when i make same app for window phone it is not perform any functionality.
for make WP8 I follow this link after that i copy my all file of www folder to new generated www in Visual Studio project.
But when i ran app it just shows its first page only and not performing any functionality.
So what steps did i miss ?
On the click of button I call following function
$('#contactBackupBtn').on('click',function(){
$('#p2').append("Going to be backup");
sm_sync.backupAllTheContacts(function(){
$('#p4').append("After Contact Backup Function Finished ");
});
});
From above function it calls the following one
backupAllTheContacts:function(callback) {
$('#p3').append("IN backupAllTheContacts");
navigator.contacts.find(["*"], function(contacts) {
$('#p3').append("IN Contact Success");
callback();
}, sm_sync.onError, {"multiple": true});
}
onError:function(error) {
$('#p1').empty();
$('#p1').append(error.code);
$('#p1').append(error.message);
}
When i execute it, it shows this message IN backupAllTheContacts and ths Going to be backup but not showing any success or error messages. what should i do to make it run.
(This is a small part of my app it is runnng perfact in Android Emulator but not n windows
I need help i am stuck here)
use console.log is not support in windows phone so use this and use localStorage like this. try to run on deviceready
document.addEventListener("deviceready", function () {
/* This is for Console.log support in WP */
if (typeof window.console == "undefined") {
window.console = {
log: function (str) {
window.external.Notify(str);
}
};
}
var key0;
/* manage localstorage this way */
if (typeof (window.localStorage) !== "undefined") {
localStorage.setItem('lastname', "Smith");
localStorage.firstname = "One";
if (localStorage.getItem('objectKey1') != null || localStorage.getItem('objectKey1') != undefined) {
key0 = window.localStorage.getItem('objectKey1');
}
}
},false);
When i build my WP8 app i ran into somewhat an issue same as this. it's because of the jQuery i used. Then i updated my jQuery to the latest and its all started working fine.
Please check the jQuery documentation and the version you are using. Or you just put up your code in here so that we can have a closer look.
"But when i ran app it just shows its first page only and not performing any functionality.
So what steps did i miss ?"
Without the code how can we say what steps did you missed ???
I have a function which downloads a weather xml feed and displays it now, if it can't get a connection it loads in the last report or a blank one if it's the first time downloading. This part seems to work fine, but when it has a connection it seems to not want to finish downloading it. It works fine on IOS but on Android it just brings up a loading sign.
This is the function
function Display:doQuery(zip, web)
Display:loadXML() -- calls the functions to display previous or blank weather data
network.download(web .. zip, "GET",
networkListener,
"weather.xml",
system.TemporaryDirectory)
end
also I have seen the weather demo and tried it and the same thing seems to happen it seems.
the network listener is
function networkListener(event)
if (event.isError) then
print("Network error!")
else
loadXML()
end
end
so it reloads the the xml if and when it gets them.
On Android, you must add the following permission to the "build.settings" file.
settings =
{
android =
{
usesPermissions =
{
"android.permission.INTERNET",
},
},
}
Is there a way to create a serious HTML/CSS/JS project with multiple HTML, CSS, JS files on JSfiddle.net ?
If yes, how to do it ?
I want to create a basic mobile apps based on HTML/CSS/JS, about a dozen of HTML/CSS/JS files. I would like to develop it all on JSfiddle, my favorite Online JavaScript IDE. But JSfiddle.net while a clean way to test projects stays limited to:
1 html file (personal)
1 CSS file (personal)
1 JS file (personal)
several external resources (CSS, JS libs, data) which request you another webhosting.
The official doc suggesting Github hosting for 1HTML/1JS/1CSS/someDataFiles is not satisfying. I wish all on JSFiddle, and more files in my project.
You can do it inside a jsFiddle but there are few limitations, and you are probably not going to be satisfied with it.
You can test only 1 HTML multiple pages template. But in case of jQuery Mobile framework this will be enough, as you can place numerous jQM pages inside a 1 html file.
For example, this is my jsFiddle template when helping to this group: http://jsfiddle.net/Gajotres/yWTG2/
You cant use normal form submitting. Instead you should use ajax to sumbit form data.
In my other answer you can find solutions for ajax form submitting and how to send parameters during the page transition: jQuery Mobile: Sending data from one page to the another
In case you want to communicate with an remote host:
var ajax = {
sendRequest:function(save_data){
$.ajax({url: 'http://localhost/JSONP_Tutorial/json.php',
data: save_data,
async: true,
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function (result) {
if(result == "true") {
$.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
} else {
alert('Login unsuccessful, please try again!'); // In case result is false throw an error
}
// This callback function will trigger on successful action
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Network error has occurred please try again!');
}
});
}
}
jsFiddle has a stupid policy where they want to prevent usage of full HTML files. They are trying to enforce this with stupid error warnings in HTML content part. You will need to have something like firebug plugin for Firefox or Chrome to remove this stupidity. Or you can even do it with Grease Monkey plugin.
In case you want to use full HTML template like in this example: http://jsfiddle.net/Gajotres/yWTG2/ you will need to use your javascript code in onDomready state.
Some functionalities are not going to work. Like window.orientationchange event.