طَبِّقْهاتعلّم المبدأ، وطبّقه بيدكمقرر 251 · برمجة الأجهزة الذكية
الدرس 17 · الوحدة 8: التفاعل مع الحساسات والأجهزة الذكية باستخدام APIs

الموقع GPS وعرضه على الخريطة

تحديد مكان الجهاز واستخدامه بمسؤوليّة. ⏱ نحو 40 دقيقة.

بعد هذا الدرس ستستطيع أن:
  • تقرأ الموقع (خط العرض والطول) وتعرضه.
  • تحسب مسافةً تقريبيّة إلى نقطة.
  • تراعي الإذن والخصوصيّة والطاقة.

١أين الجهاز؟

مستشعر الموقع (GPS) يعطي إحداثيَّي خطّ العرض (lat) وخطّ الطول (lng). منه تُبنى الخرائط والتوصيل والطقس والمتاجر القريبة.

هنا نقرأ الموقع من محاكي useLocation — اختر مدينةً من لوحة المستشعرات:

import { View, Text, StyleSheet } from 'react-native';import { useLocation } from 'smartdevice'; export default function App() {  const loc = useLocation();        // { lat, lng, city }  return (    <View style={styles.box}>      <Text style={styles.city}>📍 {loc.city}</Text>      <Text style={styles.coord}>خط العرض: {loc.lat}</Text>      <Text style={styles.coord}>خط الطول: {loc.lng}</Text>    </View>  );} const styles = StyleSheet.create({  box: { padding: 24, alignItems: 'center' },  city: { fontSize: 24, fontWeight: 'bold', color: '#E8820C' },  coord: { marginTop: 6, color: '#555' },});

بدّل المدينة في اللوحة، فتتحدّث الإحداثيّات والاسم.

٢حساب المسافة

بالموقع يمكن حساب المسافة إلى نقطةٍ أخرى (مثلًا أقرب فرع). صيغة مبسّطة للمسافة التقريبيّة:

import { View, Text, StyleSheet } from 'react-native';import { useLocation } from 'smartdevice'; const BRANCH = { lat: 24.77, lng: 46.74, name: 'فرع العليا' }; function distanceKm(a, b) {  const dLat = (a.lat - b.lat) * 111;          // كل درجة عرض ≈ 111 كم  const dLng = (a.lng - b.lng) * 96;           // تقريبٌ لخطّ الطول  return Math.sqrt(dLat * dLat + dLng * dLng).toFixed(1);} export default function App() {  const loc = useLocation();  const km = distanceKm(loc, BRANCH);  return (    <View style={styles.box}>      <Text style={styles.c}>موقعك: {loc.city}</Text>      <Text style={styles.d}>المسافة إلى {BRANCH.name}: {km} كم</Text>    </View>  );} const styles = StyleSheet.create({  box: { padding: 24, alignItems: 'center' },  c: { fontSize: 16, color: '#555' },  d: { marginTop: 10, fontSize: 20, fontWeight: 'bold', color: '#2E7D32' },});

بدّل المدينة فتتغيّر المسافة. هكذا تعمل تطبيقات «أقرب فرع».

توقّع وتحقّق

ماذا يعطي مستشعر الموقع؟

قبل قراءة الموقع يجب:

إبقاء GPS نشطًا بلا داعٍ:

خط العرض بالإنجليزية:

الخلاصة

تحدٍّ برمجي: بطاقة موقع

متوسط

اعرض المدينة والإحداثيّات.

المطلوب:
  • استورد useLocation.
  • <Text testID="city"> يعرض اسم المدينة.
  • <Text testID="lat"> يعرض خطّ العرض.
👀 اعرض الناتج المطلوب (وجرّبه)
✓ التحقق الآلي من حلّك:
  • الكود يعمل بلا أخطاء في Console
  • المدينة الابتدائيّة الرياض
  • يعرض خطّ العرض 24.71
  • استُخدم useLocation

💡 تلميح 1
الموقع الابتدائيّ: الرياض، العرض 24.71.
💡 تلميح 2
loc يحوي city و lat و lng.

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

import { View, Text, StyleSheet } from 'react-native';import { useLocation } from 'smartdevice'; export default function App() {  const loc = useLocation();  return (    <View style={{ padding: 20 }}>      <Text testID="city" style={styles.c}>{loc.city}</Text>      <Text testID="lat" style={styles.v}>العرض: {loc.lat}</Text>    </View>  );} const styles = StyleSheet.create({  c: { fontSize: 22, fontWeight: 'bold', color: '#E8820C' },  v: { marginTop: 6, color: '#555' },});
انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←

📝 معلم؟ أرسل ملاحظة للمؤلف عن هذا الدرس