SharePoint Framework (SPFx) WebPart CDN Üzerinden jQuery ve jQuery Plugins Kullanımı

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.

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

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