React ile 1,5 sene geliştirme yaptıktan sonra yeni projede React Native (Netleşmemişti ama genel kanı bu yöndeydi) ile geliştireceğimizi öğrenince 1-2 ay kadar React Native kaynaklarına bakma fırsatım oldu. Şunu ifade etmeliyim ki kullanmadan önce tedirgindim ancak hiç tedirginliğe gerek yokmuş. Bir projeye dahil olunca hızlı ve kolay bir geçiş oluyor.

Bu yazıya yaklaşık olarak 8 ay önce başlamıştım. Düzenleyip yayına almak bugüne (6 Mayıs 2021) nasipmiş.

Yeni projeye expo ile başladık. Expo hakkında detay için https://expo.io/ buraya bakabilirsiniz. Expo ile react native projeleri geliştirmek gerçekten çok kolay. Projenizi gerçek cihazda test etmemiz çok kolaylaştırıyor. React Native’e hızlı giriş için süper bir platform.

Projeye başlayıp işleri aldıkça bazı problemlerle karşılaştım. Çözmek için stackoverflow, react native sitesi ve çalışma arkadaşlarımın yardımını kullandım. Bu sayede geçiş tahminimden daha kolay oldu. İlerleyen zamanlarda bazı ciddi sorunlar yaşasak da genel olarak beklediğimden daha sorunsuz bir geçiş oldu.

Geçiş sırasında karşılaştığım sorunlar ve çözümleri burada paylaşayım.

HTML elementleri yerine muadillerini kullanmak

Web kodlarken alıştığımız div, span, image, ul, ol ve button yerine React Native’de aşağıdaki karşılıkları kullanılıyor.

HTML React Native
<div> <View>
<span> ve <p> <Text>
<ul>, <ol> <FlatList>
<image> <Image>
<button> <TouchableHighlight> veya <TouchableOpacity>

Genel olarak sadece isimleri değişiyor. Kullanımda ufak değişikler olsa da dokümantasyondan kolaylıkla kavrayıp devam ediyoruz.

SVG eklemek

React Native ile kodlama yaparken ilk yaşadığım sorunlardan bir tanesi web’de ikonları svg olarak eklediğim için burada da ekleyeyim dedim ancak React Native’in SVG desteğinin olmaması şaşırttı. SVG ikon kullanmak için react-native-svg kütüphanesini genelde tercih ediliyor. Ben de bunu kullanarak ikonları ekledim. Zafer Ayan’ın makalesi imdadıma yetişti.

Kullanımı çok basit.

import NoBellIcon from  'assets/icons/no-bell.svg';

şeklinde sayfamıza kaynağını ekledikten sonra

<NoBellIcon  width={52}  height={52}  />

şeklinde jsx kısmını ekleyerek svg resimlerimizi kolayca projelerimize ekleyebiliyoruz.

Renk geçişi kullanımı

Tam bu şoku atlattım derken renk geçişi(gradient) kullanmam gereken bir buton için ben CSS ile kodumu yazdım. O da nesi çalışmadı :( Meğer React Native’in renk geçiş desteği de yokmuş. Bunu çözmek için de bir kütüphane kullanmamız gerekiyormuş. react-native-linear-gradient kütüpnesini kullanarak bu işe çözüm buldum.

import LinearGradient from  'react-native-linear-gradient';

ve

<LinearGradient
    colors={['#4c669f', '#3b5998']}
    start=
    end=
    style={styles.gradient}>
    <Text  style={styles.gradientText}>KAPAT</Text>
</LinearGradient>

Genel olarak beklemediğim sorunlar olsa da çözümlerinin kolay olması sevindirici oluyordu.

Sabit satır sayısı

Eklediğim metnin uzayıp stilin bozulmasını istemediğim yerlerde metni tek satırda sabitlemek için css ile white-space: no-wrap ve overflow: hidden hatta üç nokta koymak için de text-overflow: ellipsis kullanıyorum. Ancak React Native’de bu da farklı <Text numberOfLines={1}> kodu yetiyor. Daha az kod ile halletmek sevindirici.

Telefon arama

Web’de bu işi yapmak için <a href='tel:+9002125478833'>Ara beni</> şeklindeki bir kullanımda React native’de karşılık bulmuyor. Bunun yerine React native’de

import {Linking} from 'react-native' 

<Text onPress={()=>{Linking.openURL('tel:+9002125478833');}}>Ara beni</Text>

şeklinde çözülüyor.

Platforma özel kod

Eski İnternet Explorer 6 zamanı bu tip işler oluyordu. ie6’ya başka diğerlerine başka kod yazma ihtiyacının olduğu durumlar oluyordu. Mobilde iki büyük platform var. Android ve iOS. Bazen bir platforma özel kod yazmak gerekiyor.

import  { Platform, StyleSheet }  from  'react-native';

const styles = StyleSheet.create({
    height: Platform.OS  ===  'ios'  ?  200  :  100
});

Sonuç

Başta nereye baksam sorun olarak gelse de zamanla oturuyor ve hepsine alışıyorsunuz. Sorunların kısa sürede ve kolayca halledilmesi geçişi kolaylaştırıyor. Bu yazıda ilk başta yaşadığım sorunları ve çözümleri yazdım. Zamanım olursa başka sorun ve çözümleri de paylaşmaya çalışırım.

Beraber çalıştığım arkadaşlarım trendyol-tech’de bu proje boyunca yaşadıklarımız ve kullandığımız metodları paylaştılar. Okumanızı öneririm.

Beraber çalıştığım arkadaşlarımla bu proje boyunca çok fazla yardımlaştık. Hepsine teşekkürlerimi sunuyorum. Sercan Eraslan, İsmail Hakkı Tekin, İsmail Demirci, Tolga Cesur, Doğan Öztürk, Yusuf Zeren, Talha Turhan, Şeyda Taşkın Davut, Burak Yağdıran

Kalın sağlıcakla.

Kaynaklar

HTML kodu yazarken uzun zamamdır ihtiyacını duyduğum bir özellikti.

Özetle ihtiyacım, uzayan HTML dokümanlarında hangi div’in hangi sınıfın kapama etiketi olduğunu bulmak.

Eklenti HTML End Tag Labels. Böyle bir eklentinin olduğunu öğrenmek beni mutlu etti. Eskiden bunun için html’in yorum satırlarını kullanırdım. Bu konuda bir ipucu yazısı da yazmıştım. Bir bakıma eklenti benim elle yaptığım yorum satırı eklemesini kendi otomatik yapıyor.

enter image description here Yukarıdaki </div> kapama etiketleri anlamsız. Eklentiyi kurup aktifleştirdikten sonra her kapama etiketi sonuna sınıf veya id’sini ekledi.

enter image description here Şimdi daha anlamlı oldu. Eklenti React içindeki html(jsx) kodlarında çalışmadı. Bunun için eklentinin github hesabında bir istek açılmış ama henüz destek eklenmemiş.

Kalın sağlıcakla.

Uzun süredir 10 parmak yazma konusunda istekli olsam da zaman ayırıp çalışamıyordum. Pandemi döneminde zaman ayırıp bir çalışma maratonuna girip öğrenmeyi planladım. İlk başta zorlansam da zamanla sonuçları gördükçe daha heveslenip devam ettim. Volkan’ın aşağıdaki önerisi de beni heveslendiren şeylerden biri oldu.

Öğrenmemi aşağıdaki süreçlerden geçerek devam ettiriyorum. Günlük ortalama 10 - 20 dakika ayırmaya çalışıyorum. Ne kadar zaman ayırıp antreman yaparsanız o kadar hızlı ilerliyorsunuz.

Başlarda yazılımcılar için İngilizce klavye tercihi daha mantıklı önerilerini görsem de ben Türkçe Q klavye ile devam ettim. İngilizce klavye ile devam etsem daha kolay mı olurdu. Bilemiyorum.

  • İlk olarak https://my.typingtrainer.com/studying sitesinden parmakların yerlerini öğrendim
  • Sonra yine bu sitedeki test metinlerini yazmaya başladım
  • Bu sırada https://zty.pe/ gibi oyunlar oynayarak gelişimimi eğlenceli hale getirmeye çalıştım
  • Bir diğer oyun https://www.nitrotype.com/garage
  • Daha sonra https://10fastfingers.com/ sitesine üye olup buradaki testlere başladım.
  • Zamanla yazdığım yazıya bakmamayı ve parmaklarımın yerlerini pekiştirmeye başladım.
  • Başlarda dakika başına düşen karakter sayıları 11-12 iken 3-4 ay sonra 32-34 rakamına ulaştım. İlk zamanlarda çalışma için 5 dakika ayırmak yaptığım hatalardan biriydi.
  • https://www.keybr.com/ deki gibi metin üzerinden yazma sitelerinden devam ettim. 40-50 wpm’e ulaştım. Metin üzerinden yazarak alıştırmak yazılımcılar için daha mantıklı bence. Ayrıca bu sitenin istatistikleri çok iyi.
  • Bu sırada öğrendiğim şeylerden birisi yazarken parmakları hareket ettirdikten sonra normal olması gerektiği yere hızlı döndürmek ve sonra gelen metinlere hazırlıklı olmak.
  • 40 wpm ortalamasına ulaştıktan sonra büyük harfleri çalışmama ekledim.
  • Büyük harfli metinlerde 40 wpm’e ulaştıktan sonra noktalama işaretlerini ekledim.
  • En son dün 60 wpm’i gördüm.

İletişimi Türkçe, yazılımı İngilizce yazmak öğrenme sürecini uzattığını düşünüyorum. Bir diğer konuda yazılımda kullandığımız editörlerin otomatik tamamlama özelliği sayesinde daha çok metin yerine işaret yazdığımız için işaretleri daha çok çalışmak gerektiğiydi. Ama makale yazarken çok büyük avantaj olduğu kesin.

Çalışmaya devam.