/images/avatar.png

SharePoint Framework (SPFx) ile Geliştirmeye Başlangıç

SharePoint Framework (SPFx) ile Geliştirmeye Başlangıç

Microsoft SharePoint Framework (SPFx), SharePoint Online ve Microsoft Teams için modern, duyarlı ve mobil uyumlu web web part geliştirmek için kullanılan güçlü bir geliştirme modelidir. Bu yazıda SPFx’in ne olduğunu, nasıl kurulacağını ve ilk projenizi nasıl oluşturacağınızı adım adım öğreneceksiniz.

SharePoint Framework Nedir?

SharePoint Framework, geliştiricilerin modern JavaScript kütüphaneleri ve araçlarını kullanarak SharePoint için özelleştirmeler yapmasına olanak tanıyan bir geliştirme modelidir.

SPFx’in Temel Avantajları

  • Modern Web Teknolojileri: React, Angular, Vue.js gibi popüler frameworks’ler kullanabilirsiniz
  • TypeScript Desteği: Güçlü tip kontrolü ve IntelliSense desteği
  • Responsive Tasarım: Mobil ve masaüstü cihazlarda mükemmel görünüm
  • Office UI Fabric: Microsoft’un tasarım diline uygun bileşenler
  • SharePoint Context: SharePoint verilerine kolay erişim

Gereksinimler

SPFx geliştirmeye başlamadan önce aşağıdaki araçların sisteminizde kurulu olması gerekir:

SharePoint Framework Paketleme ve Dağıtım Süreci

SharePoint Framework Paketleme ve Dağıtım Süreci

SharePoint Framework (SPFx) projelerinizi geliştirdikten sonra, bunları SharePoint ortamınıza dağıtmanız gerekir. Bu süreç birkaç basit adımdan oluşur.

Hızlı Paketleme Adımları

1. Projeyi Build Etme

# Üretim için build
gulp build --ship

2. Paketi Oluşturma

# .sppkg dosyasını oluştur
gulp bundle --ship
gulp package-solution --ship

3. App Catalog’a Yükleme

  1. SharePoint Admin CenterMore featuresApps
  2. App Catalog sitesine git
  3. Apps for SharePoint kütüphanesini aç
  4. .sppkg dosyasını sürükle-bırak ile yükle

4. Uygulamayı Onaylama

  • Deploy to all sites seçeneğini işaretle (tenant-wide deployment için)
  • Make this solution available to all sites seç
  • Deploy butonuna tıkla

Dosya Yapısı

sharepoint/
└── solution/
    └── proje-adi.sppkg    # Paket dosyası

CDN Ayarları (Opsiyonel)

Eğer CDN kullanıyorsanız: