React-Native Uygulamasına Apple Watch Uygulaması Geliştirme

Apple Watch Extension

JavaScript kullanarak Apple Watch Extension’ı geliştirmemiz şimdilik mümkün olmadığı için, projemizi XCode ile açıyoruz. Bunun için XCode ‘u çalıştırıp Open diyerek ProjeDizini/ios/watchTestApp.xcodeworkspace dosyasını seçiyoruz.

Projeyi açtığımızda sol tarafta, Project Navigator alanında ( 1 numaralı alan ) uygulamamızı tıklıyoruz. Sağ tarafta projede varsayılan olarak bulunan, projeyle aynı isimdeki target ‘ı ( 2 numaralı alan ) göreceğiz.

3 numaralı alanda yer alan ( + ) butonuna tıklayarak watchOS için, watchOS sekmesi altından “Watch App for iOS App” seçerek yeni bir target ekliyoruz.

Projemize bir isim verip Finish diyoruz.

XCoode, finish dedikten sonra scheme etkinleştirmesi için bir soru sorabilir. Bu soruyu Active diyerek geçiyoruz.

Bu adımları tamamladıktan sonra Project Navigator alanında WatchExtension dosyalarını görebiliriz. ( Proje isminde de extension kelimesini kullandığım için biraz kafa karışıklığı yaratıyordu. Bu sebeple projenin devamında isim değişikliği yaptım. 😊 )

Targets kısmından “WatchExtension” ‘ı çalıştırarak test edebilirsiniz.

Bu aşamada “undefined” içerikli 40 civarı hata alabilirsiniz. Bunun çözümü için ufak bir düzenleme yapmanız yeterli olacak;

• Targets kısmından watchApp Extension’ı seçin,
• Build Settings sekmesine gelin,
• Sekmede “All” seçeneğinin seçili olduğundan emin olarak Library Search Paths kısmını bulun,
• Eğer buradaki value kısmında birden fazla değer var ise sadece “$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)” değeri kalacak şekilde diğer değerleri silin.

Düzenlemeyi yaptıktan sonra projeyi tekrar build edip çalıştırdığımızda WatchOS simülatörüne de uygulama yüklenmiş olacak.

SwiftUI ile Apple Watch kodlaması

Apple Watch üzerinden veri alma ve saate gelen verinin gösterilmesi için bir ekran yapacağız. Watch uygulamasını, XCode projemize ekledikten sonra gelen watchApp Extension isimli klasöründe yer alan ContentView.swift dosyasını aşağıdaki şekilde düzenliyoruz;

import SwiftUI

struct ContentView: View {
  var receivedData : String = ""
  
    var body: some View {
      VStack {
        Text("Gelen Data : ")
        Text(self.receivedData)
              .padding()
      }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Gelen datayı basacağımız bir Text alanı ve string bir değişken tanımladık.

Şimdi saat ile telefon arasında bağlantıyı kuracağımız bir model dosyası yaratacağız ve bu dosya içerisine WatchConnectivity kütüphanesi import edeceğiz. Bu kütüphane vasıtasıyla iki cihaz arasındaki iletişimi yöneteceğiz.

import Foundation
import WatchConnectivity

class WatchModel : NSObject,  WCSessionDelegate, ObservableObject{
  var session: WCSession
  @Published var message = ""
  
  init(session: WCSession = .default){
    self.session = session
    super.init()
    self.session.delegate = self
    session.activate()
  }
  func session(_ session: WCSession, activationDidCompleteWith activationState: WCSessionActivationState, error: Error?) {
  }
  
  func session(_ session: WCSession, didReceiveMessage message: [String : Any], replyHandler: @escaping ([String : Any]) -> Void) {
    DispatchQueue.main.async {
      self.message = message["message"] as? String ?? "Veri yok"
    }
  }
}

Watch Connectivity kütüphanesi hakkında daha detaylı bilgi edinmek için bu ve bu bağlantıları kullanabilirsiniz.

Şimdi modelimizi ContentView içerisinden çağırabilir ve gelen datayı göstermek için yarattığımız Text alanına basıyoruz. ContentView içerisine aşağıdaki kodu ekliyoruz ve Text 'in değerini tutan değişkeni değiştiriyoruz;

ObservedObject var model=WatchModel()

Bu düzenleme sonrasında ContentView.swift dosyamızın son hali aşağıdaki gibi oluyor;

import SwiftUI

struct ContentView: View {
  var receivedData : String = ""
  @ObservedObject var model = WatchModel()
  
    var body: some View {
      VStack {
        Text("Gelen Data : ")
        Text(self.model.message)
              .padding()
      }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

React Native Watch Connectivity

React native ile geliştirdiğimiz uygulamamızın, bir Apple Watch ile iletişime geçmesi için Watch Connectivity API kullanmamız gerekiyor. Bunu yapabilmek için de React Native Watch Connectivity paketini kullanacağız.

npm install react-native-watch-connectivity --save
# ya da
yarn add react-native-watch-connectivity

React Native 0.60 ve sonrası sürümlerde otomatik linkleme çalışıyor fakat 0.60 öncesi sürümler için aşağıdaki komutla linkleme işlemini yapabiliriz. Ayrıca auto linkleme işlemi sonucunda pod dosyaları yüklenmemiş ise manuel kurulum bağlantısına göz atarak PodFile 'a ekleme yaparak yükleme yapmalısınız.

react-native link

Manuel olarak linklemek için ise bu bağlantıya göz atabilirsiniz. React Native Watch Connectivity hakkında detaylar için dokümantasyonuna göz atabilirsiniz.

Cihazlar arası veri transferine geçmeden önce, saatin erişilebilir ve eşlenmiş olup olmadığını kontrol edilmelidir. Bunun için de React Native Watch Connectivity içerisinde yer alan getReachtability ve getIsPaired fonksiyonlarını kullanacağız.

Eğer cihaz açık ve eşleştirilmiş durumda ise sendMessage fonksiyonu ile datalarımızı, saate göndereceğiz.

import React, { useState } from 'react';
import { Alert, Button, SafeAreaView, StyleSheet, Text, TextInput } from 'react-native';
import { getIsPaired, getReachability, sendMessage } from "react-native-watch-connectivity";

const App = () => {
  const [textInputValue, setTextInputValue] = useState("")
  const [receivedValue, setReceivedValue] = useState("Saatten gelen veri burada yer alacak")
  const [isReachable, setIsReachable] = useState(false)
  const [isPaired, setIsPaired] = useState(false)

  const [deviceOk, setDeviceOk] = useState(false)

  // Cihazın açık ve eşleştirilmiş olma durumu kontrol edilir
  const checkWatch = () => {
    getReachability()
      .then((reachable) => {
        setIsReachable(reachable)
        if (reachable)
          getIsPaired()
            .then((paired) => {
              setIsPaired(paired)
              if (paired)
                setDeviceOk(true)
            })
            .catch(err => console.warn(err))
      })
      .catch(err => console.warn(err))
  }

  // Data cihaza gönderilir
  const send2Watch = () => {
    if (deviceOk) {
      const message = {
        "message": textInputValue,
      }
      sendMessage(message, replyHandler, errorHandler);
    } else
      Alert.alert("Cihaza erişilemiyor ya da eşleştirilmemiş!")
  }

  // Opsiyonel yanıt handler
  const replyHandler = response => {
    console.warn("Saatten gelen yanıt : ", response);
  }

  // Opsiyonel hata handler
  const errorHandler = error => {
    console.warn(error)
  }

  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        placeholder="Veri Girişi" a
        value={textInputValue}
        onChangeText={text => setTextInputValue(text)}
        style={styles.textInput} />
      <Button disabled={!deviceOk} title="Saate Gönder" onPress={() => send2Watch()} />
      <Button title="Erişimi Kontrol Et" onPress={() => checkWatch()} />

      <Text style={[styles.text, { fontWeight: "bold", marginTop: 30 }]}>Durum :</Text>
      <Text style={styles.text}>{isReachable ? "Cihaz ulaşılabilir" : "Cihaza ulaşılamıyor"}</Text>
      <Text style={styles.text}>{isPaired ? "Cihaz eşleştirilmiş" : "Cihaz eşleştirilmemiş"}</Text>

      <Text style={[styles.text, { fontWeight: "bold", marginTop: 30 }]}>Gelen Veri :</Text>
      <Text style={styles.text}>{receivedValue}</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
  },
  textInput: {
    width: "80%",
    height: 30,
    borderBottomWidth: 1,
  },
  text: {
    marginTop: 20,
  }
});

export default App;

Kodumuzda bu güncellemeleri de yaptıktan sonra eğer simülatör telefon ve simülatör saatimiz arasında erişim var ise direkt test edebiliriz.

Eğer dataların gönderiminde ya da cihaza erişim veya eşleşme problemi yaşıyorsanız da her iki cihazdan da uygulamarı silip tekrar run etmeyi deneyebilirsiniz. Sorun devam etmesi halinde cihazlardaki uygulamaları kapat / aç yapmayı deneyebilirsiniz.

Eğer bu denemelere rağmen erişim problemi yaşıyorsanız, simülatörler arası erişimi XCode üzerinden kontrol edebilirsiniz. Bunun için aşağıdaki görselde yer alan menüye girin. Ardından kullandığınız iPhone simülatörüne bağlı bir Apple Watch cihazı olup olmadığını kontrol etmelisiniz. Eğer eşleştirilmiş bir cihaz yok ise (+) butonuna tıklayarak yeni bir tane ekleyebilirsiniz.

Hepsi bu kadar!

React native uygulamaları için temel düzeyde Apple Watch uygulaması geliştirmesi bu kadar basit. Projenin kaynak kodlarına erişmek için buraya tıklayabilirsiniz. Ayrıca sorularınız olursa bu bağlantıya tıklayarak bize ulaşabilirsiniz.