WordPress Siteler İçin React Native Uygulaması : Obsioo

React Native öğrenme sürecimde hem ilk izlenimlerimi hem de ücretsiz News Api kullanarak hazırladığım ufak bir haber uygulamasını geçtiğimiz haftalarda sizlerle buradaki yazımda paylaşmıştım. Bu süreçten sonra artık biraz daha üstüne koyabileceğim, sürekli güncelleyerek geliştirebileceğim bir mobil uygulama yapmaya karar verdim. Yıllardır WordPress alt yapısını kullanan siteler hazırladığım için de aklıma gelen ilk fikirlerden biri; WordPress sitelerinde standart olarak gelen rest api servislerini  kullanarak bir mobil uygulama hazırlamak oldu.

Eğer WordPress alt yapısına sahip bir internet siteniz var ise hali hazırda arka planda siz hiçbir ayar yapmanıza gerek kalmadan rest api ile bazı bilgileri paylaşan bir servisiniz mevcut demek. Bu yüzden React Native ile hazırladığım Obsioo WordPress Appini kendi sitenize entegre etmeniz için tek yapmanız gereken /src/config/index.js dosya dizinde yer alan URL kısmını değiştirmeniz. Bu adımdan sonra uygulama otomatik olarak sizin WordPress sitenize ait rest api ile haberleşerek sitenizdeki verileri kullanacak.

1)  Ana Sayfa

Uygulamanın açılış ekranında iki adet FlatList mevcut, ilk FlatList yatay (Horizontal) olarak ayarladım ve burada 4 adet öne çıkan içeriği kullanıcı slide edebiliyor, alt kısımda ise dört farklı tasarım seçebileceğiniz dikey bir FlatList kullandım. Burada performans sebebi ile tek Flat List ile akışı tamamladım, bazı uygulamalar ScrollView içeresine farklı componentler ile akışı şekillendirmiş fakat buna şuan için gerek duymadım, ne kadar sade o kadar güzel diye düşünüyorum.

2) Arama Sayfası

3) Kategori Sayfası

4) İçerik Detay Sayfası

Görsellerin dışında arayüz hakkında fikir sahibi olabilmeniz amacı ile ufak bir videoyu da buraya eklemek istiyorum.

Uygulamayı Düzenleme

Uygulama üzerinde renk kodları, dil dosyaları ve hangi siteden veri çekeceğini ayarlayabileceğiniz 3 farklı dosya mevcut.

 

 

Projeye İleride Eklenmesi Planlananlar : 

  • One Signal ile push notification entegrasyonu,
  • Google Analytics entegrasyonu,
  • Detay sayfasına yorumlar kısmı,
  • Splash screen,
  • Font değişikliği gibi özellikleri de ilerleyen süreçte yapmayı planlıyorum.

Siz de eksik gördüğünüz kısımları yorum yaparak veya direkt Pull Request açarak uygulamanın gelişmesine yardımcı olabilirsiniz.

4 Comments

  1. ilk yorum benden gelsin

    bu hatayi nasil asarim calistirdiktan sonra metroda veriyor bu hatayi

    src\store\CategoryStore.js: Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled (11:5):

    9 | class CategoryStore {
    10 |
    > 11 | @observable moreCategoryList = [];
    | ^
    12 | @observable isLoading = false;
    13 | @observable categoryPosts;
    14 |

  2. merhabalar, ben de flutter a başladım ve en azından bir amaca yönelik yazayım dedim .neredeyse sizin uygulamanız ile aynı bir uygulama yazdım sonra birkaç eksiklik vardı uğraşmadım öyle kenarda duruyor. sizin yazınıza denk gelince de kodaları incelemeden build ettim ve aynı eksiklikleri gördüm :). mesela json ile postları alırken html veriyor ve parse ediyoruz ama yine de yazı içindeki resimler görünmüyor. her ne kadar get methodu yapılsa da post metodu ile uğraşmak biraz zaman alıcak. takipteyim 🙂

    1. Merhabalar Şahin,

      Aslında burada ki sorun Get veya Post methodu ile alakalı değil, ilk sürümde çözüm bulamadığım için ben orada REGEX ile HTML kodlarını temizliyordum. Dün bir versiyon güncellemesi yayınladım, orada sorunu çözmek için WebView benzeri bir component kullandım. Flutter üzerinde de buna benzer bir kütüphane mutlaka vardır.

      Bir sonra ki yazımda zaten bu kütüphaneyi ve React Native ile bu sorunu nasıl çözdüğümü detaylandırmak istiyordum, yorumun için bu yüzden ayrıca teşekkür ederim.

      Yeni versiyonu test edip yine eksik gördüğün yerler ile ilgili geri dönüş yaparsan dikkate alacağımdan emin olabilirsin. Tekrardan teşekkürler. 🙂

Leave a Comment