Bu projeyi kullanabilmeniz için Clone yaptıktan sonra bazı işlemler yapmanız gerekmektedir. Bu projede hem server hem de client(mobile) bulunduğu için bu işlemler ikiye ayrılmış durumdadır.
Komut satırını projenizin bulunduğu konumda açın. Daha sonra cd server komutu ile server klasörünün içine girin. npm install komutu ile projenin gerekli tüm bağımlılıklarını kurun. İşlem tamamlandıktan sonra client'a(mobile) geçmeden önce npm start yada npm run start:dev(Bu komutu kullanabilmek için nodemon paketini global olarak kurmanız gerekmektedir. Kurmak için npm install -g nodemon komutunu kullanabilirsiniz) komutlarından birini çalıştırın ve sunucuyu başlatın.
Komut satırını projenizin bulunduğu konumda açın. Daha sonra cd mobile komutu ile mobile klasörünün içine girin. npm install komutunu çalıştırarak gerekli bağımlılıkları kurun. Projeyi react-native run-android ya da react-native run-ios komutlarından herhangi birisini kullanarak projenizi açık olan herhangi bir emülatörde ya da gerçek bir cihazda test edebilirsiniz.
Ancak burada dikkat edilmesi gerek bir kaç nokta mevcuttur. Projeniz çalışabilir ancak Socket.io server'a bağlanmaması muhtemel.(ios'ta çalışır. Ancak android'de çalışmaz) Bunun sebebi Android'in localhost'u kabul etmemesi ve bunun yerine ip yazılması gerekmesinden kaynaklı. Bu ip'de bilgisayardan bilgisayara değişiklik göstermektedir. Bunun çözümü de yine yönteme göre değişiklik göstermektedir. Bunlarda farklı başlıklar altında toplanmaktadır.
Emülatörde işiniz biraz daha kolay aslında. Windows için: komut satırını açın ve ipconfig yazın. Burada aşağıda resimlerde görünen kısımlarda yazan başlıklardan hangisi varsa onu bulun:
Buradalarda kırmızı dikdörtgen arasındaki ip'yi kopyalıyoruz.
Projemizin mobile klasöründeki projenin içindeki src/store/IOStore.js dosyasını açıyoruz.
@observable ip = '192.168.x.x'; //Ip adresi yanlış olursa çalışmaz.
Not: IOS için localhost yazmanız yeterli olacaktır.
Bu satırın karşısındaki tek tırnak arasındaki değere kopyaladığınız ip adresini yapıştırın. Daha sonra kaydedin.
Hemen ardından da react-native run-android komutu ile projenizi açın. Yanlış ip adresini almadıysanız Socket.io server'a başarılı şekilde bağlantı sağlanacaktır.
İsminizi girdikten sonra 5 saniye sonunda bağlantı gerçekleşmezse , bağlantı başarısız demektir. Zaten bir alert pencersiyle uyarılacaksınız.
Uygulamayı gerçek cihazda test etmek emülatöre göre bir tık daha zahmetli olabilir.
Bu seçenek için yapmanız gereken test etmek istediğiniz cihaz ile bilgisayarın aynı ağda bağlı olması. Daha sonra bilgisayarınızın Wifi üzerinden local ip adresini bulmanız gerekmekte. Bunun için yine ipconfig komutunu komut satırında çalıştırırsanız yine üst başlıktaki işlemi yapmanız gerekir.
Dikdörtgen ile gösterilen kısımdaki ip'yi kopyalayın. Daha sonra yine yukarıdaki başlık gibi;
src/store/IOStore.js dosyasını açın ve şu satırı bulun;
@observable ip = '192.168.x.x'; //Ip adresi yanlış olursa çalışmaz.
Buraya ip adresini yapıştırın. Daha sonra kaydederek react-native run-android komutunu çalıştırabilirsiniz.
Bu seçenekte muhtemelen bilgisayarınıza internet kablo ile bağlıdır. Test etmek istediğiniz cihazı da kablosu bağlı olan modeme wifi ile bağlanmanız yeterli. Sonra ise ip adresini almanız gerekmektedir. Bunun için yine ipconfig komutunu komut satırında çalıştırırsanız yine üst başlıktaki işlemi yapmanız gerekir.
Yukarıdaki dikdörtgenle işaretli kısımdaki adresi kopyalayıp yine src/store/IOStore.js içerisindeki şu satırı bulun:
@observable ip = '192.168.x.x'; //Ip adresi yanlış olursa çalışmaz.
Daha sonra kopyaladığınız adresi buraya yapıştırın.
Buna rağmen yine de çalışmıyorsa muhtemelen doğru ip adresini kopyalayamamışsınızdır. Yaşadığınız sorunları bana bildirebilirsiniz.
Sorunları bildirmek için ise http://www.kodevreni.com adresinde konu açarak dile getirebilirsiniz.
Gerçek Cihaz Huawei P9 Lite 2017 1920 x 1080
Emülatör Google Nexus S 480x800
Emülatör Google Pixel 2 1920x1080
Bu şekilde 3 farklı cihazla local bir test gerçekleştirdim. Sonuç başarılıydı.
Not: Tabii bu server projesini bir server'a deploy edebilirsiniz. Bunun için internetten "Node.js deploy" yazarak istediğiniz sonuçları bulabilirsiniz.
Bunun için https://www.kodevreni.com/4601-react-native-ve-socketio-ile-real-time-chat-uygulamas%C4%B1/ adresini ziyaret edebilirsiniz.
Proje artık tek ekran içinde değil, 2 ekran içerisinde çalışmakta. Ayrıca Chat ekranında sağ menü yer almakta ve bu menü de aktif olan kullanıcı listesi yer almakta. Ayrıca kodlama düzeni açısından da bir kaç düzenleme getirildi. Projeye Mobx store eklendi. Proje Icon eklendi.