Bu makalemizde CDN üzerinden jQuery yükleyip, api tarafında hava durumu için sorgumuzu jquery ajax ile çekeceğiz. Source code için GitHub linkinden ulaşabilirsiniz.

Örnek WebPart Görünümü

Şimdi adım adım ilerleyelim

  • jQuery typings yüklememiz gerekiyor. (Proje içerisinde kullanabilmek için)
npm install --save @types/jquery
  • Sonrasında jQuery CDN upload etmek için WebPart içerisindeki render() method unu aşağıdaki gibi güncelleyiniz. Bu kısımda önce jQuery yüklüyoruz ve ReactDom.render() methodunu yükleme işlemi tamamlandıktan sonra tetikliyoruz. Microsoft https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library linkte yer alan config içerisine yazılmasını belirtmiş fakat güncelliğini yitirmiş sanırım, bir kaç okuduğum makalede çok sağlıklı çalışmadığını belirtmiş. Bu yüzdende aşağıdaki methodu önermektedir.
public render(): void {
    SPComponentLoader.loadScript('https://code.jquery.com/jquery-3.1.0.min.js', {
      globalExportsName: 'jQuery'
    }).then(($: any) => {
      const element: React.ReactElement<IWeatherProps> = React.createElement(
        Weather,
        {
          weatherService: WeatherService,
          location: this.properties.location
        }
      );

      ReactDom.render(element, this.domElement);
    });
}
  • Sonrasında “WeatherService.ts” içerisinde jquery kullanıp, gerekli sorgumuzu yapıyoruz.
import WeatherItem from '../models/WeatherItem';
import { IService } from '../models/IService';

import * as $ from 'jquery';

export class WeatherService implements IService {
    private static instance: WeatherService;

    private constructor() {
    }

    static getInstance() {
        if (!WeatherService.instance) {
            WeatherService.instance = new WeatherService();
        }
        return WeatherService.instance;
    }

    getItems(location: string): Promise<WeatherItem> {
        return new Promise((resolve, reject) => {

            $.ajax({
                dataType: "json",
                url: `https://api.openweathermap.org/data/2.5/weather?appid=001673e88732dd7e6a8643fc620f88a8&q=${location}&units=metric`,
                success: (response) => {
                    resolve({
                        Title: response.name,
                        IconUri: `http://openweathermap.org/img/w/${response.weather[0].icon}.png`,
                        Temp: response.main.temp.toFixed(0)
                    });
                },
                error: (error) => reject(error)
            });

            // alternative   
            // fetch(`https://api.openweathermap.org/data/2.5/weather?appid=001673e88732dd7e6a8643fc620f88a8&q=${location}&units=metric`).then(response => response.json())
            //     .then((response) => {
            //         resolve({
            //             Title: response.name,
            //             IconUri: `http://openweathermap.org/img/w/${response.weather[0].icon}.png`,
            //             Temp: response.main.temp.toFixed(0)
            //         });
            //     })
            //     .catch(error => reject(error));

        });
    }
}

export default WeatherService.getInstance();
import * as $ from 'jquery';

WebPart ile CDN üzerinden ilgili script lerinizi çekip, kullanmak bu kadar basit, okuduğunuz için çok teşekkürler.

About the author

Serdar KETENCİ

Leave a Comment