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.

“WordPress Siteler İçin React Native Uygulaması : Obsioo” için 9 cevap

  1. burak dedi ki:

    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. Enes Şahin dedi ki:

    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 🙂

    • Hasan Ekşi dedi ki:

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

  3. Muhammed Doğrudağ dedi ki:

    Hasan abi selam, React Native’de yeniyim ve araştırma yaparken senin paylaşımına denk geldim ve çok hoşuma gitti. Hemen kodları indirip bilgisayarıma react native kurulumlarını gerçekleştirdim ve HelloWorld uygulamasını başarıyla çalıştırdım. Ardından sizin paylaştığınız kodları çalıştırmayı denediğimde sürekli aynı hatayı aldım. İnternetten araştırdım fakat çözemedim. Bu hatayı neden alıyor olabilirim acaba?

    Hata Kodu: “Command run-android unrecognized. Make sure that you have run npm install and that you are inside a react-native project.”

    Hata Görseli: https://prnt.sc/sp4nii

    Şimdiden paylaştığın kodlar ve yardımın için teşekkür eder, İyi günler dilerim

    • Hasan Ekşi dedi ki:

      Merhaba Muhammed, geç döndüğüm için kusura bakma öncelikle.

      npx react-native run-android komutunu kullanarak deneyebilir misin ?

      • Muhammed Doğrudağ dedi ki:

        Teşekkür ederim sorunu çözdüm, hatta bazı eklemeler de yaptım ama sınavlarım başladığından dolayı biraz ara vermek zorunda kaldım. Şu an için Onesignal, Firebase, Analytics gibi eklemeler yaptım. Splash screen eklemeye çalıştım ama zamanlamayı tam ayarlayamadığımdan tekrardan kaldırdım. Sınavlarımdan sonra tekrardan ilgileneceğim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir