Hi guys!
I developed an Ionic windows 10 app. The problem that I cannot read and modify NFC data. Always I got the error below.
I working on changing Http to HttpClient but the app screen become white.
How can I avoid this problem and get/post works with NFC data.
What library are you using for NFC?
The errors you posted there normally are when it can’t request some URL. What URL is the problem here? Look at the network requests.
Are you sure this is available in the Angular version that Ionic uses and supports?
This is what I am using in NFC.
$ ionic cordova plugin add phonegap-nfc
$ npm install --save @ionic-native/nfc
The URL works fine and I tested in Android. I have three URL’s, the first is get data from drop down list and show it in fiedsl, the second is post data after changing, the third is get data from DB after read NFC tags and validate if it is existed.
API works fine and configured correctly.
when I debug the windows 10 app I got the previous error as seen in the picture above. In this case I cannot select form drop down list and modify or NFC read data.
Yes, I upgrade angular to 4.4, which is support HttpClient. When I use HttpClient the app become white screen.
I don’t know the exact problem with Windows 10
How are these URLs related to the NFC stuff?
Not what I asked. I asked what URL the problem is. And what else it tells your with the network request.
Great for you, but Ionic doesn’t support Angular 4.4. Newest verison is here: https://github.com/ionic-team/ionic2-app-base/blob/master/package.json#L15-L22
NFC reader page to read NFC tags and get the similar from DB. The NFC reader is below.
this.nfc.addNdefListener().subscribe(data => {
if (data || data.tag || data.tag.id) {
let tagId = this.nfc.bytesToHexString(data.tag.id).toString();
//Check if the read NFC tag is existed in DB or not.
if (tagId) {
this.checkTagInDB(tagId);
//this.checkTagInDB(tagId);
let toast = this.toastCtrl.create({
message: 'NFC Tag found: ' + tagId,
duration: 4000,
position: 'top'
});
toast.present();
let payload = data.tag.ndefMessage[0].payload;
let tagConintent = this.nfc.bytesToString(payload).substring(3);
} else {
let toast = this.toastCtrl.create({
message: 'NFC Tag not found',
duration: 4000,
position: 'top'
});
toast.present();
}
}
});
The get function for selecting values. onNFCData() function call form constructo
public onNFCData(): void {
this.nfcData = this.http.get('http://***********/api/values').map(res => res.json());
}
public onChangeItem(data): void {
console.log('dataObject: ', data.NFC_ID);
let dataObject2 = data.NFC_ID;
window.localStorage.setItem('id', dataObject2.NFC_ID);
this.dataObject = {
nfcID: dataObject2.NFC_ID,
nfcDeviceName: dataObject2.Name,
currentUser: dataObject2.Users,
logTime: dataObject2.LogTime,
systemStatus: dataObject2.Status,
itemDescription: dataObject2.Description,
problemDescription: dataObject2.ProblemDescription
}
}
In Android everything find and does not seem any problem. The problem is that I cannot get because the error in the first picture.
I have downgrade again, but still the problem.
You still didn’t reply any of my questions.
I will stop replying until you did so.
I think I answered, otherwise I don’t get you questions. Can you rewrite it?
No need, they are quite clear:
Also:
Please edit your post, it is not very readable at the moment.
Use the </> button above the input field to format your code, command line output or error message (select the text first, then click the button or wrap it in ``` manually). Check the preview if it looks better. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.
The problems are with two code parts: one post data after modification, second get data based on ID.
public onSaveClicked(): void {
let posturl = 'http://********/api/values';
let id = window.localStorage.getItem('id');
let postData = {
NFC_ID: id,
Name: this.dataObject.nfcDeviceName,
Users: this.dataObject.currentUser,
LogTime: this.dataObject.logTime,
Status: this.dataObject.systemStatus,
Description: this.dataObject.itemDescription,
ProblemDescription: this.dataObject.problemDescription
}
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post(posturl, postData, options)
.map(res => res.json())
.catch((error: any) => Observable.throw(error.json().error || 'Server error'))
.subscribe(data => {
console.log('my data: ', data);
});
let toast = this.toastCtrl.create({
message: 'The changes have been saved!',
duration: 4000,
position: 'top'
});
toast.present();
}
The second part is:
public onSaveClicked(): void {
let posturl = 'http://************/api/values';
let id = window.localStorage.getItem('id');
let postData = {
NFC_ID: id,
Name: this.dataObject.nfcDeviceName,
Users: this.dataObject.currentUser,
LogTime: this.dataObject.logTime,
Status: this.dataObject.systemStatus,
Description: this.dataObject.itemDescription,
ProblemDescription: this.dataObject.problemDescription
}
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post(posturl, postData, options)
.map(res => res.json())
.catch((error: any) => Observable.throw(error.json().error || 'Server error'))
.subscribe(data => {
console.log('my data: ', data);
});
let toast = this.toastCtrl.create({
message: 'The changes have been saved!',
duration: 4000,
position: 'top'
});
toast.present();
}
Please have a look to the picture below for the angular that Ionic support.
I hope I answered your questions.
Please let me know if you have a solution idea
Hi Sujan12, I think I answered you above. Could you please try to give me a solution?
Your question has absolutely nothing to do with Ionic Native and the NFC plugin, right? It is just about sending some random data to a server?
If so, please just open a new topic in the correct “ionic” category and include all the necessary information. And please format your code properly, you again posted it as a comment.
Hi
No, it is not like this. My app read NFC tags. The tag will be checked if it is already existed in the DB or not. If yes, then the data will be shown in the fields below. Otherwise, the new NFC tag will be added automatically to DB.
NFC plugin is the most important part in my app.
Therefore, I did two pages, one is to modify the stored data in DB by reading it directly, second is to read NFC tags using NFC listener in Constructor and show the data directly after check the ID if it is existed in DB.
That may well be - but your problem has nothing to do with NFC or the Ionic Native NFC plugin.
You are trying to send some data to a remote endpoint and this is not working. This is a pure Ionic/Angular problem. NFC is not relevant here.
So, do you think that I should setup a pure angular app to avoid this problem.
Also, why this problem is only with Windows not Android?
What? I never said that.
This whole topic was focused on NFC. Your problem has nothing to do with NFC. Just create a new topic and ask your question again. Leave the NFC stuff out, include your ionic info and code from the beginning.
Trying to collect the interesting bits here is now almost impossible and I won’t do it. Create a new topic and post its URL here, then I will have another look.
I don’t know yet as we haven’t really looked at the real problem yet. We can do that in a new topic.
