React-Native İle Hafta Sonu Projesi

Ayberk Anıl Atsız
Aug 9, 2017 · 4 min read

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ı.

Counter Row

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.

Counter oluşturma ekranı.

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 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.

Apple’ın örnekleriyle gayet açıklayıcı olduğunu düşünüyorum.

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.

Detay Ekranı

Ü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 tıklama zamanınız gelmiş.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade