Cihaz API'lerine Erişme: Kamera, Konum ve Anlık Bildirimler
İzin istemek ve yerel cihaz yeteneklerine erişmek için Expo SDK modüllerini kullanın.
Cihaz API'lerine Erişme: Kamera, Konum ve Anlık Bildirimler, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
Expo SDK Modülleri
Expo SDK, yerel cihaz yetenekleri için JavaScript API'leri sağlar. Donanıma erişmeden önce ayrı paketleri kurun ve izin isteyin.
# Install what you need:
npx expo install expo-camera expo-location expo-notificationsİzin İsteme
Hassas cihaz özelliklerine erişmeden önce her zaman izin isteyin. Devam etmeden önce sonucu kontrol edin.
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);
}Kamera Erişimi
Kamera önizlemesi göstermek ve fotoğraf çekmek için expo-camera kullanın.
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" />;
}Görüntü Seçici
expo-image-picker, kamera arayüzünü göstermeden kullanıcıların kamera rulolarından görüntü seçmesine olanak tanır.
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);
}
}Konum İzleme
Gerçek zamanlı izleme için watchPositionAsync() ile konum güncellemelerine abone olun. Bileşen kaldırılırken aboneliği kaldırın.
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();
}, []);Coğrafi Kodlama ve Tersine Coğrafi Kodlama
expo-location ile koordinatları adreslere (tersine coğrafi kodlama) veya adresleri koordinatlara (coğrafi kodlama) dönüştürün.
const [address] = await Location.reverseGeocodeAsync({ latitude: 37.78, longitude: -122.43 });
console.log(`${address.street}, ${address.city}, ${address.country}`);Anlık Bildirim Kurulumu
Anlık bildirimlere kaydolmak ve Expo anlık bildirim belirteci almak için expo-notifications kullanın.
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
}Gelen Bildirimleri İşleme
Uygulama ön plandayken gelen bildirimleri ve bildirimlere yapılan dokunmaları dinleyin.
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(); };
}, []);Yerel Bildirimler
Yerel bildirimleri (sunucu gerekmez) zamanlamak için scheduleNotificationAsync kullanın.
await Notifications.scheduleNotificationAsync({
content: { title: 'Reminder', body: 'Check your app!', data: {} },
trigger: { seconds: 60 }, // fires after 60 seconds
});Arka Planda Konum
Arka planda konum almak için expo-task-manager ve Location.startLocationUpdatesAsync kullanın. app.json içinde ek izinler gerekir.
Kısa Sınama
Expo'da cihaz kamerasına veya konuma erişmeden önce her zaman ne yapmanız gerekir?
Özet
Cihaza erişim için Expo SDK modüllerini (expo-camera, expo-location, expo-notifications) kullanın. Her zaman önce izin isteyin, sonucu kontrol edin ve useEffect içinde abonelikleri temizleyin. Anlık bildirimlere kaydolun ve Expo anlık bildirim belirtecini arka ucunuza gönderin.
Sıkça Sorulan Sorular
“Cihaz API'lerine Erişme: Kamera, Konum ve Anlık Bildirimler” dersi ücretsiz mi?
Evet — “Cihaz API'lerine Erişme: Kamera, Konum ve Anlık Bildirimler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“Cihaz API'lerine Erişme: Kamera, Konum ve Anlık Bildirimler” dersinde ne öğreneceğim?
İzin istemek ve yerel cihaz yeteneklerine erişmek için Expo SDK modüllerini kullanın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Cihaz API'lerine Erişme: Kamera, Konum ve Anlık Bildirimler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- React Native Temel Bileşenleri ve Web DOM
- StyleSheet API'si ve Flexbox ile Stil Verme
- Expo Router ile Gezinme
- Cihaz API'lerine Erişme: Kamera, Konum ve Anlık Bildirimler