KĀ IZVEIDOT REĀLLAIKA ATRAŠANĀS VIETAS IZSEKOŠANAS LIETOTNES, IZMANTOJOT REACT NATIVE

Tā kā arvien vairāk tiek izmantotas mobilās lietotnes, lielākajā daļā lietotņu var atrast ģeogrāfiskās atrašanās vietas noteikšanas un izsekošanas funkcijas. Ģeogrāfiskās atrašanās vietas noteikšanai reāllaikā ir svarīga loma daudzos pakalpojumos pēc pieprasījuma, piemēram:

taksometru pakalpojumi, piemēram, Uber, Lyft vai Ola
pārtikas piegādes pakalpojumi, piemēram, Uber Eats, Foodpanda vai Zomato
dronu flotu uzraudzība

Šajā rokasgrāmatā mēs izmantosim React Native uz izveidot reāllaika atrašanās vietas izsekošanas lietotnes . Mēs uzbūvēsim divus React vietējās lietotnes . Viens darbosies kā izsekošanas lietotne (saukta par Izsekošanas lietotne ), un otrs tiks izsekots ( Trackee lietotne ).

Priekšnosacījumi

Šī apmācība prasa pamatzināšanas par React Native . Lai iestatītu savu izstrādes mašīnu, izpildiet oficiālo rokasgrāmatu šeit .

Neatkarīgi no React Native , mēs arī izmantosim PubNub , trešās puses pakalpojums, kas nodrošina reāllaika datu pārsūtīšanu un atjaunināšanu. Mēs izmantosim šo pakalpojumu, lai reāllaikā atjauninātu lietotāju koordinātas.

Reģistrējieties bez maksas PubNub konts šeit .

Tā kā mēs izmantosim Google Maps operētājsistēmā Android, mums būs nepieciešama arī Google Maps API atslēgu, kuru varat iegūt vietnē Google kartes Iegūstiet API atslēgu lappuse.

Lai pārliecinātos, ka atrodamies vienā lapā, šajā apmācībā izmantotās versijas:

Mezgls v10.15.0
virs jūras līmeņa 6.4.1
dzija 1.16.0
reaģēt-dzimtā 0.59.9
reaģēt-dzimtās-kartes 0.24.2
pubnub-reage 1.2.0

Darba sākšana

Ja vēlaties apskatīt mūsu avota kodu Sekotājs un Trackee lietotnes tūlīt, šeit ir viņu GitHub saites:

Vispirms sāksim ar lietotni Trackee.

Trackee lietotne

Lai izveidotu jaunu projektu, izmantojot | _+_ |, ievadiet šo terminālī:

react-native-cli $ react-native init trackeeApp

Tagad pievērsīsimies jautrajai daļai - kodēšanai.

Pievienojiet React vietējās kartes

Tā kā savā lietotnē izmantosim Maps, mums būs nepieciešama bibliotēka. Mēs izmantosim reaģēt-dzimtā-kartes .

Instalēt | _+_ | izpildot uzstādīšanas norādījumus šeit .

Pievienojiet PubNub

Papildus kartēm mēs arī instalēsim PubNub React SDK lai pārsūtītu mūsu datus reālā laikā:

$ cd trackeeApp

Pēc tam jūs varat palaist lietotni:

kur es varu nopirkt Celsija kriptovalūtu

react-native-maps

Jūsu simulatorā/emulatorā vajadzētu redzēt kaut ko līdzīgu:

Trackee lietotne

Trackee kods

Tagad atveriet | _+_ | failu un šādu importu:

$ yarn add pubnub-react

Neatkarīgi no MapView, kas padarīs karti mūsu komponentā, mēs esam importējuši | _+_ | un | _+_ | no | _+_ |.

| _+_ | identificē atrašanās vietu kartē. Mēs to izmantosim, lai identificētu lietotāja atrašanās vietu kartē.

| _+_ | ļauj mums izmantot animēto API, lai kontrolētu kartes centru un tālummaiņu.

Pēc nepieciešamā komponenta importēšanas mēs definēsim dažas konstantes un sākotnējās vērtības mūsu kartēm:

$ react-native run-ios $ react-native run-android

Pēc tam mēs definēsim savu klases komponentu, izmantojot dažus stāvokļus, dzīves cikla metodes un pielāgotas palīga metodes:

App.js

Vau! Tas ir daudz koda, tāpēc ejam pa to pamazām.

Pirmkārt, esam inicializējuši kādu vietējo valsti mūsu | _+_ |. Mēs arī inicializēsim PubNub gadījumu:

import React from 'react'; import { StyleSheet, View, Platform, Dimensions, SafeAreaView } from 'react-native'; import MapView, { Marker, AnimatedRegion } from 'react-native-maps'; import PubNubReact from 'pubnub-react';

Jums būs jāaizstāj X ar savu PubNub publicēt un abonēt atslēgas. Lai saņemtu atslēgas, piesakieties savā PubNub kontu un dodieties uz informācijas paneli.

e-pasta ceļa skrējēja pieteikšanās

Jūs atradīsit a Demo projekts lietotne jau ir pieejama tur. Jūs varat brīvi izveidot jaunu lietotni, taču šajā apmācībā mēs to izmantosim Demo projekts.

Kopējiet un ielīmējiet atslēgas PubNub konstruktora instancē.

Pēc tam mēs izmantosim | _+_ | Dzīves cikls lai izsauktu | _+_ | metode:

Marker

| _+_ | izmanto | _+_ | API, lai skatītos izmaiņas lietotāja atrašanās vietas koordinātās. Tātad katru reizi, kad lietotājs pārvietojas un mainās viņa atrašanās vietas koordinātas, | _+_ | atgriezīs lietotāja jaunās koordinātas.

| _+_ | pieņem divus parametrus - | _+_ | un | _+_ |.

Kā opcijas mēs iestatīsim | _+_ | līdz | _+_ | lai iegūtu augstu precizitāti, un | _+_ | līdz | _+_ | saņemt atjauninājumus tikai tad, ja atrašanās vieta ir mainījusies vismaz par desmit metriem. Ja vēlaties maksimālu precizitāti, izmantojiet | _+_ |, taču ņemiet vērā, ka tas izmantos vairāk joslas platuma un datu.

Laukā | _+_ | mēs iegūstam pozīcijas koordinātas, un mēs izmantojam šīs koordinātas, lai iestatītu vietējos stāvokļa mainīgos.

AnimatedRegion

Tagad, kad mums ir lietotāju koordinātas, mēs tās izmantosim, lai kartē pievienotu marķieri un pēc tam nepārtraukti atjauninātu šo marķieri, kad lietotāja koordinātas mainās ar savu atrašanās vietu.

Šim nolūkam mēs izmantosim | _+_ | par | _+_ | un | _+_ | operētājsistēmai iOS. Mēs paiesim garām objektam | _+_ | ar | _+_ | un | _+_ | kā parametrs šīm metodēm:

react-native-mas

Mēs arī vēlamies, lai lietotāja koordinātas tiktu nepārtraukti nosūtītas uz mūsu lietotni Tracker. Lai to panāktu, mēs izmantosim React's | _+_ | dzīves cikla metode:

Marker

| _+_ | tiek izsaukta tūlīt pēc atjaunināšanas. Tātad tas tiks izsaukts katru reizi, kad tiks mainītas lietotāja koordinātas.

Tālāk mēs izmantojām | _+_ | nosacījums publicēt koordinātas tikai tad, kad tiek mainīts platums.

Pēc tam mēs piezvanījām uz PubNub | _+_ | metode koordinātu publicēšanai kopā ar kanāla nosaukumu | _+_ | mēs vēlamies publicēt šīs koordinātas.

Piezīme: pārliecinieties, vai | _+_ | nosaukums ir vienāds abās lietotnēs. Pretējā gadījumā jūs nesaņemsit nekādus datus.

Tagad, kad esam pabeiguši visas nepieciešamās metodes, padarīsim mūsu | _+_ |. Pievienojiet šo kodu savam | _+_ | metode:

AnimatedRegion

Mēs izmantojām | _+_ |, kas kustēsies animēti, kad lietotāji pārvietojas un mainās viņu koordinātas.

const { width, height } = Dimensions.get('window'); const ASPECT_RATIO = width / height; const LATITUDE = 37.78825; const LONGITUDE = -122.4324; const LATITUDE_DELTA = 0.0922; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

Mēs arī notīrīsim visu | _+_ | skatīties metodi | _+_ | lai izvairītos no jebkādas atmiņas noplūdes.

Pabeigsim lietotni Trackee, pievienojot dažus stilus:

export default class App extends React.Component { constructor(props) { super(props); this.state = { latitude: LATITUDE, longitude: LONGITUDE, coordinate: new AnimatedRegion({ latitude: LATITUDE, longitude: LONGITUDE, latitudeDelta: 0, longitudeDelta: 0 }) }; this.pubnub = new PubNubReact({ publishKey: 'X', subscribeKey: 'X' }); this.pubnub.init(this); } componentDidMount() { this.watchLocation(); } componentDidUpdate(prevProps, prevState) { if (this.props.latitude !== prevState.latitude) { this.pubnub.publish({ message: { latitude: this.state.latitude, longitude: this.state.longitude }, channel: 'location' }); } } componentWillUnmount() { navigator.geolocation.clearWatch(this.watchID); } watchLocation = () => { const { coordinate } = this.state; this.watchID = navigator.geolocation.watchPosition( position => { const { latitude, longitude } = position.coords; const newCoordinate = { latitude, longitude }; if (Platform.OS === 'android') { if (this.marker) { this.marker._component.animateMarkerToCoordinate( newCoordinate, 500 // 500 is the duration to animate the marker ); } } else { coordinate.timing(newCoordinate).start(); } this.setState({ latitude, longitude }); }, error => console.log(error), { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 10 } ); }; getMapRegion = () => ({ latitude: this.state.latitude, longitude: this.state.longitude, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA }); render() { return ( { this.marker = marker; }} coordinate={this.state.coordinate} /> ); } } const styles = StyleSheet.create({ container: { ...StyleSheet.absoluteFillObject, justifyContent: 'flex-end', alignItems: 'center' }, map: { ...StyleSheet.absoluteFillObject } });

Tā kā mēs vēlamies, lai mūsu karte aptvertu visu ekrānu, mums jāizmanto absolūtā pozicionēšana un jāiestata katra puse uz nulli (| _+_ |).

| _+_ | nodrošina | _+_ | ko var izmantot ērtībai un šo atkārtoto stilu dublēšanās samazināšanai.

Palaižot lietotni Trackee

Pirms dodamies tālāk, vienmēr ir laba ideja pārbaudīt mūsu lietotni. Mēs to varam izdarīt, veicot šādas darbības.

Operētājsistēmā iOS

Ja izmantojat iOS simulatoru, jums veicas. Ir ļoti viegli pārbaudīt šo funkciju iOS, salīdzinot ar Android.

node js projektu idejas

IOS simulatora iestatījumos dodieties uz Atkļūdot > Atrašanās vieta > Automaģistrāles brauciens un atsvaidziniet savu lietotni (Cmd + R). Jums vajadzētu redzēt kaut ko līdzīgu šim:

Trackee lietotne

Android ierīcēs

Diemžēl operētājsistēmai Android nav vienkārša šīs funkcijas pārbaudes veida.

Jūs varat izmantot trešo pušu lietotnes, lai atdarinātu GPS atrašanās vietas lietotnes. ES atradu GPS kursorsvira būt lielai palīdzībai.

Varat arī izmantot Genomotion , kurai ir utilīta atrašanās vietas simulēšanai.

Pārbaude PubNub

Lai pārbaudītu, vai PubNub saņem datus, varat ieslēgt reāllaika analīzi, kas parādīs jūsu lietotnē saņemto vai sūtīto ziņojumu skaitu.

Tavā Atslēgas cilni, dodieties uz leju un ieslēdziet Reāllaika analīze . Pēc tam dodieties uz reāllaika analīzi, lai pārbaudītu, vai dati tiek saņemti.

[https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2019/09/1569380698realtime.mp4)(https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2019/09/1569380698realtime.mp4

Tas ir viss, kas jādara lietotnei Trackee, tāpēc pāriesim pie lietotnes Tracker.

Tracker lietotne

Veiciet tās pašas darbības, kuras mēs darījām lietotnei Trackee, un izveidojiet jaunu projektu React Native ar nosaukumu | _+_ |.

Gan Tracker, gan Trackee lietotnēm ir kopīgs kods.

Vienīgā atšķirība ir tā, ka | _+_ | mēs iegūsim atrašanās vietas koordinātas no | _+_ | izmantojot PubNub.

Pievienojiet | _+_ | SDK, importējiet un inicializējiet, kā mēs to darījām lietotnē Trackee.

firebase async/wait

Sadaļā | _+_ | pievienojiet šādu:

constructor()

Šeit ir atjaunināto ziņu maksimums kods lietotnei Tracker.

Iepriekš minētajā kodā mēs izmantojam PubNub | _+_ | metode abonēt mūsu | _+_ | kanālu, tiklīdz sastāvdaļa tiek uzstādīta.

Pēc tam mēs izmantojam | _+_ | lai saņemtu šajā kanālā saņemtās ziņas.

Mēs izmantosim šīs koordinātas, lai atjauninātu Tracker lietotnes MapView.

Tā kā abām lietotnēm ir viena un tā pati koordinātu kopa, mums vajadzētu redzēt Trackee lietotnes koordinātas lietotnē Tracker.

Abas lietotnes darbojas kopā

Beidzot esam pie pēdējā soļa. Izstrādes režīmā nav vienkārši pārbaudīt abas lietotnes vienā mašīnā.

Lai pārbaudītu abas lietotnes iOS ierīcē, es rīkošos šādi:

Mēs izmantosim lietotni Trackee iOS simulatorā, jo tam ir atkļūdošanas režīms, kurā es varu simulēt kustīgu transportlīdzekli. Es arī palaidīšu to izlaišanas režīmā, jo mums nevar darboties divas paketes vienlaikus:
constructor(props) { super(props); this.state = { latitude: LATITUDE, longitude: LONGITUDE, coordinate: new AnimatedRegion({ latitude: LATITUDE, longitude: LONGITUDE, latitudeDelta: 0, longitudeDelta: 0, }), }; // Initialize PubNub this.pubnub = new PubNubReact({ publishKey: 'X', subscribeKey: 'X', }); this.pubnub.init(this); }
Tagad dodieties uz Atkļūdot > Atrašanās vieta > Automaģistrāles brauciens .
Mēs palaidīsim lietotni Tracker Android emulatorā:
componentDidMount()

Lietotnei Tracker tagad vajadzētu redzēt | _+_ | pārvietojas tāpat kā lietotnē Trackee.

Abas lietotnes avota kodu varat atrast vietnē GitHub.

Secinājums

Šī ir tikai ļoti vienkārša reāllaika atrašanās vietas izsekošanas pakalpojumu ieviešana. Mēs tikai skrāpējam virsmu ar to, ko varam sasniegt ar atrašanās vietas izsekošanu. Patiesībā iespējas ir bezgalīgas. Piemēram:

Jūs varētu izveidot braukšanas pakalpojumu, piemēram, Uber, Lyft utt.
Izmantojot atrašanās vietas izsekošanu, varat izsekot vietējā pārdevēja pasūtījumiem, piemēram, pārtikai vai pārtikas precēm.
Jūs varētu izsekot savu bērnu atrašanās vietai (noderīgi vecākiem vai skolotājiem).
Jūs varētu izsekot dzīvniekus aizsargātā nacionālajā parkā.

#reaģēt-dzimtā #tīmekļa izstrāde

www.sitepoint.com