SPFx (SharePoint Framework), Microsoft tarafından geliştirilen ve SharePoint’te özelleştirme ve uygulama geliştirmeyi kolaylaştırmak için tasarlanmış bir çerçevedir. Bu çerçeve web parçacıkları (web parts), sayfa uzantıları (page extensions) ve Microsoft Teams uygulamaları oluşturmak için kullanılabilir. Şimdi sharepoint SPFX webpart oluşturma aşamalarına geçelim.

SPFx Webpart Oluşturma

SPFx, geliştiricilere modern bir deneyim sunar ve JavaScript, TypeScript, HTML, CSS ve diğer popüler web teknolojilerini kullanma olanağı sağlar. Ayrıca, SharePoint’in özelliklerine ve verilerine kolayca erişim sağlar.

Webpart oluşturmak için gerekli gerekli olanlar;

• Modern bir tarayıcı (Edge, Firefox, Chrome)
• Node.Js
• Gulp
• Yeoman
• Derleyici (Visual Studio Code)

Öncelikle node.js ile başlayalım Bilgisayarınızda yüklü değil ise bağlantı üzerinden gerekli kurulumları yapabilirsiniz. Zaten yüklü ise aşağıdaki kodu terminale yazarak versiyon kontrolü yapabilirsiniz.

node --version

Ben v16.20.1 kullanıyorum. Çok düşük veya yüksek versiyonlar uyumsuzluk yaratabiliyor.

Aşağıdaki tek satır kod ile de gulp, yeoman ve microsoft generator kuralım. Bu aşamada terminali admin yetkisi ile açmakta fayda var. Bunları tek tek de kurabilirsiniz ancak ben toplu kurulumu tercih ettim.

npm install gulp-cli yo @microsoft/generator-sharepoint --global

İlgili kurulumlardan sonra bir webpart oluşturabiliriz. Aşağıdaki kodu terminalimize yazıyoruz.

yo @microsoft/sharepoint

Daha sonrasında solution name bilgisi isteyecektir. Bu bilgiyi girdikten sonra “WebPart” oluşturacağım için seçim yapıyorum. Benden bir WebPart name girmem isteniyor. Test amaçlı “MyWebPart” yazıyorum. Bu işlemin ardından da kullanmak istediğim şablon soruluyor. Ben burada “React” seçimi yapıyorum. Bu seçimden sonra gerekli yüklemeler yapılacaktır. Bu işlem biraz uzun sürebilir.

Yükleme işlemi bitince alttaki kod ile sertifika işlemi yapılır.

gulp trust-dev-cert

Artık oluşturmuş olduğumuz webpartı görüntüleyebiliriz. Aşağıdaki kodu oluşturulan proje dizininde çalıştırarak görüntüleme işlemini yapabiliriz.

gulp serve

Eğer görüntülenecek sayfanın linki hatalı geliyor ise oluşturulan proje dizinine gidin. Config dosyası içerisindeki “serve.json” dosyasını bulun. Bu dosyanın içerisindeki “initialPage” kısmını kendi tenantınız ile değiştirin. Daha sonra terminale tekrar “gulp serve” yazın ve webpartı görüntüleyin.

Not: Tenantınıza giriş yaptığınız için görüntüleme aşamasında microsoft hesabınız ile giriş yapmanız istenecektir.

Webpartı sayfaya yüklemek için açılan pencerede “+” iconuna basarak oluşturmuş olduğunuz webpart name’e tıklayın. Karşınıza standart oluşturulmuş bir template gelecektir. Bu template “src\webparts\{webpart name}\components” adresindeki “.tsx” dosyasından gelmektedir. Bu dosyayı düzenleyerek webpartınızı değiştirebilirsiniz.

SPFx Webpart Yayınlama

Bir uygulamayı yayınlamadan önce “debug” sürümünü oluşturarak yayınlamaya hazır hale getiriyoruz.

gulp bundle --ship

“Debug” sürümü oluşturulduktan sonra yayınlama paketini oluşturuyoruz. SPFx uygulamaları, “.sppkg” uzantısı ile yayınlanmaktadır. Aşağıdaki kod ile bu paketi oluşturuyoruz.

gulp package-solution --ship

Bu komut, projedeki bileşenleri sıkıştırır ve “sharepoint/solution” klasörü altında bir “.sppkg” dosyası oluşturur. Bu dosyayı sharepoint yönetim merkezinden kullanıcılara yayınlayabilirsiniz.

SPFx webpart oluşturma ve yayınlama işlemi bu kadar. Bir sonraki yazı içeriğinde görüşmek üzere…