Planet Alpha

วิธีสร้างแอพติดตามตำแหน่งแบบเรียลไทม์ด้วย React Native

ลองใช้เครื่องมือของเราเพื่อกำจัดปัญหา

ด้วยการใช้งานแอพมือถือที่เพิ่มขึ้นเรื่อย ๆ ฟังก์ชันการระบุตำแหน่งทางภูมิศาสตร์และการติดตามสามารถพบได้ในแอพส่วนใหญ่ การติดตามตำแหน่งทางภูมิศาสตร์แบบเรียลไทม์มีบทบาทสำคัญในบริการตามความต้องการหลายอย่าง เช่น:



  • บริการแท็กซี่เช่น Uber, Lyft หรือ Ola
  • บริการส่งอาหาร เช่น Uber Eats, Foodpanda หรือ Zomato
  • ตรวจสอบกองยานของโดรน

ในคู่มือนี้ เราจะใช้ React Native ถึง สร้างแอพติดตามตำแหน่งแบบเรียลไทม์ . เราจะสร้างสอง ตอบโต้แอพเนทีฟ . หนึ่งจะทำหน้าที่เป็นแอพติดตาม (เรียกว่า แอพติดตาม ) และอีกอันจะเป็นคนที่ถูกติดตาม ( แอพ Trackee ).





ข้อกำหนดเบื้องต้น

บทช่วยสอนนี้ต้องการความรู้พื้นฐานของ React Native . ในการตั้งค่าเครื่องพัฒนาของคุณ ให้ทำตามคำแนะนำอย่างเป็นทางการ ที่นี่ .



นอกเหนือจาก React Native เราก็จะใช้ PubNub ซึ่งเป็นบริการของบุคคลที่สามที่ให้การถ่ายโอนและอัปเดตข้อมูลตามเวลาจริง เราจะใช้บริการนี้เพื่ออัปเดตพิกัดผู้ใช้แบบเรียลไทม์



ลงทะเบียนฟรี PubNub บัญชีผู้ใช้ ที่นี่ .





เนื่องจากเราจะใช้ Google Maps บน Android เราจึงจำเป็นต้องมี Google Maps API กุญแจซึ่งคุณสามารถรับได้ที่ Google Maps รับคีย์ API หน้าหนังสือ.

เพื่อให้แน่ใจว่าเราอยู่ในหน้าเดียวกัน นี่คือเวอร์ชันที่ใช้ในบทช่วยสอนนี้:

  • โหนด v10.15.0
  • เหนือระดับน้ำทะเล 6.4.1
  • เส้นด้าย 1.16.0
  • ตอบสนองพื้นเมือง 0.59.9
  • react-native-maps 0.24.2
  • pubnub-react 1.2.0

เริ่มต้น

หากคุณต้องการดูซอร์สโค้ดของเรา ตัวติดตาม และ แอพติดตาม นี่คือลิงก์ GitHub ของพวกเขาทันที:

เริ่มต้นด้วยแอป Trackee ก่อน

แอพ Trackee

ในการสร้างโครงการใหม่โดยใช้ |_+_| ให้พิมพ์สิ่งนี้ในเทอร์มินัล:

react-native-cli $ react-native init trackeeApp

มาถึงส่วนที่สนุกแล้ว - การเขียนโค้ด

เพิ่ม React Native Maps

เนื่องจากเราจะใช้ Maps ในแอปของเรา เราจึงจำเป็นต้องมีห้องสมุดสำหรับสิ่งนี้ เราจะใช้ react-native-maps .

ติดตั้ง |_+_| โดยปฏิบัติตามคำแนะนำในการติดตั้ง ที่นี่ .

เพิ่ม PubNub

นอกจากแผนที่แล้ว เรายังติดตั้ง PubNub React SDK เพื่อถ่ายโอนข้อมูลของเราแบบเรียลไทม์:

$ cd trackeeApp

หลังจากนั้น คุณสามารถเรียกใช้แอปได้:

วิธีการซื้อ trx tron
react-native-maps

คุณควรเห็นสิ่งนี้ในโปรแกรมจำลอง/โปรแกรมจำลองของคุณ:

แอพ Trackee

รหัสติดตาม

ตอนนี้เปิด |_+_| ไฟล์และการนำเข้าต่อไปนี้:

$ yarn add pubnub-react

นอกเหนือจาก MapView ที่จะแสดง Map ในองค์ประกอบของเราแล้ว เราได้นำเข้า |_+_| และ |_+_| จาก |_+_|.

|_+_| ระบุตำแหน่งบนแผนที่ เราจะใช้เพื่อระบุตำแหน่งของผู้ใช้บนแผนที่

|_+_| ช่วยให้เราใช้ Animated API เพื่อควบคุมศูนย์กลางของแผนที่และซูม

หลังจากนำเข้าองค์ประกอบที่จำเป็นแล้ว เราจะกำหนดค่าคงที่และค่าเริ่มต้นบางอย่างสำหรับแผนที่ของเรา:

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

จากนั้น เราจะกำหนดองค์ประกอบคลาสของเราด้วยสถานะ วิธีวงจรชีวิต และวิธีการช่วยเหลือแบบกำหนดเอง:

App.js

ว้าว! นั่นเป็นรหัสจำนวนมาก ดังนั้นเรามาทำความเข้าใจกันทีละนิด

ขั้นแรก เราได้เริ่มต้นสถานะท้องถิ่นบางส่วนใน |_+_| ของเรา เราจะเริ่มต้นอินสแตนซ์ PubNub ด้วย:

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';

คุณจะต้องแทนที่ X ด้วยของคุณเอง PubNub เผยแพร่และสมัครคีย์ หากต้องการรับกุญแจ ให้เข้าสู่ระบบของคุณ PubNub บัญชีและไปที่แดชบอร์ด

react-bootstrap offset

คุณจะพบกับ โครงการสาธิต มีแอพอยู่แล้ว คุณสามารถสร้างแอปใหม่ได้ฟรี แต่สำหรับบทช่วยสอนนี้ เราจะใช้สิ่งนี้ การสาธิต โครงการ.

คัดลอกและวางคีย์ในอินสแตนซ์ตัวสร้าง PubNub

หลังจากนั้น เราจะใช้ |_+_| วงจรชีวิต เพื่อเรียก |_+_| กระบวนการ:

Marker

|_+_| ใช้ |_+_| API เพื่อดูการเปลี่ยนแปลงในพิกัดตำแหน่งของผู้ใช้ ดังนั้นเมื่อใดก็ตามที่ผู้ใช้เคลื่อนที่และตำแหน่งของเขาเปลี่ยนแปลง |_+_| จะส่งคืนพิกัดใหม่ของผู้ใช้

|_+_| ยอมรับสองพารามิเตอร์—|_+_| และ |_+_|.

เราจะตั้งค่า |_+_| . เป็นตัวเลือก ถึง |_+_| เพื่อความแม่นยำสูง และ |_+_| ถึง |_+_| เพื่อรับการอัปเดตเฉพาะเมื่อสถานที่มีการเปลี่ยนแปลงในระยะทางอย่างน้อยสิบเมตร หากคุณต้องการความแม่นยำสูงสุด ให้ใช้ |_+_| แต่ระวังว่าจะใช้แบนด์วิธและข้อมูลมากขึ้น

ใน |_+_| เราได้รับตำแหน่งพิกัดและเราเรียกใช้พิกัดเหล่านี้เพื่อตั้งค่าตัวแปรสถานะท้องถิ่น

AnimatedRegion

ตอนนี้เรามีพิกัดผู้ใช้แล้ว เราจะใช้พวกมันเพื่อเพิ่มเครื่องหมายบนแผนที่ แล้วอัปเดตเครื่องหมายนั้นอย่างต่อเนื่องเมื่อพิกัดของผู้ใช้เปลี่ยนไปตามตำแหน่ง

สำหรับสิ่งนี้ เราจะใช้ |_+_| สำหรับ |_+_| และ |_+_| สำหรับ iOS เราจะผ่านวัตถุ |_+_| กับ |_+_| และ |_+_| เป็นพารามิเตอร์สำหรับวิธีการเหล่านี้:

react-native-mas

นอกจากนี้เรายังต้องการให้ส่งพิกัดของผู้ใช้ไปยังแอป Tracker ของเราอย่างต่อเนื่อง เพื่อให้บรรลุสิ่งนี้ เราจะใช้ |_+_| . ของ React วิธีวงจรชีวิต:

Marker

|_+_| จะถูกเรียกใช้ทันทีหลังจากการอัพเดตเกิดขึ้น ดังนั้นระบบจะเรียกทุกครั้งที่เปลี่ยนพิกัดของผู้ใช้

เราใช้ |_+_| . ต่อไป เงื่อนไขในการเผยแพร่พิกัดเฉพาะเมื่อละติจูดมีการเปลี่ยนแปลง

เราก็เรียก PubNub |_+_| วิธีเผยแพร่พิกัดพร้อมกับชื่อช่อง |_+_| เราต้องการเผยแพร่พิกัดเหล่านั้น

หมายเหตุ: ตรวจสอบให้แน่ใจว่า |_+_| ชื่อเหมือนกันในทั้งสองแอพ มิฉะนั้น คุณจะไม่ได้รับข้อมูลใดๆ

เมื่อเราทำตามวิธีการที่จำเป็นทั้งหมดเสร็จแล้ว มาเรนเดอร์ |_+_| ของเรากัน เพิ่มรหัสนี้ใน |_+_| . ของคุณ กระบวนการ:

AnimatedRegion

เราใช้ |_+_| ซึ่งจะเคลื่อนไหวในลักษณะเคลื่อนไหวเมื่อผู้ใช้เคลื่อนที่และพิกัดของพวกเขาเปลี่ยนไป

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;

เราจะเคลียร์ทั้งหมด |_+_| วิธีดูใน |_+_| เพื่อหลีกเลี่ยงการรั่วไหลของหน่วยความจำ

มาปิดท้ายแอพ Trackee โดยเพิ่มสไตล์:

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 } });

เนื่องจากเราต้องการให้แผนที่ของเราครอบคลุมทั้งหน้าจอ เราจึงต้องใช้ตำแหน่งที่แน่นอนและตั้งค่าแต่ละด้านให้เป็นศูนย์ (|_+_|)

|_+_| ให้ |_+_| ที่สามารถใช้เพื่อความสะดวกและลดความซ้ำซ้อนของรูปแบบซ้ำๆ เหล่านี้

เรียกใช้แอพ Trackee

ก่อนที่เราจะดำเนินการต่อ คุณควรทดสอบแอปของเราเสมอ เราสามารถทำได้โดยทำตามขั้นตอนต่อไปนี้

บน iOS

หากคุณกำลังใช้โปรแกรมจำลอง iOS แสดงว่าคุณโชคดี การทดสอบคุณลักษณะนี้ใน iOS นั้นง่ายมากเมื่อเทียบกับ Android

เทมเพลตผลงาน js ถัดไป

ในการตั้งค่าตัวจำลอง iOS ของคุณ ไปที่ ดีบัก > ที่ตั้ง > ทางด่วนไดรฟ์ และรีเฟรชแอปของคุณ (Cmd + R) คุณควรเห็นสิ่งนี้:

แอพ Trackee

บน Android

น่าเสียดายสำหรับ Android ไม่มีวิธีทดสอบฟีเจอร์นี้อย่างตรงไปตรงมา

คุณสามารถใช้แอปของบริษัทอื่นเพื่อเลียนแบบแอประบุตำแหน่ง GPS ฉันพบ จอยสติ๊ก GPS ที่จะช่วยได้มาก

คุณสามารถใช้ Genymotion ซึ่งมีประโยชน์สำหรับการจำลองสถานที่

การทดสอบกับ PubNub

หากต้องการทดสอบว่า PubNub ได้รับข้อมูลหรือไม่ คุณสามารถเปิด Analytics แบบเรียลไทม์ ซึ่งจะแสดงจำนวนข้อความที่แอปของคุณได้รับหรือส่ง

ในของคุณ กุญแจ ไปที่ด้านล่างแล้วเปิด การวิเคราะห์ตามเวลาจริง . จากนั้นไปที่ Real-time Analytics เพื่อตรวจสอบว่าได้รับข้อมูลหรือไม่

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

นี่คือทั้งหมดที่แอป Trackee ต้องทำ ไปที่แอป Tracker กัน

แอพติดตาม

ทำตามขั้นตอนเดียวกับที่เราทำกับแอป Trackee และสร้างโครงการ React Native ใหม่ที่ชื่อ |_+_|

ทั้งแอป Tracker และ Trackee แชร์โค้ดส่วนใหญ่

ข้อแตกต่างเพียงอย่างเดียวคือใน |_+_| เราจะได้พิกัดตำแหน่งจาก |_+_| ผ่าน PubNub

เพิ่ม |_+_| SDK นำเข้าและเริ่มต้นเหมือนที่เราทำในแอป Trackee

js ส่งคืนค่าหลายค่า

ใน |_+_| ให้เพิ่มสิ่งต่อไปนี้:

constructor()

นี่คือสเป็คพีคของการอัพเดท รหัส สำหรับแอปติดตาม

ในโค้ดด้านบน เราใช้ |_+_| . ของ PubNub วิธีการสมัครสมาชิก |_+_| . ของเรา ช่องสัญญาณทันทีที่ส่วนประกอบได้รับการติดตั้ง

หลังจากนั้นเราใช้ |_+_| เพื่อรับข้อความที่ได้รับในช่องนั้น

เราจะใช้พิกัดเหล่านี้ในการอัปเดต MapView ของแอป Tracker

เนื่องจากทั้งสองแอปใช้พิกัดชุดเดียวกัน เราจึงควรสามารถเห็นพิกัดของแอป Trackee ในแอป Tracker ได้

ใช้งานทั้งสองแอพพร้อมกัน

ในที่สุดเราก็อยู่ในขั้นตอนสุดท้าย การทดสอบทั้งสองแอปบนเครื่องเดียวกันภายใต้โหมดการพัฒนาไม่ใช่เรื่องง่าย

ในการทดสอบทั้งสองแอปบนเครื่อง iOS ฉันจะทำตามขั้นตอนเหล่านี้:

  1. เราจะเรียกใช้แอป Trackee บนเครื่องจำลอง iOS เนื่องจากมีโหมดดีบักซึ่งฉันสามารถจำลองยานพาหนะที่กำลังเคลื่อนที่ได้ ฉันจะรันมันในโหมดรีลีสด้วย เนื่องจากเราไม่สามารถให้สองแพ็คเกจทำงานพร้อมกันได้:

    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); }

    ตอนนี้ไปที่ ดีบัก > ที่ตั้ง > ทางด่วนไดรฟ์ .

  2. เราจะเรียกใช้แอป Tracker บนโปรแกรมจำลอง Android:

    componentDidMount()

ตอนนี้แอป Tracker ควรจะสามารถเห็น |_+_| เคลื่อนไหวเหมือนในแอป Trackee

คุณสามารถค้นหาซอร์สโค้ดสำหรับทั้งสองแอพได้ที่ GitHub

บทสรุป

นี่เป็นเพียงการใช้งานบริการติดตามตำแหน่งแบบเรียลไทม์ขั้นพื้นฐานเท่านั้น เราแค่เกาพื้นผิวด้วยสิ่งที่เราสามารถทำได้ด้วยการติดตามตำแหน่ง ในความเป็นจริง ความเป็นไปได้ไม่มีที่สิ้นสุด ตัวอย่างเช่น:

  • คุณสามารถสร้างบริการเรียกรถเช่น Uber, Lyft เป็นต้น
  • เมื่อใช้การติดตามตำแหน่ง คุณสามารถติดตามคำสั่งซื้อของคุณ เช่น อาหารหรือของชำจากผู้ขายในพื้นที่
  • คุณสามารถติดตามตำแหน่งของบุตรหลานของคุณ (มีประโยชน์สำหรับผู้ปกครองหรือครู)
  • คุณสามารถติดตามสัตว์ในอุทยานแห่งชาติที่ได้รับการคุ้มครอง

#react-native #เว็บพัฒนา

www.sitepoint.com

วิธีสร้างแอพติดตามตำแหน่งแบบเรียลไทม์ด้วย React Native

ในคู่มือนี้ เราจะใช้ React Native เพื่อสร้างแอปติดตามตำแหน่งแบบเรียลไทม์ เราจะสร้างแอป React Native สองแอป แอปหนึ่งจะทำหน้าที่เป็นแอปติดตาม (เรียกว่าแอปติดตาม) และอีกแอปหนึ่งจะเป็นแอปที่ติดตาม (แอป Trackee)





โพสต์ยอดนิยม

บทความที่น่าสนใจ

ตัวเลือกของบรรณาธิการ