איך ליצור אפליקציית מיקום? מדריך שלב אחר שלב.
בעולם של היום, יישומים מבוססי מיקום הופכים לפופולריים יותר ויותר. כמעט כל אפליקציה פופולרית משלבת תכונות גאולוקיישן במידה מסוימת. חלק עושים זאת כדי לשפר את חוויית המשתמש ולספק חוויה מותאמת אישית יותר, בעוד שאחרים בנויים סביב תכונות מבוססות מיקום.
במאמר זה, נלמד אתכם הכל מה שאתם צריכים לדעת על אפליקציות גאולוקיישן. נדון בתכונות המפתח שלהן, בסוגי האפליקציות הגאולוקיישן ונבהיר את תהליך יצירת אפג’י מהפרספקטיבה העסקית. בנוסף, ננחה אתכם בתהליך פיתוח אפליקציית גאולוקיישן באמצעות Back4app ו-React Native.
Contents
מהי אפליקציית גאולוקיישן?
אפליקציית גאולוקיישן או מבוססת מיקום היא כל אפליקציה ניידת או רשתית שעוקבת אחרי מיקום מכשיר המשתמש. אפליקציות עושות זאת כדי להתאים אישית ולשפר את חוויית המשתמש, לספק שירותים תלויי מיקום, למטרות שיווק, למטרות מידע, וכדומה.
אפליקציות גאולוקיישן משתמשות בטכנולוגיות שונות כדי לקבל את מיקום המשתמש, כולל:
- מערכת מיקום גלובלית (GPS)
- מערכת מיקום גלובלית מסייעת (A-GPS)
- טכנולוגיות גאולוקיישן פנימיות
- מגדלי סלולר או WiFi
לכל אחת מהטכנולוגיות שהוזכרו יש יתרונות וחסרונות. חלקן מהירות יותר, בעוד שאחרות מדויקות ואמינות יותר. אבל אל תדאגו לגבי זה יותר מדי. המיקום בדרך כלל מתקבל על ידי המכשיר עצמו.
תכונות מפתח של אפליקציות מבוססות מיקום
אפליקציות גאולוקיישן משתנות מאוד בתכונות, אבל רובן כוללות את התכונות הבאות:
- תצוגת מפה: תצוגת המפה היא תכונה מרכזית של אפליקציות גאולוקיישן. היא מספקת למשתמשים ייצוג חזותי של מיקומם הנוכחי ונקודות עניין. היא מאפשרת למשתמשים לחקור אזורים, למצוא כיוונים ולבצע שאילתות גיאוספציות.
- מעקב מיקום: אפליקציות גאולוקיישן מציעות לעיתים מעקב מיקום בזמן אמת, מאפשרות למשתמשים לשתף את מיקומם עם אחרים או לעקוב אחרי תנועותיהם.
- התאמה אישית: אפליקציות גאולוקיישן עשויות להציע תכונות התאמה אישית, כמו שמירת מקומות מועדפים, הגדרת העדפות לסוגי מסלולים (למשל, הליכה, נהיגה), הגדרות ויזואליות, וכו’.
- התראות: חלק מאפליקציות גאולוקיישן משתמשות בגיאופנסינג כדי לשלוח התראות כאשר משתמשים נכנסים או עוזבים אזור. בנוסף, הן יכולות לשלוח התראה כאשר משתמש נמצא בקרבת אירוע, וכו’.
- שילוב עם שירותים אחרים: רבות מאפליקציות גאולוקיישן משתלבות עם שירותים או פלטפורמות צד שלישי כדי לשפר את הפונקציונליות. לדוגמה, גוגל משתלבת עם Booking.com כדי לספק אפשרויות בתי מלון ופלטפורמות תחבורה ציבורית כדי לקבל מידע על תחבורה ציבורית.
סוגי אפליקציות מבוססות מיקום
ישנם סוגים רבים של יישומים מבוססי מיקום, אבל נבחן כמה מהעיקריים.
אפליקציות ניווט
אפליקציות ניווט הן הדוגמה הברורה ביותר של אפליקציות גאולוקיישן. הן בדרך כלל מתמקדות בתצוגת מפה ומספקות תכונות כמו מעקב מיקום, מציאת עסקים קרובים, ביצוע שאילתות גיאו וסיפוק הנחיות נהיגה.
דוגמאות: Google Maps, Waze, Sygic GPS.
אפליקציות על-דרישה
אפליקציות על-דרישה הן דוגמה פופולרית נוספת של אפליקציות גאולוקיישן. אפליקציות אלו מאפשרות לכם להזמין נסיעה, להזמין אוכל, מצרכים ועוד. שירותים על-דרישה משתמשים במיקום המשתמש כדי להציג נסיעות, חנויות ומסעדות קרובות. בנוסף לכך, הם מספקים מעקב בזמן אמת של ההזמנות.
דוגמאות: Uber, Uber Eats, Lyft.
רשתות חברתיות ואפליקציות היכרויות
אפליקציות מדיה חברתית בדרך כלל פחות שקופות לגבי השימוש שלהן בגאולוקיישן. רוב אפליקציות המדיה החברתית משתמשות במיקום המשתמש כדי לספק חוויה מותאמת אישית, לחבר אנשים, לתייג תמונות ולתצוגת תוכן פופולרי באזור.
דוגמאות: Facebook, Instagram, Tinder.
אפליקציות תיירות
אפליקציות תיירות משתמשות במיקום המשתמש כדי להמליץ על בתי מלון, אירועים, חוויות ועוד קרובים אליו.
דוגמאות: Airbnb, Booking, Eventbrite.
אפליקציות כושר
רוב אפליקציות הכושר, במיוחד אפליקציות ריצה, כוללות מעקב מיקום מובנה. מעקב המיקום מאפשר להן לעקוב אחרי מסלולי המשתמש, לחשב את מרחק המסלול, מהירות ריצה ממוצעת, שינוי גובה ועוד.
דוגמאות: Strava, GoogleFit, RunKeeper.
תהליך יצירת אפליקציית גאולוקיישן
יצירת אפליקציה ניידת מבוססת מיקום יכולה להיות משימה מורכבת. אבל אל תדאגו! עם השלבים הבאים, תהיו בדרך הנכונה ליצירת אפליקציית גאולוקיישן מצוינת.
שלב 1: הגדרת מטרת אפליקציית הגאולוקיישן
השלב הראשון ביצירת אפליקציית גאולוקיישן הוא להגדיר את מטרתה והתכונות העיקריות שלה. שאלו את עצמכם איזו בעיה האפליקציה שלכם תפתור ומי קהל היעד.
ברגע שאתם יודעים זאת, הגיע הזמן לחקור את השוק. מצאו את המתחרים שלכם וחשבו על מה שהופך את האפליקציה שלכם לטובה יותר מכל הקיימות.
שלב 2: בחירת הטכנולוגיות
החלק הקריטי בפיתוח אפליקציית גאולוקיישן טובה הוא בחירת מערך הטכנולוגיות הנכון. הסבירו שהאפליקציה שלכם תתפצל ככל הנראה לבקאנד ולפרונטאנד.
בעת בחירת כלי הבקאנד, חשבו על סוג הנתונים שתאחסנו, היכן יאוחסנו הנתונים, וכדומה. בניגוד לכך, בעת בחירת הטכנולוגיות לפרונטאנד, בחרו אלו שיאפשרו לכם לבנות אפליקציה רספונסיבית עם עיצוב אלגנטי.
בנוסף, תזדקקו ל-API גאולוקיישן. בעת בחירת API גאולוקיישן, שקלו אפשרויות שונות כמו Google Maps, OpenStreetMap, ו-MapBox. ודאו לבחור ב-API הגאולוקיישן שהכי מתאים לסוג האפליקציה שלכם.
שלב 3: עיצוב האפליקציה
שלב זה הוא החשוב ביותר מהפרספקטיבה של המשתמש. בעת עיצוב האפליקציה שלכם, ודאו שהיא מושכת, קלה לשימוש, ויש בה כמות ראויה של תכונות. עקבו אחרי עקרונות UI/UX טובים ושקלו כיצד המשתמש הסופי ישתמש באפליקציה מבוססת המיקום שלכם.
שלב 4: בניית MVP
לפני יצירת אפליקציה מלאה, יצירת מוצר מינימלי בר-תפעול (MVP) היא רעיון טוב. ה-MVP צריך לכלול מספיק תכונות כדי להיות שימושי למשתמשים הראשונים, שיספקו משוב. המשוב יאפשר לכם לאמת את הרעיון שלכם ולשפר את המוצר.
שלב 5: גרסה מלאה והפצה
השלב האחרון שעליכם לבצע הוא לבנות אפליקציה בגרסה מלאה. בדקו את רשימת המשימות שלכם ויישמו את כל התכונות החיוניות הנוספות. תקנו את כל הבאגים והפיצו את האפליקציה המבוססת המיקום שלכם.
לאחר ההפצה, כמובן, תצטרכו לתחזק את האפליקציה שלכם. ה-API הגאולוקיישן עשוי להשתנות עם הזמן. תצטרכו להוסיף תמיכה במערכות הפעלה חדשות יותר, לתקן באגים, להוסיף תכונות חדשות, וכדומה.
איך לפתח אפליקציית גאולוקיישן?
בקטע המאמר הזה, נבחן כיצד לבנות אפליקציית גאולוקיישן באמצעות Back4app ו-React Native עם Expo.
דרישות מוקדמות
- ניסיון ב-JavaScript, במיוחד ES6.
- הבנה בסיסית של React Native (ו-Expo).
- IDE של JavaScript מותקן במחשב המקומי שלכם.
- אמולטור אנדרואיד או מכשיר אנדרואיד פיזי.
מהו Back4app?
Back4app הוא כלי מצוין לבניית יישומים מודרניים במהירות ללא צורך בכישורי קידוד מתקדמים. הפלטפורמה מגיעה עם הרבה תכונות שימושיות, כגון ניהול משתמשים, אימות, מסדי נתונים בזמן אמת, פונקציות Cloud Code, אינטגרציות חברתיות, APIs, ועוד.
עם Back4app, אתם יכולים להתמקד בחלקים החשובים של האפליקציה שלכם, כמו הפונקציונליות העיקרית והעיצוב, בלי לדאוג לבקאנד או לתשתית המורכבת.
הכי טוב, Back4app מציע תוכנית חינמית לבדיקות ולניסויים. ככל שהאפליקציה שלכם גדלה, אתם יכולים לשדרג בקלות לתוכניות פרימיום עם תמחור שקוף וחזוי.
סקירת פרויקט
להדגמת כוחו של Back4app, נבנה אפליקציית גאולוקיישן פשוטה. האפליקציה תאפשר למשתמשים לצפות במפה, לראות מקומות המאוחסנים במסד הנתונים ולבצע שאילתות גיאוספציות. השאילתות הגאוגרפיות יכללו מיון מקומות לפי מרחק, מציאת מקומות בתוך מרחק מסוים, וכדומה. הבקאנד של האפליקציה שלנו יטופל על ידי Back4app, ואנחנו נשתמש ב-React Native וב-Google Maps בפרונטאנד.
יצירת אפליקציית Back4app
השלבים הבאים ידרשו מכם להיות בעלי חשבון Back4app. אם עדיין אין לכם אחד, המשיכו והירשמו בחינם!
בעת ההתחברות, תועברו לרשימת האפליקציות שלכם. כדי ליצור אפליקציה חדשה, לחצו על “Build new app”.
Back4app מאפשרת לנו לפרוס שני סוגי אפליקציות:
- Backend as a Service (BaaS) — פתרון בקאנד מלא, או
- Containers as a Service (CaaS) — פלטפורמה לפריסת תוכנה מכולת.
מאחר ואנחנו בונים אפליקציית גאולוקיישן, נבחר ב-“Backend as a Service”.
הבא, תנו לאפליקציה שלכם שם יפה, בחרו “NoSQL” כבסיס הנתונים ולחצו על “Create”.
Back4app תיקח קצת זמן להכין את כל מה שצריך עבור האפליקציה שלכם. ברגע שהאפליקציה שלכם מוכנה, תועברו לתצוגת מסד הנתונים של האפליקציה שלכם.
יצירת מחלקות במסד הנתונים
בהמשך, עלינו לדאוג למסד הנתונים.
כפי שהוזכר בהקדמת הפרויקט, אנו רוצים לאחסן מקומות במסד הנתונים ולהציגם על המפה. עלינו ליצור מחלקת מסד נתונים חדשה שתכיל מקומות אלו.
המשיכו וצרו מחלקה חדשה על ידי לחיצה על כפתור “Create a class”. תנו לה את השם Place
, אפשרו “Public Read and Write”, ולחצו על “Create class & add columns”.
לאחר שיצרתם את המחלקה, הוסיפו כמה מקומות לדוגמה למסד הנתונים. דוגמה:
אופציונלית, אתם יכולים לייבא את ייצוא מסד נתונים של מדינות ארה”ב. כדי לייבא אותו, השתמשו בכפתור שלושת הנקודות בפינה העליונה הימנית של המסך, בחרו “Import > Class Data”, ואז בחרו את הקובץ.
מצוין, הצלחנו ליצור מחלקת מסד נתונים ולאכלס אותה. חלק הבקאנד של הפרויקט שלנו הושלם. זה היה קל!
קוד פרונטאנד
בקטע זה, נטפל בחלק הפרונטאנד של אפליקציית הגאולוקיישן שלנו.
אתחול הפרויקט
השלבים הבאים ידרשו מכם להיות בעלי התקנת 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
במקלדת שלכם כדי לפתוח את האפליקציה באמולטור או במכשיר האנדרואיד המחובר.
React Native Maps
להצגת המפה, נשתמש ב-react-native-maps. React Native Maps הוא חבילה מצוינת שמספקת רכיבי מפה ל-iOS ולאנדרואיד. היא תומכת ב-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>
);
}
// ...
- בעת התחלת האפליקציה, אנו מבקשים את אישור המשתמש לגישה למיקום הגס שלו. אם הגישה מאושרת, אנו מאחסנים את המיקום במצב
location
באמצעותuseState()
. - עדכנו את משפט החזרה כדי להציג את מיקום המשתמש (אם
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.
לאחר מכן, צרו מופע 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/";
// ...
נשתמש במשתני סביבה במקום לקודד את מזהה האפליקציה ומפתח JavaScript של Parse. מאז SDK 49, Expo טוען אוטומטית משתני סביבה מקובץ .env.local.
המשיכו וצרו את קובץ .env.local בשורש הפרויקט עם התוכן הבא:
EXPO_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>
ודאו להחליף את <parse_app_id>
ואת <parse_javascript_key>
במזהה ובמפתח האמיתי שלכם. לקבלת האישורים שלכם, נווטו לאפליקציית Back4app שלכם ובחרו “App Settings > Security & Keys” בסרגל הצד.
שליפת מקומות ממסד הנתונים
כדי לשלוף מקומות ממסד הנתונים, נשתמש במופע Parse
שיצרנו בשלב הקודם.
תחילה, עלינו ליצור Parse.Query
חדשה על מחלקת Place
ואז להריץ find()
כדי לבצע את השאילתה. לאחר מכן נתרגם את התוצאות לפורמט הסממנים שלנו.
שנו את App.js שלכם כך:
// 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>
);
}
// ...
- השתמשנו ב-
useState()
כדי ליצור מצב נוסף שמחזיק סממנים עבור מקומות. - עדכנו את ה-hook של
useEffect()
כדי לקבל את המקומות ממסד הנתונים בעת התחלת האפליקציה. - שינינו את פונקציית הרינדור כדי להציג סמני
Place
על המפה.
פתחו את האפליקציה שוב, ואתם אמורים לראות את כל המקומות.
שאילתות גיאוספציות
בקטע האחרון הזה, נבחן כיצד לבצע שאילתות גיאוספציות באמצעות Back4app.
Parse מגיעה עם מחלקה בשם GeoPoint
. מחלקת GeoPoint
מייצגת נקודת קו רוחב/קו אורך ומאפשרת לנו לחשב מרחקים בין שני GeoPoint
s, ולבצע שאילתות מבוססות קרבה.
נשתמש במחלקה זו כדי לממש את שתי הפונקציות הבאות:
- מיון מקומות ממיקום המשתמש לפי מרחק.
- מציאת מקומות בתוך
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,
},
});
sortPlacesByProximity()
ו-findPlacesWithinDistance()
ממירים תחילה את מיקום המשתמש ל-GeoPoint
, יוצריםParse.Query
, ואז מבצעים פונקציה גאוגרפית ספציפית.moveUserToRandomLocation()
משמשת להזזת המשתמש למיקום אקראי בתוך ארה”ב. שיטה זו משמשת בעיקר לבדיקת שתי השיטות שהוזכרו קודם.- הוספנו גם שלושה כפתורים להפעלת הפונקציות המתאימות.
אל תשכחו את הייבוא בחלק העליון של הקובץ:
import {Button, StyleSheet, View} from "react-native";
הריצו שוב את השרת, ואתם אמורים לראות את הבא:
בדקו את השאילתות הגאוגרפיות על ידי לחיצה על כפתור “Sort places by proximity”:
LOG Arizona
LOG Idaho
LOG Oklahoma
LOG Florida
LOG New York
עשו את אותו הדבר עבור פונקציית within-distance:
LOG Arizona
LOG Idaho
LOG Oklahoma
לבסוף, הזיזו את המשתמש למיקום אקראי ובדקו שוב את השאילתות הגאוגרפיות.
סיכום
במאמר זה, בנינו בהצלחה אפליקציית גאולוקיישן. האפליקציה מאפשרת למשתמשים לצפות במפה, לראות את מיקומם, לשלוף מקומות ממסד הנתונים ולבצע שאילתות גיאוגרפיות. עד כה, אתם אמורים להבין היטב כיצד אפליקציות גאולוקיישן פועלות וכיצד הן נבנות.
הנה כמה רעיונות שתוכלו לממש כדי לבחון את הבנתכם:
- מעקב מיקום משתמש בזמן אמת (הסממן של המשתמש צריך לזוז כאשר המכשיר נע)
- היסטוריית מיקום המשתמש (המשתמשים צריכים להיות יכולים לצפות בהיסטוריית המיקומים שלהם)
- ניווט (הצגת מסלול ממיקום המשתמש למיקום מותאם אישית)
קוד המקור זמין במאגר GitHub של back4app-geolocation-app.