React-Native İle Hafta Sonu Projesi

Sende bir uygulama yap zengin ol laflarıyla gaza gelip, uygulamayı çıkıp zengin olamama hikayesini biliyorsundur. Bu hafta sonu işi yine onlardan biri de olsa, yeni deneyimler edinmek güzel. 1–2 yıldır aktif olarak React-Native ile uğraşan biri olarak hızlı uygulama çıkma fikri gerçeğe dönüşmüş gibi. Tabi bunu duyan Tanaydin Sirin reis’in bir counter uygulaması yapalım demesiyle, başladığım Counter uygulaması deneyimlerimi sizinle paylaşmak istedim.
ASYNC STORAGE
Uygulamanın temel amacı insanların bir şeyi sayması. Evet gerçekten bu kadar. İnsanların saydıkları şeyleri tutacak bir AsyncStorage wrapper’ı yazmam lazımdı.
Daha önce bu tarz bir iş için daha önce Realm kullanmıştım. Bu kadar ayrıntıya ve hıza ihtiyacım yoktu. Ama denemenizi kesinlikle tavsiye ederim.
Uygulamanın ilk açıldığı an AsyncStorage’a bir key attım.
Artık oluşturulan key’e bir counter oluşturma zamanı geldi.
Kullanıcı yeni bir counter oluşturmak istediğinde count’u sıfır olan bir counter objesi oluşturuyorum.
Oluşturduğum count objelerine bir aksiyon almak için;
Örnekte ‘action’ adında bir key mevcut. Bu key bana kullanıcının yaptığı artırma veya eksiltme aksiyonunu ifade ediyor.
Tasarım
Tasarım konusunda çok başarısız biri olarak kullandığım 1–2 git reposu var sizinle paylaşmak isterim.
- Buton, Header v.b. şeylerin tasarımı gerçekten kötü oluyorsa react-elements işine kesinlikle yarayacaktır.
- ICON için muhtemel bildiğiniz vector-icon
Aklımda her row için yatayda uzun solda counter’ın ismi olduğu, ortada count sayısı ve sağda butonların olduğu bir yapı vardı.

Sonuç olarak böyle bir yapıya karar verdim. Ama çok büyük bir sorun vardı. Row’ların rengi ne olmalıydı?
İşte burada hem kendimi renk seçiminden kurtarıp hemde yeni bir feature olacak bir fikir buldum! Her yeni bir counter’ın rengini kullanıcı kendi seçsin.

Color picker olarak react-native-color-picker kullandım. Kullanımı gayet basit. Böyle bir renk seçme işiniz varsa kullanabilirsiniz.
IN-APP Purchase
Uygulamada bir counter sonrasını ücretli yapma kararı aldım. Aslında bu korkarak atılmış bir adımdı. İlk defa in-app entegre edicektim. Ama bu adımım bana bir daha ‘evet react-native artık olmuş’ dedirtti. Artık ne ararsanız arayın bulmak gerçekten çok kolay. İlk olarak iOS için ilk defa in-app eklicek arkadaşlarada rehber tadında olaması adına burayı uzun tutacağım.
Altta bulunan stackoverflow link’i çok başarılı. Burayı da takip edebilirsiniz.
İlk olarak itunesConnect üzerinden oluşturduğunuz uygulama altında Features sekmesine gelerek bir adet in-app oluşturmanız gerekiyor.

Oluşturulacak olan in-app’ler toplamda 4 çeşit. Bunlar satıcağınız içeriğe göre değişiklik gösteriyor.

Tabiki ben non-consumable bir in-app açtım. Burada oluşturacağınız in-app için id, fiyat, açıklama vb. bilgileri dolduruyorsunuz. En sonda sizden satılan ürün için bir açıklama ve satın alma ekranının görüntüsünü istiyorlar. Bu alanlar doldurulmak zorunda.
In-app iOS için react-native-in-app-utils adnda bir git reposu mevcut ve gayet başarılı.
Kendime bir wrapper yazdım. İlerki zamanda android’de çıkacağımdan, benim için en matıklısı bu olacaktı.
Aşşağıda bu paylaştığım ios için yazdığım olan wrapper. İlerki zamanda Android ve iOS’i ortak fonksiyon isimleri altında toplayarak open source etmek istiyorum.
Detay
Uygulama hazırdı ama bana çok sade geliyordu. Bunun üstüne her counter için bir detay ekranı yapmaya karar verdim. Burada insanların aksiyonlarının tarihleri ve bir PieChart koyarak detayı güzelleştirmenin daha başarılı olacağını düşündüm.

Üst taraftaki PieChart için react-native-pathjs-charts kullandım. Sıkıntısız ve gayet başarılı.
Alt liste tabi ki FlatList. FlatList normal ListView’e göre çok daha anlaşılır ve temiz oluyor. Hız konusunda bir kaç deneme yapma şansı buldum. Eskisi gibi rowlar bellekte kalmıyor. Bence FlatList oyunu uzun vadede değiştirecek.
Son
Kısa zamanda iOS ve Android’e uygulama çıkma gerçekleşti demek sanrım yanlış olmaz. React-Native arkasına aldığı community ile uzun vade de daha çok şey başaracağı aşikar. Eğer React-Native’e karşı bir ön yargınız varsa, bunu bir kenara bırakıp buraya tıklama zamanınız gelmiş.