Flutter ile Haber Sitelerinden Rss Yardımıyla Haberleri Çekme
Merhabalar, bugün mobil programla alanından kendimi geliştirdiğim flutter da rss yardımıyla her hangi bir web sitesinin ya da her hangi bir rss kaynağında nasıl verileri çekeceğimizden bahsetmek istiyorum.
Rss nedir ?
RSS (Rich Site Summary), çoğunlukla blog ve haber siteleri tarafından kullanılan ve yeni eklenen içeriklerin kolaylıkla takip edilmesi için kullanılan we sayfasıdır. t24 ün rss kaynağını buraya tıklayarak inceleyebilirsiniz.
Rss kaynağının rss görüntüsü yukarıdaki gibidir. Hemen hemen çoğu rss kaynağını içeriği buna benzer şekildedir.
Şimdi yavaştan uygulamamamızın iskeletimizi oluşturmaya başlayalım. Flutter’ı bilgisayarınıza kurduğunuz düşünüyorum. Bu yazıyı hazrılarken kullandığım flutter versiyonu aşağıdaki gibidir.
0. flutter projemizin iskeletini oluşturmak için terminalden aşağıdaki kodu çalıştıralım.
flutter create --org com.nafidurmus flutter_rssBu kodda --org com.nafidurmus kısmına kendi domaininizi yazınız. Google Play’e falan yüklemek isterseniz sonradan uğraşmamak için.
Bu bu projeyi kodlarken visual studio code kullanacağım. Siz istediğiniz kod editörünü kullanabilirsiniz.
1.Projemizi her hangi bir kod editöründe açalım ve main.dart ı aşağıdaki gibi güncelleyelim.
Ve rss_main_page.dart adında bir dart dosyası oluşturalım. (main.dart a bu dosyayı import etmeyi unutmayalım.)
Sonra da emulatorü çalıştıralım. Karşımıza aşağıdaki gibi kırmızı renkli bir ekran gelmesi lazım.
Bu kırmızı ekrana görüyorsanız doğru yoldasınız.
2. rss verilerini çekmek kullanabileceğimiz bir kaç kütüphane var. Ben bu yazıda en çok kullanılanı olan webfeed i kullanacağım. webfeed i projemize ekleyelim.
İlk olarak pubspec.yaml a webfeed kütüphanesini ekleyelim.
webfeed: ^0.6.0Ardından ise kullanacağımız 2 kütüphaneyi pubspec.yaml e ekleyelim.
http: ^0.12.2cached_network_image: ^2.2.0+1
Bir de projemizin için de assets adında bir klasöt oluşturup içine bir resim yükleyelim. Devamında bu resmi projemize tanıtmak için pubspec.yaml i aşağdaki gibi güncelleyelim.
pubspec.yaml’a aşağıdaki gibi görseli ekleyebiliriz.
assets:- assets/
Bu satırın anlamı assets klasörünün içindeki tüm dosyaları projemde kullanmak istiyorum. Dilerseniz — assets/rss.png şeklinde kullanacağınız tüm görüntüleri tek tek ekleyebilirsiniz.
Bu görüntü haber sitesindeki görüntü gelene kadar ekranda görünecek. Yazının devamında daha net anlaşılacak.
Ve sonra rss_page.dart dosyamızın en üstüne aşağıdaki eklediğimiz kütüphaneleri import edelim.
import 'package:flutter/material.dart';import 'package:webfeed/webfeed.dart';import 'package:http/http.dart' as http;import 'dart:convert' show utf8;import 'package:cached_network_image/cached_network_image.dart';
rss_page.dart dosyasına import ettiğimiz kütüphaneler yukarıdaki gibi görünmelidir. Eklediğimiz kütüphanelerin ne işe yarayacağından kısaca bahsetmek istiyorum.
- webfeed -> her hangi bir rss dosyasında veri çekmemize yarar
- http -> bir urle istek atmamıza yarar
- cached_network_image -> Yüklenen resimleri önbellekte tutarak yenileme yaptığımızda, önceki verileri çekmeden hızlıca yüklenmesini sağlar.
- convert -> dart’ın kendi içinde gelir, çeşitli dönüşümler yapmamıza yarar.
Kütühaneleri ekledikten sonra kırmızı hata bildirimi verirse (rss_page.dart) terminaldeflutter pub get komutunu çalıştırarak kütüphane dosyalarını projemize ekleyebiliriz. (Visual studio code kullanırken bazen eklenen kütüphanenin son versiyonun otomatik olarak yükleyemiyor.)
Kod yazmak için her şey hazır.
3.rss_page.dart dosyasına aşağıdaki kodları ekleyerek güncelleyelim. Ve aşağıdaki görünümü alsın.
Yukarıdaki koddaki gibi güncellememizi yaptıktan sonra aşağıdaki gibi sayfa görüntüyle karşılaşmamız gerekiyor.
Yukarıdan sayfayı çektiğimizde yenileme işareti ortaya çıkıyor ve yeni verinin olup olmadığı kontrol ediliyor.
Eğer yeni haber var ise sağ ekrandaki gibi yeni haberler sayfamızın en üstüne geliyor. Resimler gelene kadar ise kodumuza eklediğimiz resim geliyor. Haber resimlerine ulaştıktan sonra ise görünen görüntünün yerine haberin görüntüsü geliyor. En son aşağıdaki sağ taraftaki görüntü ile karşılaşıyoruz.
Şimdi gelen verilerin birini inceleyelim.
Burada t24 rss verilerinde bize title, link, guid, pubDate ve ensure url veriyor.
Örneğin rss_page.dart dosyasının 80. satırını aşağıdaki güncellersek
item.pubDate.toString() ?? "title gelecek",
4. Şimdi bu değişikliği geri alalım ve rss kaynağımızı değiştirelim.
Hürriyet in güncel olmayan bir rss servisi var bunu deneyelim.
Bu adresi rssurl değişkenimize verelim. (rss_page.dart 16. satır) Brojemizi yeniden başlatalım.
Şimdide nasa nın rss servisini deneyelim.
5.Şu şekilde güzel bir ekranla karşılaşıyoruz. Şimdi t24'ün rss sevisine geri dönelim ve haberin ayrıntılarına gidelim.
Ekrandaki haberlerin ayrıntılarına göstermek istiyorum.
1. webview_flutter paketi kullanarak haber ayrıntılarını gösterme.
pubspec.yaml e ekleyelim. Ardından rss_page.dart a aşağıdaki kod ekleyelim.
import 'package:webview_flutter/webview_flutter.dart';2. 63. satırdaki onTap fonksiyonun içine aşağıdaki kodu ekleyelim.
Son olarak projemizin sonuna ShowNews adında bir widget oluşturalım.
Ve projemizi tekrar çalıştıralım. Ve bir habere tıklayalım. Aşağıdaki gibi bir ekranla karşılaşmanız gerekiyor.
6.Hadi buraya kadar geldik appbar’ın sağ tarafında sosyal medyada paylaşabileceğimiz bir buton ekleyelim. Bunu eklemek çok kolay.
ilk olarak share kütüphanesini pubspec.yaml dosyasına ekleylelim.
share: ^0.6.5+4rss_page.dart dosyamıza import edelim.
import 'package:share/share.dart';Son olarak ise ShowNews widget imızı güncelleyelim.
Deneyelim. Habere tıkladığımızda appbar ın sağ tarafında aşağıdaki gibi eklediğimiz buton görünüyor.
Bu butona tıkladıktan sonra telefonumuzda yüklü paylaşım yapabileceğimiz kanallar ortaya çıkıyor.
Projenin kaynak kodlarına aşağıdan ulaşabilirsiniz.
Başka bir yazıda görüşmek üzere.
