React Native'de Oturum Açma: Bilmeniz Gereken Her Şey!

Günlük kaydı, React Native uygulama geliştirme projelerinde çok önemli bir unsurdur çünkü bu, geliştirme aşamasında uygulamada hata ayıklamak için en kolay ve en hızlı yöntemlerden biridir. Günlüğe kaydetme, kod çalışırken sorunla ilgili ayrıntılı bilgi ve geri bildirim sağlar. Ayrıca, geliştiricilerin bir uygulamanın davranışını anlamalarına yardımcı olur.

Ancak, uygulama geliştirme sürecinde günlük kaydı yapılmalıdır; uygulama dağıtıldıktan sonra artık faydalı değil. Bunun nedeni, bu günlüklerin istemci tarafında oluşturulmasıdır. Böylece dağıtım sonrası aşamada, günlükler aracılığıyla tespit edilen hatalar yalnızca kullanıcılar tarafından erişilebilir olacak ve tarayıcılarında kaybolacaktır. Geliştirme ekibi, bu hataları yalnızca bir kullanıcı bir hata raporu doldurursa belirleyebilir ki bu, gerçekleşmesi en düşük ihtimaldir. Kullanıcılar sorunu bildirmek yerine çoğunlukla uygulamayı terk eder.

Bu gönderi, React Native projelerinde oturum açma ve sınırlamaları çözme yöntemleri hakkında kapsamlı bilgiler sağlar. Ancak, daha derine inmeden önce, bir React Native Uygulamasının mimarisine bir göz atalım.

React Yerel Mimari/Yürütme Ortamı

React Native yürütme ortamı, üç ana iş parçacığından oluşur - "Native" iş parçacığı, "JS" iş parçacığı ve gölge düğümü işleyen bir arka plan iş parçacığı. Bu threadler birbirleriyle “Bridge” isimli bir kütüphane üzerinden haberleşirler.

React Native'de Oturum Açma: Dikkate Alınması Gereken Temel Adımlar

Şimdi, React Native ortamında oturum açma hakkında kapsamlı içgörüler toplayalım.

Günlükler Nasıl Okunur?

JavaScript günlükleri, "geliştiricilerin araçları" bölümünün "konsol" bölümünde görülebilir. Tarayıcıda, uzaktan JavaScript hata ayıklaması için kullanılan "geliştiricilerin araçlarını" bulacaksınız. Ancak React Native geliştiricileri, hata ayıklayıcı bağlandığında bu günlükleri görüntüleyebilir ve bu, uygulama yürütme sürecini bir dereceye kadar yavaşlatabilir. Peki çözüm nedir? Kayıt devam ederken cihazınızın yavaşlamamasını sağlamak için tepki-yerel log-ios (iOS uygulamaları için) ve tepki-yerel log-android (Android uygulamaları için) gibi komutları kullanmanız gerekir. Bu şekilde, yalnızca JavaScript dizisinde değil, uygulamanın tamamında neler olup bittiği hakkında daha fazla bilgi sahibi olursunuz.

Günlükleri okuma konusunda size daha fazla netlik sağlamak için bunu ayrıntılı olarak tartışalım!

Konsol Günlükleri

Konsol günlüklerini görüntülemek için npx expo start komutunu çalıştırmanız ve bir cihaz bağlamanız gerekir; konsol günlükleri terminal işleminde görünecektir. Çalışma zamanı, bu günlükleri web soketleri aracılığıyla Expo CLI'ye gönderir. Geliştirme araçları doğrudan motora bağlı olmadığından, burada düşük kaliteli günlükler alırsınız. Daha yüksek doğrulukta günlükler oluşturmak için, console.table gibi gelişmiş günlük tutma işlevlerini kullanabilirsiniz. Bunun için Hermes kullanarak bir geliştirme derlemesi oluşturmanız ve ardından denetçiyi bağlamanız gerekir. Hermes, React Native ortamı için optimize edilmiş bir JS motorudur. Hermes, bayt koduna önceden JS derlemesi yaparak bir uygulamanın başlatma süresini iyileştirir.

Sistem Günlükleri

Bu tür günlükler, cihazınızda gerçekleşen her şeyin günlüklerini ve ayrıca işletim sistemi ve diğer uygulamalar tarafından oluşturulan günlükleri görüntülemek istiyorsanız faydalıdır. Bunun için terminalde aşağıdaki komutları kullanmanız gerekmektedir.

Android cihazlar için: npx tepki-yerel log-android

iOS cihazlar için: tepki-yerel log-npxios

Günlükler Nasıl Yazılır?

İşte günlüklerin nasıl yazılacağı! React Native Console günlüğüne çıktınız, Uygulama günlüklerinde görünür. Günlükleri yazarken uygun günlük düzeyini kullanmak önemlidir. console.log'un yanı sıra console.info, console.warn, console.debug, vb. gibi başka günlük seviyeleri de vardır. Bu günlüklerin her birinin belirli bir amacı vardır ve gereken bilgi düzeyi üzerinde daha ayrıntılı bir kontrol sağlar. Bir dizi olayın beklenen kalıba göre gerçekleşip gerçekleşmediğini anlamak için console.info'yu kullanabilirsiniz. console.warn bazı beklenmeyen durumlar meydana gelirse kullanılır; örneğin, tamamen yanlış olmayan ancak sorgulanabilir görünen bir sunucu yanıtı. consoe.debug, sorunları çözmek için geçici günlüklere ihtiyaç duyduğunuzda kullanılır.

Günlük Kitaplıklarının Önemi

Müşterinin ihtiyacına göre farklı seviyelere dayalı olarak günlükleri kaydedeceğinden, günlükleri yazarken bir günlük kitaplığı kullanılması önerilir. Günlükler şifrelenmiş bir dosya biçiminde kaydedilecek ve günlük mesajları geliştiricilerin referansı için gönderilecek veya görüntülenecektir. Bu tür kullanıma hazır kaydediciler, geliştiriciler için zamandan ve emekten tasarruf sağlar.

Üretim ortamında uygun günlük dosyaları yoksa, sorunları ayıklamak zorlaşır. Bunun nedeni, günlük dosyalarının beklenmeyen sorunları veya bağlantısı kesilen hataları ayıklamanıza yardımcı olan tek bilgi kaynağı olmasıdır. Günlüğe kaydetme kitaplıklarının kullanımı bu sınırlamayı giderir.

React Native Logging Libraries: Örnekler

React-native-file-logger

React-native-file-logger, tepki yerel ortamı için bir dosya kaydedicidir ve Logback (Android için) ve CocoaLumberjack (iOS için) dosya kaydedicilerini kullanarak konsol çağrılarından gelen mesajları günlük dosyalarına ekleyebilir. Şu komutu kullanarak yapılandırın: FileLogger.configure(). Yapılandırıldıktan sonra, mevcut tüm console.log/debug/… çağrılarını otomatik olarak bir dosyaya kaydeder.

React-native-file-logger, TypeScript ile yazılmıştır ve isteğe bağlı bir dosya kaydırma politikası sunar. Dosyalar, boyuta ve gereken süreye göre yuvarlanır. Yuvarlanma politikası son derece özelleştirilebilir. Dosya çıktısı için günlük düzeyini ve günlük dosyalarının depolandığı bir yol olan günlük dizinini özelleştirebilirsiniz. Ayrıca, dosya günlüğü için konsol çağrılarını kullanmak istemiyorsanız, günlük dosyasına doğrudan günlük dosyası yazma seçeneğiniz vardır.

Bu günlükçü, başka herhangi bir kitaplığa bağımlı olmadan dosya günlüklerini geliştiricilere e-posta ile gönderebilir. Günlükçü, React Native'in belgelenmemiş global._inspectorLog'unu kullanır. React-native-file-logger'ı kullanarak konsol çağrılarını engelleyebilir ve biçimlendirilmiş günlük mesajını alabilirsiniz.

tepki-yerel-günlükleri

Bu React Native kaydedici, dosya yazma, renkli konsol vb. gibi özel "günlük seviyeleri" ve "aktarımlar" ile birlikte gelir. günlük seviyeleri, önem derecelerine göre artan sırada düzenlenir. Bundan sonra, "aktarım" günlükleri yönetir. "Aktarım", günlük mesajlarını kaydeden, görüntüleyen ve gönderen bir işlevdir.

Yükleme için şu iki komuttan birini çalıştırın:

npm install –react-native-logs'u kaydet

veya

yarn tepki-yerel-günlükleri ekleyin

Şimdi topu yuvarlayın! React-native-logs'a gidin ve oradan,

{ kaydedici } içe aktarın.

Ardından var log = logger.createLogger komutunu çalıştırın.

"createLogger" yöntemi, uyarı, hata ayıklama ve hata seviyeleri sunan basit bir günlük kaydı oluşturmanıza olanak tanır. Bu kaydediciyi özelleştirmek için "createLogger" yöntemine bir yapılandırma nesnesi iletmeniz gerekir.

"Aktarım" konusuna gelince, geliştiriciler günlükleri bir Bulut hizmetine göndermek için kendi "aktarım" özelliklerini yazabilirler. Ayrıca hideDate, hideLevel, loggerName, dateFormat, vb. gibi birkaç varsayılan "aktarım" seçeneği arasından seçim yapabilirsiniz; parametreyi ayarlarsanız – transportOptions. Burada ayrıca taşımalara aktarılan yeni seçenekler ekleyebilir ve önceden ayarlanmış taşıma seçeneklerinin üzerine yazabilirsiniz.

Günlüklerin önem düzeyi ayarlanabilir; bunun için en az öneme sahip olan seviyenin adını (string) iletmeniz gerekir. Burada, günlük oluşturulduğunda ayarlanan herhangi bir config.severity seçeneğinin üzerine yazabilirsiniz.

Günlükler Tarafından Görüntülenen Farklı Hata Türlerini Nasıl Ele Alabilirsiniz?

Geliştirme yapılarındaki tüm uyarılar ve hatalar, uygulamada bulunan bir LogBox içinde görünür. Bu Günlük Kutusu, üretim yapılarının yayınlanması sırasında otomatik olarak devre dışı bırakılır. Günlükleri yok saymanın iyi bir uygulama olmadığını ve son çare olması gerektiğini unutmayın. Ayrıca, kaçınılmaz bir nedenle herhangi bir günlüğü yoksaymak zorunda kalırsanız, daha sonra bu günlükleri düzeltmek için bir görev oluşturun.

Konsol Hataları

Konsol hatalarını ve uyarılarını sarı veya kırmızı bir rozetle ekran bildirimleri şeklinde görüntüleyebilirsiniz. Uyarı ve hata sayısı da görüntülenir. Konsol uyarılarını ve hatalarını okumak için bildirime tıklamanız gerekmektedir. Bundan sonra, günlükle ilgili tam ekran bilgiler görünecek ve konsolda bulunan her günlükte sayfalandırma yapabileceksiniz.

Yukarıda bahsedilen bildirimleri şu komutu kullanarak gizleyebilirsiniz: LogBox.ignoreAllLogs(). Bu yaklaşım, ürün demoları verirken işinize yarar. "Günlük başına" yaklaşımını izleyerek bildirimleri de gizleyebilirsiniz. Burada şu komutu yazmanız gerekir: LogBox.ignoreLogs(). Bu yaklaşım, düzeltemeyeceğiniz gürültülü uyarıları işlemek için kullanılabilir; örneğin, üçüncü taraf bağımlılığındakiler.

sözdizimi hataları

Bir Sözdizimi hatası olduğunda, tam ekran bir LogBox hatası görünür. LogBox size yığın izini ve Sözdizimi hatasının konumunu gösterir. Bu tür bir hata, uygulama geliştirme sürecine devam etmeden önce mutlaka çözülmesi gereken geçersiz bir JS yürütmesini gösterdiği için göz ardı edilemez. Sözdizimi hatalarını ortadan kaldırmak için böyle davranmanız gerekir. Hatayı düzeltin. Ardından, bu iki yoldan birini kullanabilirsiniz - Hızlı Yenilemeyi etkinleştirin ve "otomatik olarak kapat" olarak kaydedin veya Hızlı Yenilemeyi devre dışı bırakın ve cmd+r komutunu kullanarak yeniden yükleyin.

İşlenmemiş JS Hataları

Önceden işlenmemiş JavaScript hataları, otomatik olarak hata kaynağını gösteren tam ekran bir LogBox görüntüler. Bu hatalar ortaya çıktığında uygulamanın durumunu görüntülemek için bu tür hataları yok sayabilir veya en aza indirebilirsiniz. Ancak, bu hataların ele alınması önemle tavsiye edilir.

Sonuç olarak

Umarım React Native'de oturum açmaya yönelik çeşitli yaklaşımlar hakkında eyleme geçirilebilir içgörüler toplamışsınızdır. Birinci sınıf bir React Native uygulaması oluşturmak için geliştirme ekibinin beklenmeyen olayları ve hataları ele alacak şekilde iyi donanımlı olması gerekir. Günlük kaydı, hataların temel nedenini bulmanıza yardımcı olur ve geliştiricilerin sorunları çözmesini kolaylaştırır. Ancak, UX'i etkilemeden faydalarından yararlanmak için günlük kaydını uygun şekilde gerçekleştirmelisiniz. Bu nedenle, yazılım geliştirme projenizi yürütmesi için deneyimli bir React Native uygulama geliştirme şirketi seçmeniz önemlidir.