SharePoint Framework SPFx Giriş ve İlk Uygulama HelloWorld

Merhaba arkadaşlar bugün sizlere sharepoint tarfında duyurulmuş olan son güncel framework olan SPFx ten bahsedeceğim ve tabiki her yeni yazılım konusu girişi zorunlu ilk projesi olan HelloWorld uygulamamızı yaparak ilk açılışımızı yapacağız 🙂 🙂

Bildiğiniz gibi Microsoft sharepoint tarafında Online versiyonu ile birlikte çok köklü bir değişikliğe giderek bir çok yenilik getirmiştir. Clientside yazılım kütüphaneleri ile birlikte kullanılabilirlik sağlaması ile sharepoint yazılımcıları biraz da olsa kendi kabuklarından çıkartabilmeyi başardığını düşünüyorum. Bu köklü değişikliklerin sonuncusu olan SPFx framework yapısı tüm bu konularda bir standart oluşturma yolunda bir adım olarak görmekteyim. Hem Online hem de On-Premise 2016 feature pack 2 ve 2019 versionlarında sorunsuz bir şekilde kullanabilmemize olanak sağlamaktadır.

Sharepoint yazılımcılarının en büyük sorunlarından biri olan kodlama kısmında sharepoint sunucusu olan bir makine olması ve derle çalıştır ile anlık yazılan uygulamayı tarayıcıda localhost olarak çalışamama sorunlarını da ortadan kaldırmaktadır.

SPFx frameworkün temel özelliklerini sıralayacak olursak :

• Javascript doğrudan sayfaya gömülüdür ve kullanıcı için iframe vs gibi herhangi bir özelleştirme bulunmamaktadır.
• Kontroller sayfa üzerinde DOM’da oluşturulur.
• Kontroller erişilebilirdir.
• Render, load, serialize ve deserialize vb yapılandırma değişikliklerini yazılımcı erişimi kolaydır.
• Herhangi bir Javascript Frameworkü ile kullanılabilmektedir. (React,Handlebars, Knockout, Angular vs.).
• Açık kaynak client developer toolları ile kullanılabilmektedir. (npm, TypeScript, Yeoman, webpack, ve gulp.).
• Performansı güvenlidir.
• Sharepoint üzerindeki tüm son kullanıcılar , yöneticiler, kişisel siteler vs rahatlıkla kullanabilir.
• Webpartlar hem modern sayfalara hem de klasik sayfa düzenlerine eklenebilir.

Aşağıdaki kurulum aşamalarını yaparak kullandığınız bilgisayarınızı SPFx framwork ile geliştirme yapmaya hazır hale getirebilirsiniz.

• İlk olarak bilgisayarınıza NodeJS LTS 10 versiyonunun yüklemeniz gerekmektedir. Eğer zaten bilgisayarınız da yüklü ise “node -v” komutunu kullanarak yüklü sürüm versiyonunu görebilir ve güncel değil ise güncel versiyona yükseltmeniz gerekmektedir. Eğer windows işletim sistemi olmayan Mac bilgisayarları kullanıyorsanız homebrew kurarak NodeJS yönetimini sağlayabilirsiniz.
• Kodlama işlemlerini yapabilmeniz için bilgisayarınız da bir kod editör programı ya da IDE olması gerekmektedir. Bu kısımda Microsoft tarafından önerilen 3 tane editör/IDE bulunmaktadır. Bu üç tanesinden herhangi birini yükleyerek kullanabilirsiniz. Ben Microsoftun kendi ürünü olduğu için Visual Studio Code kurup bunun üzerinden devam ediyor olacağım. Bu editör\IDE isimleri ve adresleri:
  • Visual Studio Code
  • Atom
  • Webstorm
• Bu kurulumları tamamladıktan sonra SPFx projemizi oluşturmak ve paketleme yapabilmek için Yeoman ve Gulp kurulumlarını yapmamız gerekecektir. Bunların kurulumu için komut istemcisine gelerek aşağıdaki kodu yazıyoruz ve enter diyoruz. Bu aşamayı bir defa yapmanız yeterli olacaktır ve biraz zaman almaktadır.

• Bu kurulumu da tamamladıktan sonra yine tek bir kurulum aşamasında olan Yeoman Sharepoint oluşturucuyu kurmamız gerekmektedir. Bu da tek seferlik bir kurulum ve biraz zaman alabilmektedir.

• Bu kurulumu da tamamladıktan sonra uygulamamızı tarayıcı da localhost ile ayağı kaldırdığımız da tarayıcı sertifika hatası vermemesi ve sorunsuz çalışabilmemiz için projelerimizi oluşturduğumuz ve çalıştıracağımız dosya konumunda aşağıdaki kodu komut istemcisinde çalıştırıyoruz. Bu sayede developer sertifikamızı olmuş olacaktır.

Yukarıdaki tüm aşamaları sorunsuz bir şekilde tamamladıktan sonra kurulum işlemi aşamasını tamamlamış bulunuyoruz. Bu noktadan sonra istediğiniz kadar Sharepoint SPFx projesi oluşturabilir ve paketleyebilirsiniz.

Bu kısımdan sonra projemizi oluşturma aşamasına geçiyoruz. Cmd komut iştemcisini açıyoruz ve projemizi oluşturacağımız dosyanın dizinine başına “cd” ekleyerek konumuna yazıp gidiyoruz. Ben C sürücüsü altında “sp” adında bir klasör oluşturdum ve bu klasöre gitmek için “cd C:\sp” diyerek bu konumda komut satırımızın çalışmasını sağlıyoruz.

İlk olarak aşağıdaki yeomen kodunu kullanarak Sharepoint SPFx projemizi oluşturma işlemini başlatıyoruz.

Bu komut satırını çalıştırdıktan sonra bize aşama aşama oluşturulacak proje ile ilgili bilgileri isteyecektir.

İlk olarak bizde oluşturulacak ilk projemizin adını sormaktadır. Eğer proje adı yazmadan direk enter tuşuna basarsanız parantez içinde yazan “sp” adını otomatik olarak proje ismi olarak verecektir. Ben proje adı olarak “SharePointFirstSPFxProject” yazıp enter tuşuna basıyorum.

Sonraki aşamada oluşturulacak paketin hangi sharepoint versiyonunda kullanılacağını seçmemiz istenmektedir. Burada yukarıda da bahsettiğim gibi isterseniz sadece online versiyon mu, 2019 ve online mı yoksa 2016,2019 ve online versiyonunda mı çalışıp çalışmayacağı seçeneği karşımıza çıkmaktadır. Bu seçenekte sadece sharepoint sunucusunda gelmektedir. Windows işletim sistemine kurulduğu zaman 2016,2019 ve online seçeneği sadece olacağı için bu aşama otomatik seçili olarak ilerlemektedir. Bundan dolayı da herhangi bir tercih ekranı gelmemektedir.

Burada seçilecek seçenek eğer sadece online versiyon olacaksa ekstra 2 soru daha gelecektir. Bu aşamaları da görmek için sadece online versiyonu seçerek devam ediyoruz.

Bir sonraki aşamada bizden oluşturulacak proje dosyasının bulunduğumuz dosya da mı yoksa proje adında bir klasör oluşturularak bu proje içinde mi oluşturulmasını soruyor. Ben bu kısımda projeleri ayırabilmek adına proje adında bir klasör oluşturarak onun içine oluşturmasını istiyorum ve ok ile mavi imleci “Create a subfolder with solution name” seçeneğine getirerek enter tuşuna basıyorum.

Burada paketin tüm siteye tenant admin yetkisi ile dağıtılıp dağıtılmaması için izin istemektedir. Bu aşama dediğim gibi sadece online kısımda gelecek bir sorudu ve burayı “N” yazarak geçiyoruz.

Bu soru da aynı durumun Web API paylaşımları için tenant admin yetki erişimi verilip verilmemesi kısmıdır. Bu soru kısmıda sadece online seçildiğinde gelmektedir. Bu kısımda da “N” yazarak geçiyoruz.

Bir sonraki aşamamız da ise oluşturulacak componentin tipini seçmemiz istenmektedir. Bu kısımda da sharepoint versiyonlarına göre değişiklik göstermektedir.

• Sadece Sharepoint Online versiyonu seçildiğinde WebPart, Extension ve Library seçenekleri gelmektedir.
• Sharepoint 2019 ve Online versiyonları seçildiği zaman WebPart ve Extension seçenekleri gelmektedir.
• Sharepoint 2016, 2019 ve Online versiyonları seçildiği zaman sadece WebPart seçeneği gelmektedir.

Ben burada ilk uygulamamda webpart olmasını istediğim için “WebPart” seçerek devam ediyorum.

Bu seçimden sonra bizden oluşturulacak olan webpart ile ilgili bilgileri istemektedir. Eğer birşey yazmaz ve direk enter tuşuna basarsanız “HelloWorld” olarak isim verecektir. Ben ilk uygulamamın adının bu olmasını istediğim için enter tuşuna basarak ilerliyorum.

Daha sonra bu webpartımız ile ilgili açıklama bilgisini istemektedir. Burada da boş bırakıp direk enter tuşuna basarsanız eğer belirlemiş olduğunuz webpart isminin sonuna “description” ekleyerek açıklama olarak bunu tanımlayacaktır. Parantez içindede göstermektedir. Ben değiştirmek istemediğim için enter tuşu ile bu değeri verip ilerliyorum.

Bu kısımda projemiz ve webpart oluşturma aşamamızın son kısmı oluşturulacak olan bu webpartımızın hangi frameworkü kullanmasını istediğimizi sormaktadır. Burada ilk uygulama da herhangi birşey seçmeden direkt “Not JavaScript framework” seçerek işlemimi tamamlıyorum ve proje ile webpartın belirlediğim ayarlarda oluşmasını bekliyorum.

Gördüğünüz gibi projemiz sorunsuz bir şekilde oluşturuldu ve kullanıma hazır. Projemizi proje adında yeni bir alt klasör içinde oluşturmasını seçtiğimiz için projemizi gulp üzerinde çalıştırabilmemiz için proje dosyamıza gitmemiz gerekmektedir. Bunun için “cd C:\sp\SharePointFirstSPFxProject” yazarak proje dosyamıza gidiyoruz ve “gulp serve” komutunu çalıştırarak projemizi localhostta ayağa kaldırıyoruz.

Gördüğünüz gibi localhost adresinde uygulamamız açıldı ve sayfadaki artı işaretine bastığımızda oluşturduğumuz webpart gelmektedir. Burada webpartımıza tıklayarak sayfaya ekleyip çalıştırabiliyoruz.

Webpartımızı sayfaya ekledikten sonra sorunsuz gelmektedir. Burada eğer sharepoint tarafında listeden veya ortama bağlı bir veri çekme işlemi yaparak webpart geliştirmenizi yaptıysanız canlı verilerle de ya da sharepoint sitesinde uygulamanızı görmek için sharepoint gulp çalışırken aşağıdaki url yapısında açarsanız sharepoint adresinizi orada da bu webpartları görüp kullanabilirsiniz.

https://your-sharepoint-site/_layouts/workbench.aspx

Projeyi visual studio code kullanarak açıp kodlarını inceleyip değişiklij yapabilir ve tekrar “gulp serve” diyerek yaptığınız değişiklikleri görebilirsiniz.

Bu şekilde kurulumları yaparak ilk uygulamamızı oluşturduk ve çalıştırdık. ilk uygulamanın proje dosyasını aşağıdan indirebilirsiniz. Projeyi indirdikten sonra “npm install” yaparak npm paketlerini yüklemeyi unutmayın.