ثلاث ميزات من الجهاز تجعل Trailhead أكثر من مجرّد قائمة: المسار الذي مشيته، والصور التي التقطتها، وتنبيه لطيف في نهاية اليوم لتسجيل الرحلة التي نسيتها. تستخدم هذه الميزات ثلاث وحدات من Expo بينها الكثير من القواسم المشتركة: كلٌّ منها يحتاج إلى إذن (يُطلب بالطريقة التي عرضها الدرس السابق)، وكلٌّ منها يُرجع بيانات ستخزّنها بالأدوات التي تعلّمتها قبل درسين، ولكلٍّ منها تفصيلة واحدة تؤذيك إن تجاهلتها.
\nيعطيك getCurrentPositionAsync قراءة واحدة، وهذا يكفي لوسم نقطة بداية الرحلة. أما التتبّع فيحتاج إلى بثّ متواصل: يستدعي watchPositionAsync دالتك مع كل موقع جديد، ويُرجع اشتراكًا (subscription) يُبقي الـ GPS يعمل حتى تزيله.
import * as Location from 'expo-location';\nimport { useEffect, useState } from 'react';\n\nexport type Point = { latitude: number; longitude: number; accuracy: number | null; timestamp: number };\n\nexport function useRoute(active: boolean) {\n const [points, setPoints] = useState<Point[]>([]);\n\n useEffect(() => {\n if (!active) return;\n let subscription: Location.LocationSubscription | undefined;\n let cancelled = false;\n\n Location.watchPositionAsync(\n { accuracy: Location.Accuracy.High, distanceInterval: 10, timeInterval: 5000 },\n ({ coords, timestamp }) => {\n setPoints((prev) => [...prev, { latitude: coords.latitude, longitude: coords.longitude, accuracy: coords.accuracy, timestamp }]);\n },\n ).then((sub) => {\n if (cancelled) sub.remove();\n else subscription = sub;\n });\n\n return () => {\n cancelled = true;\n subscription?.remove();\n };\n }, [active]);\n\n return points;\n}تعالج العلامة cancelled حالة سباق دقيقة: الاشتراك يصل بشكل غير متزامن، فإن أُزيلت الشاشة قبل أن يُحَلّ الـ promise، لا تجد دالة التنظيف شيئًا تزيله بعد. والعلامة تجعل الاشتراك المتأخّر يزيل نفسه.
إلحاق العناصر بمصفوفة في الـ state مع كل قراءة لا بأس به لبضعة آلاف من النقاط، وهذا يغطّي رحلة نهارية طويلة. أما للمسارات متعدّدة الأيام، فاكتب النقاط إلى SQLite على دفعات واحتفظ في الذاكرة بالحديثة منها فقط، حتى لا ينسخ تحديث state واحد عشرات الآلاف من الكائنات.
\nالخيارات ميزانية للبطارية. يطلب Accuracy.High دقّة بنحو عشرة أمتار؛ وBalanced بنحو مئة متر وأرخص بكثير. وdistanceInterval: 10 تعني «لا تستدعِني إلا بعد التحرّك عشرة أمتار»، وtimeInterval يحدّد سقف التكرار على Android. مسار المشي يحتاج إلى دقّة عالية، لكنه لا يحتاج إلى نقطة كل ثانية.
التتبّع والشاشة مقفلة يحتاج إلى موقع في الخلفية ومهمّة (task) مسجّلة عبر expo-task-manager، إضافةً إلى الإذن الإضافي والتدقيق في المراجعة اللذين تحدّث عنهما الدرس السابق. أطلق التتبّع في المقدّمة أولًا؛ فكثير من المتنزّهين يُبقون الشاشة مضاءة لرؤية الخريطة على أي حال.
للصور، يفتح expo-image-picker واجهة مكتبة الصور أو الكاميرا الخاصة بالنظام نفسه، وهي مألوفة للمستخدمين وتتولّى التحرير نيابةً عنك:
import * as ImagePicker from 'expo-image-picker';\n\nasync function addPhoto(fromCamera: boolean) {\n const options: ImagePicker.ImagePickerOptions = { mediaTypes: ['images'], quality: 0.7, allowsEditing: true };\n\n if (fromCamera) {\n const permission = await ImagePicker.requestCameraPermissionsAsync();\n if (!permission.granted) return;\n }\n\n const result = fromCamera\n ? await ImagePicker.launchCameraAsync(options)\n : await ImagePicker.launchImageLibraryAsync(options);\n\n if (result.canceled) return;\n const uri = result.assets[0].uri;\n // copy into the app's document directory, then save the new path on the hike\n}تضغط quality: 0.7 صورة JPEG، وهذا مهم حين يكون للرحلة عشرون صورة. والإلغاء ليس خطأ: يُحَلّ الـ promise مع canceled: true. والـ uri المُرجَع يشير إلى مجلّد مؤقت قد يمسحه النظام، لذا انسخ الملف إلى مجلّد المستندات الخاص بتطبيقك باستخدام expo-file-system وخزّن ذلك المسار في SQLite، كما وصف درس التخزين. ومحاكي iOS ليس فيه كاميرا، فاختبر التقاط الصور على هاتف حقيقي.
وحين تحتاج إلى واجهة كاميرا خاصة بك، مثل مسح رموز QR على علامات الدروب، استخدم expo-camera، ففيه الـ component المسمّى CameraView الذي يعرض معاينة حيّة داخل تخطيطك.
المتنزّهون ينسون تسجيل رحلاتهم. وتذكير يومي في السابعة مساءً، فقط في الأيام التي فعّلوه فيها، هو إشعار محلي: يُجدوَل على الجهاز، دون أي خادم.
\nimport * as Notifications from 'expo-notifications';\nimport { Platform } from 'react-native';\n\nNotifications.setNotificationHandler({\n handleNotification: async () => ({\n shouldShowBanner: true,\n shouldShowList: true,\n shouldPlaySound: false,\n shouldSetBadge: false,\n }),\n});\n\nexport async function enableDailyReminder() {\n if (Platform.OS === 'android') {\n await Notifications.setNotificationChannelAsync('reminders', {\n name: 'Hike reminders',\n importance: Notifications.AndroidImportance.DEFAULT,\n });\n }\n const { granted } = await Notifications.requestPermissionsAsync();\n if (!granted) return false;\n\n await Notifications.cancelAllScheduledNotificationsAsync();\n await Notifications.scheduleNotificationAsync({\n content: { title: 'Out on a trail today?', body: 'Log it while you remember the details.', data: { url: '/new-hike' } },\n trigger: { type: Notifications.SchedulableTriggerInputTypes.DAILY, hour: 19, minute: 0, channelId: 'reminders' },\n });\n return true;\n}يقرّر setNotificationHandler هل يظهر الإشعار بينما التطبيق مفتوح. وعلى Android، تنتمي الإشعارات إلى قنوات (channels) يستطيع المستخدمون كتم كلٍّ منها على حدة في الإعدادات، لذا أنشئ قناة باسم واضح. والإلغاء قبل الجدولة يتجنّب تكديس تذكيرات مكرّرة في كل مرة يُبدَّل فيها الإعداد.
وتؤتي data.url ثمارها مع Expo Router: في الـ root layout، استمع عبر Notifications.addNotificationResponseReceivedListener، واقرأ response.notification.request.content.data.url، واستدعِ router.push(url). عندها يفتح النقر على التذكير نافذة إضافة الرحلة (الـ modal) مباشرة، عبر المسارات نفسها التي تستخدمها الـ deep links.
أما الإشعارات الفورية (push)، التي تُرسَل من خادم، فتحتاج إلى أكثر من ذلك: development build، وبيانات اعتماد لخدمات الإشعارات لدى Apple وGoogle (يديرها EAS)، وpush token يُرسَل إلى الـ backend الخاص بك. أما كود الجدولة والمعالجة الذي كتبته للتوّ فيبقى كما هو.
\nالقسم 5 عن إيصال كل هذا إلى أيدي المستخدمين: تصحيح الأخطاء، والاختبار، والإطلاق.
\n","toc":[{"id":"sec-1","text":"تتبّع المسار","level":2},{"id":"sec-2","text":"صور الدروب","level":2},{"id":"sec-3","text":"إشعار تذكير","level":2}],"takeaways":["يبثّwatchPositionAsync المواقع حتى تستدعي remove() على الاشتراك (subscription) الذي يُرجعه، لذا أزله في دالة التنظيف الخاصة بالـ effect.","الدقّة وفترات التحديث تقايض الضبط بالبطارية؛ اختر أقل الإعدادات دقّةً تتحمّلها الميزة.","قراءات GPS مشوّشة، فأسقط النقاط ضعيفة الدقّة قبل حساب المسافة.","يُرجع expo-image-picker القيمة canceled ومصفوفة assets؛ والملفات المختارة تبدأ في مجلّد مؤقت، فانسخ أي شيء تريد الاحتفاظ به.","الإشعارات المحلية تُجدوَل على الجهاز بمُطلِق (trigger)، ويمكن أن تحمل data المسار الذي يُفتح حين ينقر المستخدم عليها."],"further":[{"title":"Location","url":"https://docs.expo.dev/versions/latest/sdk/location/"},{"title":"ImagePicker","url":"https://docs.expo.dev/versions/latest/sdk/imagepicker/"},{"title":"Notifications","url":"https://docs.expo.dev/versions/latest/sdk/notifications/"}],"quiz":[{"q":"تستدعي شاشة التتبّع في Trailhead الدالة watchPositionAsync داخل effect لكنها لا تخزّن النتيجة أبدًا. ماذا يحدث بعد أن يغادر المستخدم الشاشة؟
remove() يوقفها."},{"text":"ينهار التطبيق في المرة التالية التي يصل فيها موقع.","why":"الـ callback ما زال يعمل؛ وكل ما في الأمر أن React تتجاهل تحديثات الـ state للشاشة المُزالة. إنه تسرّب صامت، لا انهيار."},{"text":"لا شيء، لأن الموقع لا يتحدّث إلا ما دامت الشاشة ظاهرة.","why":"موقع المقدّمة يستمر في التحديث ما دام التطبيق مفتوحًا، أيًّا كانت الشاشة المعروضة."},{"text":"يستمر الـ GPS في العمل واستنزاف البطارية، لأن أحدًا لم يستدعِ remove() على الاشتراك.","why":"صحيح. خزّن الاشتراك واستدعِ subscription.remove() في دالة التنظيف الخاصة بالـ effect."}],"answer":3},{"q":"في مسار مسجّل، تقفز نقطة واحدة 400 متر جانبًا بينما كان المتنزّه واقفًا تحت الأشجار. ما أفضل ردّ في الكود؟
","options":[{"text":"اطلبAccuracy.BestForNavigation حتى لا يخطئ الـ GPS أبدًا.","why":"إعدادات الدقّة الأعلى تقلّل الخطأ لكنها لا تلغيه، وتكلّف بطارية أكثر."},{"text":"تجاهل النقاط التي تكون قيمة coords.accuracy المبلَّغ عنها فيها أسوأ من حدّ معيّن، مثل 25 مترًا، قبل إضافتها إلى المسار.","why":"صحيح. كل قراءة تُبلغ عن نصف قطر عدم اليقين الخاص بها؛ وتصفية القراءات السيئة تُبقي المسار والمسافة صادقين."},{"text":"قرّب كل الإحداثيات إلى منزلتين عشريتين.","why":"منزلتان عشريتان من خط العرض تعنيان دقّة بنحو 1 km، وهذا يدمّر المسار."}],"answer":1},{"q":"بعد launchImageLibraryAsync، يتراجع المستخدم دون أن يختار شيئًا. ماذا يرى كودك؟
canceled: true ولا assets، وينبغي أن تتعامل معها بألّا تفعل شيئًا.","why":"صحيح. تحقّق بـ if (result.canceled) return; قبل قراءة result.assets[0].uri."}],"answer":2}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Total distance of a recorded route in km, rounded to 2 decimals.\n// Ignore points whose accuracy (meters) is worse than maxAccuracyM.\nfunction trackDistanceKm(points, maxAccuracyM = 25) {\n let total = 0;\n for (let i = 1; i < points.length; i++) {\n const dLat = points[i].latitude - points[i - 1].latitude;\n const dLon = points[i].longitude - points[i - 1].longitude;\n total += Math.sqrt(dLat * dLat + dLon * dLon);\n }\n return total;\n}\n\nconst route = [\n { latitude: 46.5, longitude: 7.9, accuracy: 8 },\n { latitude: 46.51, longitude: 7.9, accuracy: 12 },\n { latitude: 46.53, longitude: 7.95, accuracy: 90 },\n { latitude: 46.51, longitude: 7.92, accuracy: 10 },\n];\nconsole.log(trackDistanceKm(route), 'km');\n"},"solution":{"js":"const EARTH_RADIUS_KM = 6371;\nconst toRad = (deg) => (deg * Math.PI) / 180;\n\nfunction haversineKm(a, b) {\n const dLat = toRad(b.latitude - a.latitude);\n const dLon = toRad(b.longitude - a.longitude);\n const h = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(a.latitude)) * Math.cos(toRad(b.latitude)) * Math.sin(dLon / 2) ** 2;\n return 2 * EARTH_RADIUS_KM * Math.asin(Math.sqrt(h));\n}\n\nfunction trackDistanceKm(points, maxAccuracyM = 25) {\n const good = points.filter((p) => p.accuracy == null || p.accuracy <= maxAccuracyM);\n let total = 0;\n for (let i = 1; i < good.length; i++) total += haversineKm(good[i - 1], good[i]);\n return Math.round(total * 100) / 100;\n}\n\nconst route = [\n { latitude: 46.5, longitude: 7.9, accuracy: 8 },\n { latitude: 46.51, longitude: 7.9, accuracy: 12 },\n { latitude: 46.53, longitude: 7.95, accuracy: 90 },\n { latitude: 46.51, longitude: 7.92, accuracy: 10 },\n];\nconsole.log(trackDistanceKm(route), 'km');\n"},"checks":[{"id":"one-step","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return typeof trackDistanceKm === 'function' && trackDistanceKm([p(0, 0), p(0.01, 0)]) === 1.11;"},{"id":"sums-route","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return trackDistanceKm([p(46.5, 7.9), p(46.51, 7.9), p(46.51, 7.92)]) === 2.64;"},{"id":"drops-inaccurate","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return trackDistanceKm([p(46.5, 7.9, 8), p(46.51, 7.9, 12), p(46.53, 7.95, 90), p(46.51, 7.92, 10)]) === 2.64;"},{"id":"custom-threshold","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return trackDistanceKm([p(0, 0, 5), p(0.01, 0, 40), p(0.02, 0, 5)], 50) === 2.22 && trackDistanceKm([p(0, 0, 5), p(0.01, 0, 40), p(0.02, 0, 5)], 30) === 2.22;"},{"id":"short-input","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return trackDistanceKm([]) === 0 && trackDistanceKm([p(1, 1)]) === 0 && trackDistanceKm([p(1, 1, 99), p(1.01, 1, 99)]) === 0;"},{"id":"null-accuracy","test":"const p = (latitude, longitude, accuracy = 5) => ({ latitude, longitude, accuracy }); return trackDistanceKm([p(0, 0, null), p(0.01, 0, null)]) === 1.11;"}],"title":"قِس مسار GPS","prompt":"أصلح trackDistanceKm(points, maxAccuracyM = 25) ليعرض Trailhead الطول الحقيقي للرحلة المسجّلة. لكل نقطة latitude وlongitude (بالدرجات) وaccuracy (بالأمتار، أو null حين تكون مجهولة).
accuracy فيها أكبر من maxAccuracyM. واحتفظ بالنقاط التي دقّتها null.0.يعامل الكود المبدئي الدرجات على أنها إحداثيات مسطّحة، وهذا خاطئ في كل مكان، وخاطئ جدًا بعيدًا عن خط الاستواء.
\n","hints":["صفِّ أولًا:points.filter((p) => p.accuracy == null || p.accuracy <= maxAccuracyM).","معادلة haversine: حوّل فرقَي خط العرض وخط الطول إلى راديان، ثم h = sin²(dLat/2) + cos(lat1)·cos(lat2)·sin²(dLon/2) وdistance = 2 · 6371 · asin(√h).","قرّب مرة واحدة في النهاية باستخدام Math.round(total * 100) / 100، لا بعد كل خطوة، وإلا تراكمت أخطاء التقريب."],"explanation":"الدرجات ليست شبكة مسطّحة: درجة خط الطول الواحدة تنكمش من نحو 111 km عند خط الاستواء إلى صفر عند القطبين، لذا أعطت نظرية فيثاغورس على الدرجات الخام في الكود المبدئي نتائج بلا معنى. أما معادلة haversine فتقيس على سطح الأرض، وهي دقيقة لمسافات المشي بهامش أصغر بكثير من خطأ قراءة الـ GPS نفسها. والتصفية بحسب accuracy قبل الجمع تُزيل التعرّجات التي كانت ستضيف كيلومترات زائفة تحت الأشجار. والدالة نقية، فيمكن لشاشة التتبّع استدعاؤها مع كل نقطة جديدة، أو يمكنك حسابها مرة واحدة حين تُحفظ الرحلة.