วิธีสร้างแอประบุตำแหน่ง? คู่มือทีละขั้นตอน.

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

ในบทความนี้ เราจะสอนคุณทุกสิ่งที่คุณต้องรู้เกี่ยวกับแอปภูมิศาสตร์ เราจะพูดถึงคุณสมบัติหลักของพวกมัน ชนิดของแอปภูมิศาสตร์ และอธิบายกระบวนการสร้าง Geoapp จากมุมมองของธุรกิจ นอกจากนี้ เรายังจะแนะนำคุณผ่านกระบวนการพัฒนาแอปภูมิศาสตร์โดยใช้ Back4app และ React Native.

แอปภูมิศาสตร์คืออะไร?

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

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

• ระบบระบุตำแหน่งโลก (GPS)
• ระบบระบุตำแหน่งโลกที่ช่วยเหลือ (A-GPS)
• เทคโนโลยีภูมิศาสตร์ในร่ม
• หอคอยเซลล์หรือ WiFi

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

คุณสมบัติหลักของแอปที่ใช้ตำแหน่งที่ตั้ง

แอปภูมิศาสตร์มีความแตกต่างกันมากในเรื่องคุณสมบัติ แต่ส่วนใหญ่รวมคุณสมบัติภูมิศาสตร์เหล่านี้ไว้:

• มุมมองแผนที่: มุมมองแผนที่เป็นฟีเจอร์หลักของแอปภูมิศาสตร์ มันให้ผู้ใช้เห็นตำแหน่งปัจจุบันและจุดสนใจในรูปแบบภาพ ช่วยให้ผู้ใช้สำรวจพื้นที่ ค้นหาทิศทาง และทำการค้นหาทางภูมิศาสตร์
• การติดตามตำแหน่ง: แอปภูมิศาสตร์มักมีการติดตามตำแหน่งแบบเรียลไทม์ ทำให้ผู้ใช้สามารถแชร์ตำแหน่งกับผู้อื่นหรือเก็บติดตามการเคลื่อนไหวของตน
• การปรับแต่ง: แอปภูมิศาสตร์อาจมีฟีเจอร์การปรับแต่ง เช่น การบันทึกสถานที่โปรด การตั้งค่าความชอบสำหรับประเภทเส้นทาง (เช่น เดิน เที่ยวขับรถ) การตั้งค่าภาพ ฯลฯ
• การแจ้งเตือน: บางแอปภูมิศาสตร์ใช้ geofencing เพื่อส่งการแจ้งเตือนเมื่อผู้ใช้เข้าหรือออกจากพื้นที่ นอกจากนี้ ยังสามารถส่งการแจ้งเตือนเมื่อผู้ใช้อยู่ใกล้กิจกรรม เป็นต้น
• การผนวกรวมกับบริการอื่น: แอปภูมิศาสตร์จำนวนมากผนวกรวมกับบริการหรือแพลตฟอร์มของบุคคลที่ 3 เพื่อเพิ่มฟังก์ชันการทำงาน ตัวอย่างเช่น Google ผนวกรวมกับ Booking.com เพื่อให้ตัวเลือกโรงแรมและแพลตฟอร์มการเดินทางเพื่อดึงข้อมูลการขนส่งสาธารณะ

ประเภทของแอปที่ใช้ตำแหน่งที่ตั้ง

มีประเภทของแอปที่ใช้ตำแหน่งที่ตั้งมากมาย แต่เรามาดูบางประเภทหลักกัน

แอปนำทาง

แอปนำทางเป็นตัวอย่างที่ชัดเจนที่สุดของแอปภูมิศาสตร์ โดยทั่วไปมีมุมมองแผนที่เป็นศูนย์กลางและให้ฟีเจอร์เช่น การติดตามตำแหน่ง การค้นหาธุรกิจใกล้เคียง การทำ geo queries และการให้ทิศทางการขับรถ

ตัวอย่าง: Google Maps, Waze, Sygic GPS.

แอปตามคำสั่ง

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

ตัวอย่าง: Uber, Uber Eats, Lyft.

เครือข่ายสังคมและแอปหาคู่

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

ตัวอย่าง: Facebook, Instagram, Tinder.

แอปท่องเที่ยว

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

ตัวอย่าง: Airbnb, Booking, Eventbrite.

แอปออกกำลังกาย

แอปออกกำลังกายส่วนใหญ่ โดยเฉพาะแอปวิ่ง มีการติดตามตำแหน่งในตัว การติดตามตำแหน่งช่วยให้สามารถติดตามเส้นทางของผู้ใช้ คำนวณระยะทางเส้นทาง ความเร็วเฉลี่ยในการวิ่ง ความแตกต่างของความสูง และอื่น ๆ

ตัวอย่าง: Strava, GoogleFit, RunKeeper.

กระบวนการสร้างแอปภูมิศาสตร์

การสร้างแอปมือถือที่ใช้ตำแหน่งที่ตั้งอาจเป็นงานที่ยากลำบาก แต่ไม่ต้องกังวล! ด้วยขั้นตอนต่อไปนี้ คุณจะอยู่ในเส้นทางที่ดีในการสร้างแอปภูมิศาสตร์ที่ยอดเยี่ยม

ขั้นตอนที่ 1: กำหนดวัตถุประสงค์ของแอปภูมิศาสตร์

ขั้นตอนแรกในการสร้างแอปภูมิศาสตร์คือการกำหนดวัตถุประสงค์และคุณสมบัติหลักของแอป ถามตัวเองว่าแอปของคุณจะแก้ปัญหาอะไรและกลุ่มเป้าหมายคือใคร

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

ขั้นตอนที่ 2: เลือกเทคโนโลยี

ส่วนสำคัญในการพัฒนาแอปภูมิศาสตร์ที่ดีคือการเลือกสแต็กเทคโนโลยีที่เหมาะสม แอปของคุณน่าจะถูกแบ่งออกเป็น backend และ frontend

เมื่อเลือกเครื่องมือ backend คิดเกี่ยวกับประเภทข้อมูลที่คุณจะเก็บ เก็บข้อมูลที่ไหน เป็นต้น ในทางตรงกันข้าม เมื่อเลือกเทคโนโลยี frontend เลือกเทคโนโลยีที่ช่วยให้คุณสร้างแอปที่ตอบสนองและออกแบบอย่างงดงาม

นอกจากนี้ คุณจะต้องมี geolocation API เมื่อเลือก geolocation API ให้พิจารณาตัวเลือกต่าง ๆ เช่น Google Maps, OpenStreetMap, และ MapBox ให้แน่ใจว่าเลือก geolocation API ที่เหมาะสมที่สุดสำหรับประเภทแอปของคุณ

ขั้นตอนที่ 3: ออกแบบแอป

ขั้นตอนนี้เป็นขั้นตอนที่สำคัญที่สุดจากมุมมองของผู้ใช้ เมื่อออกแบบแอปของคุณ ให้แน่ใจว่าแอปมีความน่าสนใจ ใช้งานง่าย และมีฟีเจอร์เพียงพอ ปฏิบัติตามแนวทาง UI/UX ที่ดีและพิจารณาว่าผู้ใช้จะใช้แอปที่ใช้ตำแหน่งที่ตั้งของคุณอย่างไร

ขั้นตอนที่ 4: สร้าง MVP

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

ขั้นตอนที่ 5: เวอร์ชันเต็มและการปล่อย

ขั้นตอนสุดท้ายที่คุณต้องทำคือสร้างแอปเวอร์ชันเต็ม ตรวจสอบ backlog ของโครงการและดำเนินการฟีเจอร์ที่สำคัญอื่น ๆ แก้ไขบักทั้งหมดและปล่อยแอปที่ใช้ตำแหน่งที่ตั้งของคุณ

หลังจากปล่อยแอปแล้ว คุณจะต้องบำรุงรักษาแอปของคุณ API ภูมิศาสตร์อาจเปลี่ยนแปลงตามเวลา คุณจะต้องเพิ่มการสนับสนุนสำหรับระบบปฏิบัติการใหม่ ๆ แก้ไขบัก เพิ่มฟีเจอร์ใหม่ ฯลฯ

วิธีการพัฒนาแอปภูมิศาสตร์?

ในส่วนนี้ของบทความ เราจะดูวิธีการสร้างแอปภูมิศาสตร์โดยใช้ Back4app และ React Native กับ Expo.

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

• มีประสบการณ์กับ JavaScript โดยเฉพาะ ES6
• เข้าใจพื้นฐานของ React Native (และ Expo)
• ติดตั้ง IDE สำหรับ JavaScript บนเครื่องคอมพิวเตอร์ของคุณ
• มีอีมูเลเตอร์ Android หรืออุปกรณ์ Android จริง

Back4app คืออะไร?

Back4app เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้างแอปพลิเคชันสมัยใหม่ได้อย่างรวดเร็วโดยไม่ต้องมีทักษะการเขียนโค้ดขั้นสูง แพลตฟอร์มนี้มาพร้อมกับคุณสมบัติที่เป็นประโยชน์มากมาย เช่น การจัดการผู้ใช้ การยืนยันตัวตน ฐานข้อมูลเรียลไทม์ ฟังก์ชัน Cloud Code การผนวกรวมสังคม APIs และอื่น ๆ อีกมากมาย

ด้วย Back4app คุณสามารถมุ่งเน้นไปที่ส่วนที่สำคัญของแอป เช่น ฟังก์ชันหลักและการออกแบบ โดยไม่ต้องกังวลเกี่ยวกับ backend หรือโครงสร้างพื้นฐานที่ซับซ้อน

ดีที่สุดคือ Back4app มีแผนฟรีสำหรับการทดสอบและลองใช้งาน เมื่อแอปของคุณเติบโต คุณสามารถอัพเกรดไปยังแผนพรีเมียมที่มีการกำหนดราคาอย่างโปร่งใสและคาดการณ์ได้

ภาพรวมโครงการ

เพื่อแสดงให้เห็นถึงพลังของ Back4app เราจะสร้างแอปภูมิศาสตร์ที่เรียบง่าย แอปนี้จะอนุญาตให้ผู้ใช้ดูแผนที่ ดูสถานที่ที่เก็บไว้ในฐานข้อมูล และทำการค้นหาทางภูมิศาสตร์ ค้นหา geo จะรวมถึงการจัดเรียงสถานที่ตามระยะทาง ค้นหาสถานที่ภายในระยะทาง เป็นต้น ส่วน backend ของแอปจะถูกจัดการโดย Back4app และเราจะใช้ React Native และ Google Maps บน frontend

สร้างแอป Back4app

ขั้นตอนต่อไปจะต้องคุณมีบัญชี Back4app หากคุณยังไม่มี ให้สมัคร ฟรี!

เมื่อคุณล็อกอิน คุณจะถูกเปลี่ยนเส้นทางไปยังรายการแอปของคุณ เพื่อสร้างแอปใหม่ ให้คลิก “Build new app”

Back4app อนุญาตให้เราปล่อยแอปสองประเภท:

1. Backend as a Service (BaaS) — โซลูชัน backend ที่สมบูรณ์แบบ, หรือ
2. Containers as a Service (CaaS) — แพลตฟอร์มสำหรับการปล่อยซอฟต์แวร์ที่บรรจุอยู่ในคอนเทนเนอร์

เนื่องจากเรากำลังสร้างแอปภูมิศาสตร์ เราจะเลือก “Backend as a Service”

ต่อไป ให้ตั้งชื่อแอปของคุณอย่างสวยงาม เลือก “NoSQL” เป็นฐานข้อมูล และคลิก “Create”

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

สร้าง Database Classes

ต่อไปเราจำเป็นต้องดูแลฐานข้อมูล

ตามที่กล่าวไว้ในบทนำโครงการ เราต้องการเก็บสถานที่ในฐานข้อมูลและแสดงพวกมันบนแผนที่ เราจะต้องสร้าง class ใหม่ในฐานข้อมูลเพื่อเก็บสถานที่เหล่านี้

ไปสร้าง class ใหม่โดยคลิกที่ปุ่ม “Create a class” ตั้งชื่อเป็น Place เปิดใช้งาน “Public Read and Write” และคลิก “Create class & add columns”

ต่อไป ให้เพิ่มสามคอลัมน์ต่อไปนี้:

+-------------+-------------+--------------------+----------+
| Data type   | Name        | Default value      | Required |
+-------------+-------------+--------------------+----------+
| String      | name        | <ปล่อยว่าง>      | yes      |
+-------------+-------------+--------------------+----------+
| String      | description | <ปล่อยว่าง>      | no       |
+-------------+-------------+--------------------+----------+
| GeoPoint    | location    | <ปล่อยว่าง>      | yes      |
+-------------+-------------+--------------------+----------+

เมื่อคุณสร้าง class แล้ว ให้เพิ่มสถานที่ตัวอย่างบางแห่งในฐานข้อมูล ตัวอย่าง:

อีกทางเลือกหนึ่ง คุณสามารถนำเข้า การส่งออกฐานข้อมูลรัฐของสหรัฐ เพื่อทำการนำเข้า ใช้ปุ่มจุดสามจุดที่ด้านบนขวาของหน้าจอ เลือก “Import > Class Data” แล้วเลือกไฟล์

เยี่ยมมาก เราสร้าง class ในฐานข้อมูลและเติมข้อมูลเรียบร้อยแล้ว ส่วน backend ของโครงการของเราสำเร็จแล้ว ง่ายมาก!

โค้ด Frontend

ในส่วนนี้ เราจะดูแลส่วน frontend ของแอปภูมิศาสตร์ของเรา

เริ่มต้นโปรเจ็กต์

ขั้นตอนต่อไปจะต้องคุณติดตั้ง Node หากคุณยังไม่มี ให้ ดาวน์โหลด

เริ่มต้นโดยการสร้างโปรเจ็กต์ Expo:

$ npx create-expo-app@latest back4app-geolocation-app --template blank@sdk-49

เราใช้เทมเพลต blank@sdk-49 เพราะเราต้องการใช้เวอร์ชันล่าสุดของ Expo SDK

Expo จะใช้เวลาประมาณหนึ่งนาทีในการเตรียมทุกสิ่งที่จำเป็นสำหรับโปรเจ็กต์ของคุณ เมื่อโปรเจ็กต์ของคุณพร้อม ให้เปลี่ยนไดเรกทอรีปัจจุบันของคุณไปยังโปรเจ็กต์นั้น จากนั้นเริ่มเซิร์ฟเวอร์พัฒนา Expo:

$ cd back4app-geolocation-app
$ expo start

กด A บนแป้นพิมพ์ของคุณเพื่อเปิดแอปในอีมูเลเตอร์หรืออุปกรณ์ Android ที่เชื่อมต่อ

React Native Maps

ในการแสดงแผนที่ เราจะใช้ react-native-maps React Native Maps เป็นแพ็คเกจที่ยอดเยี่ยมที่ให้ส่วนประกอบแผนที่สำหรับ iOS และ Android รองรับ Google Maps และ MapKit

เริ่มต้นโดยการติดตั้งผ่าน npm:

$ npx expo install react-native-maps

ต่อไป ให้แทนที่เนื้อหาของ App.js ของคุณเพื่อรวม <MapView> ดังนี้:

// App.js

import React from "react";
import {StyleSheet, View} from "react-native";
import MapView from "react-native-maps";

const initialRegion = {
  latitude: 30.0000,
  longitude: -100.0000,
  latitudeDelta: 64,
  longitudeDelta: 64,
};

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    zIndex: 10,
    width: "100%",
    height: "100%",
  },
});

ถ้าคุณเปิดแอปตอนนี้ คุณจะสามารถเห็นแผนที่ได้

ดึงตำแหน่งผู้ใช้

ในการดึงตำแหน่งผู้ใช้ เราจะใช้แพ็คเกจ expo-location

เริ่มต้นโดยการติดตั้งผ่าน npm:

$ npx expo install expo-location

ก่อนที่จะเข้าถึงตำแหน่งของผู้ใช้ เราต้องขออนุญาตจากพวกเขา เพื่อทำเช่นนั้น เราสามารถใช้ฟังก์ชันในตัวของ Expo ชื่อ requestForegroundPermissionsAsync() ใน useEffect() ดังนี้:

// App.js

import React, {useEffect, useState} from "react";
import {StyleSheet, View} from "react-native";
import MapView, {Marker} from "react-native-maps";
import * as Location from "expo-location";

// ...

export default function App() {

  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      let {status} = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        console.error("Permission to access location was denied.");
        return;
      }
      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      >
        {location && (
          <Marker
            title="You are here"
            description={`
              ${location.coords.latitude.toFixed(4)},
              ${location.coords.longitude.toFixed(4)}
            `}
            coordinate={{
              latitude: location.coords.latitude,
              longitude: location.coords.longitude,
            }}
            pinColor="blue"
          />
        )}
      </MapView>
    </View>
  );
}

// ...

1. เมื่อแอปเริ่มต้น เราขออนุญาตจากผู้ใช้ในการเข้าถึงตำแหน่งที่ตั้งแบบคร่าว ๆ หากได้รับอนุญาต เราจะเก็บตำแหน่งใน state location โดยใช้ useState()
2. เราได้อัปเดตคำสั่ง return เพื่อแสดงตำแหน่งของผู้ใช้ (ถ้า location ไม่เป็น null)

เรียกแอปอีกครั้ง และคุณจะสามารถเห็นเครื่องหมายสีน้ำเงินที่ระบุถึงตำแหน่งปัจจุบันของคุณ

ติดตั้ง Parse

คุณอาจทราบว่า Back4app พื้นฐานอยู่บนแพลตฟอร์ม Parse หากเราต้องการโต้ตอบกับฐานข้อมูล Back4app หรือ Back4app โดยทั่วไป เราต้องติดตั้ง Parse SDK

ก่อนอื่น ติดตั้ง Parse SDK:

$ npx expo install [email protected] @react-native-async-storage/async-storage

ฉันใช้ Parse เวอร์ชัน 3.5.1 เพราะเวอร์ชันใหม่กว่าไม่ทำงานได้ดีกับ Expo SDK 49

ต่อไป ให้สร้าง instance Parse ใน App.js ใต้การนำเข้า:

// App.js

// ...

import Parse from "parse/react-native.js";
import AsyncStorage from "@react-native-async-storage/async-storage";

Parse.setAsyncStorage(AsyncStorage);
Parse.initialize(
  process.env.EXPO_PUBLIC_PARSE_APPLICATION_ID,
  process.env.EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY,
);
Parse.serverURL = "https://parseapi.back4app.com/";

// ...

เราจะใช้ตัวแปรสภาพแวดล้อมแทนการเขียนโค้ด ID แอปพลิเคชัน Parse และคีย์ JavaScript เนื่องจาก SDK 49 Expo โหลดตัวแปรสภาพแวดล้อมจากไฟล์ .env.local อัตโนมัติ

ไปสร้างไฟล์ .env.local ใน root ของโปรเจ็กต์ด้วยเนื้อหาดังต่อไปนี้:

EXPO_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>

อย่าลืมแทนที่ <parse_app_id> และ <parse_javascript_key> ด้วย ID และคีย์จริงของคุณ เพื่อรับข้อมูลประจำตัว ไปที่แอป Back4app ของคุณและเลือก “App Settings > Security & Keys” ในแถบด้านข้าง

ดึงสถานที่จากฐานข้อมูล

ในการดึงสถานที่จากฐานข้อมูล เราจะใช้ instance Parse ที่เราได้สร้างไว้ในขั้นตอนก่อนหน้า

เราต้องสร้าง Parse.Query ใหม่บน class Place จากนั้นรัน find() เพื่อดำเนินการค้นหา หลังจากนั้นเราจะแปลงผลลัพธ์เป็นรูปแบบเครื่องหมายของเรา

แก้ไข App.js ของคุณดังนี้:

// App.js

// ...

export default function App() {

  // ...

  const [places, setPlaces] = useState([]);

  useEffect(() => {
    // ...

    // ดึงวัตถุ `Place` จากฐานข้อมูล
    const placesQuery = new Parse.Query("Place");
    placesQuery.find().then((places) => {
      places = places.map((place) => {
        return {
          title: place.get("name"),
          description: place.get("description"),
          coordinate: {
            latitude: place.get("location").latitude,
            longitude: place.get("location").longitude,
          },
        };
      });
      setPlaces(places);
    });
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      >
        // ...
        {places.map((place, index) => (
          <Marker
            key={index}
            title={place.title}
            description={place.description}
            coordinate={place.coordinate}
          />
        ))}
      </MapView>
    </View>
  );
}

// ...

1. เราใช้ useState() เพื่อสร้าง state อื่นที่ถือ markers สำหรับสถานที่
2. เราอัปเกรด hook useEffect() เพื่อดึงสถานที่จากฐานข้อมูลเมื่อแอปเริ่มต้น
3. เราเปลี่ยนฟังก์ชัน render เพื่อแสดง markers ของ Place บนแผนที่

เปิดแอปอีกครั้ง และคุณจะสามารถเห็นสถานที่ทั้งหมด

Geoqueries

ในส่วนสุดท้ายนี้ เราจะดูวิธีการทำการค้นหาทางภูมิศาสตร์โดยใช้ Back4app

Parse มาพร้อมกับ class ชื่อ GeoPoint คลาส GeoPoint แสดงถึงจุดละติจูด/ลองจิจูดและอนุญาตให้เราคำนวณระยะทางระหว่างสอง GeoPoint และทำการค้นหาตามความใกล้เคียง

เราจะใช้คลาสนี้เพื่อดำเนินการฟังก์ชันสองฟังก์ชันต่อไปนี้:

1. จัดเรียงสถานที่จากตำแหน่งของผู้ใช้ตามระยะทาง
2. ค้นหาสถานที่ภายใน X กิโลเมตรจากตำแหน่งของผู้ใช้

ไปเพิ่มสิ่งต่อไปนี้ใน App.js ของคุณ:

// App.js

// ...

const maxDistance = 3000;

export default function App() {

  // ...

  const sortPlacesByProximity = async () => {
    let parseQuery = new Parse.Query("Place");
    let locationGeoPoint = new Parse.GeoPoint(
        location.coords.latitude,
        location.coords.longitude
    );
    parseQuery.near("location", locationGeoPoint);

    let results = await parseQuery.find();
    for (let result of results) {
      console.log(result.get("name"));
    }
  };

  const findPlacesWithinDistance = async () => {
    let parseQuery = new Parse.Query("Place");
    let locationGeoPoint = new Parse.GeoPoint(
        location.coords.latitude,
        location.coords.longitude
    );
    parseQuery.withinKilometers("location", locationGeoPoint, maxDistance);

    let results = await parseQuery.find();
    for (let result of results) {
      console.log(result.get("name"));
    }
  }

  const moveUserToRandomLocation = () => {
    setLocation({
      coords: {
        latitude: Math.random() * (-78.848974 - -103.520833) + 31.3845,
        longitude: Math.random() * (-78.848974 - -123.885444) + -123.885444,
      }
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button
          title="Sort places by proximity"
          color="#239658"
          onPress={sortPlacesByProximity}
        />
        <Button
          title={`Find places within ${maxDistance} km`}
          color="#239658"
          onPress={findPlacesWithinDistance}
        />
        <Button
          title="Move user to random location"
          color="#061124"
          onPress={moveUserToRandomLocation}
        />
      </View>
      // ...
    </View>
  );
}

const styles = StyleSheet.create({
  // ...
  buttonContainer: {
    zIndex: 25,
    width: "100%",
    position: "absolute",
    bottom: 0,
    marginVertical: 4,
    display: "flex",
    gap: 4,
  },
});

1. sortPlacesByProximity() และ findPlacesWithinDistance() แปลงตำแหน่งของผู้ใช้เป็น GeoPoint สร้าง Parse.Query แล้วดำเนินการฟังก์ชัน geo ที่เฉพาะเจาะจง
2. moveUserToRandomLocation() ใช้เพื่อย้ายผู้ใช้ไปยังตำแหน่งสุ่มภายในสหรัฐฯ วิธีนี้ใช้หลัก ๆ สำหรับการทดสอบสองวิธีที่กล่าวถึงก่อนหน้านี้
3. เราเพิ่มปุ่มสามปุ่มเพื่อเรียกใช้ฟังก์ชันที่เกี่ยวข้อง

อย่าลืมการนำเข้าที่ด้านบนของไฟล์:

import {Button, StyleSheet, View} from "react-native";

เรียกเซิร์ฟเวอร์ใหม่ และคุณควรเห็นดังต่อไปนี้:

ทดสอบ geo queries โดยคลิกปุ่ม “Sort places by proximity”:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma
LOG  Florida
LOG  New York

ทำเช่นเดียวกันสำหรับฟังก์ชัน within-distance:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma

สุดท้าย ย้ายผู้ใช้ไปยังตำแหน่งสุ่มและทดสอบ geo queries อีกครั้ง

บทสรุป

ในบทความนี้ เราได้สร้างแอปภูมิศาสตร์สำเร็จแล้ว แอปนี้อนุญาตให้ผู้ใช้ดูแผนที่ ดูตำแหน่งของตน ดึงสถานที่จากฐานข้อมูล และทำ geo queries ได้ ตอนนี้ คุณควรเข้าใจดีว่าการทำงานของแอปภูมิศาสตร์เป็นอย่างไรและวิธีการสร้างพวกมัน

นี่คือไอเดียบางอย่างที่คุณสามารถนำไปใช้เพื่อทดสอบความเข้าใจของคุณ:

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

ซอร์สโค้ดสามารถดูได้ที่ repository back4app-geolocation-app บน GitHub