Ofis Rezervasyon Uygulaması ile Ofise Dönüşe Güven

Covid ile iş yaşmamız nasıl değişti?

Birkaç yıl önce, ofis rezervasyon çözümlerini  yönetim programları yararlıydı ancak kritik iş yeri yönetim araçları değildi. Ancak koronavirüs salgını ve küresel karantina, işyeri koşulları hakkında bildiğimizi düşündüğümüz her şeyi yeniden değerlendirmemize neden oldu. Masa ve ofis rezervasyon uygulaması, günümüzün hibrit iş yerinde her zamankinden daha önemli. Şimdi bunun nedenlerini birlikte inceleyelim. Covid-19 salgınının bir sonucu olarak, çalışanların çoğu, ofise geri dönmek istemektedir. Sosyal mesafe kuralları ile birlikte bu istek önemli ölçüde değer kazandı. Devam eden pandemi nedeniyle, şu anda tüm şirket personeli ile masaları ve toplantı odalarını aynı anda kullanmaya başlamak çok tercih edilmiyor. Bu verilere göre daha düşük kapasiteli ofislerdeki kişi akışı yeni kriterlere uygun olarak dikkatle düzenlenmelidir. Kapasite kısıtlamalarından bağımsız olarak ofis rezervasyon uygulaması, firmaların sosyal mesafe oluşturmasını sağlar. Toplantı odaları, ve dinlenme alanları dahil olmak üzere tüm ortak ofis alanlarının maksimum kapasitesinin tanımlanmasına ve belirtilen alanların rezervasyonunun devre dışı bırakılmasına izin verir.

Ofise gelmeden Rezervasyon yapmayı unutma!

Ofis rezervasyon sistemi, kullanımdaki  alanlar arasında minimum bir mesafe belirleyerek herkesin güvenli bir şekilde çalışmasına olanak tanır. Sosyal mesafeyi uygulamaya yardımcı olan ofis rezervasyon uygulaması, ofisleri küçültmek ve ofis kiralama giderlerini en aza indirmek isteyen işletmeler için son derece faydalıdır. Ofis alanı ayırarak,  daha fazla çalışanı işe alabilirsiniz. Bu uygulamalar, ofis alanı ve olanaklarının kullanımını izlemenizi sağlar. Böylece çalışanlar kendilerini güvende hissedebilirler.

Rezervasyon süreçlerinizi tek bir panel üzerinden mi yönetmek istiyorsunuz?

Görüşmek istediğiniz ekibinizde ki iş arkadaşlarınızın programlarına göre rezervasyon günlerine göre plan yapabilmeniz verimli ve iş birliği içinde çalışmanızı sağlar. Hibrit çalışma günlerinizi belirleyip rezervasyonunuzu planlayabilirisiniz.

  • Çalışma haftalarının planlanmasına yardımcı olur.
  • Ofis kapasitesinin yönetimini kolaylaştırır.
  • Ekiplere göre rezervasyon yapmanızı sağlar.
  • Ekip içerisinde ki iletişimi güçlendirir.
  • Mail hesabınız ile ekip rezervasyon bilgilendirmesi yapılır.

Ofisi ziyaret ettiğiniz günlerde zamanınızı en iyi şekilde değerlendirin, çalışma alanlarınızı kendinize veya ekip arkadaşlarınıza ayırabilir ve gününüzü kusursuz bir şekilde planlayabilirsiniz.

Günlük veya haftalık yapılması gereken ofis ziyaretleriniz mi var?

“Rezervasyon Geçmişi” seçeneği ile,  bu rezervasyonlarınızı görüntüleyebilirsiniz. Aynı gün gelmek istediğiniz departmanınızdaki arkdaşlarınızın yaptığı rezervasyonlara “Rezervasyon Oluştur” sayfasından rezervasyonunuzu oluştuturken veya oluşturduktan sonra tarih filtreleri veya genel ölçekte göz atabilirsiniz. Rezervasyon yapmak istediğiniz tarih aralığını 1 ay önceden tamamlayabilirsiniz. Departmanınıza özel gelen takım arkaşlarınız rezervasyon yaptığı anda sizin e-mail hesabınıza düşen posta ile haberdar olabilirsiniz.

Yaklaşan rezervasyonlarınızı uygulama ana sayfasından hatırlatıcı olarak görebilir ve iptal etmek isterseniz “Rezervasyon Geçmişi” seçeneği ile iptal edebilirsiniz.

Sürekli gelişen dijitalleşme ve çalışma kültürü dünyasında, mevcut çalışma teknolojisi iş hayatınızı geliştirir ve üretkenliğinizi artırır. İster geleneksel çalışma düzeninde ister hibrit çalışma modelinde çalışın, bu yaklaşım özellikle Power Platformları ile dünyamızı daha kullanışlı hale getirecektir.

Masa rezervasyonu uygulamamızın detayına ulaşmak için linke tıklabilirsiniz.

SharePoint Framework (SpFx) İçerisinde jQuery Kullanımı

SharePoint Framework kullanarak geliştirme yaparken UI ve Http istekleri için kullanabileceğiniz birçok seçeneğe sahipsiniz. Popüler JavaScript Framework’lerinden bazılarının isimlerinden bahsetmek gerekirse Angular, React, Vue.js, Knockout başta gelebilir. Bunun yanında dilerseniz JavaScript kütüphanesi olarak jQuery de kullanabilirsiniz. Basit WebPartlar geliştirmek için Pure JavaScript’te iyi bir seçenek olarak köşede durabilir.

Kodun bakımı, yönetilebilir olması, devamlılığın sağlanması, birlikte geliştirilebilirlik ve UI’daki kompleksliğe göre en uygun framework’ü veya kütüphaneyi seçmek elbette size kalıyor. Ben bu yazımda SharePoint Framework ile birlikte jQuery nasıl kullanılabilir bundan bahsedeceğim. Sharepoint Framework ile jQuery‘yi seçme sebebim hem çokça geliştiricinin jQuery’e hâkim olması hem de topluluklar ve doküman anlamında iyi bir kaynağa sahip olması. Bunun yanında ek olarak ihtiyacım olan tüm taleplere cevap verebilir düzeyde olması yeterli bir sebep olacaktır diye düşünüyorum.

Önceki yazılarımda çokça bir proje için SharePoint Framework ile kurulumun nasıl yapıldığını çokça anlattım. Bu nedenle artık kurulum aşamasını geçiyorum ve kurulu bir ortama sahip olduğunuzu varsayıyorum.

Öncelikle “npm install –save jquery@2″ komutunu çalıştırarak projemiz içerisine kütüphaneyi indirelim.

Daha sonra “npm install –save @types/jquery@2” komutunu çalıştırarak jQuery Typinglerini de projemiz içerisine eklemiş olalım. Typingler sayesinde geliştirme yaparken çok güçlü bir intellisense (otomatik tamamlama) desteği alabiliriz.

SharePoint Framework kurulumuna nazaran bu kütüphaneler boyutları küçük olması nedeniyle yüklenme aşamasında çok fazla vakit almayacaktır.

WebPart ile ilgili işlemlerimizi tamamlayıp ilgili projeyi SharePoint online içerisinde deploy ederken scriptleri bundle ettiğimizde bu paket içerisinde jQuery’nin de olması gerekiyor. Bu nedenle configconfig.json dosyayı içerisine aşağıdaki tanımlamayı yapalım.

“externals”: {

“jquery”:”node_modules/jquery/dist/jquery.min.js”

}

sharepoint config dosyası

Projemizi geliştirdiğimiz .ts uzantılı dosyamızda, en yukarıda kütüphaneleri çağırdığımız namespace alanında aşağıdaki tek satırlık kodla jQuery’i hangi alias (takma isim) ile kullanacağımız da belirttikten sonra proje içerisinde jQuery’nin tüm yeteneklerinden faydalanabiliriz. Burada “as” direktifinden sonra kullanacağınız isimlendirme ile tüm class içerisinde sağlayacağınız erişim anahtar kelimesini belirttiğinizi de bildirmek isterim.

import * as jQuery from
‘jquery’;

Bir örnek vermek gerekirse, DOM içerisinde bir objeye en kolay aşağıdaki satırları kullanarak ulaşabilirsiniz.

örnek demo

Bir sonraki yazımızda görüşmek üzere.

SharePoint Framework’de Çok Dilli Geliştirme

SharePoint Framework ile uygulama geliştirirken çok dilli bir yapıya ihtiyacımız varsa bunu Resource yapısını kullanarak çok basit bir şekilde yapabiliriz.

Sharepoint Online ile bu özelliği kullanmak çok kolay. Eğer WebPart içerisinde tanımladığınız diller, kullanıcının alternatif olarak seçtiği diğer diller içerisinde yer alıyorsa gerekli dilde gösterim otomatik olarak yapılıyor.

Öncelikle kullanıcımızın varsayılan dil seçeneğinin yanında kullanmak isteyeceği alternatif dili nasıl ayarlayabiliriz bu adımı tamamlayalım. Bunu en kolay şekilde yapabilmek için aşağıda yer alan linki tıkladıktan sonra gereken adımları takip etmeniz yeterli olacaktır. https://eur.delve.office.com


Ben İngilizce diliyle SharePoint kullandığım için örneği de Türkçe ve İngilizce dil seçenekleri üzerinden anlatacağım. Görüldüğü üzere dil seçenekleri ve diğer alanlarla ilgili olarak Privacy(Gizlilik) ayarları da yapmak mümkün görünüyor.Çok dilli portalların yanında, birden fazla ülkeden SharePoint kullanıcısına sahipseniz buradaki ayarları kullanarak belli standartları genel olarak tanımlayabilmeniz mümkün.

Bir önceki SharePoint Framework’e Giriş ve WebPart Geliştirmek
makalesini takip ederek baştan bir WebPart projesi için kurulum yapabilirsiniz. Bu kurulumu yaptığınızı varsayıyorum.

Microsoft’un en son çıkarttığı, kısa sürede çok sevilen IDE diğer adıyla editörü yani VS Code veya Visual Studio kullanarak uygulamalarınızda gerekli kodu çok kolay bir şekilde yazabilirsiniz. Ben hafifliği ve Cross Platform geliştirmenin mümkün olabilmesi için bu makalede şimdilik Visual Studio Code kullanacağım.

Command Prompt ile gerekli klasörün içerisindeyken “code .” komutuyla projeyi VS Code ile açalım.



Kırmızıyla işaretlediğim alandan da görebileceğiniz üzere ağırlıklı olarak çalışacağımız klasör “src” klasörü. Bunun yanında WebPart uygulamaları geliştirirken versiyon kontrol sistemi olarak Git’de kullanabiliriz. Gerekli dosyalar varsayılan olarak gelmektedir.

Makalemizin ana konusu olan çok dilli yaptığı Resource üzerinden sağlayabilmek için srcloc klasörüne bir göz atalım.

mystrings.d.ts dosyamız Resource mantığı içerisinde “Key” bilgilerinin tutulduğu dosyamız. Bu dosyayı çok dilli bir yapı kullanmıyorsanız bile şimdilik silmeminizi tavsiye ederim. Dosya içerisinde varsayılan olarak gelen 3 adet Property yani key bulunuyor. Bunun yanında ben ekstra olarak ApplicationTitle adında, string veri türünde bir Property/Key daha tanımladım.

Şimdi loc içerisinde tr-TR global Locale Standartını kullanarak bizim için gerekli dosyamızı oluşturalım. Burada kullanacağınız tire karakterinin, alttire yerine normal tire olması önemlidir. Dosya içeriğini aşağıda görebilirsiniz.

Artık dil dosyasıyla ilgili olarak tanımlamalarımız bitti. Hemen WebPart uygulaması üzerinde nasıl kullanacağımızı görelim.

Öncesinde bu dosyaların oluşturulması, intellisense desteği alabilmek ve css ile ilgili. Scss uzantılı dosyalardan gelen uyarılardan kurtulmak için “gulp build” komutunu çalıştırarak projemizi derleyelim.

Proje ile ilgili tüm geliştirmeyi yapacağımız HelloWorldWebPart.js dosyasını açalım. Burada HelloWorldWebPart isimi benim kurulum aşamasında verdiğim isim, elbette siz farklı bir isim vermişseniz farklı olacaktır.

Eğer C# veya Java gibi programlama dillerine hakimseniz dosyayı ilk açtığınızda TypeScript yapısı size çok tanıdık gelecektir.

15. satırda yer alan Render methodu tüm C#’daki Console uygulamalarında yer alan Main methodu gibi uygulamanın başladığı Entry Point olarak kabul edilebilir. Burada proje içerisindeki CSS’in dahi çok programatik bir şekilde kullanıldığını görmek mümkün. Oluşturduğumuz Resource dosyası içerisindeki anahtarlara ${strings.PropertyName } notasyonuyla ulaşmak ve bu aşamada intellisense desteği de alabilmek mümkün.

Uygulamamız en basit şekilde görüntülemek için hazır. “gulp serve” komutuyla uygulamayı çalıştıralım ve iki farklı kullanıcı tarafında hangi dillerin kullanıldığını görelim.

İki farklı Browser’da iki farklı hesaptan giriş yapıp Web Part uygulamasını bir sayfaya eklediğimde elde ettiğimiz sonuç aşağıdaki gibidir!

Makalenin kaynak koduna buraya tıklayarak PeakUp Github hesabından ulaşabilirsiniz.

SharePoint Framework’e Giriş ve WebPart Geliştirmek

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://.sharepoint.com/sites//_layouts/15/workbench.aspx

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