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.
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 |
Merhaba Burak,
Babel ile ilgili bir hata sanırım Stack Owerflow üzerinde şöyle bir çözüm var.
Denedikten sonra olmaz ise tekrar birlikte bakabiliriz. Kolay gelsin 🙂
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 🙂
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. 🙂
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-androidunrecognized. Make sure that you have runnpm installand 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
Merhaba Muhammed, geç döndüğüm için kusura bakma öncelikle.
npx react-native run-androidkomutunu kullanarak deneyebilir misin ?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.
Selam Muhammed, ellerine sağlık. Eklemeleri PR açarak bana da iletirsen projenin gelişimine katkı sağlayabilirsin.
Teşekkür ederim, ekleyeceğim.
Merhaba, android studio üzerinde nasıl çalıştırabilirim. Bununla ilgili bir kaynak atarsanız çok sevinirim.
Merhaba Anıl, bildiğim kadarı ile Android Studio aracılığı ile React Native yazamazsın sadece Github üzerinden projeyi çekerek Android klasöründen projeyi build edip inceleyebilirsin. Kolay gelsin 🙂