[英]Ionic 5 React Capacitor / Cordova cordova-plugin-uid
I am new in Ionic and React.我是 Ionic 和 React 的新手。 I am trying to build component what is tracking GPS coordinates of device and send them via AJAX to the backend API.
我正在尝试构建组件来跟踪设备的 GPS 坐标,并通过 AJAX 将它们发送到后端 API。 I was able to develop the tracking including sending data to API but I dont know how to initiate and display / store device UID.
我能够开发跟踪,包括向 API 发送数据,但我不知道如何启动和显示/存储设备 UID。
I did follow a guide here https://ionicframework.com/docs/native/unique-device-id but there is no info how to initiate plugin in React, always only in Angular.我确实遵循了此处的指南https://ionicframework.com/docs/native/unique-device-id但没有信息如何在 React 中启动插件,始终仅在 Angular 中。
Here is the code:这是代码:
import React from "react";
import { stopwatchOutline, play, stop } from "ionicons/icons";
import {
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonContent,
IonIcon,
IonGrid,
IonRow,
IonCol,
IonButton,
} from "@ionic/react";
import { UniqueDeviceID } from '@ionic-native/unique-device-id/ngx';
type State = {
intervalID: number;
latitude: number;
longitude: number;
trackingEnabled: boolean;
counter: number;
device_id: string;
};
class GPS extends React.Component<any, State> {
constructor(props: any) {
super(props);
this.state = {
intervalID: 0,
latitude: 0,
longitude: 0,
trackingEnabled: false,
counter: 0,
device_id: '',
};
}
startTracking = () => {
this.setState({ trackingEnabled: true });
const intervalID = window.setInterval(() => {
navigator.geolocation.getCurrentPosition((position) => {
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;
if (latitude > 0 && longitude > 0) {
if (
latitude !== this.state.latitude &&
longitude !== this.state.longitude
) {
fetch("http://xyz", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
device_id: 123456,
lat: latitude,
lng: longitude,
}),
})
.then(async (response) => {
const data = await response.json();
if (!response.ok) {
const error = (data && data.message) || response.status;
return Promise.reject(error);
}
console.log(data);
})
.catch((error) => {
console.error("There was an error!", error);
});
} else {
console.log(
"lat: " + latitude + ", lng: " + longitude + " are without change"
);
}
}
this.setState({ latitude: latitude, longitude: longitude, counter: this.state.counter+1 });
console.log("lat: " + latitude + ", lng: " + longitude, " counter: " + this.state.counter);
if(this.state.counter > 10) {
this.setState({ trackingEnabled: false });
window.clearInterval(this.state.intervalID);
console.log("stop after thousands call");
}
});
}, 2000);
this.setState({ intervalID: intervalID });
console.log("start");
};
stopTracking = () => {
this.setState({ trackingEnabled: false });
window.clearInterval(this.state.intervalID);
console.log("stop");
};
render() {
return (
<IonPage>
<IonHeader>
<IonToolbar color="primary">
<IonTitle>
<IonIcon icon={stopwatchOutline} /> GPS tracker
</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonGrid>
<IonRow>
<IonCol>
<h3>lat: {this.state.latitude}</h3>
<h3>lng: {this.state.longitude}</h3>
<h3>Device ID: {this.state.device_id}</h3>
</IonCol>
</IonRow>
<IonRow>
<IonCol>
<IonButton
id="start_tracking"
color="primary"
expand="block"
strong={true}
size="large"
disabled={this.state.trackingEnabled}
onClick={this.startTracking}
>
<IonIcon icon={play} /> Start
</IonButton>
</IonCol>
<IonCol>
<IonButton
id="stop_tracking"
color="light"
expand="block"
size="large"
disabled={!this.state.trackingEnabled}
onClick={this.stopTracking}
>
<IonIcon icon={stop} /> Stop
</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
}
}
export default GPS;
In documentation is written this (for Angular):在文档中是这样写的(对于 Angular):
import { UniqueDeviceID } from '@ionic-native/unique-device-id/ngx';
constructor(private uniqueDeviceID: UniqueDeviceID) { }
...
this.uniqueDeviceID.get()
.then((uuid: any) => console.log(uuid))
.catch((error: any) => console.log(error));
But I have no idea how to do it in React in my class.但我不知道如何在我的 class 中的 React 中做到这一点。 I spent 2 days with Googling and trying everything what I found but still no solution.
我用谷歌搜索了 2 天,尝试了我发现的所有东西,但仍然没有解决方案。
Thank you.谢谢你。
from the example here in documentation - https://ionicframework.com/docs/native/community#react来自文档中的示例 - https://ionicframework.com/docs/native/community#react
install安装
npm install @ionic-native/core
npm install cordova-plugin-uniquedeviceid
npm install @ionic-native/unique-device-id
ionic cap sync
import { UniqueDeviceID } from '@ionic-native/unique-device-id'
And then you just use it in your component然后你只需在你的组件中使用它
const uid = await UniqueDeviceID.get()
Ok, I did try it but does not work.好的,我确实尝试过,但不起作用。 Here is the error message:
这是错误消息:
SyntaxError: F:\hybrid-app-development\job\sportis\gps-tracking\src\pages\GPS.tsx: Unexpected token, expected ";" (40:22)
[react-scripts] 38 | };
[react-scripts] 39 |
[react-scripts] > 40 | const uid = await UniqueDeviceID.get();
[react-scripts] | ^
[react-scripts] 41 | }
[react-scripts] 42 |
[react-scripts] 43 | startTracking = () => {
And here is list of dependecies (so plugins should be installed):这是依赖项列表(因此应安装插件):
{
"@capacitor/core": "2.4.5",
"@ionic-native/android-permissions": "^5.30.0",
"@ionic-native/core": "^5.30.0",
"@ionic-native/location-accuracy": "^5.30.0",
"@ionic-native/unique-device-id": "^5.30.0",
"@ionic/react": "^5.0.7",
"@ionic/react-router": "^5.0.7",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^8.0.3",
"@types/jest": "^24.0.25",
"@types/node": "^12.12.24",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@types/react-router": "^5.1.4",
"@types/react-router-dom": "^5.1.3",
"cordova-plugin-android-permissions": "^1.1.2",
"cordova-plugin-request-location-accuracy": "^2.3.0",
"cordova-plugin-uniquedeviceid": "^1.3.2",
"ionicons": "^5.0.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.4",
"react-useinterval": "^1.0.2",
"typescript": "3.8.3"
}
and here is a updated constuctor what returns that error:这是一个更新的构造函数,它返回该错误:
constructor(props: any) {
super(props);
this.state = {
intervalID: 0,
latitude: 0,
longitude: 0,
trackingEnabled: false,
counter: 0,
device_id: '',
};
const uid = await UniqueDeviceID.get();
}
I tried to put:我试着说:
const uid = await UniqueDeviceID.get();
To the "startTracking" method but same problem.到“startTracking”方法但同样的问题。
Any different suggestions?有什么不同的建议吗?
Thank you very much!非常感谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.