GERİ
SharePoint Framework’e Giriş ve WebPart Geliştirmek

SharePoint Framework’e Giriş ve WebPart Geliştirmek

by Kerem TURHAN, 16 Ağustos 2017

Sharepoint Online 2016’nın çıkmasıyla birlikte geliştiricilerin işini ciddi oranda kolaylaştıracak olan Sharepoint Framework’de beraberinde geldi. Bu bir ihtiyaçtan dolayı doğdu çünkü Online tarafta Server-Side kod çalıştırma imkanımız ciddi oranda kısıtlanmış oldu. Ancak Sharepoint Framework sayesinde OnPremise’den farklı olarak ServerSide kodu ciddi ölçüde ClientSide tarafa taşıyarak hem sunucu üzerindeki yükü azaltabiliriz hem de yanında kullanabileceğimiz React, Angular, Vue veya Jquery sayesinde çok şık arayüzler hazırlayabiliriz. TypeScript’in FrameWork içerisinde tercih edilmesi size JavaScript tarafında Object oriented Programming (OOP) niteliklerini elde etmenizi sağlıyor. Bu sayede geliştirme süreçleri kolay, kodun bakımı da ciddi anlamda kolay hale geliyor. Sharepoint Framework genelde SpFx kısaltılmış adıyla dökümanlar içerisinde geçiyor. Gelecek yazılarımızda ben de olabildiğince bu şekilde kullanmaya çalışacağım.

Bilindiği üzere Microsoft son yıllarda development araçları içerisinde Node.js’e yer veriyor. Node.js, Sharepoint Framework’ünü kurup, kullanırken de yine karşımıza çıkıyor. Çünkü tamamen Cloud’a taşınan bir platform, geliştirme ortamında platform bağımlı olması absürd olurdu. Node.js ve yanındaki araçlar sayesinde platform bağımsız olarak dilerseniz Linux veya Mac üzerinde de WebPart geliştirmesi yapabilirsiniz.

Sharepoint Framework kurulumu ve geliştirme için ihtiyacımız olan şeyler sırasıyla;

  1. Node.js
  2. Yeoman (Yo)
  3. Gulp
  4. Visual Studio Code veya direkt olarak Visual Studio

Node.js’in sitesinden son stabil Node.js setup dosyasını indirip kurulumu tamamladıktan sonra Administrator haklarıyla beraber bir Command Prompt ile kuruluma devam edelim. Administrator haklarıyla Cmd açmak için aşağıdaki adımları takip edebilirsiniz.


Şimdi sırasıyla aşağıda yer alan komutları çalıştırarak kuruluma devam edelim. Hangi komutun ne işe yaradığını kısa bir şekilde açıklamaya çalışacağım. Aslında komutlar ne işe yaradıklarını anlatsalar da bazı ince detayları kaçırmasak iyi olur.

  • npm install -g yo gulp
    • Gulp:Hazırladığımız WebPart dosyasını paketleme, solution hazırlama ve js-css dosyasını bundle(sıkıştırma) edip çalıştırmamızı sağlayan bir tool olan Gulp’ı kuralım.
    • Yo diğer adıyla Yeoman, NPM’e alternatif olarak daha başarılı bir paket ve generator yönetim aracı. Facebook tarafından geliştirildi ve güncelleniyor.
  • npm install -g @microsoft/generator-sharepoint
    • Bu aşamada Microsoft vendor’u üzerinden Sharepoint Framework generator dosyalarını çekiyoruz ve belli bir yere kaydediliyor. Bu sayede yeni bir WebPart projesi oluşturduğumuzda tekrar indirip, kurulum yapmamıza gerek kalmıyor. Bu kurulum bağlantı hızınıza göre 5 ile 10 dakika arasında sürebilir.
    • -g parametresinin kullanılması Globally olarak talebin yerine getirilmesini belirtiyor.Böylece paketi her seferinde çekmeden direkt olarak bilgisayarımızın diskinden kullanmış oluyoruz.
  • Son olarak Microsoft’un sitesinden kullandığınız OS veya ihtiyacınıza göre Visual Studio seçeneklerinden birisini indirelim.

Bu aşamaları tamamladıktan sonra ilk WebPart dosyamız için Frameworku kullanmaya başlayabiliriz. Bir Command Prompt(artık cmd.exe olarak adlandıracağım) açalım.

WebPart uygulamaları geliştirirken ben şimdilik Visual Studio Code kullanacağım. Bu nedenle Cmd.exe üzerinde ciddi şekilde mesai harcayacağız bu nedenle bazı basit trickleri veya özellikleri kullanıyor olmamız bizi ciddi anlamda göz yorulmalarından uzakta tutacak ve hataların okunmasını kolaylaştıracaktır.

Ben hem Linux’dan gelen alışkanlık hem de yazdığım komutları daha iyi görebilmek ve hataları kolay takip edebilmek için cmd.exe’nin fontu büyütüp kullanılan rengi değiştiriyorum. Bu adımları takip etmeniz tamamen sizin tercihinize kalmıştır.


Artık herşey tamam olduğuna göre ilk WebPart’ımızı indirip, kurma aşamasına geçebiliriz.

“yo @microsoft/sharepoint” komutunu çalıştırarak kurulumu başlatalım.

Yo bize kurulum aşamasında bazı seçenekler önerecektir. Bunların arasında önemli olanları makalenin ilerleyen bölümlerinde anlatacağım. Yazımın başında da belirttiğim üzere ihtiyacınıza uygun olarak React,Angular veya Jquery frameworklerinden ve kütüphanelerinden faydalanabilirsiniz veya hiçbirisini kullanmadan direkt olarak SPFx kurulumu yapabilirsiniz.

Son zamanların en çok tercih edilan JavaScript Frameworklerinden React seçenekler arasında geliyor. Microsoft’un arkasında durduğu Knockout’da seçenekler arasında bulunuyor. İhtiyaca göre birisini veya daha sonradan dahil ederek Vue, Angular da kullanabilirsiniz. Bu aşama ilerleyen yazılarımızda yer alacaktır diye tahmin ediyorum. Kurulumu aşağıdaki gibi tamamlayınız. Kurulum dosyalarının toplam boyutu 300mb kadar.Boyut sizi aldandırmasın, çekilen klasör sayısı 4.000 kadar bu nedenle işlem biraz sürüyor. Bağlantı ve bilgisayarınızın hızınıza göre tahminde bulunarak bir kahve molası verip kurulumun tamamlanmasını geçebilirsiniz.


Kurulum esnasında önerilen seçeneklerden “Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? (y/N)” seçeneği 8 Ağustos 2017 güncellemesinden sonra ortaya çıktı.

Bu seçenek aslında SpFx’e çok kıymetli bir yetenek katıyor. Geliştirdiğiniz WebPartlar tüm Tenantlar veya Site Collectionları içerisinde global bir şekilde eklenebiliyor. Bunun anlamı, geliştirip Deploy ettiğiniz bir WebPart tüm Tenantlar içerisinde hiçbir ikinci adımı takip etmeden görüntülenebilir ve kullanılabilir. Eğer n+1 Collection için WebPart geliştirmesi yapıyorsanız bu sizi ciddi bir efordan kurtaracaktır. Aslında SpFx ile yapılmak istenen şeylerden birisi geliştirme süreçleri içerisinde önemli bir rol alan Continous integreation’u olabildiğince Framework’un yetenekleri arasına katmaktır.

Kurulumun tamamlandığını varsayarak “gulp serve” komutunu çalıştırarak ilk arayüzle tanışabiliriz.


SpFx sayesinde Server-side geliştirmenin yanı sıra çok hızlı bir şekilde uygulamanızı çalıştırabilirsiniz. Bir WebPart üzerinde değişiklik yaptıktan sonra sahip olduğunuz OnPremise üzerinde IIS’I restart etmeniz, Pool kullanıcısına Reload işleminizi yapmanız gerekir. Online tarafta bunların hepsi “gulp serve” komutundan CTRL+C komutuyla çıktıktan sonra tekrar gulp serve komutu verilerek saniyeler içerisinde gerçekleştirilebilir.

Varolan WebPart’ı online üzerine tam anlamıyla deploy etmeden aşağıdaki url’den çok kolay bir şekilde demo olarak aynı Cloud’da çalışıyormuş gibi testinizi yapabilirsiniz.


Url formatı : https://<siteName>.sharepoint.com/sites/<siteName>/_layouts/15/workbench.aspx

İlgili kaynak koda PeakUp Github hesabından ulaşabilirsiniz.