Bagaimana cara membuat Aplikasi Geolokasi?

Di dunia saat ini, aplikasi berbasis lokasi menjadi semakin populer. Hampir semua aplikasi populer lainnya menggabungkan fitur geolokasi sampai batas tertentu. Beberapa melakukannya untuk meningkatkan pengalaman pengguna dan memberikan lebih banyak pengalaman yang dipersonalisasi, sementara yang lain dibangun di sekitar fitur berbasis lokasi.

Dalam artikel ini, kami akan mengajarkan Anda semua yang perlu Anda ketahui tentang aplikasi geolokasi. Kita akan membahas tentang fitur-fitur utamanya, jenis-jenis aplikasi geolokasi dan menjelaskan proses pembuatan aplikasi geolokasi dari sudut pandang bisnis. Selain itu, kami akan memandu Anda melalui proses pengembangan aplikasi geolokasi menggunakan Back4app dan React Native.

Apa yang dimaksud dengan aplikasi geolokasi?

Aplikasi geolokasi atau berbasis lokasi adalah aplikasi seluler atau web yang melacak lokasi perangkat pengguna. Aplikasi melakukan hal ini untuk mempersonalisasi dan meningkatkan pengalaman pengguna, menyediakan layanan yang bergantung pada lokasi, untuk tujuan pemasaran, tujuan informasi, dan sebagainya.

Aplikasi geolokasi menggunakan teknologi yang berbeda untuk mendapatkan lokasi pengguna, termasuk yang berikut ini:

• Sistem pemosisian global (GPS)
• Sistem pemosisian global berbantuan (A-GPS)
• Teknologi geolokasi dalam ruangan
• Menara seluler atau WiFi

Masing-masing teknologi yang disebutkan di atas memiliki kelebihan dan kekurangan. Sebagian lebih cepat, sementara yang lainnya lebih presisi dan andal. Tapi jangan terlalu mengkhawatirkannya. Lokasi biasanya diperoleh oleh perangkat itu sendiri.

Fitur-fitur utama aplikasi berbasis lokasi

Aplikasi geolokasi sangat bervariasi dalam hal fitur, tetapi sebagian besar menyertakan fitur geolokasi ini:

• Tampilan peta: Tampilan peta adalah fitur inti dari aplikasi geolokasi. Fitur ini memberikan representasi visual dari lokasi mereka saat ini dan tempat menarik. Ini memungkinkan pengguna untuk menjelajahi area, menemukan arah, dan melakukan kueri geospasial.
• Pelacakan lokasi: Aplikasi geolokasi sering kali menawarkan pelacakan lokasi secara real-time, sehingga pengguna dapat berbagi lokasi dengan orang lain atau melacak pergerakan mereka.
• Personalisasi: Aplikasi geolokasi dapat menawarkan fitur personalisasi, seperti menyimpan lokasi favorit, mengatur preferensi untuk jenis rute (misalnya, berjalan kaki, mengemudi), pengaturan visual, dll.
• Pemberitahuan: Beberapa aplikasi geolokasi menggunakan geofencing untuk mengirimkan notifikasi ketika pengguna masuk atau keluar dari suatu area. Selain itu, mereka dapat mengirim pemberitahuan ketika pengguna berada di dekat suatu acara, dan lain-lain.
• Integrasi dengan layanan lain: Banyak aplikasi geolokasi yang berintegrasi dengan layanan atau platform pihak ketiga untuk meningkatkan fungsionalitas. Sebagai contoh, Google berintegrasi dengan Booking.com untuk menyediakan pilihan hotel dan platform transit untuk mengambil informasi transportasi umum.

Jenis aplikasi berbasis lokasi

Ada banyak jenis aplikasi berbasis lokasi, tetapi mari kita lihat beberapa yang utama.

Aplikasi navigasi

Aplikasi navigasi adalah contoh yang paling jelas dari aplikasi geolokasi. Aplikasi ini biasanya berpusat pada tampilan peta dan menyediakan fitur-fitur seperti pelacakan lokasi, menemukan bisnis terdekat, melakukan kueri geografis, dan menyediakan petunjuk arah mengemudi.

Contoh: Google Maps, Waze, Sygic GPS.

Aplikasi sesuai permintaan

Aplikasi berdasarkan permintaan adalah contoh populer lainnya dari aplikasi geolokasi. Aplikasi ini memungkinkan Anda mendapatkan tumpangan, memesan makanan, bahan makanan, dan lainnya. Layanan sesuai permintaan menggunakan lokasi pengguna untuk menampilkan wahana, toko, dan restoran terdekat. Selain itu, aplikasi ini juga menyediakan pelacakan pesanan secara real-time.

Contoh: Uber, Uber Eats, Lyft.

Jejaring sosial & aplikasi kencan

Aplikasi media sosial biasanya kurang transparan tentang penggunaan geolokasi mereka. Sebagian besar aplikasi media sosial menggunakan lokasi pengguna untuk memberikan pengalaman yang dipersonalisasi, menghubungkan orang-orang, menandai gambar dan foto, dan menampilkan konten yang populer secara regional.

Contoh: Facebook, Instagram, Tinder.

Aplikasi pariwisata

Aplikasi pariwisata menggunakan lokasi pengguna untuk merekomendasikan hotel, acara, pengalaman, dan banyak lagi.

Contoh: Airbnb, Booking, Eventbrite.

Aplikasi kebugaran

Sebagian besar aplikasi kebugaran, terutama aplikasi lari, memiliki pelacakan lokasi bawaan. Pelacakan lokasi memungkinkan aplikasi ini melacak rute pengguna, menghitung jarak rute, kecepatan lari rata-rata, perbedaan ketinggian, dan banyak lagi.

Contoh: Strava, GoogleFit, RunKeeper.

Proses pembuatan aplikasi geolokasi

Membuat aplikasi seluler berbasis lokasi bisa menjadi tugas yang menakutkan. Tapi jangan khawatir! Dengan langkah-langkah berikut ini, Anda akan segera membuat aplikasi geolokasi yang luar biasa.

Langkah 1: Tentukan tujuan aplikasi geolokasi

Langkah pertama dalam membuat aplikasi geolokasi adalah menentukan tujuan dan fitur utamanya. Tanyakan pada diri Anda sendiri masalah apa yang akan dipecahkan oleh aplikasi Anda dan siapa target audiensnya.

Setelah Anda mengetahuinya, saatnya untuk meneliti pasar. Temukan pesaing Anda dan pikirkan apa yang membuat aplikasi Anda lebih baik daripada yang sudah ada.

Langkah 2: Pilih teknologi

Bagian penting dalam mengembangkan aplikasi geolokasi yang baik adalah memilih tumpukan teknologi yang tepat. Aplikasi Anda mungkin akan dibagi menjadi backend dan frontend.

Ketika memilih alat backend, pikirkan jenis data apa yang akan Anda simpan, di mana data akan disimpan, dan sebagainya. Sebaliknya, saat memilih teknologi frontend, pilihlah yang memungkinkan Anda membuat aplikasi yang responsif dengan desain yang elegan.

Selain itu, Anda akan membutuhkan API geolokasi. Ketika memilih API geolokasi, pertimbangkan berbagai pilihan seperti Google Maps, OpenStreetMap, dan MapBox. Pastikan Anda memilih API geolokasi yang paling sesuai untuk jenis aplikasi Anda.

Langkah 3: Merancang aplikasi

Langkah ini adalah langkah yang paling penting dari sudut pandang pengguna. Saat mendesain aplikasi Anda, pastikan aplikasi Anda menarik, mudah digunakan, dan memiliki fitur yang memadai. Ikuti praktik UI/UX yang baik dan pertimbangkan bagaimana pengguna akan menggunakan aplikasi berbasis lokasi Anda.

Langkah 4: Membangun MVP

Sebelum membuat aplikasi yang lengkap, membuat produk yang layak minimum (MVP) adalah ide yang bagus. MVP harus berisi fitur yang cukup untuk dapat digunakan oleh pengguna awal, yang kemudian akan memberikan umpan balik. Umpan balik ini akan memungkinkan Anda untuk memvalidasi ide Anda dan meningkatkan produk Anda.

Langkah 5: Versi lengkap dan rilis

Langkah terakhir yang harus Anda lakukan adalah membuat aplikasi versi lengkap. Periksa daftar pekerjaan proyek Anda dan terapkan semua fitur penting lainnya. Perbaiki semua bug dan rilis aplikasi berbasis geografis Anda.

Setelah rilis, tentu saja Anda harus memelihara aplikasi Anda. API geolokasi mungkin akan berubah seiring berjalannya waktu. Anda harus menambahkan dukungan untuk sistem operasi yang lebih baru, memperbaiki bug, menambahkan fitur baru, dan lain-lain.

Bagaimana cara mengembangkan aplikasi geolokasi?

Pada bagian artikel ini, kita akan melihat bagaimana cara membuat aplikasi geolokasi menggunakan Back4app dan React Native dengan Expo.

Prasyarat

• Berpengalaman dengan JavaScript, terutama ES6.
• Pemahaman dasar tentang React Native (dan Expo).
• IDE JavaScript terinstal pada mesin lokal Anda.
• Emulator Android atau perangkat Android fisik.

Apa itu Back4app?

Back4app adalah alat yang sangat baik untuk membangun aplikasi modern dengan cepat tanpa perlu keterampilan pengkodean tingkat lanjut. Platform ini dilengkapi dengan banyak fitur yang berguna, seperti manajemen pengguna, otentikasi, database real-time, fungsi Cloud Code, integrasi sosial, API, dan banyak lagi.

Dengan Back4app, Anda dapat fokus pada bagian penting dari aplikasi Anda, seperti fungsionalitas dan desain utama, tanpa mengkhawatirkan backend atau infrastruktur yang rumit.

Yang terbaik dari semuanya, Back4app menawarkan paket gratis untuk menguji dan mencoba berbagai hal. Seiring dengan pertumbuhan aplikasi Anda, Anda bisa meningkatkan ke paket premium dengan mudah dengan harga yang transparan dan dapat diprediksi.

Gambaran Umum Proyek

Untuk mendemonstrasikan kekuatan Back4app, kita akan membuat aplikasi geolokasi sederhana. Aplikasi ini akan memungkinkan pengguna untuk melihat peta, melihat tempat-tempat yang tersimpan dalam database, dan melakukan kueri geospasial. Kueri geografis akan mencakup mengurutkan tempat berdasarkan jarak, menemukan tempat dalam jarak tertentu, dan lain-lain. Backend aplikasi kami akan ditangani oleh Back4app, dan kami akan menggunakan React Native dan Google Maps di bagian depan.

Buat Aplikasi Back4app

Langkah-langkah berikut ini mengharuskan Anda memiliki akun Back4app. Jika Anda belum memilikinya, silakan mendaftar secara gratis!

Saat Anda masuk, Anda akan diarahkan ke daftar aplikasi Anda. Untuk membuat aplikasi baru, klik “Buat aplikasi baru”.

Back4app memungkinkan kita untuk menggunakan dua jenis aplikasi:

1. Backend as a Service (BaaS ) – solusi backend yang lengkap, atau
2. Containers as a Service (CaaS ) – sebuah platform untuk menerapkan perangkat lunak dalam kontainer.

Karena kita sedang membangun aplikasi geolokasi, kita akan menggunakan “Backend sebagai Layanan”.

Selanjutnya, berikan nama yang bagus untuk aplikasi Anda, pilih “NoSQL” sebagai basis data, dan klik “Buat”.

Back4app akan membutuhkan sedikit waktu untuk mempersiapkan semua yang diperlukan untuk aplikasi Anda. Setelah aplikasi Anda siap, Anda akan diarahkan ke tampilan basis data aplikasi Anda.

Membuat Kelas Basis Data

Selanjutnya, kita perlu mengurus database.

Seperti yang telah disebutkan pada pengenalan proyek, kita ingin menyimpan tempat di dalam database dan menampilkannya pada peta. Kita harus membuat kelas database baru untuk menyimpan tempat-tempat ini.

Lanjutkan dan buat kelas baru dengan mengklik tombol “Buat kelas”. Beri nama Tempat, aktifkan “Baca dan Tulis Publik”, dan klik “Buat kelas & tambahkan kolom”.

Selanjutnya, tambahkan tiga kolom berikut ini:

+-------------+-------------+--------------------+----------+
| Data type   | Name        | Default value      | Required |
+-------------+-------------+--------------------+----------+
| String      | name        | <leave blank>      | yes      |
+-------------+-------------+--------------------+----------+
| String      | description | <leave blank>      | no       |
+-------------+-------------+--------------------+----------+
| GeoPoint    | location    | <leave blank>      | yes      |
+-------------+-------------+--------------------+----------+

Setelah Anda membuat kelas, tambahkan beberapa tempat sampel ke database. Contoh:

Sebagai alternatif, Anda dapat mengimpor ekspor basis data negara bagian AS ini. Untuk mengimpornya, gunakan tombol tiga titik di kanan atas layar, pilih “Impor > Data Kelas”, lalu pilih file.

Bagus, kita telah berhasil membuat kelas database dan mengisinya. Bagian backend dari proyek kita sekarang sudah selesai. Mudah sekali!

Kode Frontend

Pada bagian ini, kita akan membahas bagian depan aplikasi geolokasi kita.

Proyek Init

Langkah-langkah berikut ini mengharuskan Anda untuk menginstal Node. Jika Anda belum memilikinya, unduhlah.

Mulailah dengan membuat proyek Expo:

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

Kami menggunakan template blank@sdk-49 karena kami ingin menggunakan versi terbaru dari Expo SDK.

Expo akan membutuhkan waktu sekitar satu menit untuk mempersiapkan semua yang diperlukan untuk proyek Anda. Setelah proyek Anda siap, ubah direktori Anda saat ini ke direktori tersebut. Kemudian mulai server pengembangan Expo:

$ cd back4app-geolocation-app
$ expo start

Tekan A pada keyboard Anda untuk membuka aplikasi di emulator atau perangkat Android yang terhubung.

React Native Maps

Untuk menampilkan peta, kita akan menggunakan react-native-maps. React Native Maps adalah paket hebat yang menyediakan komponen peta untuk iOS dan Android. React Native Maps mendukung Google Maps dan MapKit.

Mulailah dengan menginstalnya melalui npm:

$ npx expo install react-native-maps

Selanjutnya, ganti konten App.js Anda untuk menyertakan seperti ini:

// 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%",
  },
});

Jika Anda membuka aplikasi ini sekarang, Anda seharusnya dapat melihat peta.

Mengambil Lokasi Pengguna

Untuk mengambil lokasi pengguna, kita akan menggunakan paket expo-location.

Mulailah dengan menginstalnya melalui npm:

$ npx expo install expo-location

Sebelum mengakses lokasi pengguna, kita harus meminta izin mereka. Untuk melakukannya, kita dapat menggunakan fungsi Expo bawaan yang disebut requestForegroundPermissionsAsync() dalam useEffect() seperti ini:

// 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. Ketika aplikasi dimulai, kita meminta izin pengguna untuk mengakses lokasi kasar mereka. Jika akses diberikan, kita kemudian menyimpan lokasi dalam status lokasi menggunakan useState().
2. Kami memperbarui pernyataan pengembalian untuk menampilkan lokasi pengguna (jika lokasi tidak nol).

Jalankan kembali aplikasi, dan Anda seharusnya dapat melihat penanda biru yang menunjukkan lokasi Anda saat ini.

Instal Parse

Seperti yang Anda ketahui, Back4app didasarkan pada platform Parse. Jika kita ingin berinteraksi dengan database Back4app atau Back4app secara umum, kita harus menginstal Parse SDK.

Pertama, instal Parse SDK:

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

Saya menggunakan Parse versi 3.5.1, karena versi yang lebih baru tidak bekerja dengan baik dengan Expo SDK 49.

Selanjutnya, buatlah instance Parse di App.js tepat di bawah impor:

// 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/";

// ...

Kita akan menggunakan variabel lingkungan alih-alih mengkodekan ID aplikasi Parse dan kunci JavaScript. Sejak SDK 49, Expo secara otomatis memuat variabel lingkungan dari file .env.local.

Lanjutkan dan buat file .env.local di root proyek dengan konten berikut:

EXPO_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>

Pastikan untuk mengganti dan dengan ID dan kunci Anda yang sebenarnya. Untuk mendapatkan kredensial Anda, buka aplikasi Back4app Anda dan pilih “Pengaturan Aplikasi > Keamanan & Kunci” di bilah samping.

Mengambil Tempat dari Basis Data

Untuk mengambil tempat dari database, kita akan menggunakan instance Parse yang telah kita buat di langkah sebelumnya.

Pertama-tama kita harus membuat Parse.Query baru pada kelas Place dan kemudian menjalankan find() untuk menjalankan kueri. Setelah itu kita mengubah hasilnya ke dalam format penanda kita.

Modifikasi App.js Anda seperti ini:

// App.js

// ...

export default function App() {

  // ...

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

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

    // fetch `Place` objects from the database
    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. Kami menggunakan useState() untuk membuat state lain yang menyimpan penanda tempat .
2. Kami telah meningkatkan hook useEffect() untuk mendapatkan tempat dari basis data pada saat aplikasi dijalankan.
3. Kami mengubah fungsi render untuk menampilkan penanda Tempat di peta.

Buka aplikasi Anda sekali lagi, dan Anda akan dapat melihat semua tempat.

Geoqueries

Pada bagian terakhir ini, kita akan melihat bagaimana cara melakukan kueri geospasial menggunakan Back4app.

Parse hadir dengan sebuah kelas bernama GeoPoint. Kelas GeoPoint merepresentasikan titik lintang/bujur dan memungkinkan kita menghitung jarak antara dua GeoPoint, dan melakukan kueri berbasis jarak.

Kita akan memanfaatkan kelas ini untuk mengimplementasikan dua fungsi berikut:

1. Mengurutkan tempat dari lokasi pengguna berdasarkan jarak.
2. Menemukan tempat dalam jarak X kilometer dari lokasi pengguna.

Lanjutkan dan tambahkan yang berikut ini ke App.js Anda:

// 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. sortPlacesBerdasarkanKedekatan() dan findPlacesWithinDistance() pertama-tama mengubah lokasi pengguna menjadi GeoPoint, membuat Parse.Query, dan kemudian mengeksekusi fungsi geo tertentu.
2. moveUserToRandomLocation() digunakan untuk memindahkan pengguna ke lokasi acak di AS. Metode ini digunakan terutama untuk menguji dua metode yang disebutkan sebelumnya.
3. Kami juga menambahkan tiga tombol untuk memicu fungsi yang sesuai.

Jangan lupa tentang impor di bagian atas file:

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

Jalankan ulang server, dan Anda akan melihat tampilan berikut ini:

Uji kueri geografis dengan mengeklik tombol “Urutkan tempat berdasarkan kedekatan”:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma
LOG  Florida
LOG  New York

Lakukan hal yang sama untuk fungsionalitas dalam jarak jauh:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma

Terakhir, pindahkan pengguna ke lokasi acak dan uji kueri geografis sekali lagi.

Kesimpulan

Pada artikel ini, kami telah berhasil membuat aplikasi geolokasi. Aplikasi ini memungkinkan pengguna untuk melihat peta, melihat lokasi mereka, mengambil tempat dari database, dan melakukan kueri geografis. Sekarang, Anda seharusnya sudah memiliki pemahaman yang baik tentang cara kerja aplikasi geolokasi dan cara pembuatannya.

Berikut ini beberapa ide yang bisa Anda terapkan untuk menguji pemahaman Anda:

• Pelacakan lokasi pengguna secara real-time (penanda pengguna harus bergerak ketika perangkat bergerak)
• Riwayat lokasi pengguna (pengguna harus dapat melihat riwayat lokasi mereka)
• Navigasi (jalur tampilan dari lokasi pengguna ke lokasi khusus)

Kode sumber tersedia di repositori GitHub back4app-geolocation-app.