0Pricing
React Academy · درس

الوصول إلى واجهات الجهاز: الكاميرا والموقع والإشعارات الفورية

استخدم وحدات Expo SDK لطلب الأذونات والوصول إلى إمكانات الجهاز الأصلية.

الوصول إلى واجهات الجهاز: الكاميرا والموقع والإشعارات الفورية درس مجاني في React Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

وحدات Expo SDK

يوفر Expo SDK واجهات برمجة تطبيقات JavaScript لإمكانات الأجهزة الأصلية. ثبّت الحزم الفردية واطلب الأذونات قبل الوصول إلى العتاد.

# Install what you need:
npx expo install expo-camera expo-location expo-notifications

طلب الأذونات

اطلب دائمًا الإذن قبل الوصول إلى ميزات الجهاز الحساسة. تحقّق من النتيجة قبل المتابعة.

import * as Location from 'expo-location';

async function getLocation() {
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    Alert.alert('Permission denied');
    return;
  }
  const location = await Location.getCurrentPositionAsync({});
  console.log(location.coords);
}

الوصول إلى الكاميرا

استخدم expo-camera لعرض معاينة الكاميرا والتقاط الصور.

import { CameraView, useCameraPermissions } from 'expo-camera';
import { useRef } from 'react';

export function CameraScreen() {
  const [permission, requestPermission] = useCameraPermissions();
  const cameraRef = useRef(null);

  if (!permission?.granted) {
    return <Button onPress={requestPermission} title="Grant camera" />;
  }

  const takePicture = async () => {
    const photo = await cameraRef.current?.takePictureAsync();
    console.log(photo?.uri);
  };

  return <CameraView ref={cameraRef} facing="back" />;
}

منتقي الصور

يتيح expo-image-picker للمستخدمين اختيار الصور من ألبوم الكاميرا دون عرض واجهة الكاميرا.

import * as ImagePicker from 'expo-image-picker';

async function pickImage() {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    quality: 0.8,
    allowsEditing: true,
    aspect: [4, 3],
  });

  if (!result.canceled) {
    console.log(result.assets[0].uri);
  }
}

تتبّع الموقع

اشترك في تحديثات الموقع باستخدام watchPositionAsync() للتتبع في الوقت الفعلي. أزل الاشتراك عند إزالة المكوّن.

useEffect(() => {
  let subscription;
  (async () => {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') return;
    subscription = await Location.watchPositionAsync(
      { accuracy: Location.Accuracy.High, distanceInterval: 10 },
      location => setCoords(location.coords)
    );
  })();
  return () => subscription?.remove();
}, []);

الترميز الجغرافي والترميز الجغرافي العكسي

حوّل الإحداثيات إلى عناوين (الترميز الجغرافي العكسي)، أو العناوين إلى إحداثيات (الترميز الجغرافي)، باستخدام expo-location.

const [address] = await Location.reverseGeocodeAsync({ latitude: 37.78, longitude: -122.43 });
console.log(`${address.street}, ${address.city}, ${address.country}`);

إعداد الإشعارات الفورية

استخدم expo-notifications للتسجيل في الإشعارات الفورية والحصول على رمز Expo للإشعارات الفورية.

import * as Notifications from 'expo-notifications';

async function registerForPushNotifications() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') return null;
  const token = (await Notifications.getExpoPushTokenAsync()).data;
  return token; // send this to your server
}

معالجة الإشعارات الواردة

استمع إلى الإشعارات عندما يكون التطبيق في المقدمة، واستمع أيضًا إلى النقرات على الإشعارات.

useEffect(() => {
  const receivedSub = Notifications.addNotificationReceivedListener(notification => {
    console.log('Received:', notification);
  });
  const responseSub = Notifications.addNotificationResponseReceivedListener(response => {
    const data = response.notification.request.content.data;
    router.push(`/post/${data.postId}`);
  });
  return () => { receivedSub.remove(); responseSub.remove(); };
}, []);

الإشعارات المحلية

جدوِل الإشعارات المحلية (من دون الحاجة إلى خادم) باستخدام scheduleNotificationAsync.

await Notifications.scheduleNotificationAsync({
  content: { title: 'Reminder', body: 'Check your app!', data: {} },
  trigger: { seconds: 60 }, // fires after 60 seconds
});

الموقع في الخلفية

للوصول إلى الموقع في الخلفية، استخدم expo-task-manager وLocation.startLocationUpdatesAsync. ويتطلب ذلك أذونات إضافية في app.json.

تحقق سريع

ما الإجراء الذي يجب عليك القيام به دائمًا قبل الوصول إلى كاميرا الجهاز أو موقعه في Expo؟

مراجعة

استخدم وحدات Expo SDK (expo-camera وexpo-location وexpo-notifications) للوصول إلى الجهاز. اطلب الأذونات أولًا دائمًا، وتحقّق من النتيجة، ونظّف الاشتراكات داخل useEffect. سجّل التطبيق في الإشعارات الفورية وأرسل رمز Expo للإشعارات الفورية إلى الواجهة الخلفية.

الأسئلة الشائعة

هل درس «الوصول إلى واجهات الجهاز: الكاميرا والموقع والإشعارات الفورية» مجاني؟

نعم — نص درس «الوصول إلى واجهات الجهاز: الكاميرا والموقع والإشعارات الفورية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «الوصول إلى واجهات الجهاز: الكاميرا والموقع والإشعارات الفورية»؟

استخدم وحدات Expo SDK لطلب الأذونات والوصول إلى إمكانات الجهاز الأصلية. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «الوصول إلى واجهات الجهاز: الكاميرا والموقع والإشعارات الفورية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. مكوّنات React Native الأساسية مقابل DOM للويب
  2. التنسيق باستخدام StyleSheet API وFlexbox
  3. التنقل باستخدام Expo Router
  4. الوصول إلى واجهات الجهاز: الكاميرا والموقع والإشعارات الفورية
← العودة إلى React Academy