React Native ile Coronavirus verileri bir web sitesinden HTML olarak nasıl çekilir ve JSON haline getirilir?

Görsel: https://www.cdc.gov/coronavirus/2019-ncov/images/2019-coronavirus.png

Uygulama geliştiriminde istediğimiz konu hakkında her zaman JSON API bulamayabiliyoruz. Bu gibi durumlarda istediğimiz veriyi sunan web sitelerinden HTML olarak çekip JSON haline getirmek bize düşüyor. Ayrıca çekilen/indirilen HTML verisinin anlamlandırılması için JQuery gibi selector’ler yardımı ile ilgili tag’lerin alınarak verinin uygun şekilde JSON haline dönüştürülmesi gerekiyor. Bunun için NodeJS tarafında cheerio kütüphanesi JQuery selector’leri ile bu işi hallediyor. Bununla ilgili bir gist oluşturmuştum. Fakat React Native tarafında bu kütüphanenin kullanılması için NodeJS ile ilgili olan bağımlılıklarından arındırılması gerekiyor. Bunun için cheerio-without-node-native veya react-native-cheerio kütüphanesinden yararlanabilirsiniz. Öncelikle aşağıdaki gibi projeye ekleyelim:

yarn add cheerio-without-node-native@0.20.2

Eğer typescript kullanıyorsanız ilgili tipleri de eklemeniz gerekiyor. Bu kütüphanenin direkt olarak tipleri bulunmadığı için cheerio’nunkileri yükleyebiliriz:

yarn add -D @types/cheerio

Coronavirus ile iligli verileri edinmek için ben https://www.worldometers.info/coronavirus/ sitesini kullanıyorum. Bu URL’i projemizde tanımlayabiliriz:

const urlWorldOMeter = 'https://www.worldometers.info/coronavirus/';

TypeScript kullanıyorsak JSON veri modeli için aşağıdaki gibi tip oluşurabiliriz:

interface MainNumbers {
  coronavirusCases?: string;
  deaths?: string;
  recovered?: string;
}

Bu modeli içeren JSON verilerinin tutulabilmesi için useState ile değişkenimizi oluşturalım:

const [mainNumbers, setMainNumbers] = useState<MainNumbers>({});

Ardından useEffect hook’u ve JavaScript fetch API ile verilerin çekilmesini sağlayabiliriz:

useEffect(() => {
  fetchData();
}, []);
async function fetchData() {
  fetch(urlWorldOMeter)
    .then((response) => response.text())
    .then((data) => {
      const html = cheerio.load(data);
      setMainNumbers(getMainNumbers(html));
    })
    .catch((err) => console.warn('Something went wrong.', err));
}

Buradaki cheerio.load(data) kısmı ile HTML string içeriği cheerio objesine dönüştürülmektedir. Şimdi bu objeden ilgili datanın çekilmesini (extract) sağlayarak setMainNumbers hook’u ile mainNumbers değişkenine atayacak olan getMainNumbers fonksiyonumuzu oluşturabiliriz:

const getMainNumbers = ($: CheerioSelector): MainNumbers => {
  const mainValues = $('.maincounter-number');
  const coronavirusCases = mainValues.eq(0).text().trim();
  const deaths = mainValues.eq(1).text().trim();
  const recovered = mainValues.eq(2).text().trim();
  const result = {
    coronavirusCases,
    deaths,
    recovered
  };
  return result;
}

Burada maincounter-number isimli CSS sınıfına ait div elemanları çekilerek eq() metodu ile belirli index’teki elemanın text() içeriğinin alınması sağlanmış olur. Artık mainNumbers değişkeni kullanılarak aşağıdaki gibi ekrana basılabilir:

<SafeAreaView>
  <Text>Vaka adedi: {mainNumbers.coronavirusCases}</Text>
  <Text>Ölüm sayısı: {mainNumbers.deaths}</Text>
  <Text>İyileşen sayısı: {mainNumbers.recovered}</Text>
</SafeAreaView>

Kodun tam hali aşağıdaki gibidir:

Sonuç olarak

Burada Coronavirus ile ilgili verilerin bir web sitesinden çekilmesini sağladık. Siz de bu bilgileri kullanarak dilediğiniz herhangi bir siteden verileri çekerek uygulamanızda sunabilirsiniz. Projenin tam hali için react-native-corona-virus-stats repo’suna bakabilirsiniz.

Bu yazım hakkında soru ve görüşlerinizi aşağıdaki yorumlar kısmından yazabilirsiniz. Bana destek vermek için alkış simgesine tıklayabilirsiniz. Sonraki yazımda görüşmek üzere…